/* Tap & Go — todo o visual mora aqui.
   A logica esta em app.js e nao precisa ser lida para mexer no design.

   AS FICHAS SAO DO DESIGN SYSTEM, copiadas valor a valor:
   claude.ai/artifact/Wgp8N7Boa928cF5fTrmGAq

   Azul lidera, laranja move -- 60% superficie, 30% azul, 10% laranja.
   O laranja --hi so vale para grafico ou texto de 24px para cima; texto
   pequeno em laranja usa --hi-text, que passa no contraste.
   Verde e vermelho sao estado de saida, nunca enfeite.

   Quatro valores NAO vem do sistema e foram derivados por mim, porque o
   sistema nao os define: --line-2, --go-soft, --alert-soft e --wait-soft. */

:root{
  --ground:#ffffff;--surface:#ffffff;--surface-2:#f4f6fa;
  --ink:#0b1e46;--ink-2:#3b4a63;--muted:#5c6b83;
  --line:#dce3ef;--line-2:#c7d1e3;
  --brand:#1456d8;--brand-deep:#0a3fa8;--brand-lite:#2a6bf0;--brand-soft:#eaf1fd;
  --hi:#ff7a1a;--hi-ink:#3d1600;--hi-soft:#fff1e6;--hi-text:#c2530a;
  --go:#138a4a;--go-soft:#e6f4ec;
  --wait:#5c6b83;--wait-soft:#eef1f7;--alert:#c62828;--alert-soft:#fbe9e9;
  --shadow:0 1px 2px rgba(11,30,70,.05),0 6px 20px rgba(11,30,70,.06);
  /* A TV usa o fundo escuro do proprio sistema, nao um cinza qualquer. */
  --board-bg:#0a1430;--board-ink:#f2f5fb;--board-muted:#97a4bc;--board-line:#24345c;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:14px;--r-sm:8px;--r-pill:999px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0a1430;--surface:#0a1430;--surface-2:#111d40;
  --ink:#f2f5fb;--ink-2:#c9d3e6;--muted:#97a4bc;
  --line:#24345c;--line-2:#2f4170;
  --brand:#3d7bf5;--brand-deep:#0a3fa8;--brand-lite:#5b8df5;--brand-soft:#16306a;
  --hi:#ff8a33;--hi-ink:#2a1200;--hi-soft:#4a2508;--hi-text:#ffa766;
  --go:#3ccb7f;--go-soft:#0e2e1f;
  --wait:#97a4bc;--wait-soft:#16244a;--alert:#ff6b6b;--alert-soft:#3a1414;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 6px 22px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  --ground:#0a1430;--surface:#0a1430;--surface-2:#111d40;
  --ink:#f2f5fb;--ink-2:#c9d3e6;--muted:#97a4bc;
  --line:#24345c;--line-2:#2f4170;
  --brand:#3d7bf5;--brand-deep:#0a3fa8;--brand-lite:#5b8df5;--brand-soft:#16306a;
  --hi:#ff8a33;--hi-ink:#2a1200;--hi-soft:#4a2508;--hi-text:#ffa766;
  --go:#3ccb7f;--go-soft:#0e2e1f;
  --wait:#97a4bc;--wait-soft:#16244a;--alert:#ff6b6b;--alert-soft:#3a1414;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 6px 22px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--sans);font-weight:700;margin:0;text-wrap:balance;letter-spacing:.01em}
button{font-family:inherit;font-size:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:960px;margin:0 auto;padding:22px 18px 72px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.row{display:flex;align-items:center}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.pill.wait{background:var(--wait-soft);color:var(--wait)}
.pill.called{background:var(--hi-soft);color:var(--hi-text)}
.pill.gate{background:var(--go-soft);color:var(--go)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.notice{padding:12px 14px;border-radius:var(--r);font-size:14px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2)}
.notice.warn{background:var(--hi-soft);border-color:var(--hi);color:var(--hi-ink)}
.notice.bad{background:var(--alert-soft);border-color:var(--alert);color:var(--alert)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .notice.warn{color:var(--hi)}}
:root[data-theme="dark"] .notice.warn{color:var(--hi)}
label{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
input,select{width:100%;padding:11px 12px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--surface);color:var(--ink);font-family:inherit;font-size:16px}
/* Todo CONTEUDO digitado e gravado em maiuscula pelo servidor, e o campo
   mostra isso enquanto se digita -- ninguem se surpreende com o que ficou.
   Ficam de fora: usuario e senha (senha diferencia maiuscula), telefone,
   coordenadas e os campos de busca. */
#cn,#cr,#dn,#dk,#sn,#nn,.pcpwhoin,.pcpcarin{text-transform:uppercase}
.btn{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  padding:9px 15px;border-radius:8px;font-weight:700;font-size:13.5px;letter-spacing:.015em}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{opacity:.88}
.btn.ghost{border-color:transparent;background:none;color:var(--muted)}
.btn.ghost:hover{color:var(--ink);background:var(--surface-2)}
.btn.sm{padding:6px 11px;font-size:12px;letter-spacing:.02em}
.btn.go{background:var(--go);border-color:var(--go);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* ── Celular do pai ─────────────────────────────────────────────────────
   Usado dirigindo, no sol, com uma mao. Alvo minimo 44px, contraste alto,
   e o menor numero possivel de coisas na tela. */
.parent{max-width:440px;margin:0 auto;padding:20px 20px 32px;display:flex;flex-direction:column;min-height:100vh}
.brand{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.bwrap{display:flex;align-items:baseline;gap:9px;min-width:0}
.brand b{font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:.02em;color:var(--brand)}
.brand span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hello{font-family:var(--sans);font-size:40px;font-weight:700;line-height:1.1;margin-bottom:8px}
.opill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:5px 13px;
  background:var(--go-soft);border:1px solid var(--go);
  font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--go)}
.odot{width:8px;height:8px;border-radius:50%;background:currentColor;display:block;flex:none}
.opill.shut{background:var(--surface-2);border-color:var(--line-2);color:var(--muted)}
/* NAO estica. Com flex:1 a lista de filhos crescia para empurrar o
   CHEGUEI ate o rodape -- bom no celular, onde o conteudo preenche a
   tela, e um buraco de um palmo no iPad, com os filhos no alto e o
   botao perdido la embaixo. O conteudo flui de cima para baixo e
   acabou; a tela continua com 100vh, entao o fundo nao corta. */
.pbody{flex:none;display:flex;flex-direction:column;gap:8px;padding:20px 0 0}
.grouplbl{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:6px 0 0}
.grouplbl.cp{display:flex;align-items:center;gap:10px;color:var(--hi-text);margin-top:12px}
.grouplbl.cp i{flex:1;height:1px;background:var(--line);display:block}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.kid{display:flex;align-items:center;gap:12px;width:100%;min-height:66px;padding:12px 14px;
  text-align:left;border:2px solid var(--brand);border-radius:13px;background:var(--brand-soft);
  color:var(--ink);transition:border-color .12s,opacity .12s}
.kid[aria-pressed="false"]{border-style:dashed;border-color:var(--line-2);background:none;opacity:.75}
.kid.cp{border-style:dashed;border-color:var(--hi);background:var(--hi-soft)}
.kid.cp[aria-pressed="false"]{border-color:var(--line-2);background:none}
.kc{width:26px;height:26px;border-radius:7px;background:var(--brand);color:#fff;flex:none;
  display:grid;place-items:center;font-size:15px;font-weight:700}
.kid[aria-pressed="false"] .kc{background:none;border:2px solid var(--line-2)}
.kid.cp[aria-pressed="true"] .kc{background:var(--hi)}
.kt{min-width:0;display:block}
.kn{font-family:var(--sans);font-size:22px;font-weight:600;line-height:1.15;display:block}
.kr{font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--ink-2);display:block}
.hint{font-size:12.5px;line-height:1.4;color:var(--ink-2);text-align:center;margin:9px 0 0}
.hint a{color:var(--hi-text);font-weight:700}
.hint.big{font-size:15px;font-weight:600;color:var(--ink-2);padding:8px 0}
.pfoot{padding-top:14px;margin-top:16px;border-top:1px solid var(--line)}
#cheguei{width:100%;border:0;min-height:74px;border-radius:16px;background:var(--hi);color:#fff;
  font-family:var(--sans);font-size:36px;font-weight:700;letter-spacing:.05em;
  padding:14px 12px;line-height:1;box-shadow:0 4px 0 rgba(0,0,0,.18)}
/* A autorizacao ocupa a tela inteira: e o unico momento em que o pai esta
   assumindo responsabilidade por outra pessoa buscar o filho dele. */
.cprow.user{border-left-color:var(--brand)}
.perms{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.permchk{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:var(--ink-2);text-transform:none;letter-spacing:0;margin:0}
.permchk input{width:auto;flex:none}
.permchk i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);
  border-radius:3px;padding:0 4px}
.permline{font-size:12.5px;font-weight:600;color:var(--brand);margin-top:6px}
.permwarn{width:100%;font-size:12px;font-weight:600;color:var(--alert);margin-top:4px}
.upass{display:flex;gap:8px;align-items:center;margin-top:8px;max-width:420px}
.upass input{font-size:14px;padding:8px 11px}
.whoacts{display:flex;align-items:center;gap:8px}
/* Ferramenta de teste: listrada, para ninguem confundir com botao de
   operacao. Sai antes da escola usar. */
.btn.test{border-color:var(--alert);color:var(--alert);
  background:repeating-linear-gradient(135deg,transparent 0 6px,var(--alert-soft) 6px 12px)}
.btn.test:hover{background:var(--alert-soft)}
.whobar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 12px;margin-bottom:12px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface-2);font-size:12px;font-weight:600;color:var(--ink-2)}
.authbox label{margin-bottom:5px}
.authwrap{flex:1;display:flex;align-items:center;padding:16px 0}
.authbox{width:100%;border:2px solid var(--brand);border-radius:16px;
  padding:20px 18px;background:var(--surface)}
.authtext{font-family:var(--sans);font-size:24px;font-weight:600;
  line-height:1.25;margin:10px 0 0;text-wrap:pretty}
.authbox .pcp{margin-top:18px;min-height:64px;font-size:23px}
.authbox .btn.wide{margin-top:8px}
/* O botao de carona NUNCA pode se parecer com o CHEGUEI: cor da marca,
   contornado, nao preenchido. O pai dirigindo nao erra o toque. */
.pcp{width:100%;min-height:74px;border-radius:16px;background:none;
  border:2px solid var(--brand);color:var(--brand);
  font-family:var(--sans);font-size:26px;font-weight:700;
  letter-spacing:.03em;padding:14px 16px;line-height:1.1}
