/* Simulador de Importação. Estilo próprio, longe do "estilo Claude clássico".
   Direção: documento técnico-naval. Papel claro, tinta profunda, uma cor de
   sinalização (laranja de contêiner). Tipografia: serifada p/ números-título,
   mono p/ memórias de cálculo.

   PALETA OFICIAL (brand board v1, svg/ausland-brand-board.svg):
   Casco #1B2430 estrutura · Ultramar #0D1D60 além-mar e selos ·
   Laranja-contêiner #E8590C ação e alerta · Papel #F4F1EA fundo ·
   Grafite #4C5866 texto de apoio. */

:root {
  --papel: #f4f1ea;
  --papel-2: #ece8de;
  --tinta: #1b2430;        /* Casco */
  --tinta-2: #4c5866;      /* Grafite */
  --linha: #d5cfc2;
  --laranja: #e8590c;      /* Laranja-contêiner */
  --laranja-escuro: #c44a08;
  --ultramar: #0d1d60;     /* cenário via trading, selos */
  --ultramar-claro: #e7e8ef;
  --alerta-bg: #fdf3d7;
  --alerta-borda: #e2c465;
  --critico: #c0392b;
  --serif: "Iowan Old Style", "Palatino", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  background: var(--papel);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.45;
}

/* fundo com pauta técnica sutil */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(27,36,48,.045) 31px, rgba(27,36,48,.045) 32px);
}

.pagina { max-width: 1180px; margin: 0 auto; padding: 0 24px 80px; }

/* ── Cabeçalho ── */
header {
  padding: 40px 0 28px;
  border-bottom: 3px solid var(--tinta);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.marca { display: flex; align-items: flex-end; gap: 18px; }
.marca .selo {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  background: var(--tinta); color: var(--papel);
  padding: 5px 9px; align-self: center;
}
/* marca "horizonte" sob o nome: rx = 0,615 × vão · ry = 0,157 × vão,
   meridiano do ápice à corda (vão ≥ 80px). Geometria no brand board. */
.marca-ausland { flex: none; }
.marca-ausland span { display: block; font-family: var(--serif); font-size: 25px; font-weight: 700; color: var(--tinta); line-height: 1.1; }
.marca-ausland svg { display: block; width: 95px; height: 11px; margin: -1px 0 0 1px; overflow: visible; }
h1 { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.01em; }
.assinatura {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ultramar); margin-top: 5px;
}
.versao-regras { font-family: var(--mono); font-size: 11px; color: var(--tinta-2); }

/* ── Grid principal ── */
.corpo { display: grid; grid-template-columns: 380px 1fr; gap: 28px; margin-top: 28px; align-items: start; }
@media (max-width: 900px) { .corpo { grid-template-columns: 1fr; } }

/* ── Formulário ── */
.painel-entrada {
  background: #fff;
  border: 1px solid var(--linha);
  box-shadow: 4px 4px 0 var(--papel-2);
}
.painel-entrada h2, .bloco-resultado h2 {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2);
  padding: 14px 18px 0;
}
fieldset { border: 0; padding: 12px 18px 18px; border-bottom: 1px dashed var(--linha); }
fieldset:last-of-type { border-bottom: 0; }
legend {
  font-family: var(--serif); font-size: 16px; font-weight: 600; padding-top: 14px;
}
.campo { margin-top: 12px; }
.campo label { display: block; font-size: 12px; font-weight: 600; color: var(--tinta-2); margin-bottom: 4px; }
.campo input, .campo select {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--linha); border-radius: 0;
  font-family: var(--mono); font-size: 14px; color: var(--tinta);
  background: var(--papel);
}
.campo input:focus, .campo select:focus { outline: 2px solid var(--laranja); outline-offset: -1px; }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.linha-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
/* em tela estreita três campos na mesma linha cortam o valor digitado */
@media (max-width: 560px) {
  .linha-3 { grid-template-columns: 1fr 1fr; }
  .linha-3 > .campo:first-child { grid-column: 1 / -1; }
  header { flex-direction: column; align-items: flex-start; }
  .marca { flex-wrap: wrap; gap: 10px; }
}
.dica { font-size: 11px; color: var(--tinta-2); margin-top: 3px; }

/* volumes */
.tabela-volumes { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tabela-volumes th {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-2); text-align: left; padding: 4px 4px;
}
.tabela-volumes td { padding: 2px; }
.tabela-volumes input { width: 100%; min-width: 54px; padding: 6px 3px; border: 1px solid var(--linha); font-family: var(--mono); font-size: 12.5px; background: var(--papel); }
.btn-mini {
  font-family: var(--mono); font-size: 11px; background: none;
  border: 1px solid var(--linha); padding: 5px 10px; cursor: pointer; color: var(--tinta-2); margin-top: 8px;
}
.btn-mini:hover { border-color: var(--tinta); color: var(--tinta); }

/* erro de cálculo na própria página (substituiu o alert) */
.erro-calculo {
  margin: 0 18px 12px; padding: 11px 13px;
  background: #fbeceb; border-left: 4px solid var(--critico);
  font-size: 13px; color: var(--tinta);
}
.erro-calculo b { color: var(--critico); }

