/* ============================================================
   MEU PONTO — design system

   Tipografia: no iPhone/Mac o -apple-system entrega SF Pro de verdade
   (embutir SF via @font-face violaria a licença da Apple). Nos demais
   aparelhos, Inter — a face mais próxima com licença livre.

   A paleta é a mesma do material comercial (apresentacao/SISTEMA-DE-CORES.md).
   Não por economia: painel e apresentação precisam parecer a mesma empresa, e
   a empresa já tinha uma cor decidida antes de o painel existir.

   Duas decisões estruturais que se enxergam no arquivo inteiro:

   1. LINHA, NÃO SOMBRA. Sobre areia, o cartão branco já parece elevado — é o
      contraste quente/claro que faz isso. Sombra em cima disso deixa tudo
      flutuando, e uma tela onde tudo flutua não tem estrutura para o olho
      seguir. Sombra fica reservada ao que realmente está por cima: modal.

   2. SÓ TEMA CLARO. Havia um tema escuro aqui, e ele saiu. Não era desenhado:
      era derivação automática dos tokens claros, feita quando o painel ainda
      imitava o iOS. A marca é quente e clara — areia com azul-cobalto —, e um
      tema que ninguém projetou competindo com o que foi projetado deixa o
      produto com duas caras e nenhuma delas boa. O tablet continua escuro, e
      isso é outra decisão: ele fica na parede, num ambiente que muda de luz o
      dia inteiro, e tem folha de estilo própria.

   3. ESCALA DE DESKTOP. O painel é usado no computador, e as medidas antigas
      eram de telefone — 17px de base, título de 38px, botão ocupando a
      largura inteira. Alvo de dedo em tela de mouse vira desperdício de
      espaço e obriga a rolar para ver o que caberia junto.
   ============================================================ */

@font-face{font-family:Inter;src:url("vendor/fontes/inter-latin-400-normal.woff2")format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url("vendor/fontes/inter-latin-600-normal.woff2")format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url("vendor/fontes/inter-latin-700-normal.woff2")format("woff2");font-weight:700;font-display:swap}

:root{
  --marca:#2D3FD9;              /* azul-cobalto: a única cor fria do sistema */
  --marca-suave:#EDEFFD;
  --marca-linha:#C9CEF6;

  /* Três níveis de superfície, e só três. Um quarto obrigaria o olho a
     decidir o que é mais importante entre coisas igualmente importantes. */
  --fundo:#F7F4EE;              /* areia */
  --superficie:#FFFFFF;
  --superficie-2:#EFEBE3;       /* areia escura: rodapé de tabela, apoio */

  /* Tinta em três pesos, todos de matiz quente. Cinza neutro sobre fundo
     quente parece sujo. */
  --texto:#1A1A1C;
  --texto-2:#57544F;
  --texto-3:#95908A;

  --separador:#E4DFD5;
  --borda:#DED8CC;

  /* Estado. Dessaturados de propósito: saldo negativo de meia hora não é
     emergência, e vermelho vivo faz parecer que é. */
  --verde:#1E7A36;
  --laranja:#A65200;
  --vermelho:#B32E24;
  --verde-suave:#EAF3EC;
  --laranja-suave:#F8EFE3;
  --vermelho-suave:#F9ECEA;

  /* `light` e nao `light dark`: sem isto o navegador desenha o seletor de
     data, o select e a barra de rolagem no tema do sistema, e num Windows em
     modo escuro eles apareciam pretos no meio da areia. */
  color-scheme: light;

  --r-g:14px; --r-m:10px; --r-p:8px;
  --sombra:0 4px 16px rgba(26,20,10,.10),0 1px 2px rgba(26,20,10,.06);
  --fonte:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;
  --mola:cubic-bezier(.32,.72,0,1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* O `hidden` do HTML precisa GANHAR de qualquer classe deste arquivo.
   O navegador aplica `[hidden]{display:none}` com especificidade de um seletor
   de atributo, e qualquer `.classe{display:flex}` daqui passa por cima. Foi
   assim que o cabeçalho e a barra de navegação do portal continuaram na tela
   antes do login: os dois estavam com `hidden` no HTML, e os dois tinham
   `display:flex` numa classe.
   Havia cinco remendos pontuais para isso — `.tela[hidden]`, `.entrada[hidden]`,
   `.recado[hidden]`, `.fundo-modal[hidden]`, `.sub[hidden]` —, um por vez em
   que alguém tropeçou. Esta linha resolve a classe inteira do problema, e o
   próximo elemento escondido não precisa descobrir isso de novo. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--fonte);background:var(--fundo);color:var(--texto);
  font-size:16px;line-height:1.5;letter-spacing:-.006em;
  min-height:100dvh;display:flex;flex-direction:column;overscroll-behavior-y:none;
}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px;border-radius:6px}

/* ---------- cabeçalho com a marca ---------- */
.cabeca{
  position:sticky;top:0;z-index:20;
  padding:calc(env(safe-area-inset-top) + 12px) 20px 12px;
  background:color-mix(in srgb,var(--fundo) 86%,transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--separador);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.marca{display:flex;align-items:center;gap:9px;min-width:0}
.marca img{height:24px;width:auto;display:block}
.marca .nome{font-size:15px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.marca .nome em{font-style:normal;font-weight:400;color:var(--texto-2)}
.eu{
  font-size:12.5px;color:var(--texto-3);text-align:right;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.eu b{display:block;color:var(--texto);font-weight:600;font-size:13.5px}

/* ---------- estrutura ---------- */
.tela{flex:1;padding:4px 20px 108px;max-width:680px;width:100%;margin:0 auto}

/* Hierarquia por tipo, não por cor nem por borda: o título é o único peso
   700 da página, e a legenda logo abaixo já cai para a segunda tinta. */
.titulao{font-size:26px;font-weight:700;letter-spacing:-.028em;padding:20px 0 2px}
.legenda{color:var(--texto-2);font-size:13.5px;line-height:1.55;padding-bottom:16px;max-width:64ch}

.cartao{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-g);
  padding:18px;margin-bottom:14px;
}

/* Rótulo de seção: caixa alta pequena com espaçamento aberto. Ele separa
   blocos sem gastar tamanho — quem procura acha, quem lê corrido ignora. */
.secao{
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texto-3);padding:26px 2px 10px;
}

/* ---------- telas de entrada ---------- */
/* Login, convite e recuperação de senha não são o painel: são uma coluna
   estreita, centrada nos dois eixos, com uma decisão só na tela. As regras de
   desktop do painel — botão de largura automática, alinhado à esquerda, coluna
   de 960px — quebram isso, então esta classe as desfaz de propósito em vez de
   depender de ordem de cascata.
   `margin:auto` num filho de flex-column centra vertical e horizontalmente. */
.entrada{
  width:100%;max-width:392px;margin:auto;
  padding:calc(env(safe-area-inset-top) + 32px) 20px calc(env(safe-area-inset-bottom) + 40px);
  display:flex;flex-direction:column;
}
.entrada .simbolo{text-align:center;padding-bottom:24px}
.entrada .simbolo img{height:40px;margin-bottom:14px}
.entrada .simbolo .nome{font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1.2}
.entrada .simbolo .nome em{font-style:normal;font-weight:400;color:var(--texto-2)}
.entrada .legenda{text-align:center;padding:7px 0 0;max-width:none}
.entrada .cartao{margin-bottom:0}
.entrada .campo:last-of-type{margin-bottom:0}
.entrada .principal{width:100%;align-self:stretch;margin-top:16px}
.entrada .texto-botao{width:100%;text-align:center;color:var(--marca);text-decoration:none}
.entrada .recado{margin-top:14px}

/* ---------- câmera ---------- */
.visor{
  position:relative;margin:20px auto 0;width:100%;max-width:300px;aspect-ratio:1;
  border-radius:20px;overflow:hidden;background:var(--superficie-2);border:1px solid var(--borda);
}
.visor video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
.visor .dica{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;
  color:var(--texto-2);font-size:14px;line-height:1.5;
}
.visor.pronto .dica{display:none}

/* ---------- botões ---------- */
.principal{
  /* Borda transparente, e não borda ausente: o `.discreto` tem 1px de cada
     lado, e sem esta linha um par "Cancelar / Salvar" saía com 2px de
     diferença de altura — o suficiente para a linha de baixo parecer torta
     sem que se saiba por quê. */
  width:100%;padding:12px 20px;border:1px solid transparent;
  border-radius:var(--r-m);background:var(--marca);color:#fff;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .18s var(--mola),filter .18s ease;
}
.principal:hover{filter:brightness(1.08)}
.principal:active{transform:scale(.985)}
.principal:disabled{opacity:.4;cursor:not-allowed}
.principal.discreto{
  background:var(--superficie);color:var(--texto);border-color:var(--borda);
}
.principal.discreto:hover{background:var(--superficie-2);filter:none}
.girando{
  width:16px;height:16px;border:2.2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
.texto-botao{
  display:block;width:100%;margin-top:10px;padding:10px;text-align:center;
  font-size:14px;color:var(--marca);
}

/* ---------- listas ---------- */
.linhas{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-g);
  overflow:hidden;
}
.linha{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--separador)}
.linha:last-child{border-bottom:0}
.linha .hora{
  font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.025em;min-width:58px;
}
.linha .qual{flex:1;font-size:14.5px;min-width:0}
.linha .qual small{display:block;color:var(--texto-2);font-size:12.5px;margin-top:1px}

