:root {
  /* Paleta Solute (cores fixas da marca) */
  --preto: #000000;
  --preto-2: #0D0D0D;
  --laranja-solute: #F38C23;
  --branco: #FFFFFF;

  /* --- Cores por funcao: o tema claro troca so estas --- */
  --fundo: #000000;
  --superficie: #0D0D0D;
  --campo-fundo: #000000;
  --texto: #FFFFFF;
  --texto-2: rgba(255,255,255,.80);
  --texto-suave: rgba(255,255,255,.55);
  --texto-fraco: rgba(255,255,255,.38);

  /* Peliculas: tinta por cima da superficie, da mais leve a mais forte */
  --film-1: rgba(255,255,255,.04);
  --film-2: rgba(255,255,255,.06);
  --film-3: rgba(255,255,255,.11);
  --film-4: rgba(255,255,255,.16);
  --film-5: rgba(255,255,255,.30);

  --cinza-borda: rgba(255,255,255,.14);
  --borda-forte: rgba(255,255,255,.35);
  --barra: rgba(255,255,255,.22);
  --barra-forte: rgba(255,255,255,.38);

  --laranja-08: rgba(243,140,35,.08);
  --laranja-15: rgba(243,140,35,.15);
  --laranja-28: rgba(243,140,35,.28);
  --laranja-50: rgba(243,140,35,.50);
  --laranja-hover: #d9791a;
  --laranja-texto: #F38C23;   /* laranja legivel como texto */

  --vermelho: #ff5b5b;
  --vermelho-txt: #ff8b8b;
  --vermelho-12: rgba(255,91,91,.12);
  --vermelho-16: rgba(255,91,91,.16);
  --vermelho-35: rgba(255,91,91,.35);

  --sombra: 0 8px 30px rgba(0, 0, 0, .55);
  --veu: rgba(0, 0, 0, .6);

  /* Nomes antigos (laranja = destaque) */
  --azul: #F38C23;
  --azul-escuro: #F38C23;
  --verde: #F38C23;
  --laranja: #F38C23;
  --cinza-bg: var(--fundo);
}

/* ---------------------------------------------------------------
   TEMA CLARO
   O laranja da marca nao muda: mudam o fundo, a tinta e as
   peliculas, que passam de branco-sobre-preto a preto-sobre-branco.
   --------------------------------------------------------------- */
/* ---- Barra de rolagem -------------------------------------------------
   A barra padrao do Windows e larga e cinza-escura: dentro de um cartao
   claro, no meio de uma conversa, ela parece um defeito. Fina e discreta,
   mas nao escondida — numa conversa comprida ela e o unico sinal de que ha
   mais texto acima. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--barra) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--barra);
  border-radius: 999px;
  /* A borda transparente deixa a barra parecer mais fina do que a area que
     o dedo e o mouse ainda conseguem pegar. */
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--barra-forte); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

:root[data-tema="claro"] {
  --fundo: #F1F3F5;
  --superficie: #FFFFFF;
  --campo-fundo: #FFFFFF;
  --texto: #14171C;
  --texto-2: rgba(20,23,28,.82);
  --texto-suave: rgba(20,23,28,.60);
  --texto-fraco: rgba(20,23,28,.58);

  --film-1: rgba(20,23,28,.035);
  --film-2: rgba(20,23,28,.055);
  --film-3: rgba(20,23,28,.085);
  --film-4: rgba(20,23,28,.12);
  --film-5: rgba(20,23,28,.24);

  --cinza-borda: rgba(20,23,28,.13);
  --borda-forte: rgba(20,23,28,.30);
  --barra: rgba(20,23,28,.20);
  --barra-forte: rgba(20,23,28,.34);

  --laranja-08: rgba(243,140,35,.10);
  --laranja-15: rgba(243,140,35,.18);
  --laranja-28: rgba(243,140,35,.32);
  --laranja-50: rgba(243,140,35,.55);
  --laranja-texto: #9A5407;

  --vermelho: #c9302c;
  --vermelho-txt: #b02a26;
  --vermelho-12: rgba(201,48,44,.10);
  --vermelho-16: rgba(201,48,44,.14);
  --vermelho-35: rgba(201,48,44,.32);

  --sombra: 0 1px 2px rgba(20,23,28,.06), 0 8px 24px rgba(20,23,28,.08);
  --veu: rgba(20,23,28,.45);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--cinza-bg);
  color: var(--texto);
  min-height: 100vh;
  line-height: 1.5;
  color-scheme: dark;
}

/* ----- Cabecalho ----- */
.topo {
  background: var(--superficie);
  color: var(--texto);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--cinza-borda);
  box-shadow: var(--sombra);
}

/* Menu de navegação (centralizado: marca e usuario com peso igual nas laterais) */
.nav-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; flex: 0 1 auto; }
.nav-link {
  color: var(--texto-2); text-decoration: none; padding: 8px 16px;
  border-radius: 8px; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.nav-link:hover { background: var(--film-3); color: var(--texto); }
.nav-link.ativo { background: var(--laranja-solute); color: #fff; }
/* Contador de pendentes (Solicitações): sólido, visível no escuro e no laranja */
#badge-solic { background: #e5484d; color: #fff; font-weight: 700; }
.topo .marca { flex: 1; font-size: 18px; font-weight: 700; letter-spacing: .3px; display: flex; align-items: center; gap: 12px; }
.topo .marca .logo-texto span { opacity: .8; font-weight: 400; }
.marca-link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; cursor: pointer; }
.marca-link:hover { opacity: .85; }
.logo-nav { height: 46px; width: auto; display: block; }
.marca-secao { font-weight: 400; font-size: 15px; opacity: .85; padding-left: 12px; border-left: 1px solid var(--borda-forte); }
.topo .usuario { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 14px; font-size: 14px; }
.topo button {
  background: var(--film-4);
  border: 1px solid var(--borda-forte);
  color: var(--texto); padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.topo button:hover { background: var(--film-5); }

/* ----- Layout ----- */
.container { max-width: 920px; margin: 0 auto; padding: 28px 20px; }
.cartao {
  background: var(--superficie); border: 1px solid var(--cinza-borda);
  border-radius: 16px; box-shadow: var(--sombra); padding: 26px;
}
h1 { font-size: 22px; margin-bottom: 6px; }
h2 { font-size: 16px; margin-bottom: 14px; color: var(--texto-suave); font-weight: 600; }
.subtitulo { color: var(--texto-suave); font-size: 14px; margin-bottom: 22px; }
.subtitulo a { color: var(--laranja-texto); text-decoration: none; font-weight: 600; }
.subtitulo a:hover { text-decoration: underline; }

/* ----- Login ----- */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-box { width: 100%; max-width: 380px; }
.login-logo { text-align: center; margin-bottom: 20px; }
.login-logo .nome { font-size: 24px; font-weight: 800; color: var(--laranja-texto); }
.login-logo .sub { color: var(--texto-suave); font-size: 14px; }

label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
input, select, textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--cinza-borda);
  border-radius: 10px; font-size: 15px; background: var(--campo-fundo); color: var(--texto); font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--texto-fraco); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--laranja-texto); box-shadow: 0 0 0 3px var(--laranja-28); }

/* Alguns destes botoes sao links (<a class="btn">), e link vem sublinhado do
   navegador: sem isto o "Bater entrada" aparece com risco embaixo. */
.btn, .btn-ver { text-decoration: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px; margin-top: 18px; border: none; border-radius: 10px;
  background: var(--azul); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--laranja-hover); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-secundario { background: var(--film-3); color: var(--texto); }
.btn-secundario:hover { background: var(--film-4); }

/* ----- Relogio / ponto ----- */
.relogio { text-align: center; margin: 10px 0 24px; }
.relogio .hora { font-size: 54px; font-weight: 800; color: var(--laranja-texto); font-variant-numeric: tabular-nums; }
.relogio .data { color: var(--texto-suave); text-transform: capitalize; font-size: 15px; }

.btn-bater {
  width: 100%; padding: 22px; font-size: 20px; font-weight: 700;
  border: none; border-radius: 16px; color: #fff; cursor: pointer;
  background: var(--verde); box-shadow: var(--sombra); transition: transform .05s;
}
.btn-bater:active { transform: scale(.99); }
.btn-bater:disabled { background: var(--film-4); color: var(--texto-suave); cursor: not-allowed; }
.btn-bater small { display: block; font-size: 13px; font-weight: 500; opacity: .9; margin-top: 4px; }

/* ----- Linha do tempo das batidas ----- */
.timeline { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.batida {
  border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 14px;
  display: flex; align-items: center; gap: 12px; background: var(--film-1);
}
.batida .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: var(--laranja-15); }
.batida.ok { border-color: var(--laranja-50); background: var(--laranja-08); }
.batida.ok .ic { background: var(--laranja-28); }
.batida .rotulo { font-size: 13px; color: var(--texto-suave); }
.batida .valor { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.batida .valor.vazio { color: var(--texto-fraco); font-weight: 500; }
.btn-solicitar {
  margin-left: auto; align-self: center; padding: 6px 12px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--cinza-borda); background: var(--film-2); color: var(--laranja-texto);
  border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.btn-solicitar:hover { background: var(--laranja-15); }

/* ----- Tabelas ----- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--cinza-borda); vertical-align: middle; }
th { background: var(--film-1); color: var(--texto-suave); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
tbody tr:hover { background: var(--film-1); }
.tabela-wrap { overflow-x: auto; }

/* ----- Abas ----- */
.abas { display: flex; gap: 8px; margin-bottom: 20px; }
.aba { padding: 10px 18px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--texto); background: var(--film-2); border: 1px solid var(--cinza-borda); }
.aba.ativa { background: var(--laranja-solute); color: var(--texto); border-color: var(--laranja-texto); }

/* ----- Filtros ----- */
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 18px; }
.filtros .campo { flex: 1; min-width: 150px; }
.filtros label { margin-top: 0; }
.filtros .acoes { display: flex; gap: 8px; }
.filtros .btn { width: auto; margin-top: 0; padding: 11px 18px; }

