/* =====================================================================
   Controle de Funcionários — visual "Grafite & Brasa" (fase A: fundação)
   =====================================================================
   TEMA: o app.js (aplicaTema) põe data-tema="claro|escuro" no <html>.
   :root = claro; [data-tema="escuro"] = escuro. Fonte do sistema (sem download).

   TOKENS (use estes nos componentes e telas novas):
     superfícies  --bg (fundo) --s1 (cartão) --s2 (campo/realce) --s3 (ativo/hover)
                  --glass (vidro fosco: navegação, login)
     linhas       --line (divisória sutil) --line2 (divisória forte, decorativa)
                  --field (borda de controle, >=3:1) --focus (anel de foco, >=3:1)
     texto        --ink (principal) --mut (secundário) --faint (rótulo pequeno)
     acento       --acc (fundo de botão/marca) --onAcc (texto sobre --acc)
                  --accTxt (acento como TEXTO/link/borda sobre fundos do tema)
     status       --ok --warn --bad --info --teal --vio : cor de TEXTO/ícone sobre
                  --bg/--s1/--s2 (>=4.5:1) e tinta de chip (color-mix 16-20%).
                  --onSt: texto sobre um status SÓLIDO (badge); --onBad: texto sobre --bad
     outros       --sh (sombra) --track (trilho de gráfico/progresso) --backdrop (fundo de diálogo)
     raios        --r-chip 10 · --r-campo 14 · --r-card 24 · --r-vidro 32
     fontes       --font · --mono
   Aliases antigos (não use em código novo; existem para nada quebrar):
     --card --muted --brand --brand-fill --brand-ink --ok-ink --warn-ink --bad-ink
     --bad-line --toast-bg --toast-ink --chip --shadow --radius

   COMPONENTES BASE
     .card                     cartão opaco (s1, raio 24, sombra). .card.vidro = vidro fosco
     .btn                      botão secundário (s2 + borda --field)
       .btn.primary            ação principal: --acc com texto --onAcc (1 por tela/bloco)
       .btn.ghost              fantasma: sem fundo/borda, hover --s3
       .btn.bad                perigo secundário (contorno e texto --bad)
       .btn.danger             perigo sólido (confirmação destrutiva): --bad + --onBad
       .btn.sm / .btn.lg       tamanhos; .btn.icone = quadrado 44x44 só com ícone (dar aria-label)
     .st + .st-ok|warn|bad|info|teal|vio|acc|neutro
                               chip de status tingido (18% da cor + texto da cor), raio 10.
                               Também por tipo de ponto: .st-PRESENTE .st-FALTA .st-FOLGA
                               .st-ATESTADO .st-FERIAS .st-FOLGA_CAMPO .st-AFASTADO .st-FERIADO
     .chip                     etiqueta neutra (s3 + --mut). .chip.miss = aviso (tinta warn)
     .badge .b-<TIPO>          contagem/status SÓLIDO com texto --onSt (legado do Painel)
     .seg > button             controle segmentado (pílula). Estado: .on + aria-pressed="true".
                               Cores por status nos botões: .P .FALTA .FOLGA .ATESTADO .FERIAS .OUTRO
                               (ou .st-ok etc.). .seg.seg-cheio = botões dividem a largura
     .pill                     filtro alternável avulso. Estado: .on + aria-pressed
     label.f > span + input|select|textarea
                               campo (raio 14, fundo s2, borda --field, foco visível).
                               .hint = dica; [aria-invalid="true"] = borda --bad
     .tela-cab                 cabeçalho de tela: .tela-sub (subtítulo) + h1 grande + .tela-acoes.
                               Gerar com cabecalhoTela(titulo, subtitulo, acoesHTML) do app.js
     .tabela-rolavel > table.mini   tabela (rola dentro do contêiner, não a página)
     .warnbox / .okbox / .errbox    caixas de aviso tingidas
     .toast (#toast)           aviso flutuante; .toast.ok / .toast.err
     dialog#modal .modal-box   diálogo (.modal-tit .modal-msg .modal-lbl .modal-acoes)
     .eyebrow                  rótulo pequeno em caixa alta (--faint)
     .num-grande               número de destaque (tabular)
   MOLDURA: .app > header.sb (barra lateral; nav#tabs) + main#view.conteudo
   LOGIN/1º ACESSO: .auth > .auth-marca + .auth-lado > form.auth-form
   ===================================================================== */

:root{
  color-scheme:light;
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Cascadia Mono",Consolas,ui-monospace,monospace;
  --bg:#ECEDF0; --s1:#FFFFFF; --s2:#F5F6F8; --s3:#E6E8EC;
  --line:rgba(12,14,18,.08); --line2:rgba(12,14,18,.16);
  --ink:#111318; --mut:#555B66; --faint:#5E6470;
  --glass:rgba(255,255,255,.8);
  --sh:0 1px 0 rgba(255,255,255,.9) inset,0 24px 48px -28px rgba(16,20,28,.3);
  --ok:#0A6A46; --warn:#7A4C00; --bad:#A82626; --info:#3A47BD; --teal:#085F6B; --vio:#6B3FC4;
  --onAcc:#170A03; --onBad:#FFFFFF; --onSt:#FFFFFF; --track:#80868F;
  --acc:#FF5B1F; --accTxt:#B03C0B; --focus:#B03C0B;
  --field:#7B818B;
  --r-chip:10px; --r-campo:14px; --r-card:24px; --r-vidro:32px;
  --backdrop:rgba(16,20,28,.42);
  /* aliases das variáveis antigas */
  --card:var(--s1); --muted:var(--mut); --chip:var(--s3); --shadow:var(--sh); --radius:var(--r-card);
  --brand:var(--accTxt); --brand-fill:var(--accTxt); --brand-ink:var(--onSt);
  --ok-ink:var(--ok); --warn-ink:var(--warn); --bad-ink:var(--bad); --bad-line:var(--bad);
  --toast-bg:var(--s3); --toast-ink:var(--ink);
}
[data-tema="escuro"]{
  color-scheme:dark;
  --bg:#0A0B0E; --s1:#121418; --s2:#181B20; --s3:#22262D;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.14);
  --ink:#F4F5F7; --mut:#A3A9B4; --faint:#8E94A0;
  --glass:rgba(22,25,30,.74);
  --sh:0 1px 0 rgba(255,255,255,.05) inset,0 24px 48px -24px rgba(0,0,0,.7);
  --ok:#46D49A; --warn:#F2B544; --bad:#FF6B6B; --info:#8C9BFF; --teal:#4CC9D9; --vio:#C4A5FF;
  --onAcc:#170A03; --onBad:#170404; --onSt:#0A0B0E; --track:#6B7280;
  --acc:#FF5B1F; --accTxt:#FF5B1F; --focus:#FF5B1F;
  --field:#737A87;
  --backdrop:rgba(0,0,0,.6);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font);
  -webkit-font-smoothing:antialiased}
a{color:var(--accTxt);text-decoration:none}
a:hover{text-decoration:underline}
button{color:inherit;font-family:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1{font-size:clamp(28px,3.4vw,36px);line-height:1.1;letter-spacing:-.035em;font-weight:700;margin:8px 0 6px}
h2{font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:650;margin:24px 0 10px}
h3{font-size:16px;letter-spacing:-.01em}
.lede{color:var(--mut);margin:0 0 16px}
.muted{color:var(--mut)}
.mono{font-family:var(--mono);font-size:.92em}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.num-grande{font-size:44px;line-height:1;font-weight:650;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ico{flex:none;display:block}

/* ===== Moldura: barra lateral + conteúdo ===== */
.app{display:flex;gap:20px;align-items:flex-start;padding:20px;min-height:100vh}
.conteudo{flex:1 1 0;min-width:0;max-width:1180px;padding:6px 4px 90px}
.conteudo:focus{outline:none}
.sb{flex:0 0 252px;position:sticky;top:20px;height:calc(100vh - 40px);overflow-y:auto;
  background:var(--glass);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1px solid var(--line);border-radius:28px;box-shadow:var(--sh);padding:18px 14px;
  display:flex;flex-direction:column;gap:18px;z-index:20;scrollbar-width:thin}
.sb-top{display:flex;align-items:center;gap:10px}
.sb-brand{display:flex;align-items:center;gap:12px;padding:4px 8px;min-width:0;color:var(--ink)}
.marca-ico{width:38px;height:38px;border-radius:12px;background:var(--acc);color:var(--onAcc);display:grid;place-items:center;flex:none}
.sb-brand-t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.sb-brand-t b{font-weight:700;font-size:15px;letter-spacing:-.01em}
.sb-brand-t span{font-size:12px;color:var(--mut)}
.sb-nav{display:flex;flex-direction:column;gap:2px;flex:1 0 auto}
.sb-grupo{display:flex;flex-direction:column;gap:2px}
.sb-lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:14px 12px 6px}
.sb-grupo:first-child .sb-lbl{padding-top:0}
.nav-i{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;border-radius:12px;
  font-size:14px;font-weight:500;color:var(--mut);transition:background .18s ease,color .18s ease}
.nav-i:hover{background:var(--s3);color:var(--ink);text-decoration:none}
.nav-i[aria-current="page"]{background:var(--s3);color:var(--ink);font-weight:600;box-shadow:inset 0 1px 0 var(--line2)}
.nav-i[aria-current="page"]::after{content:"";margin-left:auto;width:6px;height:6px;border-radius:99px;background:var(--acc);flex:none}
.sb-nav .sb-exib{margin-top:auto}
.sb-foot{display:flex;flex-direction:column;gap:10px}
.sb-foot #expwarn:empty{display:none}
/* tempo real: estado da conexão de atualização ao vivo (texto + cor, nunca só a cor) */
.ao-vivo{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--mut);padding:0 6px}
.ao-vivo-pt{width:8px;height:8px;border-radius:50%;flex:none;background:var(--mut)}
.ao-vivo[data-estado="vivo"] .ao-vivo-pt{background:var(--ok);animation:ao-vivo-pulso 2.4s ease-in-out infinite}
.ao-vivo[data-estado="reconectando"] .ao-vivo-pt,.ao-vivo[data-estado="conectando"] .ao-vivo-pt{background:var(--warn)}
.ao-vivo[data-estado="off"] .ao-vivo-pt{background:var(--bad)}
@keyframes ao-vivo-pulso{50%{opacity:.35}}
.aviso-ao-vivo{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px;padding:10px 14px;
  border:1px solid var(--line2);border-radius:14px;background:var(--s2);color:var(--ink);font-size:14px}
