/* Meu Cálculo do Trabalhador: folha de estilos
   Paleta inspirada no holerite de formulário contínuo (faixas verdes)
   e na caneta azul usada para preencher formulários. */

@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/atkinson-hyperlegible-next-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/atkinson-hyperlegible-mono-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --ink: #1c2b25;
  --ink-soft: #4b5c55;
  --page: #f1f5f2;
  --paper: #ffffff;
  --band: #e4f0e8;
  --rule: #c8d6cd;
  --rule-strong: #8fa79a;
  --pen: #1f4fd1;
  --pen-dark: #163a9e;
  --pen-tint: #e8eefc;
  --credit: #17683f;
  --alert: #a3341f;
  --alert-tint: #fbece8;

  --font-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-figures: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);

  --gutter: 1rem;
  --radius: 6px;
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--pen); text-underline-offset: 0.18em; }
a:hover { color: var(--pen-dark); }

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

.pular {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--paper);
  padding: 0.5rem 1rem;
  z-index: 10;
}
.pular:focus { left: 1rem; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Cabeçalho ---------- */
.topo {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.topo .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}
.marca svg { width: 28px; height: 28px; flex: none; }
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
.menu a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 700;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--ink); }
.menu a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--pen); }
/* No celular, o menu vira uma faixa que rola para o lado */
@media (max-width: 719px) {
  .menu {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu ul { flex-wrap: nowrap; white-space: nowrap; padding: 0.15rem 2.5rem 0.35rem 0; }
}

/* ---------- Trilha ---------- */
.trilha { font-size: var(--step--1); color: var(--ink-soft); margin: 1.25rem 0 0; }
.trilha ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.trilha li + li::before { content: "/"; margin-right: 0.25rem; color: var(--rule-strong); }
.trilha a { color: var(--ink-soft); }

/* ---------- Títulos e texto ---------- */
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.015em; margin: 0; }
h1 { font-size: var(--step-3); font-weight: 800; max-width: 22ch; }
h2 { font-size: var(--step-2); font-weight: 800; margin-top: 2.75rem; margin-bottom: 0.75rem; }
h3 { font-size: var(--step-1); font-weight: 700; margin-top: 1.75rem; margin-bottom: 0.5rem; }

.cabecalho-pagina { padding: 1rem 0 1.5rem; }
.cabecalho-pagina .lede {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0.75rem 0 0;
}
.conferido {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-size: var(--step--1);
  color: var(--credit);
  font-weight: 700;
}
.conferido svg { width: 16px; height: 16px; }

.texto { max-width: 70ch; }
.texto p, .texto ul, .texto ol { margin: 0 0 1rem; }
.texto li { margin-bottom: 0.35rem; }
.texto strong { font-weight: 700; }

.nota {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* ---------- Área da calculadora ---------- */
.calculadora {
  display: grid;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 2rem;
}
@media (min-width: 900px) {
  .calculadora { grid-template-columns: minmax(300px, 380px) 1fr; }
}

.formulario {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.campo { margin-bottom: 1.1rem; }
.campo label, .campo .rotulo {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 0.3rem;
}
.campo .ajuda {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-top: 0.3rem;
  line-height: 1.4;
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="date"],
.campo select,
.campo textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--rule-strong);
  border-radius: 4px;
  padding: 0.6rem 0.7rem;
  min-height: 48px;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--pen);
  box-shadow: 0 0 0 3px var(--pen-tint);
}
.moeda { position: relative; }
.moeda span {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  font-weight: 700;
  pointer-events: none;
}
.moeda input[type="text"] { padding-left: 2.6rem; font-family: var(--font-figures); }
.campo[aria-invalid="true"] input { border-color: var(--alert); }
.erro-campo { color: var(--alert); font-size: var(--step--1); margin-top: 0.3rem; display: block; }

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.dupla.largura-ajustada { grid-template-columns: 1.7fr 1fr; align-items: end; }
.dupla > * { min-width: 0; }
.campo input[type="date"] { min-width: 0; max-width: 100%; }

/* Horas e minutos lado a lado */
.duracao { display: flex; gap: 0.5rem; }
.campo .duracao label { display: flex; align-items: center; gap: 0.35rem; flex: 1; min-width: 0; margin: 0; font-weight: 400; }
.campo .duracao input[type="text"] { min-width: 0; font-family: var(--font-figures); text-align: right; }
.duracao label span { color: var(--ink-soft); font-weight: 700; font-size: var(--step--1); }

