/* Painel do totem — pensado para uso no celular, na visita comercial. */
:root{
  --paper:#EDEFF2;--panel:#fff;--ink:#14171C;--mid:#5C646F;--line:#D3D8DF;
  --azul:#2F5BEA;--azul-fraco:#E5EAFD;--verde:#0E7A5F;--verde-fraco:#DFF3EC;
  --amarelo:#9A6B00;--amarelo-fraco:#FCF0D4;--vermelho:#B3400C;--vermelho-fraco:#FBE4DA;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.5}

.centro{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.entrada{width:100%;max-width:340px}
.entrada h1{font-size:19px;margin:14px 0 18px}
.entrada label{display:block;font-size:10px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mid);margin-bottom:5px}
.entrada input{width:100%;margin-bottom:16px}
.entrada .btn{width:100%}
.erro{background:var(--vermelho-fraco);color:var(--vermelho);padding:9px 12px;
  border-radius:4px;font-size:14px;margin-bottom:14px}

.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 16px;background:rgba(237,239,242,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.marca{font-family:var(--mono);font-size:13px;display:flex;align-items:center;gap:7px}
.fraco{color:var(--mid)}
.pt{width:7px;height:7px;border-radius:50%;background:var(--azul);box-shadow:0 0 0 3px var(--azul-fraco)}
nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;align-items:center}
nav button{padding:6px 12px;font:inherit;font-size:13px;border:1px solid transparent;
  border-radius:4px;background:none;color:var(--mid);cursor:pointer}
nav button.on{background:var(--panel);border-color:var(--line);color:var(--ink);font-weight:500}

.area{max-width:920px;margin:0 auto;padding:18px 16px 80px}
.cartao{background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:16px;margin-bottom:14px}
.cartao-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
h2{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mid)}
.nota{font-size:12.5px;color:var(--mid);margin-top:12px}
.oculto{display:none}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media(max-width:640px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--ink);color:#fff;border-radius:6px;padding:13px}
.kpi .r{font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.kpi .v{font-family:var(--mono);font-size:23px;font-weight:600;margin-top:4px}
.kpi .s{font-size:11.5px;opacity:.75;margin-top:2px}

.linha-slot{display:flex;align-items:center;gap:11px;padding:11px 4px;
  border-bottom:1px solid var(--line);cursor:pointer}
.linha-slot:hover{background:#F7F9FB}
.linha-slot:last-child{border-bottom:0}
.num{font-family:var(--mono);font-size:12px;color:var(--mid);width:22px;flex-shrink:0}
.corpo{flex:1;min-width:0}
.corpo .t{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.corpo .m{font-size:12px;color:var(--mid);display:flex;gap:9px;flex-wrap:wrap;margin-top:2px}
.pil{display:inline-block;padding:1px 7px;border-radius:3px;font-size:11px;font-weight:500}
.p-proprio{background:var(--azul-fraco);color:#22409E}
.p-anuncio{background:var(--verde-fraco);color:var(--verde)}
.p-livre{background:#EEF1F5;color:var(--mid)}
.p-imagem{background:#F1E9DC;color:#7A5A21}
.p-off{background:var(--vermelho-fraco);color:var(--vermelho)}
.mover{display:flex;flex-direction:column;gap:1px;flex-shrink:0}
.mover button{border:1px solid var(--line);background:var(--panel);border-radius:3px;
  font-size:10px;line-height:1;padding:3px 6px;cursor:pointer;color:var(--mid)}

input,select,textarea{width:100%;padding:9px 11px;font:inherit;font-size:15px;
  border:1px solid var(--line);border-radius:4px;background:#FBFCFD;color:var(--ink)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--azul);outline-offset:1px;border-color:transparent}
textarea{resize:vertical;min-height:70px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campos .campo.largo{grid-column:1/-1}
@media(max-width:560px){.campos{grid-template-columns:1fr}}
.campo label{display:block;font-size:10px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mid);margin-bottom:4px}
.campo .ajuda{font-size:11.5px;color:var(--mid);margin-top:4px}

.horas{display:flex;flex-wrap:wrap;gap:4px}
.horas label{display:flex;align-items:center;justify-content:center;width:38px;height:30px;
  border:1px solid var(--line);border-radius:3px;font-family:var(--mono);font-size:11.5px;
  cursor:pointer;background:#FBFCFD;margin:0;letter-spacing:0;text-transform:none}
.horas input{position:absolute;opacity:0;width:0;height:0}
.horas label.on{background:var(--azul);border-color:var(--azul);color:#fff}

.btn{padding:9px 15px;font:inherit;font-size:14px;border:1px solid var(--line);
  border-radius:4px;background:var(--panel);cursor:pointer;color:var(--ink);
  text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--mid)}
.btn.pri{background:var(--azul);border-color:var(--azul);color:#fff}
.btn.gh{border-color:transparent;background:none;color:var(--azul);padding:6px 9px;font-size:13px}
.btn.perigo{color:var(--vermelho);border-color:var(--line)}
.acoes{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}

.cortina{position:fixed;inset:0;background:rgba(12,15,20,.55);z-index:40;
  display:none;align-items:flex-end;justify-content:center}
.cortina.aberta{display:flex}
.folha{background:var(--panel);width:100%;max-width:640px;max-height:92vh;overflow:auto;
  border-radius:10px 10px 0 0;padding:18px}
@media(min-width:640px){
  .cortina{align-items:center}
  .folha{border-radius:8px}
}
.folha-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.folha-topo h2{font-size:14px;letter-spacing:.02em;text-transform:none;color:var(--ink)}

.faixa{border-left:3px solid var(--amarelo);background:var(--amarelo-fraco);
  padding:11px 13px;border-radius:0 5px 5px 0;font-size:14px;margin-bottom:14px;color:#6B4B00}
.faixa b{font-weight:600}

.aviso{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(14px);
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:4px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:60}
.aviso.on{opacity:1;transform:translateX(-50%)}
.aviso.ruim{background:var(--vermelho)}