.sb-user{display:flex;align-items:center;gap:6px;padding:6px;border-radius:18px;background:var(--s2);border:1px solid var(--line)}
.sb-conta{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 6px;border-radius:14px;color:var(--ink)}
a.sb-conta:hover{background:var(--s3);text-decoration:none}
a.sb-conta[aria-current="page"]{background:var(--s3)}
.sb-ini{width:36px;height:36px;border-radius:99px;background:var(--s3);display:grid;place-items:center;
  font-size:13px;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--acc);flex:none;text-transform:uppercase}
.sb-user-t{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.sb-user-t b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-user-t span{font-size:12px;color:var(--mut)}
.sb-user-t .sb-trocar{font-weight:600;color:var(--accTxt)}
.sb-sair{margin-left:auto;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  color:var(--mut);background:transparent;border:0;cursor:pointer;flex:none}
.sb-sair:hover{background:var(--s3);color:var(--ink)}
.btn.menu-btn{display:none}
/* link "pular para o conteúdo": só aparece ao receber foco (A-17) */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:8px;z-index:100;background:var(--s1);color:var(--ink);padding:10px 14px;border-radius:var(--r-campo);box-shadow:var(--sh)}

/* cabeçalho de tela: subtítulo + h1 grande + ações */
.tela-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin:4px 0 20px}
.tela-cab > div:first-child{min-width:0}
.tela-sub{margin:0;font-size:13px;color:var(--mut);font-weight:500}
.tela-cab h1{margin:2px 0 0;font-size:clamp(32px,4.4vw,48px);line-height:1.05;letter-spacing:-.04em}
.tela-acoes{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ===== Cartões ===== */
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh);padding:20px 22px;margin:14px 0}
.card.vidro{background:var(--glass);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);border-radius:var(--r-vidro)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:14px}
.tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;box-shadow:var(--sh)}
.tile b{font-size:32px;line-height:1.1;font-weight:650;letter-spacing:-.03em;display:block;font-variant-numeric:tabular-nums}
.tile span{color:var(--mut);font-size:13px}

/* ===== Botões ===== */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 18px;border-radius:var(--r-campo);border:1px solid var(--field);
  background:var(--s2);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  text-decoration:none;transition:background .15s ease,filter .15s ease,transform .1s ease}
.btn:hover{background:var(--s3);text-decoration:none}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--onAcc);font-weight:700;
  box-shadow:0 12px 24px -14px var(--acc),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.primary:hover{background:var(--acc);filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--s3)}
.btn.bad{background:transparent;border-color:var(--bad);color:var(--bad)}
.btn.bad:hover{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:var(--onBad);font-weight:700}
.btn.danger:hover{background:var(--bad);filter:brightness(1.06)}
.btn.sm{min-height:34px;padding:0 12px;font-size:13px;border-radius:var(--r-chip)}
.btn.lg{min-height:52px;padding:0 22px;font-size:15px;border-radius:16px}
.btn.icone{width:44px;padding:0}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;filter:none}

/* ===== Chips, status e badges ===== */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--s3);color:var(--mut);border-radius:var(--r-chip);
  padding:3px 10px;font-size:12px;font-weight:600;text-decoration:none}
a.chip:hover{text-decoration:none;color:var(--ink)}
.chip.miss{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
a.chip.miss:hover{color:var(--warn);background:color-mix(in srgb,var(--warn) 24%,transparent)}
button.chip{border:0;font-family:inherit;line-height:inherit;cursor:pointer}
.st{--st-c:var(--mut);display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-chip);padding:3px 10px;
  font-size:12.5px;font-weight:600;white-space:nowrap;line-height:1.5;
  background:color-mix(in srgb,var(--st-c) 18%,transparent);color:var(--st-c)}
.st-ok,.st-PRESENTE,.st-P{--st-c:var(--ok)}
.st-warn,.st-ATESTADO{--st-c:var(--warn)}
.st-bad,.st-FALTA{--st-c:var(--bad)}
.st-info,.st-FOLGA,.st-FOLGA_CAMPO{--st-c:var(--info)}
.st-teal,.st-FERIAS{--st-c:var(--teal)}
.st-vio,.st-AFASTADO,.st-OUTRO{--st-c:var(--vio)}
.st-acc{--st-c:var(--accTxt)}
.st-neutro,.st-FERIADO,.st-SEM_LANCAMENTO{--st-c:var(--mut)}
/* badge sólido (Painel, feed). Sem classe b-*: o fundo vem inline (cores fixas) e o texto é branco */
.badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.b-P,.b-PRESENTE{background:var(--ok);color:var(--onSt)} .b-FALTA{background:var(--bad);color:var(--onSt)}
.b-FOLGA,.b-FOLGA_CAMPO{background:var(--info);color:var(--onSt)}
.b-ATESTADO{background:var(--warn);color:var(--onSt)} .b-FERIAS{background:var(--teal);color:var(--onSt)}
.b-hist,.b-AFASTADO{background:var(--vio);color:var(--onSt)} .b-FERIADO{background:var(--mut);color:var(--onSt)}
.badge.b-sem{color:#1f2733}
/* contagens dos alertas do Painel: o fundo é um token de status (style inline) */
.pnl-alrow .badge{color:var(--onSt)}

/* ===== Controle segmentado (pílula) ===== */
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:var(--r-campo);background:var(--s2);border:1px solid var(--line)}
.seg button{--st-c:var(--ink);border:0;background:transparent;color:var(--mut);min-height:34px;padding:0 12px;
  border-radius:var(--r-chip);font-weight:600;font-size:13px;cursor:pointer;transition:background .15s ease,color .15s ease}
.seg button:hover{background:var(--s3);color:var(--ink)}
.seg button.on,.seg button[aria-pressed="true"]{background:var(--s3);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--field)}
.seg button.P,.seg button.st-ok{--st-c:var(--ok)}
.seg button.FALTA,.seg button.st-bad{--st-c:var(--bad)}
.seg button.FOLGA,.seg button.st-info{--st-c:var(--info)}
.seg button.ATESTADO,.seg button.st-warn{--st-c:var(--warn)}
.seg button.FERIAS,.seg button.st-teal{--st-c:var(--teal)}
.seg button.OUTRO,.seg button.st-vio{--st-c:var(--vio)}
.seg button:is(.P,.FALTA,.FOLGA,.ATESTADO,.FERIAS,.OUTRO,.st-ok,.st-bad,.st-info,.st-warn,.st-teal,.st-vio):is(.on,[aria-pressed="true"]){
  background:color-mix(in srgb,var(--st-c) 20%,transparent);color:var(--st-c);box-shadow:inset 0 0 0 1.5px var(--st-c)}
.seg.seg-cheio{display:flex}
.seg.seg-cheio button{flex:1}

/* filtro alternável avulso */
.pill{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:99px;border:1px solid var(--field);
  cursor:pointer;font-size:13px;font-weight:600;color:var(--mut);background:transparent}
.pill:hover{background:var(--s3);color:var(--ink)}
.pill.on,.pill.on:hover{background:var(--acc);color:var(--onAcc);border-color:var(--acc)}
button.pill{font-family:inherit;line-height:inherit}

/* ===== Campos ===== */
label.f{display:block;margin:12px 0}
label.f > span{display:block;font-weight:600;margin-bottom:6px;font-size:13px;color:var(--mut)}
label.f .hint,.hint{font-weight:400;color:var(--mut);font-size:12px;font-style:italic}
input,select,textarea{width:100%;min-height:44px;padding:9px 14px;border:1px solid var(--field);border-radius:var(--r-campo);
  background:var(--s2);color:var(--ink);font:inherit;font-size:15px}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border:1.5px solid var(--bad)}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
textarea{min-height:80px;resize:vertical}
input[type=checkbox],input[type=radio]{width:24px;height:24px;min-height:0;padding:0;margin:0;vertical-align:middle;accent-color:var(--accTxt)}
input[type=color]{padding:4px;min-width:56px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.cols2{grid-template-columns:1fr}}
.field-conflito{outline:2px solid var(--warn);border-radius:var(--r-campo)}

/* ===== Seções recolhíveis ===== */
.sec{border:1px solid var(--line);border-radius:18px;margin:10px 0;overflow:hidden;background:var(--s1)}
.sec > summary{cursor:pointer;padding:14px 16px;font-weight:650;background:var(--s2);list-style:none}
.sec > summary:hover{background:var(--s3)}
.sec > summary::-webkit-details-marker{display:none}
.sec > summary::before{content:"▸ ";content:"▸ " / "";color:var(--mut)}
.sec[open] > summary::before{content:"▾ ";content:"▾ " / ""}
.sec .body{padding:12px 16px}
.sec-tit{display:inline;font-size:inherit;font-weight:inherit;margin:0;letter-spacing:inherit}

