:root{
  --ground:#F1F4F1; --surface:#FFFFFF; --surface-2:#E7ECE7; --surface-3:#DCE3DC;
  --line:#D2DAD1; --line-strong:#B4BFB3;
  --ink:#121A17; --ink-2:#48544E; --ink-3:#6D7A74;
  --accent:#0E6B5E; --accent-hover:#0A554A; --accent-ink:#FFFFFF; --accent-soft:#DBEBE6;
  --good:#1C7A4C; --warn:#8E5606; --crit:#A3271F;
  --good-bg:#DEEFE5; --warn-bg:#F6E8D2; --crit-bg:#F6DEDC;
  --shadow:0 1px 2px rgba(18,26,23,.06), 0 8px 24px -12px rgba(18,26,23,.18);
  --radius:10px;
  --f-display:'Archivo', 'Segoe UI', system-ui, sans-serif;
  --f-body:'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0D1412; --surface:#151E1B; --surface-2:#1D2724; --surface-3:#25312D;
    --line:#2A3733; --line-strong:#3D4C47;
    --ink:#E7EDE9; --ink-2:#A6B3AD; --ink-3:#7C8A84;
    --accent:#3EBEA7; --accent-hover:#5AD2BC; --accent-ink:#07201C; --accent-soft:#12302B;
    --good:#4FC98B; --warn:#DFA349; --crit:#EF867E;
    --good-bg:#12301F; --warn-bg:#33260F; --crit-bg:#331A18;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ground:#0D1412; --surface:#151E1B; --surface-2:#1D2724; --surface-3:#25312D;
  --line:#2A3733; --line-strong:#3D4C47;
  --ink:#E7EDE9; --ink-2:#A6B3AD; --ink-3:#7C8A84;
  --accent:#3EBEA7; --accent-hover:#5AD2BC; --accent-ink:#07201C; --accent-soft:#12302B;
  --good:#4FC98B; --warn:#DFA349; --crit:#EF867E;
  --good-bg:#12301F; --warn-bg:#33260F; --crit-bg:#331A18;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.hidden{display:none !important}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100dvh;display:grid;grid-template-columns:1fr}
@media (min-width:940px){.login-wrap{grid-template-columns:1.05fr .95fr}}
.login-left{background:var(--surface);display:flex;flex-direction:column;justify-content:center;padding:44px 28px}
@media (min-width:640px){.login-left{padding:56px 8vw}}
@media (min-width:940px){.login-left{padding:56px clamp(48px,7vw,110px)}}
.login-inner{width:100%;max-width:430px;margin:0 auto}
.login-mark{display:inline-flex;align-items:center;gap:11px;margin-bottom:34px}
.login-mark .glyph{width:42px;height:42px;border-radius:11px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:16px;flex:none}
.login-mark .nm{font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.15;letter-spacing:-.01em}
.login-mark .nm span{display:block;font-family:var(--f-mono);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.login-left h2{font-size:clamp(30px,4.4vw,38px);font-weight:700;line-height:1.08;margin-bottom:8px}
.login-sub{color:var(--ink-2);font-size:14.5px;margin:0 0 28px}
.login-fields{display:grid;gap:18px}
.in-wrap{position:relative;display:block;width:100%}
.in-wrap>svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-3);pointer-events:none}
.login-wrap .in-wrap input{width:100%;display:block;padding:12px 14px 12px 44px;background:var(--surface-2);border:1px solid transparent;min-height:52px;height:52px;border-radius:11px}
.login-wrap .in-wrap input:hover{border-color:var(--line-strong)}
.login-wrap .in-wrap input:focus{background:var(--surface);border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.login-wrap .in-wrap input::placeholder{color:var(--ink-3)}
.login-wrap .in-wrap.pw input{padding-right:46px}
/* Envelope do campo de senha fora do login (troca obrigatória e cadastro de
   usuários em Parâmetros): dá o contexto de posição que o botão do olho
   precisa, e abre espaço à direita para ele não cobrir o texto digitado. */
.pw-wrap{position:relative;display:block;width:100%}
.pw-wrap input{width:100%;padding-right:44px}
.eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;padding:8px;cursor:pointer;color:var(--ink-3);display:grid;place-items:center;border-radius:8px}
.eye:hover{color:var(--accent);background:var(--surface-3)}
.eye svg{width:18px;height:18px}
.login-wrap .field.invalid .in-wrap input{border-color:var(--crit);background:var(--crit-bg)}
.btn-login{width:100%;min-height:54px;border-radius:11px;font-size:15px;margin-top:4px}
.btn-login svg{width:16px;height:16px}