/* ----- Diversos ----- */
.aviso { padding: 11px 14px; border-radius: 10px; font-size: 14px; margin-top: 14px; }
.aviso.erro { background: var(--vermelho-12); color: var(--vermelho-txt); border: 1px solid var(--vermelho-35); }
.aviso.sucesso { background: var(--laranja-15); color: var(--laranja-texto); border: 1px solid var(--laranja-28); }
.aviso.oculto, .oculto { display: none !important; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.ativo { background: var(--laranja-15); color: var(--laranja-texto); }
.badge.inativo { background: var(--vermelho-16); color: var(--vermelho-txt); }
.badge.admin { background: var(--film-3); color: var(--texto); }
.vazio-msg { text-align: center; color: var(--texto-suave); padding: 30px; }

/* ----- Resumo do periodo ----- */
.resumo { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.resumo-item {
  flex: 1; min-width: 120px; background: var(--film-1); border: 1px solid var(--cinza-borda);
  border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px;
}
.resumo-item span { font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .4px; }
.resumo-item b { font-size: 20px; font-variant-numeric: tabular-nums; }
.resumo-item .badge { align-self: flex-start; font-size: 16px; padding: 4px 12px; }
/* No lugar do numero, quando nao ha numero: o aviso nao pode ter o corpo de
   20px do valor, senao parece um numero gigante. */
.vazio-num { font-size: 13px; font-weight: 500; color: var(--texto-fraco); }
.linha-acoes { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }

/* ----- Foto da batida (relatório RH) ----- */
.hora-foto { color: var(--laranja-texto); text-decoration: none; font-weight: 600; white-space: nowrap; cursor: pointer; }
.hora-foto:hover { text-decoration: underline; }

.btn-mini {
  padding: 5px 11px; font-size: 12px; font-weight: 600; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--cinza-borda); background: var(--film-2); color: var(--texto); margin-right: 4px;
}
.btn-mini.aprovar { color: var(--laranja-texto); border-color: var(--laranja-50); }
.btn-mini.aprovar:hover { background: var(--laranja-solute); color: var(--texto); border-color: var(--laranja-texto); }
.btn-mini.recusar { color: var(--vermelho-txt); border-color: var(--vermelho-35); }
.btn-mini.recusar:hover { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
.foto-wrap { background: var(--campo-fundo); border-radius: 12px; overflow: hidden; min-height: 200px; display: flex; align-items: center; justify-content: center; }
.foto-wrap img { width: 100%; display: block; }

/* ----- Check-in de bem-estar ----- */
.humor-opcoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.humor-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 76px; padding: 14px 6px; border: 1px solid var(--cinza-borda); background: var(--film-2);
  border-radius: 14px; cursor: pointer; font-size: 30px; transition: transform .05s;
}
.humor-btn span { font-size: 12px; color: var(--texto-suave); font-weight: 600; }
.humor-btn:hover { border-color: var(--laranja-texto); background: var(--laranja-15); }
.humor-btn:active { transform: scale(.96); }

/* ----- Câmera ----- */
.camera-wrap {
  background: var(--campo-fundo); border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; min-height: 240px;
}
.camera-wrap video { width: 100%; max-height: 380px; object-fit: cover; transform: scaleX(-1); }

/* ----- Modal ----- */
.modal-fundo {
  position: fixed; inset: 0; background: var(--veu);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; z-index: 50; overflow-y: auto;
}
.modal {
  background: var(--superficie); border: 1px solid var(--cinza-borda); border-radius: 16px; box-shadow: var(--sombra);
  width: 100%; max-width: 620px; padding: 24px;
}
.modal-topo { display: flex; align-items: center; justify-content: space-between; }
.modal-topo h2 { margin: 0; color: var(--texto); font-size: 18px; }
.modal-x { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--texto-suave); }
.modal-x:hover { color: var(--texto); }

.btn-editar {
  padding: 5px 12px; border: 1px solid var(--cinza-borda); background: var(--film-2);
  border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--laranja-texto); font-weight: 600;
}
.btn-editar:hover { background: var(--laranja-15); }
.marca-ajuste { color: var(--laranja-texto); font-weight: 700; cursor: help; }

/* Relatório RH: nome em 1 linha + coluna de bem-estar (humor) */
.col-colab { font-weight: 600; white-space: nowrap; }

/* A sobra de largura da tabela vai para o nome, e não para a Situação. Antes
   a Situação ficava com 340px para etiquetas de 180px, e sobrava um vão entre
   elas e o lápis, que parecia solto no canto. A coluna de ação fica estreita
   e com o botão centralizado. */
#aba-relatorio thead th:first-child { width: 100%; }
/* A coluna de uma tabela é tão larga quanto a maior célula dela, então numa
   linha com aviso curto sobrava um vão entre a etiqueta e o lápis. Alinhando
   a Situação à direita, a etiqueta encosta no lápis em toda linha. O piso
   evita que o texto do aviso quebre palavra a palavra. */
#aba-relatorio thead th:nth-last-child(2) { min-width: 170px; text-align: right; }
/* Etiqueta e "+N" lado a lado, encostados na direita. Empilhados, cada linha
   da tabela ficava com 88px de altura e o lapis boiando no meio de tanto
   espaco vazio. */
#aba-relatorio td .alertas-dia {
  flex-flow: row wrap; justify-content: flex-end; align-items: center; min-width: 0;
}
#aba-relatorio tbody td:nth-last-child(2) { text-align: right; }
#aba-relatorio th.col-acao, #aba-relatorio td.col-acao { width: 1%; text-align: center; white-space: nowrap; }
/* O botão é `display: grid`, portanto um bloco, e bloco não obedece a
   `text-align`. Sem estas margens ele encostava na borda esquerda da célula
   e ficava fora do eixo do cabeçalho "Ações". */
#aba-relatorio td.col-acao > button { margin-left: auto; margin-right: auto; }
.col-humor { text-align: center; font-size: 18px; cursor: help; }
/* Etiquetas de alerta na coluna Situação: retangulares (menos arredondadas) */
.badge.alerta { border-radius: 7px; white-space: normal; line-height: 1.45; padding: 5px 10px; }
/* Varios avisos no mesmo dia empilham com folga, em vez de grudar.
   A largura minima evita que o texto quebre palavra por palavra: o relatorio
   tem 12 colunas e, com a barra lateral ocupando 240px, a coluna de situacao
   era espremida a ponto de cortar as palavras. Faltando espaco, quem rola na
   horizontal e a caixa da tabela (.tabela-wrap). */
.alertas-dia { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 132px; }
.ok-dia { color: var(--texto-suave); font-weight: 600; }
/* Dia da semana pequeno embaixo da data */
.dia-semana { font-size: 11px; color: var(--texto-suave); margin-top: -2px; line-height: 1.2; }
.folga-tag { color: var(--laranja-texto); font-weight: 600; }
/* Motivo das solicitações: largura limitada e quebra de palavras longas */
.motivo-txt { max-width: 320px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.45; }
.badge-mais {
  display: inline-block; background: var(--laranja-15); color: var(--laranja-texto);
  border: none; border-radius: 999px; padding: 1px 7px; font-weight: 700; font-size: 9px;
  letter-spacing: 1px; cursor: pointer; vertical-align: middle; line-height: 1.7;
}
.badge-mais:hover { background: var(--laranja-solute); color: var(--texto); }
.motivo-full { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; color: var(--texto); }

.btn-excluir {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--vermelho-35); background: var(--vermelho-16); color: var(--vermelho-txt);
  font-size: 14px; font-weight: 700; line-height: 1; display: grid; place-items: center;
}
.btn-excluir:hover { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
/* Dentro dos botões de ação o ícone é maior e centrado pelo grid do botão. */
.btn-excluir .ico-mini, .btn-config .ico-mini { width: 15px; height: 15px; vertical-align: 0; }

.btn-config {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--cinza-borda); background: var(--film-2); color: var(--texto);
  font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.btn-config:hover { background: var(--laranja-15); }

.campo-senha { position: relative; display: flex; align-items: center; }
.campo-senha input { padding-right: 44px; }
.campo-senha .olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 18px; padding: 4px;
}

@media (max-width: 560px) {
  .timeline { grid-template-columns: 1fr; }
  .relogio .hora { font-size: 44px; }
}

/* ============================================================
   BARRA LATERAL
   Mesmo formato do Solute Recruta e do Sistema de Gestao (240px,
   logo em cima, itens com icone, pessoa e saida embaixo), porem
   na paleta preta do Solute Ponto.
   ============================================================ */
/* align-items: flex-start e essencial: com o padrao (stretch) a barra estica
   junto com a tabela do relatorio e o rodape dela vai parar a 26 mil pixels
   de altura. Com flex-start ela fica presa na altura da tela e acompanha a
   rolagem. */
.layout { display: flex; min-height: 100vh; align-items: flex-start; }
.conteudo { flex: 1; min-width: 0; }

.barra {
  width: 240px; flex: none; display: flex; flex-direction: column;
  background: var(--superficie); border-right: 1px solid var(--cinza-borda);
  padding: 22px 14px 18px; gap: 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.barra-marca { padding: 0 8px; }
.barra-marca a { display: block; }
.barra-logo { width: 100%; max-width: 148px; height: auto; display: block; }

.barra-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 22px; flex: 1; }
.barra-grupo {
  font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--texto-fraco); margin: 0 0 6px; padding-left: 10px;
}
.barra-nav .barra-grupo + .barra-item { margin-top: 0; }
.barra-nav .barra-item + .barra-grupo { margin-top: 20px; }

.barra-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--texto-2);
  text-decoration: none; transition: background .12s, color .12s;
}
.barra-item:hover { background: var(--film-2); color: var(--texto); }
.barra-item.ativo { background: var(--laranja-15); color: var(--laranja-texto); }
.barra-item:focus-visible { outline: 2px solid var(--laranja-solute); outline-offset: 2px; }
.barra-ico { width: 17px; height: 17px; flex: none; }
.barra-badge { margin-left: auto; }

