/* ---------------------------------------------------------------------------
   Taxa Legal, folha unica. CSS nativo com tokens, sem framework.
   Escrita mobile primeiro. Os media queries sobem para tablet e desktop.
   Travas: um acento (azul institucional), um raio (6px), um tema por vez.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  --canvas: #eef0f3;
  --surface: #ffffff;
  --sunk: #f6f7f9;
  --ink: #12161c;
  --ink-soft: #39414c;
  --muted: #5f6b78;
  --line: #dce0e6;
  --line-strong: #b9c1cb;
  --accent: #16418f;
  --on-accent: #ffffff;
  --accent-weak: #e8edf8;
  --alert: #8a4a0c;
  --alert-weak: #fbf1e2;
  --danger: #9d2020;
  --danger-weak: #fbeded;

  --r: 6px;
  --pad: 16px;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --barra: 0px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0e1116;
    --surface: #161b22;
    --sunk: #1c222b;
    --ink: #e9edf2;
    --ink-soft: #c3cbd5;
    --muted: #8d99a7;
    --line: #272f3a;
    --line-strong: #3b4653;
    --accent: #93b2f3;
    --on-accent: #0e1116;
    --accent-weak: #1a2434;
    --alert: #e3b072;
    --alert-weak: #2a2114;
    --danger: #f0999a;
    --danger-weak: #2c1718;
  }
}

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

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

body {
  margin: 0;
  padding-bottom: var(--barra);
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.018em; line-height: 1.18; }
p, ul { margin: 0; }
a { color: var(--accent); text-underline-offset: 2px; }

.shell { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }
.num { font-variant-numeric: tabular-nums; }

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

/* =========================== topo =========================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar .shell {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: baseline; gap: 8px; overflow: hidden; }
.brand strong { font-size: 15px; letter-spacing: -0.02em; white-space: nowrap; }
.brand span { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.topnav { display: flex; gap: 16px; flex: none; }
.topnav a {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.topnav a:hover { color: var(--ink); }

@media (max-width: 560px) {
  .brand span { display: none; }
  .topnav a[href="#calculadora"] { display: none; }
}
@media (min-width: 900px) {
  .topbar .shell { height: 64px; }
  .brand strong { font-size: 16px; }
  .brand span { font-size: 13px; }
  .topnav { gap: 22px; }
  .topnav a { font-size: 14px; padding: 4px 0; border-bottom: 1px solid transparent; }
  .topnav a:hover { border-bottom-color: var(--line-strong); }
}

/* =========================== estrutura =========================== */

.workbench { padding: 24px 0 8px; }
.titulo { font-size: 24px; margin-bottom: 18px; }

.split { display: grid; gap: 16px; align-items: start; }

@media (min-width: 720px) {
  .workbench { padding: 32px 0 8px; }
  .titulo { font-size: 30px; margin-bottom: 24px; }
}
@media (min-width: 1000px) {
  :root { --pad: 24px; }
  .split { grid-template-columns: minmax(330px, 370px) minmax(0, 1fr); gap: 20px; }
  .titulo { font-size: 34px; }
  .form-panel { position: sticky; top: 80px; }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.panel-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.panel-head h2 { font-size: 14px; }
.panel-body { padding: 16px; }
@media (min-width: 720px) {
  .panel-head { padding: 16px 20px; }
  .panel-body { padding: 20px; }
}

/* =========================== formulario =========================== */

.field { display: grid; gap: 6px; }
.field + .field { margin-top: 14px; }
.field > label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.erro { font-size: 12.5px; color: var(--danger); font-weight: 500; }

input[type="text"],
input[type="date"],
input[type="month"],
input[type="number"] {
  width: 100%;
  max-width: 100%;
  font: inherit;
  font-size: 16px;                 /* evita o zoom automatico do iOS */
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 10px 12px;
  min-height: 46px;
  appearance: none;
  -webkit-appearance: none;
}
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input::-webkit-date-and-time-value { text-align: left; min-height: 22px; }
input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input::placeholder { color: var(--muted); opacity: 1; }
input[aria-invalid="true"] { border-color: var(--danger); }
input:disabled { background: var(--sunk); color: var(--muted); }

@media (min-width: 720px) {
  input[type="text"], input[type="date"], input[type="month"], input[type="number"] {
    font-size: 15px;
    min-height: 42px;
  }
}

/* Duas colunas so quando ha espaco de verdade. */
.par { display: grid; gap: 12px; }
@media (min-width: 460px) { .par { grid-template-columns: 1fr 1fr; } }
.par .field + .field { margin-top: 0; }

.grupo { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.recuo { margin-top: 12px; }
@media (min-width: 480px) { .recuo { padding-left: 26px; } }

.check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
}
.check + .check { margin-top: 10px; }
.check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
}
.check label { font-size: 14px; color: var(--ink-soft); flex: 1; cursor: pointer; }
.pctbox { width: 82px; flex: none; min-height: 38px; padding: 6px 10px; text-align: right; }
@media (min-width: 720px) { .pctbox { min-height: 36px; } }