.login-right{display:none;background:linear-gradient(165deg, var(--accent-soft) 0%, var(--surface-2) 100%);place-items:center;padding:56px 40px;border-left:1px solid var(--line)}
@media (min-width:940px){.login-right{display:grid}}
.login-pitch{max-width:400px;text-align:center}
.pitch-logo{width:210px;height:210px;margin:0 auto 30px;border-radius:6px;background:var(--accent);color:var(--accent-ink);display:grid;place-content:center;justify-items:center;gap:14px;padding:26px;box-shadow:0 18px 40px -22px rgba(14,107,94,.65)}
.pitch-logo .mk{font-family:var(--f-display);font-size:52px;font-weight:700;line-height:1;letter-spacing:-.03em}
.pitch-logo .wm{font-family:var(--f-display);font-size:16px;font-weight:600;line-height:1.25;text-align:center}
.pitch-logo .an{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.login-pitch h1{font-size:25px;font-weight:700;line-height:1.2;margin-bottom:12px}
.login-pitch .quote{color:var(--ink-2);font-size:14.5px;line-height:1.6;margin:0}
.obj-list{list-style:none;margin:30px 0 0;padding:22px 0 0;border-top:1px solid var(--line-strong);display:grid;gap:9px;text-align:left}
.obj-list li{display:grid;grid-template-columns:24px 1fr;gap:9px;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.obj-list li span{font-family:var(--f-mono);font-size:10.5px;color:var(--accent);padding-top:2px}

/* ---------- SHELL ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1180px;margin:0 auto;padding:11px 18px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand .glyph{width:28px;height:28px;border-radius:7px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:13px;flex:none}
.brand-txt{min-width:0}
.brand-txt strong{display:block;font-family:var(--f-display);font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-txt span{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.net{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-family:var(--f-mono);color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:3px 9px 3px 7px;white-space:nowrap}
.net i{width:7px;height:7px;border-radius:50%;background:var(--good);display:block}
.net.off i{background:var(--warn)}
.who{text-align:right;line-height:1.25}
.who b{display:block;font-size:13px;font-weight:600}
.who span{font-size:11px;color:var(--ink-3);font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.08em}
@media (max-width:620px){.who{display:none}.net span{display:none}}
.tabs{border-bottom:1px solid var(--line);background:var(--surface)}
.tabs-in{max-width:1180px;margin:0 auto;padding:0 18px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs-in::-webkit-scrollbar{display:none}
.tabs-in{align-items:stretch}
/* A aba carrega dois níveis: o que a pessoa vai FAZER ali (rótulo forte) e o
   documento a que aquilo corresponde (Anexo I / Anexo III). Reorganizar o menu
   pela tarefa não pode custar a referência ao anexo, que é como o formulário é
   chamado no chão de fábrica. */
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:9px 12px 8px;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap;display:flex;flex-direction:column;gap:1px;text-align:left}
.tab b{font-weight:500;font-size:14px;line-height:1.25}
.tab i{font-family:var(--f-mono);font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);line-height:1.2}
.tab:hover{color:var(--ink)}
.tab:hover i{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.tab[aria-selected="true"] b{font-weight:600}
.tab[aria-selected="true"] i{color:var(--accent);opacity:.75}
.tab-sep{width:1px;background:var(--line);margin:12px 10px;flex:none}
.tab-grupo{display:none;align-self:center;font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:0 8px 0 2px;flex:none;opacity:.75}
/* Os rótulos de grupo são orientação, não navegação: somem antes das abas
   quando o espaço aperta. */
@media (min-width:1100px){.tab-grupo{display:block}}
@media (max-width:560px){
  .tab i{display:none}
  .tab{padding:12px 10px}
  .tab-sep{margin:14px 4px}
}
main{max-width:1180px;margin:0 auto;padding:26px 18px 72px}
.page-head{margin-bottom:22px}
/* Segundo bloco da mesma aba (Usuários, embaixo dos parâmetros): separa
   os dois assuntos sem precisar de outra aba na barra de navegação. */
.page-head.sub{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.page-head h2{font-size:23px;font-weight:600}
.page-head p{margin:5px 0 0;color:var(--ink-2);font-size:14px;max-width:68ch}

/* ---------- CONTROLS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;border:1px solid transparent;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;background:var(--accent);color:var(--accent-ink);min-height:42px}
.btn:hover{background:var(--accent-hover)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn.sm{padding:7px 12px;font-size:13px;min-height:36px}
.btn.danger{background:transparent;color:var(--crit);border-color:transparent;padding:6px 8px;min-height:32px;font-size:12.5px}
.btn.danger:hover{background:var(--crit-bg)}
/* botão de ação destrutiva (confirmar exclusão/cancelamento). Precisa ser
   classe, e não style inline: a CSP de produção é style-src 'self', então
   estilo em atributo é bloqueado e o botão sairia verde. */
.btn.crit{background:var(--crit);color:#FFFFFF}
.btn.crit:hover{background:var(--crit);filter:brightness(.9)}
.btn.crit:disabled:hover{background:var(--crit);filter:none}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-size:13px;font-weight:600;color:var(--ink-2)}
.field>label .req{color:var(--crit);margin-left:2px}
.field .hint{font-size:12px;color:var(--ink-3)}
/* type=search entra na mesma regra dos demais: sem isto ele herdava o campo
   nativo do navegador e destoava de todos os outros controles da tela. */
input[type=text],input[type=email],input[type=date],input[type=password],input[type=search],select,textarea{
  width:100%;background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;min-height:44px}
/* Só a moldura é normalizada; o "×" nativo de limpar continua disponível. */
input[type=search]{appearance:none;-webkit-appearance:none}
textarea{min-height:104px;resize:vertical;line-height:1.5}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
.err-msg{font-size:12.5px;color:var(--crit);display:none;align-items:center;gap:5px}
.field.invalid input,.field.invalid select,.field.invalid textarea,.field.invalid .sig-box{border-color:var(--crit);background:var(--crit-bg)}
.field.invalid .err-msg{display:flex}

/* ---------- FORM ----------
   O documento acompanha a largura da página, como as tabelas e os painéis de
   relatório: travado em 900px dentro de um main de 1180px, ele deixava um vão
   morto de dois dedos à direita em qualquer monitor. Quem controla a medida de
   leitura passa a ser a grade de campos, não a caixa.
   --doc-pad mantém cabeçalho, blocos, questões e rodapé no mesmo respiro, e
   ele encolhe no celular: 24px fixos comiam 48px dos 360px da tela. */
.form-doc{--doc-pad:18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
@media (min-width:660px){.form-doc{--doc-pad:26px}}
@media (min-width:1080px){.form-doc{--doc-pad:30px}}
.doc-head{padding:20px var(--doc-pad,24px);border-bottom:1px solid var(--line);background:var(--surface-2)}
.doc-head h3{font-size:17px;font-weight:700}
.doc-head p{margin:6px 0 0;font-size:13px;color:var(--ink-2);max-width:70ch}
fieldset{border:0;margin:0;padding:22px var(--doc-pad,24px);border-bottom:1px solid var(--line)}
legend{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:0;margin-bottom:14px}
.grid2{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:660px){.grid2{grid-template-columns:1fr 1fr}.grid2 .span2{grid-column:1/-1}}
/* Grade de 12 colunas, só no desktop largo. É ela que devolve ao formulário a
   forma do documento em papel: data, tutor e local numa linha; nome, cargo e
   matrícula noutra. Sem ela um campo de data ocupava meia tela e "Local da
   atividade" ocupava a tela inteira, empurrando o resto para baixo.
   Abaixo de 1080px nada muda: tablet (retrato e paisagem, ate 1024px) segue
   nas duas colunas e o celular na coluna unica, com os alvos de toque largos.
   O escopo em .form-doc é obrigatório: o .grid2 do modal de QR de acesso vive
   numa caixa de 520px e não pode virar doze colunas. */
@media (min-width:1080px){
  .form-doc .grid2{grid-template-columns:repeat(12,minmax(0,1fr));gap:18px 20px}
  .form-doc .grid2>*{grid-column:span 6}
  .form-doc .grid2>.span2{grid-column:1/-1}
  .form-doc .grid2>.c2{grid-column:span 2}
  .form-doc .grid2>.c3{grid-column:span 3}
  .form-doc .grid2>.c4{grid-column:span 4}
  .form-doc .grid2>.c5{grid-column:span 5}
  .form-doc .grid2>.c8{grid-column:span 8}
}
/* Assinatura única (Anexo III): a faixa de assinar não acompanha a largura do
   documento. Passar de ~640px só aumenta o PNG enviado à API e a área vazia em
   volta do traço — no Anexo I as duas assinaturas já se dividem em .sig-duo. */
.sig-solo{max-width:640px}
.sig-lado{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:1080px){.sig-lado{grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:28px;align-items:center}}
.sig-nota{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.6;max-width:44ch}
.locked{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);margin-top:-1px}
.form-actions{padding:18px var(--doc-pad,24px);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.form-actions .spacer{flex:1}
@media (max-width:560px){.form-actions{flex-direction:column-reverse;align-items:stretch}.form-actions .spacer{display:none}.form-actions .btn{width:100%}}
.sig-foot{flex-wrap:wrap}

/* ---------- SIGNATURE ---------- */
.sig-box{border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);overflow:hidden}
.sig-canvas{display:block;width:100%;height:190px;touch-action:none;cursor:crosshair;background:#FFFFFF}
.sig-foot{display:flex;align-items:center;gap:10px;padding:8px 10px;border-top:1px dashed var(--line-strong);background:var(--surface-2)}
.sig-foot .lbl{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;margin-right:auto}
.sig-state{font-size:12px;font-weight:600;color:var(--warn);display:inline-flex;align-items:center;gap:5px}
.sig-state.ok{color:var(--good)}

/* ---------- KPI ---------- */
.kpis{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-bottom:18px}
@media (min-width:820px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 13px 10px;display:flex;flex-direction:column;gap:1px}
.kpi .k-label{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .k-val{font-family:var(--f-display);font-size:22px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums;margin-top:2px}
.kpi .k-sub{font-size:11px;color:var(--ink-3);line-height:1.35}
.kpi.accent{border-color:var(--accent)}
.kpi.accent .k-val{color:var(--accent)}

/* ---------- DISTRIBUTION ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:20px}
.panel h3{font-size:14px;font-weight:600;margin-bottom:2px}
.panel .sub{font-size:12px;color:var(--ink-3);margin-bottom:11px}
.bars{display:grid;gap:9px}
.bar-row{display:grid;grid-template-columns:minmax(90px,26%) 1fr 34px;align-items:center;gap:10px;font-size:13px}
.bar-row .nm{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{height:9px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.bar-fill{height:100%;border-radius:5px;background:var(--accent);width:0}
.bar-fill.lacuna{background:var(--warn)}
.bar-row .n{text-align:right;font-family:var(--f-mono);font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- TABELA DE REGISTROS ---------- */
.gal-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.gal-head h3{font-size:16px;font-weight:600}
.gal-head .count{font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}
.gal-tools{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.gal-tools input,.gal-tools select{min-height:38px;padding:7px 11px;font-size:13.5px;width:auto;min-width:158px}
.gal-tools select{background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px}
.tbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.tbl-scroll{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;min-width:1060px;table-layout:fixed}
table.tbl col.c1{width:23%} table.tbl col.c2{width:12%} table.tbl col.c3{width:12%} table.tbl col.c4{width:8%} table.tbl col.c5{width:11%} table.tbl col.c6{width:10%} table.tbl col.c7{width:24%}
table.tbl-av col.c1{width:25%} table.tbl-av col.c2{width:11%} table.tbl-av col.c3{width:15%} table.tbl-av col.c4{width:6%} table.tbl-av col.c5{width:11%} table.tbl-av col.c6{width:10%} table.tbl-av col.c7{width:22%}
table.tbl-av .c-date{font-size:12px}
table.tbl thead th{background:var(--surface-2);text-align:left;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl tbody td{padding:12px 12px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle;overflow-wrap:anywhere}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--surface-2)}
.c-name{font-weight:600;font-size:14px;color:var(--ink);display:block;line-height:1.25}
.c-name .tag{margin-left:7px}
.c-sub{color:var(--ink-2)}
.c-date{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
.sig-thumb{height:32px;width:100%;max-width:96px;object-fit:contain;object-position:left center;display:block;background:#FFFFFF;border:1px solid var(--line);border-radius:5px;padding:2px 4px}
.ops{display:flex;gap:5px;justify-content:flex-end;flex-wrap:nowrap}
.op{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);border-radius:6px;padding:4px 8px;font-size:12px;font-weight:500;cursor:pointer;min-height:30px;white-space:nowrap}
.op:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.op.del:hover{border-color:var(--crit);color:var(--crit);background:var(--crit-bg)}
@media (max-width:860px){
  .c-meta{white-space:normal}
  table.tbl{min-width:0}
  table.tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.tbl tbody tr{display:grid;grid-template-columns:1fr;gap:0;padding:12px 14px;border-bottom:1px solid var(--line)}
  table.tbl tbody td{border:0;padding:3px 0;display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center}
  table.tbl tbody td::before{content:attr(data-l);font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  table.tbl tbody td.td-name{grid-template-columns:1fr;padding-bottom:7px}
  table.tbl tbody td.td-name::before{display:none}
  table.tbl tbody td.td-ops{grid-template-columns:1fr;padding-top:9px;margin-top:6px;border-top:1px solid var(--line)}
  table.tbl tbody td.td-ops::before{display:none}
  .ops{justify-content:flex-start}
  .op{flex:1;min-width:78px}
}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:5px;padding:12px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.pg{min-width:32px;height:32px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:6px;font-size:13px;cursor:pointer;padding:0 8px;font-variant-numeric:tabular-nums}
.pg:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pg[aria-current="true"]{border-color:var(--accent);color:var(--accent);font-weight:600;background:var(--accent-soft)}
.pg:disabled{opacity:.4;cursor:not-allowed}
.pg.dots{border:0;background:none;cursor:default;color:var(--ink-3)}
.pg-info{margin-right:auto;font-size:12px;color:var(--ink-3);font-family:var(--f-mono)}
/* rótulo de estado: texto colorido, sem caixa */
.tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.tag.ok{color:var(--good)} .tag.cx{color:var(--crit)} .tag.ed{color:var(--warn)}
.tag.adm{color:var(--accent)} .tag.tut{color:var(--ink-3)} .tag.pend{color:var(--warn)} .tag.voce{color:var(--ink-3);opacity:.8}
.tag.t-exc{color:var(--good)} .tag.t-ade{color:var(--accent)} .tag.t-ate{color:var(--warn)} .tag.t-cri{color:var(--crit)}
.c-meta{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.03em;margin-top:3px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-meta .sep{opacity:.5;margin:0 4px}
.c-etapa{font-family:var(--f-mono);font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
tr.cancelada td:not(.td-ops){opacity:.62}
tr.cancelada .c-name{text-decoration:line-through;text-decoration-color:var(--ink-3)}
/* Conta inativa fica apagada, mas sem risco no nome: ela não foi cancelada,
   só perdeu o acesso — e pode voltar. */
tr.inativa td:not(.td-ops){opacity:.66}
.op:disabled{opacity:.4;cursor:not-allowed}
.op:disabled:hover{border-color:var(--line-strong);color:var(--ink-2);background:var(--surface)}
.audit{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.audit li{display:grid;grid-template-columns:14px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.audit li i{width:8px;height:8px;border-radius:50%;background:var(--ink-3);margin-top:6px;display:block}
.audit li.a-new i{background:var(--good)} .audit li.a-edit i{background:var(--warn)} .audit li.a-cx i{background:var(--crit)}
.audit b{color:var(--ink);font-weight:600}
.audit .when{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;margin-top:1px}
.sec-title{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 0}
.motivo-box{background:var(--crit-bg);border:1px solid var(--crit);border-radius:8px;padding:10px 12px;font-size:13px;margin-top:10px}
.motivo-box b{display:block;font-size:11px;font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--crit);margin-bottom:3px}
.perm-note{font-size:12px;color:var(--ink-3);margin-top:10px;display:flex;gap:7px;align-items:flex-start}
.empty{border:1px dashed var(--line-strong);border-radius:12px;padding:40px 20px;text-align:center;color:var(--ink-3);font-size:14px}
/* botao de tema */
/* Pílulas da barra superior: tema e QR de acesso. Mesma forma de propósito —
   são as duas ações que não pertencem a nenhuma aba. */
.theme-btn,.chip-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:4px 11px 4px 9px;font-size:12px;cursor:pointer;min-height:30px}
.theme-btn:hover,.chip-btn:hover{border-color:var(--accent);color:var(--accent)}
.theme-btn svg,.chip-btn svg{width:14px;height:14px;flex:none}
@media (max-width:620px){.theme-btn span,.chip-btn span{display:none}.theme-btn,.chip-btn{padding:4px 8px}}
/* modo edicao */
.edit-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--warn-bg);border:1px solid var(--warn);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--ink);margin-bottom:16px}
.edit-bar b{font-weight:600}
.edit-bar .btn{margin-left:auto}
.sig-prev{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-bottom:8px}
.sig-prev img{height:38px;width:120px;object-fit:contain;object-position:left center;background:#FFFFFF;border:1px solid var(--line);border-radius:5px;padding:2px 4px}
.sig-prev p{margin:0;font-size:12px;color:var(--ink-2)}
/* ================= PARÂMETROS E CADASTROS =================
   A tela abre mostrando o que já está cadastrado: quatro grupos, cada um com a
   sua mini-galeria de cartões. Cadastrar, editar e inativar acontecem no popup
   (.cad-modal), não na página — assim a lista nunca disputa espaço com um
   formulário vazio, que era o problema do desenho anterior. */

.cad-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.cad-head-txt{min-width:0;flex:1 1 420px}
/* Discreto de propósito: nesta tela ver o que existe é a regra e cadastrar é a
   exceção. O botão só ganha peso no hover e no foco. */
.cad-new{display:inline-flex;align-items:center;gap:7px;border:1px dashed var(--line-strong);background:transparent;color:var(--ink-2);border-radius:9px;padding:8px 14px;font-size:13.5px;font-weight:500;cursor:pointer;min-height:40px;margin-top:3px;transition:border-color .15s ease,color .15s ease,background .15s ease}
.cad-new:hover,.cad-new:focus-visible{border-style:solid;border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.cad-new svg{width:16px;height:16px;flex:none}

.cad-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.cad-search{position:relative;flex:0 1 320px;min-width:200px}
.cad-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-3);pointer-events:none}
.cad-search input{min-height:38px;padding:7px 12px 7px 34px;font-size:13.5px;border-color:var(--line)}
.cad-search input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.cad-resumo{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.cad-bar .hint-tb{margin-left:auto;font-size:12px;color:var(--ink-3);line-height:1.45;max-width:46ch;text-align:right}
@media (max-width:1040px){.cad-bar .hint-tb{width:100%;margin-left:0;order:5;max-width:none;text-align:left}}
/* interruptor de "mostrar inativos" — mesmo peso visual dos botões da barra */
.switch{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);cursor:pointer;user-select:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:5px 12px;min-height:36px}
.switch:hover{border-color:var(--ink-3);color:var(--ink)}
.switch input{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:32px;height:18px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line-strong);position:relative;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.28);transition:transform .15s ease}
.switch input:checked{background:var(--accent);border-color:var(--accent)}
.switch input:checked::after{transform:translateX(14px);background:var(--accent-ink)}
.switch input:disabled{opacity:.55;cursor:progress}

/* ---------- galeria: quatro blocos, um por cadastro ----------
   A tela se divide em quatro blocos independentes (tutores, locais, cargos e
   contas), cada um com o seu cabeçalho, a sua contagem, o seu "+" e a sua
   lista. Em tela larga eles ocupam quadrantes 2x2: os quatro cadastros ficam
   à vista de uma vez, em vez de empilhados em quatro faixas que obrigam a
   rolar a página inteira para conferir o que existe.
   `align-items:start` mantém cada bloco com a altura do seu conteúdo — um
   grupo com dois registros não é esticado para acompanhar um com vinte. */
.cad-galeria{display:grid;gap:18px;align-items:start}
@media (min-width:1080px){.cad-galeria{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cad-grupo{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.cg-head{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line)}
.cg-ico{width:30px;height:30px;flex:none;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.cg-ico svg{width:16px;height:16px}
.cg-txt{min-width:0;flex:1}
.cg-txt h3{font-size:14.5px;font-weight:600;line-height:1.25}
.cg-sub{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.4;margin-top:1px;overflow-wrap:anywhere}
.cg-count{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3);white-space:nowrap;flex:none}
.cg-add{width:32px;height:32px;flex:none;display:grid;place-items:center;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-3);border-radius:8px;cursor:pointer;padding:0}
.cg-add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.cg-add svg{width:15px;height:15px}
@media (max-width:520px){.cg-head{flex-wrap:wrap}.cg-count{order:4;width:100%;text-align:right}}

/* Lista simples: um registro por linha, separados por filete. Em grade de
   cartões lado a lado o nome ganhava 258px e virava "Operador de Pr..." em
   praticamente todo cargo — em linha ele tem a largura do bloco inteiro e
   quase nunca precisa de reticências.
   Continua sendo um grid de uma coluna (e não flex) por causa do
   `grid-column:1/-1` do estado vazio, que depende disso. */
.cg-lista{list-style:none;margin:0;padding:4px 0;display:grid;gap:0;grid-template-columns:1fr}
/* Lista longa rola dentro do próprio bloco: assim um cadastro com dezenas de
   registros não empurra os outros três para fora da tela. */
@media (min-width:1080px){
  .cg-lista{max-height:min(56vh,460px);overflow:auto;overscroll-behavior:contain}
}

.cad-card{display:flex;align-items:center;gap:10px;padding:8px 14px;min-height:50px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;transition:background .15s ease}
.cg-lista>.cad-card:first-child{border-top:0}
.cad-card:hover,.cad-card:focus-within{background:var(--surface-2)}
.cc-mono{width:32px;height:32px;flex:none;border-radius:8px;background:var(--surface-3);color:var(--ink-2);display:grid;place-items:center;font-family:var(--f-display);font-size:11.5px;font-weight:600}
.cc-txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.cc-nome{font-size:13.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-tags{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;margin:2px 0 1px}
.cc-meta{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.02em;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-meta.fraca{opacity:.78}
.cc-meta.vazia{opacity:.7;font-style:italic}
.cc-meta .sep{font-style:normal;opacity:.55;margin:0 5px}
.cad-card.off .cc-nome{color:var(--ink-3)}
.cad-card.off .cc-mono{opacity:.5}

/* As contas carregam duas linhas de meta (e-mail, e depois vínculo e último
   acesso); a linha delas respira um pouco mais que a dos parâmetros. */
.cad-grupo.largo .cad-card{min-height:58px}

/* Ações da linha: ícone só, com título e aria-label — três rótulos escritos
   por linha competiriam com o nome, que é a informação da lista. */
.cc-ops{display:flex;gap:2px;flex:none}
.ico{width:30px;height:30px;display:grid;place-items:center;padding:0;border:1px solid transparent;background:transparent;color:var(--ink-3);border-radius:7px;cursor:pointer}
.ico svg{width:15px;height:15px}
.ico:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.ico.del:hover{border-color:var(--crit);color:var(--crit);background:var(--crit-bg)}
.ico:disabled{opacity:.3;cursor:not-allowed}
.ico:disabled:hover{border-color:transparent;color:var(--ink-3);background:transparent}
/* No toque não existe hover: lá os botões ficam sempre em peso cheio. */
@media (hover:hover){
  .cc-ops .ico:not(:disabled){opacity:.6}
  .cad-card:hover .ico:not(:disabled),.cad-card:focus-within .ico:not(:disabled){opacity:1}
}

.cg-vazio{grid-column:1/-1;padding:20px 14px;text-align:center;font-size:12.5px;color:var(--ink-3);line-height:1.6}
.cg-nota{display:block;margin-top:4px;font-size:11.5px;opacity:.85}
.linkish{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linkish:hover{color:var(--accent-hover)}
.cad-card.esqueleto{pointer-events:none}
.cad-card.esqueleto .cc-txt{gap:5px}
.cad-card.esqueleto .skel-line.larga{width:62%}
.cad-card.esqueleto .skel-line.curta{width:38%}
/* Item recém-salvo: acende uma vez para mostrar onde ele foi parar. */
.cad-card.aceso{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);animation:cad-acender 2.2s ease}
@keyframes cad-acender{0%{box-shadow:inset 0 0 0 0 var(--accent)}12%{box-shadow:inset 6px 0 0 var(--accent)}100%{box-shadow:inset 3px 0 0 var(--accent)}}
@media (prefers-reduced-motion:reduce){.cad-card.aceso{animation:none}}

/* ---------- popup de cadastro ---------- */
.cad-modal{max-width:620px}
/* Escolha do tipo antes dos campos: é ela que decide quais campos existem. */
.tipo-pick{border:0;margin:0 0 18px;padding:0 0 16px;border-bottom:1px dashed var(--line)}
.tipo-pick legend{padding:0;margin-bottom:9px;font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.tp-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:560px){.tp-opts{grid-template-columns:repeat(4,1fr)}}
.tp-opt{position:relative;display:block;cursor:pointer}
.tp-opt input{position:absolute;opacity:0;width:0;height:0}
.tp-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:80px;padding:11px 8px;text-align:center;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);transition:border-color .15s ease,background .15s ease,color .15s ease}
.tp-opt:hover .tp-in{border-color:var(--ink-3);background:var(--surface-2)}
.tp-ico{color:var(--ink-3);display:grid;place-items:center}
.tp-ico svg{width:19px;height:19px}
.tp-nm{font-size:12px;font-weight:600;line-height:1.25;color:var(--ink-2)}
.tp-opt input:checked+.tp-in{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.tp-opt input:checked+.tp-in .tp-ico,.tp-opt input:checked+.tp-in .tp-nm{color:var(--accent)}
.tp-opt input:focus-visible+.tp-in{outline:2px solid var(--accent);outline-offset:2px}

.cad-form,#cadCampos{display:grid;gap:14px}
.cad-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* Duas colunas de campo não cabem no celular: abaixo disso o par empilha. */
@media (max-width:620px){.cad-duo{grid-template-columns:1fr}}
.cad-form .field{gap:5px}
.cad-form .field>label{font-size:12.5px}
.cad-form .hint{font-size:11.5px;line-height:1.45}
.cad-form .err-msg{font-size:12px}
/* "Limpar/Restaurar" é ação de reversão: fica na ponta oposta de Salvar. */
.cad-footer{flex-wrap:wrap}
.cad-footer #cadLimpar{margin-right:auto}
@media (max-width:520px){.cad-footer #cadLimpar{order:3;width:100%;margin-right:0}}

/* ---------- MODAL / TOAST ---------- */
/* Trava a rolagem do fundo enquanto houver modal aberto. Classe, e não estilo
   em atributo: a CSP de produção é style-src 'self'. */
body.no-scroll{overflow:hidden}
.modal-bg{position:fixed;inset:0;background:rgba(10,16,14,.55);z-index:60;display:grid;place-items:center;padding:18px;overflow-y:auto}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:14px;width:100%;max-width:560px;box-shadow:var(--shadow);max-height:92dvh;overflow-y:auto}
.modal header{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px}
.modal header h3{font-size:18px;font-weight:600;line-height:1.25}
.modal header .st{display:block;margin-top:3px}
.modal header .eyebrow{display:block;margin-bottom:3px}
.modal .x{margin-left:auto;background:none;border:0;font-size:22px;line-height:1;color:var(--ink-3);cursor:pointer;padding:0 4px}
.modal.sm{max-width:470px}
.modal .body{padding:20px 22px}
.modal-txt{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55}
.dl{display:grid;gap:0;margin:0}
.dl div{display:grid;grid-template-columns:145px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
@media (max-width:560px){.dl div{grid-template-columns:1fr;gap:3px}}
.dl dt{font-size:12.5px;color:var(--ink-3);font-family:var(--f-mono);letter-spacing:.04em}
.dl dd{margin:0}
.sig-view{width:100%;max-width:320px;height:auto;border:1px solid var(--line);border-radius:8px;background:#FFFFFF;padding:6px;margin-top:8px}
.modal footer{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
#toast{position:fixed;left:50%;bottom:26px;visibility:hidden;opacity:0;transform:translateX(-50%) translateY(120%);background:var(--ink);color:var(--ground);padding:12px 18px;border-radius:10px;font-size:14px;font-weight:500;z-index:80;transition:transform .28s ease, opacity .2s ease, visibility .28s;box-shadow:var(--shadow);max-width:90vw;text-align:center}
#toast.show{visibility:visible;opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- AVALIAÇÃO (ANEXO I) ---------- */
.q-block{padding:20px var(--doc-pad,24px);border-bottom:1px solid var(--line)}
.q-head{display:flex;gap:10px;align-items:baseline;margin-bottom:12px}
.q-num{font-family:var(--f-mono);font-size:11px;color:var(--accent);border:1px solid var(--accent);border-radius:5px;padding:1px 6px;flex:none;letter-spacing:.05em}
.q-title{font-size:14.5px;font-weight:600;line-height:1.35}
.q-title small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.opts{display:grid;gap:8px;grid-template-columns:1fr}
@media (min-width:620px){.opts{grid-template-columns:repeat(2,1fr)}.opts.four{grid-template-columns:repeat(4,1fr)}.opts.two{grid-template-columns:repeat(2,1fr)}}
.opt{position:relative;display:flex;align-items:center;gap:9px;border:1px solid var(--line-strong);border-radius:9px;padding:10px 12px;cursor:pointer;background:var(--surface);font-size:13.5px;min-height:44px;line-height:1.3}
.opt:hover{border-color:var(--ink-3);background:var(--surface-2)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .mark{width:17px;height:17px;border:1.5px solid var(--line-strong);flex:none;display:grid;place-items:center;background:var(--surface)}
.opt .mark.r{border-radius:50%}
.opt .mark.c{border-radius:4px}
.opt .mark::after{content:"";width:8px;height:8px;background:var(--accent);transform:scale(0);transition:transform .12s ease}
.opt .mark.r::after{border-radius:50%}
.opt .mark.c::after{width:9px;height:9px;clip-path:polygon(14% 46%,0 60%,39% 100%,100% 22%,86% 8%,39% 70%)}
.opt input:checked ~ .mark::after{transform:scale(1)}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.opt:has(input:checked) .mark{border-color:var(--accent)}
.opt input:focus-visible ~ .mark{outline:2px solid var(--accent);outline-offset:2px}
.opt .txt{flex:1}
.q-obs{margin-top:12px}
.q-obs label{font-size:12px;color:var(--ink-3);display:block;margin-bottom:5px}
.q-obs textarea{min-height:64px;font-size:13.5px}
.field.invalid .opts .opt{border-color:var(--crit)}
.sig-duo{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:760px){.sig-duo{grid-template-columns:1fr 1fr}}
.tag-opc{font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-left:7px}

/* ---------- ÍNDICE / SCORE ---------- */
.score-cell{display:flex;align-items:center;gap:8px}
.score-bar{flex:1;min-width:52px;height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.score-bar i{display:block;height:100%;border-radius:4px}
.score-n{font-family:var(--f-mono);font-size:12.5px;font-variant-numeric:tabular-nums;min-width:26px;text-align:right}
.s-exc{background:var(--good)} .s-ade{background:var(--accent)} .s-ate{background:var(--warn)} .s-cri{background:var(--crit)}
.t-exc{color:var(--good)} .t-ade{color:var(--accent)} .t-ate{color:var(--warn)} .t-cri{color:var(--crit)}
.n-inline{font-family:var(--f-mono);font-size:11.5px;font-variant-numeric:tabular-nums;letter-spacing:.03em;margin-left:7px}

/* ---------- SEGMENTED (relatórios) ---------- */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px;margin-bottom:20px}
.seg button{border:0;background:none;border-radius:6px;padding:7px 15px;font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap;min-height:36px}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--accent);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.panel-duo{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:20px}
@media (min-width:900px){.panel-duo{grid-template-columns:1fr 1fr}}
.panel-duo .panel{margin-bottom:0}
.crit-row{display:grid;grid-template-columns:minmax(120px,44%) 1fr 38px;align-items:center;gap:10px;font-size:13px}
.crit-row .nm{color:var(--ink-2);line-height:1.25}
.bar-row .n.num,.crit-row .n.num,.gap-row .n.num{text-align:right;font-family:var(--f-mono);font-size:12.5px}
.gap-row{display:grid;grid-template-columns:minmax(110px,42%) 1fr 26px;align-items:center;gap:10px;font-size:13px}
.dl-answer{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.obs-txt{display:block;font-size:12.5px;color:var(--ink-3);margin-top:4px;font-style:italic}
.plain-list{font-size:13.5px;line-height:1.5;color:var(--ink);display:grid;gap:3px}
.plain-list i{font-style:normal;display:block;padding-left:15px;position:relative}
.plain-list i::before{content:"–";position:absolute;left:0;color:var(--ink-3);opacity:.7}
.plain-list.gaps i{color:var(--warn)}
.score-big{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding:2px 0 16px;margin-bottom:4px}
.score-big .n{font-family:var(--f-display);font-size:38px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.score-big .d{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.score-big .d b{display:block;font-size:13.5px;color:var(--ink)}


/* ---------- EXPORTAÇÃO / LOADING ---------- */
.gal-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.gal-actions .btn{min-height:38px;padding:7px 12px;font-size:13px;gap:7px}
.gal-actions .btn svg{width:15px;height:15px;flex:none}
.gal-actions .divisor{width:1px;height:22px;background:var(--line);margin:0 2px}
@media (max-width:700px){.gal-actions{width:100%}.gal-actions .btn{flex:1}.gal-actions .divisor{display:none}}
.load-bg{position:fixed;inset:0;z-index:90;background:rgba(10,16,14,.62);backdrop-filter:blur(2px);display:grid;place-items:center;padding:24px}
/* Largura fixa (e não max-width) para que a barra de progresso não encolha
   junto com a mensagem: cartão que muda de tamanho a cada troca de texto faz
   a barra parecer que anda para trás. */
.load-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:28px 32px;display:grid;justify-items:center;gap:4px;text-align:center;width:min(340px,100%);box-sizing:border-box}
.load-card:focus{outline:none}
.load-card b{font-family:var(--f-display);font-size:16px;font-weight:600;margin-top:14px}
.load-card span{font-size:13px;color:var(--ink-2);line-height:1.45}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--surface-3);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{border-top-color:var(--accent);opacity:.9}}

/* Barra de progresso do diálogo bloqueante. Dois estados:
     • determinado — .lp-fill recebe a largura em % pela CSSOM;
     • indeterminado (.indet) — enquanto o servidor ainda monta o arquivo e
       não há byte nenhum para medir, um trecho de 38% desliza no trilho.
   O trecho nasce SEM transform: com "prefers-reduced-motion" a animação é
   desligada por completo pela regra global logo abaixo, e um estado inicial
   de translateX(-115%) deixaria a barra invisível em vez de só parada. */
.load-prog{width:100%;margin-top:16px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}
.lp-track{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.lp-fill{height:100%;width:0;border-radius:999px;background:var(--accent);transition:width .2s ease-out}
.load-prog.indet .lp-fill{width:38%;animation:lp-desliza 1.15s ease-in-out infinite}
.load-card .lp-pct{font-size:12px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
@keyframes lp-desliza{0%{transform:translateX(-115%)}100%{transform:translateX(280%)}}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}
  .spin{animation:spin .8s linear infinite !important}
  .load-prog.indet .lp-fill{width:100%;opacity:.45}}

/* ---------- REGRAS MIGRADAS DO <style> INLINE DO index.html ---------- */
/* a CSP de produção (script-src 'self') não afeta style inline, mas aqui não
   há motivo para manter um <style> à parte: tudo cabe no design system. */
html,body{margin:0;padding:0}
img{max-width:100%}
[hidden]{display:none !important}

/* ---------- ACESSIBILIDADE ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- ESTADOS: CARREGANDO / ERRO DE REDE / OFFLINE ---------- */
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{background:var(--accent)}
.btn.ghost:disabled:hover{background:transparent}
.net.off{border-color:var(--warn);color:var(--warn)}

.state-box{border:1px dashed var(--line-strong);border-radius:12px;padding:34px 20px;text-align:center;color:var(--ink-3);font-size:14px;display:grid;justify-items:center;gap:10px}
.state-box.erro{border-color:var(--crit);border-style:solid;background:var(--crit-bg);color:var(--ink)}
.state-box.erro b{color:var(--crit);font-family:var(--f-display);font-size:15px}
.state-box .spin{width:26px;height:26px;border-width:2.5px}

.skel{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);background-size:400% 100%;animation:skel-shimmer 1.4s ease infinite;border-radius:6px;display:block}
@keyframes skel-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.skel{animation:none;background:var(--surface-3)}}
.skel-line{height:13px;margin:4px 0;width:100%}
/* Larguras de esqueleto por classe, não por style inline: a CSP de produção
   é `style-src 'self'` e descartaria o atributo. Ver `aplicarLarguras` em
   ui.js, que resolve o mesmo problema para as barras que carregam dado. */
.skel-line.w-0{width:70%} .skel-line.w-1{width:62%} .skel-line.w-2{width:54%}
.skel-fina{height:9px}
.skel-bloco{height:60px}
.skel-cartao{height:150px;margin-bottom:8px}
@media (min-width:860px){.skel-cartao{height:104px}}
.skel-ficha{height:220px}
.skel-kpi .k-val{width:52%}
.skel-kpi .k-sub{width:80%}
tr.skel-row td{padding:14px 12px}

.cancel-quem{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);margin-top:5px}

/* ---------------- QR CODE DE ACESSO (modal) ---------------- */
/* O código é desenhado em canvas preto no branco: leitor de celular perde a
   leitura com contraste invertido, então a moldura branca vale nos dois temas
   e não acompanha var(--surface). */
.qr-modal{max-width:520px}
.qr-figura{display:grid;place-items:center;background:#FFFFFF;border:1px solid var(--line);border-radius:12px;padding:18px;margin:18px 0 8px}
.qr-figura canvas{display:block;width:100%;max-width:248px;height:auto;image-rendering:pixelated}
.qr-meta{margin:0 0 12px;text-align:center;font-size:10.5px;letter-spacing:.04em;color:var(--ink-3)}
.qr-aviso{margin:0 0 18px;font-size:12.5px;line-height:1.5;border-radius:10px;padding:10px 12px;border:1px solid var(--line)}
.qr-aviso.ok{color:var(--good);background:var(--good-bg);border-color:transparent}
.qr-aviso.atencao{color:var(--warn);background:var(--warn-bg);border-color:transparent}
.qr-aviso.ruim{color:var(--crit);background:var(--crit-bg);border-color:transparent}
.qr-link-row{display:flex;gap:8px;align-items:stretch}
.qr-link-row input{flex:1;min-width:0;font-size:13px}
.qr-link-row .btn{flex:none}
.qr-restaurar{align-self:flex-start;margin-top:4px}
.qr-cartaz-campos{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.qr-cartaz-campos summary{font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.qr-cartaz-campos summary:hover{color:var(--accent)}
.qr-cartaz-campos .hint{margin:8px 0 14px}
.qr-cartaz-campos .grid2{gap:12px}
@media (max-width:520px){.qr-modal footer{flex-wrap:wrap}.qr-modal footer .btn{flex:1 1 auto}}

/* ---------------- CARTAZ IMPRESSO DO QR CODE ---------------- */
/* Só existe no papel: fica fora do fluxo da aplicação e é revelado pelo bloco
   @media print abaixo. As cores são literais, e não var(--), porque o cartaz
   sai igual esteja a tela no tema claro ou no escuro — papel não tem tema. */
#cartazQR{display:none}
.cz-folha{border:2px solid #0E6B5E;border-radius:14px;padding:16mm 14mm;text-align:center;color:#121A17;background:#FFFFFF;font-family:var(--f-body)}
.cz-marca{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14mm}
.cz-glyph{width:13mm;height:13mm;border-radius:3mm;background:#0E6B5E;color:#FFFFFF;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:16pt}
.cz-nome{font-family:var(--f-display);font-weight:700;font-size:14pt;line-height:1.15;text-align:left}
.cz-nome i{display:block;font-family:var(--f-mono);font-style:normal;font-size:7.5pt;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:#48544E;margin-top:1mm}
.cz-titulo{font-family:var(--f-display);font-size:21pt;font-weight:700;color:#0E6B5E;line-height:1.15;margin:0}
.cz-sub{font-size:10.5pt;color:#48544E;margin:2mm 0 10mm}
.cz-campos{text-align:left;display:grid;gap:4mm;max-width:118mm;margin:0 auto 10mm}
.cz-linha{display:flex;align-items:baseline;gap:3mm;font-size:11pt}
.cz-linha b{font-weight:600;flex:none;min-width:32mm}
.cz-linha span{font-weight:400}
.cz-preencher{flex:1;border-bottom:1px solid #B4BFB3;height:5mm}
.cz-qr{display:grid;place-items:center;margin-bottom:8mm}
.cz-qr canvas{width:68mm;height:68mm;image-rendering:pixelated}
.cz-instrucao{font-size:11pt;line-height:1.5;color:#121A17;max-width:120mm;margin:0 auto 4mm}
.cz-url{font-size:9pt;color:#0E6B5E;word-break:break-all;margin:0 0 10mm}
.cz-rodape{font-size:8.5pt;color:#6D7A74;margin:0;padding-top:5mm;border-top:1px solid #D2DAD1}
/* ---------- COLABORADORES: lista de cartões e ficha ---------- */

/* A lista é de PESSOAS, não de registros: cada item carrega duas barras de
   progresso e um par de notas, o que numa célula de tabela viraria ruído
   ilegível no celular.
   Em UMA COLUNA, e não em grade de três: em grade o nome ganhava um terço da
   tela e "Maria Aparecida Gonçalves de …" virava reticências, enquanto a
   linha de cargo/local/tutor quebrava em duas ou três. Ocupando a largura
   inteira, cada pessoa é uma faixa em que o olho corre sempre pelos mesmos
   pontos: quem é, como vai o prazo e o acompanhamento, e as notas. */
.colab-grid{display:grid;gap:8px;grid-template-columns:1fr;margin-bottom:4px}

/* `min-width:0` no item da grade não é defensivo por precaução: sem ele, um
   nome comprido com `white-space:nowrap` lá dentro entra na largura mínima do
   cartão, essa largura vira o piso da coluna `1fr` — e a coluna é a mesma para
   TODOS os cartões. Um único colaborador de nome longo empurrava a lista
   inteira para fora da tela no celular. */
.colab-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:13px 15px;cursor:pointer;display:flex;flex-direction:column;gap:9px;text-align:left;transition:border-color .15s,box-shadow .15s}
.colab-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.colab-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.colab-card>header{display:flex;align-items:flex-start;gap:10px}

.colab-id{min-width:0;flex:1;overflow:hidden}
.colab-id b{display:block;font-family:var(--f-display);font-size:15.5px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.colab-id .mono{display:block;font-size:11px;color:var(--ink-3);margin-top:1px}
.colab-card>header .tag{flex:none;font-size:9.5px;text-align:right;white-space:normal;max-width:96px;line-height:1.25}
.colab-meta{margin:-4px 0 2px;font-size:12.5px;color:var(--ink-2);line-height:1.4;overflow-wrap:anywhere}
.colab-sub{margin:0;font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere}

.colab-notas{display:flex;align-items:center;gap:8px;padding-top:9px;border-top:1px solid var(--line);font-size:12px}
.colab-notas.vazia{color:var(--ink-3);font-size:11.5px}
.colab-notas .nota{display:inline-flex;align-items:baseline;gap:5px}
.colab-notas .nota i{font-style:normal;font-family:var(--f-mono);font-size:10px;color:var(--ink-3)}
.colab-notas .nota b{font-family:var(--f-display);font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.colab-notas .nota.vazia b{color:var(--ink-3);font-weight:500}
.colab-notas .seta{color:var(--ink-3);font-size:13px}
.colab-notas .delta{margin-left:auto;font-family:var(--f-mono);font-size:11.5px;font-weight:500;padding:2px 7px;border-radius:20px}
.colab-notas .delta.sobe{color:var(--good);background:var(--good-bg)}
.colab-notas .delta.desce{color:var(--crit);background:var(--crit-bg)}

/* Da largura de tablet para cima a faixa se abre em três colunas fixas —
   identidade, progresso e notas — sempre nas mesmas posições, para que ler
   dez pessoas seja descer o olho por três trilhos e não reencontrar cada
   informação em um lugar diferente. Abaixo disso o cartão continua empilhado
   como sempre esteve, que é o único desenho que cabe no celular.
   As duas .prog-linha são irmãs idênticas: `nth-of-type` as separa contando
   os <div> do cartão (1ª = prazo, 2ª = acompanhamento, 3ª = .colab-notas). */
@media (min-width:860px){
  .colab-card{
    display:grid;align-items:center;column-gap:24px;row-gap:5px;
    grid-template-columns:minmax(0,1.45fr) minmax(250px,1fr) 196px;
    grid-template-areas:"id prazo notas" "meta acomp notas" "sub sub notas";
  }
  .colab-card>header{grid-area:id;align-items:baseline}
  .colab-meta{grid-area:meta;margin:0}
  .colab-card>.prog-linha:nth-of-type(1){grid-area:prazo}
  .colab-card>.prog-linha:nth-of-type(2){grid-area:acomp}
  .colab-sub{grid-area:sub}
  /* A separação das notas deixa de ser o filete de cima (que dividia o cartão
     em blocos empilhados) e passa a ser o filete da esquerda, que divide a
     faixa em colunas. */
  .colab-card>.colab-notas{grid-area:notas;padding:2px 0 2px 20px;border-top:0;border-left:1px solid var(--line)}
  .colab-card>.colab-notas.vazia{line-height:1.4}
  .colab-card>header .tag{max-width:118px}
}

/* Barra de progresso rotulada. Duas por cartão, de propósito: a de cima é o
   tempo (anda sozinho) e a de baixo é o acompanhamento (é o trabalho). Ver as
   duas juntas é o que expõe a tutoria vencida no calendário e vazia por dentro. */
.prog-linha{display:grid;grid-template-columns:minmax(0,auto) minmax(24px,1fr) 46px;align-items:center;gap:9px;font-size:11.5px}
.prog-linha .pl-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog-linha .pl-nome{color:var(--ink-3)}
.prog-linha .pl-val{text-align:right;font-size:11.5px;font-variant-numeric:tabular-nums}
.prog-linha.grande{font-size:13px;grid-template-columns:minmax(0,auto) minmax(24px,1fr) 54px;margin-top:9px}
.prog-linha.grande .pl-nome{color:var(--ink-2)}
.prog-track{height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.prog-track i{display:block;height:100%;width:0;border-radius:4px;background:var(--accent);transition:width .3s ease}
.prog-linha.grande .prog-track{height:10px;border-radius:5px}

/* ---------- ficha do colaborador ---------- */

.ficha-topo{margin-bottom:14px}
.ficha-topo .btn svg{width:14px;height:14px}
.ficha-head h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;overflow-wrap:anywhere}
.ficha-head h2 .tag{font-size:10px}
.ficha-kpis{margin-bottom:4px}
/* Valor de KPI que é texto, não número: a fonte de display em 22px cortaria
   "Prazo encerrado sem parecer" no meio. */
.kpi .k-val.k-txt{font-size:13.5px;font-weight:600;line-height:1.3;font-family:var(--f-body);margin-top:3px}
.ficha-progresso{padding-bottom:16px}
.ficha-alerta{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2);border-radius:9px;padding:9px 12px;background:var(--surface-2)}
.ficha-alerta.ok{color:var(--good);background:var(--good-bg)}
.ficha-alerta.atencao{color:var(--warn);background:var(--warn-bg)}

.etapa-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:700px){.etapa-grid{grid-template-columns:repeat(2,1fr)}}
.etapa-card{min-width:0;border:1px solid var(--line);border-radius:10px;padding:12px 13px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.etapa-card.cancelada{opacity:.62}
.etapa-card>header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.etapa-card>header b{font-family:var(--f-display);font-size:14px;font-weight:600}
.etapa-nota{display:flex;align-items:center;gap:12px}
.etapa-nota .n{font-family:var(--f-display);font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.etapa-nota .d{font-size:11.5px;color:var(--ink-3);line-height:1.4}
.etapa-nota .d b{display:block;font-size:13px;color:var(--ink)}
.etapa-parecer{margin:0;font-size:12.5px;color:var(--ink-2)}
.etapa-lacunas{margin:0;font-size:12px;color:var(--warn);line-height:1.45;overflow-wrap:anywhere}
.etapa-lacunas i{font-style:normal;color:var(--ink-3)}
.etapa-ops{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:4px}

/* O diário: a sequência dos 45 dias. A coluna da esquerda fixa o "Dia N" —
   é ela que transforma uma pilha de registros avulsos em linha do tempo. */
.diario{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.dia-item{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.dia-item:first-child{border-top:0;padding-top:2px}
.dia-item.cancelada{opacity:.6}
.dia-marca{display:flex;flex-direction:column;gap:2px;padding-top:1px}
.dia-marca span{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.dia-marca b{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.dia-corpo{min-width:0;display:flex;flex-direction:column;gap:7px}
.dia-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dia-ativ{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.dia-motivo{margin:0;font-size:12px;color:var(--crit)}
.dia-rodape{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dia-rodape .spacer{flex:1}
.dia-tutor{font-size:11.5px;color:var(--ink-3)}
.dia-sem-sig{font-size:11px;color:var(--ink-3);font-style:italic}
.dia-rodape .sig-thumb{max-width:78px;height:28px}
@media (max-width:620px){
  .dia-item{grid-template-columns:1fr;gap:7px}
  .dia-marca{flex-direction:row;align-items:baseline;gap:8px}
  .dia-rodape .spacer{flex:0 0 100%}
}

@media print{
  @page{size:A4 portrait;margin:12mm}
  /* Fora da impressão do cartaz, o navegador imprime a tela como ela está —
     esta troca só vale enquanto o botão "Imprimir cartaz" segura a classe. */
  body.imprimindo-qr{background:#FFFFFF}
  body.imprimindo-qr>*{display:none !important}
  body.imprimindo-qr>#cartazQR{display:block !important}
  #cartazQR,.cz-folha{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cz-folha{break-inside:avoid}
}