.barra-rodape { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cinza-borda); }
.barra-pessoa { display: flex; align-items: center; gap: 10px; padding: 0 4px 12px; }
.barra-avatar, .barra-foto {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
}
.barra-avatar {
  background: var(--laranja-15); color: var(--laranja-texto);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.barra-foto { object-fit: cover; display: block; }
.barra-pessoa-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.barra-nome { font-size: 13.5px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-papel { font-size: 11.5px; color: var(--texto-suave); }

.barra-sair {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 8px; border: none; cursor: pointer;
  background: none; color: var(--texto-2);
  font-family: inherit; font-size: 14px; font-weight: 500; text-align: left;
  transition: background .12s, color .12s;
}
.barra-sair:hover { background: var(--vermelho-16); color: var(--vermelho-txt); }
.barra .rodape-versao { margin: 10px 0 0; padding-left: 10px; font-size: 11px; color: var(--texto-fraco); text-align: left; }

/* ============================================================
   TELA INICIAL DO COLABORADOR
   ============================================================ */
.inicio-hoje { margin-top: 18px; }
.inicio-hoje-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.inicio-batidas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.inicio-batida {
  border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 12px 14px;
  background: var(--film-1); display: flex; flex-direction: column; gap: 2px;
}
.inicio-batida.ok { border-color: var(--laranja-50); background: var(--laranja-08); }
.inicio-batida .rot { font-size: 11.5px; color: var(--texto-suave); }
.inicio-batida .val { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.inicio-batida:not(.ok) .val { color: var(--texto-fraco); font-weight: 500; }

/* Dois numeros: saldo do dia e saldo do mes. Em colunas iguais, sem numero
   fixo, para nao sobrar buraco se um dia entrar ou sair um cartao. */
.inicio-numeros { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; margin-top: 16px; }
/* Sem barra colorida na lateral: o numero ja e grande e ja e colorido, e a
   barra repetia a mesma informacao com peso de titulo. */
.inicio-num {
  background: var(--superficie); border: 1px solid var(--cinza-borda);
  border-radius: 14px; padding: 16px 18px;
}
.inicio-num b { display: block; font-size: 27px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.inicio-num small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--texto-suave); }
.inicio-num.positivo b { color: var(--laranja-texto); }
.inicio-num.negativo b { color: var(--vermelho-txt); }

.inicio-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
/* Cada coluna empilha os proprios cartoes. Repartir os cartoes entre as duas
   evita o vao que sobrava embaixo da coluna mais curta. */
.inicio-coluna { display: flex; flex-direction: column; gap: 16px; }
/* Sem o cartao da equipe (colaborador comum) sobraria metade da tela vazia. */
.inicio-colunas.uma-coluna { grid-template-columns: 1fr; }

/* Lista, nao cartao. A tarja colorida na lateral esquerda saiu: ela dava peso
   de titulo a uma informacao de rodape, e repetia o que o texto ja dizia. No
   lugar dela, um ponto pequeno antes do texto e um fio separando as linhas,
   do mesmo jeito que .inicio-dia logo abaixo. */
.inicio-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 2px; margin: 0;
  border: 0; border-bottom: 1px solid var(--cinza-borda);
  text-decoration: none; color: inherit; transition: background .12s;
}
/* Um icone por tipo de aviso, no lugar da bolinha: a bolinha era um ponto de
   cor sem significado proprio, e dizia menos do que ocupava. */
.inicio-item-ico {
  flex: 0 0 auto; width: 18px; height: 18px; color: var(--texto-fraco);
}
.inicio-item.alerta .inicio-item-ico { color: var(--vermelho); }
.inicio-item.novo .inicio-item-ico { color: var(--laranja-solute); }
.inicio-item:hover { background: var(--film-2); }
.inicio-item:last-child { border-bottom: none; }
.inicio-item.novo .inicio-item-titulo { font-weight: 700; }
.inicio-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inicio-item-titulo { font-size: 14px; font-weight: 600; }
.inicio-item-sub { font-size: 12.5px; color: var(--texto-suave); }
.inicio-item-seta { font-size: 22px; color: var(--texto-fraco); line-height: 1; }

.inicio-dia {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid var(--cinza-borda);
}
.inicio-dia:last-of-type { border-bottom: none; }
.inicio-dia-data { font-size: 14px; font-weight: 600; display: flex; flex-direction: column; }
.inicio-dia-data small { font-size: 11.5px; font-weight: 400; color: var(--texto-suave); }
.inicio-dia-val { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.inicio-dia-val.positivo { color: var(--laranja-texto); }
.inicio-dia-val.negativo { color: var(--vermelho-txt); }
.inicio-dia-val.aberto { color: var(--texto-fraco); font-weight: 500; }

@media (max-width: 860px) {
  .inicio-colunas { grid-template-columns: 1fr; }
  .inicio-numeros { grid-auto-flow: row; }
  .inicio-batidas { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Filtros dentro de uma aba (Empresa) ----- */
.sub-abas {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
  border-bottom: 1px solid var(--cinza-borda); padding-bottom: 10px;
}
.sub-aba {
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: 8px; white-space: nowrap;
  border: 1px solid transparent; background: none; color: var(--texto-suave);
  transition: background .12s, color .12s;
}
.sub-aba:hover { background: var(--film-2); color: var(--texto); }
.sub-aba.ativa { background: var(--laranja-15); color: var(--laranja-texto); }
.sub-aba:focus-visible { outline: 2px solid var(--laranja-solute); outline-offset: 2px; }
/* A primeira coisa de cada secao nao precisa de margem no topo. */
.sub-painel > h2:first-child { margin-top: 0; }

/* ----- Relatorio de ponto -----
   Sao 11 colunas disputando o espaco que sobra da barra lateral. O objetivo e
   caber sem rolagem horizontal, entao aqui a tabela respira menos: padding
   menor, humor junto do nome e a acao em icone. */
.tabela-compacta { font-size: 13px; }
.tabela-compacta th, .tabela-compacta td { padding: 10px 8px; }
.tabela-compacta th { font-size: 11px; }
/* O cartao do relatorio cede margem para a tabela caber. */
#aba-relatorio > .cartao { padding: 22px 16px; }
/* Nome e humor sao conteudo em linha: nao dar display:flex na celula, senao
   ela sai do calculo da tabela e desalinha a linha inteira. */
.col-colab .colab-nome { font-weight: 600; }
.col-colab .humor-emoji { font-size: 15px; line-height: 1; margin-left: 5px; }

/* Abaixo de 1340px a tabela de 11 colunas nao cabe. O numero nao e chute: a
   tabela nao comprime abaixo de ~1030px e o espaco util e (largura - 312),
   descontando barra lateral, container e cartao. Em vez de obrigar a rolar de
   lado, cada dia vira um cartao com os campos empilhados e o nome da coluna ao
   lado do valor. Vale tambem para tablet e celular, onde a tabela era inusavel. */
@media (max-width: 1340px) {
  .tabela-compacta thead { display: none; }
  .tabela-compacta, .tabela-compacta tbody, .tabela-compacta tr, .tabela-compacta td { display: block; width: 100%; }
  .tabela-compacta tr {
    border: 1px solid var(--cinza-borda); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px; background: var(--film-1);
  }
  .tabela-compacta tr:hover { background: var(--film-2); }
  .tabela-compacta td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    border: none; padding: 5px 0; text-align: right;
  }
  .tabela-compacta td::before {
    content: attr(data-rotulo); flex: none; text-align: left;
    font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
    color: var(--texto-suave);
  }
  /* Nome e data formam o topo do cartao, sem rotulo. */
  .tabela-compacta tr { position: relative; padding-right: 54px; }
  .tabela-compacta td[data-cabecalho] {
    display: inline-flex; width: auto; padding: 0; text-align: left;
  }
  .tabela-compacta td[data-cabecalho]::before { content: none; }
  .tabela-compacta td.col-colab { font-size: 15px; margin-bottom: 2px; }
  .tabela-compacta td.col-data { margin: 0 0 10px 10px; color: var(--texto-suave); }

  /* O lapis fica ancorado no canto do cartao, nao empurrado por margem
     negativa (empurrado, ele caia por cima dos avisos de situacao). */
  .tabela-compacta td.col-acao {
    position: absolute; top: 12px; right: 12px; width: auto; padding: 0;
  }
  .tabela-compacta td.col-acao::before { content: none; }

  /* Campo sem valor nao vira linha: o dia que so tem entrada nao precisa
     listar "SAIDA", "TRABALHADO" e "SALDO" em branco. */
  .tabela-compacta td:empty { display: none; }

  .tabela-compacta td .alertas-dia { align-items: flex-end; min-width: 0; }
  /* Linha de "nenhum registro" continua ocupando o cartao inteiro. */
  .tabela-compacta td.vazio-msg { display: block; text-align: center; }
  .tabela-compacta td.vazio-msg::before { content: none; }
}

/* A dica embaixo do campo de entrada: quem nao sabe o e-mail precisa
   descobrir ali mesmo que o CPF serve. */
/* Respira embaixo do campo. A margem do topo era negativa e colava a frase
   dentro da caixa de digitar; o campo nao tem margem embaixo, entao nao havia
   nada para o negativo compensar. */
.login-dica {
  display: block; margin: 8px 0 2px; font-size: 12px;
  color: var(--texto-fraco); line-height: 1.45;
}

/* ----- Tela "Meu perfil" ----- */
/* Duas colunas no computador, uma no celular. Cada coluna empilha os proprios
   cartoes: repartir os cartoes entre as duas deixava um buraco embaixo do mais
   curto, porque a grade preenche linha a linha. */
.perfil-grade { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 18px; }
.perfil-coluna { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 860px) { .perfil-grade { grid-template-columns: 1fr 1fr; align-items: start; } }

.perfil-topo { display: flex; align-items: center; gap: 16px; }
.perfil-avatar-botao {
  position: relative; width: 72px; height: 72px; flex: none; padding: 0;
  border: none; background: none; border-radius: 50%; cursor: pointer;
}
.perfil-avatar, .perfil-foto {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
}
.perfil-avatar { background: var(--laranja-15); color: var(--laranja-texto); font-size: 23px; font-weight: 700; }
.perfil-foto { object-fit: cover; display: block; }
.perfil-avatar-lapis {
  position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--laranja-solute); color: #fff;
  display: grid; place-items: center; border: 2px solid var(--superficie);
}
.perfil-avatar-lapis svg { width: 13px; height: 13px; }
.perfil-avatar-botao:hover .perfil-avatar-lapis { background: var(--laranja-hover); }
.perfil-avatar-botao:focus-visible { outline: 2px solid var(--laranja-solute); outline-offset: 3px; }
.perfil-acoes { display: flex; gap: 8px; margin-top: 8px; }

/* Recorte da foto */
.recorte-palco {
  width: 256px; max-width: 100%; margin: 0 auto; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--cinza-borda); background: var(--film-1);
}
.recorte-tela { display: block; width: 100%; height: auto; cursor: grab; touch-action: none; }
.recorte-tela:active { cursor: grabbing; }
/* O item "Meu perfil" e um link, mas usa o visual dos botoes do rodape. */
a.barra-sair { text-decoration: none; }
a.barra-sair:hover { background: var(--film-2); color: var(--texto); }
a.barra-sair.ativo { background: var(--laranja-15); color: var(--laranja-texto); }
.falta { color: var(--vermelho-txt); font-weight: 600; }
.fraco { color: var(--texto-fraco); }

/* ----- Sino de notificacoes ----- */
.sino { position: relative; }
.sino-btn {
  position: relative; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid transparent; background: none; color: var(--texto-2);
  cursor: pointer; padding: 0; transition: background .12s, color .12s;
}
.sino-btn:hover { background: var(--film-2); color: var(--texto); }
.sino-btn:focus-visible { outline: 2px solid var(--laranja-solute); outline-offset: 2px; }
.sino-ico { width: 19px; height: 19px; }
.sino-contador {
  position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: #e5484d; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  border: 2px solid var(--superficie);
}

.sino-caixa {
  position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-width: calc(100vw - 28px);
  background: var(--superficie); border: 1px solid var(--cinza-borda);
  border-radius: 12px; box-shadow: var(--sombra); z-index: 60; overflow: hidden;
}
.sino-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--cinza-borda); font-size: 14px;
}
.sino-limpar {
  border: none; background: none; cursor: pointer; padding: 2px 4px;
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--texto-fraco);
}
.sino-limpar:hover { color: var(--vermelho-txt); }
.sino-lista { max-height: 60vh; overflow-y: auto; }
.sino-vazio { padding: 26px 16px; text-align: center; color: var(--texto-suave); font-size: 13.5px; }