.selo{
  font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px;
  background:var(--superficie-2);color:var(--texto-2);white-space:nowrap;
}
.selo.aviso{background:var(--laranja-suave);color:var(--laranja)}
.selo.perigo{background:var(--vermelho-suave);color:var(--vermelho)}

/* Nota que precisa ser lida antes de continuar: a dobra do art. 137, o
   abono acima do limite. Vermelha e nao um cartao inteiro — o texto ja esta
   ao lado do que ele explica, e uma caixa colorida a cada aviso viraria
   semaforo. */
.nota.perigo{color:var(--vermelho);font-weight:500}
.selo.fila{background:var(--marca-suave);color:var(--marca)}
/* Aniversário é a única marca que não pede providência. Verde, e não laranja:
   o olho já aprendeu que laranja aqui significa "resolva isso". */
.selo.festa{background:var(--verde-suave);color:var(--verde)}
.linha.entrando{animation:entrar .45s var(--mola)}
@keyframes entrar{from{opacity:0;transform:translateY(8px)}}

.total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:14px 16px;margin-top:12px;background:var(--superficie);
  border:1px solid var(--borda);border-radius:var(--r-g);
}
.total b{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* Estado vazio é tela desenhada, não ausência de tela. */
.nada{
  text-align:center;padding:38px 24px;color:var(--texto-2);font-size:14px;line-height:1.6;
  background:var(--superficie);border:1px dashed var(--borda);border-radius:var(--r-g);
}

/* ---------- formulário ---------- */
.campo{
  width:100%;padding:10px 13px;border:1px solid var(--borda);border-radius:var(--r-m);
  background:var(--superficie);font-size:16px;margin-bottom:10px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
/* Campo de data e de mês no iPhone.
   O Safari desenha o valor por extenso — "21 de ago. de 2026" — e dimensiona o
   campo pelo shadow DOM, ignorando o `width:100%` acima. O campo cresce além
   do pai e empurra o vizinho para fora da tela; foi o que aconteceu com o par
   "De / Até" do pedido de atestado. `appearance:none` tira o dimensionamento
   nativo, e `min-width:0` autoriza o encolhimento que um filho de flex não faz
   por conta própria. */
input[type="date"].campo,input[type="month"].campo{
  -webkit-appearance:none;appearance:none;
  min-width:0;max-width:100%;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value{text-align:left}

.campo:hover{border-color:var(--texto-3)}
.campo:focus{outline:0;border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-suave)}
textarea.campo{min-height:130px;height:auto;resize:vertical;line-height:1.5}

/* Altura travada em 46px para todo campo de uma linha.
   `input[type=month]` desenha o próprio botão de calendário e sai 1,6px mais
   alto que um `select` de mesmo padding. Numa barra alinhada pela base — a do
   fechamento do mês — esses 1,6px empurravam "Competência" dois pixels acima
   de "Unidade", e o olho lê isso como tela torta antes de saber por quê.
   46 = 24 de linha + 20 de padding + 2 de borda. */
input.campo,select.campo{height:46px;line-height:24px}
.rotulo{display:block;font-size:12.5px;font-weight:600;color:var(--texto-2);padding:0 2px 6px}
.pilulas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pilula{
  padding:7px 14px;border-radius:99px;background:var(--superficie);border:1px solid var(--borda);
  font-size:14px;transition:transform .18s var(--mola),background .15s ease;
}
.pilula:hover{background:var(--superficie-2)}
.pilula:active{transform:scale(.96)}
.pilula[aria-pressed="true"]{background:var(--marca);border-color:var(--marca);color:#fff}

.protocolo{
  margin-top:18px;padding:22px;border-radius:var(--r-g);text-align:center;
  background:var(--marca-suave);border:1px solid var(--marca-linha);
}
.protocolo strong{
  display:block;font-size:30px;font-weight:700;letter-spacing:.1em;
  color:var(--marca);margin:10px 0;font-variant-numeric:tabular-nums;
}
.protocolo small{display:block;font-size:12.5px;color:var(--texto-2);line-height:1.5}

/* ---------- recados ---------- */
.recado{margin-top:12px;padding:11px 14px;border-radius:var(--r-m);font-size:14px;line-height:1.45}
.recado.erro{background:var(--vermelho-suave);color:var(--vermelho)}
.recado.certo{background:var(--verde-suave);color:var(--verde)}
.recado.espera{background:var(--laranja-suave);color:var(--laranja)}

/* ---------- tabela ---------- */
.rolagem{
  overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-g);
  border:1px solid var(--borda);
}
table{width:100%;border-collapse:collapse;background:var(--superficie);font-size:13.5px}
th{
  text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--texto-3);padding:10px 13px;border-bottom:1px solid var(--separador);white-space:nowrap;
}
td{padding:10px 13px;border-bottom:1px solid var(--separador);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;text-align:right}
td.neg{color:var(--vermelho)}
td.pos{color:var(--verde)}
td small{display:block;color:var(--texto-2);font-size:12px;margin-top:1px}

/* Total da empresa: é o número que o RH confere contra a folha. Fica preso
   embaixo para não sumir ao rolar uma equipe grande. */
tfoot td{
  position:sticky;bottom:0;background:var(--superficie-2);
  border-top:1px solid var(--borda);border-bottom:0;font-weight:600;
}
tbody tr.clicavel{cursor:pointer;transition:background .12s ease}
tbody tr.clicavel:hover{background:var(--superficie-2)}

/* Indicadores do dia. Dois por linha no celular, quatro quando cabe — três
   colunas deixariam o quarto sozinho embaixo, ocupando o dobro. */
.cartoes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px}
@media (min-width:760px){.cartoes{grid-template-columns:repeat(4,1fr)}}
.indicador{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-g);
  padding:15px 16px;min-width:0;
}
.indicador b{
  display:block;font-size:27px;font-weight:700;letter-spacing:-.035em;line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.indicador span{display:block;font-size:12.5px;color:var(--texto-2);margin-top:6px}
.indicador small{
  display:block;font-size:12px;color:var(--texto-3);margin-top:5px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;
}
.indicador.alerta b{color:var(--laranja)}
.indicador.ok b{color:var(--verde)}

.linha.clicavel{cursor:pointer;transition:background .12s ease}
.linha.clicavel:hover{background:var(--superficie-2)}

/* Competência e exportação lado a lado quando há largura para isso. */
.barra-mes{display:flex;flex-direction:column;gap:12px}
.barra-mes .campo{margin-bottom:0}
.barra-mes .campo-mes{flex:1;min-width:0}
@media (min-width:720px){
  .barra-mes{flex-direction:row;align-items:flex-end;flex-wrap:wrap}
  .barra-mes .campo-mes{flex:1 1 170px;min-width:0}
  .barra-mes .principal{height:46px;padding-top:0;padding-bottom:0}
  .acoes-mes{flex:1 1 260px}
}

/* Dias da semana como fichas que alternam. Sete caixas de seleção ocupariam
   a tela inteira e ninguém acerta o alvo no toque. */
.dias{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.dias button{
  flex:1;min-width:38px;padding:9px 0;border-radius:var(--r-p);
  background:var(--superficie-2);color:var(--texto-2);
  font-size:12.5px;font-weight:600;transition:background .15s ease,color .15s ease;
}
.dias button[aria-pressed="true"]{background:var(--marca);color:#fff}

.dupla{display:flex;gap:10px;flex-wrap:wrap}
.dupla .principal{flex:1}
/* Sem `min-width:0`, um filho de flex não encolhe abaixo do próprio conteúdo —
   e `input[type=date]` no iPhone desenha "21 de ago. de 2026" por extenso, o
   que numa tela de 390px empurra o campo vizinho para fora da janela. Com o
   `wrap` acima, os dois campos empilham em vez de estourar; com os botões, que
   são estreitos, nada muda. */
.dupla > *{min-width:0}
.dupla .campo{min-width:0}

/* ---------- navegação ---------- */
.abas{
  position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;
  background:color-mix(in srgb,var(--fundo) 88%,transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--separador);
  padding-bottom:env(safe-area-inset-bottom);
}
.abas button{
  flex:1;padding:8px 4px 6px;font-size:10px;color:var(--texto-3);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:color .15s ease;
}
.abas button[aria-current="page"]{color:var(--marca)}
.abas svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Contador na aba: só existe quando há algo esperando. Conta apenas o que
   aguarda resposta — contar tudo transformaria a bolinha em decoração fixa, e
   decoração fixa ninguém mais enxerga. */
.abas button{position:relative}
.conta-aba{
  position:absolute;top:3px;left:calc(50% + 6px);
  min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  display:grid;place-content:center;
  font-size:10px;font-weight:700;line-height:1;
  background:var(--marca);color:#fff;
}

/* O painel passou a ter sete abas com a entrada de Avisos, e "Fechamento" é
   larga. A 375px ainda sobra folga; a 320px — o iPhone SE, que ainda aparece —
   a soma passava de 325px e a última aba saía cortada pela borda. O que cede é
   o respiro lateral do rótulo, e não o tamanho da letra: encolher a fonte da
   barra inteira para caber uma palavra deixaria as sete piores de ler. */
@media (max-width:359px){
  .abas button{padding-left:2px;padding-right:2px}
}

/* ---------- rodapé ---------- */
.rodape{
  text-align:center;padding:24px 20px calc(env(safe-area-inset-bottom) + 20px);
  font-size:11.5px;color:var(--texto-3);
}

/* ============================================================
   TAMANHOS DE TELA
   Abaixo de 900px a navegação fica embaixo, ao alcance do polegar; acima,
   vira barra lateral e o conteúdo ganha a densidade de quem usa mouse.
   ============================================================ */
@media (max-width:899px){
  .tela{padding-bottom:108px}
  .rodape{padding-bottom:calc(env(safe-area-inset-bottom) + 96px)}
}

@media (min-width:900px){
  /* No desktop a base cai um ponto: 16px é medida de leitura no telefone, a
     30 cm do rosto. No monitor, a 60 cm, a mesma medida vira letra grande e
     obriga a rolar o que caberia junto. */
  /* `:has(.abas)` porque nem toda página tem barra lateral — o painel da
     plataforma não tem, e um padding fixo deixaria 216px de vão morto.
     E `:not([hidden])` porque o portal TEM a barra, mas escondida enquanto
     ninguém entrou: sem isso a tela de login nascia empurrada 216px para a
     direita, com um vão vazio do lado esquerdo. */
  body{font-size:15px}
  body:has(.abas:not([hidden])){padding-left:216px}

  .abas{
    top:0;bottom:0;right:auto;width:216px;
    flex-direction:column;justify-content:flex-start;gap:2px;
    padding:16px 12px 20px;
    border-top:0;border-right:1px solid var(--separador);
    background:color-mix(in srgb,var(--fundo) 96%,var(--superficie-2));
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .abas button{
    flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:11px;
    padding:9px 12px;border-radius:var(--r-m);font-size:14px;font-weight:500;
  }
  .abas button:hover{background:var(--superficie-2);color:var(--texto)}
  .abas button[aria-current="page"]{background:var(--marca-suave);color:var(--marca);font-weight:600}
  .abas svg{width:19px;height:19px}
  /* Na barra lateral a aba é uma linha; o contador vai para a ponta dela, e
     não sobreposto ao ícone como no rodapé do celular. */
  .conta-aba{position:static;margin-left:auto}

  .tela{max-width:960px;padding:0 36px 56px}
  .cabeca{padding-left:36px;padding-right:36px}
  .titulao{font-size:28px;padding:26px 0 2px}

  /* Botão de largura total é alvo de dedo. No mouse, ele vira uma faixa de
     600px de cor cheia para um clique de 8px — barulho visual, e some a
     diferença entre a ação principal e o resto da tela. */
  .principal{width:auto;min-width:150px;align-self:flex-start}
  .cartao > .principal,
  .tela > .principal{display:inline-flex}
  .dupla .principal{flex:0 0 auto}
  .texto-botao{width:auto;text-align:left;padding:10px 0}

  /* Campo de formulário também não precisa da largura inteira: linha longa
     demais é ruim de ler e pior de preencher. */
  .cartao .campo,.cartao .rotulo{max-width:460px}
  .modal .campo,.modal .rotulo{max-width:none}
}

/* Telas largas: o conteúdo cresce até onde a leitura ainda é confortável, e
   para. Texto de 1600px de largura ninguém acompanha de uma linha para a
   seguinte. */
@media (min-width:1400px){
  .tela{max-width:1120px}
}


/* ---------- modal ---------- */
/* Aqui a sombra existe, e é a única do sistema: o modal está de fato por cima
   de tudo, e a sombra é o que diz isso. */
.fundo-modal{
  position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(26,20,10,.34);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:surgir .2s ease;
}
@keyframes surgir{from{opacity:0}}
.modal{
  width:100%;max-width:540px;max-height:92dvh;overflow-y:auto;
  background:var(--fundo);border-radius:18px 18px 0 0;
  padding:6px 20px calc(env(safe-area-inset-bottom) + 24px);
  box-shadow:var(--sombra);
  animation:subir .3s var(--mola);
}
@keyframes subir{from{transform:translateY(100%)}}
@media (min-width:600px){
  .fundo-modal{align-items:center}
  .modal{border-radius:16px;animation:aparecer .22s var(--mola)}
  @keyframes aparecer{from{opacity:0;transform:scale(.97)}}
}
.pega{width:36px;height:4px;border-radius:99px;background:var(--borda);margin:6px auto 12px}
@media (min-width:600px){.pega{display:none}}
.modal h2{font-size:19px;font-weight:700;letter-spacing:-.025em;padding:8px 0 3px}
.modal .legenda{padding-bottom:16px}
.modal .dupla{margin-top:16px}
select.campo{appearance:none;background-image:none}

/* Ícone do seletor de data e mês.
   O nativo é cinza-escuro fixo: some no tema escuro e é discreto demais no
   claro. Então desenhamos o nosso, na cor da marca — é um campo que a pessoa
   usa toda vez que abre a tela e precisa parecer clicável. */
.campo::-webkit-calendar-picker-indicator{
  opacity:1;cursor:pointer;
  width:22px;height:22px;padding:0;margin-left:8px;border-radius:6px;
  background-color:transparent;
  background-repeat:no-repeat;background-position:center;background-size:19px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D3FD9' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.8'/%3E%3Cpath d='M8 2.8v4.4M16 2.8v4.4M3.5 10.2h17'/%3E%3C/svg%3E");
  transition:background-color .15s ease;
}
.campo::-webkit-calendar-picker-indicator:hover{background-color:var(--marca-suave)}

/* A instrução da pose fica ACIMA do vídeo, não embaixo: a pessoa está olhando
   para a câmera, e texto abaixo do visor sai do campo de visão dela. */
.pose{
  text-align:center; padding:12px 16px; margin-bottom:14px;
  background:var(--marca-suave); border:1px solid var(--marca-linha); border-radius:var(--r-m);
}
.pose .passo{
  display:block; font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--marca); margin-bottom:3px;
}
.pose b{ display:block; font-size:17px; font-weight:700; letter-spacing:-.02em; }
.pose span:last-child{ display:block; font-size:13px; color:var(--texto-2); margin-top:3px }

/* ---------- cadastro facial ---------- */
.visor-face{
  position:relative;width:100%;max-width:300px;aspect-ratio:1;margin:0 auto;
  border-radius:18px;overflow:hidden;background:var(--superficie-2);border:1px solid var(--borda);
}
.visor-face video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
.contador{
  position:absolute;inset:0;display:grid;place-content:center;
  background:rgba(0,0,0,.55);color:#fff;font-size:68px;font-weight:700;
  letter-spacing:-.05em;
}
.amostras{display:flex;gap:8px;justify-content:center;margin-top:14px}
.amostras i{
  width:40px;height:40px;border-radius:9px;background:var(--superficie-2);
  border:1px solid var(--borda);display:block;background-size:cover;background-position:center;
}
.amostras i.cheia{border-color:var(--marca)}

/* A foto é o dado principal da tela de pendência: quem trata decide olhando
   para ela. Altura generosa de propósito — miniatura não serve para
   reconhecer ninguém. */
.foto-pendencia{
  display:block;width:100%;max-height:340px;object-fit:contain;
  margin-top:14px;border-radius:var(--r-m);background:#0D0D12;
}

/* ============================================================
   EQUIPE — cartões de pessoa

   Lista vira grade porque a pergunta mudou. Uma linha por pessoa responde
   "quem existe"; o cartão responde "quem é" e "tem algo pendente com ela" ao
   mesmo tempo, que é o que o RH pergunta de verdade ao abrir a tela.
   ============================================================ */
.barra-busca{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.barra-busca .campo{margin-bottom:0}
@media (min-width:720px){
  .barra-busca{flex-direction:row;align-items:center}
  .barra-busca .campo{flex:1;max-width:none}
  /* `width:auto` junto do `flex:0 0 auto`: a regra base do botão é
     `width:100%`, e a de desktop que a desfaz só entra aos 900px. Nos 180px
     entre uma e outra, o botão tomava a linha e a busca virava um quadrado. */
  .barra-busca .principal{flex:0 0 auto;width:auto;min-width:0}
}

.grade-equipe{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}

.pessoa{
  display:flex;gap:13px;align-items:flex-start;text-align:left;width:100%;
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-g);
  padding:14px;transition:border-color .15s ease,transform .15s var(--mola);
}
.pessoa:hover{border-color:var(--texto-3);transform:translateY(-1px)}
.pessoa .quem{min-width:0;flex:1}
.pessoa b{
  display:block;font-size:14.5px;font-weight:600;letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pessoa small{
  display:block;font-size:12.5px;color:var(--texto-2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pessoa .marcas{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}

/* Retrato quando existe; iniciais quando não. A cor vem do próprio nome, então
   é sempre a mesma para a mesma pessoa — o olho aprende a achar sem ler. */
.avatar{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  display:grid;place-content:center;overflow:hidden;
  background:var(--superficie-2);color:var(--texto-2);
  font-size:14px;font-weight:600;letter-spacing:-.02em;
  background-size:cover;background-position:center;
}
.avatar.grande{width:76px;height:76px;font-size:24px}
.retrato{display:flex;gap:16px;align-items:flex-start;padding:4px 0 18px}

/* O retrato da ficha se edita nele mesmo: um lápis no canto, como em qualquer
   app de contato. Os dois botões que moravam na aba de dados sumiram — quem
   quer trocar a foto olha para a foto, não para uma aba de cadastro. */
.retrato-editavel{position:relative;flex:0 0 auto}
.lapis{
  position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;
  display:grid;place-content:center;border-radius:50%;
  background:var(--superficie);border:1px solid var(--borda);color:var(--texto-2);
  box-shadow:0 1px 3px rgb(0 0 0 / .12);
  transition:color .15s ease,border-color .15s ease,transform .15s var(--mola);
}
.lapis svg{width:14px;height:14px}
.lapis:hover{color:var(--marca);border-color:var(--marca);transform:scale(1.06)}
.lapis:focus-visible{outline:2px solid var(--marca);outline-offset:2px}

.menu-foto{
  position:absolute;top:calc(100% + 6px);left:0;z-index:5;min-width:190px;
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r-m);box-shadow:0 8px 24px rgb(0 0 0 / .14);
  padding:6px;animation:entrar .18s var(--mola);
}
.menu-foto button{
  display:block;width:100%;text-align:left;padding:8px 10px;
  font-size:13.5px;border-radius:var(--r-p);color:var(--texto);
}
.menu-foto button:hover{background:var(--superficie-2)}
.menu-foto button#c-foto-tirar{color:var(--vermelho)}
.menu-foto p{
  padding:8px 10px 4px;margin-top:4px;border-top:1px solid var(--separador);
  font-size:12px;line-height:1.45;color:var(--texto-2);
}

/* Ficha em seções, e não numa coluna de rolagem infinita: quem abre a ficha
   quer uma das quatro coisas, e precisa achá-la sem varrer o resto. */
.resumo-pessoa{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--borda);border:1px solid var(--borda);border-radius:var(--r-m);
  overflow:hidden;margin-bottom:6px;
}
.resumo-pessoa div{background:var(--superficie);padding:11px 12px}
.resumo-pessoa b{
  display:block;font-size:18px;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.resumo-pessoa span{display:block;font-size:11.5px;color:var(--texto-3);margin-top:3px}

/* Abas dentro da ficha. Sublinhado e nao pilula: sao navegacao, e navegacao
   com cor de fundo compete com os botoes de acao logo abaixo. */
.cabeca-ficha{display:flex;gap:14px;align-items:center;padding:6px 0 14px}
.cabeca-ficha h2{padding:0}

.abas-ficha{
  display:flex;gap:2px;margin:4px 0 16px;
  border-bottom:1px solid var(--separador);overflow-x:auto;
}
.abas-ficha button{
  padding:9px 12px;font-size:13.5px;font-weight:500;color:var(--texto-2);
  white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .15s ease,border-color .15s ease;
}
.abas-ficha button:hover{color:var(--texto)}
/* A aba que tem trabalho dentro dela se anuncia. Uma aba com nome de
   substantivo — "Documentos" — nao diz que ha pendencia ali; "Documentos · 5"
   diz, e foi por nao dizer que ela passou despercebida no dia em que nasceu. */
.abas-ficha button.com-pendencia{color:var(--laranja)}
.abas-ficha button.com-pendencia[aria-current="page"]{
  color:var(--marca);border-bottom-color:var(--marca);
}
.abas-ficha button[aria-current="page"]{
  color:var(--marca);border-bottom-color:var(--marca);font-weight:600;
}

/* Duas colunas quando ha largura para isso. Abaixo de 900px vira uma so, e o
   `.secao` de cada coluna continua fazendo o papel de titulo. */
.duas-colunas{display:grid;gap:0 28px;grid-template-columns:1fr}
@media (min-width:900px){.duas-colunas{grid-template-columns:1fr 1fr}}

/* Esqueleto de carregamento. O "Carregando..." antigo era uma caixa vazia de
   altura arbitraria: a pagina pulava quando os dados chegavam, e o olho nao
   tinha o que seguir enquanto esperava. O esqueleto ocupa o espaco que o
   conteudo vai ocupar, e o brilho diz que algo esta acontecendo. */
.esqueleto{
  border:1px solid var(--borda);border-radius:var(--r-g);overflow:hidden;
  background:var(--superficie);
}
.esqueleto::before,.esqueleto::after{
  content:"";display:block;height:44px;
  border-bottom:1px solid var(--separador);
  background:linear-gradient(90deg,
    var(--superficie) 0%, var(--superficie-2) 40%, var(--superficie) 80%);
  background-size:280% 100%;
  animation:brilho 1.4s ease-in-out infinite;
}
.esqueleto::after{border-bottom:0;animation-delay:.18s}
@keyframes brilho{to{background-position:-180% 0}}

/* Modal largo, para a ficha de admissao. O modal padrao tem 540px porque a
   maioria e uma decisao so; a admissao e um formulario de doze campos, e
   doze campos em coluna unica viram uma rolagem que esconde metade do que
   ainda falta preencher. */
.modal.larga{max-width:860px}

/* Um degrau entre 540 e 860. A ficha nao tem duas colunas de campo, entao 860
   deixaria caixas de texto de 800px — largura em que o olho perde a linha. O
   que ela precisa e do que ganhou com a sexta aba: espaco para a barra de
   abas caber sem rolar, e para a lista de movimentacoes respirar. */
.modal.ampla{max-width:700px}
.ficha-dupla{display:grid;gap:0 28px;grid-template-columns:1fr}
@media (min-width:760px){
  .ficha-dupla{grid-template-columns:1fr 1fr}
  .modal.larga .campo,.modal.larga .rotulo{max-width:none}
}

/* Cabecalho de secao: titulo e acao na mesma linha. O botao embaixo da lista
   ficava orfao — competia com o ultimo item e ninguem sabia se pertencia a
   lista acima ou ao bloco seguinte. */
.botao-secao{
  font-size:12.5px;font-weight:600;color:var(--marca);
  padding:5px 11px;border-radius:99px;border:1px solid var(--marca-linha);
  background:var(--superficie);white-space:nowrap;
  transition:background .15s ease,transform .12s var(--mola);
}
.botao-secao:hover{background:var(--marca-suave)}
.botao-secao:active{transform:scale(.97)}

/* ============================================================
   EMPRESA — sub-navegação, blocos de lista, conta.
   ============================================================ */

/* Sub-navegação da Empresa. Um segmented control, e não abas sublinhadas: as
   sublinhadas já são a linguagem da ficha do colaborador, que vive dentro de um
   modal. Aqui é nível de página, e a pílula preenchida diz melhor "você está
   nesta" numa barra que carrega contagem junto do nome. */
.subabas{
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  background:var(--superficie-2);border-radius:99px;padding:4px;
  margin:16px 0 18px;
  /* Largura do conteúdo, não da tela: esticada até a borda ela virava uma
     faixa cinza com cinco botões amontoados à esquerda e um palmo de vazio à
     direita — fundo pintado sem nada dentro é peso sem função. */
  width:fit-content;max-width:100%;
}
.subabas::-webkit-scrollbar{display:none}
.subabas button{
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  padding:8px 15px;border-radius:99px;font-size:13.5px;font-weight:500;
  color:var(--texto-2);
  transition:color .15s ease,background .15s ease;
}
.subabas button:hover{color:var(--texto)}
.subabas button[aria-current="page"]{
  background:var(--superficie);color:var(--texto);font-weight:600;
  box-shadow:0 1px 2px rgb(26 20 10 / .08);
}
.subabas .conta{
  font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;
  padding:1px 7px;border-radius:99px;
  background:var(--superficie);color:var(--texto-3);
}
.subabas button[aria-current="page"] .conta{
  background:var(--marca-suave);color:var(--marca);
}

.sub-cabeca{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;padding-bottom:14px;
}
.sub-cabeca .nota{padding:0;flex:1}

/* Nota: a legenda de dentro de um bloco. Menor e mais apagada que `.legenda`,
   porque explica um controle que já está à vista — não abre assunto. */
.nota{
  color:var(--texto-2);font-size:12.5px;line-height:1.5;
  padding:8px 0 0;max-width:56ch;
}

/* O PONTO DE INTERROGAÇÃO AO LADO DO RÓTULO.
   Ele NÃO substitui a nota do campo, e essa é a regra inteira: a nota continua
   dizendo a coisa mais curta que é útil, e o `?` guarda o texto longo — por
   que o dado existe, quem o tem, e o que quebra se estiver errado.
   Se a informação passar a morar só aqui, a tela fica limpa e ninguém aprende
   nada: quem preencheu errado achando que sabia não clica em `?`.

   E é DISCLOSURE, não tooltip. Tooltip depende de hover, que não existe em
   tablet, e de cálculo de posição, que erra na borda da tela. Um bloco que
   abre embaixo do campo não tem como cair fora do viewport. */
/* UM CAMPO COM UMA AÇÃO AO LADO.
   `.dupla` não serve aqui: ela é flex com `.dupla .principal{flex:1}`, então o
   botão fica do mesmo tamanho do campo e a linha vira duas metades — e um
   `grid-template-columns` inline não faz nada num container que é flex, que
   foi o erro da primeira versão.
   O `margin-bottom` sai do campo e vai para a linha: sem isso o botão sobe os
   10px que o campo reserva embaixo de si, e a base dos dois não coincide. */
.campo-acao{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.campo-acao .campo{flex:1;min-width:0;margin-bottom:0}
/* A ALTURA E A MESMA DO CAMPO, e travada. `input.campo` tem 46px fixos; o
   botao vinha da soma de padding com line-height e dava 48,5 — dois pixels e
   meio a mais, que e pouco para alguem apontar e o bastante para a linha
   parecer torta. E o mesmo motivo pelo qual `.principal` ja tem borda
   transparente: par de irmaos com alturas diferentes se le como tela errada
   antes de se saber por que.
   `align-self` explicito porque este botao nao pode depender do alinhamento
   do pai: em qualquer contexto — inclusive num CSS meio antigo em cache — ele
   fica na linha do campo. */
.campo-acao .principal{
  width:auto;flex:0 0 auto;white-space:nowrap;
  height:46px;padding:0 20px;align-self:flex-start;
}

.ajuda{
  width:16px;height:16px;margin-left:6px;padding:0;border-radius:99px;vertical-align:-2px;
  background:var(--marca-suave);color:var(--marca);border:0;
  font-size:11px;font-weight:700;line-height:16px;text-align:center;cursor:help;
  transition:background .15s ease;
}
.ajuda:hover{background:var(--marca);color:#fff}
.ajuda[aria-expanded="true"]{background:var(--marca);color:#fff}
.ajuda-texto{
  color:var(--texto-2);font-size:12.5px;line-height:1.55;max-width:56ch;
  margin:-4px 0 10px;padding:9px 12px;
  background:var(--superficie-2);border-left:2px solid var(--marca);border-radius:var(--r-p);
}

.bloco{
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r-g);overflow:hidden;
}
.bloco .esqueleto{border:0;border-radius:0}

/* Item de lista. As ações eram dois selos por linha, um deles vermelho — meia
   dúzia de tablets virava uma parede de "remover", e a ação mais destrutiva da
   tela era a mais visível dela. Agora são botões de texto neutros; o vermelho
   aparece no hover, quando já há intenção. */
.item{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-top:1px solid var(--separador);
}
.item:first-child{border-top:0}
.item .quem{flex:1;min-width:0}
.item b{
  display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* O nome trunca, o detalhe quebra: truncar o detalhe escondia justamente o fim
   dele — a coordenada, a hora do último uso —, que é onde mora a informação. */
.item small{
  display:block;font-size:12.5px;color:var(--texto-2);margin-top:1px;
  /* `break-word` e não `anywhere`: o `anywhere` autoriza a quebra no meio de
     qualquer palavra sempre que isso deixar a linha mais curta, e o resultado
     era "Consul-/ta no cardio-/logista" numa caixa que tinha espaço. Com
     `break-word`, só quebra a palavra que sozinha não cabe. */
  line-height:1.45;overflow-wrap:break-word;
}
.item.dormindo b,.item.dormindo small{color:var(--texto-3)}

/* No celular as ações descem para a própria linha. `.acoes` é `flex:0 0 auto`
   e não encolhe: com um selo de "aguardando o RH" mais um botão "Cancelar",
   sobravam uns 150px para o texto do pedido, que então quebrava em quatro
   linhas de duas palavras. Empilhar devolve a largura inteira ao texto e não
   custa nada — a linha já ia ser alta de qualquer jeito. */
@media (max-width:520px){
  .item{flex-wrap:wrap}
  .item .acoes{width:100%;justify-content:flex-end;margin-top:4px}
}
.item .acoes{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.acao{
  font-size:12.5px;font-weight:500;color:var(--texto-2);
  padding:6px 9px;border-radius:var(--r-p);white-space:nowrap;
  transition:color .13s ease,background .13s ease,transform .12s var(--mola);
}
.acao:hover{color:var(--texto);background:var(--superficie-2)}
.acao.perigo:hover{color:var(--vermelho);background:var(--vermelho-suave)}
.acao:active{transform:scale(.96)}

/* Estado vazio desenhado, e não um parágrafo solto: é a primeira coisa que um
   cliente novo vê, e "Nenhum tablet cadastrado." em texto corrido parece erro
   de carregamento. */
.bloco .vazio{padding:30px 18px 32px;text-align:center}
.bloco .vazio b{display:block;font-size:14px;font-weight:600}
.bloco .vazio span{
  display:block;font-size:12.5px;color:var(--texto-2);margin:4px auto 0;
  max-width:38ch;line-height:1.5;
}

/* Endereço e botão lado a lado enquanto couber; empilhados quando não. O
   `wrap` é o que evita as duas falhas opostas: numa coluna estreita o botão
   roubava largura e a URL quebrava em "quiosque." / "html"; numa tela larga,
   empilhar deixava o Copiar num canto distante do que ele copia. */
.endereco-quiosque{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:12px;padding:13px 15px;
  background:var(--superficie-2);border-radius:var(--r-m);
}
.endereco-quiosque .rotulo{flex-basis:100%;padding-bottom:0}
.endereco-quiosque code{
  flex:1;min-width:min(100%,25ch);
  font-size:12.5px;line-height:1.45;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere;
}
.endereco-quiosque .botao-secao{flex:0 0 auto;margin-left:auto}

/* O botão fica na mesma linha do campo: alinhado ao input ele se lê como
   "salvar ISTO"; numa coluna própria, ao lado de um fuso que não se edita, ele
   se lia como "salvar a tela". */
.campo-com-acao{display:flex;gap:10px;align-items:center}
.campo-com-acao .campo{flex:1;min-width:0}
.campo-com-acao .principal{width:auto;flex:0 0 auto;padding:11px 18px;font-size:14px}

.par-conta{display:grid;gap:18px;grid-template-columns:1fr;padding-top:20px;margin-top:18px;
  border-top:1px solid var(--separador)}
@media (min-width:640px){.par-conta{grid-template-columns:1fr 1fr}}
.par-conta b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;padding-top:2px}
.par-conta .nota{padding-top:5px}
/* Os botoes da aba Conta sao todos "Salvar" no fim de um bloco, e por isso
   ganham ar em cima. O botao que fica NA LINHA de um campo e a excecao: os
   14px o empurravam para baixo da base do campo, e a linha ficava torta.

   O reseletor repete o `#sub-conta` porque precisa: a regra acima tem id, e
   nenhuma combinacao de classes ganha dela. Foi isto que me escapou ao
   reproduzir a linha isolada — sem o ancestral, o desnivel dava zero e o
   defeito nao aparecia. */
#sub-conta .principal{margin-top:14px}
#sub-conta .campo-acao .principal{margin-top:0}

/* Central de avisos. Fica no topo do Resumo, antes dos indicadores: os
   indicadores contam como o dia esta indo; os avisos dizem o que fazer. */
.avisos{
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r-g);overflow:hidden;margin-bottom:14px;
}
/* Escopado dentro de `.avisos` de propósito. Solto, `.aviso` também casava com
   `<button class="selo aviso">` — o selo "sem rosto" da lista de Equipe — e o
   `width:100%` daqui esticava aquele selo pela largura inteira do cartão. */
.avisos .aviso{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px 16px;border-bottom:1px solid var(--separador);
  transition:background .12s ease;
}
.avisos .aviso:last-child{border-bottom:0}
.avisos .aviso:hover{background:var(--superficie-2)}
.avisos .aviso .conta{
  flex:0 0 auto;min-width:30px;height:30px;padding:0 8px;border-radius:99px;
  display:grid;place-content:center;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;
  background:var(--superficie-2);color:var(--texto-2);
}
.avisos .aviso.urgente .conta{background:var(--vermelho-suave);color:var(--vermelho)}
.avisos .aviso.atencao .conta{background:var(--laranja-suave);color:var(--laranja)}
.avisos .aviso .diz{flex:1;min-width:0;font-size:14px}
.avisos .aviso .diz small{display:block;font-size:12.5px;color:var(--texto-2);margin-top:1px}
.avisos .aviso .leva{flex:0 0 auto;color:var(--texto-3);font-size:18px;line-height:1}

/* ============================================================
   ACABAMENTO — o que vale em todas as telas.

   Nada aqui muda o que a tela diz. Muda como ela responde: o clique que
   afunda, a tela que entra em vez de aparecer, e o respeito a quem pediu ao
   sistema para parar de mexer as coisas.
   ============================================================ */

/* Todo controle responde ao dedo antes de responder à rede. A pressão é o
   único retorno que não depende de nada carregar — e por isso é o que separa
   "cliquei" de "será que cliquei?". */
.selo:active,.abas button:active,.subabas button:active,.texto-botao:active{
  transform:scale(.96);
}
.selo,.texto-botao{transition:transform .12s var(--mola),background .15s ease}
.abas button{transition:color .15s ease,transform .12s var(--mola)}
button[data-unidade],button[data-escala],button[data-face],button[data-pin]{cursor:pointer}

/* Trocar de tela era um corte seco: o conteúdo antigo sumia e o novo estava
   ali, no mesmo quadro. Vinte e dois centésimos e quatro pixels bastam para o
   olho entender que a página mudou em vez de piscar. */
.tela:not([hidden]),.sub:not([hidden]){animation:entrar-tela .22s var(--mola)}
@keyframes entrar-tela{from{opacity:0;transform:translateY(4px)}}

/* Quem liga "reduzir movimento" no sistema costuma ter um motivo — enxaqueca
   vestibular, sensibilidade a movimento. O esqueleto continua brilhando de
   leve porque ele comunica espera, e sem ele a tela parece travada; o resto
   para. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .esqueleto::before,.esqueleto::after{
    animation-duration:1.4s !important;animation-iteration-count:infinite !important;
  }
}

/* ============================================================
   PORTAL DO COLABORADOR

   Reaproveita quase tudo do painel — `.tela`, `.bloco`, `.item`, `.indicador`,
   `.abas`. O que é só dele são duas coisas: o atalho da tela inicial e a
   prancheta de assinatura.
   ============================================================ */

/* Atalho: um `.bloco` que também é botão. Herda a caixa e ganha o alvo. */
.atalho{
  display:block;width:100%;text-align:left;padding:16px;
  transition:border-color .15s ease,transform .15s var(--mola);
}
.atalho:hover{border-color:var(--marca);transform:translateY(-1px)}
.atalho:active{transform:scale(.99)}
.atalho b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.atalho span{display:block;font-size:12.5px;color:var(--texto-2);margin-top:3px}

/* A prancheta da rubrica. Fundo branco e não transparente: o PNG exportado vai
   para dentro de um PDF, e traço preto sobre fundo transparente vira traço
   preto sobre o que estiver embaixo — que num leitor com tema escuro é preto
   sobre preto. */
.prancheta{position:relative;margin-bottom:14px}
.prancheta canvas{
  display:block;width:100%;height:200px;
  background:#fff;border:1px dashed var(--borda);border-radius:var(--r-m);
  /* Sem isto, arrastar o dedo para assinar rola a página junto. */
  touch-action:none;cursor:crosshair;
}
.prancheta .acao{position:absolute;right:8px;bottom:8px;background:var(--superficie)}

/* O dia de hoje, no portal. Branco e sóbrio de propósito: ele aparece TODO
   dia, e o azul cheio é reservado às férias, que aparecem uma vez por ano.
   Uma tela em que tudo grita não tem nada em destaque. */
.hoje{
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r-g);padding:14px 16px;margin-bottom:14px;
}
.hoje > b{
  display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;
  padding-bottom:2px;
}
.hoje .diz{display:block;font-size:13px;color:var(--texto-2);line-height:1.45}

/* Uma linha por marcação. O ponto colorido à esquerda dá a leitura de
   sequência sem precisar numerar: o que já foi é sólido, o que falta é vazado. */
.hoje .marcas{display:grid;gap:2px;margin:10px 0 0}
.hoje .marca{
  display:flex;align-items:baseline;gap:10px;font-size:13.5px;padding:3px 0;
}
.hoje .marca i{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--verde);align-self:center;
}
.hoje .marca.falta i{background:transparent;border:2px solid var(--marca)}
.hoje .marca .qual{flex:1;color:var(--texto-2)}
.hoje .marca .hora{font-weight:600;font-variant-numeric:tabular-nums}
.hoje .marca.falta .qual{color:var(--texto)}
.hoje .marca.falta .hora{color:var(--marca)}
.hoje .porque{
  display:block;font-size:11.5px;color:var(--texto-3);
  padding:6px 0 0 19px;line-height:1.4;
}

/* Cartão de férias do portal. É a única superfície do sistema com cor de
   destaque cheia: tudo aqui é areia e branco, e férias é a única notícia boa
   que o produto dá. Se tudo é discreto, nada é notícia. */
.cartao-ferias{
  display:flex;align-items:center;gap:16px;
  background:var(--marca-suave);border:1px solid var(--marca-linha);
  border-radius:var(--r-g);padding:16px 18px;margin-bottom:14px;
  animation:entrar-tela .3s var(--mola);
}
.cartao-ferias .desenho{flex:0 0 auto;width:64px;color:var(--marca)}
.cartao-ferias svg{width:64px;height:48px;display:block}
.cartao-ferias b{
  display:block;font-size:15.5px;font-weight:600;letter-spacing:-.018em;color:var(--marca);
}
.cartao-ferias span{
  display:block;font-size:13px;color:var(--texto-2);margin-top:3px;line-height:1.45;
}
@media (max-width:420px){
  .cartao-ferias{gap:12px;padding:14px}
  .cartao-ferias .desenho,.cartao-ferias svg{width:48px}
  .cartao-ferias svg{height:36px}
}

/* Cabeçalho do portal: nome à esquerda do retrato, como em qualquer app de
   conta. O avatar tem tamanho de alvo de toque porque um dia ele vai abrir um
   menu — hoje ele só identifica. */
.quem-sou{display:flex;align-items:center;gap:11px;min-width:0}
.quem-sou .avatar{width:38px;height:38px;font-size:13px}

/* ============================================================
   RODAPÉ DE MODAL — o padrão, e não mais um por tela.

   Eram catorze modais e catorze arranjos: alguns com "Cancelar / Salvar" lado
   a lado, outros com o "Fechar" pendurado numa linha própria embaixo, outros
   com três botões empilhados. Quem usa aprende a procurar o botão em vez de
   saber onde ele está.

   A regra: UMA linha, no fim. A saída — Fechar ou Cancelar — fica à esquerda,
   separada do resto pelo `margin-right:auto`; as decisões ficam à direita, com
   a principal por último, que é onde o polegar e o olho terminam.

   O que NÃO entra aqui: ação destrutiva de outro escopo, como "Excluir
   unidade". Ela continua numa seção própria acima, com o aviso colado —
   colocar "Excluir" ao lado de "Salvar" é convidar ao erro que não tem volta.
   ============================================================ */
.acoes-modal{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:18px;margin-top:2px;
}
.acoes-modal .principal{width:auto;flex:0 1 auto;min-width:0;padding:11px 20px}
/* A saída empurra o resto para a direita. */
.acoes-modal .sair{margin-right:auto}
@media (max-width:420px){
  /* Numa tela estreita a linha vira duas, e aí a saída não pode ficar sozinha
     no topo: ela desce para o fim, longe do polegar que decide. */
  .acoes-modal{flex-direction:column-reverse;align-items:stretch}
  .acoes-modal .principal{width:100%}
  .acoes-modal .sair{margin-right:0}
}

/* Cartão de resposta do portal. Diferente do de férias: aquele é uma boa
   notícia e usa a cor da marca cheia; este é um chamado — tem seta, é botão, e
   sai da tela assim que a pessoa lê. Cor de atenção seria exagero: ninguém
   precisa se assustar porque o RH respondeu. */
.cartao-resposta{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--superficie);border:1px solid var(--marca-linha);
  border-radius:var(--r-g);padding:14px 16px;margin-bottom:14px;
  transition:border-color .15s ease,transform .15s var(--mola);
  animation:entrar-tela .3s var(--mola);
}
.cartao-resposta:hover{border-color:var(--marca);transform:translateY(-1px)}
.cartao-resposta:active{transform:scale(.995)}
.cartao-resposta > div{flex:1;min-width:0}
.cartao-resposta b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.cartao-resposta span{
  display:block;font-size:12.5px;color:var(--texto-2);margin-top:2px;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.cartao-resposta .leva{flex:0 0 auto;color:var(--texto-3);font-size:20px;margin-top:0}

/* O item que ainda não foi lido ganha uma barra na borda: some no dia
   seguinte, então não vale gastar cor de fundo com ele. */
.item.novo{box-shadow:inset 3px 0 0 var(--marca)}

/* ---------- a central de alertas ----------
   UM cartão no Resumo, e o trabalho no modal. A lista aberta chegou a trinta
   linhas com doze pessoas, e trinta linhas respondem "tem algo urgente hoje?"
   com "tudo" — que é a mesma coisa que não responder. */
.cartao-alertas{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r-g);padding:15px 17px;margin-bottom:16px;
  transition:border-color .15s ease,transform .15s var(--mola);
}
.cartao-alertas:hover{border-color:var(--marca);transform:translateY(-1px)}
.cartao-alertas:active{transform:scale(.995)}
.cartao-alertas.urgente{border-color:var(--vermelho);background:var(--vermelho-suave)}
.cartao-alertas .sino{
  flex:0 0 auto;width:38px;height:38px;border-radius:99px;
  display:grid;place-content:center;
  background:var(--superficie-2);color:var(--texto-2);
}
.cartao-alertas .sino svg{width:20px;height:20px}
.cartao-alertas.urgente .sino{background:var(--vermelho);color:#fff}
.cartao-alertas .diz{flex:1;min-width:0}
.cartao-alertas b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.cartao-alertas small{
  display:block;font-size:12.5px;color:var(--texto-2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cartao-alertas.urgente b,.cartao-alertas.urgente small{color:var(--vermelho)}
.cartao-alertas .leva{flex:0 0 auto;color:var(--texto-3);font-size:22px}

/* Uma seção por regra dentro do modal, e dentro dela uma linha por pessoa. É
   onde o detalhe individual volta a caber — no Resumo ele empurrava o alerta
   seguinte para fora da tela. */
.secao-alerta{
  border:1px solid var(--borda);border-radius:var(--r-g);
  padding:14px 16px;margin-bottom:12px;background:var(--superficie);
}
.secao-alerta.urgente{border-color:var(--vermelho-suave);background:var(--vermelho-suave)}
.secao-alerta.festa{background:var(--verde-suave);border-color:var(--verde-suave)}
.secao-alerta h3{
  display:flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:600;letter-spacing:-.015em;margin-bottom:10px;
}
.secao-alerta.urgente h3{color:var(--vermelho)}
.secao-alerta h3 .conta{
  flex:0 0 auto;min-width:22px;height:22px;padding:0 6px;border-radius:99px;
  display:grid;place-content:center;font-size:11.5px;font-weight:700;
  background:var(--superficie-2);color:var(--texto-2);
}
.secao-alerta.urgente h3 .conta{background:var(--vermelho);color:#fff}
.secao-alerta .linhas{background:var(--superficie)}
.secao-alerta .linha .leva{color:var(--texto-3);font-size:20px}
.secao-alerta .texto-botao{margin-top:10px}

/* ---------- as cinco etapas da folha ----------
   Um passo a passo, e não decoração: quem faz folha uma vez por mês não decora
   a ordem, e a etapa que falha é sempre a que ficou implícita. A que está
   valendo ganha a cor da marca; as já vencidas ficam esmaecidas, para o olho
   achar de onde continuar sem ler as cinco. */
.etapas{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 18px}
.etapa{
  flex:1 1 130px;display:flex;align-items:center;gap:9px;
  padding:10px 12px;border-radius:var(--r-m);
  background:var(--superficie);border:1px solid var(--borda);
}
.etapa b{
  flex:0 0 auto;width:22px;height:22px;border-radius:99px;
  display:grid;place-content:center;
  font-size:11.5px;font-weight:700;
  background:var(--superficie-2);color:var(--texto-3);
}
.etapa span{font-size:12.5px;color:var(--texto-2);letter-spacing:-.01em}
.etapa.feita b{background:var(--verde-suave);color:var(--verde)}
.etapa.feita span{color:var(--texto-3)}
.etapa.agora{border-color:var(--marca-linha);background:var(--marca-suave)}
.etapa.agora b{background:var(--marca);color:#fff}
.etapa.agora span{color:var(--marca);font-weight:600}

/* O total do holerite: rótulo à esquerda, valor à direita. O `.total` já faz
   isso com um `<b>` sozinho; aqui o rótulo é um `<span>` e precisa da cor
   secundária para o valor continuar sendo o que salta. */
.total span{font-size:13.5px;color:var(--texto-2)}
.total + .total{margin-top:8px}

/* ---------- mural de avisos ----------
   Aviso não é linha de lista: é texto para ler. `.item` trunca o título numa
   linha e aperta o resto numa `small` cinza — que serve para "matrícula 004 ·
   Matriz" e não para três frases que alguém escreveu à mão. Por isso cartões
   separados, com o corpo em parágrafo de largura inteira.

   `pre-wrap` porque quem escreve um recado pula linha, e a quebra que a pessoa
   digitou é parte do que ela quis dizer. */
.mural{display:flex;flex-direction:column;gap:12px}
.mural article{
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r-g);padding:15px 17px;
}
.mural article.novo{border-color:var(--marca-linha);box-shadow:inset 3px 0 0 var(--marca)}
.mural h3{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:15px;font-weight:600;letter-spacing:-.015em;
}
.mural .quando{display:block;font-size:12px;color:var(--texto-3);margin-top:3px}
.mural p{
  font-size:14px;line-height:1.6;color:var(--texto-2);margin-top:10px;
  white-space:pre-wrap;overflow-wrap:break-word;
}
.mural .acoes{
  display:flex;gap:2px;justify-content:flex-end;
  margin-top:12px;padding-top:9px;border-top:1px solid var(--separador);
}

/* ============================================================
   PAINEL DA PLATAFORMA

   A tela do operador da Ruah. Reaproveita `.tela`, `.cartoes`, `.indicador`,
   `.pilulas` e `.selo` do painel do cliente — são os mesmos objetos com outro
   assunto. O que é só dela são três coisas: o cartão de empresa, o seletor de
   plano e as duas variações de indicador que dinheiro pediu.
   ============================================================ */

/* Valor em reais não cabe nos 27px do indicador: "R$ 14.300,00" tem doze
   caracteres, e num celular a coluna tem 160px. Encolher só a fonte do número
   preserva a hierarquia — o rótulo continua do mesmo tamanho em todos. */
.indicador.dinheiro b{font-size:21px}
.indicador.perigo b{color:var(--vermelho)}

/* Verde para "ativa". O `.festa` existente é a mesma pintura com outro nome, e
   nome errado no HTML é o que faz alguém trocar a cor errada seis meses
   depois. */
.selo.bom{background:var(--verde-suave);color:var(--verde)}

/* Uma empresa é um QUADRO, e não uma linha de lista. A linha comportava nome,
   plano e um selo; a carteira precisa de cinco números por cliente, e cinco
   números espremidos numa linha viram uma frase que ninguém lê até o fim. */
.grade-carteira{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:700px){.grade-carteira{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.grade-carteira{grid-template-columns:repeat(3,1fr)}}

.empresa-cartao{
  display:flex;flex-direction:column;gap:10px;text-align:left;width:100%;
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r-g);padding:15px 16px;cursor:pointer;
  transition:border-color .15s ease,transform .15s var(--mola);
}
.empresa-cartao:hover{border-color:var(--marca);transform:translateY(-1px)}
.empresa-cartao:active{transform:scale(.995)}
.empresa-cartao > header{display:flex;align-items:center;gap:10px}
.empresa-cartao > header b{
  flex:1;min-width:0;font-size:15.5px;font-weight:600;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.empresa-cartao .plano{
  font-size:12.5px;color:var(--texto-2);margin-top:-4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.empresa-cartao .numeros{display:flex;gap:16px;flex-wrap:wrap}
.empresa-cartao .numeros div{min-width:0}
.empresa-cartao .numeros b{
  display:block;font-size:17px;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.empresa-cartao .numeros span{display:block;font-size:11.5px;color:var(--texto-3);margin-top:2px}

/* O rodapé só existe quando há o que dizer. Rodapé fixo com "tudo em dia"
   treinaria o olho a pular a faixa — e ela some justamente quando aparece o
   aviso que importa. */
.empresa-cartao footer{
  font-size:12.5px;font-weight:500;padding-top:9px;
  border-top:1px solid var(--separador);
}
.empresa-cartao footer.perigo{color:var(--vermelho)}
.empresa-cartao footer.aviso{color:var(--laranja)}

/* O plano escolhido, embaixo das duas fileiras de pílulas. Ele é a RESPOSTA
   das duas escolhas, e por isso mostra o preço em corpo grande: quem clica em
   "Gestão" está perguntando quanto custa. */
.plano-escolhido{
  background:var(--marca-suave);border-radius:var(--r-g);
  padding:13px 15px;margin:2px 0 14px;
}
.plano-escolhido b{
  display:block;font-size:21px;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--marca);
}
.plano-escolhido span{display:block;font-size:13px;color:var(--texto);margin-top:3px}
.plano-escolhido small{display:block;font-size:12px;color:var(--texto-2);margin-top:7px;line-height:1.45}
.plano-escolhido .excecao{
  display:block;font-size:12px;color:var(--laranja);font-weight:500;margin-top:7px;
}