:root {
  --bg: #f5f7f7;
  --card: #ffffff;
  --texto: #111111;
  --muted: #6b7280;
  --hope: #2FE0C4;
  --hope-escuro: #14b89f;
  --verde: #22c55e;
  --vermelho: #ef4444;
  --borda: #e5e7eb;

  /* Painel Gerencial: paleta medida diretamente no Secullum RH (réplica fiel) */
  --sec-texto: #53565a;
  --sec-muted: #767e87;
  --sec-bg-pagina: #f7f8f9;
  --sec-borda: #dee0e4;
  --sec-borda-forte: #cdced3;
  --sec-borda-input: #bbbdc1;
  --sec-track: #eff0f2;
  --sec-hover: #f3f5f7;
  --sec-ativo-texto: #33363a;
  --sec-amarelo: #ffc600;
  --sec-azul: #2f5fa8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 50% 0%, #e4fbf6 0%, var(--bg) 45%);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  position: relative;
  overflow-x: hidden;
}

/* Manchas de cor desfocadas no fundo das telas de login/totem — só decoração,
   pra tela não ficar "vazia" atrás do card em telas grandes (tablet/monitor
   do totem). Fixas na viewport, não atrapalham o scroll do conteúdo. */
body::before, body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}
body::before {
  width: 420px;
  height: 420px;
  background: var(--hope);
  opacity: 0.35;
  top: -140px;
  right: -120px;
}
body::after {
  width: 360px;
  height: 360px;
  background: #7dd3fc;
  opacity: 0.3;
  bottom: -120px;
  left: -100px;
}
#tela-dp { position: relative; z-index: 1; }

/* Painel Gerencial usa a mesma fonte/base do Secullum RH (Roboto, 13px) */
#tela-dp, #tela-dp input, #tela-dp select, #tela-dp button {
  font-family: 'Roboto', "Lucida Grande", "Lucida Sans Unicode", Helvetica, sans-serif;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  position: relative;
  z-index: 1;
}

/* Login e totem centralizam o conteúdo na tela toda (não só no topo) — em
   telas maiores (tablet/monitor do totem) isso evita um cartão pequeno
   "flutuando" no canto de cima com um vazio enorme embaixo. */
#tela-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
#tela-ponto {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.ponto-conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.app.wide { max-width: 900px; }

.marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 24px 0 8px;
}

.marca img { width: 36px; height: 36px; }

.marca .wordmark {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.marca .wordmark .hope { color: var(--hope-escuro); }
.marca .wordmark .consultoria { color: var(--texto); font-weight: 400; }

.subtitulo {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 24px;
}

header.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -20px -16px 20px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 4px 16px -8px rgba(20,184,159,0.25);
}

header.topo .marca-topo {
  display: flex;
  align-items: center;
  gap: 10px;
}

header.topo .marca-topo img {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(20,184,159,0.35);
}

header.topo h1 {
  font-size: 16px;
  margin: 0;
  font-weight: 800;
  background: linear-gradient(135deg, var(--hope-escuro), var(--hope));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sair {
  background: #fff;
  border: 1px solid var(--borda);
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.card {
  background: var(--card);
  border-radius: 20px;
  padding: 22px 20px;
  margin-bottom: 16px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 16px 32px -20px rgba(20,30,40,0.25), 0 2px 6px rgba(0,0,0,0.03);
}

/* Dentro do Painel Gerencial, cartões no padrão "panel" do Secullum: fundo
   branco, borda fina, cantos quase retos (Secullum usa 0px exatamente). */
.conteudo-dp .card {
  border-radius: 2px;
  border: 1px solid var(--sec-borda);
  box-shadow: none;
}
.conteudo-dp .card-resumo {
  border-radius: 2px;
  border: 1px solid var(--sec-borda);
  box-shadow: none;
}

/* Botões dentro do Painel Gerencial: réplica do .btn do Secullum
   (retangular, fundo branco, borda cinza — sem pílula/gradiente). */
/* Botões de ação (Gerar relatório, Cadastrar, trocar senha etc.) ficam com
   o verde-água da Hope — é a cor da marca/ação, só a "casca" (menu, cartões,
   bordas) que replica o cinza/branco do Secullum. */
/* width:auto/padding menor pra sobrescrever o .primario/.secundario genérico
   (feito pra tela de login, ocupando a largura toda) — dentro do Painel
   Gerencial os botões devem ficar discretos, do tamanho do próprio texto. */
.conteudo-dp button.primario {
  background: linear-gradient(135deg, var(--hope), var(--hope-escuro));
  color: #06231e;
  border-radius: 6px;
  box-shadow: none;
  font-weight: 700;
  width: auto;
  padding: 8px 18px;
  font-size: 13px;
  margin-top: 10px;
}
.conteudo-dp button.primario:hover { background: linear-gradient(135deg, var(--hope-escuro), var(--hope)); transform: none; box-shadow: none; }
.conteudo-dp button.secundario {
  background: #fff;
  border: 1px solid var(--sec-borda-input);
  border-radius: 2px;
  color: var(--sec-texto);
  width: auto;
  padding: 8px 18px;
  font-size: 13px;
  margin-top: 10px;
}
.conteudo-dp button.secundario:hover { background: var(--sec-hover); border-color: var(--sec-borda-input); }
.conteudo-dp input, .conteudo-dp select {
  border-radius: 2px;
  border: 1px solid var(--sec-borda-input);
  background: #fff;
}

h2 { font-size: 16px; margin-top: 0; }

label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  margin-top: 14px;
}

input, select {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: #fbfbfb;
  color: var(--texto);
  font-size: 15px;
}

.nome-empresa-detectada {
  min-height: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hope-escuro);
  margin-top: 6px;
}