/* ===== Pessoas ===== */
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:700;flex:none;font-size:15px}
.avatar.lg{width:64px;height:64px;font-size:22px}
.fic{display:flex;gap:12px;align-items:center}
.fic .nm{font-weight:650}
.fic .sub{color:var(--mut);font-size:13px}
.fic a.nm-link{color:inherit}

/* ===== Listas, feed, histórico ===== */
.feed .item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;align-items:flex-start}
.feed .item:last-child{border-bottom:0}
.hist .h{font-size:13px;padding:10px 0;border-bottom:1px solid var(--line)}
.hist .h:last-child{border-bottom:0}
.hist .meta{color:var(--mut);font-size:12px}
del{color:var(--bad);text-decoration:line-through} ins{color:var(--ok);text-decoration:none}
.grp-tit{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:20px 0 8px;color:var(--mut);border-bottom:1px solid var(--line);padding-bottom:6px}
.empty{text-align:center;color:var(--mut);padding:36px 16px}
.sticky-save{position:sticky;bottom:12px;display:flex;justify-content:flex-end;gap:8px;padding-top:8px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.toolbar input[type=search]{max-width:300px}
.toolbar select{width:auto;padding:6px 12px}

/* ===== Caixas de aviso ===== */
.warnbox,.okbox,.errbox{border-radius:var(--r-campo);padding:12px 14px;color:var(--ink);border:1px solid}
.warnbox{background:color-mix(in srgb,var(--warn) 12%,var(--s1));border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.okbox{background:color-mix(in srgb,var(--ok) 12%,var(--s1));border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.errbox{background:color-mix(in srgb,var(--bad) 12%,var(--s1));border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.keybox{font-family:var(--mono);font-size:24px;font-weight:700;letter-spacing:2px;padding:16px;border:2px dashed var(--accTxt);
  border-radius:var(--r-card);text-align:center;background:var(--s2)}

/* ===== Tabela ===== */
table.mini{width:100%;border-collapse:collapse;font-size:13.5px}
table.mini th,table.mini td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
table.mini th{font-size:12px;font-weight:600;color:var(--mut);letter-spacing:.02em;border-bottom-color:var(--line2)}
table.mini tbody tr:hover td{background:var(--s2)}
table.mini tbody tr:last-child td{border-bottom:0}
/* tabela larga rola dentro do próprio contêiner, não a página inteira (A-11/V-06) */
/* position:relative prende os .sr-only (absolutos) do cabeçalho dentro da rolagem */
.tabela-rolavel{overflow-x:auto;max-width:100%;position:relative}
.tabela-rolavel.kv td{overflow-wrap:anywhere}

/* ===== Toast ===== */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:99;display:flex;align-items:center;gap:6px;
  background:var(--s3);color:var(--ink);padding:12px 16px;border-radius:16px;font-weight:600;font-size:14px;
  border:1px solid var(--line2);box-shadow:var(--sh),0 18px 40px -18px rgba(0,0,0,.45);
  opacity:0;transition:opacity .2s,transform .2s;max-width:min(90vw,560px);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);pointer-events:auto}
.toast.ok{border-color:var(--ok);box-shadow:inset 4px 0 0 var(--ok),var(--sh),0 18px 40px -18px rgba(0,0,0,.45)}
.toast.err{border-color:var(--bad);box-shadow:inset 4px 0 0 var(--bad),var(--sh),0 18px 40px -18px rgba(0,0,0,.45)}
.toast-x{margin-left:10px;background:none;border:0;color:inherit;font:inherit;font-size:20px;line-height:1;cursor:pointer;padding:0 4px;border-radius:8px}

/* ===== Diálogo ===== */
dialog#modal{border:1px solid var(--line2);border-radius:var(--r-card);padding:0;max-width:min(92vw,460px);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.5);background:var(--s1);color:var(--ink)}
dialog#modal::backdrop{background:var(--backdrop);backdrop-filter:blur(4px)}
.modal-box{padding:24px;display:flex;flex-direction:column;gap:14px}
.modal-tit{margin:0;font-size:20px;font-weight:650;letter-spacing:-.02em}
.modal-msg{margin:0;font-size:14px;line-height:1.5;color:var(--mut)}
.modal-lbl{display:block;font-size:13px;font-weight:600;color:var(--mut);margin-bottom:6px}
.modal-box input,.modal-box select{width:100%}
.modal-box label.f{margin:0}
.modal-acoes{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;flex-wrap:wrap}

/* ===== Login e primeiro acesso ===== */
.auth{min-height:100vh;padding:20px;display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
.auth-marca{flex:3 1 520px;min-width:0;position:relative;overflow:hidden;background:var(--s1);border:1px solid var(--line);
  border-radius:36px;padding:40px 44px;display:flex;flex-direction:column;justify-content:space-between;gap:48px;
  min-height:560px;box-shadow:var(--sh)}
.auth-marca > *{position:relative}
.auth-marca > .auth-circ{position:absolute;border-radius:999px;pointer-events:none}
.auth-circ.c1{right:-120px;bottom:-160px;width:520px;height:520px;background:var(--acc);opacity:.9}
.auth-circ.c2{right:-40px;bottom:-80px;width:360px;height:360px;background:var(--s1)}
.auth-marca > .auth-circ.c3{right:40px;bottom:0;width:200px;height:200px;border-radius:999px 999px 0 0;background:var(--acc)}
.auth-circ.anel{right:-140px;top:-140px;width:420px;height:420px;border:56px solid var(--acc);opacity:.9}
.auth-brand{display:flex;align-items:center;gap:12px}
.auth-brand .marca-ico{width:44px;height:44px;border-radius:14px}
.auth-brand .sb-brand-t b{font-size:16px}
.auth-brand .sb-brand-t span{font-size:13px}
.auth-slogan{margin:0;max-width:640px;font-size:clamp(36px,6vw,84px);line-height:.96;letter-spacing:-.055em;font-weight:700}
.auth-slogan span{color:var(--mut)}
.auth-pontos{display:flex;gap:10px 16px;flex-wrap:wrap;font-size:14px;color:var(--mut);margin:0;padding:0;list-style:none}
/* fundo próprio: o texto pode cair sobre os círculos de acento e precisa manter o contraste */
.auth-pontos li{background:var(--s1);padding:2px 10px;border-radius:var(--r-chip)}
.auth-etapas{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.auth-etapas li{flex:1 1 150px;padding:14px 16px;border-radius:18px;background:var(--s2);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600}
.auth-etapas li .mono{font-size:12px;color:var(--mut)}
.auth-etapas li.feito .mono{color:var(--ok)}
.auth-etapas li[aria-current="step"]{background:var(--s3);border-color:var(--acc)}
.auth-etapas li[aria-current="step"] .mono{color:var(--accTxt)}
.auth-lado{flex:2 1 420px;min-width:0;display:flex;align-items:center;justify-content:center;padding:24px 8px}
.auth-form{width:100%;max-width:440px;background:var(--glass);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1px solid var(--line);border-radius:var(--r-vidro);padding:34px 32px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:14px}
.auth-tit{margin:0;font-size:32px;line-height:1.1;font-weight:700;letter-spacing:-.035em}
.auth-form .auth-sub{margin:4px 0 6px;font-size:14px;color:var(--mut)}
.auth-form label.f{margin:0}
.auth-form input{min-height:50px}
.auth-form .btn.primary{min-height:52px;border-radius:16px;font-size:15px}
.auth-form .btn.lg{min-height:52px}
.auth-acoes{display:flex;gap:10px;margin-top:4px}
.auth-acoes .btn.primary{flex:1}
.auth-nota{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-campo);background:var(--s2);
  border:1px solid var(--line);font-size:13px;color:var(--mut);line-height:1.45;margin:0}
.auth-nota svg{flex:none;margin-top:1px}
.auth-nota b,.auth-nota .mono{color:var(--ink)}
.auth-rodape{font-size:12px;color:var(--mut);text-align:center;margin:0}
.senha-campo{position:relative;display:flex}
.senha-campo input{padding-right:56px}
.senha-ver{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:12px;border:0;
  background:transparent;color:var(--mut);display:grid;place-items:center;cursor:pointer}
.senha-ver:hover{background:var(--s3);color:var(--ink)}
.senha-ver[aria-pressed="true"]{color:var(--accTxt)}
.erro-caixa{margin:0}
.erro-caixa:not(:empty){padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--bad) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);color:var(--ink);font-size:14px;font-weight:500}
@media (max-width:999px){
  .auth-marca > .auth-circ{display:none}
  .auth-marca{min-height:0;order:2;padding:24px;gap:24px;border-radius:28px}
  .auth-lado{padding:0}
}
@media (max-width:480px){
  .auth,.app{padding:12px}
  .auth-form{padding:26px 20px;border-radius:26px}
}

/* ===== Painel (dashboard) — layout "cockpit" ===== */
.pnl-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px}
.pnl-top h1{margin:0}
.pnl-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 4px}
.pnl-filtros input[type=month],.pnl-filtros select{width:auto;padding:7px 12px;min-width:0}
/* grid: colunas iguais, sem o "5 + 2 esticados" do flex no tablet (V-18) */
.pnl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin:14px 0}
.pnl-kpi{min-width:0;text-align:left;cursor:pointer;font:inherit;color:var(--ink);margin:0;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease}
.pnl-kpi b{font-size:30px;display:block;line-height:1.1;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pnl-kpi span{color:var(--mut);font-size:12.5px}
.pnl-kpi.ok b{color:var(--ok)} .pnl-kpi.warn b{color:var(--warn)} .pnl-kpi.bad b{color:var(--bad)}
.pnl-kpi:hover{border-color:var(--line2);transform:translateY(-2px)}
.pnl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:14px}
.pnl-grid .card{margin:0}
.pnl-wide{grid-column:1/-1}
.pnl-cardhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.pnl-cardhead h2{margin:0;font-size:16px}
.pnl-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.pnl-chart{position:relative;height:200px;min-width:0}
.pnl-chart.sm{height:170px}
.pnl-op{display:grid;grid-template-columns:minmax(170px,230px) 1fr;gap:16px;align-items:start}
.pnl-op > *{min-width:0}
.pnl-faltlist{max-height:320px;overflow:auto}
.pnl-falt{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:8px 2px;border-bottom:1px solid var(--line)}
.pnl-falt:last-child{border-bottom:0}
.pnl-who{flex:1 1 150px;min-width:0}
.pnl-who b{font-size:13px;font-weight:600}
.pnl-who small{display:block;color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnl-mini{gap:2px;padding:3px}
.pnl-mini button{padding:0 8px;font-size:11.5px;min-height:28px}
.pnl-alrow{display:flex;width:100%;align-items:center;gap:10px;padding:10px 6px;border:0;background:transparent;
  border-bottom:1px solid var(--line);cursor:pointer;text-align:left;color:inherit;font:inherit;border-radius:10px}
.pnl-alrow:last-of-type{border-bottom:0}
.pnl-alrow:hover{background:var(--s2)}
.pnl-allab{flex:1;min-width:0}
.pnl-allab b{display:block;font-size:13.5px;font-weight:600}
.pnl-allab small{color:var(--mut);font-size:12px}
.pnl-chev{color:var(--mut);transition:transform .15s}
.pnl-alrow[aria-expanded="true"] .pnl-chev{transform:rotate(90deg)}
.pnl-aldet{font-size:13px;color:var(--mut);padding:2px 4px 8px 40px}
.pnl-aldet div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dotted var(--line2)}
.pnl-aldet div:last-child{border-bottom:0}
.pnl-pipe{display:flex;flex-wrap:wrap;gap:12px}
.pnl-pcol{flex:1 1 130px;min-width:0;border-top:3px solid var(--line2);padding-top:8px}
.pnl-pcol.now{border-color:var(--teal)} .pnl-pcol.d15{border-color:var(--warn)}
.pnl-pcol.d30{border-color:var(--accTxt)} .pnl-pcol.dv{border-color:var(--bad)}
.pnl-pcol h3{margin:0 0 4px;font-size:12px;color:var(--mut)}
.pnl-pcnt{font-size:24px;font-weight:650;letter-spacing:-.02em}
.pnl-pcol ul{list-style:none;margin:4px 0 0;padding:0;font-size:12.5px}
.pnl-pcol li{padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnl-feeds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:0 20px}
@media(max-width:560px){ .pnl-op{grid-template-columns:1fr} }