.sino-item {
  position: relative; display: flex; align-items: stretch;
  border-bottom: 1px solid var(--cinza-borda);
}
.sino-item:last-child { border-bottom: none; }
.sino-item.nova { background: var(--laranja-08); }
.sino-item.saindo { opacity: .45; pointer-events: none; }
/* O espaço à direita (pr) é o lugar do X, que fica por cima. */
.sino-link {
  flex: 1; min-width: 0; display: flex; gap: 10px;
  padding: 12px 36px 12px 16px; text-decoration: none; color: inherit;
}
a.sino-link:hover { background: var(--film-2); }
.sino-item.nova a.sino-link:hover { background: var(--laranja-15); }

/* X no canto, sempre visível, como no Sistema de Gestão. */
.sino-x {
  position: absolute; right: 8px; top: 9px;
  display: grid; place-items: center; width: 24px; height: 24px;
  border: none; border-radius: 6px; background: none; color: var(--texto-fraco);
  cursor: pointer; padding: 0; transition: background .12s, color .12s;
}
.sino-x:hover { background: var(--film-2); color: var(--vermelho-txt); }
.sino-x:focus-visible { outline: 2px solid var(--laranja-solute); outline-offset: 1px; }
.sino-x-ico { width: 14px; height: 14px; }
.sino-ic {
  width: 38px; height: 38px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: var(--laranja-15); color: var(--laranja-texto);
}
.sino-ic .sino-ico { width: 18px; height: 18px; }
/* Quando o aviso tem uma pessoa por tras, o quadrado vira o rosto dela. */
.sino-pessoa {
  border-radius: 50%; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  background-size: cover; background-position: center;
}
.sino-pessoa.com-foto { background-color: transparent; }
.sino-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sino-titulo { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
/* Duas linhas no máximo: mantém a lista compacta como a do Sistema de Gestão,
   sem esconder o motivo do pedido, que é o que o RH precisa ler. */
.sino-corpo {
  font-size: 12.5px; color: var(--texto-suave); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sino-quando { font-size: 11px; color: var(--texto-fraco); margin-top: 2px; }

/* Cartao dentro de outro cartao (formularios de "Novo ..."): precisa se
   destacar do cartao que o contem, nos dois temas. */
.cartao-interno { background: var(--film-1); margin-bottom: 18px; }

/* A marca tem duas versoes: branca para o tema escuro, original (preto +
   laranja) para o claro. Sem isso a logo branca some no fundo claro. */
.so-claro { display: none; }
:root[data-tema="claro"] .so-escuro { display: none; }
:root[data-tema="claro"] .so-claro { display: block; }

/* Barra fina no topo do conteudo, como no Recruta e no Sistema de Gestao:
   o sino fica sempre; o botao do menu e a logo aparecem so no celular. */
.topo-app {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 20px; min-height: 52px;
  background: var(--superficie); border-bottom: 1px solid var(--cinza-borda);
  position: sticky; top: 0; z-index: 40;
}
/* A logo do topo e so do celular. O :root na frente e proposital: sem ele
   esta regra perde em especificidade para a troca de logo por tema (linhas
   acima) e a marca aparecia duas vezes no computador. */
:root .topo-app #btn-menu,
:root .topo-app .logo-movel,
:root[data-tema="claro"] .topo-app .logo-movel { display: none; }
.topo-app .sino { margin-left: auto; }
#barra-sombra { display: none; }

@media (max-width: 900px) {
  .topo-app { padding: 9px 14px; }
  .topo-app .logo-movel.so-escuro, .topo-app .logo-movel.so-claro { height: 30px; width: auto; }
  :root:not([data-tema="claro"]) .topo-app .logo-movel.so-escuro { display: block; }
  :root[data-tema="claro"] .topo-app .logo-movel.so-claro { display: block; }
  /* O `:root` precisa vir aqui também. Sem ele esta regra perde para a que
     esconde o botão no computador (que usa `:root` de propósito), e o
     hambúrguer ficava invisível no celular: não havia como abrir o menu. */
  :root .topo-app #btn-menu {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    border-radius: 9px; border: 1px solid var(--cinza-borda);
    background: var(--film-2); color: var(--texto); cursor: pointer; padding: 0;
  }
  #btn-menu .barra-ico { width: 19px; height: 19px; }

  .layout { display: block; }
  .barra {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: 264px; height: 100%;
    transform: translateX(-100%); transition: transform .22s ease;
    overflow-y: auto; box-shadow: var(--sombra);
  }
  .barra.aberta { transform: translateX(0); }
  #barra-sombra { display: block; position: fixed; inset: 0; z-index: 50; background: var(--veu); }
  #barra-sombra.oculto { display: none; }
}

/* ----- Toque (celular e tablet) -----
   Regras que valem só onde não há mouse. No computador o alvo pequeno não
   incomoda, porque o ponteiro é preciso; no dedo, sim. */
@media (hover: none) {
  /* O iOS dá zoom sozinho quando o campo tem fonte menor que 16px, e depois
     não volta. Aumentar a fonte é o único jeito de evitar. */
  input, select, textarea { font-size: 16px; }

  /* Alvos pequenos ganham área de toque sem mudar o desenho: a área invisível
     cresce em volta, o botão continua do mesmo tamanho na tela. O alvo de 44px
     é o mínimo recomendado pela Apple e pelo WCAG 2.2. */
  .tem-local, .sem-local, .marca-ajuste { position: relative; display: inline-block; }
  .tem-local::after, .sem-local::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  /* Estes dois ficam empilhados a poucos pixels um do outro nos cartões do
     relatório: área invisível não resolve, porque a de um cobriria a do
     vizinho. Eles crescem de verdade e afastam as linhas. */
  .hora-foto { display: inline-block; padding: 10px 6px; margin: -10px -6px; }
  .badge-mais { padding: 8px 12px; }
  /* Estes têm tamanho próprio, então crescem de verdade. */
  /* Nos cartões do relatório as linhas ficam a poucos pixels uma da outra, e
     alvos vizinhos acabam se cobrindo: tocar num horário abriria a foto do
     outro. Um respiro por linha resolve. */
  .tabela-compacta td { padding-top: 8px; padding-bottom: 8px; }

  .btn-ver, .btn-mini, .btn-solicitar { min-height: 40px; padding-block: 9px; }
  .badge-mais { min-height: 40px; }
  .btn-config, .btn-excluir { width: 40px; height: 40px; }
  .humor-btn { min-height: 56px; }
  .sub-aba, .aba { min-height: 40px; }
  .eq-check input, .eq-perm input { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) { .barra { transition: none; } }

@media print { .barra, .topo-app, #barra-sombra { display: none !important; } }

/* ============================================================
   TELA DE LOGIN (dividida) — esquerda preta + direita foto
   ============================================================ */
.login-body { font-family: 'Montserrat', system-ui, -apple-system, sans-serif; background: var(--campo-fundo); }
.login-split { display: flex; min-height: 100vh; }

/* ----- Lado esquerdo (login) ----- */
.login-esq {
  flex: 1; background: var(--campo-fundo); color: var(--texto);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 32px 130px; position: relative;
}
.login-form-box {
  width: 100%; max-width: 400px;
}
.login-ic { width: 80px; height: auto; display: block; margin: 0 auto 10px; }
.login-h1 { font-size: 54px; font-weight: 700; text-align: center; margin-bottom: 24px; letter-spacing: .5px; }
.login-esq label { display: block; font-size: 20px; font-weight: 500; margin: 16px 0 8px; color: var(--texto); }
.login-esq input {
  width: 100%; padding: 13px 16px; font-size: 16px; font-family: inherit;
  background: transparent; border: 2px solid var(--superficie); border-radius: 14px; color: var(--texto);
}
.login-esq input:focus {
  outline: none; border-color: var(--laranja-solute);
  box-shadow: 0 0 0 3px var(--laranja-28);
}
.login-btn {
  width: 100%; margin-top: 26px; padding: 14px; font-size: 17px; font-weight: 700; font-family: inherit;
  background: var(--laranja-solute); color: var(--texto); border: none; border-radius: 14px; cursor: pointer;
}
.login-btn:hover { background: var(--laranja-hover); }
.login-btn:disabled { opacity: .7; cursor: not-allowed; }
.login-esqueci {
  display: block; text-align: center; margin-top: 18px;
  color: var(--texto); opacity: .75; font-size: 14px; text-decoration: none; cursor: pointer;
}
.login-esqueci:hover { opacity: 1; color: var(--laranja-solute); text-decoration: underline; }
.login-rodape { position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; padding: 0 20px; }
.login-rodape-1 { font-size: 16px; font-weight: 600; }
.login-rodape-2 {
  font-size: 12px; opacity: .8; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
/* A assinatura de quem fez: a logo da Solute RH no lugar do nome escrito. */
.login-rodape-2 .marca-solute { height: 22px; width: auto; display: block; }

/* ----- Lado direito (foto + card de vidro fosco) ----- */
.login-dir {
  flex: 1; position: relative; overflow: hidden;
  background: var(--campo-fundo);
  display: flex; align-items: center; justify-content: center;
  padding: 48px;
}
.login-dir-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.login-dir::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--veu);
}
.login-dir-card {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  max-width: 560px; padding: 56px 50px; color: var(--texto);
  background: var(--veu);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(3px);
  border-radius: 30px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
}
.login-dir-logo { width: 300px; max-width: 78%; display: block; margin-bottom: 38px; }
.login-slogan {
  font-size: 46px; font-weight: 800; line-height: 1.15; letter-spacing: -0.5px;
  margin-bottom: 26px; color: var(--texto);
}
.login-slogan .laranja { color: var(--laranja-solute); }
.login-desc { font-size: 16px; line-height: 1.65; max-width: 430px; margin: 0 auto; opacity: .9; }

@media (max-width: 880px) {
  .login-dir { display: none; }
  .login-esq { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .login-form-box { padding: 26px 22px 30px; border-radius: 22px; }
  .login-h1 { font-size: 44px; }
}

/* Resumo da solicitação dentro do modal de aprovar/recusar */
.solic-resumo {
  background: var(--film-1); border: 1px solid var(--cinza-borda);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; font-size: 13px;
}
.solic-resumo .linha { display: flex; gap: 10px; margin-bottom: 7px; }
.solic-resumo .linha:last-child { margin-bottom: 0; }
.solic-resumo .rot { color: var(--texto-suave); flex: none; min-width: 92px; }
.solic-resumo .val { color: var(--texto); word-break: break-word; }
.solic-resumo .seta { color: var(--laranja-solute); font-weight: 700; }
.solic-resumo .risco { color: var(--texto-suave); text-decoration: line-through; }

/* Status clicável na tabela de solicitações (abre os detalhes da resposta) */
button.badge-clicavel {
  border: none; font-family: inherit; cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}
button.badge-clicavel:hover { filter: brightness(1.35); }
button.badge-clicavel:active { transform: scale(.97); }
button.badge-clicavel:focus-visible { outline: 2px solid var(--laranja-solute); outline-offset: 2px; }
button.badge-clicavel .seta-det { opacity: .7; margin-left: 2px; }

/* Título de bloco dentro de um modal */
.modal-secao {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--texto-suave);
}

/* Ícones vetoriais no lugar dos emojis — seguem a cor da marca */
.batida .ic { color: var(--laranja-50); }
.batida .ic svg { width: 20px; height: 20px; display: block; }
.batida.ok .ic { color: var(--laranja-solute); }
.ico-mini { width: 14px; height: 14px; vertical-align: -2px; display: inline-block; }

/* Botão "Visualizar motivo" nas tabelas de solicitações */
.btn-ver {
  padding: 5px 11px; font-size: 12px; font-weight: 600; font-family: inherit;
  border: 1px solid var(--cinza-borda); background: var(--film-2);
  color: var(--laranja-solute); border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.btn-ver:hover { background: var(--laranja-15); border-color: var(--laranja-50); }
.btn-ver:active { transform: scale(.98); }
.btn-ver:focus-visible { outline: 2px solid var(--laranja-solute); outline-offset: 2px; }

/* Texto do motivo dentro do pop-up */
.modal .motivo-full { margin: 0; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

/* Galeria de anexos de uma solicitação */
.anexos-lista { display: grid; gap: 14px; margin-top: 14px; max-height: 68vh; overflow-y: auto; }
.anexos-lista .anexo-num {
  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--texto-suave);
}

/* Observação pequena dentro de um cartão do resumo */
.resumo-item .resumo-nota {
  font-size: 11px; color: var(--texto-suave); text-transform: none; letter-spacing: 0; line-height: 1.4;
}

/* Marcações além das quatro da rotina, na tela de bater ponto */
.extras {
  margin-top: 14px; background: var(--film-1);
  border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 14px 16px;
}
.extras-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave);
  padding-bottom: 10px; border-bottom: 1px solid var(--cinza-borda);
}
.extras-topo b { font-size: 16px; color: var(--laranja-solute); font-variant-numeric: tabular-nums; }
.extra-linha { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borda-forte); }
.extra-linha:last-of-type { border-bottom: none; }
.extra-num { font-size: 12px; color: var(--texto-suave); min-width: 28px; }
.extra-hora { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.extras-nota { margin: 10px 0 0; font-size: 12px; color: var(--texto-suave); line-height: 1.5; }

/* Marcações adicionais dentro do modal de ajuste do RH */
.adicional-linha {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  background: var(--film-1); border: 1px solid var(--cinza-borda);
  border-radius: 8px; margin-bottom: 8px;
}
.adicional-linha:last-child { margin-bottom: 0; }
.adicional-num { font-size: 12px; color: var(--texto-suave); }
.adicional-hora { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; margin-right: auto; }

/* Aviso da batida com link para o comprovante */
.aviso-comprovante { margin-top: 6px; font-size: 13px; font-weight: 500; }
.aviso-comprovante a { color: inherit; font-weight: 700; text-decoration: underline; margin-left: 6px; }
.aviso-comprovante a:hover { opacity: .8; }

/* Versão do programa no rodapé das telas do trabalhador */
.rodape-versao {
  text-align: center; font-size: 11.5px; color: var(--texto-suave);
  margin: 28px 0 18px; letter-spacing: .02em;
}

/* ----- Aba Equipe -----
   Cargos, setores e o acesso de cada pessoa. Os nomes comecam com `eq-` para
   nao esbarrar no resto do painel. */
.eq-painel > h2:first-child { margin-top: 0; }

/* O check de "mostrar desativados" alinha com os campos do lado, que tem
   rotulo em cima; por isso o espaco reservado embaixo. */
.eq-campo-check { justify-content: flex-end; padding-bottom: 9px; }
.eq-campo-btn { justify-content: flex-end; padding-bottom: 1px; }

.eq-check {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--texto-2); font-weight: 500;
}
.eq-check input { width: 16px; height: 16px; accent-color: var(--laranja-solute); cursor: pointer; }

