/* =====================================================================
   Ponto by Orbitaree - estilo v1.0
   Paleta derivada da tinta da planilha original (#004E4C).
   ===================================================================== */

:root {
  --bg:        #08110F;
  --bg-2:      #0C1917;
  --superficie:#10201E;
  --superficie-2:#152927;
  --linha:     #1D3733;
  --linha-forte:#2A514A;

  --ink:       #E7F3F0;
  --ink-2:     #9BBAB4;
  --ink-3:     #6A8C86;

  --acento:    #00C2A0;
  --acento-2:  #7BE3C9;
  --acento-fundo: rgba(0, 194, 160, .12);

  --pos:       #3FD69B;
  --neg:       #FF7A73;
  --alerta:    #F2B441;
  --info:      #5EA9FF;

  /* Texto que fica em cima de um fundo colorido */
  --sobre-acento: #04211C;
  --sobre-alerta: #2A1B00;

  /* Véus e traços que mudam de sentido entre os temas */
  --vidro:       rgba(3, 9, 8, .72);
  --linha-suave: rgba(29, 55, 51, .55);
  --linha-tenue: rgba(29, 55, 51, .40);
  --tinta-fds:   rgba(0, 0, 0, .22);
  --tinta-feriado: rgba(255, 122, 115, .05);
  --tinta-hover: rgba(0, 194, 160, .045);
  --hachura:     rgba(255, 255, 255, .025);
  --btn-hover:   #1B3532;
  --placeholder: rgba(106, 140, 134, .45);

  --texto-erro:  #FFC3BF;
  --texto-aviso: #FFDFA6;
  --texto-info:  #C4DEFF;

  --luz-1: rgba(0, 194, 160, .14);
  --luz-2: rgba(0, 78, 76, .35);

  --raio:      10px;
  --raio-s:    6px;
  --sombra:    0 18px 40px rgba(0, 0, 0, .45);

  color-scheme: dark;

  --fonte:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

/* ---------------------------------------------------------- tema claro */
/* Mesma estrutura, outra pele: só os tokens mudam. O acento fica mais
   escuro para manter contraste sobre fundo branco.                     */

[data-tema="claro"] {
  --bg:        #F1F5F4;
  --bg-2:      #E8F0ED;
  --superficie:#FFFFFF;
  --superficie-2:#F2F7F5;
  --linha:     #DBE6E3;
  --linha-forte:#BDD0CB;

  --ink:       #10221F;
  --ink-2:     #3F5F59;
  --ink-3:     #6D8A84;

  --acento:    #00806B;
  --acento-2:  #00604F;
  --acento-fundo: rgba(0, 128, 107, .10);

  --pos:       #14804F;
  --neg:       #C23A2F;
  --alerta:    #8A6100;
  --info:      #1D66C0;

  --sobre-acento: #FFFFFF;
  --sobre-alerta: #FFFFFF;

  --vidro:       rgba(18, 38, 34, .45);
  --linha-suave: rgba(16, 34, 31, .10);
  --linha-tenue: rgba(16, 34, 31, .07);
  --tinta-fds:   rgba(16, 34, 31, .045);
  --tinta-feriado: rgba(194, 58, 47, .06);
  --tinta-hover: rgba(0, 128, 107, .06);
  --hachura:     rgba(16, 34, 31, .045);
  --btn-hover:   #E3EDEA;
  --placeholder: rgba(109, 138, 132, .65);

  --texto-erro:  #8C1F16;
  --texto-aviso: #6B4A00;
  --texto-info:  #14498F;

  --luz-1: rgba(0, 128, 107, .10);
  --luz-2: rgba(0, 128, 107, .05);

  --sombra: 0 16px 36px rgba(15, 45, 40, .14);

  color-scheme: light;
}

* { box-sizing: border-box; }

/* --------------------------------------------------- barra de rolagem */
/* A barra nativa vinha branca porque o navegador não sabia o tema da
   página. color-scheme resolve o padrão; as regras abaixo alinham o
   desenho ao restante do sistema.                                      */

* { scrollbar-width: thin; scrollbar-color: var(--linha-forte) var(--bg-2); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-corner { background: var(--bg-2); }
::-webkit-scrollbar-thumb {
  background: var(--linha-forte);
  border: 2px solid var(--bg-2);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ---------------------------------------------------------------- marca */

.marca { display: flex; align-items: center; gap: 12px; padding: 22px 20px 26px; }

.marca-simbolo {
  display: grid;
  grid-template-columns: repeat(2, 7px);
  grid-template-rows: repeat(2, 7px);
  gap: 3px;
  transform: rotate(45deg);
}
.marca-simbolo span { background: var(--acento); border-radius: 1px; }
.marca-simbolo span:nth-child(2) { background: var(--acento-2); opacity: .75; }
.marca-simbolo span:nth-child(3) { background: var(--acento); opacity: .45; }
.marca-simbolo span:nth-child(4) { background: var(--acento-2); }
.marca-simbolo.grande { grid-template-columns: repeat(2, 12px); grid-template-rows: repeat(2, 12px); gap: 5px; }

.marca-texto strong { display: block; font-size: 17px; letter-spacing: -.02em; }
.marca-texto small  { display: block; color: var(--ink-3); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* ---------------------------------------------------------------- login */

.tela-login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 15% -10%, var(--luz-1), transparent 60%),
    radial-gradient(700px 500px at 100% 110%, var(--luz-2), transparent 60%),
    var(--bg);
}

.login-caixa {
  width: min(400px, 100%);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--sombra);
}

.login-marca { display: grid; justify-items: center; text-align: center; gap: 10px; margin-bottom: 26px; }
.login-marca h1 { font-size: 22px; margin-top: 6px; }
.login-marca h1 em { font-style: normal; color: var(--ink-3); font-weight: 400; font-size: 14px; display: block; }
.login-marca p { color: var(--ink-2); font-size: 13px; }

.login-form { display: grid; gap: 14px; }
.login-form label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.login-rodape { margin-top: 22px; text-align: center; color: var(--ink-3); font-size: 11px; letter-spacing: .1em; }

/* ---------------------------------------------------------------- campos */

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=month], input[type=time], select, textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  color: var(--ink);
  font-family: var(--fonte);
  font-size: 14px;
  transition: border-color .15s, background .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--linha-forte); }
input:focus, select:focus, textarea:focus { border-color: var(--acento); outline: none; background: var(--bg); }
input[type=time], input[type=date], input[type=month] { font-family: var(--mono); }
::placeholder { color: var(--ink-3); }

select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 14px center, right 9px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; }

label small { color: var(--ink-3); font-size: 11.5px; }

/* ---------------------------------------------------------------- botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--superficie-2);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-s);
  color: var(--ink);
  font-family: var(--fonte);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover:not(:disabled) { background: var(--btn-hover); border-color: var(--acento); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn.principal { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.btn.principal:hover:not(:disabled) { background: var(--acento-2); border-color: var(--acento-2); }

.btn.perigo { border-color: rgba(255, 122, 115, .45); color: var(--neg); }
.btn.perigo:hover:not(:disabled) { background: rgba(255, 122, 115, .12); border-color: var(--neg); }

.btn.bloco { width: 100%; }
.btn.mini { padding: 4px 10px; font-size: 12px; }

/* ---------------------------------------------------------------- layout */