/* ===== Toque e alvo mínimo (onda 5: V-04, A-11, V-12, C-27, V-14) ===== */
/* alvo mínimo de 24x24 em qualquer tela (WCAG 2.5.8) */
.btn.sm,.pill,.seg button,button.chip,.toast-x,.menu-btn{min-height:24px;min-width:24px}
/* telas de toque: 44x44 nos controles pequenos */
@media (pointer:coarse){
  .btn,.btn.sm,.pill,.seg button,button.chip,.toast-x,.pnl-mini button{min-height:44px;min-width:44px}
  .pnl-alrow,.nav-i{min-height:44px}
  input:not([type=checkbox]):not([type=radio]),select,.toolbar select{min-height:44px}
  .seg{gap:6px}
}

/* ===== Barra lateral recolhida: faixa compacta no topo (< 880px) ===== */
@media (max-width:880px){
  .app{flex-direction:column;align-items:stretch;gap:14px}
  /* estática: uma faixa fixa com o menu aberto cobriria o foco (A-11, WCAG 2.4.11) */
  .sb{position:static;height:auto;overflow:visible;flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:8px 10px;padding:8px 10px;border-radius:22px}
  .sb-top{flex:1 1 auto;min-width:0}
  .sb-brand{padding:0}
  .sb-brand-t span{display:none}
  .btn.menu-btn{display:inline-flex;margin-left:auto}
  .sb-nav{display:none;order:3;flex:1 1 100%;padding:4px 0 6px}
  .sb.menu-aberto .sb-nav{display:flex}
  .sb-nav .sb-exib{margin-top:6px}
  .sb-foot{order:2;flex-direction:row;align-items:center;gap:6px}
  .sb-user{padding:3px;border-radius:14px;gap:2px}
  .sb-conta{padding:3px;min-height:40px}
  .sb-user-t{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .sb-sair{width:40px;height:40px}
  .conteudo{padding:0 2px 90px}
  /* celular: só o ponto na faixa do topo; o texto continua para o leitor de tela */
  .ao-vivo{padding:0 4px}
  .ao-vivo-t{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
@media (max-width:420px){
  .sb-brand-t{display:none}
}
@media (max-width:767px){
  h1{font-size:26px}
  .toolbar input[type=search]{max-width:none}
  .card{padding:16px;border-radius:20px}
}

/* ===== Movimento reduzido ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .btn:active,.pnl-kpi:hover{transform:none}
}

/* ===== Impressão: sempre clara, sem moldura ===== */
@media print{
  :root,[data-tema="escuro"]{color-scheme:light;--bg:#fff;--s1:#fff;--s2:#f4f4f5;--s3:#ececee;--ink:#000;--mut:#444;--faint:#555;
    --line:#ccc;--line2:#bbb;--field:#888;--ok:#0A6A46;--warn:#7A4C00;--bad:#A82626;--info:#3A47BD;--teal:#085F6B;--vio:#6B3FC4;
    --accTxt:#B03C0B;--onSt:#fff;--sh:none;--glass:#fff}
  body,html{background:#fff}
  .app{display:block;padding:0}
  .pnl-faltlist{max-height:none;overflow:visible}
  .sb,.skip,.toast,.no-print,.pnl-filtros,.aviso-ao-vivo{display:none!important}
  .conteudo{max-width:none;padding:0}
  .pnl-grid{grid-template-columns:1fr 1fr}
  .card{box-shadow:none;break-inside:avoid}
  .pnl-chart{height:160px}
}

/* ==== Telas de estrutura e cadastros (fase B) ==== */
/* Organograma, Feriados, Grupos e Unidades. Prefixos: est- (comum), og-, fer-. */

/* --- comum: seções, tabelas editáveis, formulários, vazio --- */
.est-sec{display:flex;flex-direction:column;gap:14px;margin:0}
.est-sec h2{margin:0;font-size:18px}
.est-sec-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px}
.est-sec-cab h2{margin:0;font-size:18px}
.est-sec-tit{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
.est-sec-tit h2{font-size:22px}
.est-resumo{font-family:var(--mono);font-size:13px;color:var(--mut)}
.est-dica{margin:0;font-size:13px;color:var(--mut)}
.est-obrig{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:700;
  background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--accTxt)}
.est-aviso{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;margin:0 0 18px;border-radius:22px;color:var(--ink);
  background:color-mix(in srgb,var(--info) 10%,var(--s1));border:1px solid color-mix(in srgb,var(--info) 30%,transparent)}
.est-aviso .ico{color:var(--info);margin-top:2px}
.est-aviso p{margin:0;font-size:14px}
.est-aviso b{font-weight:650}
.est-tab{min-width:620px}
.est-tab.est-tab-largo{min-width:900px}
.est-tab.est-tab-unid{min-width:1080px}
table.mini.est-tab td{vertical-align:middle;padding:8px}
table.mini.est-tab th{padding:8px;vertical-align:bottom}
.est-tab input:not([type=checkbox]),.est-tab select{min-width:150px;font-size:14px}
table.mini.est-tab tbody tr:hover td{background:transparent}
.est-num{text-align:right!important;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
td.est-num{font-size:15px}
.est-centro{text-align:center!important}
.est-acoes{text-align:right!important;white-space:nowrap}
.est-acoes-in{display:flex;gap:6px;justify-content:flex-end}
.est-nome{display:flex;align-items:center;gap:8px;min-width:0}
.est-nome input{flex:1 1 auto;font-weight:600}
.est-nome .chip{flex:none}
.est-ramo{flex:none;color:var(--faint);display:grid;place-items:center}
.est-inativo .est-nome input{color:var(--mut)}
.btn.est-contorno{background:transparent;border-color:var(--line2)}
.btn.est-contorno:hover{background:var(--s3)}
.btn.icone.bad{border-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.est-novo{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:16px;margin:4px 0 0;border-radius:20px;
  background:var(--s2);border:1px dashed var(--line2)}
.est-novo label.f{margin:0}
.est-novo input,.est-novo select{background:var(--s1)}
.est-cresce{flex:2 1 200px;min-width:0}
.est-duo{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;margin:20px 0}
.est-duo > .card{flex:1 1 300px;min-width:0}
.est-duo > .est-duo-largo{flex:2 1 520px}
.est-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:0 16px}
.est-grade label.f{margin:0 0 14px}
.est-linha-toda{grid-column:1/-1}
.est-tipos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.est-tipos .st{font-size:13.5px;padding:6px 12px;border-radius:99px;color:var(--ink)}
.est-tipo-n{font-family:var(--mono);font-size:12px;color:var(--mut);font-weight:500}
.est-novo-tipo{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.est-novo-tipo label.f{margin:0}
.est-vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;
  padding:36px 16px;color:var(--mut)}
.est-vazio .ico{color:var(--faint)}
.est-vazio h3{margin:0;font-size:18px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.est-vazio p{margin:0;max-width:320px;font-size:14px}
.est-sec + .est-sec{margin-top:20px}
.tela-cab + .lede{margin-top:-8px}

/* --- Organograma --- */
.og-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px}
.og-contrato{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 4px 0 14px;border-radius:16px;
  background:var(--s1);border:1px solid var(--line);font-size:13px;color:var(--mut);max-width:100%}
.og-contrato select{width:auto;min-width:0;max-width:100%;font-weight:600;font-size:14px}
.og-modo{background:var(--s1)}
.og-modo button{min-height:44px;padding:0 16px;font-size:14px}
.og-resumo{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--mut)}
.og-layout{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.og-arvore{flex:3 1 520px;min-width:0;margin:0;display:flex;flex-direction:column}
.og-arvore > .est-sec-cab{padding-bottom:14px}
.og-arvore > .est-sec-cab h2{margin:0;font-size:18px}
.og-lado{flex:2 1 320px;min-width:0;display:flex;flex-direction:column;gap:20px;position:sticky;top:20px}
.og-painel{margin:0;display:flex;flex-direction:column;gap:14px}
.og-painel h2{margin:0;font-size:18px;display:flex;align-items:center;gap:10px}
.og-painel h2 .ico{color:var(--accTxt)}
.og-como h2{font-size:15px}
.og-unid{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-top:1px solid var(--line)}
.og-unid.og-semu{border-top-style:dashed;border-top-color:var(--line2)}
.og-unid-cab{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.og-unid-cab h3{margin:0;font-size:16px;font-weight:650;letter-spacing:-.01em}
.og-semu h3{color:var(--mut);font-size:15px;font-weight:600}
.og-cont{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--mut)}
.og-pessoas{display:flex;flex-wrap:wrap;gap:8px}
.og-pes{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:4px 14px 4px 5px;border-radius:99px;
  border:1px solid var(--line2);background:var(--s2);color:var(--ink);font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;text-align:left;transition:background .15s ease,border-color .15s ease}
.og-pes:hover{background:var(--s3)}
.og-pes[aria-pressed="true"]{background:color-mix(in srgb,var(--acc) 14%,var(--s1));border-color:var(--accTxt)}
.og-pes .st{font-size:11px;padding:1px 8px}
.og-nm{min-width:0;overflow-wrap:anywhere}
.og-papel{font-weight:500;color:var(--mut)}
.og-ini{width:32px;height:32px;flex:none;border-radius:99px;background:var(--s3);color:var(--ink);display:grid;place-items:center;
  font-size:12px;font-weight:700}
.og-pes[aria-pressed="true"] .og-ini{background:var(--acc);color:var(--onAcc)}
.og-nodo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 0}
.og-ramo{color:var(--faint)}
.og-reporta{font-size:13px;color:var(--mut)}
#ogCadeia{display:flex;flex-direction:column;gap:14px}
.og-cad-resumo{margin:0;font-size:14px;color:var(--mut)}
.og-cad-resumo b{color:var(--ink);font-weight:650}
.og-elos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.og-elo{position:relative;display:flex;align-items:center;gap:12px;padding:6px 0 12px 26px}
.og-elo::before{content:"";position:absolute;left:1px;top:20px;width:12px;height:12px;border-radius:99px;background:var(--s3);
  box-shadow:inset 0 0 0 2px var(--field)}
.og-elo.og-sel::before{background:var(--acc);box-shadow:none}
.og-trilho{position:absolute;left:6px;top:36px;bottom:-4px;width:2px;background:var(--line2)}
.og-elo:last-child .og-trilho{display:none}
.og-ini-q{width:40px;height:40px;border-radius:14px;font-size:14px}
.og-elo-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.og-elo-t b{font-size:15px;font-weight:650;overflow-wrap:anywhere}
.og-elo-t span{font-size:13px;color:var(--mut)}
.og-elo > .st{flex:none}
#ogCadeia > .btn{align-self:flex-start}
@media (max-width:880px){ .og-lado{position:static} }

/* --- Feriados --- */
.fer-topo{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;margin:0 0 20px}
.fer-anos{align-items:center;background:var(--s1);border-radius:16px;box-shadow:var(--sh)}
.fer-anos button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;font-size:15px}
.fer-ano-atual{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:12px;
  background:var(--s3);color:var(--ink);font-size:15px;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--field)}
.fer-stat{flex:1 1 130px;display:flex;align-items:baseline;gap:10px;padding:12px 18px;border-radius:22px;
  background:var(--s1);border:1px solid var(--line);box-shadow:var(--sh)}
.fer-stat .num-grande{font-size:30px}
.fer-stat span{font-size:14px;color:var(--mut)}
.fer-c-info{color:var(--info)} .fer-c-teal{color:var(--teal)} .fer-c-ok{color:var(--ok)}
.fer-prox{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;padding:20px 24px;margin:0 0 20px}
.fer-prox-dia{width:76px;height:76px;flex:none;border-radius:24px;background:var(--acc);color:var(--onAcc);display:flex;
  flex-direction:column;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 16px 32px -16px var(--acc),inset 0 1px 0 rgba(255,255,255,.4)}
.fer-prox-dia b{font-family:var(--mono);font-size:28px;font-weight:700}
.fer-prox-dia span{font-size:12px;font-weight:700;text-transform:uppercase;margin-top:4px}
.fer-prox-t{flex:1 1 260px;min-width:0}
.fer-prox-desc{margin:0;font-size:24px;font-weight:650;letter-spacing:-.02em;overflow-wrap:anywhere}
.fer-form{display:flex;flex-direction:column;gap:14px}
.fer-form label.f{margin:0}
.fer-form input[type=date]{font-family:var(--mono)}
.fer-tab{min-width:600px}
table.mini.fer-tab td{padding:6px 8px}
.fer-data{font-weight:600;font-size:14px;white-space:nowrap}
.fer-dia{color:var(--mut);font-size:13px}
.fer-desc{font-size:15px;font-weight:500}
.fer-passou td{color:var(--mut)}
table.mini tbody tr.fer-prox-lin td{background:color-mix(in srgb,var(--acc) 9%,transparent)}
table.mini tbody tr.fer-prox-lin td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
.fer-tab .st-acc{background:var(--acc);color:var(--onAcc)}
.btn.fer-del{color:var(--mut);font-size:13px;padding:0 12px}
.btn.fer-del:hover{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}

@media (max-width:640px){
  .og-resumo{margin-left:0;flex-basis:100%}
  .og-contrato{flex:1 1 100%}
  .og-contrato select{flex:1}
  .fer-anos{flex:1 1 100%;justify-content:space-between}
  .fer-stat{flex:1 1 40%;padding:10px 14px;flex-direction:column;gap:2px}
  .fer-stat span{font-size:13px}
  .est-sec-tit h2{font-size:20px}
  .est-novo{padding:12px}
  .est-novo .btn{flex:1 1 100%}
}

/* ==== Administração, conta, diálogos e estados (fase B) ==== */
/* Telas: Usuários, Acesso, Sistema, Backups, Desenvolvimento, Exibição, Trocar minha senha.
   Prefixo .adm-* para não colidir com as outras telas. Também: toast, dialog#modal e
   os estados (.estado*, .estado-sk, #view > .empty) gerados pelos helpers estado*() do app.js. */

/* ---- blocos comuns das telas de administração ---- */
.adm-duo{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch;margin:14px 0}
.adm-duo > .card{margin:0;min-width:0}
.adm-principal{flex:3 1 440px}
.adm-lado{flex:2 1 300px}
.adm-h2{margin:0;font-size:20px;font-weight:650;letter-spacing:-.02em}
.adm-h2-sm{font-size:15px;font-weight:600;color:var(--mut);letter-spacing:0}
.adm-sub{margin:4px 0 12px;font-size:13.5px;color:var(--mut)}
.adm-sub b{color:var(--ink);font-weight:600}
.adm-form{display:flex;flex-direction:column}
.adm-form-acoes{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:6px}
.adm-form-pe{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.adm-tecnico{margin:0;font-size:13.5px;color:var(--ink)}
.adm-tecnico code{font-family:var(--mono);background:var(--s2);border:1px solid var(--line);padding:2px 8px;border-radius:8px;margin:0 4px}
.adm-tecnico .muted{font-size:12.5px}
.adm-regras{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--mut)}
.adm-regras li{display:flex;gap:10px;align-items:flex-start}
.adm-regras .ico{color:var(--ok);margin-top:2px}
.adm-nota{margin:16px 0 0;padding:12px 14px;border-radius:var(--r-campo);background:var(--s2);border:1px solid var(--line);font-size:13.5px;color:var(--mut)}
.adm-nota b{color:var(--ink)}
.adm-aviso{display:flex;gap:10px;align-items:flex-start;margin:14px 0}
.adm-aviso > .ico{color:var(--warn);margin-top:1px}
.adm-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;color:var(--accTxt)}
.adm-nowrap{white-space:nowrap}
.adm-quebra,.adm-arq{overflow-wrap:anywhere}
.adm-dir{text-align:right}
.adm-grande{font-size:30px;line-height:1.1;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ---- cartão com tabela: cabeçalho com contagem, tabela até a borda ---- */
.card.adm-tabcard{padding:22px 0 8px}
.adm-tabcab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:0 24px 12px}
.adm-tabcab-solto{padding:0 0 12px;justify-content:space-between;align-items:flex-start}
.adm-tabcab-dica{margin-left:auto;font-size:13px;color:var(--mut)}
.adm-conta{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--mut)}
.adm-conta-warn{color:var(--warn)}
.adm-pad{padding:0 24px}
.adm-tabcard > .estado{margin:0 24px 12px}
table.adm-tab{font-size:14px}
table.adm-tab th,table.adm-tab td{padding:12px}
table.adm-tab th:first-child,table.adm-tab td:first-child{padding-left:24px}
table.adm-tab th:last-child,table.adm-tab td:last-child{padding-right:24px}
table.adm-tab td{vertical-align:middle}
.adm-tab code{font-family:var(--mono);font-size:13px}
.adm-login{white-space:nowrap;font-weight:500}
.adm-nome{font-weight:600}
.adm-vinculo{font-size:12px;color:var(--mut);margin-top:2px}
.adm-sit{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.adm-sit-p{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--mut)}
.adm-sit-p::before{content:"";width:7px;height:7px;border-radius:99px;background:currentColor}
.adm-sit-p.on{color:var(--ok)}
.adm-ate{display:flex;flex-direction:column;line-height:1.35;white-space:nowrap;font-size:13px}
.adm-dias-warn{color:var(--warn);font-weight:600}
tr.inativo td{color:var(--mut)}
tr.inativo .adm-nome{font-weight:500}
.adm-acoes-cel{min-width:250px}
.adm-acoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.adm-acoes-mais{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line2)}
.adm-acoes-mais[hidden]{display:none}
.btn.adm-mais{width:38px;padding:0}
.btn.adm-mais[aria-expanded="true"]{background:var(--s3);box-shadow:inset 0 0 0 1.5px var(--field)}
.btn.adm-ativo[data-para="0"]{color:var(--bad)}
.adm-pend{border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}