.eq-nome { font-weight: 600; color: var(--texto); }
.eq-sub { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.eq-vazio { color: var(--texto-fraco); font-size: 12.5px; }
.eq-inativa { opacity: .55; }

.eq-chip {
  display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--film-2); color: var(--texto-2); border: 1px solid var(--cinza-borda);
}
.eq-chip.forte { background: var(--laranja-15); color: var(--laranja-texto); border-color: var(--laranja-28); }

.eq-acesso { font-size: 12.5px; font-weight: 600; color: var(--texto-suave); }
.eq-acesso.admin { color: var(--laranja-texto); }
.eq-acesso.gestor { color: var(--texto); }
.eq-acesso.parcial { color: var(--texto-2); }

/* Lista de cargos e setores: uma linha por item, editavel no lugar. */
.eq-lista { margin-top: 6px; }
.eq-linha {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--film-2);
}
.eq-linha:last-child { border-bottom: none; }
.eq-linha .eq-edit {
  flex: 1; min-width: 0; margin: 0;
  background: var(--campo-fundo); color: var(--texto);
  border: 1px solid var(--cinza-borda); border-radius: 8px;
  padding: 8px 10px; font-family: inherit; font-size: 14px;
}
.eq-linha .eq-edit:focus { outline: none; border-color: var(--laranja-50); }
.eq-conta { font-size: 12px; color: var(--texto-suave); white-space: nowrap; }

/* Ficha de acesso */
.eq-bloco { margin-top: 20px; }
.eq-bloco h3 { margin: 0 0 2px; font-size: 14px; color: var(--texto); }
.eq-bloco-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--texto-suave); line-height: 1.5; }
.eq-caixas { display: flex; flex-wrap: wrap; gap: 8px 20px; }

.eq-grupo { margin-bottom: 14px; }
.eq-grupo h4 {
  margin: 0 0 8px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-fraco); font-weight: 700;
}
.eq-perm {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 9px 10px; border-radius: 10px; border: 1px solid transparent;
  margin-bottom: 4px;
}
.eq-perm:hover { background: var(--film-1); }
.eq-perm input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--laranja-solute); cursor: pointer; }
.eq-perm b { display: block; font-size: 13.5px; color: var(--texto); font-weight: 600; }
.eq-perm small { display: block; font-size: 12px; color: var(--texto-suave); line-height: 1.5; margin-top: 2px; }
.eq-perm input:disabled, .eq-check input:disabled { cursor: not-allowed; opacity: .5; }