.foto-ref-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid var(--borda);
}

.opcao-lembrar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.opcao-lembrar input {
  width: auto;
}

.link-discreto {
  background: none;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  font-size: 12px;
  margin-top: 12px;
  cursor: pointer;
  display: block;
  padding: 0;
}
.link-discreto:hover { color: var(--texto); }

/* Modal de foto de referência (upload ou câmera) */
.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}

.modal-caixa {
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
}

.campo-senha {
  position: relative;
  display: flex;
}

.campo-senha input {
  padding-right: 56px;
}

.campo-senha .alternar-senha {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--hope-escuro);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 8px;
  cursor: pointer;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--hope);
  box-shadow: 0 0 0 3px rgba(47, 224, 196, 0.2);
}

button.primario {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--hope), var(--hope-escuro));
  color: #06231e;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 10px 20px -8px rgba(20,184,159,0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button.primario:hover { transform: translateY(-1px); box-shadow: 0 14px 24px -8px rgba(20,184,159,0.6); }
button.primario:active { transform: translateY(0); }
button.primario:disabled { opacity: 0.5; cursor: default; box-shadow: none; transform: none; }

button.secundario {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: #fff;
  color: var(--texto);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}

button.secundario:hover { background: #f5fefc; border-color: var(--hope); }

.erro {
  color: var(--vermelho);
  font-size: 13px;
  margin-top: 12px;
  min-height: 16px;
}

.ok { color: var(--verde); }

.relogio {
  text-align: center;
  font-size: 46px;
  font-weight: 800;
  margin: 8px 0 2px;
  color: var(--texto);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

.data-atual {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 24px;
  text-transform: capitalize;
  display: inline-block;
  width: 100%;
}

.camera-box {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(160deg, #1c1c22, #05070a);
  aspect-ratio: 3/4;
  max-width: 360px;
  margin: 0 auto;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06), 0 12px 30px -8px rgba(0,0,0,0.45);
  padding: 4px;
}

.camera-box::after {
  /* moldura oval sutil, só pra guiar o enquadramento do rosto */
  content: "";
  position: absolute;
  inset: 12%;
  border: 2px dashed rgba(255,255,255,0.35);
  border-radius: 50% / 40%;
  pointer-events: none;
}

.camera-box video, .camera-box canvas, .camera-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

.camera-box video {
  transform: scaleX(-1); /* efeito espelho, fica mais natural pra quem está se olhando */
}

.botao-colaborador {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--borda);
  background: #fff;
  color: var(--texto);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.botao-colaborador:hover { background: #f5fefc; border-color: var(--hope); }
.avatar-iniciais {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hope), var(--hope-escuro));
  color: #06231e;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cabecalho-colaborador-selecionado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.cabecalho-colaborador-selecionado h2 { margin: 0; }

.chip-trocar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: #fff;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chip-trocar:hover { background: #f5fefc; border-color: var(--hope); color: var(--hope-escuro); }

.tipos-batida {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.tipos-batida button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 6px;
  border-radius: 12px;
  border: 1px solid var(--borda);
  background: #fbfbfb;
  color: var(--texto);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tipos-batida button svg { flex-shrink: 0; opacity: 0.7; }

.tipos-batida button.selecionado {
  border-color: var(--hope-escuro);
  background: rgba(47, 224, 196, 0.15);
  color: var(--hope-escuro);
  font-weight: 700;
}
.tipos-batida button.selecionado svg { opacity: 1; }

.lista-batidas { list-style: none; padding: 0; margin: 10px 0 0; }
.lista-batidas li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 14px;
}
.lista-batidas li:last-child { border-bottom: none; }
.ponto-tipo { display: inline-flex; align-items: center; gap: 8px; }
.ponto-tipo-bolinha {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.ponto-tipo-bolinha.ponto-tipo-entrada { background: var(--verde); }
.ponto-tipo-bolinha.ponto-tipo-saida { background: var(--vermelho); }
.ponto-tipo-bolinha.ponto-tipo-pausa_inicio,
.ponto-tipo-bolinha.ponto-tipo-pausa_fim { background: var(--sec-amarelo, #ffc600); }
.btn-comprovante {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: #fff;
  color: var(--hope-escuro);
  cursor: pointer;
}
.btn-comprovante:hover { background: var(--sec-hover, #f3f5f7); }
.btn-comprovante:disabled { opacity: 0.6; cursor: default; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid var(--borda);
}
th { color: var(--muted); font-weight: 600; }

.linha-filtros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Sem isto, um <input type="date"> dentro de uma coluna 1fr não encolhe
   abaixo do próprio tamanho mínimo (min-width:auto é o padrão em grid/flex)
   — isso empurra a página inteira e cria rolagem horizontal no celular. */
.linha-filtros > div { min-width: 0; }
.linha-filtros input { min-width: 0; }

/* ---------- Painel de filtros compacto (igual à densidade das telas de
   relatório do Secullum — campos pequenos, lado a lado, rótulo azul) ---------- */
.rotulo-filtros {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--sec-azul);
  margin: 0 0 10px;
}
.grade-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 16px;
  align-items: start;
}
.grade-filtros > div { min-width: 0; }
.grade-filtros label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--sec-azul);
}
.grade-filtros select, .grade-filtros input { margin-top: 0; }

.campo-periodo-linha {
  display: flex;
  align-items: center;
  gap: 8px;
}
.campo-periodo-linha input[type="date"] { flex: 1; min-width: 0; margin-top: 0; }
.campo-periodo-linha span { color: var(--sec-muted); font-size: 12px; white-space: nowrap; }

.lista-checkbox {
  border: 1px solid var(--sec-borda-input);
  border-radius: 2px;
  max-height: 148px;
  overflow-y: auto;
  font-size: 12.5px;
  background: #fff;
}
.lista-checkbox-cabecalho {
  position: sticky;
  top: 0;
  background: var(--sec-track);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--sec-texto);
  padding: 6px 10px;
  border-bottom: 1px solid var(--sec-borda-input);
}
.lista-checkbox-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--sec-track);
  cursor: pointer;
}
.lista-checkbox-linha:last-child { border-bottom: none; }
.lista-checkbox-linha:hover { background: var(--sec-hover); }
/* Sem "width:auto" aqui, o checkbox herda o "input { width:100% }" global
   (feito pros campos de texto) e estica pra ocupar a linha inteira, empurrando
   o texto do departamento pro canto direito. */