/* ---- Usuários: faixa "aguardando a primeira senha" e passos ---- */
.adm-faixa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin:14px 0;
  padding:18px 22px;border-radius:var(--r-card);box-shadow:var(--sh);
  background:color-mix(in srgb,var(--warn) 12%,var(--s1));border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.adm-faixa-t{margin:0;display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 300px}
.adm-faixa-t b{font-size:16px;font-weight:650;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.adm-faixa-t > span{font-size:13.5px;color:var(--mut)}
.adm-faixa-n{font-family:var(--mono);font-size:36px;line-height:1;font-weight:600;letter-spacing:-.04em;color:var(--warn)}
.adm-passos{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.adm-passos li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--mut)}
.adm-passos b{color:var(--ink);font-weight:600}
.adm-passo-n{flex:none;width:28px;height:28px;border-radius:9px;background:var(--s3);color:var(--ink);display:grid;place-items:center;
  font-family:var(--mono);font-size:13px;font-weight:600}

/* ---- Sistema ---- */
.adm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px;margin:14px 0}
.card.adm-kpi{margin:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.adm-kpi-v{font-size:32px;line-height:1.15;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.adm-kpi-v.ok{color:var(--ok)} .adm-kpi-v.warn{color:var(--warn)} .adm-kpi-v.bad{color:var(--bad)}
.adm-kpi-s{font-size:13px;color:var(--mut)}
.adm-caminho{margin:12px 0;padding:10px 12px;border-radius:12px;background:var(--s2);border:1px solid var(--line);overflow-wrap:anywhere;font-size:13px}
.adm-dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:12px 18px}
.adm-dl > div{min-width:0}
.adm-dl dt{font-size:12px;font-weight:600;color:var(--mut);margin-bottom:2px}
.adm-dl dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.adm-dl-4{margin-top:12px}
.adm-disco{margin:10px 0 8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.adm-barra{height:10px;border-radius:99px;background:var(--s3);border:1px solid var(--line2);overflow:hidden}
.adm-barra > span{display:block;height:100%;background:var(--mut);border-radius:99px}
.adm-barra.ok > span{background:var(--ok)} .adm-barra.warn > span{background:var(--warn)} .adm-barra.bad > span{background:var(--bad)}
.adm-barra-leg{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:12.5px;color:var(--mut)}
.adm-ultimo{display:flex;flex-direction:column;gap:3px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px}
.adm-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px;margin-top:12px}
.adm-nums > div{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:18px;background:var(--s2);border:1px solid var(--line)}
.adm-nums .muted{font-size:13px}

/* ---- Acesso ---- */
.adm-val-cab{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.adm-validade .num-grande{color:var(--ink)}
.card.adm-senha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px 32px;align-items:start}
@media (max-width:760px){ .card.adm-senha{grid-template-columns:1fr} }

/* ---- Exibição ---- */
.adm-tema{margin-top:4px}
.adm-tema button{min-height:40px;padding:0 16px}
.adm-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px}
.adm-fs{margin:0;min-width:0;border:1px solid var(--line);border-radius:18px;padding:10px 14px 12px;background:var(--s2)}
.adm-fs legend{padding:0 6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.adm-check{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;border-radius:12px;cursor:pointer;font-size:14px}
.adm-check:hover{background:var(--s3)}
.adm-check input{flex:none}
.adm-check span{min-width:0;overflow-wrap:anywhere}

@media (max-width:767px){
  .card.adm-tabcard{padding:16px 0 6px}
  .adm-tabcab{padding:0 16px 10px}
  .adm-pad{padding:0 16px}
  .adm-tabcard > .estado{margin:0 16px 10px}
  table.adm-tab th:first-child,table.adm-tab td:first-child{padding-left:16px}
  table.adm-tab th:last-child,table.adm-tab td:last-child{padding-right:16px}
  .adm-tabcab-dica{margin-left:0;flex-basis:100%}
  .adm-faixa{padding:16px}
  .adm-faixa .btn{width:100%}
  .adm-grande,.adm-kpi-v{font-size:26px}
}
@media (pointer:coarse){ .btn.adm-mais{width:44px} }

/* ---- Estados: vazio, erro, sem permissão, carregando (helpers estado*() do app.js) ---- */
.estado{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:36px 20px}
.estado p{margin:0;max-width:52ch;font-size:14px;color:var(--mut)}
.estado-tit{margin:4px 0 0;font-size:18px;font-weight:650;letter-spacing:-.015em}
.estado-ico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--s2);border:1px solid var(--line);color:var(--mut)}
.estado-acoes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.estado-erro{border-radius:var(--r-card);background:color-mix(in srgb,var(--bad) 7%,var(--s1));border:1px solid color-mix(in srgb,var(--bad) 35%,transparent)}
.estado-erro .estado-ico{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--s1));border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.estado-erro p{color:var(--ink)}
/* estados de tela inteira (direto no #view): vira um cartão */
#view > .estado:not(.estado-erro),#view > .empty{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh);margin:14px 0}
#view > .estado-erro{margin:14px 0;box-shadow:var(--sh)}
#view > .empty{padding:48px 20px;font-size:15px}
/* esqueleto */
.sk{height:14px;border-radius:8px;background:linear-gradient(90deg,var(--s3) 0%,var(--s2) 50%,var(--s3) 100%);background-size:200% 100%;animation:adm-sk 1.4s ease-in-out infinite}
@keyframes adm-sk{from{background-position:100% 0}to{background-position:-100% 0}}
.estado-sk{display:flex;flex-direction:column;gap:12px;padding:8px 0}
.estado-sk .sk-tit{height:40px;width:min(320px,70%);border-radius:12px}
.estado-sk .sk-sub{width:min(220px,50%);margin-bottom:10px}
.sk-lin{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r-card);background:var(--s1);border:1px solid var(--line)}
.sk-lin .sk-av{width:44px;height:44px;border-radius:99px;flex:none}
.sk-col{flex:1;display:flex;flex-direction:column;gap:8px}
.sk-col .sk:first-child{width:45%} .sk-col .sk:last-child{width:70%;height:10px}