/* No celular as caixas em linha nao cabem lado a lado. */
@media (max-width: 760px) {
  .eq-caixas { flex-direction: column; gap: 6px; }
  .eq-linha { flex-wrap: wrap; }
}

/* Acoes da linha da Equipe: cadastro, acesso, ativar/desativar e excluir. */
.eq-acoes { display: flex; gap: 6px; align-items: center; }
.eq-toggle { padding: 5px 12px; white-space: nowrap; }

/* Cartao "Atencao a Equipe" da tela inicial: quatro numeros em cima e a lista
   do que precisa de acao embaixo. */
.eq-resumo {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 14px;
}
.eq-num {
  background: var(--film-1); border: 1px solid var(--cinza-borda);
  border-radius: 10px; padding: 10px 8px; text-align: center;
  font-family: inherit; cursor: pointer; transition: background .12s, border-color .12s;
}
.eq-num:hover:not(:disabled) { background: var(--film-3); border-color: var(--borda-forte); }
.eq-num:focus-visible { outline: 2px solid var(--laranja-solute); outline-offset: 2px; }
/* Sem ninguem naquele estado nao ha lista para abrir. */
.eq-num:disabled { cursor: default; opacity: .6; }
.eq-num b { display: block; font-size: 20px; color: var(--texto); line-height: 1.1; }
.eq-num small { display: block; font-size: 11px; color: var(--texto-suave); margin-top: 3px; }
.eq-num.atencao b { color: var(--laranja-texto); }
.eq-num.alerta b { color: var(--vermelho-txt); }

