/* eFolha — identidade "documento de folha de pagamento":
   papel frio, tinta com viés verde, verde-caneta de escrituração como único
   acento, títulos em serifa de documento, dinheiro em dígitos tabulares e
   status carimbados. */
:root {
  --papel: #eff1ee;          /* fundo geral, papel frio esverdeado */
  --painel: #ffffff;
  --tinta: #1a2620;          /* quase-preto com viés verde */
  --tinta-suave: #5c6a62;
  --caneta: #0c5c3d;         /* verde-caneta: o acento único */
  --caneta-viva: #0e7049;
  --latao: #8f6c1f;          /* atenção */
  --carimbo-vermelho: #a23327;
  --linha: #d9dfd9;
  --linha-forte: #b9c3ba;
  --serifa: Cambria, Georgia, "Times New Roman", serif;
  --corpo: "Segoe UI", system-ui, sans-serif;
  --razonete: Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 15px/1.55 var(--corpo);
}

/* ------------------------------------------------------------- cabeçalho */
header.topo {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: var(--tinta); color: #f2f5f1; padding: 12px 24px;
  border-bottom: 3px solid var(--caneta);
}
.marca {
  font-family: var(--serifa); font-size: 21px; letter-spacing: .2px;
}
.marca strong { color: #8fd4b4; font-weight: 700; }
.marca .sub {
  font-family: var(--corpo); font-size: 11.5px; opacity: .68;
  margin-left: 10px; letter-spacing: .6px; text-transform: uppercase;
}
header nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
header nav a {
  color: #d9e2da; text-decoration: none; padding: 6px 12px;
  border-radius: 4px; font-size: 14px;
}
header nav a:hover { background: rgba(143, 212, 180, .16); color: #fff; }
.sessao { font-size: 12.5px; opacity: .85; }
.sessao a { color: #8fd4b4; }

main { max-width: 1080px; margin: 28px auto; padding: 0 18px; }
footer {
  text-align: center; font-size: 11.5px; color: var(--tinta-suave);
  padding: 30px 0 36px; letter-spacing: .4px;
}

/* ------------------------------------------------------------ tipografia */
h1 {
  font-family: var(--serifa); font-size: 26px; font-weight: 700;
  margin: 0 0 18px; letter-spacing: .1px;
}
h1 small { color: var(--tinta-suave); }
h2 {
  font-family: var(--serifa); font-size: 18px; font-weight: 700;
  margin: 28px 0 10px;
}
a { color: var(--caneta); }

.aviso {
  background: #faf4e3; border: 1px solid #dcc98e; border-left: 4px solid var(--latao);
  border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px;
}

/* --------------------------------------------------------------- cartões */
.cartoes { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.cartao {
  background: var(--painel); border: 1px solid var(--linha);
  border-top: 3px solid var(--caneta); border-radius: 6px;
  padding: 13px 17px; min-width: 168px; flex: 1;
}
.cartao .rotulo {
  font-size: 10.5px; text-transform: uppercase; color: var(--tinta-suave);
  letter-spacing: .9px;
}
.cartao .valor {
  font-family: var(--razonete); font-size: 21px; font-weight: 700;
  margin-top: 4px; font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- tabelas */
table {
  width: 100%; border-collapse: collapse; background: var(--painel);
  border: 1px solid var(--linha-forte); border-radius: 6px; overflow: hidden;
}
th, td { padding: 8px 12px; border-bottom: 1px solid var(--linha); text-align: left; }
th {
  background: #f2f5f0; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--tinta-suave);
  border-bottom: 1.5px solid var(--linha-forte);
}
tr:last-child td { border-bottom: none; }
td.num, th.num {
  text-align: right; font-family: var(--razonete);
  font-variant-numeric: tabular-nums;
}
tr.fds td { background: #f5f7f4; }
tr.feriado td { background: #fbf1ee; }

/* ---------------------------------------------------------------- botões */
.botao, button {
  background: var(--caneta); color: #fff; border: none; border-radius: 5px;
  padding: 7px 15px; font: 600 14px var(--corpo); cursor: pointer;
  text-decoration: none; display: inline-block;
}
.botao:hover, button:hover { background: var(--caneta-viva); }
.botao.secundario, button.secundario { background: #5b6b62; }
.botao.secundario:hover, button.secundario:hover { background: #6d7f75; }
.botao.perigo, button.perigo { background: var(--carimbo-vermelho); }
.botao.perigo:hover, button.perigo:hover { background: #b8483b; }
.botao.mini, button.mini { padding: 3px 9px; font-size: 12px; font-weight: 600; }

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

/* ------------------------------------------------------------ formulários */
form.linha { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
label {
  display: block; font-size: 11px; color: var(--tinta-suave);
  margin-bottom: 3px; letter-spacing: .3px;
}
input, select, textarea {
  border: 1px solid var(--linha-forte); border-radius: 5px; padding: 7px 10px;
  font: inherit; background: #fff; max-width: 100%; color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--caneta); outline: none;
}
input[type=checkbox] { width: auto; }

.painel {
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: 6px; padding: 18px 20px; margin-bottom: 20px;
}
.grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

/* ------------------------------------------------- carimbos de status */
.etiqueta {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 8px 1px; border-radius: 3px;
  border: 1.5px solid currentColor; background: transparent;
  color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 1px;
}
.etiqueta.ok { color: var(--caneta); }
.etiqueta.atencao { color: var(--latao); }
.etiqueta.fechada { color: #47418f; }

/* ------------------------------------- confirmação: canhoto de protocolo */
dialog.confirmacao {
  width: min(360px, 88vw); border: 1.5px solid var(--tinta);
  border-radius: 4px; background: var(--painel); color: var(--tinta);
  padding: 20px 22px 18px; box-shadow: 0 18px 42px rgba(26, 38, 32, .28);
}
dialog.confirmacao::backdrop { background: rgba(26, 38, 32, .45); }
.conf-rotulo {
  margin: 0 0 12px; padding-bottom: 9px;
  border-bottom: 1.5px dashed var(--linha-forte);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.6px; color: var(--tinta-suave);
}
.conf-acao { margin: 0 0 16px; font-size: 14.5px; }
.conf-acao strong {
  font-family: var(--serifa); font-size: 16px; color: var(--caneta);
}
dialog.confirmacao.perigo { border-color: var(--carimbo-vermelho); }
dialog.confirmacao.perigo .conf-acao strong { color: var(--carimbo-vermelho); }
dialog.confirmacao.perigo [data-confirmar-ok] { background: var(--carimbo-vermelho); }
.conf-botoes { display: flex; gap: 10px; justify-content: flex-end; }

/* --------------------------------------------------- tela eSocial */
.gerador {
  display: grid; grid-template-columns: 68px 200px 1fr auto;
  gap: 12px; align-items: center;
  padding: 9px 2px; border-bottom: 1px dashed var(--linha);
}
.gerador:last-of-type { border-bottom: none; }
.gerador-nome {
  font-family: var(--razonete); font-weight: 700; font-size: 13.5px;
  color: var(--caneta);
}
.gerador-desc { font-size: 13.5px; color: var(--tinta-suave); }
.gerador-campos {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.gerador-campos label {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: 11px; white-space: nowrap;
}
.gerador select, .gerador input { padding: 4px 8px; font-size: 13px; }
@media (max-width: 760px) {
  .gerador { grid-template-columns: 68px 1fr; }
  .gerador-desc { grid-column: 2; }
  .gerador-campos, .gerador button { grid-column: 1 / -1; justify-self: start; }
}

.tabela-eventos td { vertical-align: middle; }
.tabela-eventos td.recibo {
  font-family: var(--razonete); font-size: 11px; white-space: nowrap;
}
.acoes {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.acoes form { display: flex; gap: 4px; align-items: center; margin: 0; }
.acoes select, .acoes input { padding: 3px 6px; font-size: 12px; }

.nota { font-size: 12px; color: var(--tinta-suave); }

/* ------------------------------------------------------------------ agenda */
.legenda { font-size: 12.5px; color: var(--tinta-suave); }
.ponto {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 4px; vertical-align: baseline;
}
.ponto.fechamento { background: var(--caneta); }
.ponto.tributos { background: var(--latao); }
.ponto.feriado { background: #d9958a; }
.ponto.hoje { background: none; border: 2px solid var(--tinta); width: 8px; height: 8px; }
.agenda-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.mes-cartao {
  background: var(--painel); border: 1px solid var(--linha); border-radius: 6px;
  padding: 12px 14px;
}
.mes-titulo {
  font-family: var(--serifa); font-weight: 700; font-size: 15px;
  margin-bottom: 8px; text-transform: capitalize;
}
table.mini-cal { border: none; background: none; }
.mini-cal th {
  background: none; border: none; padding: 2px; text-align: center;
  font-size: 9.5px;
}
.mini-cal td {
  border: none; padding: 3px 2px; text-align: center; font-size: 12px;
  font-variant-numeric: tabular-nums; border-radius: 4px;
}
.mini-cal td.fora { color: #c4ccc4; }
.mini-cal td.feriado { background: #fbe9e5; color: #8a3327; }
.mini-cal td.fechamento { background: var(--caneta); color: #fff; font-weight: 700; }
.mini-cal td.tributos { background: var(--latao); color: #fff; font-weight: 700; }
.mini-cal td.hoje { outline: 2px solid var(--tinta); outline-offset: -2px; }
.mes-resumo { font-size: 11.5px; color: var(--tinta-suave); margin-top: 8px; line-height: 1.7; }

/* ---------------------------------------------------------------- holerite */
.holerite {
  background: #fff; border: 1.5px solid var(--tinta); padding: 26px 30px;
}
.holerite header.doc {
  display: flex; justify-content: space-between; gap: 16px;
  border-bottom: 2px solid var(--tinta); padding-bottom: 10px; margin-bottom: 14px;
  font-family: var(--serifa);
}

@media (prefers-reduced-motion: no-preference) {
  dialog.confirmacao[open] { animation: surgir .14s ease-out; }
  @keyframes surgir {
    from { transform: translateY(6px); opacity: .4; }
    to { transform: none; opacity: 1; }
  }
}

@media print {
  header.topo, footer, .nao-imprimir, .aviso, dialog { display: none !important; }
  main { margin: 0; max-width: none; }
  .holerite { border: none; padding: 0; }
}