/* =====================================================================
   cna.css — design system CNA Taquara aplicado ao sistema de ponto
   Fonte: CNA-Taquara-Design-System.md v0.1

   Três decisões que valem registro:

   1. Sem mascotes. O design system os trata como anfitriões da marca em
      material de treinamento e conteúdo. Aqui é ferramenta interna de RH:
      o Ben sorrindo enquanto alguém registra o terceiro atraso da semana
      seria constrangedor. Mesma regra já adotada nas telas de Financeiro.

   2. Duas famílias, não três. O design system limita a duas por material.
      Dados de hora pedem largura fixa, mas em vez de trazer uma monoespaçada
      usamos Inter com `font-variant-numeric: tabular-nums` — os dígitos
      alinham em coluna e a contagem de famílias fica respeitada.

   3. Vermelho vivo só em título e bloco curto. Branco sobre #E6143C dá
      4,64:1, suficiente para texto grande e negrito, insuficiente para
      corpo. Texto longo é sempre ink sobre branco, ou branco sobre azul.
   ===================================================================== */

:root{
  /* paleta oficial */
  --vermelho:#E6143C;
  --vermelho-escuro:#A30E2A;
  --azul:#19408B;
  --branco:#FFFFFF;
  --tinta:#1A1A1A;
  --cinza:#5A5A5A;
  --linha:#E4E4E7;
  --superficie:#F7F7F9;
  --verde:#1E7A46;        /* --ok no CRM */
  --apagado:#8A8A8E;      /* --off no CRM */
  --linha-perigo:#F1C2CC; /* borda de botão destrutivo, igual ao CRM */

  /* pastéis de apoio */
  --rosa:#FDECEF;
  --azul-claro:#EAF0FA;
  --amarelo:#FFC800;

  --display:'Poppins',system-ui,sans-serif;
  --corpo:'Inter',system-ui,sans-serif;

  --raio:8px;
  --sombra:0 1px 2px rgba(26,26,26,.04), 0 12px 32px -22px rgba(26,26,26,.35);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
  background:var(--superficie); color:var(--tinta);
  font-family:var(--corpo); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:var(--display); letter-spacing:-.01em}

/* números com largura fixa: horas alinham em coluna */
.num,.hora,td.n,th.n,time,.dado{font-variant-numeric:tabular-nums}

/* ---------- marca ---------- */
.marca{display:flex; align-items:center; gap:11px}
.marca img{height:30px; width:auto; display:block}
.marca .lockup{display:none; font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em}
.marca .lockup b{color:var(--vermelho)} .marca .lockup i{color:var(--azul); font-style:normal; font-weight:600}
.marca img[data-falhou]{display:none}
.marca img[data-falhou] + .lockup{display:block}

/* Duas versões, escolhidas pelo fundo — nunca recoloridas por CSS.
   Filtro sobre PNG suja as bordas e viola a regra de não recolorir. */
.marca .colorida{display:block}   /* fundo branco ou claro */
.marca .branca{display:none}      /* fundo vermelho, azul ou escuro */
.sobre-cor .marca .colorida{display:none}
.sobre-cor .marca .branca{display:block}
.sobre-cor .marca .unidade{color:rgba(255,255,255,.85); border-left-color:rgba(255,255,255,.3)}
.sobre-cor .marca .lockup b,.sobre-cor .marca .lockup i{color:var(--branco)}
.marca .unidade{
  font-family:var(--display); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cinza);
  padding-left:11px; border-left:1px solid var(--linha);
}

/* ---------- cabeçalho ---------- */
/* Mesmo cabeçalho do CRM: faixa vermelha de 3px, fundo branco, grudado
   no topo. É o que faz os dois sistemas se reconhecerem à primeira vista. */
header.topo{
  background:var(--branco); border-bottom:3px solid var(--vermelho);
  padding:12px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  position:sticky; top:0; z-index:30;
}