.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

.lateral {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-right: 1px solid var(--linha);
  position: sticky;
  top: 0;
  height: 100vh;
}

.nav { flex: 1; padding: 0 12px; display: grid; align-content: start; gap: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--raio-s);
  color: var(--ink-2);
  font-size: 14px;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--superficie); color: var(--ink); }
.nav-item.ativo { background: var(--acento-fundo); color: var(--acento-2); font-weight: 600; }
.nav-ico { font-size: 13px; opacity: .8; width: 16px; text-align: center; }

.nav-sub { display: none; padding: 4px 0 8px 39px; gap: 1px; }
.nav-grupo.aberto .nav-sub { display: grid; }
.nav-sub a { padding: 5px 0; color: var(--ink-3); font-size: 12.5px; }
.nav-sub a:hover { color: var(--acento-2); }

.lateral-rodape { padding: 16px 16px 18px; border-top: 1px solid var(--linha); display: grid; gap: 10px; }
.usuario { display: flex; align-items: center; gap: 10px; }
.usuario-avatar {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  background: var(--acento-fundo); border: 1px solid var(--linha-forte);
  border-radius: 50%; color: var(--acento-2); font-weight: 600; font-size: 13px;
}
.usuario-dados strong { display: block; font-size: 13px; font-weight: 500; }
.usuario-dados small  { display: block; color: var(--ink-3); font-size: 11px; }
.sair { color: var(--ink-3); font-size: 12.5px; }
.sair:hover { color: var(--neg); }
.versao { color: var(--ink-3); font-size: 10.5px; letter-spacing: .1em; }

.conteudo { padding: 26px 30px 60px; max-width: 1500px; }

.topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.topo h1 { font-size: 24px; }
.topo-sub { color: var(--ink-2); font-size: 13.5px; margin-top: 3px; }
.topo-acoes { display: flex; gap: 8px; }

.menu-toggle {
  display: none;
  position: fixed; top: 14px; left: 14px; z-index: 60;
  width: 38px; height: 38px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio-s); color: var(--ink); font-size: 16px; cursor: pointer;
}

/* ------------------------------------------------------- menu recolhido */

.encolher {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 10px;
  background: none; border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  color: var(--ink-3); font-family: var(--fonte); font-size: 12.5px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.encolher:hover { color: var(--acento-2); border-color: var(--linha-forte); }
.encolher-seta { display: inline-block; width: 16px; text-align: center; font-size: 15px; transition: transform .2s; }

.app.encolhido { grid-template-columns: 72px 1fr; }
.app.encolhido .marca { justify-content: center; padding: 22px 0 26px; }
.app.encolhido .marca-texto,
.app.encolhido .nav-texto,
.app.encolhido .nav-sub,
.app.encolhido .usuario-dados,
.app.encolhido .versao { display: none; }
.app.encolhido .nav { padding: 0 10px; }
.app.encolhido .nav-item { justify-content: center; padding: 10px 0; gap: 0; }
.app.encolhido .nav-ico { font-size: 15px; }
.app.encolhido .lateral-rodape { padding: 14px 10px 16px; justify-items: center; }
.app.encolhido .usuario { justify-content: center; }
.app.encolhido .encolher { justify-content: center; padding: 7px 0; }
.app.encolhido .encolher-seta { transform: rotate(180deg); }
.app.encolhido .sair { font-size: 11px; }

/* ---------------------------------------------------------------- frase */

.faixa-frase {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin-bottom: 18px;
  background: linear-gradient(90deg, var(--acento-fundo), transparent 70%);
  border-left: 2px solid var(--acento);
  border-radius: 0 var(--raio) var(--raio) 0;
}
.faixa-frase p { color: var(--ink-2); font-size: 13.5px; font-style: italic; }
.frase-marca { color: var(--acento); font-size: 20px; line-height: 1; }

/* ---------------------------------------------------------------- filtros */

.filtro-linha {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 18px;
}
.filtro-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.campo-inline { display: grid; gap: 4px; }
.campo-inline > span { color: var(--ink-3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.campo-inline input, .campo-inline select { width: auto; min-width: 150px; }

.chip {
  padding: 5px 11px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 12px;
}

/* ---------------------------------------------------------------- cards */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 20px; }

.card {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 16px 18px;
  display: grid;
  gap: 5px;
  align-content: start;
}
.card.destaque { border-color: var(--linha-forte); background: linear-gradient(160deg, var(--superficie-2), var(--superficie)); }
.card-rotulo { color: var(--ink-3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.card-valor { font-size: 30px; font-weight: 500; line-height: 1.1; }
.card-valor.pos { color: var(--pos); }
.card-valor.neg { color: var(--neg); }
.card-nota { color: var(--ink-3); font-size: 12px; }

/* ---------------------------------------------------------------- painéis */

.painel {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 18px 20px 20px;
  margin-bottom: 18px;
}
.painel.sem-borda { padding: 0; overflow: hidden; }

.painel-topo { margin-bottom: 14px; }
.painel-topo.linha { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.painel-topo h2 { font-size: 15px; }
.painel-topo p { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.painel-acoes { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }

.painel.sem-borda .tabela-envolve { border-radius: var(--raio); }

.colunas-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }

/* ------------------------------------------------------- gráfico de dias */

.grafico-dias {
  display: flex; align-items: stretch; gap: 3px;
  height: 150px; padding-top: 4px;
  border-bottom: 1px dashed var(--linha-forte);
}
.gd-col { flex: 1; min-width: 0; position: relative; }
.gd-cima, .gd-baixo { display: flex; height: 50%; }
.gd-cima { align-items: flex-end; }
.gd-baixo { align-items: flex-start; }
.gd-barra { width: 100%; border-radius: 2px; }
.gd-cima .gd-barra { background: var(--pos); }
.gd-baixo .gd-barra { background: var(--neg); }
.gd-col.vazio .gd-barra { background: var(--linha); }
.gd-col.fds::after, .gd-col.feriado::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--hachura) 4px, var(--hachura) 8px);
  pointer-events: none;
}
.gd-col:hover .gd-barra { filter: brightness(1.35); }
.gd-rotulo {
  position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%);
  color: var(--ink-3); font-family: var(--mono); font-size: 9px;
}
.grafico-dias + * { margin-top: 24px; }

/* --------------------------------------------------------- barras do mês */

.barras-mes { display: grid; gap: 10px; }
.bm-linha { display: grid; grid-template-columns: 42px 1fr 74px; align-items: center; gap: 10px; }
.bm-rotulo { color: var(--ink-2); font-family: var(--mono); font-size: 11.5px; }
.bm-trilha { position: relative; height: 8px; background: var(--bg-2); border-radius: 999px; }
.bm-trilha::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--linha-forte); }
.bm-barra { position: absolute; top: 0; height: 8px; border-radius: 999px; }
.bm-barra.pos { left: 50%; background: var(--pos); }
.bm-barra.neg { right: 50%; background: var(--neg); }
.bm-valor { text-align: right; font-family: var(--mono); font-size: 12.5px; }