button {
  font: inherit;
  font-weight: 500;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 90ms ease, background-color 120ms ease, filter 120ms ease;
}
button:active { transform: translateY(1px); }
.btn-primary {
  width: 100%;
  margin-top: 20px;
  padding: 13px 16px;
  min-height: 48px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-quiet {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  padding: 8px 12px;
  min-height: 38px;
  font-size: 13.5px;
}
.btn-quiet:hover { background: var(--sunk); }
.btn-quiet:disabled { color: var(--muted); opacity: .6; cursor: not-allowed; }

.acoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
@media (min-width: 720px) {
  .acoes { display: flex; width: auto; gap: 8px; }
}

.aviso {
  border-radius: var(--r);
  padding: 11px 14px;
  font-size: 13.5px;
  margin-bottom: 12px;
  border-left: 3px solid;
}
.aviso-alerta { background: var(--alert-weak); border-color: var(--alert); color: var(--alert); }
.aviso-erro { background: var(--danger-weak); border-color: var(--danger); color: var(--danger); }

/* =========================== resultado =========================== */

.resumo { display: grid; }
@media (min-width: 640px) { .resumo { grid-template-columns: 1fr 1fr; } }

.resumo-total { padding: 18px 16px; border-bottom: 1px solid var(--line); }
.resumo-total .rotulo { font-size: 12.5px; color: var(--muted); }
.resumo-total .valor {
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-top: 2px;
}
.resumo-total .periodo { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
@media (min-width: 640px) {
  .resumo-total { padding: 22px 20px; border-bottom: none; border-right: 1px solid var(--line); }
}

.resumo-linhas { margin: 0; padding: 12px 16px; display: grid; align-content: center; }
.resumo-linhas div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
  font-size: 13.5px;
}
.resumo-linhas dt { color: var(--muted); }
.resumo-linhas dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.resumo-linhas .destaque dd { color: var(--accent); font-weight: 600; }
@media (min-width: 640px) { .resumo-linhas { padding: 14px 20px; } }

/* --- tabela: vira lista de cartoes no celular --- */

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption {
  text-align: left;
  font-size: 12.5px;
  color: var(--muted);
  padding: 14px 16px 10px;
  border-top: 1px solid var(--line);
}

#tabelaMemoria thead { display: none; }
#tabelaMemoria tbody tr { display: block; padding: 12px 16px; border-top: 1px solid var(--line); }
#tabelaMemoria tbody tr:nth-child(even) { background: var(--sunk); }
#tabelaMemoria tbody td {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 2px 0;
  font-size: 13px;
  color: var(--ink-soft);
}
#tabelaMemoria tbody td::before {
  content: attr(data-l);
  color: var(--muted);
  font-size: 12.5px;
}
#tabelaMemoria tbody td.comp {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
#tabelaMemoria tbody td.comp::before { content: none; }
#tabelaMemoria tfoot tr { display: block; padding: 12px 16px; border-top: 1px solid var(--line-strong); }
#tabelaMemoria tfoot td { display: flex; justify-content: space-between; padding: 2px 0; font-size: 13.5px; font-weight: 600; }
#tabelaMemoria tfoot td:empty { display: none; }
#tabelaMemoria tfoot td::before { content: attr(data-l); color: var(--muted); font-weight: 400; }
.zerada { color: var(--muted); }
.parcial { color: var(--accent); }

@media (min-width: 760px) {
  caption { padding: 14px 20px 10px; }
  #tabelaMemoria thead { display: table-header-group; }
  #tabelaMemoria tbody tr, #tabelaMemoria tfoot tr { display: table-row; padding: 0; }
  #tabelaMemoria td, #tabelaMemoria th { display: table-cell; padding: 9px 12px; text-align: right; font-size: 14px; }
  #tabelaMemoria th:first-child, #tabelaMemoria td:first-child { text-align: left; padding-left: 20px; }
  #tabelaMemoria th:last-child, #tabelaMemoria td:last-child { padding-right: 20px; }
  #tabelaMemoria thead th {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
  }
  #tabelaMemoria tbody td { border-bottom: 1px solid var(--line); color: var(--ink); }
  #tabelaMemoria tbody td::before, #tabelaMemoria tfoot td::before { content: none; }
  #tabelaMemoria tbody td.comp { font-size: 14px; font-weight: 400; margin: 0; }
  #tabelaMemoria tfoot td:empty { display: table-cell; }
}

