/* Ponto Digital - painel do RH.

   Identidade (2026-09-13, terceira volta): o dono reprovou o painel antigo,
   reprovou a copia da casca do ERP e reprovou a barra superior clara. Ele
   autorizou mirar no NIVEL de acabamento do CheckPonto - sem copiar tela por
   tela: fundo escuro, menu lateral arredondado flutuante, palco branco de
   cantos redondos, KPIs com faixa colorida e icone tingido, muita informacao
   por tela.

   Os nomes de classe das 30 views sao MANTIDOS (.cartao, .campo, .entrada,
   .botao, .tabela, .etiqueta, .aviso, .grade, .indicador-*): muda a pintura,
   nao a estrutura. */

:root {
  /* Marca */
  --pd-primaria:       #2563EB;
  --pd-primaria-2:     #1D4ED8;
  --pd-primaria-suave: #E0EAFF;

  /* Fundo e casca.
     O gradiente e o MESMO do login do SYSPDV WEB (a pedido do dono em
     2026-09-13: "esse fundo esta muito escuro, deixe com o mesmo fundo do
     ERP"), aqui no login E na parte de dentro. A cor solida e o fallback e o
     que pinta atras da area de rolagem. */
  --pd-fundo:          #16304F;
  /* No LOGIN o gradiente do ERP cabe inteiro na tela e o azul do meio
     aparece. No painel, o palco branco cobre justamente o meio, e sobravam
     só as pontas - que no gradiente do ERP são quase pretas. Por isso o
     painel usa a mesma familia de azul com as pontas CLARAS o bastante para
     aparecer ao redor do menu e do palco. */
  --pd-fundo-gradiente:       linear-gradient(135deg, #0F172A 0%, #1E3A5F 60%, #0F172A 100%);
  --pd-fundo-gradiente-painel: linear-gradient(160deg, #16304F 0%, #1E3A5F 45%, #15304E 100%);
  /* Menu um tom mais claro que o quase-preto original (pedido do dono em
     2026-09-13), ainda mais escuro que o fundo ao redor para não se
     confundir com ele. Clarear o menu derruba o contraste do texto: quem
     avisa é a medição de contraste em `_resptest/ponto-digital-painel-menus.js`. */
  --pd-lateral:        #24344F;
  --pd-lateral-2:      #1A2740;
  /* Com o menu clareado, ele e o fundo azul ficam a 1.07:1 de contraste - ou
     seja, quase a mesma cor. Quem desenha a borda do menu é esta linha, não a
     diferença de tom. */
  --pd-lateral-linha:  rgba(255,255,255,.14);
  /* Contraste: com #94A3B8 e cinza a 55% sobre o menu escuro, os rótulos de
     seção e a linha de apoio da marca sumiam (o dono: "tem alguns nomes que
     não dá pra ver"). Estes tons ficam legíveis sem competir com o item
     ativo. */
  --pd-lateral-texto:  #C3CEDC;
  /* Texto de 10px em caixa alta com espaçamento precisa de MAIS contraste que
     o mínimo da WCAG para não parecer apagado: #8DA0B8 passava em 4.5:1 e
     ainda assim sumia ("esse nome está bem apagado"). Este tom dá 7:1. */
  --pd-lateral-secao:  #BCC9D9;

  /* Palco claro */
  --pd-palco:          #FFFFFF;
  --pd-superficie:     #FFFFFF;
  --pd-superficie-2:   #F8FAFC;
  --pd-borda:          #E9EDF3;
  --pd-borda-2:        #D7DEE8;
  --pd-texto:          #0F172A;
  --pd-texto-2:        #475569;
  --pd-texto-3:        #7C8BA1;

  /* Estados */
  --pd-verde:          #16A34A;
  --pd-verde-fundo:    #DCFCE7;
  --pd-ambar:          #B45309;
  --pd-ambar-forte:    #F59E0B;
  --pd-ambar-fundo:    #FEF3C7;
  --pd-vermelho:       #DC2626;
  --pd-vermelho-fundo: #FEE2E2;
  --pd-roxo:           #7C3AED;
  --pd-ciano:          #0891B2;

  --raio:      10px;
  --raio-g:    16px;
  --raio-casca:20px;
  --sombra:    0 1px 2px rgba(15,23,42,.04);
  --sombra-2:  0 10px 30px rgba(2,6,23,.10);
  --lateral-w: 250px;

  /* Nomes antigos usados inline em algumas views. */
  --cor-fundo:           var(--pd-superficie-2);
  --cor-superficie:      var(--pd-superficie);
  --cor-borda:           var(--pd-borda);
  --cor-texto:           var(--pd-texto);
  --cor-texto-fraco:     var(--pd-texto-3);
  --cor-primaria:        var(--pd-primaria);
  --cor-primaria-escura: var(--pd-primaria-2);
  --cor-sucesso:         var(--pd-verde);
  --cor-sucesso-fundo:   var(--pd-verde-fundo);
  --cor-erro:            var(--pd-vermelho);
  --cor-erro-fundo:      var(--pd-vermelho-fundo);
  --cor-alerta:          var(--pd-ambar);
  --cor-alerta-fundo:    var(--pd-ambar-fundo);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--pd-fundo); }

body {
  margin: 0;
  background: var(--pd-fundo-gradiente-painel);
  /* `fixed` para a faixa clara do meio não se repetir a cada rolagem: o
     gradiente acompanha a janela, não a altura da página. */
  background-attachment: fixed;
  color: var(--pd-texto);
  font: 14px/1.5 Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pd-primaria); }