.opcao {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.opcao input { width: 20px; height: 20px; margin: 0.1rem 0 0; accent-color: var(--pen); flex: none; }

/* Grupos de opções (radio) */
fieldset.grupo { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
fieldset.grupo legend { font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.5rem; padding: 0; }
fieldset.grupo .opcao {
  margin-bottom: 0.4rem;
  padding: 0.6rem 0.7rem;
  border: 1.5px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
}
fieldset.grupo .opcao:has(input:checked) { border-color: var(--pen); background: var(--pen-tint); }
.campo input[type="date"] { font-family: var(--font-figures); }
[hidden] { display: none !important; }

details.mais { margin: 0.25rem 0 1.1rem; }
details.mais summary {
  cursor: pointer;
  color: var(--pen);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.35rem 0;
}
details.mais[open] summary { margin-bottom: 0.75rem; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.65rem 1.25rem;
  border-radius: 4px;
  border: 2px solid var(--pen);
  background: var(--pen);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.botao:hover { background: var(--pen-dark); border-color: var(--pen-dark); color: #fff; }
.botao.largo { width: 100%; }
.botao.secundario { background: var(--paper); color: var(--pen); }
.botao.secundario:hover { background: var(--pen-tint); color: var(--pen-dark); }
.botao svg { width: 18px; height: 18px; }

/* ---------- O holerite (resultado) ---------- */
.holerite {
  --furo: 14px;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.25rem calc(var(--furo) + 1.1rem);
  font-family: var(--font-figures);
  font-size: 0.9375rem;
  box-shadow: 0 1px 0 var(--rule), 0 10px 24px -18px rgba(28, 43, 37, 0.45);
}
/* Margens de formulário contínuo, com os furos de tração */
.holerite::before,
.holerite::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--furo);
  background-image: radial-gradient(circle at center, var(--page) 3.5px, transparent 4px);
  background-size: var(--furo) 20px;
  background-repeat: repeat-y;
  border-color: var(--rule);
  border-style: dashed;
  border-width: 0;
}
.holerite::before { left: 6px; border-right-width: 1px; }
.holerite::after { right: 6px; border-left-width: 1px; }

.holerite-topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.6rem;
  margin-bottom: 0.25rem;
}
.holerite-topo h2 {
  font-family: var(--font-text);
  font-size: var(--step-1);
  margin: 0;
}
.holerite-topo p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

.holerite table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.holerite th {
  text-align: left;
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--rule-strong);
}
.holerite td { padding: 0.55rem 0.4rem; vertical-align: top; }
.holerite tbody tr:nth-child(odd) td { background: var(--band); }
.holerite .valor { text-align: right; white-space: nowrap; }
.holerite th.valor { text-align: right; }
.holerite .ref { color: var(--ink-soft); white-space: nowrap; }
.holerite tfoot td { border-top: 1px solid var(--rule-strong); font-weight: 700; }
.holerite .linha-sem-valor { color: var(--ink-soft); }

.liquido {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
  border-top: 2px solid var(--ink);
  margin-top: 0.25rem;
  padding-top: 0.75rem;
}
.liquido span { font-family: var(--font-text); font-weight: 700; }
.liquido strong { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.4rem); color: var(--credit); letter-spacing: -0.02em; }
.liquido.alerta strong { color: var(--alert); }
.ref-movel { display: none; }

.extra-info { margin: 0.75rem 0 0; font-size: var(--step--1); color: var(--ink-soft); font-family: var(--font-text); }

.vazio {
  font-family: var(--font-text);
  color: var(--ink-soft);
  padding: 2.5rem 0.5rem;
  text-align: center;
}
.vazio strong { display: block; color: var(--ink); font-size: var(--step-1); margin-bottom: 0.35rem; }

/* Em celulares, a coluna de referência some e os valores ficam juntos */
@media (max-width: 560px) {
  .holerite { --furo: 10px; padding-left: calc(var(--furo) + 0.7rem); padding-right: calc(var(--furo) + 0.7rem); font-size: 0.875rem; }
  .holerite .ref { display: none; }
  .holerite .ref-movel { display: block; font-size: 0.8125rem; color: var(--ink-soft); }
  .holerite td, .holerite th { padding-left: 0.25rem; padding-right: 0.25rem; }
}

/* ---------- Passo a passo ---------- */
.passos { margin-top: 1.5rem; }
.passos h3 { margin-top: 0; }
.passos ol { counter-reset: passo; list-style: none; padding: 0; margin: 0.75rem 0 0; }
.passos li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 0.9rem 2.6rem;
  margin: 0;
  line-height: 1.5;
}
.passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 2px solid var(--pen);
  color: var(--pen);
  font-weight: 800;
  font-size: 0.875rem;
  display: grid;
  place-items: center;
}
.passos .conta { font-family: var(--font-figures); font-size: 0.9375rem; background: var(--band); padding: 0.05rem 0.3rem; border-radius: 3px; }
.passos .fonte-lei { display: block; font-size: var(--step--1); color: var(--ink-soft); }

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.aviso-copiado { font-size: var(--step--1); color: var(--credit); font-weight: 700; align-self: center; }

/* ---------- Reportar erro ---------- */
.reportar {
  margin-top: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}