/* ---------------------------------------------------------------- listas */

.lista-marcos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lm-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; background: var(--bg-2); border-radius: var(--raio-s); }
.lm-data { font-family: var(--mono); font-size: 12px; color: var(--ink-2); min-width: 62px; }
.lm-texto { flex: 1; font-size: 13px; }
.lm-faltam { color: var(--ink-3); font-size: 11.5px; font-family: var(--mono); }
.lm-tag { padding: 2px 7px; border-radius: 4px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.lm-tag.feriado     { background: rgba(255,122,115,.14); color: var(--neg); }
.lm-tag.facultativo { background: rgba(242,180,65,.14);  color: var(--alerta); }
.lm-tag.pagamento   { background: rgba(63,214,155,.14);  color: var(--pos); }
.lm-tag.ticket      { background: rgba(94,169,255,.14);  color: var(--info); }
.lm-tag.informativo { background: var(--superficie-2);   color: var(--ink-2); }

.lista-pendencias { display: grid; gap: 8px; }
.pend-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-left: 2px solid var(--alerta);
  border-radius: 0 var(--raio-s) var(--raio-s) 0;
  font-size: 13px;
}
.pend-item.sem_batida { border-left-color: var(--neg); }
.pend-item.impar      { border-left-color: var(--alerta); }
.pend-item.sem_justif { border-left-color: var(--info); }
.pend-data { font-family: var(--mono); font-size: 12px; color: var(--ink-2); min-width: 90px; }
.pend-item a { margin-left: auto; color: var(--acento-2); font-size: 12.5px; }

.vazio-feliz { padding: 18px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* ---------------------------------------------------------------- tabelas */

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

.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th {
  text-align: left; padding: 9px 12px;
  color: var(--ink-3); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--linha);
}
.tabela td { padding: 9px 12px; border-bottom: 1px solid var(--linha); }
.tabela tbody tr:hover { background: var(--bg-2); }
.tabela .col-acao { width: 1%; white-space: nowrap; text-align: right; }
.vazio { color: var(--ink-3); text-align: center; padding: 26px !important; font-size: 13px; }

/* -------------------------------------------------------- fita (planilha) */

.resumo-fita {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px; margin-bottom: 16px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}
.resumo-fita > div { background: var(--superficie); padding: 12px 16px; display: grid; gap: 3px; }
.resumo-fita span { color: var(--ink-3); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.resumo-fita strong { font-size: 19px; font-weight: 500; }
.resumo-fita strong.pos { color: var(--pos); }
.resumo-fita strong.neg { color: var(--neg); }

.fita { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }

/* Com table-layout: fixed quem define a largura é o colgroup — as
   colunas de hora ficam sob um <th colspan="2">, então declarar largura
   no <td> não teria efeito e a tabela se espalhava. */
.fita col.c-data  { width: 66px; }
.fita col.c-dia   { width: 40px; }
.fita col.c-hora  { width: 58px; }
.fita col.c-num   { width: 70px; }
.fita col.c-mini  { width: 38px; }
.fita col.c-oc    { width: 84px; }
.fita thead th.col-oc { font-size: 10px; letter-spacing: .07em; }
.fita col.c-just  { width: auto; min-width: 150px; }

.fita thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--superficie-2);
  padding: 8px 8px;
  color: var(--ink-3); font-size: 10px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--linha-forte);
}
.fita thead th.grupo { text-align: center; color: var(--ink-3); border-left: 1px solid var(--linha); font-size: 9.5px; }
.fita thead th.col-num { text-align: right; }

.fita tbody td { padding: 0 8px; height: 33px; border-bottom: 1px solid var(--linha-suave); white-space: nowrap; }
.fita tbody tr:hover td { background: var(--tinta-hover); }

.fita tr.fds td, .fita tr.feriado td { background: var(--tinta-fds); color: var(--ink-3); }
.fita tr.feriado td { background: var(--tinta-feriado); }
.fita tr.hoje td { box-shadow: inset 0 1px 0 var(--acento), inset 0 -1px 0 var(--acento); }
.fita tr.alterado td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }

.fita .col-data { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.fita .col-dia  { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.fita .col-num  { text-align: right; font-family: var(--mono); }
.fita .col-mini { text-align: center; padding: 0 2px; }
.fita thead th.col-mini { text-align: center; font-size: 12px; letter-spacing: 0; }

.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fita td.hora { padding: 0 2px; border-left: 1px solid var(--linha-tenue); }

.cel-hora {
  width: 100%; height: 25px;
  padding: 0 1px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--mono); font-size: 12.5px; text-align: center;
  letter-spacing: .02em;
}
.cel-hora::placeholder { color: var(--placeholder); }
.cel-hora:hover { border-color: var(--linha-forte); }
.cel-hora:focus { border-color: var(--acento); background: var(--bg); outline: none; }
.cel-hora.invalida { border-color: var(--neg); color: var(--neg); }

.cel-texto, .cel-select {
  width: 100%; height: 25px; padding: 0 6px;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--ink); font-family: var(--fonte); font-size: 12.5px;
}
.cel-texto:hover, .cel-select:hover { border-color: var(--linha-forte); }
.cel-texto:focus, .cel-select:focus { border-color: var(--acento); background: var(--bg); outline: none; }
.cel-select { background-position: right 8px center, right 4px center; padding-right: 20px; }

.val-trab { color: var(--ink); font-size: 12.5px; }
.val-saldo { font-size: 12.5px; }
.val-saldo.pos { color: var(--pos); }
.val-saldo.neg { color: var(--neg); }
.val-saldo.zero { color: var(--ink-3); }
.val-saldo.exige { text-decoration: underline dotted var(--alerta); text-underline-offset: 3px; }

.cel-icone {
  width: 24px; height: 24px;
  display: inline-grid; place-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-3);
  font-family: var(--fonte); font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
button.cel-icone:hover { color: var(--acento-2); border-color: var(--linha-forte); background: var(--bg-2); }
button.cel-icone.limpar:hover { color: var(--neg); border-color: rgba(255, 122, 115, .4); }
.cel-icone.marcado { color: var(--acento-2); border-color: rgba(0, 194, 160, .35); background: var(--acento-fundo); }
.cel-icone.pendente { color: var(--alerta); border-color: rgba(242, 180, 65, .35); }
.cel-icone.info { cursor: help; color: var(--info); }
.cel-icone.info.feriado { color: var(--neg); }
.cel-icone.info.pagamento { color: var(--pos); }


.tag-origem {
  margin-left: 5px; padding: 1px 5px;
  border-radius: 3px; background: rgba(94,169,255,.14); color: var(--info);
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
}

.fita tfoot td {
  padding: 11px 8px;
  background: var(--superficie-2);
  border-top: 1px solid var(--linha-forte);
  font-size: 14px;
}
.rodape-rotulo { text-align: right; color: var(--ink-3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
#totalSaldo.pos { color: var(--pos); }
#totalSaldo.neg { color: var(--neg); }

/* ---------------------------------------------------------------- abas */

.abas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--linha); }
.aba {
  padding: 9px 15px; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--ink-3); font-family: var(--fonte); font-size: 13.5px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.aba:hover { color: var(--ink); }