@media (max-width: 520px) {
  .eq-resumo { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Como a equipe esta hoje (bem-estar) ----- */
.humor-mini {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px;
}
.humor-pessoa {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border-radius: 12px;
  background: var(--film-1); border: 1px solid var(--cinza-borda);
}
.humor-foto {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--laranja-15); color: var(--laranja-texto);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  background-size: cover; background-position: center;
}
.humor-nome {
  font-size: 12.5px; font-weight: 600; color: var(--texto);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.humor-face { font-size: 17px; line-height: 1; }
.humor-face.sem { color: var(--texto-fraco); font-size: 15px; }
/* Quem esta Desanimado ou Mal ganha um contorno: e o que precisa de olhar. */
.humor-pessoa:has(.humor-face.n1), .humor-pessoa:has(.humor-face.n2) {
  border-color: var(--laranja-28); background: var(--laranja-08);
}

.humor-lista { max-height: 52vh; overflow-y: auto; }
.humor-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid var(--film-2);
}
.humor-linha:last-child { border-bottom: none; }
.humor-txt { flex: 1; min-width: 0; }
.humor-linha-nome { display: block; font-size: 14px; font-weight: 600; color: var(--texto); }
.humor-linha-sub { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 1px; }
.humor-estado {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 12.5px; color: var(--texto-2);
}
.humor-estado.sem { color: var(--texto-fraco); }
.humor-estado.n1, .humor-estado.n2 { color: var(--laranja-texto); font-weight: 600; }
.humor-face-g { font-size: 19px; line-height: 1; }

/* ----- Relatorio menos poluido -----
   Antes: todo horario laranja e em negrito, uma camera em cada um e ate tres
   etiquetas coloridas por linha. Com tudo gritando, nada chamava atencao.
   Agora o horario e texto comum e o laranja fica so para a excecao. */
/* Alfinete do local da batida, ao lado da hora. */
.tem-local { color: var(--laranja-texto); text-decoration: none; font-size: 13px; cursor: pointer; }
.tem-local:hover { text-decoration: underline; }
.sem-local { color: var(--texto-fraco); font-size: 13px; cursor: help; }

.hora-foto { color: var(--texto); font-weight: 500; }
.hora-foto:hover { color: var(--laranja-texto); }
/* A camera some ate o mouse passar na linha. No celular (sem hover) ela
   continua visivel, senao nao haveria como descobrir que existe foto. */
@media (hover: hover) {
  .hora-foto .ico-mini { opacity: 0; transition: opacity .12s ease; }
  tbody tr:hover .hora-foto .ico-mini,
  .hora-foto:focus-visible .ico-mini { opacity: .75; }
}
/* Aviso informativo (horas extras, marcacoes adicionais): sem cor de alarme. */
.badge.neutro { background: var(--film-2); color: var(--texto-suave); border: 1px solid var(--cinza-borda); }
/* O resto dos avisos entra na mesma pilha quando o "+N" e clicado. O :not
   e' necessario: `.oculto` esta la em cima no arquivo e, com a mesma
   especificidade, perderia para esta regra e nada ficaria escondido. */
.alertas-resto:not(.oculto) { display: contents; }
/* Linhas alternadas: com onze colunas, a faixa ajuda a seguir a linha. */
#tabela-relatorio tr:nth-child(even) { background: var(--film-1); }
#tabela-relatorio tr:hover { background: var(--film-2); }

/* "Antes e depois" de cada acao na trilha de auditoria (requisito 32). */
.aud-mudancas { margin-top: 6px; font-size: 12px; line-height: 1.7; color: var(--texto-2); }
.aud-mudancas .aud-campo {
  display: inline-block; min-width: 92px; color: var(--texto-suave);
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.aud-mudancas .seta { color: var(--laranja-texto); margin: 0 2px; }

/* Estabelecimento da pessoa, embaixo do nome na lista da Equipe. */
.eq-estab { color: var(--laranja-texto); font-weight: 600; }

/* --- Comprovantes das ultimas 48 horas (historico) ----------------------- */
/* Lista curta e clicavel: a Portaria pede que o trabalhador consiga extrair
   esses comprovantes, entao eles ficam a um clique, sem filtro nenhum. */
.c48-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.c48-item {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--cinza-borda); border-radius: 8px;
  background: var(--film-1); color: var(--texto); text-decoration: none;
  font-size: 13px; transition: background .15s, border-color .15s;
}
.c48-item:hover, .c48-item:focus-visible {
  background: var(--film-3); border-color: var(--borda-forte);
}
.c48-item b { font-variant-numeric: tabular-nums; }
.c48-item span { color: var(--texto-2); }
.c48-item i { font-style: normal; color: var(--texto-fraco); font-size: 11.5px; }

/* --- Historico de vigencias da jornada (aba Empresa) -------------------- */
/* Mostra que jornada valia em cada periodo: e o que explica por que o saldo
   de um mes fechado nao muda quando o horario muda hoje. */
.hist-jornada { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.hist-jornada-item {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  padding: 8px 12px; border: 1px solid var(--cinza-borda); border-radius: 8px;
  background: var(--film-1); font-size: 12.5px;
}
.hist-jornada-item b { flex: none; }
.hist-jornada-item span { color: var(--texto-2); }
/* O motivo da mudanca de jornada: linha propria, para nao competir com o horario. */
.hist-jornada-motivo {
  flex-basis: 100%; font-style: normal; font-size: 11.5px;
  color: var(--texto-suave); margin-top: 2px;
}

/* --- Lista de jornadas com nome (aba Empresa > Outras jornadas) ---------- */
.eq-lista-item {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--cinza-borda); border-radius: 10px;
  background: var(--film-1);
}
.eq-lista-item.eq-inativo { opacity: .55; }
.eq-lista-item b { font-size: 14px; }
.eq-selo {
  font-style: normal; font-weight: 600; letter-spacing: .04em; font-size: 10px;
  text-transform: uppercase; color: var(--texto-suave);
  background: var(--film-3); border: 1px solid var(--cinza-borda);
  border-radius: 4px; padding: 2px 6px; margin-left: 6px; vertical-align: middle;
}
/* A jornada da pessoa na lista da Equipe: visivel sem precisar abrir a ficha. */
.eq-jornada { color: var(--laranja-solute); font-weight: 600; }

/* O proximo feriado, no cartao do dia. Discreto: e informacao boa de saber,
   nao aviso de pendencia. */
.inicio-feriado {
  margin: 12px 0 0; padding-top: 10px; font-size: 12.5px;
  color: var(--texto-suave); border-top: 1px solid var(--cinza-borda);
}
.inicio-feriado b { color: var(--texto-2); }

/* --- Cadastro de pessoa (pessoa-nova.html) ------------------------------ */
/* Grade que se ajusta sozinha: no computador tres colunas, no celular uma,
   sem media query e sem campo espremido. */
.pn-grade {
  display: grid; gap: 14px 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.pn-campo { display: flex; flex-direction: column; min-width: 0; }
.pn-campo.pn-largo { grid-column: 1 / -1; }
.pn-campo label { margin-bottom: 4px; }
.pn-campo input, .pn-campo select { margin-bottom: 0; }
.pn-campo small { font-size: 11.5px; color: var(--texto-suave); margin-top: 5px; line-height: 1.4; }
.pn-secao {
  margin: 26px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--cinza-borda);
}
/* Diz o que e obrigatorio no proprio campo: um asterisco com legenda no fim
   do formulario obriga a pessoa a procurar o que ele significa. */
.pn-obrig {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  color: var(--laranja-texto); margin-left: 6px;
}
.pn-dica {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; font-size: 10px; font-weight: 700;
  border: 1px solid var(--cinza-borda); color: var(--texto-suave); margin-left: 5px;
  cursor: help;
}
/* Dois campos que andam juntos ocupam duas colunas da grade e nao se separam:
   a data de vigencia sozinha, numa linha abaixo, ficava longe da escala que
   ela explica. */
.pn-dupla {
  grid-column: span 2; display: grid; gap: 14px 18px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
  .pn-dupla { grid-column: 1 / -1; grid-template-columns: 1fr; }
}
.pn-foto-linha { display: flex; align-items: center; gap: 16px; margin: 16px 0 22px; flex-wrap: wrap; }

/* --- Historico do cadastro (pessoa.html) -------------------------------- */
.pe-so-leitura {
  margin: 0; padding: 9px 12px; border-radius: 8px; font-size: 13.5px;
  background: var(--film-1); border: 1px solid var(--cinza-borda); color: var(--texto-2);
}
.ph-linha {
  display: flex; gap: 12px; padding: 14px 2px;
  border-bottom: 1px solid var(--cinza-borda);
}
.ph-linha:last-child { border-bottom: none; }
.ph-foto { flex: 0 0 auto; }
.ph-txt { flex: 1; min-width: 0; }
.ph-topo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.ph-acao { color: var(--texto-2); }
.ph-quando { margin-left: auto; font-size: 12px; color: var(--texto-fraco); white-space: nowrap; }
.ph-detalhe { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }
/* O "de X para Y" e o coracao do historico: e ele que responde "quem mudou
   o meu CPF, e para o que". */
.ph-campo {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-size: 12.5px;
}
.ph-campo-nome { color: var(--texto-fraco); min-width: 110px; }
.ph-de { color: var(--texto-suave); text-decoration: line-through; }
.ph-seta { color: var(--texto-fraco); }
.ph-para { color: var(--texto); font-weight: 600; }

/* O X mora no canto da janela, entao a janela e a referencia de posicao. */
.modal-fundo .modal { position: relative; }

/* --- Suporte (suporte.html) --------------------------------------------- */
/* A conversa ocupa a tela: ela e o que a pessoa veio fazer. O que ja passou
   mora atras do botao "Atendimentos anteriores".

   A pagina inteira cabe na altura da janela, e quem rola e a conversa. Duas
   barras de rolagem na mesma tela — a da pagina e a do chat — fazem a pessoa
   perder a mensagem que acabou de chegar porque rolou a errada. */
/* A altura vem de cima: a coluna do conteudo tem a altura da janela, a barra
   do topo fica fixa nela, e o que sobra e da conversa. Dar 100vh so ao
   container nao bastava — a barra do topo somava altura e a pagina voltava a
   rolar. */
.sup-conteudo { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.sup-pagina {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  padding-bottom: 20px;
}
.sup-conversa-cartao {
  margin-top: 16px; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}

.sup-horario {
  display: flex; flex-direction: column; gap: 2px; margin-top: 14px;
  padding: 12px 16px; border-radius: 12px; font-size: 13px;
  border: 1px solid var(--cinza-borda); background: var(--film-1);
}
.sup-horario b { font-size: 13.5px; }
.sup-horario.aberto b { color: var(--verde, #5fa776); }
.sup-horario.fechado b { color: var(--laranja-texto); }
.sup-horario small { color: var(--texto-fraco); font-size: 11.5px; margin-top: 4px; }


.sup-item {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  padding: 11px 12px; margin-bottom: 6px; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 10px;
  color: inherit; font: inherit;
}
.sup-item:hover { background: var(--film-2); }
.sup-item.ativo { background: var(--film-2); border-color: var(--cinza-borda); }
.sup-item-topo { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.sup-codigo { font-size: 11.5px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.sup-item-assunto { font-size: 13.5px; font-weight: 600; }
.sup-item-sub { font-size: 12px; color: var(--texto-suave); }
.sup-status {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--cinza-borda); color: var(--texto-suave);
}
/* Esperando atendimento e o unico estado em que a bola esta com a gente. */
.sup-status.aberto { color: var(--laranja-texto); border-color: var(--laranja-solute); }

.sup-conversa-cartao { display: flex; flex-direction: column; min-height: 440px; }
.sup-conversa-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--cinza-borda);
  flex-wrap: wrap;
}
.sup-topo-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sup-protocolo { font-variant-numeric: tabular-nums; color: var(--laranja-texto); }
/* O assunto sai do que a pessoa escreveu, entao pode ser longo: no cabecalho
   ele vira uma linha so, e a conversa logo abaixo mostra o texto inteiro. */
.sup-topo-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-item-assunto {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sup-topo-txt span { font-size: 12px; color: var(--texto-suave); }
.sup-conversa {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding-right: 4px;
}

/* Avatar fora do balao, como em qualquer chat: o rosto fica na margem e o
   texto corre ao lado dele. */
.sup-linha { display: flex; gap: 8px; align-items: flex-end; }
.sup-linha.meu { flex-direction: row-reverse; }
.sup-avatar {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background-size: cover; background-position: center;
  font-size: 11px; font-weight: 700; overflow: hidden;
}
.sup-avatar.iniciais { background: var(--film-3); color: var(--texto-2); }
.sup-avatar.meu { background: var(--laranja-15); color: var(--laranja-texto); }
/* Mensagem seguida da mesma pessoa nao repete o rosto, mas guarda o lugar dele
   para os baloes continuarem alinhados. */
.sup-avatar.vazio { background: none; }
img.sup-avatar { object-fit: cover; }

.sup-balao {
  display: flex; flex-direction: column; gap: 3px; max-width: 76%;
  padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45;
}
/* O meu de um lado, o deles do outro: e assim que se le uma conversa. */
.sup-balao.meu { background: var(--laranja-15); border-bottom-right-radius: 4px; }
.sup-balao.deles { background: var(--film-2); border-bottom-left-radius: 4px; }
.sup-balao-autor { font-size: 11px; font-weight: 600; color: var(--texto-suave); }
.sup-balao-txt { white-space: pre-wrap; word-break: break-word; }
.sup-balao-hora { font-size: 10.5px; color: var(--texto-fraco); align-self: flex-end; }

/* O que o sistema conta, e nao o que alguem escreveu: no meio, apagado. */
.sup-evento {
  align-self: center; text-align: center; font-size: 12px; color: var(--texto-fraco);
  padding: 4px 12px;
}
.sup-evento span { margin-left: 6px; font-size: 10.5px; }

/* Um cartao por atendimento: o dia e o assunto, que e o que a pessoa lembra
   quando procura ("aquele do AFD, do mes passado"). */
.ant-card {
  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer; font: inherit; color: inherit;
  background: var(--film-1); border: 1px solid var(--cinza-borda); border-radius: 12px;
}
.ant-card:hover { background: var(--film-2); }
.ant-card.ativo { border-color: var(--laranja-solute); }
.ant-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ant-dia { font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.ant-assunto { font-size: 14px; font-weight: 600; }
.ant-sub { font-size: 12px; color: var(--texto-fraco); }

/* O convite para avaliar. Fica entre a conversa e a caixa de escrever: e o
   fim natural da leitura, e nao some quando a conversa e longa. */
.sup-avaliacao {
  margin-top: 14px; padding: 14px; border-radius: 12px; text-align: center;
  background: var(--film-1); border: 1px solid var(--cinza-borda);
}
.sup-aval-titulo { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.sup-aval-sub { margin: 8px 0 0; font-size: 12px; color: var(--texto-suave); }
.sup-estrelas { display: flex; justify-content: center; gap: 4px; }
.sup-estrela {
  width: 34px; height: 34px; padding: 4px; border: none; background: none;
  cursor: pointer; color: var(--cinza-borda); line-height: 0;
}
.sup-estrelas.lida .sup-estrela { cursor: default; width: 22px; height: 22px; }
.sup-estrela svg { width: 100%; height: 100%; fill: currentColor; }
.sup-estrela.cheia { color: var(--laranja-solute); }

/* No lugar da caixa de escrever, quando o atendimento ja acabou. */
.sup-encerrado {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; border-radius: 12px;
  background: var(--film-1); border: 1px solid var(--cinza-borda);
  font-size: 13px; color: var(--texto-suave);
}


/* As reticencias de "escrevendo". */
.sup-digitando { flex-direction: row; gap: 4px; padding: 13px; }
.sup-digitando span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--texto-fraco);
  animation: sup-pulo 1.2s infinite;
}
.sup-digitando span:nth-child(2) { animation-delay: .15s; }
.sup-digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes sup-pulo {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
/* Quem pediu para o sistema nao animar nao recebe animacao nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .sup-digitando span { animation: none; opacity: .5; }
}

.sup-escrever { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; }
.sup-escrever textarea { flex: 1; margin: 0; resize: vertical; min-height: 44px; }

/* --- Calendario de feriados --------------------------------------------- */
.fer-topo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 18px 0 16px;
}
.fer-ano-nav { display: flex; align-items: center; gap: 6px; }
.fer-ano-nav input {
  width: 92px; margin: 0; text-align: center; font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fer-ano-nav .btn-ico { font-size: 17px; line-height: 1; }
.fer-contagem { font-size: 12.5px; color: var(--texto-suave); }
.fer-topo-acoes { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* Doze quadros, e nao uma lista: o ano inteiro cabe de uma vez, e da para ver
   num relance em que mes ha feriado e em que mes nao ha. */
.fer-ano {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.fer-mes-bloco {
  border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 12px 14px;
  background: var(--superficie);
}
.fer-mes-bloco.vazio { background: none; }
.fer-mes-bloco h3 {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--texto-suave); font-weight: 600;
}
.fer-mes-bloco h3 span { font-size: 11px; color: var(--texto-fraco); }
.fer-mes-vazio { margin: 0; font-size: 12.5px; color: var(--texto-fraco); font-style: italic; }
.fer-dia {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 0;
  border-top: 1px solid var(--film-2);
}
.fer-dia:first-of-type { border-top: none; }
.fer-dia-num {
  font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
  flex: 0 0 auto; min-width: 20px;
}
.fer-dia-semana { font-size: 11px; color: var(--texto-fraco); flex: 0 0 auto; width: 24px; }
.fer-dia-nome { flex: 1; min-width: 0; font-size: 13px; }
/* Feriado que cai no fim de semana nao muda nada na jornada: fica apagado para
   nao disputar atencao com os que mudam. */
.fer-dia.fds .fer-dia-num, .fer-dia.fds .fer-dia-nome { color: var(--texto-fraco); }
/* Ponto facultativo nao e feriado por lei: a cor avisa de longe. */
.fer-dia.facultativo .fer-dia-num { color: var(--laranja-texto); }
.fer-so { font-size: 10.5px; color: var(--texto-fraco); }
.fer-tirar {
  flex: 0 0 auto; width: 20px; height: 20px; line-height: 1; padding: 0;
  border: none; background: none; color: var(--texto-fraco); cursor: pointer;
  font-size: 16px; border-radius: 5px; opacity: 0;
}
.fer-dia:hover .fer-tirar, .fer-tirar:focus { opacity: 1; }
.fer-tirar:hover { color: var(--vermelho); background: var(--film-2); }

.fer-explica { margin-top: 20px; font-size: 13px; color: var(--texto-suave); }
.fer-explica summary { cursor: pointer; color: var(--laranja-texto); }
.fer-explica p { margin: 10px 0 0; line-height: 1.5; }

/* --- Recebimento de e-mails (perfil.html) ------------------------------- */
.em-lista { display: flex; flex-direction: column; gap: 2px; }
.em-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 2px;
  border-bottom: 1px solid var(--cinza-borda); cursor: pointer;
}
.em-item:last-child { border-bottom: none; }
/* O que nao se desliga nao finge que se desliga: fica claro na propria linha. */
.em-item.fixo { cursor: default; }
.em-item input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--laranja-solute); }
.em-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.em-rotulo { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.em-selo {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  color: var(--laranja-texto); border: 1px solid var(--laranja-solute);
  border-radius: 999px; padding: 1px 8px;
}
.em-desc { font-size: 12.5px; color: var(--texto-suave); }
.em-nota { font-size: 12px; color: var(--texto-fraco); font-style: italic; }

/* Botao que e so um icone: usado nas tabelas, onde escrever "Ver detalhe"
   em toda linha roubaria a largura das colunas que importam. */
.btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid var(--cinza-borda); color: var(--texto-suave);
}
.btn-ico svg { width: 16px; height: 16px; }
.btn-ico:hover { background: var(--film-2); color: var(--texto); }

/* --- Dias sem fechar (pendencias.html) ---------------------------------- */
.pd-filtro-pessoa {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
  background: var(--film-2); border: 1px solid var(--cinza-borda); font-size: 13px;
}
.pd-filtro-pessoa a { color: var(--laranja-texto); }
/* Vermelho de proposito: esta tela existe para mostrar o que esta errado. */
.pd-dia {
  padding: 12px 2px; border-bottom: 1px solid var(--cinza-borda);
}
.pd-dia:last-of-type { border-bottom: none; }
/* O vermelho ficou no ponto antes da data, e nao mais numa tarja com fundo
   rosado: a tela inteira avisando em vermelho cansa e nada se destaca. */
.pd-dia-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-dia-topo::before {
  content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cinza-borda);
}
.pd-dia.aberto .pd-dia-topo::before { background: var(--vermelho, #c9857e); }
.pd-data { font-weight: 700; font-size: 15px; }
.pd-diasemana { font-size: 12.5px; color: var(--texto-suave); }
.pd-falta { font-size: 13px; color: var(--texto-2); margin-top: 4px; }
/* Quanto tempo ainda ha para pedir. Fora do prazo ela fica cinza: o dia nao
   some nem perde o botao, so para de ser cobrado. */
.pd-prazo {
  font-size: 11.5px; color: var(--laranja-texto); margin-left: auto;
  white-space: nowrap;
}
.pd-prazo.fora { color: var(--texto-fraco); }
.pd-horas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pd-hora {
  font-variant-numeric: tabular-nums; font-size: 12.5px;
  padding: 3px 9px; border-radius: 6px;
  background: var(--film-2); border: 1px solid var(--cinza-borda);
}
.pd-hora.vazia { color: var(--texto-fraco); font-style: italic; }
.pd-just {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  background: var(--film-2); border: 1px solid var(--cinza-borda);
}
.pd-just.pedida { border-color: var(--laranja-50, rgba(243,140,35,.5)); }
.pd-just.respondida { color: var(--texto-2); }

/* A pessoa, quando quem olha cuida da equipe. */
.pd-pessoa { margin-bottom: 22px; }
.pd-pessoa-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
/* Previsto e cumprido embaixo do saldo: as duas parcelas que o explicam. */
.inicio-num-parcelas {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px;
  font-size: 12px; color: var(--texto-suave);
}
.inicio-num-parcelas b { font-size: 12.5px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
/* O comprovante nao pode parecer a foto da batida: sao documentos diferentes. */
.link-comprovante {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; margin-right: 3px; border-radius: 6px;
  border: 1px solid var(--cinza-borda); background: var(--film-1);
  color: var(--texto-2); text-decoration: none; font-size: 12px;
}
.link-comprovante:hover { background: var(--film-3); color: var(--texto); }
.ico-doc { width: 13px; height: 13px; }

/* --- Modal de ajuste de ponto: o contexto que faltava ------------------- */
.aj-situacao {
  border: 1px solid var(--cinza-borda); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 18px; background: var(--film-1);
}
.aj-numeros { display: flex; flex-wrap: wrap; gap: 18px; }
.aj-numeros span { display: flex; flex-direction: column; }
.aj-numeros small { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .5px; }
.aj-numeros b { font-size: 17px; font-variant-numeric: tabular-nums; }
.aj-marcacoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.aj-problema {
  margin-top: 10px; font-size: 12.5px; color: var(--texto-2);
  padding-top: 10px; border-top: 1px solid var(--film-2);
}
.aj-ok { margin-top: 10px; font-size: 12.5px; color: var(--texto-suave); }
.aj-secao { font-size: 13px; margin: 18px 0 4px; }
.aj-ajuda { font-size: 12px; color: var(--texto-suave); line-height: 1.55; margin: 0 0 10px; }
/* O que esta valendo em cada campo, para o RH nao mexer no escuro. */
.aj-atual { display: block; margin-top: 4px; font-size: 11.5px; color: var(--texto-suave); }
.aj-atual.vazio { font-style: italic; color: var(--texto-fraco); }
.aj-atual.ajustado { color: var(--laranja-solute); }
/* Cartao de resumo que pede acao. */
.resumo-item.resumo-alerta b { color: var(--vermelho, #c9857e); }

/* --- Equipe em cards ---------------------------------------------------- */
/* A lista e de PESSOAS: um rosto encontra mais rapido que uma linha de texto. */
.eq-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.eq-card {
  border: 1px solid var(--cinza-borda); border-radius: 12px;
  background: var(--film-1); overflow: hidden;
}
.eq-card.aberto { border-color: var(--borda-forte); background: var(--film-2); }
.eq-card.eq-inativa { opacity: .55; }
.eq-card-topo {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; background: none; border: 0; cursor: pointer;
  text-align: left; color: inherit; font: inherit;
}
.eq-card-topo:hover { background: var(--film-2); }
.eq-card-foto {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  background: var(--film-3) center/cover no-repeat; color: var(--texto-2);
}
.eq-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.eq-card-nome { font-weight: 700; font-size: 14.5px; }
.eq-card-txt .eq-sub { font-size: 12px; color: var(--texto-suave); }
.eq-card-seta { flex: none; color: var(--texto-fraco); font-size: 20px; transition: transform .15s; }
.eq-card.aberto .eq-card-seta { transform: rotate(90deg); }
.eq-card-detalhe { padding: 2px 14px 14px; border-top: 1px solid var(--film-2); }
.eq-card-linha {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--film-2); font-size: 13px;
}
.eq-card-linha:last-of-type { border-bottom: none; }
.eq-card-linha small {
  flex: none; min-width: 80px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--texto-fraco);
}
.eq-card-detalhe .eq-acoes { margin-top: 10px; }

/* --- Cargos dentro do setor -------------------------------------------- */
.eq-cargos-do-setor {
  margin: -2px 0 14px 18px; padding: 8px 0 8px 14px;
  border-left: 2px solid var(--film-3);
}
.eq-cargo-linha {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; font-size: 13px;
}
.eq-cargo-nome { flex: 1; min-width: 120px; }
.eq-cargo-linha.orfao { opacity: .75; }
.eq-cargo-novo { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.eq-cargo-novo .eq-edit { flex: 1; min-width: 0; }
.eq-orfaos { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--cinza-borda); }
.eq-orfaos small { font-size: 11.5px; color: var(--texto-fraco); }

/* O card da Equipe leva para a tela da pessoa; so as acoes ficam nele. */
.eq-card-rodape { padding: 0 14px 12px; }
.eq-card.aberto .eq-card-seta { transform: none; }

/* --- Ficha do colaborador em tela inteira (pessoa.html) ----------------- */
.pe-topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pe-foto {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
  background: var(--film-3) center/cover no-repeat; color: var(--texto-2);
}
.pe-identidade { flex: 1; min-width: 180px; }
.pe-identidade h1 { margin: 0; font-size: 20px; }
.pe-identidade .subtitulo { margin: 2px 0 0; }
.pe-acoes { flex: none; }
.pe-dados { display: grid; gap: 0; }
.pe-linha {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--film-2); font-size: 13.5px;
}
.pe-linha:last-child { border-bottom: none; }
.pe-linha small {
  flex: none; min-width: 130px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--texto-fraco);
}
/* Item do painel que abre janela em vez de navegar: mesma aparencia do link. */
button.inicio-item { width: 100%; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }

/* --- Comprovantes do dia ------------------------------------------------- */
/* A navegacao do dia numa linha, e as horas em largura inteira embaixo: assim
   a lista cresce para o lado em vez de ficar espremida numa coluna. */
.comp-nav {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 14px 0 12px;
}
.comp-nav input[type="date"] { margin: 0; width: auto; }
.comp-nav-conta { font-size: 12.5px; color: var(--texto-suave); margin-left: 4px; }
.comp-seta {
  flex: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: var(--film-2); border: 1px solid var(--cinza-borda);
  color: var(--texto-2); font-size: 17px; line-height: 1;
}
.comp-seta:hover { background: var(--film-3); color: var(--texto); }
/* A etiqueta agora e so a hora: cabe muito mais por linha. */
.c48-item b { font-size: 14px; }
.c48-item { padding: 7px 11px; }
/* As marcacoes alem do limite: escondidas ate alguem pedir. */
.c48-resto { display: contents; }
.c48-resto.oculto { display: none; }