code { font-size: 12.5px; }

/* ================================================================
   Casca: menu lateral flutuante + palco branco
   ================================================================ */

.app-frame {
  display: flex;
  gap: 14px;
  padding: 14px;
  min-height: 100vh;
  align-items: flex-start;
}

/* ---------------- Menu lateral ---------------- */

.lateral {
  width: var(--lateral-w);
  flex-shrink: 0;
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 28px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--pd-lateral) 0%, var(--pd-lateral-2) 100%);
  border: 1px solid var(--pd-lateral-linha);
  border-radius: var(--raio-casca);
  overflow: hidden;
  color: var(--pd-lateral-texto);
  box-shadow: 0 10px 30px rgba(2, 6, 23, .35);
}

.lateral-marca {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px 14px;
  border-bottom: 1px solid var(--pd-lateral-linha);
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
}
.lateral-marca svg { width: 34px; height: 34px; flex-shrink: 0; display: block; }
.lateral-marca b { font-size: 16px; font-weight: 700; letter-spacing: -.015em; display: block; line-height: 1.15; }
/* `.lateral-marca span` pegaria TAMBEM o span que embrulha o nome, e o
   text-transform herdado transformava "Ponto Digital" em "PONTO DIGITAL".
   So a linha de baixo e caixa alta. */
.lateral-marca .sub { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--pd-lateral-secao); margin-top: 3px; }

.lateral-menu {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.lateral-menu::-webkit-scrollbar { width: 6px; }
.lateral-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }

.lateral-secao {
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--pd-lateral-secao);
  font-weight: 700;
  /* Compacto de propósito: com 5 seções e 11 itens, em um notebook de 768px
     de altura o último item ficava fora da área visível do menu. */
  padding: 12px 10px 5px;
  margin: 0;
}
.lateral-menu ul { list-style: none; margin: 0; padding: 0; }
.lateral-menu li > a {
  display: flex;
  align-items: center;
  /* Folga apertada de propósito: com gap 11 e o badge de 3 dígitos,
     "Conferência" truncava para "Conferên…" em telas com zoom do navegador. */
  gap: 9px;
  padding: 8px 9px;
  margin-bottom: 2px;
  border-radius: var(--raio);
  color: var(--pd-lateral-texto);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .14s, color .14s;
}
.lateral-menu li > a > i:first-child { font-size: 16px; width: 19px; text-align: center; flex-shrink: 0; }
.lateral-menu li > a > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-menu li > a:hover { background: rgba(255,255,255,.07); color: #fff; }
.lateral-menu li.ativo > a { background: rgba(37,99,235,.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(96,165,250,.28); }
.lateral-menu li.ativo > a > i:first-child { color: #93C5FD; opacity: 1; }

/* Cor por item, como no CheckPonto: o menu ganha vida sem virar arco-iris. */
.lateral-menu .i-ponto   { color: #34D399; }
.lateral-menu .i-banco   { color: #60A5FA; }
.lateral-menu .i-faltas  { color: #F87171; }
.lateral-menu .i-just    { color: #A78BFA; }
.lateral-menu .i-arquivo { color: #FBBF24; }

.lateral-badge {
  min-width: 19px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pd-vermelho);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  line-height: 1;
  flex-shrink: 0;
}

/* Clarinho, não preto: com `rgba(0,0,0,.25)` este bloco não acompanhou o
   clareamento do menu e ficou um retângulo escuro no rodapé. */
.lateral-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--pd-lateral-linha);
  background: rgba(255,255,255,.05);
  flex-shrink: 0;
}
.lateral-usuario .avatar { width: 34px; height: 34px; background: var(--pd-primaria); color: #fff; }
.lateral-usuario div { min-width: 0; flex: 1; }
/* Nome em ATE DUAS LINHAS, não cortado com reticências: "Administrador da
   Empresa" virava "Administrador da Em…" nos 250px do menu. */
.lateral-usuario strong {
  font-size: 12.5px;
  color: #F1F5F9;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.lateral-usuario small { display: block; font-size: 11px; color: #BCC9D9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-usuario form { margin: 0; }
.lateral-usuario button {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--pd-lateral-texto);
  cursor: pointer;
  font-size: 15px;
}
.lateral-usuario button:hover { background: rgba(255,255,255,.12); color: #fff; }

.lateral-fundo { position: fixed; inset: 0; background: rgba(2,6,23,.55); z-index: 1040; display: none; }
.lateral-fundo.aberto { display: block; }

/* ---------------- Palco ---------------- */

.palco {
  flex: 1;
  min-width: 0;
  background: var(--pd-palco);
  border-radius: var(--raio-casca);
  box-shadow: var(--sombra-2);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 28px);
}

.palco-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--pd-borda);
  position: sticky;
  top: 0;
  background: var(--pd-palco);
  border-radius: var(--raio-casca) var(--raio-casca) 0 0;
  z-index: 20;
}
.lateral-botao {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--pd-borda);
  border-radius: var(--raio);
  background: #fff;
  color: var(--pd-texto-2);
  font-size: 19px;
  cursor: pointer;
  place-items: center;
}
.empresa-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--pd-superficie-2);
  border: 1px solid var(--pd-borda);
  color: var(--pd-texto-2);
  font-size: 13px;
  font-weight: 600;
  /* ⚠️ SEM TETO FIXO DE LARGURA. Havia `max-width: 320px`, e o dono mandou o
     print em 17/09/2026: "METAL FORTE MATERIAIS PARA CONSTRUC..." cortado com a
     barra inteira livre do lado. Razão social passa de 320px com frequência.
     Agora o chip ocupa o que o nome precisa e só encolhe (com reticências, e o
     nome inteiro no `title`) quando a barra de fato não tem espaço. */
  min-width: 0;
  flex: 0 1 auto;
}
.empresa-chip i { color: var(--pd-texto-3); flex-shrink: 0; }
.empresa-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.usuario { position: relative; }
.usuario > summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--pd-borda);
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--pd-texto-2);
  font-size: 13px;
  font-weight: 600;
}
.usuario > summary::-webkit-details-marker { display: none; }
.usuario > summary:hover, .usuario[open] > summary { background: var(--pd-superficie-2); }
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--pd-primaria-suave);
  color: var(--pd-primaria-2);
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.usuario > summary .seta { font-size: 9px; opacity: .5; }
.usuario-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--pd-borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-2);
  padding: 6px;
  z-index: 50;
}
.usuario-cab { padding: 10px 10px 12px; border-bottom: 1px solid var(--pd-borda); margin-bottom: 6px; }
.usuario-cab strong { display: block; font-size: 13.5px; color: var(--pd-texto); }
.usuario-cab span { display: block; font-size: 11.5px; color: var(--pd-texto-3); margin-top: 2px; }
.usuario-menu form { margin: 0; }
.usuario-menu a, .usuario-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px;
  border: 0; border-radius: var(--raio);
  background: none; color: var(--pd-texto-2);
  font: inherit; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
}
.usuario-menu a i, .usuario-menu button i { width: 18px; text-align: center; color: var(--pd-texto-3); }
.usuario-menu a:hover, .usuario-menu button:hover { background: var(--pd-superficie-2); color: var(--pd-texto); }
.usuario-menu .perigo, .usuario-menu .perigo i { color: var(--pd-vermelho); }