/* ---------- navegação por abas (padrão CRM) ---------- */
nav.abas{
  display:flex; margin-left:auto; background:var(--superficie);
  border:1px solid var(--linha); border-radius:999px; padding:3px; gap:3px;
  max-width:100%; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
nav.abas::-webkit-scrollbar{display:none}
nav.abas button, nav.abas a{
  border:none; background:transparent; cursor:pointer; text-decoration:none;
  padding:7px 20px; border-radius:999px; font-family:var(--display);
  font-weight:600; font-size:13px; color:var(--cinza);
  flex:0 0 auto; white-space:nowrap; transition:background .15s, color .15s;
}
nav.abas button:hover, nav.abas a:hover{color:var(--tinta)}
nav.abas button[aria-selected=true]{background:var(--vermelho); color:var(--branco)}
nav.abas button:focus-visible, nav.abas a:focus-visible{
  outline:2px solid var(--azul); outline-offset:2px;
}
nav.abas #sair{color:var(--vermelho-escuro)}

/* ---------- superfícies ---------- */
.cartao{
  background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--raio); box-shadow:var(--sombra);
}
.rotulo{
  font-family:var(--display); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cinza);
}

/* ---------- formulários ---------- */
label.campo{display:block; margin-bottom:14px}
label.campo > span{
  display:block; font-family:var(--display); font-size:10px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cinza); margin-bottom:6px;
}
input,select,textarea{
  width:100%; font-family:var(--corpo); font-size:15px; color:var(--tinta);
  padding:11px 12px; border:1px solid var(--linha); background:var(--branco);
  border-radius:6px; transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:0; border-color:var(--azul); box-shadow:0 0 0 3px var(--azul-claro);
}
textarea{min-height:74px; resize:vertical; line-height:1.5}

/* ---------- botões (padrão CRM) ----------
   `.btn` é o nome canônico, igual ao CRM. `.acao` e `.leve` continuam
   valendo como apelido para o código já escrito aqui, e produzem
   exatamente o mesmo resultado. */
.btn, button.leve, button.acao{
  border:1px solid var(--linha); background:var(--branco); border-radius:10px;
  padding:9px 14px; font-family:var(--display); font-weight:600; font-size:13px;
  color:var(--tinta); cursor:pointer; transition:background .15s, border-color .15s;
}
.btn:hover, button.leve:hover{border-color:var(--cinza)}
.btn.primary, button.acao{
  background:var(--vermelho); border-color:var(--vermelho); color:var(--branco);
}
.btn.primary:hover, button.acao:hover{background:var(--vermelho-escuro); border-color:var(--vermelho-escuro)}
.btn.danger{color:var(--vermelho-escuro); border-color:var(--linha-perigo)}
.btn.danger:hover{background:var(--rosa)}
.btn.danger.confirm{background:var(--vermelho-escuro); border-color:var(--vermelho-escuro); color:var(--branco)}
.btn.azul, button.azul{background:var(--azul); border-color:var(--azul); color:var(--branco)}
.btn.azul:hover, button.azul:hover{background:#142F66; border-color:#142F66}
.btn:disabled, button.acao:disabled, button.leve:disabled{
  opacity:.45; cursor:not-allowed; background:var(--branco);
  border-color:var(--linha); color:var(--cinza);
}
button.acao:disabled{background:var(--linha); border-color:var(--linha)}
.btn:focus-visible, button.acao:focus-visible, button.leve:focus-visible{
  outline:2px solid var(--azul); outline-offset:2px;
}

/* ---------- tabelas ---------- */
table{
  width:100%; border-collapse:collapse; background:var(--branco);
  border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden;
}
caption{
  text-align:left; padding:15px 16px; font-family:var(--display);
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cinza); border-bottom:1px solid var(--linha); background:var(--branco);
}
thead th{
  background:var(--azul); color:var(--branco);
  font-family:var(--display); font-size:10.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; text-align:left;
  padding:10px 12px; white-space:nowrap;
}
td{padding:11px 12px; border-bottom:1px solid var(--linha); vertical-align:top; font-size:14px}
tbody tr:nth-child(even) td{background:var(--superficie)}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right}
.pos{color:var(--azul); font-weight:600}
.neg{color:var(--vermelho-escuro); font-weight:600}
.mudo{color:var(--cinza)}