/* ---- Toast: canto inferior direito no desktop, centrado no celular ---- */
.toast{background:var(--s1);border:1px solid var(--line2);padding:12px 14px 12px 16px;gap:10px;border-radius:18px;
  box-shadow:var(--sh),0 22px 44px -18px rgba(0,0,0,.5)}
.toast::before{content:"";flex:none;width:10px;height:10px;border-radius:99px;background:var(--mut)}
.toast.ok,.toast.err{box-shadow:var(--sh),0 22px 44px -18px rgba(0,0,0,.5)}
.toast.ok{border-color:color-mix(in srgb,var(--ok) 55%,var(--line2))}
.toast.ok::before{background:var(--ok)}
.toast.err{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--s1))}
.toast.err::before{background:var(--bad)}
.toast-x{display:grid;place-items:center;width:36px;height:36px;margin-left:4px;padding:0;border-radius:10px;font-size:22px;color:var(--mut)}
.toast-x:hover{background:var(--s3);color:var(--ink)}
.toast-x[hidden]{display:none}
@media (min-width:881px){
  .toast{left:auto;right:24px;transform:none}
  .toast.show{transform:translateY(-4px)}
}

/* ---- Diálogo ---- */
dialog#modal{width:min(92vw,480px);max-width:min(92vw,480px);border-radius:var(--r-card);border-color:var(--line2);
  box-shadow:var(--sh),0 40px 80px -24px rgba(0,0,0,.55)}
dialog#modal:has(.modal-box.largo){width:min(94vw,640px);max-width:min(94vw,640px)}
.modal-box{padding:26px 26px 22px;gap:12px}
.modal-tit{font-size:22px;line-height:1.2;letter-spacing:-.025em}
.modal-msg{font-size:14.5px}
.modal-ico{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--bad) 14%,var(--s1));color:var(--bad)}
.modal-acoes{margin-top:10px}
.modal-senhas{max-height:50vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-campo);background:var(--s2)}
.modal-senhas table.mini th{position:sticky;top:0;background:var(--s2)}
.modal-senhas table.mini tbody tr:hover td{background:var(--s3)}
.modal-senhas .senha-prov{font-size:15px;font-weight:600;letter-spacing:.02em;white-space:nowrap;user-select:all;color:var(--ink)}
@media (max-width:480px){
  .modal-box{padding:20px 18px 18px}
  .modal-acoes .btn{flex:1 1 auto}
}