.lista-checkbox-linha input { width: auto; flex: 0 0 auto; margin: 0; }
.lista-checkbox-vazio { padding: 10px; color: var(--sec-muted); font-size: 12px; }

.acoes-relatorio {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.acoes-relatorio button { width: auto; margin-top: 0; padding: 10px 22px; flex: 0 0 auto; }

/* O cartão de filtros do Secullum não estica pra largura toda da tela — fica
   numa coluna mais estreita, com espaço em branco do lado. */
.card-filtros { max-width: 720px; }

@media (max-width: 760px) {
  .card-filtros { max-width: none; }
  .grade-filtros { grid-template-columns: 1fr 1fr; }
  .acoes-relatorio button { flex: 1 1 auto; }
}

/* ---------- Cálculos (grade por colaborador, igual à tela do Secullum) ---------- */
.campo-colaborador-nav { display: flex; align-items: center; gap: 6px; }
.campo-colaborador-nav select { flex: 1; min-width: 0; margin-top: 0; }
/* precisa de "button" na frente pra ganhar de ".botao-redondo { color:#fff }"
   (mesma especificidade, mas aquela regra vem depois no arquivo) — sem isso
   o ícone fica branco em cima de fundo branco, invisível. */
button.botao-nav-colaborador { flex: 0 0 auto; background: #fff; border: 1px solid var(--sec-borda-input); color: var(--sec-texto); }
button.botao-nav-colaborador:hover { background: var(--sec-hover); }

table.tabela-calculos { font-size: 12.5px; }
table.tabela-calculos thead tr:first-child th {
  background: #3a3a3a;
  color: #fff;
  text-align: left;
  padding: 6px 8px;
  white-space: nowrap;
}
.linha-totais-calculos td {
  background: var(--sec-track);
  font-weight: 700;
  padding: 5px 8px;
  border-bottom: 2px solid var(--sec-borda-forte);
}
table.tabela-calculos tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--sec-track);
  white-space: nowrap;
  font-family: 'Courier New', monospace;
}
table.tabela-calculos tbody tr.linha-fim-semana td.celula-data { color: #c0392b; }
/* FOLGA/Feriado/ausência preenchem as 4 colunas de horário com fundo escuro,
   igual ao bloco cinza-chumbo que o Secullum usa pra marcar o dia inteiro. */
table.tabela-calculos td.celula-placeholder { background: #3a3a3a; color: #fff; font-weight: 600; text-align: center; }
.nota-calculos { font-size: 11px; color: var(--sec-muted); font-style: italic; margin-top: 10px; }

/* Cartão Ponto: rótulo de dia (Feriado/Folga/justificativa) e link inline
   dentro de uma célula da tabela (editar horário, lançar marcação, remover
   justificativa) — igual ao "caixinha" do Secullum no dia sem marcação. */
.celula-placeholder { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--fundo-suave, #eee); color: var(--muted); font-size: 12px; font-weight: 600; }
.link-celula { background: none; border: none; padding: 0; color: var(--primario, #0a7); font-size: 13px; cursor: pointer; text-decoration: underline; }
.link-celula:hover { opacity: 0.75; }
.valor-celula { cursor: pointer; }
.valor-celula:hover { text-decoration: underline; }

/* Cartão Ponto: linhas mais compactas e grade fechada (linha vertical entre
   colunas também), igual à densidade/visual de tabela do Secullum. */
#tabela-cartao-ponto td { padding: 4px 6px; white-space: nowrap; }
#aba-cartao-ponto #card-cartao-ponto-resultado table,
#aba-cartao-ponto #card-cartao-ponto-resultado th,
#aba-cartao-ponto #card-cartao-ponto-resultado td {
  border: 1px solid var(--borda);
  border-collapse: collapse;
}

/* Caixinha pequena de editar/lançar marcação — flutua perto de onde a
   pessoa clicou (pencil/horário/+), igual ao popover do Secullum, em vez de
   um card grande lá embaixo da página. */
.popup-cartao-ponto {
  position: fixed;
  z-index: 500;
  width: 210px;
  background: var(--fundo-card, #fff);
  border: 1px solid var(--borda);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  padding: 12px 14px 14px;
}
.popup-cartao-ponto h4 { margin: 0 0 8px; font-size: 13px; }
.popup-cartao-ponto label { font-size: 11px; margin-top: 6px; display: block; }
.popup-cartao-ponto input, .popup-cartao-ponto select { margin: 2px 0 0; padding: 5px 6px; font-size: 13px; width: 100%; box-sizing: border-box; }
.popup-cartao-ponto .erro { font-size: 11px; margin-top: 4px; }
.popup-cartao-ponto-ou { font-size: 10px; color: var(--muted); text-align: center; margin: 10px 0 2px; }
.popup-cartao-ponto-acoes { display: flex; gap: 6px; margin-top: 10px; }
.popup-cartao-ponto-acoes button { margin: 0; padding: 6px 10px; font-size: 12px; flex: 1; }
.popup-cartao-ponto-seta {
  position: absolute; bottom: -7px; left: 16px;
  width: 12px; height: 12px; background: var(--fundo-card, #fff);
  border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  transform: rotate(45deg);
}
.popup-cartao-ponto.seta-embaixo .popup-cartao-ponto-seta {
  bottom: auto; top: -7px;
  border-right: none; border-bottom: none;
  border-left: 1px solid var(--borda); border-top: 1px solid var(--borda);
}
/* Quadradinho vazio amarelo (igual ao Secullum) ao lado de cada horário —
   sem símbolo dentro, só o contorno. Clica nele (ou no horário) pra editar. */
.icone-editar, .icone-lancar {
  display: inline-block; width: 12px; height: 12px; margin-left: 5px; padding: 0;
  border: 1.5px solid #e0a800; border-radius: 2px; background: transparent;
  cursor: pointer; vertical-align: middle; font-size: 0;
}
.icone-editar:hover, .icone-lancar:hover { background: #fff3cd; }
/* Dia ainda em aberto (hoje, sem todas as marcações) — pincel vermelho em vez
   do quadrado, igual ao Secullum mostra na última marcação de um dia incompleto. */
.icone-editar-pendente {
  width: auto; height: auto; border: none; background: none; font-size: 12px;
  color: #d9363e; line-height: 1;
}
.icone-editar-pendente:hover { background: none; opacity: 0.7; }

.abas {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.abas button {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
}
.abas button.ativa {
  background: var(--hope);
  color: #06231e;
  border-color: var(--hope);
}

.oculto { display: none !important; }

.subabas-inicio {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 20px;
  overflow-x: auto;
}
.subaba-inicio-botao {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.subaba-inicio-botao:hover { color: var(--texto); }
.subaba-inicio-botao.ativa { color: var(--hope-escuro); border-bottom-color: var(--hope); }

.tabela-scroll { overflow-x: auto; }

/* Ao imprimir o extrato do banco de horas, mostra só o relatório gerado */
body.imprimindo-extrato * { visibility: hidden; }
body.imprimindo-extrato #card-extrato-banco-horas,
body.imprimindo-extrato #card-extrato-banco-horas * { visibility: visible; }
body.imprimindo-extrato #card-extrato-banco-horas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  box-shadow: none;
  border: none;
}

.status-ferias {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.status-aberto { background: #eef2f7; color: var(--muted); }
.status-disponivel { background: rgba(47,224,196,0.18); color: var(--hope-escuro); }
.status-vencendo { background: rgba(245,158,11,0.18); color: #b45309; }
.status-vencido { background: rgba(239,68,68,0.15); color: var(--vermelho); }
.status-quitado { background: #eef2f7; color: var(--muted); }

.grade-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.card-resumo {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 8px 20px -14px rgba(20,30,40,0.25);
}

.card-resumo-titulo {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
}

.card-resumo-numero {
  font-size: 34px;
  font-weight: 800;
  color: var(--texto);
  line-height: 1;
  margin-bottom: 14px;
}

.card-resumo-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--sec-track);
  overflow: hidden;
}

.card-resumo-barra-preenchida {
  height: 100%;
  width: 0%;
  background: var(--sec-amarelo);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.grade-perfil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.perfil-bloco {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 8px 20px -14px rgba(20,30,40,0.25);
}
.perfil-bloco h3 { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.perfil-linha { margin-bottom: 12px; }
.perfil-linha-topo { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.perfil-linha-barra { height: 6px; border-radius: 999px; background: var(--sec-track); overflow: hidden; }
.perfil-linha-barra-preenchida { height: 100%; background: var(--hope); border-radius: 999px; }

.card-resumo-percentual {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

/* ---------- Painel Gerencial: réplica do layout do Secullum ---------- */

#tela-dp { background: var(--sec-bg-pagina); min-height: 100vh; }

.barra-superior-dp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid var(--sec-borda);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  position: sticky;
  top: 0;
  z-index: 50;
}

.barra-superior-marca {
  display: flex;
  align-items: center;
  gap: 14px;
}
.barra-superior-marca img { width: 40px; height: 40px; }
.barra-superior-nome {
  font-weight: 800;
  font-size: 26px;
  color: var(--sec-ativo-texto);
  letter-spacing: 0.2px;
}
.barra-superior-nome-rh {
  font-weight: 500;
  font-size: 15px;
  color: var(--sec-muted);
  margin-left: 4px;
  vertical-align: middle;
}

.barra-superior-usuario {
  display: flex;
  align-items: center;
  gap: 16px;
}
.barra-superior-usuario-texto {
  font-size: 13px;
  font-weight: 600;
  color: var(--sec-texto);
}
.badge-perfil {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: #fff3cd;
  color: #7a5b00;
  white-space: nowrap;
}
.barra-superior-sair {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--sec-muted);
  cursor: pointer;
}
.barra-superior-sair:hover { background: var(--sec-hover); color: var(--sec-texto); }

.app-dp {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 72px);
  width: 100%;
  background: var(--sec-bg-pagina);
}

.sidebar-dp {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--sec-borda);
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  padding: 14px 10px;
  box-sizing: border-box;
  position: sticky;
  top: 72px;
  transition: width 0.2s ease;
}

.sidebar-dp.colapsada { width: 64px; }
.sidebar-dp.colapsada .sidebar-dp-texto { display: none; }
.sidebar-dp.colapsada .sidebar-dp-nav button,
.sidebar-dp.colapsada .sidebar-dp-rodape button { justify-content: center; }

.sidebar-dp-nav.abas {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 0;
  border: 1px solid var(--sec-borda);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
.sidebar-dp-nav.abas > button {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-start;
  text-align: left;
  padding: 15px 18px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--sec-borda);
  background: transparent;
  color: var(--sec-texto);
  font-weight: 500;
  font-size: 14px;
}
.sidebar-dp-nav.abas button:hover { background: var(--sec-hover); }
.sidebar-dp-nav.abas button.ativa {
  background: transparent;
  color: var(--sec-ativo-texto);
  font-weight: 700;
  border: none;
}

.sidebar-dp-icone { width: 20px; text-align: center; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }

.sidebar-dp-rodape {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 10px;
  border: 1px solid var(--sec-borda);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.sidebar-dp-rodape button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--sec-borda);
  background: transparent;
  color: var(--sec-muted);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.sidebar-dp-rodape button:last-child { border-bottom: none; }
.sidebar-dp-rodape button:hover { background: var(--sec-hover); color: var(--sec-texto); }

.conteudo-dp {
  flex: 1;
  min-width: 0;
  padding: 20px 24px 60px;
  box-sizing: border-box;
}

.btn-menu-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sec-texto);
  cursor: pointer;
  flex-shrink: 0;
}
.btn-menu-mobile:hover { background: var(--sec-hover); }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 30, 0.45);
  z-index: 150;
}
.sidebar-backdrop.aberta-mobile { display: block; }

@media (max-width: 860px) {
  /* No modo coluna o eixo cruzado do flex vira a largura — sem isso,
     "align-items: flex-start" (herdado do desktop) deixa cada filho largo
     igual ao conteúdo que ele "quer" ter (ex: a grade de cards com
     auto-fit/minmax calculando 2 colunas), em vez de ocupar a tela toda,
     e isso estourava pra fora da tela no celular. */
  .app-dp { flex-direction: column; align-items: stretch; }

  .btn-menu-mobile { display: inline-flex; }

  /* O menu lateral no celular vira uma gaveta que desliza por cima do
     conteúdo — mesma lista vertical do desktop (os grupos abrem no lugar,
     sanfona, sem balão flutuante nenhum), só que some da tela por padrão e
     só aparece quando o botão ☰ é tocado. Isso evita ter que espremer tudo
     numa barra horizontal com rolagem (onde o texto ficava sobreposto). */
  .sidebar-dp {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    max-width: 82vw;
    min-height: 0;
    max-height: none;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 200;
    overflow-y: auto;
    box-shadow: 0 0 24px rgba(0,0,0,0.18);
  }
  .sidebar-dp.aberta-mobile { transform: translateX(0); }
  .sidebar-dp.colapsada { width: 260px; }
  .sidebar-dp.colapsada .sidebar-dp-texto { display: inline; }
  .sidebar-dp.colapsada .sidebar-dp-nav button,
  .sidebar-dp.colapsada .sidebar-dp-rodape button { justify-content: flex-start; }

  .conteudo-dp { padding: 16px 16px 60px; }
  .barra-superior-dp { padding: 0 14px; }
  .barra-superior-nome { display: none; }
  /* Rede de segurança: nada dentro do painel deve criar rolagem horizontal
     na página inteira no celular (o motivo de fundo que "vazava" na tela). */
  #tela-dp { overflow-x: hidden; }
}

/* Celular estreito: dois campos de data lado a lado ficam apertados demais
   (o seletor nativo de data precisa de espaço) — empilha um embaixo do outro. */
@media (max-width: 480px) {
  .linha-filtros { grid-template-columns: 1fr; }
}

/* ---------- Calculadora ---------- */
.calc-grade {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 32px;
  gap: 6px;
}
.calc-tecla {
  padding: 6px 0;
  border-radius: 0px;
  border: 1px solid var(--sec-borda-input);
  background: #fff;
  color: var(--sec-texto);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.calc-tecla:hover { background: var(--sec-hover); }
.calc-tecla-clara { background: var(--sec-track); color: var(--sec-muted); }
.calc-tecla-mem { background: var(--sec-track); color: var(--sec-muted); font-size: 11px; }
.calc-tecla-op { background: #fff; color: var(--sec-texto); }
.calc-tecla-igual { background: var(--hope); color: #06231e; font-size: 18px; font-weight: 700; }

/* ---------- Calculadora flutuante ("em nuvem") ----------
   Réplica da "Calculadora de Horas" do Secullum: painel branco com cantos
   retos, cabeçalho cinza-claro (não colorido) e sombra "dura" deslocada. */
.calculadora-flutuante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 270px;
  background: #fff;
  border-radius: 0px;
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.2);
  border: 1px solid var(--sec-borda-forte);
  z-index: 500;
  overflow: hidden;
}

.calc-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--sec-bg-pagina);
  border-bottom: 1px solid var(--sec-borda-forte);
  color: var(--sec-texto);
  font-weight: 400;
  font-size: 14px;
  cursor: move;
  user-select: none;
}

.calc-fechar {
  background: none;
  border: none;
  color: var(--sec-texto);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}

.calc-corpo { padding: 12px; background: #fff; }

#calc-visor {
  width: 100%;
  box-sizing: border-box;
  text-align: right;
  font-size: 22px;
  padding: 8px 10px;
  margin-bottom: 10px;
  border-radius: 0px;
  border: 1px solid var(--sec-borda-input);
  font-family: 'Roboto', sans-serif;
}

.calc-historico-titulo {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  margin-top: 12px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.calc-historico {
  max-height: 90px;
  overflow-y: auto;
  border: 1px solid var(--sec-borda-input);
  border-radius: 0px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--sec-muted);
  background: #fff;
}

.calc-historico-linha { padding: 3px 0; border-bottom: 1px dashed rgba(0,0,0,0.06); }
.calc-historico-linha:last-child { border-bottom: none; }

/* ---------- Grupos do menu lateral (Cadastros, Relatórios) ---------- */
.sidebar-dp-grupo-cabecalho {
  display: flex !important;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 18px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--sec-texto);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.sidebar-dp-grupo-cabecalho:hover { background: var(--sec-hover); }
.sidebar-dp-grupo-cabecalho.ativa { color: var(--sec-ativo-texto); font-weight: 700; background: transparent; }

.sidebar-dp-seta {
  margin-left: auto;
  color: var(--sec-muted);
  display: inline-flex;
  transition: transform 0.2s ease;
}
.sidebar-dp-grupo-cabecalho.aberto .sidebar-dp-seta { transform: rotate(180deg); }

.sidebar-dp-grupo {
  display: none;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 1px;
}
.sidebar-dp-grupo.aberto { display: flex; }

.sidebar-dp-grupo button {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-start;
  text-align: left;
  padding: 13px 18px 13px 40px;
  font-size: 14px;
  border: none;
  border-radius: 0;
  flex: none;
  width: 100%;
  background: var(--sec-hover);
  color: var(--sec-texto);
  font-weight: 500;
}
.sidebar-dp-grupo button:hover { background: var(--sec-borda); }
.sidebar-dp-grupo button.ativa { color: var(--sec-ativo-texto); font-weight: 700; }

.sidebar-dp.colapsada .sidebar-dp-grupo,
.sidebar-dp.colapsada .sidebar-dp-seta { display: none; }

/* ---------- Cabeçalho de página (estilo "PÁGINA INICIAL" do Secullum) ---------- */
.cabecalho-pagina {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--sec-borda);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--sec-ativo-texto);
}

.cabecalho-pagina-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sec-texto);
}

/* ---------- Tabela no padrão do Secullum: cabeçalho com ações, busca,
   colunas ordenáveis e rodapé com paginação ---------- */
.tabela-cabecalho-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.tabela-cabecalho-card h2 { margin: 0; }

.tabela-acoes-redondas { display: flex; gap: 6px; }
.botao-redondo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}
.botao-redondo.adicionar { background: var(--hope); color: #06231e; }
.botao-redondo.adicionar:hover { background: var(--hope-escuro); }
.botao-redondo.remover { background: var(--sec-texto); }
.botao-redondo.remover:hover { background: #40434a; }
.botao-redondo:disabled { opacity: 0.4; cursor: default; }
/* Fica esmaecido quando não há nada selecionado, mas continua clicável —
   clicar sem nada marcado explica o que fazer, em vez de só não reagir. */
.botao-redondo.atenuado { opacity: 0.4; }

.tabela-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 10px;
  flex-wrap: wrap;
}
/* Botão "+ Incluir"/"+ Nova marcação" no topo das telas de cadastro — sem
   isso ele herda width:100% do .primario genérico (feito pra tela de login)
   e vira uma barra gigante dentro do toolbar flex. */
.tabela-toolbar button.primario {
  width: auto;
  flex: none;
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 6px;
}
.tabela-toolbar-tamanho {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--sec-muted);
}
.tabela-toolbar-tamanho select {
  width: auto;
  padding: 4px 8px;
  border: 1px solid var(--sec-borda-input);
  border-radius: 2px;
  background: #fff;
  font-size: 13px;
}
.tabela-toolbar-busca {
  position: relative;
  min-width: 220px;
}
.tabela-toolbar-busca input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--sec-borda-forte);
  border-radius: 0;
  padding: 6px 24px 6px 4px;
  background: transparent;
  font-size: 13px;
}
.tabela-toolbar-busca input:focus { border-color: var(--sec-ativo-texto); box-shadow: none; }
.tabela-toolbar-busca svg {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sec-muted);
  pointer-events: none;
}