/* ---------- etiquetas ---------- */
.tag{
  display:inline-block; font-family:var(--display); font-size:10.5px; font-weight:600;
  letter-spacing:.03em; padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.tag.ok{background:var(--azul-claro); color:var(--azul)}
.tag.alerta{background:var(--rosa); color:var(--vermelho-escuro)}
.tag.neutra{background:var(--superficie); color:var(--cinza)}

/* ---------- avisos ---------- */
.aviso{
  border-left:3px solid var(--vermelho); background:var(--rosa);
  padding:13px 15px; border-radius:0 6px 6px 0; font-size:14px; line-height:1.5;
}
.aviso.info{border-left-color:var(--azul); background:var(--azul-claro)}
.nota{
  font-size:13px; line-height:1.55; color:var(--cinza);
  border-left:2px solid var(--linha); padding-left:13px;
}

/* ---------- indicadores ---------- */
.indicadores{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px}
.ind{background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); padding:16px}
.ind dt{
  font-family:var(--display); font-size:10px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cinza);
}
.ind dd{
  font-family:var(--display); font-size:28px; font-weight:700;
  letter-spacing:-.03em; margin-top:7px; color:var(--azul);
  font-variant-numeric:tabular-nums;
}
.ind .nota{font-size:12.5px; margin-top:4px; border:0; padding:0}

@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* =====================================================================
   MOBILE
   O sistema é usado em pé, na recepção, com uma mão, em 10 segundos.
   Tudo abaixo existe para esse cenário, não para a tela do notebook.
   ===================================================================== */

/* iOS dá zoom automático em qualquer campo com menos de 16px. O zoom
   desalinha a página e a pessoa precisa fechar na mão. 16px resolve. */
@media (max-width:860px){
  input,select,textarea{font-size:16px; padding:13px 12px}

  /* Alvo de toque de 44px é o mínimo da Apple e da WCAG 2.5.5.
     Botão de 36px na recepção com a mão ocupada erra o alvo. */
  button.acao,button.leve{min-height:48px; padding:13px 20px; font-size:15px}

  header.topo{padding:11px 15px; gap:11px}
  .marca img{height:26px}
  .marca .unidade{padding-left:9px}
  h1.titulo{font-size:15px}

  main{padding:15px}
  /* Buscar e Situação cabem lado a lado; só a ação principal ocupa a
     linha inteira. Empilhar tudo empurrava a lista para fora da tela. */
  .filtros{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end}
  .filtros label.campo{margin:0; min-width:0}
  .filtros input, .filtros select{width:100%; min-width:0}
  .filtros label.campo:only-child, .filtros > button{grid-column:1 / -1}
  .filtros > button{width:100%}

  /* Tabela vira lista de cartões. Rolagem horizontal em tabela de 10
     colunas é a pior experiência possível num celular: a pessoa perde
     a coluna de referência assim que arrasta. */
  table.responsiva, table.responsiva thead, table.responsiva tbody,
  table.responsiva tr, table.responsiva td{display:block; width:100%}
  table.responsiva thead{display:none}
  table.responsiva{border:0; background:none}
  /* caption continua display:table-caption dentro de uma tabela em block,
     e a largura colapsa numa coluna estreita. */
  table.responsiva caption{display:block; width:100%; border:0; padding:0 0 11px}
  table.responsiva tr{
    background:var(--branco); border:1px solid var(--linha);
    border-radius:var(--raio); margin-bottom:11px; padding:6px 2px;
  }
  table.responsiva tbody tr:nth-child(even) td{background:transparent}
  table.responsiva td{
    border:0; padding:8px 14px; display:flex; justify-content:space-between;
    align-items:baseline; gap:14px; text-align:right;
  }
  table.responsiva td::before{
    content:attr(data-rotulo); font-family:var(--display); font-size:10px;
    font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--cinza); text-align:left; flex:0 0 auto;
  }
  table.responsiva td:empty{display:none}
  table.responsiva td[data-rotulo=""]{justify-content:flex-end}
  table.responsiva td.destaque{
    display:block; text-align:left;
    background:var(--superficie); border-bottom:1px solid var(--linha);
    font-family:var(--display); font-weight:600; font-size:15px;
  }
  table.responsiva td.destaque::before{display:none}

  /* Diálogo vira folha inferior: o polegar alcança, e o teclado não
     empurra o conteúdo para fora da tela. */
  dialog{
    max-width:none; width:100%; margin:auto 0 0; border-radius:16px 16px 0 0;
    max-height:92dvh; overflow-y:auto;
  }
  dialog .rodape{
    position:sticky; bottom:0; background:var(--branco);
    border-top:1px solid var(--linha); padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  }
  dialog .rodape button{flex:1}
  .indicadores{grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:9px}
  .ind{padding:13px} .ind dd{font-size:24px}
}