.reportar > summary {
  cursor: pointer;
  padding: 0.9rem 1rem;
  font-weight: 700;
  color: var(--ink);
  list-style-position: inside;
}
.reportar[open] > summary { border-bottom: 1px solid var(--rule); }
.reportar .corpo { padding: 1rem; }
.reportar .corpo p { margin-top: 0; }
.status-envio { margin-top: 0.75rem; font-weight: 700; }
.status-envio.ok { color: var(--credit); }
.status-envio.falha { color: var(--alert); }
.campo-isca { position: absolute; left: -5000px; }

/* ---------- Espaço de anúncio: só aparece se houver anúncio ---------- */
.anuncio { margin: 2rem 0; min-height: 280px; }
.anuncio:empty { display: none; }

/* ---------- Conteúdo explicativo ---------- */
.conteudo { padding-bottom: 3rem; }
.conteudo table.tabela {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1.25rem;
  font-variant-numeric: tabular-nums;
  background: var(--paper);
  font-size: 0.9375rem;
}
.tabela-rolagem { overflow-x: auto; max-width: 100%; }
.tabela caption { text-align: left; font-weight: 700; padding: 0 0 0.5rem; }
.tabela th, .tabela td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--rule); text-align: left; }
.tabela th { font-size: 0.8125rem; color: var(--ink-soft); border-bottom: 1.5px solid var(--rule-strong); }
.tabela td.num, .tabela th.num { text-align: right; font-family: var(--font-figures); white-space: nowrap; }
.tabela tbody tr:nth-child(odd) td { background: var(--band); }

.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 0.25rem 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.75rem 0;
}
.faq details p { margin: 0 0 1rem; }

.fontes { font-size: 0.9375rem; }
.fontes li { margin-bottom: 0.4rem; }

.destaque {
  border-left: 4px solid var(--pen);
  background: var(--paper);
  padding: 0.9rem 1rem;
  margin: 1.25rem 0;
}
.destaque p:last-child { margin-bottom: 0; }

/* ---------- Página inicial ---------- */
.abertura {
  display: grid;
  gap: 2rem;
  padding: 2.25rem 0 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .abertura { grid-template-columns: 1.1fr 1fr; padding-top: 3.5rem; }
}
.abertura h1 { max-width: 16ch; font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); }
.abertura .lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 46ch; margin: 1rem 0 0; line-height: 1.45; }

.rapido .holerite { padding-top: 1rem; }
.rapido .campo { margin-bottom: 0.75rem; }
.rapido .liquido { margin-top: 0.75rem; }

.lista-calculadoras { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.lista-calculadoras li { border-bottom: 1px solid var(--rule); }
.lista-calculadoras a {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding: 1.1rem 0;
  text-decoration: none;
  color: var(--ink);
}
@media (min-width: 720px) {
  .lista-calculadoras a { grid-template-columns: 16rem 1fr auto; align-items: baseline; }
}
.lista-calculadoras .nome { font-weight: 800; font-size: var(--step-1); color: var(--pen); }
.lista-calculadoras .desc { color: var(--ink-soft); }
.lista-calculadoras .epoca { font-size: var(--step--1); font-weight: 700; color: var(--credit); white-space: nowrap; }
.lista-calculadoras a:hover .nome { text-decoration: underline; }
.grupo-titulo { font-size: var(--step-1); margin: 2rem 0 0.6rem; }
#calculadoras .grupo-titulo:first-of-type { margin-top: 0.75rem; }
.texto .lista-calculadoras { margin-bottom: 1.5rem; }
.indice { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.9rem; font-size: var(--step--1); font-weight: 700; }

.compromissos { display: grid; gap: 1.25rem 2rem; margin-top: 1rem; }
@media (min-width: 720px) { .compromissos { grid-template-columns: 1fr 1fr; } }
.compromissos h3 { margin-top: 0; }
.compromissos p { margin: 0; color: var(--ink-soft); }

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 2rem 0 2.5rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.rodape .colunas { display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .rodape .colunas { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.rodape h2 { font-size: 0.9375rem; margin: 0 0 0.5rem; color: var(--ink); }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 0.35rem; }
.rodape a { color: var(--ink-soft); }
.rodape .aviso-legal { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

@media (prefers-reduced-motion: no-preference) {
  .holerite.recem-calculado { animation: imprimir 420ms ease-out; }
  @keyframes imprimir {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0 0 0 0); }
  }
}

/* ---------- Impressão / Salvar em PDF ---------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 11pt; }
  .topo, .menu, .trilha, .formulario, .acoes, .reportar, .anuncio, .conteudo, .rodape, .pular, .nao-imprimir { display: none !important; }
  .calculadora { display: block; }
  .holerite { box-shadow: none; border: 1px solid #999; padding-left: 1rem; padding-right: 1rem; }
  .holerite::before, .holerite::after { display: none; }
  .holerite tbody tr:nth-child(odd) td { background: #eef5f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .so-impressao { display: block !important; }
  a { color: inherit; text-decoration: none; }
}
.so-impressao { display: none; }