.pcp:hover{background:var(--brand-soft)}
.pcp.solid{background:var(--brand);color:#fff}
.pcp:disabled{border-color:var(--line-2);color:var(--muted);background:none;cursor:not-allowed}
.pcptag{font-family:var(--sans);font-size:34px;font-weight:700;
  text-align:center;letter-spacing:.06em;padding:10px 12px}
.cprow.req{border-left-color:var(--brand);background:var(--brand-soft)}
.reqbox{border-color:var(--brand);margin-bottom:16px}
#cheguei:disabled{background:var(--wait-soft);color:var(--muted);box-shadow:none}
#cheguei:not(:disabled):active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
/* Na fila: a posicao e a unica coisa que ele olha de relance. */
.posbox{text-align:center;padding:8px 0 0}
.poslbl{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.posnum{font-family:var(--sans);font-size:clamp(92px,42vw,168px);
  font-weight:700;line-height:.92;color:var(--brand)}
.pthree{display:flex;margin-top:6px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pthree>div{flex:1;padding:9px 6px;border-right:1px solid var(--line)}
.pthree>div:last-child{border-right:0}
.pv{font-family:var(--sans);font-size:26px;font-weight:700;line-height:1}
.pl{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.track{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.trackrow{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);
  border-left:4px dotted var(--line-2);border-radius:11px}
.trackrow[data-st="called"]{border-left:4px solid var(--hi);background:var(--surface-2)}
.trackrow[data-st="gate"]{border-left:4px solid var(--go);background:var(--surface-2)}
.tt{flex:1;min-width:0}
.trackrow .tn{font-family:var(--sans);font-size:21px;font-weight:600;line-height:1.15}
.trackrow .tr{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--muted)}
.tchip{display:inline-flex;align-items:center;gap:4px;flex:none;padding:4px 8px;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:1.5px dotted var(--line-2);border-radius:3px;color:var(--ink-2)}
.tg{font-family:var(--sans);font-size:12px;line-height:1}
.trackrow[data-st="called"] .tchip{border-style:solid;border-color:var(--hi);border-radius:999px;color:var(--hi-text)}
.trackrow[data-st="gate"] .tchip{border-style:solid;border-color:var(--go);border-radius:6px;
  background:var(--go-soft);color:var(--go)}
.pfoot-line{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* Embarcado: a ultima impressao do dia. */
.donebox{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 4px}
.dcheck{width:92px;height:92px;border-radius:50%;background:var(--go-soft);border:3px solid var(--go);
  display:grid;place-items:center;font-size:44px;font-weight:700;color:var(--go);line-height:1}
.dtitle{font-family:var(--sans);font-size:42px;font-weight:700;line-height:1.05;margin-top:22px}
.dwhen{margin-top:8px;font-size:15px;font-weight:700;color:var(--go);
  font-variant-numeric:tabular-nums}
.dbody{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2);max-width:270px}
.dwait{margin-top:26px;width:100%;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--surface-2)}
.dnum{font-family:var(--sans);font-size:60px;font-weight:700;line-height:1;color:var(--go);font-variant-numeric:tabular-nums}
.davg{font-size:12.5px;color:var(--ink-2);margin-top:4px}
.btn.wide{width:100%;margin-top:22px;min-height:56px;border-radius:14px;font-size:15px}
.ptag{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.langbar{display:flex;gap:2px;border:1px solid var(--line-2);border-radius:8px;padding:2px}
.langbar button{border:1px solid transparent;background:none;color:var(--muted);
  min-height:30px;padding:5px 11px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.1em}
.langbar button[aria-current="true"]{border-color:var(--line-2);color:var(--ink);background:var(--surface)}
body.board{background:var(--board-bg)}
/* SEM fundo proprio: o fundo e do body. Enquanto a .board pintava o
   seu, ela cobria a marca d'agua -- que e um elemento fixo atras de
   tudo. O brasao estava no HTML, com a imagem carregada e opacidade
   certa, e mesmo assim invisivel: havia uma camada opaca por cima. */
.board{height:100vh;overflow:hidden;color:#fff;
  display:flex;flex-direction:column;font-family:var(--sans)}
.bhead{display:flex;align-items:center;gap:2vw;flex-wrap:wrap;
  padding:2.78vh 2.5vw 2.22vh;border-bottom:3px solid #1e2732}
.btitle{flex:1;min-width:0}
.bt1{font-size:clamp(28px,5.74vh,70px);font-weight:700;line-height:1;letter-spacing:.01em;text-transform:uppercase}
.bt2{font-family:var(--sans);font-size:clamp(11px,2.22vh,27px);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#7d8b9b;margin-top:.55vh}
.bstats{display:flex;gap:.9vw;flex-wrap:wrap}
.bstat{background:#141a22;border:2px solid #26313d;border-radius:14px;
  padding:1.1vh 1.35vw;text-align:center;min-width:7.8vw}
.bstat.wide{min-width:9.9vw}
.bsl{font-family:var(--sans);font-size:clamp(9px,1.67vh,20px);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#7d8b9b}
.bsv{font-size:clamp(24px,5.93vh,72px);font-weight:700;line-height:1}
.bsv.hi{color:#f88028}
.bcols{flex:1;display:grid;grid-template-columns:1.55fr 1fr;min-height:0;overflow:hidden}
.bcol{min-width:0;overflow:hidden}
.bcol.go{padding:2vh 1.35vw 0 2.5vw;border-right:3px solid #1e2732}
.bcol.next{padding:2vh 2.5vw 0 1.35vw}
.bch{display:flex;align-items:center;gap:.85vw;margin-bottom:1.3vh;
  font-size:clamp(15px,3.7vh,45px);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.bbar{width:.85vw;min-width:9px;height:4.07vh;border-radius:3px;display:block;flex:none}
.bcol.go .bch{color:#f88028}
.bcol.go .bbar{background:#f88028}
.bcol.next .bch{color:#4d90e8}
.bcol.next .bbar{background:#4d90e8}
.brow{display:flex;align-items:center;border-bottom:2px solid #17202a}
.brow .bpos{font-weight:700;line-height:1;color:#6d7c8c;text-align:right;flex:none}
.brow .bname{flex:1;min-width:0;font-weight:600;line-height:1.05;letter-spacing:.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .broom{font-family:var(--sans);font-weight:700;letter-spacing:.09em;
  text-align:right;flex:none;white-space:nowrap}
/* A coluna que manda sair e a que precisa ser lida de longe. */
.bcol.go .brow{gap:1.15vw;padding:1.2vh 0}
.bcol.go .bpos{font-size:clamp(18px,4.81vh,58px);width:3.85vw;min-width:44px}
.bcol.go .bname{font-size:clamp(20px,5.56vh,66px)}
.bcol.go .broom{font-size:clamp(10px,2.41vh,29px);color:#a9b5c3;width:6.15vw;min-width:70px}
.bcol.next .brow{gap:.95vw;padding:.83vh 0}
.bcol.next .bpos{font-size:clamp(14px,3.7vh,45px);width:3.02vw;min-width:36px;color:#5c6a79}
.bcol.next .bname{font-size:clamp(15px,3.33vh,40px);color:#c9d3de}
.bcol.next .broom{font-size:clamp(9px,2.04vh,25px);color:#7d8b9b;width:6.15vw;min-width:70px}
.bnone{padding:2.5vh 0;color:#3d4a58;font-size:clamp(13px,2.4vh,28px);letter-spacing:.04em;text-transform:uppercase}
.bempty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.7vh;padding:4vh 2.5vw;text-align:center}
.be1{font-size:clamp(26px,6.85vh,82px);font-weight:700;letter-spacing:.03em;color:#3d4a58}
.be2{font-family:var(--sans);font-size:clamp(13px,2.59vh,31px);font-weight:600;
  letter-spacing:.05em;color:#5c6a79;max-width:1100px}
.bfoot{display:flex;align-items:center;justify-content:space-between;gap:2vw;flex-wrap:wrap;
  padding:1.85vh 2.5vw;border-top:3px solid #1e2732}
.bbrand{display:flex;align-items:baseline;gap:.75vw;flex-wrap:wrap}
.bb1{font-size:clamp(17px,3.52vh,42px);font-weight:700;color:#4d90e8;letter-spacing:.01em}
.bb2{font-family:var(--sans);font-size:clamp(9px,1.67vh,20px);font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:#5c6a79}
.blang{border-color:#26313d;padding:2px;align-self:center;flex:none}
.blang button{color:#7d8b9b;font-size:clamp(9px,1.3vh,15px);padding:.4vh .7vw;min-height:0}
.blang button[aria-current="true"]{background:#141a22;border-color:#3a4756;color:#e9eef4}
.bopen{display:flex;align-items:center;gap:.75vw;border:2px solid #3fb98a;border-radius:10px;
  padding:.75vh 1.05vw;font-family:var(--sans);font-size:clamp(11px,2.22vh,27px);
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#3fb98a}
.bdot{width:1.48vh;height:1.48vh;min-width:11px;min-height:11px;border-radius:50%;
  background:#3fb98a;display:block;flex:none;animation:tg-pulse 2.4s ease-in-out infinite}
/* Esperando o sinal nao e um estado de alarme: cinza, sem pulsar. */
.bopen.shut{border-color:#3d4a58;color:#7d8b9b}
.bopen.shut .bdot{background:#3d4a58;animation:none}
@keyframes tg-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:900px){.bcols{grid-template-columns:1fr}
  .bcol.go{border-right:0;border-bottom:3px solid #1e2732;padding-bottom:2vh}}
.dirhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.wrap .brand{margin-bottom:14px}
.tabs{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:99px;padding:3px;margin:14px 0 20px;width:fit-content;flex-wrap:wrap}
.tabs button{border:0;background:none;color:var(--muted);padding:7px 15px;border-radius:99px;font-size:13px;font-weight:600}
.tabs button[aria-current="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
/* ── Fila da secretaria ─────────────────────────────────────────────────
   Quatro colunas fixas: posicao, alunos, motorista, acao. O nome da crianca
   e o elemento dominante -- e o que a secretaria le no alto-falante.
   Estado tem FORMA alem de cor: a borda e os cantos mudam. Vale para quem
   nao distingue cores e vale de relance. */
.qhead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 24px;margin-bottom:14px}
.qhead>div{flex:1;min-width:200px}
.qh1{font-family:var(--sans);font-size:30px;font-weight:700;letter-spacing:.01em;line-height:1;margin:0}
.qsub{margin:3px 0 0;font-size:13px;color:var(--ink-2)}
.btn.big{padding:11px 20px;border-radius:9px;min-height:44px;font-size:13px}
.simrow{gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.qcols{display:grid;grid-template-columns:56px minmax(0,1fr) 190px 132px;gap:0 14px;
  padding:16px 0 7px;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line)}
.qcols .ra{text-align:right}
.qrow{display:grid;grid-template-columns:56px minmax(0,1fr) 190px 132px;gap:0 14px;
  align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.qrow:hover{background:var(--surface-2)}
.qp{display:flex;flex-direction:column;align-items:center;gap:2px}
.qp .num{font-family:var(--sans);font-size:34px;font-weight:700;line-height:1;color:var(--muted)}
.qrow.now .qp .num{color:var(--hi)}
.qp .qd{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.qkids{display:flex;flex-direction:column;gap:5px;min-width:0}
.qkid{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.qkn{font-family:var(--sans);font-size:23px;font-weight:600;
  line-height:1.15;letter-spacing:.005em;color:var(--ink)}
.qkr{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:1px 6px;white-space:nowrap}
.qkc{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:2px 9px 2px 7px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  background:none;border:1.5px dotted var(--line-2);border-radius:3px;color:var(--ink-2)}
.qkc:hover{filter:brightness(1.12)}
.qkg{font-family:var(--sans);font-size:13px;line-height:1;font-weight:700}
.qkc[data-st="called"]{border-style:solid;border-color:var(--hi);border-radius:999px;
  background:var(--hi-soft);color:var(--hi-text)}
.qkc[data-st="gate"]{border-style:solid;border-color:var(--go);border-radius:6px;
  background:var(--go-soft);color:var(--go)}
.qkid.bad .qkn{color:var(--alert)}
.qtag{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  border-radius:4px;padding:1px 6px;white-space:nowrap}
.qtag.cp{color:var(--hi-text);border:1px dashed var(--hi)}
.qtag.bad{color:var(--alert);border:1px solid var(--alert)}
.qtag.gps{font-size:9.5px;letter-spacing:.07em;color:var(--hi-text);border:1px solid var(--hi);border-radius:3px;padding:0 4px}
.qdrv{min-width:0;font-size:12px;line-height:1.4;color:var(--ink-2)}
.qdn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qdm{color:var(--muted);font-variant-numeric:tabular-nums}
.qacts{display:flex;justify-content:flex-end;gap:6px}
.btn.x{width:36px;padding:0;min-height:36px;font-size:15px;color:var(--muted)}
.btn.x:hover{border-color:var(--alert);color:var(--alert)}
.qacts .btn.go{min-height:36px}
.qempty{text-align:center;padding:70px 20px;border:1px dashed var(--line-2);border-radius:12px;margin-top:16px}
.qe1{font-family:var(--sans);font-size:26px;font-weight:700;color:var(--ink-2)}
.qe2{margin:6px auto 0;max-width:340px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.qalert.phone{margin:14px 0 0;font-size:12px}
.qalert.phone .qalert-chip{font-size:10px;letter-spacing:.08em;padding:2px 5px}
.qalert.phone .qalert-body{font-size:12px;line-height:1.4}
.qalert{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;
  background:var(--alert-soft);border:1px solid var(--alert);border-left-width:4px;
  border-radius:10px;padding:12px 14px}
.qalert-chip{font-family:var(--sans);font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--alert);border:1.5px solid var(--alert);
  border-radius:5px;padding:2px 7px;flex:none;margin-top:1px}
.qalert-body{flex:1;min-width:0;font-size:13.5px;line-height:1.45;color:var(--ink)}
@media (max-width:760px){
  .qcols{display:none}
  .qrow{grid-template-columns:44px minmax(0,1fr);row-gap:8px}
  .qdrv,.qacts{grid-column:2}
  .qacts{justify-content:flex-start}
}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.chip{border:1px solid var(--line-2);background:var(--surface);border-radius:99px;
  padding:2px 9px;font-size:11.5px;font-weight:600;color:var(--muted)}
.chip[data-st="called"]{border-color:var(--hi);color:var(--hi-text);background:var(--hi-soft)}
.chip[data-st="gate"]{border-color:var(--go);color:var(--go);background:var(--go-soft)}
.chip[data-role="own"]{border-color:var(--brand);color:var(--brand)}
.chip[data-role="carpool"]{border-color:var(--hi);color:var(--hi-text);background:var(--hi-soft)}
.chip.bad{border-color:var(--alert);color:var(--alert);background:var(--alert-soft)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:18px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.stat .sv{font-family:var(--sans);font-size:40px;font-weight:700;line-height:1}
/* Quem esta no portao e o unico numero que pede acao agora: leva a marca,
   e um filete na borda para nao depender so da cor. */
.stat.mark{border-left:none;box-shadow:inset 3px 0 0 var(--brand)}
.stat.mark .sv{color:var(--brand)}
.stat .sl{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:4px;font-weight:700}
.listrow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;padding:12px 14px;border-bottom:1px solid var(--line)}
.listrow:last-child{border-bottom:0}
.url{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--muted);word-break:break-all;margin-top:3px}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
/* ── Cartao da tag ──────────────────────────────────────────────────────
   Marinho e dourado vem da ESCOLA (--ink e --gold, postos no elemento pelo
   app), nunca do tema do site: o cartao e impresso, nao tem modo escuro, e
   cada escola tem as suas. */
.tagcard{position:relative;width:88mm;height:55mm;border-radius:3mm;overflow:hidden;
  display:flex;font-family:var(--sans);
  box-shadow:0 2px 10px rgba(16,24,32,.10)}
.tagcard.front{background:var(--ink);color:#fff;align-items:center;
  gap:3mm;padding:3.5mm 4.5mm 3.5mm 3mm}
.tagcard.back{background:#f1f4f9;color:var(--ink);gap:4mm;align-items:center;
  padding:4mm 5mm}
/* O brasao e o primeiro elemento: e por ele que o pai reconhece o cartao. */
.tccrest{position:relative;z-index:2;height:42mm;width:auto;max-width:28mm;
  object-fit:contain;flex:none}
/* A aguia grande, apagada, atras de tudo. Ampliada e deslocada de proposito:
   o que interessa e a cabeca da aguia -- o nome da escola repetido em marca
   d'agua, logo abaixo do brasao de verdade, so faz sujeira. */
.tcmarca-agua{position:absolute;right:-20mm;top:-2mm;height:104mm;
  opacity:.10;pointer-events:none;z-index:0}
.tccol{position:relative;z-index:2;flex:1;min-width:0;display:flex;
  flex-direction:column;justify-content:center;gap:1.6mm}
/* As faixas diagonais do canto. */
.tcfaixas{position:absolute;left:0;bottom:0;width:21mm;height:9mm;z-index:1;
  background:repeating-linear-gradient(58deg,
    var(--gold) 0 1.3mm,transparent 1.3mm 2.1mm,
    #fff 2.1mm 2.7mm,transparent 2.7mm 3.6mm);
  pointer-events:none}
.tcfaixas.v{left:auto;right:0;bottom:0;width:18mm;height:8mm;
  background:repeating-linear-gradient(58deg,
    var(--gold) 0 1.1mm,transparent 1.1mm 1.8mm,
    var(--ink) 1.8mm 2.4mm,transparent 2.4mm 3.2mm)}
.tcmarca{display:flex;align-items:center;gap:1mm;
  font-family:var(--sans);font-size:33px;font-weight:700;
  line-height:.95;letter-spacing:-.015em}
.tcmarca b{color:var(--gold);font-weight:700}
.tcmarca .tcwave{height:7mm;width:5.8mm;margin-left:.6mm}
.tcsub{font-size:6.2px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.85);margin-top:-.6mm}
.tcwave{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;
  height:5.2mm;width:4.4mm;flex:none}
.tcfone{fill:none;stroke:#fff;stroke-width:2;height:7.6mm;width:5mm;flex:none}
.tagcard.back .tcfone{stroke:var(--ink)}
.tagcard.back .tcwave{height:5.6mm;width:4.6mm}
.tcmid{display:flex;align-items:center;gap:1.2mm;margin-top:.8mm}
.tcrule2{width:.55mm;height:8mm;background:var(--gold);border-radius:1mm;margin:0 1.6mm}
.tctap{font-size:11px;font-weight:600;line-height:1.2;max-width:33mm}
/* O numero: e o que o pai procura de relance dentro do carro. */
/* Fundo proprio: a caixa e transparente e as faixas diagonais passavam
   por tras do numero, que e justamente o que o pai procura de relance. */
.tcnumbox{border:.5mm solid var(--gold);border-radius:2.2mm;
  padding:.8mm 3mm .5mm;text-align:center;align-self:flex-start;min-width:33mm;
  margin-top:.8mm;background:var(--ink);position:relative;z-index:3}
.tcnumlbl{display:block;font-size:6px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;opacity:.85}
.tcnum{font-family:var(--sans);font-size:26px;font-weight:700;
  line-height:1.05;display:block}
/* ── verso ── */
.qrbox{width:28mm;height:28mm;flex:none;background:#fff;border:.6mm solid var(--ink);
  border-radius:2.4mm;display:grid;place-items:center;padding:1.4mm;position:relative;z-index:1}
.qrbox img,.qrbox canvas{width:100%!important;height:100%!important;display:block}
.tcside{position:relative;z-index:1;flex:1;min-width:0}
.tcqtop{display:flex;align-items:center;gap:1.5mm;margin-bottom:1mm}
.tcq{font-family:var(--sans);font-size:19px;font-weight:700;
  line-height:1.05;color:var(--ink)}
.tcqrule{display:block;width:16mm;height:.7mm;background:var(--gold);
  border-radius:1mm;margin:1.2mm 0}
.tcqp{font-size:9.5px;line-height:1.35;margin:0;color:var(--ink);opacity:.9}
.tcnumback{display:flex;align-items:baseline;gap:2mm;margin-top:2mm;
  padding-left:2mm;border-left:.7mm solid var(--gold)}
.tcnumback .tcnumlbl{display:block;opacity:.7}
.tcnum2{font-family:var(--sans);font-size:22px;font-weight:700;
  line-height:1;color:var(--ink)}
.cards{display:flex;flex-wrap:wrap;gap:10mm}
.cardpair{display:flex;flex-direction:column;gap:2mm}
.cardlbl{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}

/* ── Impressao em cartao PVC ────────────────────────────────────────────
   Impressora de cracha (Magicard Pronto e afins): imprime DIRETO no cartao,
   um por vez. Entao a folha e o proprio cartao -- CR80, 85,6 x 54 mm -- e
   nao uma grade em papel carta.

   Nada de marca de corte e nada de borda: o canto arredondado ja vem do
   cartao de PVC, e uma borda impressa quase nunca cai exatamente nele.
   O conteudo fica 3 mm para dentro porque toda impressora de cartao tem
   uma faixa que nao imprime na beirada. */
@page{size:letter;margin:12mm}
@page cartao{size:85.6mm 54mm;margin:0}
@media print{
  /* INVERTIDO de proposito. A lista do que esconder cresce para sempre e
     sempre esquece alguma coisa: sairam na folha o cabecalho, os botoes de
     idioma, o aviso do banco e ate o botao de teste. Aqui some tudo e so
     os cartoes voltam a aparecer -- o que for acrescentado a tela amanha
     ja nasce fora da impressao. */
  html,body{background:#fff!important;margin:0;padding:0}
  /* A pagina ja vem montada so com os cartoes (PRINTING no app.js), entao
     aqui nao ha o que esconder -- so os rotulos de tela, que nao existem
     no cartao de verdade. */
  [data-noprint]{display:none!important}
  /* Cor de verdade: sem isto o navegador "economiza tinta" e a marca sai
     cinza. Numa impressora de cartao isso estraga o cartao, nao a folha. */
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .cards{width:85.6mm;margin:0;padding:0;display:block;gap:0;page:cartao}
  .cardpair{display:block;margin:0;gap:0}
  /* Um cartao por folha, e a folha e o cartao. */
  .tagcard{width:85.6mm;height:54mm;margin:0;border:0;border-radius:0;
    box-shadow:none;
    break-inside:avoid;page-break-inside:avoid;
    break-after:page;page-break-after:always}
  .cards .cardpair:last-child .tagcard.back{break-after:auto;page-break-after:auto}
  #ver,#modes{display:none!important}
}

table.mini{width:100%;border-collapse:collapse;font-size:14px}
table.mini td{padding:7px 0;border-bottom:1px solid var(--line)}
table.mini td:last-child{text-align:right;font-weight:600}
.scroller{overflow-x:auto}
.findbox{position:relative;margin-top:8px;max-width:340px}
.findbox input{padding:8px 11px;font-size:14px}
.findres{display:flex;flex-direction:column;gap:2px;margin-top:4px;max-height:210px;overflow-y:auto}
.findres button{text-align:left;border:1px solid var(--line);background:var(--surface);
  border-radius:7px;padding:7px 10px;font-size:13.5px;color:var(--ink)}
.findres button:hover{background:var(--surface-2);border-color:var(--line-2)}
.findres button:disabled{opacity:.45}
.findres .rr{color:var(--muted);font-weight:400}
/* ── Ajustes ────────────────────────────────────────────────────────────
   Tela chata. E onde o produto prova que e profissional. */
/* ── Carona ─────────────────────────────────────────────────────────────
   Tres passos numa linha: qual crianca, com quem, por quanto tempo.
   E o que mais acontece no dia, entao nao pode ter mais que tres decisoes. */
.cpsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:16px}
.cppick{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--brand);
  border-radius:9px;background:var(--brand-soft);font-size:13.5px;margin-top:6px}
.cppick a{margin-left:auto;color:var(--alert);text-decoration:none;font-weight:700}
.cpsteps input{margin-top:6px}
.wdays{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.wd{min-width:42px;min-height:38px;padding:6px 8px;border:1.5px solid var(--line-2);
  border-radius:8px;background:var(--surface);color:var(--muted);
  font-size:12px;font-weight:700;letter-spacing:.03em}
.wd[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.cpuntil{margin-top:6px}
.cplist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.cprow{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);
  border-left:4px solid var(--hi);border-radius:11px;background:var(--surface-2)}
.cpt{flex:1;min-width:0}
.cpn{font-family:var(--sans);font-size:19px;font-weight:600;line-height:1.15}
.cparrow{color:var(--hi-text)}
.cpm{font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--muted);margin-top:2px}
/* ── Saida por conta propria ────────────────────────────────────────────
   Nao e fila: e uma lista de quem so precisa ser liberado. Por isso grade,
   nao linhas — a ordem entre eles nao significa nada. */
.footbox{margin-top:16px}
.foothead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.footgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.footkid{display:flex;flex-direction:column;gap:2px;text-align:left;padding:11px 13px;
  border:1.5px dotted var(--line-2);border-radius:11px;background:var(--surface);color:var(--ink)}
.footkid[data-st="called"]{border-style:solid;border-color:var(--hi);background:var(--hi-soft)}
.footkid[data-st="gone"]{border-style:solid;border-color:var(--go);background:var(--go-soft)}
.fkn{font-family:var(--sans);font-size:20px;font-weight:600;line-height:1.15}
.fkr{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.fkc{display:inline-flex;align-items:center;gap:5px;margin-top:4px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.footkid[data-st="called"] .fkc{color:var(--hi-text)}
.footkid[data-st="gone"] .fkc{color:var(--go)}
/* ── Passe avulso ───────────────────────────────────────────────────────
   O codigo e o elemento dominante: e o que o funcionario compara com o que
   o motorista fala. Tabular para conferir digito a digito. */
.passbox{margin-top:16px;border-color:var(--hi)}
.cprow.pass{border-left-color:var(--hi);align-items:center}
/* Avulso tem que gritar: quem esta no portao precisa ver de longe que
   aquele carro nao e de familia nenhuma da escola. */
.pkgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.pk{min-height:52px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:11px;
  background:var(--surface);color:var(--ink-2);font-size:13.5px;font-weight:700;line-height:1.2}
.pk[aria-pressed="true"]{border-color:var(--hi);background:var(--hi-soft);color:var(--hi-text)}
/* O carro e o que o funcionario compara ANTES de falar com o motorista. */
.passcar{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--hi-text);margin-top:2px}
.qtag.avulso{background:var(--hi);color:#fff;border:0;font-size:10px;padding:2px 7px}
.cprow.pass.here{border-left-width:6px;background:var(--hi-soft)}
.cpn2{font-family:var(--sans);font-size:20px;font-weight:600;
  line-height:1.15;margin-top:2px}
.brow.avulso .bpos{color:#f88028;font-size:clamp(14px,2.6vh,30px)}
.brow.avulso .bname{color:#ffd9bd}
.brow.avulso .broom{color:#f88028}
.passcode{font-family:var(--sans);font-size:30px;font-weight:700;
  letter-spacing:.14em;color:var(--hi-text);flex:none;padding-right:4px}
.kid.out{opacity:.5;border-style:solid;border-color:var(--go);background:var(--go-soft);cursor:default}
.kid.out .kc{background:none;border:2px solid var(--go)}
.hojebox{border:2px solid var(--hi);border-radius:14px;padding:12px 14px;
  background:var(--hi-soft);margin:14px 0}
.hojetop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hojebody{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--ink);margin-top:4px}
.hojebox .codenum{margin-top:6px}
.codebox{border:2px solid var(--hi);border-radius:14px;padding:14px 16px;background:var(--hi-soft);margin-bottom:12px}
.codenum{font-family:var(--sans);font-size:56px;font-weight:700;
  letter-spacing:.16em;line-height:1;color:var(--hi-text)}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--ink-2);margin:10px 0}
.chk input{width:auto;flex:none}
.brow.foot .bpos{color:#3fb98a;font-size:clamp(14px,2.6vh,30px)}
.brow.foot .bname{color:#c9f0e0}
.gatelink{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.gatelink .url{margin-top:4px}
.setshead{margin-bottom:16px}
.setgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:900px){.setgrid{grid-template-columns:1fr}}
.card.pad{padding:18px}
.s2{font-family:var(--sans);font-size:23px;font-weight:700;margin:0 0 4px}
.tabs.seg{width:100%;margin:12px 0 14px}
.tabs.seg button{flex:1;text-align:center}
.setmap{width:100%;height:200px;border:1px solid var(--line);border-radius:10px;display:block;background:var(--surface-2)}
.setmap.empty{display:grid;place-items:center;color:var(--muted);font-size:13.5px;text-align:center;padding:20px}
.hint.lft{text-align:left;margin-top:9px}
.ptblock{margin-top:14px;padding:12px 14px;border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:11px;background:var(--surface-2)}
.ptblock.b{border-left-color:var(--hi)}
.ptlbl{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ptdot{width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:0;flex:none}
.ptblock.b .ptdot{background:var(--hi)}
.ptblock .coordin{font-variant-numeric:tabular-nums;font-size:14px;padding:9px 11px}
.ptacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ptacts .btn{text-decoration:none;display:inline-flex;align-items:center}
.fieldrow{margin-top:16px}
.fieldwide{display:flex;align-items:center;gap:10px}
.fieldwide input{flex:none;width:110px;font-family:var(--sans);
  font-size:22px;font-weight:700;text-align:center;padding:8px 10px}
.unit{font-size:12.5px;color:var(--muted);font-weight:600}
table.mini.pace thead td{font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:6px}
table.mini.pace td{padding:9px 0;font-size:13.5px}
table.mini.pace .ra{text-align:right}
table.mini.pace .ra b{font-family:var(--sans);font-size:22px;color:var(--brand)}
table.mini.pace .ra span{font-size:11px;color:var(--muted);letter-spacing:.04em}
#ver{position:fixed;right:6px;bottom:4px;font-size:9px;letter-spacing:.06em;
  color:var(--muted);opacity:.45;pointer-events:none;font-family:ui-monospace,monospace}
body.board #ver{color:#3d4a58}
@media print{#ver{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ══════════════════════════════════════════════════════════════════════
   Celular do pai — modelo novo. Vem no fim de proposito: sobrepoe as
   regras antigas sem eu ter que desmontar um bloco que tambem serve ao
   login e a carona. Limpar o que ficou orfao e tarefa separada.
   O brilho e so no escuro: neon ao sol da Florida nao se le. */
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.parent{padding:18px 18px 28px}
.bwrap{display:flex;align-items:center;gap:7px;min-width:0;color:var(--brand)}
.brandico{width:20px;height:20px}
.brand b{font-size:21px;color:var(--brand)}
.hello{font-size:40px;line-height:1.05;margin-bottom:12px;color:var(--ink)}
.hello b{color:var(--brand);font-weight:700}
.statecard{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:14px;
  border:1.5px solid var(--go);background:var(--go-soft);color:var(--go)}
.statecar{width:22px;height:22px}
.statetxt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.statetxt b{font-size:14.5px;font-weight:700}
.statetxt i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.glowdot{width:12px;height:12px;border-radius:50%;background:currentColor;flex:none;
  animation:tg-pulse 2.4s ease-in-out infinite}
.statecard.shut{border-color:var(--line-2);background:var(--surface-2);color:var(--muted)}
.statecard.shut .glowdot{animation:none}
.grouplbl{display:flex;align-items:center;gap:8px;margin:6px 0 2px}
.grouplbl .ico{width:16px;height:16px}
.grouplbl i{flex:1;height:1px;background:var(--line);display:block}
.kid{min-height:70px;border-radius:14px;border-width:1.5px}
.kc{width:30px;height:30px;border-radius:9px;background:var(--go)}
.kc .ico{width:19px;height:19px;stroke-width:2.6}
.kid[aria-pressed="false"] .kc{background:none;border:2px solid var(--line-2)}
.kav{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--brand);color:var(--brand);
  display:grid;place-items:center;flex:none}
.kav .ico{width:19px;height:19px}
.kt{flex:1}
.kn{font-size:21px}
.kr{display:flex;align-items:center;gap:6px}
.dotg{width:7px;height:7px;border-radius:50%;background:var(--go);display:block;flex:none}
.kchev{color:var(--muted);font-size:22px;line-height:1;flex:none}
.kid.out{opacity:.9;border-style:solid;border-color:var(--go);background:var(--go-soft)}
.kid.out .kav{border-color:var(--go);color:var(--go)}
.kid.out .kr{color:var(--go)}
.saiucard{position:relative;border:1.5px solid var(--go);border-radius:16px;
  padding:18px 15px 14px;background:var(--go-soft);margin:26px 0 0}
.saiutag{position:absolute;top:-11px;left:14px;background:var(--go);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 10px;border-radius:99px}
.saiutop{display:flex;align-items:center;gap:12px}
.saiuav{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--brand);
  color:var(--brand);display:grid;place-items:center;flex:none}
.saiuav .ico{width:22px;height:22px}
.saiun{flex:1;min-width:0;font-family:var(--sans);font-size:23px;
  font-weight:700;line-height:1.1}
.saiuwhen{display:flex;align-items:center;gap:6px;flex:none;padding-left:12px;
  border-left:1px solid var(--line);flex-wrap:wrap;justify-content:flex-end}
.saiuwhen i{width:100%;text-align:right;font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.saiuwhen b{font-family:var(--sans);font-size:30px;font-weight:700;
  line-height:1;color:var(--go);font-variant-numeric:tabular-nums}
.saiuclock{width:17px;height:17px;color:var(--brand)}
.saiumeta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line)}
.saiumeta span{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.saiumeta .ico{width:15px;height:15px;color:var(--muted)}
.trecho{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:14px;background:var(--surface-2)}
.trechotop{display:flex;justify-content:space-between;gap:10px;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.trechotop span{display:flex;align-items:center;gap:5px}
.trechotop .ico{width:14px;height:14px}
.trechobar{position:relative;height:6px;border-radius:99px;background:var(--line);margin:14px 0 12px}
.trechobar i{position:absolute;top:0;bottom:0;left:0;border-radius:99px;background:var(--go);display:block}
.trechocar{position:absolute;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;
  border-radius:50%;background:var(--surface);border:1.5px solid var(--go);color:var(--go);
  display:grid;place-items:center}
.trechocar .ico{width:17px;height:17px}
.trechodist{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.trechodist b{font-family:var(--sans);font-size:22px;font-weight:700;color:var(--ink)}
.trechodist .ico{color:var(--muted)}
.trechodist.fora{color:var(--hi-text)}
.trechodist.fora b,.trechodist.fora .ico{color:var(--hi)}
.hint.big{display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:14.5px;font-weight:600;padding:10px 0}
.hint.big .ico{color:var(--brand)}
#cheguei{min-height:76px;border-radius:18px}
.dcheck{border-width:2.5px;color:var(--go)}
.dcheck .ico{width:48px;height:48px;stroke-width:2.6}
.langbar button[aria-current="true"]{border-color:var(--brand);color:#fff;background:var(--brand)}
/* Brilho so no escuro: neon ao sol da Florida nao se le.
   Seletor plano, sem aninhamento: iPhone antigo descarta regra aninhada. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .statecard{box-shadow:0 0 26px -10px var(--go)}}
:root[data-theme="dark"] .statecard{box-shadow:0 0 26px -10px var(--go)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .saiucard{box-shadow:0 0 30px -14px var(--go)}}
:root[data-theme="dark"] .saiucard{box-shadow:0 0 30px -14px var(--go)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .glowdot{box-shadow:0 0 12px 2px currentColor}}
:root[data-theme="dark"] .glowdot{box-shadow:0 0 12px 2px currentColor}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kid[aria-pressed="true"]{box-shadow:0 0 22px -12px var(--brand)}}
:root[data-theme="dark"] .kid[aria-pressed="true"]{box-shadow:0 0 22px -12px var(--brand)}

/* Registro do que ja foi entregue sem tag. Discreto: e consulta, nao acao. */
.passbox.done{opacity:.92}
.cprow.pass.feito{align-items:center;border-color:var(--line);background:var(--surface-2)}
.fcheck{width:26px;height:26px;border-radius:8px;background:var(--go);color:#fff;
  display:grid;place-items:center;flex:none}
.fcheck .ico{width:17px;height:17px;stroke-width:2.8}
.fwhen{font-family:var(--sans);font-size:22px;font-weight:700;
  color:var(--go);flex:none;font-variant-numeric:tabular-nums}
.dmeta{justify-content:center;border-top:none;padding-top:0;margin-top:2px}

/* Confirmacao da saida — o cartao com a rota. Sem quilometragem: o sistema
   mede o pai ate o portao, nunca o trajeto ate a casa. */
.dseal{position:relative;display:grid;place-items:center;width:100%;height:150px}
.drays{position:absolute;width:250px;max-width:100%;height:125px;color:var(--go);
  opacity:.75;pointer-events:none}
.dcheck{position:relative;width:118px;height:118px;border-radius:50%;
  background:var(--go-soft);border:3px solid var(--go);color:var(--go);
  display:grid;place-items:center;margin:0}
.dcheck .ico{width:62px;height:62px;stroke-width:2.6}
.dtitle{font-size:46px;margin-top:8px;text-wrap:balance}
.dtitle b{color:var(--go);font-weight:700}
.dwhen{display:inline-flex;align-items:center;gap:9px;font-size:22px;
  padding:11px 22px;border-radius:99px;border:1.5px solid var(--go);
  background:var(--go-soft);color:var(--go);font-weight:700;
  font-variant-numeric:tabular-nums;margin-top:14px}
.dwhen .ico{width:20px;height:20px}
.dncard{width:100%;margin-top:22px;border:1.5px solid var(--brand);border-radius:18px;
  padding:16px;text-align:left;background:var(--surface-2)}
.dntop{display:flex;align-items:center;gap:14px}
.dnav{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--brand);
  color:var(--brand);display:grid;place-items:center;flex:none}
.dnav .ico{width:30px;height:30px}
.dnwho{flex:1;min-width:0}
.dnwho b{display:block;font-family:var(--sans);font-size:27px;
  font-weight:700;line-height:1.1}
/* Uma linha quando cabe; quebra quando nao cabe. Rolagem lateral escondia
   a ultima etiqueta sem nenhum aviso. */
.dnchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.dnchip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:99px;
  border:1px solid var(--line-2);font-size:12.5px;font-weight:600;color:var(--ink-2);
  white-space:nowrap;flex:none}
.dnchip .ico{width:16px;height:16px;color:var(--brand)}
.dnroute{position:relative;margin-top:13px;border:1px solid var(--line);border-radius:14px;
  padding:14px 15px;display:flex;flex-direction:column;gap:16px}
.dnstop{position:relative;padding-left:38px}
.dnpin{position:absolute;left:0;top:0;width:26px;height:26px;color:var(--brand)}
.dnrail{position:absolute;left:28px;top:44px;height:26px;width:0;
  border-left:2px dashed var(--brand);opacity:.5}
.dnlbl{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.dnval{display:block;font-size:16.5px;font-weight:700;margin-top:2px;
  overflow-wrap:anywhere;text-transform:uppercase}
.dnsub{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-top:2px}
.dntrip{display:flex;align-items:center;gap:11px;margin-top:13px;padding:13px 15px;
  border-radius:14px;border:1px solid var(--go);background:var(--go-soft);
  color:var(--go);font-size:13.5px;font-weight:700}
.dnroad{width:24px;height:24px;flex:none}
/* Cadastro da escola: campos largos, e estado+ZIP lado a lado como no
   endereco americano. */
.formgrid .wide2{grid-column:1/-1}
.formgrid .uf{display:grid;grid-template-columns:90px 1fr;gap:12px}
.upc{text-transform:uppercase}
/* O que pisca e a bola grande, nao um ponto no canto. */
@keyframes tg-seal{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
  50%{box-shadow:0 0 34px 6px var(--go)}}
@keyframes tg-rays{0%,100%{opacity:.35}50%{opacity:.9}}
.dcheck{animation:tg-seal 2.4s ease-in-out infinite}
.drays{animation:tg-rays 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .dcheck,.drays,.glowdot{animation:none}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dwhen{box-shadow:0 0 22px -12px var(--go)}}
:root[data-theme="dark"] .dwhen{box-shadow:0 0 22px -12px var(--go)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dncard{box-shadow:0 0 30px -16px var(--brand)}}
:root[data-theme="dark"] .dncard{box-shadow:0 0 30px -16px var(--brand)}
/* De quem e a crianca, no portao. Sem isto "CARONA" e um rotulo sem dono. */
.qorig{display:inline-block;font-size:11.5px;font-weight:600;color:var(--ink-2);
  margin-left:6px;white-space:nowrap}
/* O endereco que vai para o QR, colado no botao de imprimir. */
.printhost{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.printhost code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  font-weight:600;color:var(--brand);background:var(--brand-soft);
  border:1px solid var(--brand);border-radius:7px;padding:6px 10px}
.printone{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.printone label{margin:0;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.printone input{width:110px;padding:8px 11px;font-size:16px;text-align:center}
.printmsg{font-size:12.5px;font-weight:600;color:var(--alert)}
.corlinha{display:flex;align-items:center;gap:9px;margin-top:6px}
.corlinha input[type=color]{width:52px;height:38px;padding:2px;border-radius:8px;
  border:1px solid var(--line-2);background:var(--surface);cursor:pointer}
.corlinha code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--ink-2)}
.logolinha{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.logoprev{width:54px;height:54px;object-fit:contain;border-radius:9px;
  border:1px solid var(--line-2);background:var(--surface-2);flex:none}
.logoprev.vazio{display:block}
/* Links dos aparelhos fixos. */
.devrow{border:1px solid var(--line);border-radius:11px;padding:12px 14px;
  margin-top:10px;background:var(--surface-2)}
.devlbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.devacts{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}

/* ── Relatorio ──────────────────────────────────────────────────────────
   Tabela para ler de cima a baixo, e para imprimir. */
.repbar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.repbar label{display:block;margin-bottom:4px}
.repdia{min-width:170px}
.repbusca{flex:1;min-width:190px}
.repq{width:100%}
.repacts{display:flex;gap:8px;margin-left:auto}
table.rep{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
table.rep thead td{font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:0 10px 7px 0;
  border-bottom:1px solid var(--line-2)}
table.rep td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);
  vertical-align:top}
table.rep td.ra{text-align:right}
table.rep .num{font-variant-numeric:tabular-nums}
.repcar{color:var(--muted);font-size:12.5px}
.repprint h1{font-family:var(--sans);font-size:26px;margin:0}
.repprint>p{color:var(--muted);font-size:13px;margin:2px 0 14px}
@media print{
  .repprint .repbar,.repprint .setshead{display:none!important}
  .repprint .card{border:0;padding:0;background:none}
  table.rep td{border-color:#ccc}
}
/* Aluno que encostou a tag: pisca em laranja até alguém autorizar. Forma
   além de cor — a borda engrossa — para quem não distingue as duas. */
.footkid[data-st="ask"]{border-color:var(--hi);border-width:2.5px;
  background:var(--hi-soft);color:var(--hi-text);
  animation:tg-pede 1.1s ease-in-out infinite}
@keyframes tg-pede{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
  50%{box-shadow:0 0 0 4px var(--hi-soft),0 0 18px -4px var(--hi)}}
.footkid[data-st="gone"]{border-color:var(--go);border-width:2.5px;
  background:var(--go-soft);color:var(--go);animation:none}
@media (prefers-reduced-motion:reduce){.footkid[data-st="ask"]{animation:none}}
/* Resumo do relatório: os números grandes primeiro, depois cada grupo. */
.represumo{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.repbig{border:1px solid var(--line);border-radius:12px;padding:11px 15px;
  background:var(--surface-2);min-width:116px}
.repbig b{display:block;font-family:var(--sans);font-size:30px;
  font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.repbig span{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}
.repbig.sm b{font-size:23px}
.repgrp{font-family:var(--sans);font-size:20px;font-weight:700;
  margin:22px 0 2px;display:flex;align-items:center;gap:9px}
.repgrp span{font-family:var(--sans);font-size:11.5px;font-weight:700;
  color:var(--muted);border:1px solid var(--line-2);border-radius:99px;padding:2px 9px}
.repmodo{color:var(--ink-2);font-weight:600}
/* Busca avulsa na TV: nome em cima, dados embaixo. Tudo numa linha só
   estourava a coluna — o .broom tem largura fixa e não quebra. */
.brow .bstack{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35vh}
.brow .bstack .bname{white-space:normal;overflow:visible;text-overflow:clip}
.brow .bsub{font-family:var(--sans);font-weight:700;letter-spacing:.06em;
  color:#f88028;white-space:normal;overflow-wrap:anywhere;line-height:1.2}
.bcol.go .bsub{font-size:clamp(11px,2.2vh,26px)}
.bcol.next .bsub{font-size:clamp(9px,1.6vh,18px)}
.brow.avulso{align-items:flex-start}
/* Título da busca avulsa dentro da coluna. */
.bsep{font-family:var(--sans);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#f88028;opacity:.85;
  padding:1.4vh 0 .5vh;border-bottom:2px solid #2a1a10}
.bcol.go .bsep{font-size:clamp(10px,1.9vh,22px)}
.bcol.next .bsep{font-size:clamp(9px,1.5vh,17px)}

/* ══════════════════════════════════════════════════════════════════════
   Refinamento — menos caixa, mais hierarquia
   ══════════════════════════════════════════════════════════════════════
   O diagnóstico: TUDO virou caixa. Seis blocos com a mesma borda, o mesmo
   raio e o mesmo fundo, então o link do portão pesava igual ao formulário
   de carona. Borda em tudo não separa nada — só achata.

   A regra desta camada: borda e fundo passam a significar "isto é um
   objeto que se opera" (uma linha de lista, um campo, um botão). Bloco que
   é só conteúdo fica solto no fundo da página, separado por espaço.
   Espaço é mais barato que borda e lê melhor. */

/* Um bloco de conteúdo não é um objeto: perde a moldura e ganha ar. */
.card{border:0;background:none;box-shadow:none;border-radius:0;
  padding:0;margin:0 0 34px}
.card.pad{padding:0}
/* Nada de fio entre blocos: numa grade de dois, so o segundo recebia a
   linha e a tela ficava torta. Espaco separa melhor e nao tem esse risco. */

/* Título de seção manda na página; o subtítulo recua. */
.setshead{margin-bottom:22px}
.qh1{font-size:34px;line-height:1.02;letter-spacing:-.015em}
.qsub{font-size:14.5px;color:var(--muted);margin-top:5px;max-width:62ch}
.s2{font-size:21px;letter-spacing:-.01em;margin-bottom:3px}

/* Os rótulos pequenos eram caixa-alta espaçada em todo canto — vira ruído
   quando se repete. Ficam menores, mais quietos, sem a tracagem larga. */
.eyebrow{font-size:11px;letter-spacing:.02em;color:var(--muted);font-weight:700;
  text-transform:none}
label{font-size:12.5px;letter-spacing:0;text-transform:none;
  color:var(--ink-2);font-weight:600}

/* O que SE OPERA mantém contorno: linhas de lista, campos, botões. */
.cprow,.qrow,.devrow,.repbig,.footkid,.kid,.tagcard{border-radius:12px}

/* O aviso do banco era um bloco laranja do tamanho da tela. Vira uma faixa
   fina: continua visível, para de gritar. */
.notice.warn{border:0;border-left:3px solid var(--hi);border-radius:0;
  background:none;padding:2px 0 2px 13px;font-size:13.5px}

/* A barra de quem está logado é serviço, não conteúdo. */
.whobar{border:0;background:none;padding:0;margin-bottom:26px;
  font-size:13px;color:var(--muted)}

/* Na tela larga a Direção usa a tela. */
@media (min-width:1100px){
  .wrap{max-width:1040px}
}

/* O endereço do portão é serviço: uma linha, não um cartão. */
.dirhead{margin-bottom:26px}
.dirhead .url{font-size:12.5px;color:var(--muted)}
/* O endereço do portão é serviço — uma linha discreta, não um cartão com o
   mesmo peso do formulário que a secretária usa o dia inteiro. */
.notice.gatelink{border:0;background:none;border-radius:0;padding:0;
  margin-bottom:28px;align-items:baseline}
.notice.gatelink b{font-weight:700}
.notice.gatelink .url{font-size:12.5px;color:var(--muted);margin-top:2px}
/* Alguns blocos trazem padding escrito no próprio elemento, de antes desta
   camada — por isso ficavam recuados em relação aos vizinhos. */
.card[style*="padding"]{padding:0!important}

/* Caixa-alta espaçada em seis rótulos seguidos vira textura, não
   informação. Os números dos totais já carregam o peso. */
.repbig span{text-transform:none;letter-spacing:.01em;font-size:12px;
  font-weight:600}
table.rep thead td{text-transform:none;letter-spacing:.01em;font-size:12px;
  font-weight:600}
.repgrp{font-size:19px;margin:26px 0 2px}

/* ── Tipografia do sistema ──────────────────────────────────────────────
   Uma família só: Inter. 800 para display, 700 para título, 400 para
   corpo, 600 em versalete com +12% de tracking nos rótulos pequenos.
   Título com tracking apertado (-2%), como o sistema pede.

   Isto desfaz o que eu tinha feito na camada anterior: eu havia tirado a
   caixa-alta dos rótulos por conta própria. O sistema a quer -- e o
   sistema manda. */
.eyebrow,.dnlbl,.tcnumlbl,.saiuwhen i,.grouplbl,.repbig span,
table.rep thead td,.devlbl,.bsl,.cardlbl,.tcsub{
  font-weight:600;text-transform:uppercase;letter-spacing:.12em}
.eyebrow{font-size:12px;line-height:16px;color:var(--muted)}
label{font-size:12px;line-height:16px;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.qh1,.dtitle,.tcq,.s2,.hello,.repgrp,h1,h2,h3{letter-spacing:-.02em}
.qh1{font-size:40px;line-height:46px;font-weight:800}
.s2,.repgrp{font-size:20px;line-height:28px;font-weight:700}
.qsub,.hint{font-size:14px;line-height:20px;font-weight:400}
/* Entrelinha SEM unidade: com "24px" fixo, todo texto grande que nao
   declara a propria entrelinha herdava 24px e colapsava -- na TV os dois
   textos do estado vazio ficaram um por cima do outro. */
body{font-size:16px;line-height:1.5}
/* Pílulas de estado no raio do sistema; botões e cartões no médio. */
.btn,.pcp,.card,.cprow,.qrow,.devrow,.repbig,.footkid,.kid,.tagcard{
  border-radius:var(--r)}
.qtag,.chip,.statecard,.dwhen,.dnchip{border-radius:var(--r-pill)}
input,select,textarea{border-radius:var(--r-sm)}
/* O que espera decisão da escola pisca, igual ao aluno que encostou a tag:
   é a mesma situação — alguém do outro lado aguardando uma resposta.
   A borda engrossa junto, para a diferença não depender só da cor. */
.cprow.pede{border-color:var(--hi);border-left-color:var(--hi);
  border-width:2px;background:var(--hi-soft);
  animation:tg-pede 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.cprow.pede{animation:none}}
/* O brasão da escola: pequeno ao lado da marca, e grande e apagado no fundo
   — o mesmo tratamento do cartão da tag. Bem fraco de propósito: dá
   identidade sem disputar leitura com nome de criança. */
/* O brasao fica COLADO na marca, nao solto: com tres filhos diretos o
   espaco-entre jogava "Tap & Go" para o meio da tela. */
.bwrap{gap:10px}
.headcrest{height:32px;width:auto;max-width:44px;object-fit:contain;flex:none;
  margin-right:2px}
/* A marca d'agua tem que dar identidade sem disputar leitura. Deslocada
   para a direita e para baixo: o que aparece e a aguia, nao o nome da
   escola escrito por cima do conteudo. */
/* A MARCA D'AGUA PRECISA DE OPACIDADE DIFERENTE POR TEMA. A 2,2% ela
   existia no HTML e nao existia para os olhos: o brasao da Evans e
   contorno preto com dourado, e preto a 2% sobre marinho nao e nada.
   Claro aguenta menos (fundo branco revela qualquer coisa), escuro
   precisa do dobro para a mesma presenca. */
#crestbg{position:fixed;right:-14vw;bottom:-26vh;width:58vw;height:116vh;
  background-repeat:no-repeat;background-position:right bottom;
  background-size:contain;opacity:.07;pointer-events:none;z-index:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #crestbg{opacity:.13}}
:root[data-theme="dark"] #crestbg{opacity:.13}
/* A TV e vista de longe, e de longe a marca d'agua some antes do texto. */
body.board #crestbg{opacity:.12;width:40vw;height:92vh;right:-9vw;bottom:-18vh}
/* No celular a geometria de tela larga joga a imagem para FORA. A caixa
   e alta e estreita, o "contain" encolhe o brasao ate a largura dela e o
   encosta no canto inferior direito -- que esta a 14vw e 26vh fora da
   tela. O elemento existia, a imagem carregava, e nao se via nada.
   Caixa quadrada e quase toda dentro da tela resolve. */
@media (max-width:520px){
  /* Caixa bem maior que na tela larga, entao opacidade menor para a
     mesma presenca -- senao o brasao compete com o nome da crianca. */
  #crestbg{right:-12vw;bottom:-7vh;width:86vw;height:86vw;opacity:.05}
}
@media (max-width:520px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #crestbg{opacity:.09}
}
@media (max-width:520px){ :root[data-theme="dark"] #crestbg{opacity:.09} }
.wrap,.board{position:relative;z-index:1}
@media print{#crestbg{display:none}}
/* O pedido de carona era um link de texto no rodapé — alvo pequeno, no
   celular, de dentro do carro. Agora é botão, com a altura de toque que o
   CHEGUEI tem. Contornado em azul: nunca se confunde com o laranja. */
.pcp.carona{display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;margin-top:14px;font-size:16px;font-weight:600}
.pcp.carona .ico{width:20px;height:20px}
/* Cor e placa cabem lado a lado: são curtos, e separá-los em duas linhas
   alongaria a tela sem necessidade. */
.drvdupla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.drvin{width:100%}
/* Aviso de pedido novo. Quem aprova carona nem sempre está olhando a tela —
   piscar só funciona para quem olha. Isto apita e fica por cima até alguém
   responder. */
.alertwrap{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;
  justify-content:center;padding:24px 18px;background:rgba(10,20,48,.55);
  backdrop-filter:blur(2px)}
.alertbox{width:min(560px,100%);background:var(--surface-2);
  border:2px solid var(--hi);border-radius:var(--r);padding:20px 22px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);display:flex;gap:16px;flex-wrap:wrap;
  align-items:flex-start;animation:tg-pede 1.1s ease-in-out infinite}
.alerticon{width:46px;height:46px;border-radius:50%;background:var(--hi-soft);
  color:var(--hi);display:grid;place-items:center;flex:none}
.alerticon .ico{width:26px;height:26px}
.alerttxt{flex:1;min-width:180px;display:flex;flex-direction:column;gap:3px}
.alerttxt b{font-size:18px}
.alerttxt span{font-size:14px;color:var(--ink-2)}
.alertacts{display:flex;gap:9px;width:100%;justify-content:flex-end}
.chk.som{font-size:12.5px;color:var(--muted);display:inline-flex;
  align-items:center;gap:7px;margin-right:4px}
@media (prefers-reduced-motion:reduce){.alertbox{animation:none}}
/* A marca é imagem. Duas versões: a de texto azul-escuro sumiria no
   marinho, então o escuro usa a negativa. Troca por CSS, não por script —
   assim muda junto com o tema sem recarregar nada. */
/* A marca e empilhada (icone em cima, palavra embaixo). A 30px a palavra
   ficava ilegivel -- a altura e medida pelo lockup inteiro, nao pelo texto. */
/* A marca e LARGA (760x180): fixar a ALTURA dava 203px de largura e,
   num iPhone, empurrava a barra de idioma para fora da tela. Entao o
   tamanho vem da LARGURA e a altura acompanha. */
.headlogo{width:min(190px,38vw);height:auto;display:block;flex:none}
.headlogo.neg{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .headlogo{display:none}
  :root:not([data-theme="light"]) .headlogo.neg{display:block}}
:root[data-theme="dark"] .headlogo{display:none}
:root[data-theme="dark"] .headlogo.neg{display:block}
body.board .headlogo{display:none}
body.board .headlogo.neg{display:block;width:232px}
.bwrap{align-items:center}
.bwrap>span{align-self:center}
/* A marca no rodapé da TV: imagem, lida de longe. */
.bblogo{width:clamp(118px,21vh,244px);height:auto;display:block}
.bbrand{display:flex;align-items:center;gap:1.1vw}

/* Num iPhone, marca + rotulo da tela + barra de idioma nao cabem lado a
   lado: o rotulo passava POR CIMA dos botoes de idioma. Ele desce para a
   linha de baixo, debaixo da marca -- some nada. */
@media (max-width:430px){
  .bwrap{flex-wrap:wrap}
  .bwrap>span{flex-basis:100%;align-self:flex-start;margin-top:2px}
}

/* Tela de entrar: a marca e o CONTEUDO, nao enfeite de canto. A coluna
   inteira se centra na altura livre, com a marca em cima da caixa. */
.authwrap{flex-direction:column;justify-content:center;gap:24px}
.authmark{display:flex;justify-content:center;width:100%}
.authmark .headlogo{width:min(268px,76%)}
.authmarktxt{font-size:30px;font-weight:700;color:var(--brand);letter-spacing:.02em}

/* ===== Painel do operador =====
   Tela de uma pessoa so, num computador. Nao precisa de nada da tela do
   pai: aqui o que importa e comparar escolas de relance -- nome, numero
   e se ja tem conta. */
.opcard{padding:16px 18px;margin-bottom:12px}
.ophead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ophead b{font-size:19px;letter-spacing:.01em}
.opnum{margin-left:auto;font-size:19px;font-weight:700;color:var(--brand);
  letter-spacing:.06em}
.opstats{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;
  font-size:13px;color:var(--muted)}
.opusers{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.opadd{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.opadd summary{font-size:13px;font-weight:600;color:var(--brand);cursor:pointer}
.opadd label{margin-top:10px;margin-bottom:5px}
.opadd .btn{margin-top:12px}
/* A entrega: nome, numero, usuario e endereco, um por linha, para o
   operador copiar sem errar. */
.oprow{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.oprow:last-of-type{border-bottom:0}
.oprow span{color:var(--muted)}
.oprow b{text-align:right;word-break:break-all}

/* ===== Importar planilha ===== */
.improw{display:flex;gap:10px;flex-wrap:wrap}
.impsum{display:flex;gap:10px;margin-top:14px}
.impsum>div{flex:1;background:var(--surface-2);border-radius:var(--r-sm);
  padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.impsum b{font-size:26px;line-height:1.1;color:var(--ink)}
.impsum span{font-size:12px;color:var(--muted)}
/* As linhas com problema NAO sao vermelhas de alarme: elas nao quebram
   nada, so ficam de fora. Vermelho aqui faria a secretaria achar que a
   importacao falhou. */
.imperr{margin-top:14px;border-left:3px solid var(--hi);padding-left:12px}
.imperr ul{margin:6px 0 0;padding-left:18px}
.imperr li{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.imptab{margin-top:14px;max-height:280px;overflow:auto;
  border:1px solid var(--line);border-radius:var(--r-sm)}
.imptab table{width:100%;border-collapse:collapse;font-size:13.5px}
.imptab th{text-align:left;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding:8px 12px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.imptab td{padding:8px 12px;border-bottom:1px solid var(--line);
  color:var(--ink-2);vertical-align:top}
.imptab tr:last-child td{border-bottom:0}
.imptab td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}

/* ===== Porta de entrada ===== */
.inigrid{display:flex;flex-direction:column;gap:12px;width:100%}
.inicard{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
/* Só o cartão da escola tem botão. Os outros dois respondem uma pergunta
   e não pedem ação nenhuma -- então não se parecem com algo clicável. */
.inicard.quiet{background:var(--surface-2);border-style:dashed;box-shadow:none}
.inicard .inip{font-size:15.5px;line-height:1.5;color:var(--ink-2);margin:6px 0 0}
.inicard .pcp{margin-top:14px}
.inicard .hint{margin-top:8px}
.inifoot{width:100%;margin-top:4px;text-align:center}
.inifoot>a{font-size:12.5px;color:var(--muted);text-decoration:none;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.inifoot>a:hover{color:var(--brand);text-decoration:underline}
.inioprow{display:flex;flex-direction:column;gap:6px;text-align:left;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:14px}
.inioprow label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.inioprow .btn{margin-top:4px}

/* ===== Aba de ajuda ===== */
.card.guia{display:flex;align-items:center;gap:16px;padding:18px;
  margin-bottom:12px;text-decoration:none;color:inherit}
.card.guia:hover{border-color:var(--brand)}
.guiatxt{flex:1;min-width:0}
.guiatxt b{display:block;font-size:17px;margin-bottom:3px}
.guiatxt span{font-size:14px;color:var(--muted);line-height:1.45}
.guiago{flex:none;font-size:13px;font-weight:700;color:var(--brand);
  border:1px solid var(--brand);border-radius:var(--r-pill);padding:8px 16px}

/* CARONA em caixa alta, como o CHEGUEI. Os dois sao a decisao do pai
   naquela tela e tem que ter o mesmo peso de voz -- mas a forma
   continua separando: o CHEGUEI e laranja preenchido, a CARONA e azul
   contornada. Quem dirige nao erra o toque pela cor nem pelo enchimento. */
.pcp.carona{text-transform:uppercase;letter-spacing:.04em;font-weight:800}

/* ===== Nova tag: filhos em campos separados ===== */
.ntkids{margin-top:4px}
/* Nome manda, sala e minutos sao estreitos: a largura ja diz o que
   cabe em cada um, antes de ler o rotulo. */
.ntkid{display:grid;grid-template-columns:1fr 110px 92px 72px 34px;gap:8px;
  align-items:center;margin-bottom:8px}
.ntkid input{margin:0}
.ntx{border:1px solid var(--line-2);background:none;color:var(--muted);
  width:34px;height:34px;border-radius:var(--r-sm);font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.ntx:hover{border-color:var(--alert);color:var(--alert)}
.ntx.ghost{border:0;background:none;cursor:default}
.ntadd{margin-top:2px}
@media (max-width:560px){
  /* No celular o grid de quatro colunas espreme o nome ate caber uma
     palavra. Nome em cima, sala e minutos embaixo. */
  .ntkid{grid-template-columns:1fr 92px 72px 34px;grid-template-rows:auto auto}
  .ntkid input:first-child{grid-column:1 / -1}
}

/* O icone da carona e CHEIO, nao de traco: a 18px a silhueta sobrevive
   e o contorno some. Unico do conjunto assim, e de proposito. */
.ico.cheio{fill:currentColor;stroke:none}
/* Maior que os outros porque tem detalhe dentro: a 18px as tres cabecas
   somem, a 28px voltam. */
.pcp.carona .ico{width:28px;height:28px}

/* ===== Ficha de quem vem buscar =====
   O pai le isto de dentro do carro e confere com o veiculo parado na
   frente dele. Cada dado com rotulo e lugar fixo: "CIVIC PRETO ABC1D23"
   numa linha so nao se confere de relance. */
.hojebox.ficha{padding-bottom:16px}
.hojebox.ficha .hojetop{gap:9px;align-items:center;margin-bottom:12px}
/* O tipo da saida subiu para a linha do HOJE; o espacador empurra o
   Cancelar para a direita. */
.hojesp{flex:1}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;margin-bottom:10px}
.fdado{background:var(--surface-2);padding:10px 12px;display:flex;
  flex-direction:column;gap:2px;min-width:0}
.fdado span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.fdado b{font-size:16px;line-height:1.25;word-break:break-word}
.flinha{display:flex;gap:11px;align-items:flex-start;background:var(--surface-2);
  border-radius:var(--r-sm);padding:11px 12px;margin-bottom:8px}
.fic{width:22px;height:22px;color:var(--brand);flex:none;margin-top:1px}
.flinha>div{min-width:0;flex:1}
.flinha span{display:block;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.flinha b{font-size:17px;line-height:1.3;word-break:break-word}
.flinha p{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
/* O codigo e a unica coisa desta tela que o portao PEDE. */
.fcod b{font-size:30px;letter-spacing:.14em;color:var(--hi-text);line-height:1.1}
.fok{display:flex;gap:10px;align-items:center;background:var(--go-soft);
  border-radius:var(--r-sm);padding:11px 12px;margin-top:10px;
  font-size:14.5px;line-height:1.4;color:var(--ink)}
.fokico{width:20px;height:20px;color:var(--go);flex:none}
.hojebox.ficha .pcp{margin-top:12px;min-height:56px;font-size:17px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fcod b{color:var(--hi)}}
:root[data-theme="dark"] .fcod b{color:var(--hi)}

/* ===== Busca avulsa no portao, em ficha =====
   Quem esta na calcada confere um carro que nunca viu. Cada dado tem
   lugar fixo: ler linha corrida para conferir placa e como se erra. */
.pficha{border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:12px;background:var(--surface)}
/* Chegou: a ficha inteira muda de cor, nao so um rotulo. Forma alem de
   cor, para quem nao distingue as duas. */
.pficha.here{border-color:var(--go);border-width:2px;background:var(--go-soft);padding:13px}
.pfhead{display:flex;align-items:center;gap:14px;margin-bottom:12px}
/* O chip do codigo usa --brand, nao --ink: --ink INVERTE com o tema
   (marinho no claro, quase branco no escuro) e texto branco fixo por
   cima dele sumia no escuro. Azul e azul nos dois, e branco le em cima
   dos dois. */
.pfcode{flex:none;background:var(--brand);border-radius:var(--r-sm);
  padding:7px 14px;text-align:center;min-width:104px}
.pfcode span{display:block;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.78)}
.pfcode b{display:block;font-size:30px;line-height:1.1;letter-spacing:.1em;color:#fff}
.pfwho{min-width:0;flex:1}
.pfwho b{display:block;font-size:21px;line-height:1.2;margin:1px 0 4px}
.pfaut{display:flex;gap:10px;align-items:flex-start;margin-top:8px}
.pfaut span{display:block;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.pfaut b{font-size:15px}
.pfaut i{font-style:normal;color:var(--muted);font-weight:600;font-size:13px}
.pfpe{display:flex;align-items:center;gap:12px;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--line)}
.pfst{flex:1;font-size:13.5px;color:var(--muted)}
.pfwait{flex:1;font-size:13.5px;font-weight:700;color:var(--hi-text)}
.pfpe .btn{min-height:46px;padding:0 20px;font-size:15px}
@media (max-width:620px){
  .pfhead{flex-wrap:wrap}
  .pfpe{flex-wrap:wrap}
  .pfpe .btn{width:100%}
}

/* O tempo na TV, destacado: e o que diz a quem chama que o carro esta
   vindo. Laranja porque e a coisa que muda sozinha na tela. */
.bsub .betag{color:var(--hi);font-weight:700;font-variant-numeric:tabular-nums}

/* A ficha do portao poe tudo numa linha: motorista, placa, carro, cor.
   Quatro colunas no tablet; abaixo disso elas quebram sozinhas, porque
   o minmax ja manda. */
.fgrid.fg4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* Na tela do pai sao TRES numa linha (placa, carro, cor) e a tela e de
   celular: a coluna minima cai para caber as tres sem quebrar. */
.fgrid.fg3{grid-template-columns:repeat(auto-fit,minmax(98px,1fr))}
.fgrid.fg3 .fdado{padding:9px 10px}
.fgrid.fg3 .fdado b{font-size:15px}


/* ===== Chamada repetida: o aviso e CARTAO =====
   Tres informacoes de tipos diferentes (que aluno, quem anunciou, o que
   fazer) numa frase corrida viram uma coisa so. Em cartao cada uma tem
   lugar fixo, e o pai le de dentro do carro, de relance.
   Laranja pequeno usa --hi-text; --hi so no icone grande e nas bordas. */
.dupcard{display:flex;flex-direction:column;gap:14px;margin:20px 0 2px;
  padding:16px;border:2px solid var(--hi);border-radius:var(--r);
  background:var(--surface-2)}
.duphead{display:flex;align-items:center;gap:12px}
.duphead .ico.dupwarn{width:34px;height:34px;color:var(--hi);stroke-width:1.9}
.duphead h3{border-left:1px solid var(--line-2);padding-left:12px;
  font-size:19px;line-height:1.15;letter-spacing:.01em;text-transform:uppercase}
.duphead h3 span{display:block;font-size:14px;letter-spacing:.06em;
  color:var(--hi-text)}
.dupbox{display:grid;gap:12px;padding:12px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.dupkids{display:flex;flex-direction:column;gap:8px;min-width:0}
.dupkid{display:flex;align-items:center;gap:9px;min-width:0}
.dupkid .ico{width:20px;height:20px;color:var(--brand)}
.dupkid b{font-size:16px;font-weight:700;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dupby{display:flex;align-items:center;gap:10px;min-width:0;
  border-top:1px solid var(--line);padding-top:12px}
.dupby .ico.dupok{width:22px;height:22px;padding:4px;flex:none;stroke-width:3;
  color:#fff;background:var(--go);border-radius:50%}
.dupby span{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.dupby b{display:block;font-size:15px;font-weight:700;line-height:1.25}
.dupby i{display:block;font-style:normal;font-size:13px;color:var(--muted)}
/* Empilhado SEMPRE, inclusive no iPad: a tela do pai tem max-width 440,
   entao o cartao nunca passa de ~400px -- lado a lado, os dois nomes
   saiam cortados com reticencias. Duas colunas aqui seria codigo morto
   que so aparece como defeito. */
.duprow{position:relative;display:flex;align-items:flex-start;gap:12px;
  border-left:3px solid var(--hi);padding:1px 0 1px 12px}
.duprow::before{content:"";position:absolute;left:-3px;right:0;top:-8px;
  height:1px;background:var(--line)}
.duprow .ico{width:24px;height:24px;color:var(--hi-text);margin-top:1px}
.duprow b{display:block;font-size:15px;font-weight:700;line-height:1.35}
.duprow span{display:block;font-size:14px;line-height:1.35;color:var(--ink-2)}
/* A saida do aviso: largura inteira, discreta. Nao compete com nada --
   nao ha mais nada na tela. */
.dupcard .btn.dupok{width:100%;justify-content:center;margin-top:2px}
/* Banco fora do ar: uma tela, uma frase, um botao. */
.card.dbdown{padding:28px 22px;margin-top:18px;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:12px}
.card.dbdown .ico.dbico{width:44px;height:44px;color:var(--hi);stroke-width:1.8}
.card.dbdown h2{font-size:22px}
.card.dbdown p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.45;max-width:34ch}

/* ===== O QUE SE DIGITA, SOBE PARA MAIÚSCULA NA HORA =====
   O servidor já garante maiúscula na LEITURA, mas isso só aparece
   depois de salvar: quem está digitando via minúscula e duvidava se
   tinha feito certo. Agora o campo mostra o que vai ser gravado.

   Só os campos de NOME, SALA e VEÍCULO. Fora: telefone e minutos (são
   números), busca (atrapalha quem procura), e usuário e senha — nome
   de usuário é minúsculo por regra, e senha maiúscula seria desastre. */
.ntf[data-f="r1"],.ntf[data-f="r2"],
.ntk[data-f="name"],.ntk[data-f="room"],
.drvin[data-f="who"],.drvin[data-f="car"],
.drvin[data-f="cor"],.drvin[data-f="placa"],
.pcpwhoin,#cn,#cr{text-transform:uppercase}

/* ===== Tags em branco e edição de tag ===== */
.lotebox{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  margin:16px 0 4px;padding:14px;border:1px dashed var(--line-2);border-radius:var(--r-sm)}
.lotebox b{font-size:15px}
.loterow{display:flex;gap:8px;align-items:center}
.loterow input{width:90px}
/* Sem família é um ESTADO, não um nome vazio: a linha tem que se ler
   como estado, senão fica só o número e parece defeito. */
.listrow.livre{border-left:3px solid var(--line-2)}
.semdono{font-style:normal;font-weight:600;color:var(--muted);letter-spacing:.02em}
.edtbox{width:100%}
.edtacts{display:flex;gap:8px;margin-top:14px}
.ntnum{margin:14px 0 2px}
.ntnum input{width:120px}

/* ── QR do tablet e da TV ───────────────────────────────────────────────
   Na tela: o QR ao lado do endereco. Na folha: tudo grande, para quem monta
   o aparelho sem treino. */
.devqr{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.devqr .qrbox{width:128px;height:128px;border-width:2px;border-radius:10px;padding:6px}
.devqr .url{flex:1;min-width:180px;margin:0}
.qrsheet{display:none}
@media print{
  .qrsheet{display:block;text-align:center;color:#0b1e46;font-family:var(--sans)}
  .qsschool{font-size:18pt;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
  .qstitle{font-size:38pt;font-weight:800;line-height:1.05;margin:3mm 0 6mm}
  .qrsheet .qrbox.big{width:88mm;height:88mm;margin:0 auto 6mm;border-width:1.2mm;
    border-radius:5mm;padding:4mm}
  .qssteps{text-align:left;font-size:18pt;line-height:1.3;margin:0 auto 6mm;
    padding-left:14mm;max-width:165mm}
  .qssteps li{margin-bottom:3mm}
  .qskeep{border:1.2mm solid #c2530a;border-radius:4mm;padding:4mm;font-size:14pt;
    text-align:left;line-height:1.35;background:#fff1e6;max-width:175mm;margin:0 auto 6mm}
  .qsurl{font-family:ui-monospace,Menlo,monospace;font-size:7pt;color:#5c6b83;word-break:break-all}
}

/* ── Familias e cartoes: busca primeiro, lista curta ────────────────────
   Nada aqui despeja a escola inteira. Cada linha e uma linha so; o resto
   mora dentro dela, aberto por um toque. */
.regtop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.regbtns{display:flex;gap:8px;flex-wrap:wrap}
.btn.on{border-color:var(--brand);color:var(--brand)}
.searchrow{margin:4px 0 10px}
.searchrow input{width:100%;font-size:17px;padding:13px 15px}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.segb{border:1.5px solid var(--line-2);background:var(--surface);color:var(--muted);border-radius:999px;
  padding:7px 14px;font-size:13.5px;font-weight:600;min-height:36px}
.segb[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.tlist{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.trow{border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow.livre{border-left:3px solid var(--line-2)}
.trow.open{background:var(--surface-2)}
.thead{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;
  padding:11px 14px;min-height:52px;color:inherit}
.tnum{flex:none;min-width:42px;text-align:center;font-weight:700;font-size:15px;color:var(--brand);
  background:var(--brand-soft);border-radius:8px;padding:5px 6px}
.tmain{flex:1;min-width:0;display:flex;flex-direction:column}
.tmain b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsub{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tphone{font-size:13px;color:var(--muted);flex:none}
.tchev{flex:none;font-size:20px;color:var(--muted);width:22px;text-align:center}
.tbody{padding:2px 14px 16px 70px}
.tmore{width:100%;margin-top:10px}
.prevone{margin-top:14px}
.formgrid3{display:grid;grid-template-columns:1fr 1fr 130px;gap:12px}
@media (max-width:560px){.formgrid3{grid-template-columns:1fr 1fr}.formgrid3 .cnum{grid-column:1/-1}}
.cnum input{width:100%}
.prrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.prrow label{min-width:130px;font-weight:600;margin:0}
.prrow input{width:100px}
.lotefoot{margin-top:26px;padding-top:14px;border-top:1px dashed var(--line-2)}
.lotefoot .lotebox{margin-top:10px}
@media print{.tlist,.regtop,.searchrow,.seg,.lotefoot{display:none!important}}

.gsel{min-width:0}
.ntkid select,.ntkid input{margin:0}

/* ── Indicadores ────────────────────────────────────────────────────────
   Numero grande primeiro, detalhe depois. Azul e a marca, laranja e o que
   se mexe (as entregas); verde e vermelho so para melhor e pior. */
.kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kgrid.k4{grid-template-columns:repeat(4,1fr)}.kgrid.k2{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.kgrid,.kgrid.k4{grid-template-columns:repeat(2,1fr)}}
.ktile{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:3px;min-width:0}
.ktile.warn{border-color:var(--hi)}
.klbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kval{font-size:30px;line-height:1.1;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.ksub{font-size:12.5px;color:var(--muted)}
.dgood{color:var(--go);font-weight:700}.dbad{color:var(--alert);font-weight:700}
.prow{display:grid;grid-template-columns:minmax(120px,210px) 1fr 52px;gap:12px;align-items:center;margin:8px 0;font-size:14px}
.pbar{height:12px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--brand)}
.prow b{text-align:right}
.fbars{display:flex;align-items:flex-end;gap:6px;height:160px;overflow-x:auto;padding-top:8px}
.fcol{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;min-width:34px;flex:1}
.fpair{flex:1;display:flex;align-items:flex-end;gap:2px;width:100%;justify-content:center}
.fpair i{display:block;width:42%;border-radius:3px 3px 0 0;min-height:2px}
.fa{background:var(--brand)}.fe{background:var(--hi)}
.fcol span{font-size:10.5px;color:var(--muted);white-space:nowrap}
.flegend{display:flex;gap:16px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.flegend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}

/* ── Painel modular ─────────────────────────────────────────────────────
   Quatro colunas; cada bloco ocupa 1, 2 ou 4. Os controles de edicao so
   existem em "Personalizar" e nunca vao para o PDF. */
.dashtop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dw{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px 16px;min-width:0;display:flex;flex-direction:column;gap:10px}
.dw.s1{grid-column:span 1}.dw.s2{grid-column:span 2}.dw.s4{grid-column:span 4}
@media (max-width:900px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.dw.s4{grid-column:span 2}}
@media (max-width:560px){.dgrid{grid-template-columns:1fr}.dw.s1,.dw.s2,.dw.s4{grid-column:span 1}}
.dwh{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.dwh h3{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.35}
.dwg{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--brand-soft);color:var(--brand);letter-spacing:0;text-transform:none;font-size:11px}
.dwa{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ib{min-width:30px;min-height:30px;padding:0 8px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:8px;font-size:14px;line-height:1}
.ib.bad{color:var(--alert)}.ib:disabled{opacity:.35}
.ib.pdf{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.dwsel{min-height:30px;padding:0 6px;font-size:13px;max-width:130px}
.dwb{min-width:0}
.kv{display:flex;flex-direction:column;gap:4px}
.kv.warn .kval{color:var(--hi-text,var(--hi))}
.chartsvg{width:100%;height:auto;display:block}
.cgrid{stroke:var(--line);stroke-width:1}
.clbl{fill:var(--muted);font-size:10.5px}
.cmeta{stroke:var(--hi);stroke-width:1.5;stroke-dasharray:5 4}
.carea{fill:var(--brand);fill-opacity:.12}
.cline{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linejoin:round}
.cdot{fill:var(--brand);stroke:var(--surface);stroke-width:2}
.fm{background:transparent!important;border-top:2px dashed var(--hi);border-radius:0!important;height:0!important;width:14px!important;vertical-align:middle}
.donutw{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut{width:150px;height:150px;flex:none}
.dseg{fill:none;stroke-width:22;transform:rotate(-90deg);transform-origin:70px 70px}
.dcnum{fill:var(--ink);font-size:24px;font-weight:800}
.dclbl{fill:var(--muted);font-size:10px}
.dleg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;flex:1;min-width:150px}
.dleg li{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center}
.dleg i{width:10px;height:10px;border-radius:50%;display:block}
.dleg small{color:var(--muted);font-weight:400}
.hbars{display:flex;flex-direction:column;gap:7px}
.hrow{display:grid;grid-template-columns:minmax(64px,110px) 1fr 62px;gap:10px;align-items:center;font-size:13.5px}
.hrow.on span{font-weight:800;color:var(--brand)}
.hrow.on .hbar i{background:var(--hi)}
.hbar{height:11px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.hbar i{display:block;height:100%;background:var(--brand)}
.hrow b{text-align:right}
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:12px}
.cat{text-align:left;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.cat b{font-size:14px}.cat span{font-size:12.5px;color:var(--muted);line-height:1.35}
.cat:hover{border-color:var(--brand);background:var(--brand-soft)}
.drange{display:inline-flex;align-items:center;gap:6px;margin-left:6px}
.drange input{min-height:34px;padding:4px 8px}
/* O PDF e sempre claro, mesmo com a tela no tema escuro. */
.dashprint{--ink:#0b1e46;--muted:#5c6b83;--line:#dce3ef;--line-2:#c7d1e3;--surface:#fff;--surface-2:#f4f6fa;--brand:#1456d8;--brand-soft:#eaf1fd;--hi:#ff7a1a;--go:#138a4a;--alert:#c62828;
  background:#fff;color:#0b1e46;font-family:var(--sans);padding:0}
.dphead{display:flex;gap:18px;align-items:center;border-bottom:2px solid #0b1e46;padding-bottom:12px;margin-bottom:14px}
.dphead img{height:44px}.dphead h1{margin:0;font-size:22px}.dphead p{margin:2px 0 0;font-size:13px;color:#5c6b83}.dphead .dpsub{font-size:11.5px}
@media print{.dashprint .dw{break-inside:avoid;page-break-inside:avoid}.dashprint .dgrid{gap:10px}}

.docemb{position:fixed;left:-12000px;top:0}
.docoff{width:1000px;background:#fff;color:#0b1e46}
.pdfpronto{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}

/* ── Direcao: menu lateral ───────────────────────────────────────────────
   Os botoes continuam sendo data-act="tab"; so mudou onde moram. Em tela
   estreita o menu vira uma faixa rolavel, sem esconder nenhum item. */
.wrap.dirw{max-width:1180px}
.dirlay{display:grid;grid-template-columns:208px minmax(0,1fr);gap:30px;align-items:start}
.dirnav{position:sticky;top:16px;display:flex;flex-direction:column;gap:16px}
.navgrp{display:flex;flex-direction:column;gap:2px}
.navlbl{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding:4px 12px}
.dirnav button{border:0;background:none;color:var(--ink-2);text-align:left;
  padding:9px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:600;cursor:pointer}
.dirnav button:hover{background:var(--surface-2)}
.dirnav button[aria-current="true"]{background:var(--brand-soft);color:var(--ink)}
.dirnav .navgo{font-size:13px;font-weight:600;color:var(--brand);padding:9px 12px;
  border-top:1px solid var(--line);margin-top:2px;text-decoration:none}
.dirnav .navgo:hover{text-decoration:underline}
.dirnav button:focus-visible,.dirnav .navgo:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.dirmain{min-width:0}
.dircrumb{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
@media (max-width:760px){
  .dirlay{grid-template-columns:minmax(0,1fr);gap:14px}
  .dirnav{position:static;flex-direction:row;align-items:center;gap:4px;overflow-x:auto;
    padding-bottom:6px;border-bottom:1px solid var(--line)}
  .navgrp{flex-direction:row;flex:none}
  .navlbl{display:none}
  .dirnav button,.dirnav .navgo{white-space:nowrap;flex:none}
  .dirnav .navgo{border-top:0;margin-top:0}
}

/* ── Ajustes por assunto ─────────────────────────────────────────────── */
.setbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  flex-wrap:wrap;margin-bottom:18px}
.sechub{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.sechubit{display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 16px 14px;color:var(--ink);font:inherit}
.sechubit:hover{border-color:var(--brand)}
.sechubit:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sechubit .sht{font-size:15px;font-weight:700}
.sechubit .shd{font-size:13px;color:var(--muted);line-height:1.45}
.sechubit .shs{font-size:12.5px;color:var(--ink-2);padding-top:8px;margin-top:4px;
  border-top:1px solid var(--line);min-height:1.9em;display:flex;align-items:center;gap:6px}
.sechubit .she{font-size:13px;font-weight:600;color:var(--brand)}
.swatch{display:inline-block;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-2)}
.setsec{max-width:760px}
.setsec .setmap{margin-top:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ── Operacao e usuarios: blocos com titulo ──────────────────────────── */
.secgrp{margin-top:26px}
.secgrp:first-of-type{margin-top:0}
.secgrp .sech{margin-bottom:12px}
.secgrp .sech h2{font-size:18px;font-weight:700;margin:0}
.secgrp .sech p{font-size:13px;color:var(--muted);margin:3px 0 0;max-width:62ch}
.secgrp.urgente .sech h2{color:var(--hi-text)}
.cadsecs{width:100%;margin:0 0 18px}
.permgrps{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.permgrp{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.permgl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);min-width:96px}
.permgrp .perms{margin-top:0}
.card.pad.newuser{border:1px solid var(--brand);border-radius:var(--r);padding:20px 22px;margin-bottom:6px}

/* ── Zonas do menu em destaque ───────────────────────────────────────────
   Operacao, Cadastros, Administracao e Ajuda precisam ser lidas de longe:
   rotulo forte, com uma barra de cor e uma linha separando cada zona. */
.dirnav{gap:0}
.navgrp{padding:14px 0 12px;border-top:1px solid var(--line)}
.navgrp:first-child{border-top:0;padding-top:0}
.navlbl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:0 12px 8px}
.navlbl::before{content:"";width:4px;height:14px;border-radius:2px;background:var(--brand);flex:none}
.dirnav button{font-weight:500;color:var(--ink-2);padding-left:24px}
.dirnav button[aria-current="true"]{font-weight:700}
.dirnav .navgo{margin-top:0;border-top:1px solid var(--line);padding-top:14px}
@media (max-width:760px){
  .dirnav{gap:4px}
  .navgrp{padding:0 8px 0 0;border-top:0;border-right:1px solid var(--line);align-items:center}
  .navgrp:last-of-type{border-right:0}
  .navlbl{display:flex;font-size:11px;padding:0 6px 0 4px}
  .navlbl::before{height:12px}
  .dirnav button{padding-left:12px}
}
.homerow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.homerow:first-of-type{border-top:0}
.homerow span{min-width:0}
@media (max-width:760px){.kgrid{grid-template-columns:repeat(2,1fr)}}
.setgrid>.secgrp{margin-top:0}

/* Saude do sistema (Visao geral) */
.hhok{color:var(--go);font-weight:700}
.hhbad{color:var(--hi-text);font-weight:700}