/* ==== Telas de operação (fase B) ==== */
/* Painel, Ponto do dia, Funcionários e Perfil no visual Grafite & Brasa.
   Só tokens e componentes da fundação; os nomes .pnl-* antigos que o JS usa
   (pnl-falt, pnl-mini, pnl-alrow, pnl-chart…) continuam e são ajustados aqui. */

/* --- avatar de iniciais: tinta do token (avatarHTML põe --av) --- */
.avatar{background:color-mix(in srgb,var(--av,var(--accTxt)) 12%,var(--s1));color:var(--av,var(--accTxt));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--av,var(--accTxt)) 30%,transparent);font-weight:700;letter-spacing:-.02em}
.avatar.sm{width:36px;height:36px;font-size:12.5px}

/* --- Painel --- */
.pnl-acoes{display:flex;gap:8px;flex-wrap:wrap}
.pnl-filtros{gap:10px;margin:0 0 6px}
.pnl-filtros select,.pnl-filtros input[type=month]{width:auto;min-width:0;max-width:100%}
.pnl-recorte{min-height:34px}
.pnl-topo{display:flex;flex-wrap:wrap;gap:20px;margin:16px 0 20px}
.pnl-hero{flex:1 1 380px;min-width:0;background:var(--acc);color:var(--onAcc);border-radius:var(--r-vidro);
  padding:24px 28px 26px;display:flex;flex-direction:column;gap:16px;
  box-shadow:0 30px 60px -30px var(--acc),inset 0 1px 0 rgba(255,255,255,.35)}
.pnl-hero-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.pnl-hero-cab h2{margin:0;font-size:15px;font-weight:650;letter-spacing:0}
.pnl-hero-cab span{font-size:13px;font-weight:600}
.pnl-hero-num{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.pnl-hero-pct{font-size:clamp(72px,14vw,128px);line-height:.82;font-weight:700;letter-spacing:-.065em;font-variant-numeric:tabular-nums}
.pnl-hero-pct small{font-size:.42em;letter-spacing:-.04em}
.pnl-hero-txt{display:flex;flex-direction:column;gap:2px;padding-bottom:6px}
.pnl-hero-txt b{font-size:17px;font-weight:650}
.pnl-hero-txt span{font-size:14px;font-weight:500}
.pnl-hero-barra{display:flex;height:14px;border-radius:99px;overflow:hidden;gap:3px;margin-top:auto}
.pnl-hero-barra .pnl-sg{border-radius:99px;min-width:6px}
.pnl-hero-leg{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;font-weight:600}
.pnl-hero-leg li{display:flex;align-items:center;gap:6px}
.pnl-hero-leg .pnl-sg{width:10px;height:10px;border-radius:3px;flex:none}
/* tons de --onAcc sobre o acento (a cor do tipo fica na legenda em texto) */
.pnl-sg{background:color-mix(in srgb,var(--onAcc) 30%,transparent)}
.pnl-sg-PRESENTE{background:color-mix(in srgb,var(--onAcc) 88%,transparent)}
.pnl-sg-FALTA{background:color-mix(in srgb,var(--onAcc) 62%,transparent)}
.pnl-sg-FOLGA,.pnl-sg-FOLGA_CAMPO{background:color-mix(in srgb,var(--onAcc) 44%,transparent)}
.pnl-sg-ATESTADO,.pnl-sg-AFASTADO{background:color-mix(in srgb,var(--onAcc) 30%,transparent)}
.pnl-sg-FERIAS,.pnl-sg-FERIADO{background:color-mix(in srgb,var(--onAcc) 18%,transparent)}
.pnl-sg-SEM_LANCAMENTO{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--onAcc) 75%,transparent)}
.pnl-topo .pnl-kpis{flex:2 1 520px;min-width:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.pnl-kpi{appearance:none;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh);
  padding:16px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:44px}