/* aviso que muda a decisão (risco jurídico/fiscal), diferente do aviso de rodapé */
.aviso.critico {
  background: #fbeceb; border: 1px solid var(--critico); border-left-width: 4px;
  color: #7d2b21; padding: 12px 15px; font-size: 13px; margin-bottom: 16px;
}
.aviso.critico b { color: var(--critico); }
.faixa-economia.negativa { border-left-color: var(--critico); }
.faixa-economia.negativa .pct { color: #ff8a7a; }

.acao-principal {
  display: block; width: calc(100% - 36px); margin: 0 18px 18px;
  background: var(--laranja); color: #fff; border: 0;
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  padding: 14px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--laranja-escuro);
  transition: transform .05s;
}
.acao-principal:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--laranja-escuro); }
.acao-principal:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--laranja-escuro); }

/* ── Resultado ── */
.bloco-resultado { display: none; }
.bloco-resultado.visivel { display: block; }

/* faixa de economia */
.faixa-economia {
  background: var(--tinta); color: var(--papel);
  padding: 22px 26px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  border-left: 8px solid var(--laranja);
}
.faixa-economia .rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.faixa-economia .valor { font-family: var(--serif); font-size: 42px; font-weight: 700; letter-spacing: -.02em; }
.faixa-economia .pct { font-family: var(--mono); font-size: 16px; color: var(--laranja); }

/* logística resumo */
.cartoes-logistica { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.cartao {
  background: #fff; border: 1px solid var(--linha); padding: 12px 14px;
}
.cartao .rotulo { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-2); }
.cartao .valor { font-family: var(--serif); font-size: 21px; font-weight: 600; margin-top: 2px; }
.cartao .sub { font-family: var(--mono); font-size: 11px; color: var(--tinta-2); margin-top: 2px; }

/* barra de ocupação */
.ocupacao { margin-top: 6px; height: 8px; background: var(--papel-2); position: relative; }
.ocupacao > i { position: absolute; inset: 0 auto 0 0; background: var(--laranja); display: block; }

/* comparativo */
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 760px) { .duas-colunas { grid-template-columns: 1fr; } }

.coluna-cenario { background: #fff; border: 1px solid var(--linha); }
.coluna-cenario.trading { border-top: 6px solid var(--ultramar); }
.coluna-cenario.direta  { border-top: 6px solid var(--tinta-2); }
.coluna-cenario header.cab-cenario {
  border-bottom: 1px solid var(--linha); padding: 14px 18px 12px; display: block;
}
.cab-cenario .tipo { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.cab-cenario .nome { font-family: var(--serif); font-size: 19px; font-weight: 600; margin-top: 2px; }
.coluna-cenario.trading .cab-cenario .nome { color: var(--ultramar); }

.tabela-custos { width: 100%; border-collapse: collapse; }
.tabela-custos td { padding: 7px 18px; font-size: 13.5px; border-bottom: 1px dotted var(--linha); vertical-align: top; }
.tabela-custos td:last-child { text-align: right; font-family: var(--mono); white-space: nowrap; }
.tabela-custos .memoria { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--tinta-2); margin-top: 1px; }
.tabela-custos tr.secao td {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--tinta-2); background: var(--papel); border-bottom: 1px solid var(--linha); padding: 5px 18px;
}
.tabela-custos tr.total td {
  font-family: var(--serif); font-size: 17px; font-weight: 700; border-bottom: 0;
  border-top: 2px solid var(--tinta); padding: 12px 18px;
}
.coluna-cenario.trading tr.total td { color: var(--ultramar); }
.tabela-custos tr.unitario td { font-size: 13px; color: var(--tinta-2); border-bottom: 0; padding-top: 0; }

/* nota do benefício */
.nota-beneficio {
  background: var(--ultramar-claro); border-left: 4px solid var(--ultramar);
  padding: 10px 14px; margin: 12px 18px 16px; font-size: 12.5px; color: var(--tinta);
}
.nota-beneficio b { color: var(--ultramar); }

/* multi-regime */
.multi-regime { margin-top: 22px; background: #fff; border: 1px solid var(--linha); padding: 16px 18px; }
.multi-regime table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.multi-regime th, .multi-regime td { padding: 6px 8px; font-size: 13px; text-align: right; border-bottom: 1px dotted var(--linha); }
.multi-regime th { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-2); }
.multi-regime th:first-child, .multi-regime td:first-child { text-align: left; }
.multi-regime td { font-family: var(--mono); }

/* avisos */
.aviso {
  margin-top: 22px; background: var(--alerta-bg); border: 1px solid var(--alerta-borda);
  padding: 12px 16px; font-size: 12.5px; color: #6b5518;
}

/* impressão = proposta */
.btn-imprimir {
  margin-top: 18px; font-family: var(--mono); font-size: 12px;
  background: none; border: 1px solid var(--tinta); padding: 9px 16px; cursor: pointer; color: var(--tinta);
}
.btn-imprimir:hover { background: var(--tinta); color: var(--papel); }

@media print {
  body::before { display: none; }
  .painel-entrada, .btn-imprimir, .acao-principal { display: none !important; }
  .corpo { grid-template-columns: 1fr; }
  /* a impressão é a proposta comercial: a marca e as cores dos cenários
     precisam sair no papel, não só o texto */
  body { background: #fff; font-size: 12px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .duas-colunas { break-inside: avoid; }
  .coluna-cenario { break-inside: avoid; }
}