.conteudo-dp th[data-ordenar] { cursor: pointer; user-select: none; white-space: nowrap; }
.conteudo-dp th[data-ordenar] .seta-ordenar { margin-left: 4px; color: var(--sec-muted); font-size: 10px; display: inline-block; }
.conteudo-dp th[data-ordenar].ordenado-asc .seta-ordenar,
.conteudo-dp th[data-ordenar].ordenado-desc .seta-ordenar { color: var(--sec-ativo-texto); }

.tabela-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--sec-muted);
}
.tabela-paginacao { display: flex; gap: 4px; }
.tabela-paginacao button {
  padding: 5px 10px;
  border: 1px solid var(--sec-borda-input);
  background: #fff;
  border-radius: 2px;
  font-size: 12.5px;
  color: var(--sec-texto);
  cursor: pointer;
}
.tabela-paginacao button:hover:not(:disabled) { background: var(--sec-hover); }
.tabela-paginacao button:disabled { color: #c5c8cc; cursor: default; }
.tabela-paginacao button.pagina-atual { background: var(--sec-ativo-texto); color: #fff; border-color: var(--sec-ativo-texto); font-weight: 700; }

/* Linha inteira clicável (clicar em qualquer célula abre o registro) — igual
   ao Secullum, onde as telas de cadastro (Horários, Empresas etc.) abrem o
   item ao clicar na linha, não só num botão "editar" separado. */
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover { background: var(--sec-hover); }

/* ---------- Rotatividade (estilo Secullum: 3 cartões + gráfico) ---------- */
.grade-rotatividade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.rotatividade-bloco {
  border: 1px solid var(--sec-borda);
  border-radius: 4px;
  padding: 16px 18px;
}
.rotatividade-bloco h3 { margin: 0 0 12px; font-size: 15px; }
.rotatividade-linha {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--sec-borda);
}
.rotatividade-linha:last-child { border-bottom: none; }
.rotatividade-bloco-donut { display: flex; flex-direction: column; align-items: center; text-align: center; }
.rotatividade-legenda { display: flex; gap: 16px; margin-top: 10px; font-size: 12.5px; color: var(--sec-muted); }
.rotatividade-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.rotatividade-cor-admissao { background: #22c55e; }
.rotatividade-cor-demissao { background: #ef4444; }

.rot-grafico {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 180px;
  border-bottom: 1px solid var(--sec-borda);
  padding: 0 4px;
}
.rot-mes-coluna { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.rot-mes-barras { display: flex; align-items: flex-end; gap: 2px; height: 160px; width: 100%; justify-content: center; }
.rot-mes-barra { width: 40%; min-height: 2px; border-radius: 2px 2px 0 0; }
.rot-mes-barra-adm { background: #22c55e; }
.rot-mes-barra-dem { background: #ef4444; }
.rot-mes-label { font-size: 11px; color: var(--sec-muted); margin-top: 6px; }

/* ---------- Auditoria de Conformidade ---------- */
.aviso-conformidade {
  background: #fff8e6;
  border: 1px solid #f0d488;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  color: #6b5a1e;
  margin: 12px 0 4px;
}

.conformidade-nota {
  display: inline-block;
  font-weight: 800;
  font-size: 15px;
  padding: 2px 10px;
  border-radius: 999px;
}
.conformidade-alta { background: rgba(34,197,94,0.15); color: #15803d; }
.conformidade-media { background: rgba(245,158,11,0.18); color: #b45309; }
.conformidade-baixa { background: rgba(239,68,68,0.15); color: #b91c1c; }

.apontamento-item {
  border: 1px solid var(--sec-borda);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.apontamento-titulo { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.apontamento-descricao { font-size: 13px; color: var(--sec-texto); margin-bottom: 6px; }
.apontamento-meta { font-size: 12px; color: var(--sec-muted); }
.apontamento-meta b { color: var(--sec-texto); font-family: monospace; }
.apontamento-citacao { font-size: 11.5px; color: var(--sec-muted); font-style: italic; margin-top: 4px; }

.link-ver-apontamentos {
  background: none;
  border: none;
  color: var(--hope-escuro);
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

/* ---------- Tela de login: réplica do cartão de autenticação do Secullum
   (cartão branco, cantos quase retos, borda fina, campos com ícone) ---------- */
#tela-login { padding-top: 40px; }

#tela-login .abas button {
  border-radius: 3px;
}

#tela-login .card {
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid var(--sec-borda, #dee0e4);
  padding: 26px 24px;
}

#tela-login label { color: var(--sec-muted, var(--muted)); }

#tela-login input:not([type="checkbox"]) {
  border-radius: 4px;
  padding: 11px 12px 11px 38px;
  background-color: #fff;
  border: 1px solid var(--sec-borda-input, #bbbdc1);
  background-position: 11px center;
  background-repeat: no-repeat;
  background-size: 16px;
}
#tela-login input:focus { box-shadow: none; border-color: var(--hope-escuro); }

#tela-login input#login-cnpj,
#tela-login input#login-cnpj-dp {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767e87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><line x1='3' y1='9' x2='21' y2='9'/><line x1='7' y1='13' x2='11' y2='13'/></svg>");
}
#tela-login input#login-senha-empresa,
#tela-login input#login-senha {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767e87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>");
}
#tela-login .campo-senha input { padding-right: 56px; }