.aba.ativa { color: var(--acento-2); border-bottom-color: var(--acento); font-weight: 600; }

.painel-aba { display: none; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px 20px; }
.painel-aba.ativa { display: block; }

.form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: start; }
.form-grade label { display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
.form-grade .grupo-campos { grid-column: 1 / -1; border: 1px solid var(--linha); border-radius: var(--raio-s); padding: 14px 16px; }
.form-grade legend { color: var(--ink-3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 0 6px; }
.linha-horarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 8px; }
.form-acoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; }

.banco-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.br-item { background: var(--bg-2); border: 1px solid var(--linha); border-radius: var(--raio-s); padding: 12px 14px; display: grid; gap: 3px; }
.br-item span { color: var(--ink-3); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.br-item strong { font-family: var(--mono); font-size: 20px; font-weight: 500; }
.br-item strong.pos { color: var(--pos); }
.br-item strong.neg { color: var(--neg); }

/* ------------------------------------------- contenção de largura */
/* Item de grid tem min-width auto: sem isto, qualquer conteúdo largo
   empurra a coluna e cria rolagem horizontal na página inteira.      */
.app > *,
.conteudo > *,
.colunas-2 > *,
.cards > *,
.painel,
.grafico-dias,
.barras-mes,
.lista-marcos,
.lista-pendencias { min-width: 0; }

.conteudo { min-width: 0; overflow-x: clip; }

.lm-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pend-item > span:not(.pend-data) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------- card do banco na fita */

.resumo-fita .fita-banco { background: linear-gradient(160deg, var(--superficie-2), var(--superficie)); }
.resumo-fita .fita-banco small { color: var(--ink-3); font-size: 11px; letter-spacing: 0; text-transform: none; }

/* ---------------------------------------------------------- abono */



.abono-resultado {
  padding: 9px 12px;
  background: var(--bg-2);
  border-radius: var(--raio-s);
  color: var(--acento-2);
  font-family: var(--mono); font-size: 13px;
}

/* ------------------------------------------- período de apuração */

.periodo-banco {
  padding: 16px 18px;
  margin-bottom: 18px;
  background: var(--bg-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.periodo-banco-titulo { color: var(--ink-3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.periodo-banco-nota { color: var(--ink-3); font-size: 12px; margin-top: 12px; }





/* --------------------------------------------- topo fixo da grade */
/* Em vez de grudar o topo com sticky — que depende do overflow de cada
   ancestral — quem rola é a própria grade. O bloco de cima fica onde
   está, e o cabeçalho da tabela gruda dentro da área rolável.         */

.barra-fixa > *:last-child { margin-bottom: 12px; }

.fita-envolve {
  overflow: auto;
  max-height: var(--altura-fita, 60vh);
  overscroll-behavior: contain;
}

@media print {
  .fita-envolve { max-height: none; overflow: visible; }
}

/* ------------------------------------------------ fluxo de aprovação */

.faixa-fluxo {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-left-width: 3px;
  border-radius: var(--raio);
}
.faixa-fluxo[hidden] { display: none; }
.faixa-fluxo.rascunho { border-left-color: var(--linha-forte); }
.faixa-fluxo.pendente { border-left-color: var(--alerta); }
.faixa-fluxo.aprovada { border-left-color: var(--pos); }
.faixa-fluxo.recusada { border-left-color: var(--neg); }

.fluxo-selo {
  padding: 4px 11px; flex: none;
  border-radius: 999px;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  background: var(--superficie-2); color: var(--ink-2);
}
.faixa-fluxo.pendente .fluxo-selo { background: rgba(242,180,65,.14); color: var(--alerta); }
.faixa-fluxo.aprovada .fluxo-selo { background: rgba(63,214,155,.14); color: var(--pos); }
.faixa-fluxo.recusada .fluxo-selo { background: rgba(255,122,115,.14); color: var(--neg); }

.fluxo-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fluxo-texto strong { font-size: 13.5px; font-weight: 500; }
.fluxo-texto small { color: var(--ink-3); font-size: 12.5px; }

.nav-selo {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--alerta); color: var(--sobre-alerta);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
}
.nav-selo[hidden] { display: none; }
.app.encolhido .nav-selo { display: none; }

.usuario-perfil { color: var(--acento-2) !important; font-size: 10px !important; letter-spacing: .06em; text-transform: uppercase; }

.chips-setores { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- modal */

.modal-fundo {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 20px;
  background: var(--vidro);
  backdrop-filter: blur(3px);
}
.modal-fundo[hidden] { display: none; }

.modal {
  width: min(720px, 100%);
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: 14px;
  box-shadow: var(--sombra);
  animation: sobe .18s ease-out;
}
.modal.largo { width: min(1000px, 100%); }
.modal-fundo.cheio { padding: 0; }
.modal.cheio { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; border: none; animation: none; }
.modal.cheio .modal-corpo { flex: 1; }
@keyframes sobe { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--linha); }
.modal-topo h2 { font-size: 16px; }
.modal-fechar { background: none; border: none; color: var(--ink-3); font-size: 22px; line-height: 1; cursor: pointer; }
.modal-fechar:hover { color: var(--ink); }
.modal-corpo { padding: 20px; overflow-y: auto; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--linha); }

.form-modal { display: grid; gap: 14px; }
.form-modal label { display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
.form-modal .duas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------------------------------------------------------- importação */

.import-passo { display: grid; gap: 14px; }
.zona-arquivo {
  display: grid; place-items: center; gap: 8px;
  padding: 34px 20px;
  border: 1.5px dashed var(--linha-forte);
  border-radius: var(--raio);
  background: var(--bg-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.zona-arquivo:hover, .zona-arquivo.sobre { border-color: var(--acento); background: var(--acento-fundo); }
.zona-arquivo strong { font-size: 14px; font-weight: 500; }
.zona-arquivo small { color: var(--ink-3); font-size: 12px; }

.separador-ou { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.separador-ou::before, .separador-ou::after { content: ''; flex: 1; height: 1px; background: var(--linha); }

.alerta { padding: 10px 12px; border-radius: var(--raio-s); font-size: 13px; }
.alerta.erro  { background: rgba(255,122,115,.12); border-left: 2px solid var(--neg); color: var(--texto-erro); }
.alerta.aviso { background: rgba(242,180,65,.12);  border-left: 2px solid var(--alerta); color: var(--texto-aviso); }
.alerta.info  { background: rgba(94,169,255,.10);  border-left: 2px solid var(--info); color: var(--texto-info); }
.alerta ul { margin: 6px 0 0; padding-left: 18px; }
.alerta li { margin: 2px 0; }

.previa-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.previa-resumo div { background: var(--bg-2); border-radius: var(--raio-s); padding: 10px 12px; }
.previa-resumo span { display: block; color: var(--ink-3); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; }
.previa-resumo strong { font-family: var(--mono); font-size: 17px; font-weight: 500; }

.tabela-previa { max-height: 320px; overflow-y: auto; border: 1px solid var(--linha); border-radius: var(--raio-s); }
.tabela-previa table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabela-previa th { position: sticky; top: 0; background: var(--superficie-2); z-index: 2; }
.tabela-previa td.batidas { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.tabela-previa tr.conflito td { background: rgba(242,180,65,.07); }
.tabela-previa tr.sem-batida td { color: var(--ink-3); }

.opcao-linha { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); }
.opcao-linha input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--acento); }

.progresso { height: 4px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.progresso i { display: block; height: 4px; background: var(--acento); width: 0; transition: width .2s; }

/* ---------------------------------------- justificativa na grade */

.fita .col-just { padding: 0 6px; }

.cel-just {
  width: 100%;
  padding: 3px 7px;
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--ink-2);
  font-family: var(--fonte); font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  /* Uma linha só: a grade não pode crescer com texto comprido */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cel-just:hover { border-color: var(--linha-forte); background: var(--bg-2); color: var(--ink); }
.cel-just.vazia { color: var(--ink-3); }
.cel-just.pendente {
  color: var(--alerta);
  border-color: rgba(242, 180, 65, .35);
  background: rgba(242, 180, 65, .07);
}

/* Estrela do informativo, colada na data */
.marca-info { font-size: 10px; cursor: help; color: var(--info); }
.marca-info.feriado     { color: var(--neg); }
.marca-info.facultativo { color: var(--alerta); }
.marca-info.pagamento   { color: var(--pos); }
.marca-info.ticket      { color: var(--info); }
.marca-info.pdf         { color: var(--ink-3); }

/* Elemento com [hidden] e display no CSS do autor continua visível:
   a regra do autor vence a folha padrão do navegador. Sem esta linha,
   botões escondidos por hidden apareciam mesmo assim. */
[hidden] { display: none !important; }

/* ------------------------------------------------- modais da grade */

.batidas-do-dia {
  display: grid; gap: 4px;
  padding: 12px 14px;
  background: var(--bg-2);
  border-left: 2px solid var(--acento);
  border-radius: 0 var(--raio-s) var(--raio-s) 0;
}
.batidas-do-dia span { color: var(--ink-3); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.batidas-do-dia strong { font-size: 15px; letter-spacing: .04em; }

.opcoes-cartao { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }

.opcao-cartao {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  background: var(--bg-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.opcao-cartao:hover { border-color: var(--linha-forte); }
.opcao-cartao.marcada { border-color: var(--acento); background: var(--acento-fundo); }
.opcao-cartao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao-icone {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  background: var(--superficie-2); border-radius: 5px;
  color: var(--ink-2); font-size: 11px; font-weight: 700;
}
.opcao-cartao.marcada .opcao-icone { background: var(--acento); color: var(--sobre-acento); }

.bloco-abono {
  display: grid; gap: 8px;
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
}
.bloco-abono[hidden] { display: none; }
.bloco-abono-titulo { color: var(--ink-3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

.opcao-intervalo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 12px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.opcao-intervalo:hover { border-color: var(--linha-forte); }
.opcao-intervalo.marcada { border-color: var(--acento); background: var(--acento-fundo); }
.opcao-intervalo.desabilitada { opacity: .45; cursor: not-allowed; }
.opcao-intervalo input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.opcao-intervalo strong { font-size: 13.5px; }
.opcao-intervalo span { color: var(--ink-3); }
.manual-campos { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.manual-campos input { width: 108px; }

.sugestoes { display: flex; flex-wrap: wrap; gap: 6px; }
.sugestao {
  padding: 5px 10px;
  background: var(--bg-2);
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--ink-2);
  font-family: var(--fonte); font-size: 12px;
  cursor: pointer;
}
.sugestao:hover { border-color: var(--acento); color: var(--acento-2); }

.opcoes-modelo { display: grid; gap: 8px; }
.opcoes-modelo .opcao-intervalo strong { display: block; font-size: 13.5px; }

.ligacao {
  padding: 0; margin-left: 6px;
  background: none; border: none;
  color: var(--acento-2);
  font-family: var(--fonte); font-size: inherit;
  text-decoration: underline; cursor: pointer;
}

/* ------------------------------------------------ ciclo do banco */

.ciclo-controles { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.ciclo-explicacao { flex: 1; min-width: 240px; color: var(--ink-3); font-size: 12.5px; }
.ciclo-explicacao strong { color: var(--ink-2); font-weight: 600; }

.ciclo-meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; }

.ciclo-mes {
  padding: 10px 0;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  color: var(--ink-3);
  font-family: var(--mono); font-size: 11.5px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ciclo-mes:hover { border-color: var(--linha-forte); color: var(--ink); }
.ciclo-mes.no-ciclo { background: var(--acento-fundo); border-color: rgba(0, 194, 160, .35); color: var(--acento-2); }
.ciclo-mes.inicio { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 700; }

@media (max-width: 700px) {
  .ciclo-meses { grid-template-columns: repeat(6, 1fr); }
}

/* ------------------------------------------------- passagem do dia */

.faixa-passagem {
  padding: 14px 18px;
  margin: -8px 0 18px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-left: 2px solid var(--acento-2);
  border-radius: 0 var(--raio) var(--raio) 0;
}
.passagem-cabeca {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.passagem-rotulo {
  color: var(--ink-3);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
}
.passagem-cabeca small { color: var(--ink-3); font-size: 11.5px; opacity: .75; }

.passagem-texto {
  margin: 0;
  padding: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
  font-style: italic;
}
.passagem-referencia {
  display: block;
  margin-top: 7px;
  color: var(--acento-2);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 500;
}

.rodape-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.conta {
  padding: 0; background: none; border: none;
  color: var(--ink-3); font-family: var(--fonte); font-size: 12.5px;
  cursor: pointer;
}
.conta:hover { color: var(--acento-2); }
.app.encolhido .rodape-acoes { flex-direction: column; gap: 6px; }
.app.encolhido .conta { font-size: 11px; }

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

.aviso-grupo {
  color: var(--ink-3);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 8px;
}
.aviso-grupo + .aviso-lista { margin-bottom: 16px; }

.aviso-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.aviso-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  background: var(--bg-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
}
.aviso-item.e-hoje { border-color: var(--acento); background: var(--acento-fundo); }

.aviso-icone {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  background: var(--superficie-2);
  border-radius: 7px;
  color: var(--ink-2); font-size: 13px; font-weight: 600;
}
.aviso-item.feriado   .aviso-icone { color: var(--neg); }
.aviso-item.pagamento .aviso-icone { color: var(--pos); }
.aviso-item.ticket    .aviso-icone { color: var(--info); }
.aviso-item.facultativo .aviso-icone { color: var(--alerta); }

.aviso-corpo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.aviso-corpo strong { font-size: 13.5px; font-weight: 500; }
.aviso-corpo small { color: var(--ink-3); font-size: 12px; }

.aviso-hoje {
  padding: 3px 9px; border-radius: 999px;
  background: var(--acento); color: var(--sobre-acento);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}

.aviso-dispensar {
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-3); font-size: 11.5px;
  cursor: pointer; white-space: nowrap;
}
.aviso-dispensar input { width: 14px; height: 14px; accent-color: var(--acento); }
.aviso-dispensar:hover { color: var(--ink-2); }

/* ---------------------------------------------------------------- toasts */

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: 8px; }
.toast {
  padding: 11px 16px;
  background: var(--superficie-2);
  border: 1px solid var(--linha-forte);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio-s);
  box-shadow: var(--sombra);
  font-size: 13.5px;
  animation: entra .2s ease-out;
  max-width: 340px;
}
.toast.erro  { border-left-color: var(--neg); }
.toast.aviso { border-left-color: var(--alerta); }
@keyframes entra { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- print */

@media print {
  .lateral, .filtro-linha, .menu-toggle, .toasts, .topo-acoes, .modal-fundo { display: none !important; }
  .app { display: block; }
  body, html { background: #fff; color: #111; }
  .conteudo { padding: 0; max-width: none; }
  .painel, .resumo-fita, .resumo-fita > div { background: #fff; border-color: #ccc; }
  .fita thead th { background: #eee; color: #333; }
  .fita { min-width: 0; }
  .fita tbody td { height: auto; padding: 3px 6px; }
  .cel-hora, .cel-texto, .cel-select { color: #111; border-color: transparent; }
  .val-saldo.pos { color: #0a6b46; }
  .val-saldo.neg { color: #a11a12; }
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 1100px) {
  .colunas-2 { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .menu-toggle { display: block; }
  .lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: 250px;
    transform: translateX(-100%); transition: transform .2s ease-out;
  }
  .lateral.aberta { transform: none; box-shadow: var(--sombra); }
  .app.encolhido { grid-template-columns: 1fr; }
  .app.encolhido .marca-texto,
  .app.encolhido .nav-texto,
  .app.encolhido .usuario-dados,
  .app.encolhido .versao { display: block; }
  .app.encolhido .nav-item { justify-content: flex-start; padding: 9px 12px; gap: 11px; }
  .app.encolhido .marca { justify-content: flex-start; padding: 22px 20px 26px; }
  .app.encolhido .encolher { display: none; }
  .conteudo { padding: 62px 16px 50px; }
  .topo { flex-direction: column; }
  .fita { font-size: 12px; }
  }

/* ------------------------------------------ análise dia a dia (supervisor) */

/* Tela cheia: tabela à esquerda, resumo/banco/recado/histórico à direita */
.analise { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.analise-lado { display: grid; gap: 16px; position: sticky; top: 0; }
@media (max-width: 1100px) { .analise { grid-template-columns: 1fr; } .analise-lado { position: static; } }

.tabela-decisao { max-height: calc(100vh - 190px); }
.modal:not(.cheio) .tabela-decisao { max-height: 420px; }
.tabela-decisao .col-decisao { width: 1%; white-space: nowrap; }
.tabela-decisao td.col-decisao { white-space: normal; min-width: 260px; vertical-align: top; }
.tabela-decisao td.batidas { white-space: pre-line; }
.tabela-decisao tfoot td { border-top: 1px solid var(--linha-forte); background: var(--superficie-2); position: sticky; bottom: 0; }
.tabela-decisao .decisao-dia .btn { white-space: nowrap; }

.tabela-decisao tr.dia-aprovada td { background: rgba(63, 214, 155, .06); }
.tabela-decisao tr.dia-recusada td { background: rgba(255, 122, 115, .07); }

.decisao-dia { display: flex; gap: 6px; align-items: center; }

/* Os dois checks já nascem na cor da decisão; marcar só preenche */
.check-decisao {
  display: inline-grid; place-items: center; position: relative;
  width: 32px; height: 30px;
  border: 1px solid; border-radius: 6px;
  background: var(--bg-2);
  font-size: 15px; font-weight: 700; cursor: pointer;
  user-select: none; transition: background .12s;
}
.check-decisao input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-decisao.aprovar  { color: var(--pos); border-color: rgba(63, 214, 155, .45); }
.check-decisao.reprovar { color: var(--neg); border-color: rgba(255, 122, 115, .45); }
.check-decisao.aprovar:hover  { background: rgba(63, 214, 155, .12); }
.check-decisao.reprovar:hover { background: rgba(255, 122, 115, .12); }
.check-decisao.aprovar:has(input:checked)  { background: var(--pos); border-color: var(--pos); color: var(--sobre-acento); }
.check-decisao.reprovar:has(input:checked) { background: var(--neg); border-color: var(--neg); color: #fff; }
.check-decisao:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 1px; }

.motivo-dia {
  display: block; width: 100%; margin-top: 6px;
  padding: 5px 8px; font-size: 12.5px;
  border-color: rgba(255, 122, 115, .45);
}
.motivo-dia[hidden] { display: none !important; }

/* Bloco do banco de horas: três campos alinhados pelo topo */
.bloco-banco { display: grid; gap: 10px; }
.bloco-banco-grade { display: grid; grid-template-columns: 1fr; gap: 12px; }
.analise .bloco-banco-grade { grid-template-columns: 1fr; }
.modal:not(.cheio) .bloco-banco-grade { grid-template-columns: 180px 1fr 1fr; }
.banco-campo { display: grid; gap: 5px; align-content: start; margin: 0; }
.banco-campo .banco-rotulo { display: block; color: var(--ink-3); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; }
.banco-campo .banco-valor { display: flex; align-items: center; height: 38px; padding: 0 12px; background: var(--bg-2); border: 1px solid var(--linha); border-radius: var(--raio-s); font-size: 18px; font-weight: 500; }
.banco-campo .banco-valor.pos { color: var(--pos); }
.banco-campo .banco-valor.neg { color: var(--neg); }
.banco-campo small { color: var(--ink-3); font-size: 11.5px; line-height: 1.35; }
.banco-campo input { height: 38px; }

.lado-bloco { display: grid; gap: 8px; }
.lado-bloco textarea { resize: vertical; }
.lado-bloco .lista-marcos { max-height: 260px; overflow-y: auto; }
/* ---------------------------------- decisão do supervisor na grade */

.cel-just.reprovada {
  color: var(--neg);
  border-color: rgba(255, 122, 115, .45);
  background: rgba(255, 122, 115, .09);
}
.cel-just.aprovada-sup::before { content: '✓ '; color: var(--pos); font-weight: 700; }
.cel-just.reprovada::before    { content: '✕ '; font-weight: 700; }
.fita tr.dia-devolvido td.col-data { box-shadow: inset 3px 0 0 var(--neg); }

.resumo-fita .fita-banco-oficial small { color: var(--ink-3); font-size: 11px; letter-spacing: 0; text-transform: none; }

/* -------------------------------------------- banco de horas (equipe) */

.banco-dif.pos { color: var(--pos); }
.banco-dif.neg { color: var(--neg); }
.banco-dif.zero { color: var(--ink-3); }
.banco-sem { color: var(--ink-3); font-style: italic; }

.lm-tag.aprovada { background: rgba(63,214,155,.14); color: var(--pos); }
.lm-tag.recusada { background: rgba(255,122,115,.14); color: var(--neg); }
.lm-tag.pendente { background: rgba(242,180,65,.14); color: var(--alerta); }
.lm-tag.devolvida { background: rgba(255,122,115,.14); color: var(--neg); }
.pend-item.devolvida { border-left-color: var(--neg); }

/* ------------------------------------------------ filtros com checkbox */

.campo-inline.campo-check > .check-linha { display: flex; align-items: center; gap: 7px; height: 38px; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.campo-check input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--acento); cursor: pointer; }

/* ----------------------------------------------- fim do ciclo do banco */

.faixa-ciclo { margin-bottom: 18px; flex-wrap: wrap; }
.faixa-ciclo .fluxo-texto small .pos { color: var(--pos); font-weight: 600; }
.faixa-ciclo .fluxo-texto small .neg { color: var(--neg); font-weight: 600; }
.faixa-ciclo .btn { flex: none; }
/* O corpo do modal precisa poder encolher para o rodapé ficar visível */
.modal-corpo { min-height: 0; }

/* Histórico na lateral da análise: texto quebra em vez de rolar */
.analise-lado .lm-item { align-items: flex-start; }
.analise-lado .lm-texto { white-space: normal; overflow: visible; }
.analise-lado .lm-texto small { white-space: pre-line; }

/* ===================================================================== */
/* Telas públicas: entrar, esqueci a senha, redefinir e cadastro         */
/* Paleta fixa da Orbitaree: verde-petróleo profundo + acento teal.      */
/* ===================================================================== */

html:has(> body.tela-publica) { height: 100%; }
.tela-publica {
  height: 100%; min-height: 100vh; min-height: 100dvh;
  margin: 0;
  display: grid; place-items: center; align-content: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 0% 0%, rgba(0, 194, 160, .22), transparent 60%),
    radial-gradient(700px 600px at 100% 100%, rgba(0, 78, 76, .55), transparent 60%),
    linear-gradient(135deg, #062A26 0%, #0A1C1A 55%, #04110F 100%);
}

.pub-cartao {
  width: min(960px, 100%);
  min-height: min(560px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  display: grid; grid-template-columns: 42% 1fr;
  background: #FFFFFF;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.pub-cartao.largo { width: min(1080px, 100%); grid-template-columns: 36% 1fr; }

/* ---- lado da marca ---- */

.pub-arte {
  position: relative; overflow: hidden;
  padding: 34px 36px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #E7F3F0;
  background: linear-gradient(160deg, #00806B 0%, #004E4C 45%, #08211E 100%);
}
.pub-forma { position: absolute; border-radius: 50%; }
.pub-forma.f1 { width: 340px; height: 340px; right: -140px; top: -120px; background: radial-gradient(circle at 30% 30%, #7BE3C9, #00C2A0 55%, rgba(0,194,160,0) 72%); opacity: .55; }
.pub-forma.f2 { width: 420px; height: 420px; left: -220px; bottom: -160px; background: radial-gradient(circle at 60% 40%, #00C2A0, #00806B 50%, rgba(0,128,107,0) 72%); opacity: .55; }
.pub-forma.f3 { width: 150px; height: 150px; right: 26px; top: 120px; background: linear-gradient(140deg, #7BE3C9, #00C2A0); opacity: .85; animation: flutua 9s ease-in-out infinite; }
.pub-forma.f4 { width: 84px; height: 84px; right: 26px; top: 58%; background: linear-gradient(140deg, #E7F3F0, #7BE3C9); opacity: .9; animation: flutua 7s ease-in-out infinite reverse; }
.pub-forma.f5 { width: 46px; height: 46px; right: 70px; bottom: 90px; background: #00C2A0; opacity: .8; animation: flutua 6s ease-in-out infinite; }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.pub-marca { position: relative; display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.pub-marca .marca-simbolo span { background: #E7F3F0; }
.pub-marca .marca-simbolo span:nth-child(2), .pub-marca .marca-simbolo span:nth-child(4) { background: #7BE3C9; }
.pub-marca em { display: block; font-style: normal; font-weight: 400; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(231, 243, 240, .75); }

.pub-chamada { position: relative; }
.pub-chamada h1 { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #FFFFFF; text-shadow: 0 2px 14px rgba(0, 40, 36, .35); }
.pub-chamada p { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: rgba(231, 243, 240, .85); max-width: 26ch; }

.pub-site { position: relative; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: rgba(231, 243, 240, .9); }
.pub-site a { color: inherit; border-bottom: 1px solid rgba(231, 243, 240, .35); transition: border-color .12s, color .12s; }
.pub-site a:hover { color: #FFFFFF; border-bottom-color: #7BE3C9; }

/* ---- lado do formulário (sempre claro) ---- */

.pub-painel {
  padding: 44px 52px 26px;
  display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto;
  scrollbar-width: none;
  color: #10221F;
  --ink: #10221F; --ink-2: #3F5F59; --ink-3: #6D8A84;
  --bg: #FFFFFF; --bg-2: #F2F7F5; --superficie: #FFFFFF; --superficie-2: #F2F7F5;
  --linha: #DBE6E3; --linha-forte: #BDD0CB;
  --acento: #00806B; --acento-2: #00604F; --acento-fundo: rgba(0, 128, 107, .10);
  --pos: #14804F; --neg: #C23A2F; --alerta: #8A6100; --info: #1D66C0;
  --sobre-acento: #FFFFFF;
  --texto-erro: #8C1F16; --texto-aviso: #6B4A00; --texto-info: #14498F;
  --btn-hover: #E3EDEA; --placeholder: rgba(109, 138, 132, .65);
  color-scheme: light;
}
.pub-painel::-webkit-scrollbar { display: none; }
.pub-cartao.largo .pub-painel { padding: 34px 44px 22px; }
.pub-cartao.largo .pub-form { gap: 16px; margin-top: 20px; }
.pub-cartao.largo .pub-perfil { padding: 11px 14px; }
.pub-painel h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #0C2A26; }
.pub-painel .pub-sub { margin-top: 6px; color: var(--ink-3); font-size: 13.5px; }

.pub-form { display: grid; gap: 22px; margin-top: 30px; }
.pub-form .duas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Campo com linha embaixo, como no desenho */
.pub-campo { display: grid; gap: 4px; position: relative; }
.pub-campo > span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.pub-campo input, .pub-campo select {
  width: 100%; height: 40px; padding: 0 2px;
  background: transparent; border: none; border-bottom: 2px solid var(--linha);
  border-radius: 0; color: var(--ink); font-size: 15px; font-family: var(--fonte);
  transition: border-color .15s;
}
.pub-campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 26px; }
.pub-campo input:hover, .pub-campo select:hover { border-bottom-color: var(--linha-forte); background: transparent; }
.pub-campo input:focus, .pub-campo select:focus { outline: none; border-bottom-color: #00C2A0; background: transparent; box-shadow: 0 2px 0 0 rgba(0, 194, 160, .35); }
.pub-campo small { color: var(--ink-3); font-size: 12px; line-height: 1.35; min-height: 16px; }
.pub-campo input[type=password] { font-family: var(--fonte); letter-spacing: .12em; }

.pub-botao {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 18px;
  border: none; border-radius: 8px;
  background: linear-gradient(90deg, #00806B 0%, #00C2A0 100%);
  color: #FFFFFF; font-family: var(--fonte); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 10px 24px rgba(0, 128, 107, .28);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.pub-botao:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0, 128, 107, .34); }
.pub-botao:disabled { opacity: .6; cursor: default; transform: none; }
.pub-botao .seta { font-size: 16px; line-height: 1; }
.pub-botao.secundario { background: var(--bg-2); color: var(--acento-2); box-shadow: none; }

.pub-links { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; font-size: 13px; }
.pub-links a { color: var(--acento); font-weight: 600; }
.pub-links a:hover { color: var(--acento-2); text-decoration: underline; }

.pub-painel .alerta { margin-top: 18px; }
.pub-painel .alerta.ok { background: rgba(20, 128, 79, .10); border-left: 2px solid var(--pos); color: #0F5C3A; }

.pub-versao { margin-top: auto; padding-top: 26px; font-size: 11px; letter-spacing: .1em; color: var(--ink-3); }

/* Escolha de perfil no cadastro */
.pub-perfis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pub-perfil {
  position: relative; display: grid; gap: 4px; padding: 14px 16px;
  border: 2px solid var(--linha); border-radius: 10px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.pub-perfil input { position: absolute; opacity: 0; width: 0; height: 0; }
.pub-perfil strong { font-size: 14px; color: var(--ink); }
.pub-perfil small { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.pub-perfil:hover { border-color: var(--linha-forte); }
.pub-perfil:has(input:checked) { border-color: #00C2A0; background: rgba(0, 194, 160, .08); }
.pub-perfil:has(input:checked) strong { color: var(--acento-2); }

.pub-passo[hidden] { display: none !important; }
.pub-link-acao { background: none; border: none; padding: 0; color: var(--acento); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.pub-link-acao:hover { text-decoration: underline; }

.pub-sucesso { display: grid; gap: 10px; margin-top: 30px; }
.pub-sucesso .icone { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 194, 160, .14); color: #00806B; font-size: 26px; font-weight: 800; }
.pub-sucesso p { color: var(--ink-2); font-size: 14px; line-height: 1.55; }

/* Telefone: esconde a arte, empilha */
@media (max-width: 760px) {
  .tela-publica { padding: 12px; overflow: auto; height: auto; align-content: start; }
  .pub-cartao, .pub-cartao.largo { max-height: none; }
  .pub-cartao, .pub-cartao.largo { grid-template-columns: 1fr; min-height: 0; border-radius: 16px; }
  .pub-arte { padding: 22px 24px; min-height: 0; }
  .pub-arte .pub-chamada, .pub-arte .pub-site { display: none; }
  .pub-painel { padding: 28px 24px 22px; }
  .pub-form .duas, .pub-perfis { grid-template-columns: 1fr; }
}

/* ------------------------------------------- cadastros pendentes (admin) */
.painel-pendentes { margin-bottom: 20px; padding: 14px 16px 6px; border: 1px solid rgba(242, 180, 65, .45); border-radius: var(--raio); background: rgba(242, 180, 65, .06); }
.painel-pendentes .bloco-abono-titulo { color: var(--alerta); margin-bottom: 6px; }
.painel-pendentes[hidden] { display: none !important; }

/* ---------------------------------------------- saldo mês a mês */
.legenda-grafico { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.legenda-grafico span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--cor); }
.mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mini-cards div { background: var(--bg-2); border-radius: var(--raio-s); padding: 9px 12px; min-width: 0; }
.mini-cards span { display: block; color: var(--ink-3); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-cards strong { font-size: 17px; font-weight: 500; }
.mini-cards strong.pos { color: var(--pos); }
.mini-cards strong.neg { color: var(--neg); }
.grafico-meses { display: block; width: 100%; height: 220px; }
.grafico-meses text { font-family: var(--mono); font-size: 11px; fill: var(--ink-3); }
.grafico-meses text.valor { fill: var(--ink); font-weight: 500; }
.grafico-meses text.pos { fill: var(--pos); }
.grafico-meses text.neg { fill: var(--neg); }
.grafico-meses text.rot { font-family: var(--fonte); }
@media (max-width: 760px) { .mini-cards { grid-template-columns: 1fr; } .grafico-meses { height: 180px; } }

/* ---------------------------------------------- entrando (após o login) */
.pub-entrando { flex: 1; display: grid; place-items: center; align-content: center; text-align: center; gap: 8px; animation: aparece .4s ease-out both; }
.pub-entrando h2 { animation: sobe-suave .5s .35s ease-out both; }
.pub-entrando .pub-sub { animation: sobe-suave .5s .5s ease-out both; }
.pub-entrando-simbolo { position: relative; width: 84px; height: 84px; display: grid; place-items: center; margin-bottom: 10px; }
.pub-entrando-simbolo .marca-simbolo { animation: gira-e-some .9s ease-in-out both; }
.pub-entrando-simbolo .marca-simbolo span { background: #00806B; }
.pub-entrando-simbolo .marca-simbolo span:nth-child(2), .pub-entrando-simbolo .marca-simbolo span:nth-child(4) { background: #00C2A0; }
.pub-entrando-check {
  position: absolute; inset: 0; display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(135deg, #00806B, #00C2A0); color: #fff;
  font-size: 40px; font-weight: 800;
  transform: scale(0); animation: pula .5s .75s cubic-bezier(.2, 1.4, .4, 1) both;
  box-shadow: 0 12px 30px rgba(0, 128, 107, .35);
}
.pub-progresso { width: min(260px, 80%); height: 4px; margin-top: 18px; border-radius: 999px; background: #E3EDEA; overflow: hidden; }
.pub-progresso span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #00806B, #00C2A0); animation: enche 1.3s .6s ease-in-out both; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sobe-suave { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes gira-e-some { 0% { transform: rotate(45deg) scale(1); opacity: 1; } 70% { transform: rotate(405deg) scale(1.15); opacity: 1; } 100% { transform: rotate(405deg) scale(.4); opacity: 0; } }
@keyframes pula { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes enche { from { width: 0; } to { width: 100%; } }
.pub-cartao.saindo { animation: sai .35s ease-in both; }
@keyframes sai { to { opacity: 0; transform: translateY(-10px) scale(.985); } }
/* ---------------------------------- cadastro: supervisor e verificação */
.pub-opcoes { display: flex; gap: 18px; align-items: center; height: 40px; border-bottom: 2px solid var(--linha); }
.pub-opcao { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink); cursor: pointer; }
.pub-opcao input { width: 16px; height: 16px; margin: 0; accent-color: #00806B; cursor: pointer; }
.pub-verifica { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; }
.pub-verifica .pub-botao.secundario { width: auto; padding: 0 22px; height: 40px; border: 2px solid var(--linha); background: var(--bg-2); }
.pub-verifica .pub-botao.secundario:hover { border-color: #00C2A0; transform: none; box-shadow: none; }
.pub-verifica-resultado { margin-top: 10px; }
.pub-verifica-resultado .alerta { margin-top: 0; }
.pub-verifica-acoes { display: flex; gap: 16px; margin-top: 6px; }
.pub-verifica-acoes .pub-link-acao { font-size: 13px; }