/* ---------- admin ---------- */
dialog#login{
  border:3px solid var(--line); border-radius:20px;
  background:var(--ground); color:var(--cocoa);
  padding:0; width:min(400px,92vw);
}
dialog#login::backdrop{background:rgba(20,13,10,.72)}
.login-box{display:flex; flex-direction:column; gap:10px; padding:26px 28px; color:var(--cocoa)}
.login-box h2{font-size:1.35rem}
.login-box p{font-size:.9rem; color:var(--cocoa-soft)}
.login-box label{margin-top:6px}
.login-err{color:var(--stop); font-weight:700; font-size:.86rem}
.login-acts{display:flex; gap:10px; justify-content:flex-end; margin-top:14px; align-items:center}
.adm-who{font-family:"DM Mono",monospace; font-size:.72rem; color:var(--cocoa-soft)}
.adm-page{
  border:3px solid var(--line); border-radius:var(--r); background:var(--ground);
  color:var(--cocoa); max-width:var(--maxw); margin:22px auto 40px; overflow:hidden;
}
.adm-head{position:sticky; top:0; background:var(--cream); border-bottom:3px solid var(--line);
  padding:16px 22px; display:flex; align-items:center; gap:12px; justify-content:space-between; z-index:2}
.adm-head h2{font-size:1.2rem}
.adm-body{padding:22px; display:grid; gap:22px; overflow:auto}
.adm-sec{border:2px solid var(--line); border-radius:14px; padding:18px; background:var(--panel)}
.adm-sec>h3{font-size:1rem; margin-bottom:14px}
.adm-row{display:grid; grid-template-columns:1fr auto auto auto; gap:10px; align-items:center; margin-bottom:9px}
.adm-row input[type="text"]{min-width:0}
.mini{font-size:.78rem; color:var(--cocoa-soft); margin-top:10px}
.adm-foot{position:sticky; bottom:0; background:var(--cream); border-top:3px solid var(--line);
  padding:14px 22px; display:flex; gap:12px; align-items:center; justify-content:flex-end}
.savestate{margin-inline-end:auto; font-size:.85rem; font-weight:700}
.iconbtn{border:2px solid var(--line); background:var(--panel); color:var(--cocoa); cursor:pointer;
  border-radius:9px; width:34px; height:34px; display:grid; place-items:center; font-size:1rem}
.iconbtn:hover{background:var(--berry-solid); color:#fff}

/* ---------- painel: abas e KPIs ---------- */
.adm-tabs{display:flex; gap:6px; flex-wrap:wrap; padding:14px 22px 0; background:var(--cream)}
.adm-tabs button{font-family:"DM Mono",monospace; font-size:.76rem; cursor:pointer; padding:8px 13px;
  border:2px solid var(--line); border-bottom:0; border-radius:11px 11px 0 0; background:var(--panel); color:var(--cocoa)}
.adm-tabs button[aria-selected="true"]{background:var(--sun); color:var(--ink); font-weight:500}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:18px}
.kpi{background:var(--panel); border:2px solid var(--line); border-radius:14px; padding:14px 16px}
.kpi b{display:block; font-family:"DM Mono",monospace; font-size:1.5rem; line-height:1.1}
.kpi span{font-size:.78rem; color:var(--cocoa-soft)}
.kpi.alert{background:var(--berry-solid); color:#fff; border-color:var(--line)}
.kpi.alert span{color:rgba(255,255,255,.85)}
.kan{display:grid; gap:10px}
.kan-card{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start;
  background:var(--panel); border:2px solid var(--line); border-radius:14px; padding:14px 16px}
.kan-card.late{border-color:var(--berry-solid); border-width:3px}
.kan-card .top{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:7px}
.kan-card .who{font-weight:800}
.kan-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(122px,1fr)); gap:8px; margin-top:10px}
.kan-grid input,.kan-grid select{font-size:.85rem; padding:8px 10px}
.paid-no{background:var(--cream-deep)} .paid-half{background:var(--sun)} .paid-full{background:var(--leaf)}
.late-flag{font-family:"DM Mono",monospace; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
  background:var(--berry-solid); color:#fff; border-radius:999px; padding:3px 9px}
.adm-note{background:var(--sun-pale); border:2px solid var(--line); border-radius:12px; padding:12px 14px;
  font-size:.84rem; margin-bottom:16px}
.txt-edit{width:100%; min-height:150px; font-family:"DM Mono",monospace; font-size:.82rem; line-height:1.6}


/* ---------- painel como página ---------- */
body{min-height:100%}
.adm-top{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  background:var(--cream); color:var(--cocoa); border-bottom:3px solid var(--line);
  padding:12px 22px;
}
.adm-top strong{font-family:"Fraunces",serif; font-size:1.1rem}
.adm-top .adm-who{margin-inline-start:auto}
.adm-back{font-size:.88rem; text-decoration:none; font-weight:700; color:var(--link-on-cocoa)}
.adm-back:hover{text-decoration:underline}

.adm-gate{display:grid; place-items:center; padding:60px 20px}
.adm-gate .login-box{
  background:var(--panel); border:3px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow); width:min(400px,100%);
}