@media (max-width:460px){
  .marca .unidade{display:none}
  .indicadores{grid-template-columns:1fr 1fr}
}


/* =====================================================================
   MENU LATERAL (mobile)
   Sete itens numa barra horizontal viravam duas linhas de alvos pequenos
   e o cabeçalho comia um terço da tela. Gaveta resolve: o cabeçalho volta
   a ter uma linha e cada item ganha altura de dedo.
   ===================================================================== */

.hamburguer{
  display:none; background:none; border:0; cursor:pointer; padding:9px;
  margin:-9px -4px -9px -9px; border-radius:8px; color:var(--tinta);
  line-height:0; flex:0 0 auto;
}
.hamburguer:focus-visible{outline:2px solid var(--azul); outline-offset:1px}
.hamburguer svg{width:23px; height:23px; display:block}

.veu{
  position:fixed; inset:0; background:rgba(26,26,26,.45); z-index:39;
  opacity:0; transition:opacity .22s ease;
}
.veu.aberto{opacity:1}
.veu[hidden]{display:none}

@media (max-width:860px){
  .hamburguer{display:block}

  header.topo{gap:12px; flex-wrap:nowrap; padding:9px 12px}
  header.topo h1.titulo{
    font-size:14px; min-width:0; flex:1 1 auto;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  header.topo .marca{flex:0 0 auto}

  nav.abas{
    border-radius:0; padding:0; background:var(--branco); overflow-x:visible;
    position:fixed; top:0; left:0; bottom:0; width:min(82vw,320px);
    margin:0; background:var(--branco); border-right:1px solid var(--linha);
    z-index:40; display:flex; flex-direction:column; gap:0;
    padding:calc(16px + env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom));
    transform:translateX(-100%); transition:transform .24s cubic-bezier(.3,.8,.4,1);
    overflow-y:auto; box-shadow:0 0 40px -12px rgba(26,26,26,.4);
    visibility:hidden;
  }
  nav.abas.aberta{transform:none; visibility:visible}

  nav.abas::before{
    content:'Menu'; font-family:var(--display); font-size:10px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--cinza);
    padding:0 22px 14px; border-bottom:1px solid var(--linha); margin-bottom:8px;
  }

  /* Item igual ao .dnav button do CRM: pílula arredondada com ponto à
     esquerda, preenchida de vermelho quando ativa. */
  nav.abas button, nav.abas a{
    width:100%; min-height:52px; display:flex; align-items:center; gap:11px;
    margin:0 10px; width:calc(100% - 20px); padding:13px 12px;
    border-radius:11px; font-size:14.5px; text-align:left;
    justify-content:flex-start; color:var(--tinta);
  }
  nav.abas button::before, nav.abas a::before{
    content:''; width:8px; height:8px; border-radius:50%;
    background:var(--linha); flex:none;
  }
  nav.abas button[aria-selected=true]{background:var(--vermelho); color:var(--branco)}
  nav.abas button[aria-selected=true]::before{background:var(--branco)}
  /* Separa os atalhos externos das abas do painel. Usa o combinador de
     irmão em vez de :first-of-type porque na tela de cadastro a nav só
     tem links — ali a linha divisória não faria sentido. */
  nav.abas button + a{
    margin-top:10px; padding-top:16px; border-top:1px solid var(--linha);
  }
  nav.abas #sair{color:var(--vermelho-escuro); margin-top:auto}

  body.travado{overflow:hidden}

  /* O header cria contexto de empilhamento (sticky + z-index). A gaveta
     mora dentro dele, então o z-index dela não escapa: sem isto o véu
     cobre o próprio menu e nenhum toque passa. */
  body.travado header.topo{z-index:41}
}