.pnl-kpi .pnl-kpi-lab{font-size:13px;color:var(--mut);font-weight:500}
.pnl-kpi b{font-size:40px;line-height:1;font-weight:650;letter-spacing:-.04em;margin:2px 0}
.pnl-kpi .pnl-kpi-sub{font-size:12px;color:var(--mut)}
.pnl-kpi.pnl-kpi-acc{box-shadow:var(--sh),inset 0 0 0 1.5px var(--acc)}
.pnl-kpi.pnl-kpi-acc .pnl-kpi-sub{color:var(--accTxt);font-weight:600}
.pnl-grid{gap:20px}
.pnl-grid .card{border-radius:28px;padding:22px 24px}
.pnl-cardhead h2{font-size:18px;letter-spacing:-.02em}
.pnl-link{font-size:13px;font-weight:600;color:var(--accTxt);min-height:44px;display:inline-flex;align-items:center}
.pnl-op{grid-template-columns:minmax(0,1fr) minmax(180px,240px);gap:20px}
.pnl-faltlist{max-height:360px}
.pnl-falt{gap:8px 12px;padding:10px 2px}
.pnl-who b{font-size:14px}
.pnl-vazio{padding:14px 2px;color:var(--mut)}
.pnl-alrow{min-height:44px;border-radius:14px}
.pnl-alcnt{min-width:34px;justify-content:center;font-variant-numeric:tabular-nums}
.pnl-aldet{padding-left:54px}
.pnl-feed-t{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.pnl-tl{gap:12px}
.pnl-tl-ponto{width:8px;height:8px;border-radius:99px;background:var(--acc);flex:none;margin-top:7px}
.feed .item .st{flex:none}
@media(max-width:560px){
  .pnl-op{grid-template-columns:1fr}
  .pnl-hero{padding:20px 20px 22px;border-radius:26px}
  .pnl-aldet{padding-left:8px}
}
@media print{
  .pnl-hero{box-shadow:none;border:1px solid #999}
  .pnl-acoes{display:none!important}
}

/* --- Ponto do dia --- */
.pt-semana-cab{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin:0 0 4px}
.pt-data{margin:0;flex:0 1 190px}
.pt-semana{flex:1 1 520px;min-width:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.pt-dia{appearance:none;position:relative;overflow:hidden;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  background:var(--s2);border:1px solid var(--line);border-radius:18px;padding:12px 12px 10px;min-height:44px;
  display:flex;flex-direction:column;gap:2px;transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .2s ease}
.pt-dia:hover{border-color:var(--line2);transform:translateY(-2px)}
.pt-dia::before{content:"";position:absolute;top:0;left:12px;right:12px;height:3px;border-radius:0 0 3px 3px;background:transparent}
.pt-dia.hoje::before{background:var(--line2)}
.pt-dia.on{background:var(--s1);border-color:var(--line2);box-shadow:var(--sh)}
.pt-dia.on::before{background:var(--acc)}
.pt-dia.futuro{border-style:dashed}
.pt-dia-sem{font-size:12px;color:var(--mut);font-weight:500}
.pt-dia-num{font-size:24px;line-height:1;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pt-dia-st{font-family:var(--mono);font-size:11px;color:var(--mut);min-height:1.4em}
.pt-card{border-radius:28px;padding:22px 24px}
.pt-prog{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.pt-prog-num{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pt-prog-num .num-grande{font-size:52px;font-weight:700}
.pt-prog-barra{flex:1 1 240px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pt-trilho{height:10px;border-radius:99px;background:var(--s3);overflow:hidden}
.pt-enche{height:100%;width:0;border-radius:99px;background:var(--acc);transition:width .4s cubic-bezier(.2,.8,.2,1)}
.pt-filtros{margin:18px 0 6px;gap:10px}
.pt-filtros input[type=search]{flex:1 1 260px;max-width:none}
.pt-filtros select{flex:0 1 auto;max-width:100%}
.pt-feriado{margin:6px 0}
.pt-lista{list-style:none;margin:8px 0 0;padding:0}
.pt-pessoa{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 0;border-top:1px solid var(--line)}
.pt-quem{flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:14px}
.pt-quem .avatar{box-shadow:inset 0 0 0 2px var(--st-c,var(--line2))}
.pt-pessoa.pt-pend .avatar{box-shadow:inset 0 0 0 2px var(--line2)}
.pt-quem-t{min-width:0}
.pt-quem-t .nm{font-weight:600;overflow-wrap:anywhere}
.pt-quem-t .sub{font-size:13px;color:var(--mut)}
.pt-quem-t .chip{vertical-align:middle;margin-left:4px}
.pt-seg{max-width:100%}
.pt-seg button{min-height:44px;min-width:44px}
.pt-seg .pt-limpar{color:var(--mut);font-size:15px}
.pt-seg .pt-limpar:hover{color:var(--bad)}
@media(max-width:600px){
  .pt-semana{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(64px,1fr);overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
  .pt-dia{scroll-snap-align:start;padding:10px 10px 8px}
  .pt-dia-num{font-size:20px}
  .pt-data{flex:1 1 100%}
  .pt-card{padding:18px 16px}
  .pt-seg{display:flex;width:100%}
  .pt-seg button{flex:1 1 auto;padding:0 8px}
}

/* --- Funcionários --- */
.fn-filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 6px}
.fn-busca{flex:1 1 300px;min-width:0;display:block}
.fn-busca input{min-height:48px;border-radius:16px;background:var(--s1)}
.fn-sit{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:16px;background:var(--s1);border:1px solid var(--line)}
.fn-sit .pill{border-color:transparent;min-height:40px;border-radius:12px}
.fn-filtros select{width:auto;max-width:100%}
.fn-resumo{margin:6px 4px 0;font-size:13px;min-height:1.5em}
.fn-grupo{margin:18px 0 6px}
.fn-grp-tit{display:flex;align-items:baseline;gap:10px;margin:0 4px 12px;font-size:22px;font-weight:650;letter-spacing:-.02em}
.fn-grp-n{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--mut);letter-spacing:0}
.fn-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:14px}
.fn-card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;box-shadow:var(--sh);
  display:flex;flex-direction:column;gap:14px;cursor:pointer;min-width:0;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease}
.fn-card:hover{transform:translateY(-2px);border-color:var(--line2)}
.fn-card:focus-within{border-color:var(--focus)}
.fn-card.desligado{background:var(--s2);border:1px dashed var(--line2);box-shadow:none}
.fn-card-cab{display:flex;align-items:center;gap:14px;min-width:0}
.avatar.fn-av{width:52px;height:52px;border-radius:18px;font-size:17px}
.fn-card-t{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.fn-nome{font-weight:650;font-size:16px;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.fn-sub{font-size:13px;color:var(--mut)}
.fn-card .chips{margin-top:0}
.fn-card .chip.mono{font-size:11.5px}
@media(max-width:600px){ .fn-sit{width:100%} .fn-sit .pill{flex:1 1 auto;justify-content:center} }

/* --- Perfil e Novo/Editar --- */
.perf-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 6px}
.perf-topo .btn.ghost{color:var(--mut);padding:0 14px 0 10px}
.perf-ro,.perf-deslig{display:flex;gap:10px;align-items:flex-start;margin:10px 0;border-radius:20px;padding:14px 18px;font-size:14px}
.perf-ro .ico{margin-top:2px;color:var(--warn)}
.perf-cab{display:flex;flex-wrap:wrap;align-items:center;gap:20px 24px;padding:26px 28px;margin:12px 0 18px}
.avatar.perf-av{width:104px;height:104px;border-radius:34px;font-size:38px;letter-spacing:-.04em;
  background:var(--acc);color:var(--onAcc);box-shadow:0 20px 40px -20px var(--acc),inset 0 1px 0 rgba(255,255,255,.4)}
.perf-id{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:6px}
.perf-nome{margin:0;font-size:clamp(30px,4.2vw,44px);line-height:1.05;letter-spacing:-.04em;overflow-wrap:anywhere}
.perf-sub{font-size:16px;color:var(--mut)}
.perf-id .chips{margin-top:4px}
.perf-id .chip .ico{margin:0}
.perf-acoes{display:flex;gap:10px;flex-wrap:wrap}
.perf-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@media(min-width:1240px){ .perf-grid:not(.perf-novo){grid-template-columns:minmax(0,1fr) minmax(300px,360px)} }
.perf-main,.perf-lado{min-width:0}
.perf-lado .card{margin:0 0 14px}
.perf-faltam{margin:0 0 12px;border-radius:20px}
.sec.perf-sec{border-radius:24px;margin:0 0 14px;box-shadow:var(--sh)}
.sec.perf-sec > summary{background:transparent;padding:18px 22px;min-height:44px;display:flex;align-items:center;gap:8px}
.sec.perf-sec > summary:hover{background:var(--s2)}
.sec.perf-sec[open] > summary{border-bottom:1px solid var(--line)}
.sec.perf-sec .sec-tit{font-size:18px;font-weight:650;letter-spacing:-.02em}
.sec.perf-sec .body{padding:8px 22px 18px}
.perf-restrito{margin:12px 0}
.perf-restrito-lbl{display:block;font-weight:600;margin-bottom:6px;font-size:13px;color:var(--mut)}
.perf-lock{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-campo);
  border:1px dashed var(--line2);background:var(--s2);color:var(--mut);font-size:14px;font-weight:600}
.perf-mes{border-radius:24px;padding:20px 22px}
.perf-mes-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.perf-mes-cab h2{margin:0;font-size:18px}
.perf-mes-barra{display:flex;height:12px;border-radius:99px;overflow:hidden;gap:3px;margin:14px 0 10px}
.perf-mes-barra span{background:var(--st-c,var(--track));border-radius:99px;min-width:6px}
.perf-mes-leg{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.perf-mes-vazio{margin:10px 0 0}
.perf-fc{margin:14px 0 0;font-size:13px;display:flex;flex-direction:column;gap:2px}
.perf-h{display:flex;align-items:flex-start;gap:10px}
.perf-h-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4;overflow-wrap:anywhere}
.perf-h-mud{color:var(--mut)}
.perf-h .btn.sm{flex:none}
@media(max-width:600px){
  .perf-cab{padding:20px;gap:16px;border-radius:26px}
  .avatar.perf-av{width:72px;height:72px;border-radius:24px;font-size:26px}
  .perf-acoes{width:100%}
  .sec.perf-sec > summary{padding:16px}
  .sec.perf-sec .body{padding:8px 16px 16px}
}

/* ===== MFA (TOTP): chave manual, QR, códigos de recuperação ===== */
.btn-link{background:none;border:0;padding:8px 2px;color:var(--accTxt);font:inherit;text-decoration:underline;cursor:pointer;min-height:44px}
.btn-link:focus-visible{outline:2px solid var(--accTxt);outline-offset:2px;border-radius:6px}
.auth-acoes:has(.btn-link){flex-wrap:wrap;align-items:center;justify-content:space-between}
.mfa-passos{margin:0 0 14px;padding-left:20px;color:var(--mut);font-size:14px}
.mfa-passos li{margin:4px 0}
.mfa-qr{width:200px;max-width:100%;margin:0 0 14px;padding:0;overflow:hidden;border-radius:var(--r-campo);background:#fff;border:1px solid var(--line2)}
.mfa-qr svg{display:block;width:100%;height:auto}
.mfa-seg{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;padding:12px 14px;border-radius:var(--r-campo);background:var(--s2);border:1px solid var(--line)}
.mfa-seg-rot{flex:0 0 100%;font-size:12px;color:var(--mut)}
.mfa-chave{flex:1 1 200px;min-width:0;overflow-wrap:anywhere;font-size:16px;letter-spacing:.06em;color:var(--ink)}
.mfa-codigos{list-style:none;margin:0 0 12px;padding:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;
  border:1px solid var(--line);border-radius:var(--r-campo);background:var(--s2);color:var(--ink);font-size:15px;letter-spacing:.05em}
.mfa-det{margin:12px 0 0;border-top:1px solid var(--line);padding-top:12px}
.mfa-det summary{cursor:pointer;font-weight:600;min-height:32px}
.mfa-det .adm-form{margin-top:10px}
/* --- Horários no Ponto e aba Horas --- */
.pt-horas{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;padding:8px 0 0;max-width:100%}
.pt-horas label.f{margin:0;flex:0 1 130px;min-width:0}
.pt-horas label.f.pt-alm{flex:1 1 200px}
.pt-horas input{width:100%;min-width:0}
.pt-horas-res{flex:1 1 100%;margin:0;font-size:13px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.lote-hor{border:1px solid var(--line);border-radius:12px;margin:12px 0 0;padding:4px 12px 10px;min-width:0}
.lote-hor legend{font-size:13px;font-weight:600;color:var(--mut);padding:0 6px}
.lote-hor:disabled{opacity:.5}
.lote-err{color:var(--bad);font-style:normal}
.hr-filtros{align-items:flex-end}
.hr-filtros label.f{margin:0}
.hr-atalhos{display:flex;gap:8px;flex-wrap:wrap}
.hr-erro{color:var(--bad);font-style:normal;margin:4px 0}
table.hr-tab th.num,table.hr-tab td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.hr-tab tbody th{font-weight:600;text-align:left}
table.hr-tab tfoot th,table.hr-tab tfoot td{font-weight:700;border-top:2px solid var(--line2);border-bottom:0}
.hr-saldo.pos{color:var(--ok);font-weight:600}
.hr-saldo.neg{color:var(--bad);font-weight:600}
@media(max-width:600px){
  .pt-horas label.f{flex:1 1 40%}
  .hr-filtros label.f{flex:1 1 40%}
}

/* ===== Exportar (diálogo) e logo das planilhas ===== */
dialog#modal:has(.exp-box){max-width:min(94vw,560px)}
.exp-box{max-height:88vh;overflow:auto}
.exp-box fieldset{border:0;margin:0;padding:0;min-width:0}
.exp-grupo{display:flex;flex-direction:column;gap:6px}
.exp-atalhos{display:flex;gap:8px;flex-wrap:wrap}
.exp-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 12px;max-height:240px;overflow:auto;padding:4px 2px}
.exp-col{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);min-width:0}
.exp-col input{width:auto;flex:none}
.exp-col span:first-of-type{overflow-wrap:anywhere}
.exp-sub{font-size:13px;font-weight:600;color:var(--muted);margin:8px 0 2px}
.exp-fixo{margin:0 0 6px}
.exp-neg{outline:2px solid var(--bad);outline-offset:2px;border-radius:6px}
.exp-erro{color:var(--bad);font-style:normal;margin:0}
.logo-prev{display:flex;align-items:center;min-height:72px;padding:12px;border:1px dashed var(--line2);border-radius:var(--r-campo);background:var(--s2);margin:10px 0}
.logo-img{max-width:100%;max-height:120px;height:auto;object-fit:contain}
.logo-acoes{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.logo-acoes label.f{min-width:0;max-width:100%}