.adm-offline{
  max-width:var(--maxw); margin:18px auto 0; padding:14px 18px;
  background:var(--sun-pale); color:var(--cocoa);
  border:2px solid var(--line); border-radius:14px; font-size:.88rem;
}
.adm-page .adm-body{max-height:none; overflow:visible}
.adm-page .adm-head{position:sticky; top:0}
.adm-page .adm-foot{position:sticky; bottom:0; flex-wrap:wrap}
.adm-mode{font-size:.8rem; color:var(--cocoa-soft); flex:1 1 220px; min-width:0}

/* área de colar: aceita Ctrl+V, arrastar e clicar, as três coisas */
.paste-zone{
  border:2px dashed var(--line); border-radius:14px; background:var(--ground);
  padding:20px 18px; text-align:center; cursor:pointer; color:var(--cocoa);
  display:flex; flex-direction:column; gap:4px; align-items:center;
  transition:border-color .16s var(--ease-out), background .16s var(--ease-out);
}
.paste-zone b{font-family:"Fraunces",serif; font-size:1.02rem}
.paste-zone span{font-size:.82rem; color:var(--cocoa-soft); max-width:46ch}
.paste-zone:hover,.paste-zone:focus-visible{border-color:var(--sun); background:var(--panel)}
.paste-zone.drag{border-color:var(--sun); background:var(--panel); border-style:solid}
.paste-zone.busy{border-style:solid; border-color:var(--leaf)}

/* etiquetas da galeria: clicar em vez de digitar */
.tag-pick{display:flex; flex-wrap:wrap; gap:5px; align-items:flex-start}
.tag-chip{
  font-family:"DM Mono",monospace; font-size:.68rem; cursor:pointer;
  border:2px solid var(--line); background:var(--ground); color:var(--cocoa-soft);
  border-radius:999px; padding:3px 9px; line-height:1.4;
}
.tag-chip:hover{border-color:var(--cocoa-soft)}
.tag-chip[aria-pressed="true"]{background:var(--sun); color:var(--ink); border-color:var(--line); font-weight:500}
.adm-row:has(.tag-pick){align-items:start}
@media (max-width:620px){ .adm-top{padding:10px 16px} .adm-page{margin-inline:12px} }

/* posição na fila — o número que o visitante vê, aqui com nome do lado */
.fila-pos{font-family:"DM Mono",monospace; font-size:.68rem; letter-spacing:.04em;
  background:var(--sun); color:var(--ink); border:2px solid var(--line);
  border-radius:999px; padding:2px 9px; white-space:nowrap}

/* nome publico: o unico campo desta aba que o visitante le, entao fica
   sozinho numa linha em vez de sumir no meio da grade */
.pub-field{display:flex; gap:9px; align-items:center; margin-top:8px}
.pub-field span{font-family:"DM Mono",monospace; font-size:.66rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--cocoa-soft); white-space:nowrap}
.pub-field input{font-size:.9rem; font-weight:700; padding:8px 11px}