.conteudo { flex: 1; padding: 24px 26px 30px; min-width: 0; }

.rodape {
  padding: 14px 26px;
  border-top: 1px solid var(--pd-borda);
  color: var(--pd-texto-3);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
}

/* ================================================================
   Cabeçalho de página
   ================================================================ */

.pagina-cabecalho {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 20px;
}
.pagina-titulo {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.pagina-sub { margin: 0; color: var(--pd-texto-3); font-size: 13.5px; max-width: 960px; }

/* ================================================================
   Cartões
   ================================================================ */

.cartao {
  background: var(--pd-superficie);
  border: 1px solid var(--pd-borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 20px;
}
.cartao > h2:first-child, .dash-cabecalho h2 { font-weight: 700; letter-spacing: -.015em; }

.cartao-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--pd-borda);
}
.cartao-cab h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.015em; display: flex; align-items: center; gap: 8px; }
.cartao-cab h2 i { color: var(--pd-primaria); font-size: 15px; }
.cartao-cab .dica { margin: 3px 0 0; }

.grade { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grade { grid-template-columns: repeat(3, 1fr); } }

.indicador-valor {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.indicador-rotulo {
  color: var(--pd-texto-3);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 6px;
}

/* ---------------- KPI ---------------- */

/* Grid com auto-fill, não flex: com 5 tiles e flex, o que sobrava da linha
   esticava sozinho na largura toda (o "Aguardando conferência" virava uma
   faixa). Aqui cada tile ocupa uma coluna e ponto. */
/* 178px: com o menu de 250px, em 1366 o palco tem ~1008px úteis e os cinco
   tiles cabem em UMA linha (5*178 + 4*14 = 946). Em 196px sobrava um tile
   sozinho na segunda linha. */
.kpi-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.kpi {
  min-width: 0;
  position: relative;
  background: var(--pd-superficie);
  border: 1px solid var(--pd-borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 16px 16px 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
/* Faixa colorida no topo, como nos tiles do CheckPonto. */
.kpi::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--kpi-cor, var(--pd-primaria)); }
a.kpi:hover { border-color: var(--pd-borda-2); box-shadow: 0 6px 18px rgba(2,6,23,.07); transform: translateY(-1px); color: inherit; }
.kpi-icone {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 18px;
  background: var(--kpi-fundo, var(--pd-primaria-suave));
  color: var(--kpi-cor, var(--pd-primaria));
}
.kpi.verde    { --kpi-cor: var(--pd-verde);      --kpi-fundo: var(--pd-verde-fundo); }
.kpi.ambar    { --kpi-cor: var(--pd-ambar-forte);--kpi-fundo: var(--pd-ambar-fundo); }
.kpi.azul     { --kpi-cor: var(--pd-primaria);   --kpi-fundo: var(--pd-primaria-suave); }
.kpi.roxo     { --kpi-cor: var(--pd-roxo);       --kpi-fundo: #EDE9FE; }
.kpi.ciano    { --kpi-cor: var(--pd-ciano);      --kpi-fundo: #CFFAFE; }
.kpi.vermelho { --kpi-cor: var(--pd-vermelho);   --kpi-fundo: var(--pd-vermelho-fundo); }
.kpi-info { display: flex; flex-direction: column; min-width: 0; }
/* O valor vem ANTES do rótulo no HTML (a bateria lê nessa ordem); na tela o
   rótulo fica em cima. */
.kpi-info .indicador-rotulo { order: -1; margin: 0 0 5px; }
.kpi-nota { font-size: 12px; color: var(--pd-texto-3); margin-top: 7px; display: flex; align-items: center; gap: 5px; line-height: 1.35; }
.kpi-nota.ok { color: var(--pd-verde); }
.kpi-nota.atencao { color: var(--pd-ambar); }

.dash-duas {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1199.98px) { .dash-duas { grid-template-columns: 1fr; } }

.lista-estado { list-style: none; margin: 0; padding: 0; }
.lista-estado li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--pd-borda); }
.lista-estado li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-estado li:first-child { padding-top: 0; }
.ponto-estado { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.ponto-estado.ok     { background: var(--pd-verde);     box-shadow: 0 0 0 3px var(--pd-verde-fundo); }
.ponto-estado.alerta { background: var(--pd-ambar-forte); box-shadow: 0 0 0 3px var(--pd-ambar-fundo); }
.ponto-estado.erro   { background: var(--pd-vermelho);  box-shadow: 0 0 0 3px var(--pd-vermelho-fundo); }
.lista-estado strong { display: block; font-size: 13.5px; font-weight: 600; }
.lista-estado span { display: block; font-size: 12.5px; color: var(--pd-texto-3); margin-top: 2px; line-height: 1.45; }

.atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.atalho {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px;
  border: 1px solid var(--pd-borda);
  border-radius: var(--raio);
  background: var(--pd-superficie);
  color: var(--pd-texto);
  text-decoration: none;
  transition: border-color .14s, background .14s;
}
.atalho:hover { border-color: var(--pd-primaria); background: #F5F8FF; color: var(--pd-texto); }
.atalho i { font-size: 17px; color: var(--pd-primaria); width: 21px; text-align: center; flex-shrink: 0; }
.atalho strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; }
.atalho span { display: block; font-size: 11.5px; color: var(--pd-texto-3); margin-top: 1px; }

/* ================================================================
   Formulários
   ================================================================ */

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 12.5px; font-weight: 600; color: var(--pd-texto-2); margin-bottom: 6px; }

.entrada {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--pd-borda-2);
  border-radius: var(--raio);
  background: var(--pd-superficie);
  color: var(--pd-texto);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color .14s, box-shadow .14s;
}
.entrada:focus { outline: 0; border-color: var(--pd-primaria); box-shadow: 0 0 0 3px rgba(37,99,235,.16); }
.entrada[readonly], .entrada:disabled { background: var(--pd-superficie-2); color: var(--pd-texto-2); }
textarea.entrada { min-height: 90px; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--pd-primaria);
  border-radius: var(--raio);
  background: var(--pd-primaria);
  color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.3;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.botao:hover { background: var(--pd-primaria-2); border-color: var(--pd-primaria-2); color: #fff; }
.botao:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(37,99,235,.3); }
.botao--largo { width: 100%; }
.botao--discreto { background: var(--pd-superficie); color: var(--pd-texto-2); border-color: var(--pd-borda-2); }
.botao--discreto:hover { background: var(--pd-superficie-2); border-color: #94A3B8; color: var(--pd-texto); }
.botao--pequeno { min-height: 32px; padding: 4px 11px; font-size: 12.5px; }

/* ---------- avisos ---------- */

.aviso {
  padding: 12px 15px;
  border-radius: var(--raio);
  margin-bottom: 14px;
  font-size: 13.5px;
  border: 1px solid transparent;
  border-left-width: 3px;
}
.aviso--sucesso { background: var(--pd-verde-fundo);    color: #14532D; border-color: var(--pd-verde); }
.aviso--erro    { background: var(--pd-vermelho-fundo); color: #7F1D1D; border-color: var(--pd-vermelho); }
.aviso--alerta  { background: var(--pd-ambar-fundo);    color: #78350F; border-color: var(--pd-ambar-forte); }
.aviso code { font-size: 12px; }

/* ================================================================
   Login
   ================================================================ */

.login-tela {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 16px;
  background: var(--pd-fundo-gradiente);
  background-attachment: fixed;
}
/* Tipografia MAIOR que a do painel, a pedido do dono: a tela de login é vista
   de longe e tem pouco conteúdo, então nada aqui precisa ser miúdo. */
/* 400px, e não 430: o dono comparou lado a lado com o login do ERP e leu a
   nossa caixa como "muito larga". Medido em 1596px, na mesma janela: o cartão
   do ERP tem 408px e deixa ~49px de respiro de cada lado, sobrando 310px de
   linha útil; o nosso tinha 430px com 29px de respiro, e a linha útil ia a
   372px - campo largo e caixa baixa, que é a proporção "esticada" que ele
   apontou. Aqui a linha útil fica em 320px, perto da do ERP. */
.login-caixa { width: 100%; max-width: 400px; }
.login-marca { text-align: center; margin-bottom: 26px; }
.login-marca svg { width: 62px; height: 62px; display: block; margin: 0 auto 16px; }
.login-marca h1 { margin: 0; font-size: 29px; font-weight: 700; letter-spacing: -.025em; color: #fff; }
.login-marca p { margin: 7px 0 0; color: var(--pd-lateral-texto); font-size: 16px; }
.login-tela .cartao { padding: 34px 40px; border: 1px solid rgba(255,255,255,.08); border-radius: var(--raio-casca); box-shadow: var(--sombra-2); }
.login-tela .cartao h2 { margin: 0 0 20px; font-size: 18px; font-weight: 700; }
.login-tela .campo { margin-bottom: 16px; }
.login-tela .campo label { font-size: 14px; margin-bottom: 7px; }
.login-tela .entrada { min-height: 48px; font-size: 16px; }
.login-senha { display: flex; }
.login-senha .entrada { border-radius: var(--raio) 0 0 var(--raio); }
.login-senha button {
  min-width: 50px;
  border: 1px solid var(--pd-borda-2); border-left: 0;
  border-radius: 0 var(--raio) var(--raio) 0;
  background: var(--pd-superficie); color: var(--pd-texto-3);
  cursor: pointer; font-size: 18px;
}
.login-senha button:hover { background: var(--pd-superficie-2); color: var(--pd-texto); }
.login-tela .botao { min-height: 50px; margin-top: 6px; font-size: 16px; }
/* No celular o respiro de 40px comeria a linha inteira: 375 - 32 - 80 deixaria
   o campo em 263px. Volta para 22px, que é o mesmo respiro do resto do app. */
@media (max-width: 420px) {
  .login-tela .cartao { padding: 26px 22px; }
}

.rodape-nota {
  margin-top: 24px; text-align: center;
  font-size: 14px; color: var(--pd-lateral-texto); line-height: 1.7;
}
.rodape-nota strong { color: #CBD5E1; font-weight: 600; }

/* ================================================================
   Tabelas
   ================================================================ */

.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabela th, table.tabela td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid #F1F4F8;
  vertical-align: middle;
  /* Célula quebra linha no espaço, nunca no meio da palavra: com o menu
     lateral, em 1366 a lista de empregados cortava o botão da última coluna. */
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
table.tabela thead th {
  white-space: nowrap;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pd-texto-3);
  font-weight: 700;
  background: var(--pd-superficie-2);
  border-bottom: 1px solid var(--pd-borda);
}
table.tabela tbody tr:hover { background: #F9FBFD; }
table.tabela tbody tr:last-child td { border-bottom: 0; }
.cartao > .tabela-rolagem:first-child { border-radius: var(--raio-g) var(--raio-g) 0 0; }
.cartao > .tabela-rolagem:last-child  { border-radius: 0 0 var(--raio-g) var(--raio-g); }

.vazio { text-align: center; color: var(--pd-texto-3); padding: 34px 12px; }

/* Colunas secundárias somem no celular. A grade continua grade, com
   cabeçalho visível: nunca vira "card empilhado". */
@media (max-width: 768px) { .tabela .col-media { display: none; } }

/* O inverso: a informação da coluna que sumiu, repetida numa linha discreta
   dentro de uma coluna que fica. Só no celular, senão sai duplicada. */
.tabela .so-celular { display: none; }
@media (max-width: 768px) { .tabela .so-celular { display: block; margin-top: 2px; } }

.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
  background: #EEF2F7; color: var(--pd-texto-2);
  border: 1px solid transparent;
  white-space: nowrap;
}
.etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.etiqueta--ok     { background: var(--pd-verde-fundo); color: #15803D; }
.etiqueta--alerta { background: var(--pd-ambar-fundo); color: var(--pd-ambar); }

/* ---------- paginação ----------

   A CONTAGEM ("1-50 de 212") é a peça que importa, não os botões: até
   2026-09-12 as listas cortavam em 200 sem dizer nada, e o operador concluía
   que o cadastro não tinha salvado. Por isso o total aparece mesmo quando há
   uma página só. */

.paginacao {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--pd-borda);
  font-size: 13px; color: var(--pd-texto-3);
}
.paginacao-contagem strong { color: var(--pd-texto); }
.paginacao-aviso { background: var(--pd-ambar-fundo); color: var(--pd-ambar); border: 1px solid #FDE68A; border-radius: var(--raio); padding: 6px 10px; }
.paginacao-botoes { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.paginacao-numero, .paginacao-atual {
  display: inline-grid; place-items: center;
  min-width: 32px; min-height: 32px; padding: 0 8px;
  border-radius: var(--raio);
  font-variant-numeric: tabular-nums; text-decoration: none;
}
.paginacao-numero { color: var(--pd-texto-2); border: 1px solid var(--pd-borda-2); background: #fff; }
.paginacao-numero:hover { border-color: var(--pd-primaria); color: var(--pd-primaria); }
.paginacao-atual { background: var(--pd-primaria); color: #fff; font-weight: 700; }
@media (max-width: 600px) {
  /* No celular os botões vão para a linha de baixo, ocupando a largura toda. */
  .paginacao-botoes { margin-left: 0; width: 100%; }
}

/* ================================================================
   Formulários compostos
   ================================================================ */

.linha-busca { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.linha-busca .entrada { flex: 1 1 200px; min-width: 0; }

.dupla, .tripla { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .dupla  { grid-template-columns: 1fr 1fr; }
  .tripla { grid-template-columns: 1fr 1fr 1fr; }
}

.bloco { border: 1px solid var(--pd-borda); border-radius: var(--raio); padding: 14px; margin: 4px 0 16px; }
.bloco legend { padding: 0 6px; font-size: 12.5px; font-weight: 600; color: var(--pd-texto-2); }

.dica { color: var(--pd-texto-3); font-size: 12.5px; font-weight: 400; }

.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acoes .botao { flex: 1 1 auto; }
@media (min-width: 620px) { .acoes .botao { flex: 0 0 auto; } }

/* Explicação do que cada perfil pode, ao lado do seletor. Perfil de acesso é
   decisão que se toma uma vez e se lamenta por meses: a tela diz o que cada um
   faz, em vez de deixar a pessoa deduzir pelo nome. */
.bloco-perfis {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--pd-superficie-2);
  border: 1px solid var(--pd-borda);
  border-radius: var(--raio);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--pd-texto-2);
}
.bloco-perfis strong { color: var(--pd-texto); }

/* Caixa de marcar com rótulo clicável ao lado. A área de clique é a linha
   inteira: caixa de 13px sozinha é alvo difícil no celular. */
.opcao, .marcar-todos {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0; padding: 6px 0;
  font-size: 13px; color: var(--pd-texto-2); cursor: pointer;
}
.opcao input, .marcar-todos input { width: 16px; height: 16px; accent-color: var(--pd-primaria); cursor: pointer; }
.marcar-todos { margin: 0; white-space: nowrap; font-weight: 600; }
.tabela input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--pd-primaria); cursor: pointer; }

/* ================================================================
   Conferência
   ================================================================ */

dl.dados { margin: 0; }
dl.dados dt {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--pd-texto-3); font-weight: 700; margin-top: 13px;
}
dl.dados dt:first-child { margin-top: 0; }
dl.dados dd { margin: 3px 0 0; font-size: 13.5px; }
dl.dados dd.destaque { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }

/* O nome do AFD é uma string longa sem espaço
   (AFD<17 dígitos INPI><14 do CNPJ>REP_P.txt) e estourava a tela em 360px. */
dl.dados dd code { overflow-wrap: anywhere; word-break: break-all; font-size: 12px; }

dl.dados dd.hash, .hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  /* 64 caracteres: precisa quebrar em qualquer ponto para não estourar o
     cartão no celular. */
  word-break: break-all;
  line-height: 1.5;
  color: var(--pd-texto-3);
}

.texto-alerta { color: var(--pd-ambar); }

.selfie-conferencia {
  display: block; width: 100%; max-width: 260px;
  border-radius: var(--raio); border: 1px solid var(--pd-borda); background: var(--pd-superficie-2);
}

.historico-analises { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.historico-analises li {
  padding: 11px 0; border-bottom: 1px solid var(--pd-borda);
  /* O detalhe pode ser longo; quebra em vez de esticar o cartão. */
  overflow-wrap: anywhere;
}
.historico-analises li:last-child { border-bottom: none; }

/* ================================================================
   Cartão de ponto mensal (espelho): mestre-detalhe
   ================================================================ */

.cartao-ponto {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
/* `minmax(0, 1fr)`, não `1fr`: item de grid nasce com `min-width: auto`, e o
   piso vira a largura do conteúdo mais largo - o nome mais comprido da lista
   fazia a coluna medir 821px dentro de um espaço de 704px, e a página inteira
   rolava na horizontal. Medido, não suposto. */
@media (max-width: 1199.98px) { .cartao-ponto { grid-template-columns: minmax(0, 1fr); } }

/* Lista de empregados ao lado: o RH troca de pessoa sem sair da tela. */
.pessoas {
  min-width: 0;
  background: var(--pd-superficie);
  border: 1px solid var(--pd-borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  position: sticky;
  top: 74px;
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 1199.98px) { .pessoas { position: static; max-height: 320px; } }
.pessoas-busca { padding: 12px; border-bottom: 1px solid var(--pd-borda); }
.pessoas-lista { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.pessoas-lista li + li { margin-top: 2px; }
.pessoas-lista a {
  display: block;
  padding: 9px 10px;
  border-radius: var(--raio);
  text-decoration: none;
  color: var(--pd-texto);
}
.pessoas-lista a:hover { background: var(--pd-superficie-2); }
.pessoas-lista a.ativo { background: var(--pd-primaria-suave); }
/* Nome QUEBRA, não trunca: cortar nome com reticências foi reclamação do
   dono em outra tela, e aqui é como ele encontra a pessoa. */
.pessoas-lista strong {
  display: block; font-size: 13px; font-weight: 600; line-height: 1.25;
  overflow-wrap: anywhere;
}
.pessoas-lista span {
  display: block; font-size: 11.5px; color: var(--pd-texto-3); margin-top: 2px;
  overflow-wrap: anywhere;
}
.pessoas-vazio { padding: 20px 14px; text-align: center; color: var(--pd-texto-3); font-size: 13px; }

/* Barra do mês, com as setas. */
.mes-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--pd-superficie);
  border: 1px solid var(--pd-borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  margin-bottom: 16px;
}
.mes-seta {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--pd-borda-2);
  border-radius: var(--raio);
  background: #fff;
  color: var(--pd-texto-2);
  text-decoration: none;
  font-size: 15px;
  flex-shrink: 0;
}
.mes-seta:hover { border-color: var(--pd-primaria); color: var(--pd-primaria); }
.mes-nome {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  min-width: 160px;
  text-align: center;
}
.mes-nome::first-letter { text-transform: uppercase; }
.mes-barra .mes-dir { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Faixa de resumo do mês: um lugar só, sem caçar número pela tela. */
/* Colunas em número REDONDO (2, 4 ou 8), não `auto-fit`: com auto-fit os oito
   números caíam em 5 + 3 e sobrava um buraco cinza na segunda linha. */
.resumo-mes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--pd-borda);
  border: 1px solid var(--pd-borda);
  border-radius: var(--raio-g);
  overflow: hidden;
  margin-bottom: 16px;
}
@media (min-width: 560px)  { .resumo-mes { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1600px) { .resumo-mes { grid-template-columns: repeat(8, 1fr); } }
.resumo-mes > div { background: var(--pd-superficie); padding: 13px 14px; }
.resumo-mes strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.resumo-mes span {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--pd-texto-3);
  margin-top: 5px;
}

/* Legenda das marcas do cartão. */
.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--pd-texto-3);
  padding: 12px 16px 0;
}
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  border: 1px solid var(--pd-borda-2); background: var(--pd-superficie-2);
}
.legenda .l-sinal { border-color: var(--pd-ambar-forte); background: #FFFBEB; }
.legenda .l-incluida { border-style: dashed; border-color: var(--pd-ambar-forte); }
.legenda .l-riscado { background: repeating-linear-gradient(45deg, #E2E8F0 0 3px, #fff 3px 6px); }
.legenda .l-pendente { background: var(--pd-ambar-fundo); border-color: var(--pd-ambar-forte); }

/* Linha do dia com pendência: a cor fica na BORDA da primeira célula, não no
   fundo da linha inteira - fundo colorido em 31 linhas vira ruído. */
.tabela-espelho tr.dia-pendente td:first-child { box-shadow: inset 3px 0 0 var(--pd-ambar-forte); }

/* ================================================================
   Espelho de ponto
   ================================================================ */

/* Mais apertada que as outras: é uma grade densa de 30 linhas ao lado da
   lista de pessoas. */
.tabela-espelho th, .tabela-espelho td { padding: 9px 10px; }
.tabela-espelho td { white-space: nowrap; vertical-align: top; }
.tabela-espelho .linha-nao-util { background: var(--pd-superficie-2); }

.marcacao-chip {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--pd-superficie-2);
  border: 1px solid var(--pd-borda-2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--pd-texto);
}
.marcacao-chip:hover { border-color: var(--pd-primaria); }
/* Marcação sinalizada continua clicável e válida: a borda só chama a atenção
   do conferente, nunca sugere que o registro vale menos. */
.marcacao-chip--sinal { border-color: var(--pd-ambar-forte); color: var(--pd-ambar); background: #FFFBEB; }

.saldo-extra { color: var(--pd-verde); font-weight: 700; }
.saldo-falta { color: var(--pd-vermelho); font-weight: 700; }

/* Marcação desconsiderada continua VISÍVEL e riscada. */
.marcacao-chip--riscado { text-decoration: line-through; opacity: .6; }
/* Marcação incluída pelo empregador: nunca pode parecer original. */
.marcacao-chip--incluida { border-style: dashed; border-color: var(--pd-ambar-forte); color: var(--pd-ambar); }

/* ⚠️ AS DUAS PONTAS DO EMPRÉSTIMO DA MADRUGADA.
   Uma jornada que vira a meia-noite ocupa dois dias civis, e o ajuste era
   INVISÍVEL: a batida aparecia num dia e sumia do outro, e quem olhava o
   espelho concluía que o ponto não tinha registrado (reclamação de
   15/09/2026). As setas dizem para onde a batida foi ou de onde veio.
   ⇥ = veio do dia seguinte    ⇤ = foi contada no dia anterior */
/* `nowrap` só nestes dois: a seta quebrava linha dentro do chip e o horário
   ficava separado dela. Escopo fechado para não mexer no resto da grade. */
.marcacao-chip--emprestada,
.marcacao-chip--cedida { white-space: nowrap; }
.marcacao-chip--emprestada { border-style: dotted; border-color: var(--pd-primaria); }
.marcacao-chip--cedida { border-style: dotted; opacity: .6; }

.evento-cancelado { opacity: .6; }

/* ================================================================
   AMARRA DE ACESSO (tela de Usuários): empregadores, estabelecimentos e
   módulos que a pessoa alcança. Caixas em grade porque a lista cresce
   com o cliente - um por linha viraria rolagem de página inteira.
   ================================================================ */
.cartao-secao {
  border: 1px solid var(--pd-borda, #d5dee6);
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin-top: 16px;
}
.cartao-secao > legend {
  padding: 0 8px;
  font-size: 14px;
  font-weight: 700;
}
.rotulo-secao {
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pd-texto-fraco, #5b6b7c);
}
.grade-marcacoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px 14px;
}
.marcacao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 8px;
  font-size: 13.5px;
  cursor: pointer;
}
.marcacao:hover { background: var(--pd-fundo-fraco, #f1f5f9); }
.marcacao input { flex-shrink: 0; width: 16px; height: 16px; }
.marcacao--inativa { opacity: .6; }
.marcacao em { font-style: normal; color: var(--pd-texto-fraco, #5b6b7c); }
.grupo-modulo { margin-bottom: 12px; }
.grupo-modulo > strong {
  display: block;
  font-size: 12.5px;
  color: var(--pd-texto-fraco, #5b6b7c);
  margin-bottom: 4px;
}

/* Aviso no rodapé do menu para quem ainda não foi liberado. */
.lateral-aviso {
  margin: 16px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  font-size: 12px;
  line-height: 1.5;
}

/* ================================================================
   Amostra do AFD
   ================================================================ */

.afd-amostra {
  margin: 0;
  padding: 14px 16px;
  background: #0B1220;
  color: #CBD5E1;
  border: 1px solid #1E293B;
  border-radius: var(--raio);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.65;
  /* O arquivo é posicional: quebrar linha destruiria a leitura das colunas. */
  white-space: pre;
  overflow-x: auto;
}
.afd-num { color: #64748B; user-select: none; }

/* ================================================================
   Responsivo
   ================================================================ */

@media (min-width: 992px) and (max-width: 1279.98px) {
  :root { --lateral-w: 226px; }
}

/* Tablet e celular: o menu vira gaveta. */
@media (max-width: 991.98px) {
  .app-frame { padding: 10px; gap: 0; }
  .lateral {
    position: fixed;
    top: 10px; left: 10px; bottom: 10px;
    max-height: none;
    z-index: 1050;
    transform: translateX(calc(-100% - 14px));
    transition: transform .22s ease;
  }
  .lateral.aberta { transform: translateX(0); }
  .palco { min-height: calc(100vh - 20px); }
  .lateral-botao { display: grid; }
  .palco-topo { padding: 12px 16px; }
  .conteudo { padding: 18px 16px 26px; }
  .pagina-titulo { font-size: 21px; }
}

@media (max-width: 767.98px) {
  .app-frame { padding: 0; }
  .palco { border-radius: 0; min-height: 100vh; box-shadow: none; }
  .palco-topo { border-radius: 0; }
  .lateral { top: 0; left: 0; bottom: 0; border-radius: 0 var(--raio-casca) var(--raio-casca) 0; }
  /* No celular uma razão social de 40 caracteres não cabe numa linha entre o
     botão do menu e o avatar: em vez de cortar, QUEBRA em até duas linhas. O
     raio deixa de ser pílula, que com duas linhas viraria um ovo. */
  .empresa-chip { max-width: none; flex: 1; min-width: 0; border-radius: 14px; }
  .empresa-chip span {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .usuario > summary .usuario-nome { display: none; }
  .conteudo { padding: 16px 14px 24px; }
  .cartao { padding: 16px; }
  .pagina-titulo { font-size: 19px; }
  .indicador-valor { font-size: 24px; }
  .rodape { padding: 14px 16px; justify-content: center; text-align: center; }
}

@media (max-width: 575.98px) {
  .atalhos { grid-template-columns: 1fr; }
  /* Alvo de toque confortável e sem zoom automático do iOS (16px). */
  .botao { min-height: 44px; }
  .botao--pequeno { min-height: 36px; }
  .entrada { font-size: 16px; }
  .empresa-chip { padding: 6px 11px; font-size: 12.5px; }
}