/* =========================== estados =========================== */

.estado-vazio { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; }
.estado-vazio strong { display: block; color: var(--ink-soft); font-weight: 500; margin-bottom: 4px; }

.skeleton { padding: 20px; display: grid; gap: 10px; }
.skeleton i {
  display: block;
  height: 14px;
  border-radius: var(--r);
  background: linear-gradient(90deg, var(--sunk), var(--line), var(--sunk));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton i:nth-child(2) { width: 82%; }
.skeleton i:nth-child(3) { width: 64%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* =========================== dobras =========================== */

.dobra { border-top: 1px solid var(--line); }
.dobra > summary {
  padding: 13px 16px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink-soft);
  min-height: 46px;
  display: flex;
  align-items: center;
}
.dobra > summary::marker { color: var(--muted); }
.dobra ul.regras { padding: 0 16px 16px 34px; }
.dobra ul.regras li { font-size: 13px; color: var(--muted); margin-bottom: 7px; max-width: 74ch; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 16px 16px; }
.chip {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 4px 8px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  background: var(--sunk);
}
.chip b { font-weight: 500; color: var(--muted); }

.bloco-texto { margin-top: 16px; border-top: none; }
.bloco-texto > summary { font-weight: 500; }
.panel-body--tight { padding-top: 0; }

textarea#memoria {
  width: 100%;
  min-height: 180px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
  resize: vertical;
  white-space: pre;
  overflow-x: auto;
}
.flash { font-size: 13px; color: var(--accent); align-self: center; }
.flash:empty { display: none; }
.acoes .flash { grid-column: 1 / -1; text-align: center; }
@media (min-width: 720px) { .acoes .flash { text-align: left; } }

/* =========================== taxas publicadas =========================== */

.secao { padding: 40px 0 0; }
.secao > .shell > h2 { font-size: 19px; margin-bottom: 14px; }
.anos { display: grid; gap: 12px; }
@media (min-width: 640px) { .anos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .anos { grid-template-columns: repeat(3, 1fr); } }

.ano { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ano h3 { font-size: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ano h3 em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 12.5px; }
.ano ol { list-style: none; margin: 0; padding: 6px 0 10px; }
.ano li {
  display: grid;
  grid-template-columns: 1fr auto 44px;
  align-items: center;
  gap: 10px;
  padding: 5px 16px;
  font-size: 13.5px;
}
.ano li b { font-weight: 400; color: var(--ink-soft); }
.ano li span { font-variant-numeric: tabular-nums; }
.ano li i { display: block; height: 6px; border-radius: 2px; background: var(--accent); opacity: .5; }
.ano li[data-zero="true"] span { color: var(--muted); }

/* =========================== barra do celular =========================== */

.barra-total {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
}
.barra-total .rotulo { font-size: 12px; color: var(--muted); display: block; }
.barra-total .valor { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.barra-total button { padding: 10px 14px; min-height: 42px; }
body.tem-resultado .barra-total { display: flex; }
@media (min-width: 1000px) { body.tem-resultado .barra-total { display: none; } }

/* =========================== rodape =========================== */

footer.rodape {
  margin-top: 40px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 8px 0 32px;
}
footer.rodape .dobra { border-top: none; }
footer.rodape .dobra > summary { padding-left: 0; }
footer.rodape .dobra ul.regras { padding-left: 18px; }
footer.rodape p { font-size: 12.5px; color: var(--muted); max-width: 76ch; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .topbar, .form-panel, .acoes, .secao, .barra-total, .bloco-texto, footer.rodape { display: none !important; }
  body { background: #fff; padding: 0; }
  .panel { border: none; }
  #tabelaMemoria thead { display: table-header-group; }
  #tabelaMemoria tbody tr, #tabelaMemoria tfoot tr { display: table-row; }
  #tabelaMemoria td, #tabelaMemoria th { display: table-cell; padding: 6px 8px; text-align: right; }
  #tabelaMemoria td::before { content: none; }
  #tabelaMemoria th:first-child, #tabelaMemoria td:first-child { text-align: left; }
}