/* Tokens reaproveitados do Design System da Waltercon (Identidade Visual/_extracted/tokens). */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;0,700;1,500&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --navy-900: #130b45;
  --navy-700: #20116c;
  --navy-600: #2c1889;
  --navy-500: #3d22ad;
  --navy-200: #bcaeea;
  --navy-50:  #f2effb;

  --gold-600: #8a6b1f;
  --gold-500: #b8902f;
  --gold-400: #d4ac4a;
  --gold-300: #e6c877;
  --gold-100: #faf1dc;

  --gray-900: #17161c;
  --gray-700: #44414d;
  --gray-500: #7c7986;
  --gray-300: #c1bfc7;
  --gray-200: #dfdde3;
  --gray-100: #eeedf1;
  --gray-50:  #f7f6f8;
  --white:    #ffffff;

  --success-600: #1a7a4c;
  --success-100: #e2f5ea;
  --warning-600: #b8790f;
  --warning-100: #fdf1dc;
  --error-600:   #c23a3a;
  --error-100:   #fbe6e6;

  --font-serif-display: 'Lora', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* Espaçamento, radius e sombra — Design System Waltercon (4px base, radii modestos, sombra discreta) */
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(23, 22, 28, 0.06);
  --shadow-md: 0 4px 12px rgba(23, 22, 28, 0.08);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 400 16px/1.6 var(--font-sans);
  color: var(--gray-900);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }

.cabecalho {
  background: var(--navy-700);
  color: var(--white);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  border-bottom: 3px solid var(--gold-500);
}
.cabecalho img.logo { height: 44px; width: auto; }
.cabecalho .titulos h1 {
  font: 600 25px/1.25 var(--font-serif-display);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.cabecalho .titulos p {
  margin: 0;
  color: var(--navy-200);
  font-size: 13.5px;
}

main {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}

/* Eyebrow — rótulo que nomeia o gênero da seção (ficha, parecer, demonstrativo, memorial) */
.eyebrow {
  display: block;
  font: 700 11px/1.2 var(--font-sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 6px;
}

.aviso-transicao {
  background: var(--gold-100);
  border: 1px solid var(--gold-400);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gray-900);
}
.aviso-transicao strong { color: var(--gold-600); }

section.painel {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--navy-700);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}

section.painel h2 {
  font: 600 22px/1.3 var(--font-serif-display);
  color: var(--navy-900);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gray-200);
}

.grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.campo label {
  font: 600 13px/1.3 var(--font-sans);
  color: var(--gray-700);
}
.campo .ajuda {
  font-size: 12px;
  color: var(--gray-500);
}
.campo input[type="text"],
.campo input[type="number"],
.campo select {
  font: 400 15px/1.4 var(--font-sans);
  padding: 10px 12px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-900);
  transition: border-color var(--duration-fast, 120ms) var(--ease-standard);
}
.campo input:focus, .campo select:focus {
  outline: none;
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px var(--navy-200);
}

.campo-radio { display: flex; gap: var(--space-4); align-items: center; }
.campo-radio label { display: flex; align-items: center; gap: 6px; font-weight: 400; }

details.parametros-avancados {
  margin-top: var(--space-4);
  border-top: 1px solid var(--gray-200);
  padding-top: var(--space-4);
}
details.parametros-avancados summary {
  cursor: pointer;
  font: 600 14px/1.3 var(--font-sans);
  color: var(--navy-600);
}

.botao-calcular {
  margin-top: var(--space-5);
  background: var(--navy-700);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 28px;
  font: 600 15px/1 var(--font-sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--duration-fast, 120ms) var(--ease-standard);
}
.botao-calcular:hover { background: var(--navy-600); }

/* ===== Selo do parecer — elemento de assinatura, evoca o carimbo/selo de um laudo contábil ===== */
.selo-parecer {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  background: var(--navy-50);
  border: 1px solid var(--navy-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.selo-parecer-anel {
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 3px solid var(--gold-500);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--gold-300);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-7deg);
  background: var(--white);
}
.selo-parecer-num {
  font: 700 15px/1.1 var(--font-serif-display);
  color: var(--gold-600);
  text-align: center;
  letter-spacing: 0.02em;
}
.selo-parecer-num small {
  display: block;
  font: 700 9px/1.4 var(--font-sans);
  letter-spacing: 0.08em;
  color: var(--gold-500);
  margin-top: 2px;
}
.selo-parecer-texto .eyebrow { color: var(--navy-600); margin-bottom: 4px; }
.selo-parecer-texto h3 {
  font: 700 27px/1.25 var(--font-serif-display);
  color: var(--navy-900);
  margin: 0 0 6px;
}
.selo-parecer-texto p {
  margin: 0;
  font: 500 15px/1.5 var(--font-sans);
  color: var(--gray-700);
}
.selo-parecer-texto p strong { color: var(--navy-700); font-variant-numeric: tabular-nums; }

.barras { display: flex; flex-direction: column; gap: var(--space-4); }
.barra-linha { display: grid; grid-template-columns: 180px 1fr 150px; align-items: center; gap: var(--space-3); }
.barra-linha .rotulo-barra { font: 600 13.5px/1.3 var(--font-sans); color: var(--gray-900); }
.barra-fundo { background: var(--gray-100); border-radius: var(--radius-sm); height: 20px; overflow: hidden; position: relative; }
.barra-preenchida { height: 100%; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--navy-500); }
.barra-preenchida.melhor { background: var(--gold-500); position: relative; }
.barra-linha .valor-barra { font: 600 14px/1.3 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.delta-melhor {
  display: inline-block;
  font: 700 10.5px/1.3 var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--gold-600);
  margin-top: 2px;
}
.delta-pior {
  display: inline-block;
  font: 500 11px/1.3 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--gray-500);
  margin-top: 2px;
}

/* ===== Tabelas — registro tipo demonstrativo/ledger: hairlines, numerais tabulares, linha dupla no total ===== */
table.tabela-comparativa {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.tabela-comparativa th, table.tabela-comparativa td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-200);
  text-align: right;
}
table.tabela-comparativa th:first-child, table.tabela-comparativa td:first-child {
  text-align: left;
}
table.tabela-comparativa thead th {
  border-bottom: 2px solid var(--navy-700);
  color: var(--navy-700);
  font: 700 11px/1.2 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-bottom: 10px;
}
table.tabela-comparativa tbody tr:nth-child(even) { background: var(--gray-50); }
table.tabela-comparativa td.numero { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.tabela-comparativa tr.linha-total td {
  font-weight: 700;
  border-top: 2px solid var(--navy-700);
  border-bottom: 1px solid var(--navy-700);
  background: var(--navy-50);
}
table.tabela-comparativa td.coluna-melhor {
  background: var(--gold-100);
  font-weight: 700;
  position: relative;
}

.selo {
  display: inline-block;
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 6px;
  white-space: nowrap;
}
.selo.vigor { background: var(--success-100); color: var(--success-600); }
.selo.teste { background: var(--warning-100); color: var(--warning-600); }
.selo.transicao { background: var(--gray-100); color: var(--gray-700); }

/* ===== Memorial de cálculo — verbetes numerados (1/3, 2/3, 3/3), cada um um cenário avaliado ===== */
.memoria-cenario {
  position: relative;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5) var(--space-4) 52px;
  margin-bottom: var(--space-3);
}
.memoria-cenario::before {
  content: attr(data-indice);
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy-50);
  color: var(--navy-700);
  font: 700 11px/24px var(--font-serif-display);
  text-align: center;
}
.memoria-cenario h3 {
  font: 700 16px/1.3 var(--font-sans);
  color: var(--navy-700);
  margin: 0 0 10px;
}
.memoria-cenario .linha-memoria {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--gray-200);
}
.memoria-cenario .linha-memoria .valor { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.memoria-cenario .linha-memoria.subtotal { font-weight: 700; border-bottom: none; color: var(--navy-900); }

.observacao-final {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-left: 4px solid var(--navy-700);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--gray-700);
}
.observacao-final strong { color: var(--navy-700); }

.rodape {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.6;
}
.rodape strong { color: var(--gray-700); }
.rodape .assinatura {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gray-200);
  font: 500 11.5px/1.4 var(--font-sans);
  color: var(--gray-500);
  letter-spacing: 0.01em;
}

.botao-imprimir {
  display: block;
  margin: 0 0 var(--space-5);
  background: var(--white);
  color: var(--navy-700);
  border: 1.5px solid var(--navy-700);
  border-radius: var(--radius-sm);
  padding: 12px 24px;
  font: 600 14px/1 var(--font-sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--duration-fast, 120ms) var(--ease-standard);
}
.botao-imprimir:hover { background: var(--navy-50); }

.ficha-impressao { display: none; }

@media (max-width: 600px) {
  .selo-parecer { flex-direction: column; text-align: center; gap: var(--space-4); }
  .barra-linha { grid-template-columns: 1fr; }
  .barra-linha .valor-barra { text-align: left; }
  table.tabela-comparativa { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .campo input, .campo select, .botao-calcular { transition: none; }
}

/* ===== Impressão / PDF — só a ficha + resultado, sem o formulário interativo ===== */
@media print {
  .somente-tela, .aviso-transicao, #dadosEntrada, details.parametros-avancados { display: none !important; }

  body { background: var(--white); }

  .ficha-impressao {
    display: block;
    border-bottom: 2px solid var(--navy-700);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-5);
  }
  .ficha-impressao h2 {
    font: 700 18px/1.3 var(--font-serif-display);
    color: var(--navy-900);
    margin: 0 0 var(--space-3);
  }
  .ficha-impressao .linha-ficha {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    padding: 3px 0;
    color: var(--gray-700);
  }
  .ficha-impressao .linha-ficha span:first-child { font-weight: 600; color: var(--gray-900); }

  section.painel { box-shadow: none; border: 1px solid var(--gray-300); break-inside: avoid; }
  .memoria-cenario { break-inside: avoid; }
  table.tabela-comparativa tr { break-inside: avoid; }

  .cabecalho, .selo-parecer, table.tabela-comparativa thead th,
  table.tabela-comparativa tr.linha-total td, .selo,
  .barra-preenchida, .memoria-cenario::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}