/* FlowZenHub — Juros Simples (usa o mesmo visual da Compostos)
   Carregue styles.css e styles-calc.css antes deste arquivo. */

.si-page .muted{ margin:0 0 10px }

/* Resultados permanecem ocultos até calcular (reforço) */
#results-kpis[hidden],
#results-chart[hidden],
#results-table[hidden]{ display:none !important }

/* Tabela premium: scroll quando houver muitos meses */
#si-table-wrap.scrollable{
  max-height: clamp(420px, 56vh, 680px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* Thead sticky com fundo do card (caso seu styles-calc não cubra 100%) */
#si-table-wrap thead th{
  position: sticky; top: 0; z-index: 2;
  background: var(--card, var(--card-bg, #0f1013));
}

/* Gráfico ocupa o wrapper responsivo */
.chart-box svg{ width:100%; height:100%; display:block }

/* Alinha à direita no desktop (consistente com Compostos) */
.si-page .form-actions{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:flex-end;   /* <- direita */
  flex-wrap:wrap;
}

/* Mobile: botões full-width e empilhados */
@media (max-width: 640px){
  .si-page .form-actions{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
    justify-content:stretch;
  }
  .si-page .form-actions .btn{
    width:100%;
  }
  /* opcional: badge abaixo dos botões */
  .si-page #si-stale{ order: 3; justify-self:start; }
}
/* Botões ocupam a largura total do grid do form */
.si-page form.grid.cols-3 > .form-actions {
  grid-column: 1 / -1;       /* span pelas 3 colunas */
  justify-content: flex-end; /* alinhado à direita no desktop */
}

/* Mobile: empilha e ocupa 100% */
@media (max-width: 640px){
  .si-page form.grid.cols-3 > .form-actions {
    justify-content: stretch;
  }
  .si-page .form-actions { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 10px; 
  }
  .si-page .form-actions .btn { width: 100%; }
}

/* =========================
   KPIs — visual premium
   ========================= */

/* grade já herdada do styles-calc; só refinamos espaçamento */
.si-page .kpis{ gap: 12px }

/* card base */
.si-page .kpi-card{
  position: relative;
  border-radius: 12px;
  border: 1px solid var(--fz-border, #222633);
  background: var(--card, var(--card-bg, #0f1013));
  padding: 14px 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.20);
}

/* destaque sutil no card primário (mesma vibe da Compostos) */
.si-page .kpi-card.kpi--primary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 55%),
    radial-gradient(120% 160% at 0% 0%, rgba(122,95,167,.22), transparent 60%),
    var(--card, var(--card-bg, #0f1013));
  border-color: color-mix(in srgb, var(--fz-border, #222633) 70%, #7A5FA7 30%);
}

/* rótulo e valor */
.si-page .kpi__label{
  display:block;
  font:600 .9rem/1.2 Poppins,Inter,sans-serif;
  letter-spacing:.2px;
  opacity:.9;
  margin-bottom:6px;
}
.si-page .kpi__value{
  font:800 1.25rem/1 Inter,system-ui;
  letter-spacing:.2px;
  color: #EAEFF8;                 /* dark default */
}

/* ---------- Tema claro: números pretos p/ contraste ---------- */
html:not(.dark) .si-page .kpi-card{
  background: #fff;
  border-color: #E2E6ED;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
html:not(.dark) .si-page .kpi-card.kpi--primary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0) 55%),
    radial-gradient(120% 160% at 0% 0%, rgba(138,113,192,.15), transparent 60%),
    #fff;
  border-color: #DADFF0;
}
html:not(.dark) .si-page .kpi__value{
  color: #0F172A;                 /* números pretos (Slate 900) */
}
html:not(.dark) .si-page .kpi__label{
  color: #334155;                 /* Slate 700 para bom contraste */
}

/* micro-acabamentos */
.si-page .kpi-card:after{
  /* borda interna muito sutil para “depth” */
  content:"";
  position:absolute; inset:0;
  border-radius: 12px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
html:not(.dark) .si-page .kpi-card:after{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
}

/* === Chart premium === */
.chart-box{ position: relative; min-height: 260px }
.si-tooltip{
  position:absolute; inset:auto auto 0 0; transform:translate(-50%,-100%);
  background: rgba(17,19,25,.95); color:#fff; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:8px 10px; font:500 .9rem/1.2 Inter,system-ui;
  box-shadow:0 10px 26px rgba(0,0,0,.35); pointer-events:none; opacity:0; transition:opacity .12s;
}
html:not(.dark) .si-tooltip{ background:#fff; color:#0f172a; border-color:#e3e6ee; box-shadow:0 10px 26px rgba(0,0,0,.08) }
.si-tooltip .muted{ opacity:.75; font-weight:600; margin-right:.25rem }

svg .axis-label{ font:600 .85rem/1.2 Inter,system-ui; opacity:.8 }
svg .tick{ font:.8rem/1.2 Inter,system-ui; opacity:.7 }
svg .grid line{ stroke: currentColor; opacity:.08 }
html:not(.dark) svg .grid line{ opacity:.11 }
svg .crosshair{ stroke: currentColor; opacity:.35; stroke-dasharray:3 4 }
svg .dot{ stroke:#fff; stroke-width:2; }
html:not(.dark) svg .dot{ stroke:#fff }

/* Tooltip do gráfico: nunca cortar e ficar por cima */
.chart-box{ position: relative; overflow: visible; }
.si-tooltip{ z-index: 5; pointer-events: none; }  /* já tinha pointer-events: none */

/* se seu .card global usa overflow:hidden, reabra no gráfico */
.card .chart-box{ overflow: visible; }

/* Tooltip compacto e proporcional ao ponto */
.si-tooltip{
  position:absolute;
  inset:auto auto 0 0;
  transform:translate(-50%,-100%);
  z-index:5;
  pointer-events:none;

  /* tamanho/espaçamento */
  min-width: 132px;
  max-width: 180px;
  padding: 6px 8px;
  border-radius: 12px;
  font: 500 .82rem/1.25 Inter, system-ui;

  /* tema */
  background: rgba(17,19,25,.96);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  opacity:0; transition:opacity .12s;
}
html:not(.dark) .si-tooltip{
  background:#fff; color:#0f172a; border-color:#e3e6ee;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}

/* layout interno: duas linhas com números alinhados à direita */
.si-tooltip .row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; white-space: nowrap;
}
.si-tooltip .label{ opacity:.75; font-weight:600; margin-right:.25rem }
.si-tooltip .value{ font-variant-numeric: tabular-nums; }

/* versão ainda menor em telas estreitas */
@media (max-width: 640px){
  .si-tooltip{ min-width: 120px; max-width: 160px; padding: 5px 8px; font-size:.78rem }
}

/* (já recomendado) não cortar o tooltip */
.card .chart-box{ overflow: visible; }
/* Tooltip compacto */
/* Tooltip compacto corrigido */
/* Tooltip – corrigir esticamento e proporção */
.si-tooltip{
  position:absolute;
  inset:auto;                 /* <-- remove bottom:0/left:0 */
  z-index:5;
  pointer-events:none;

  min-width:132px;
  max-width:180px;
  padding:6px 8px;            /* <-- sem valores negativos */
  border-radius:10px;
  font:500 .82rem/1.25 Inter, system-ui;

  background:rgba(17,19,25,.96);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  opacity:0; transition:opacity .12s;
}
html:not(.dark) .si-tooltip{
  background:#fff; color:#0f172a; border-color:#e3e6ee;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}

/* Linhas internas – neutraliza .row global */
.si-tooltip .row{
  margin:0;                   /* <-- evita altura extra */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  white-space:nowrap;
}
.si-tooltip .label{ opacity:.7; font-weight:600; margin-right:.25rem }
.si-tooltip .value{ font-variant-numeric: tabular-nums }

/* === CTA neutro premium (sem roxo) ============================== */
/* Aplica só ao CTA do bloco educativo desta página */
.si-page .prose p:last-child .btn{
  /* base */
  display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem;
  padding:14px 20px;
  border-radius:12px;

  /* visual neutro (dark) */
  background: linear-gradient(180deg,#1F2937,#0F172A); /* slate 800 -> slate 900 */
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  font-weight:700; letter-spacing:.2px;

  /* destaque */
  box-shadow:0 10px 24px rgba(0,0,0,.35), 0 0 0 0 rgba(14,165,233,0); /* anel ciano em hover/focus */
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

/* tema claro — mantém contraste alto, sem roxo */
html:not(.dark) .si-page .prose p:last-child .btn{
  background: linear-gradient(180deg,#111827,#0B1220); /* quase preto */
  color:#fff;
  border-color: rgba(0,0,0,.10);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

/* micro-interações */
.si-page .prose p:last-child .btn::after{
  content:"→";
  transform: translateX(0);
  transition: transform .2s ease;
}
.si-page .prose p:last-child .btn:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.45), 0 0 0 6px rgba(14,165,233,.10); /* brilho ciano suave */
}
.si-page .prose p:last-child .btn:hover::after{
  transform: translateX(3px);
}

/* Acessibilidade: foco visível (anel ciano, sem roxo) */
.si-page .prose p:last-child .btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.7), 0 0 0 6px rgba(14,165,233,.55);
}

/* Respeita usuários com redução de movimento */
@media (prefers-reduced-motion: reduce){
  .si-page .prose p:last-child .btn{ transition:none }
  .si-page .prose p:last-child .btn:hover{ transform:none }
  .si-page .prose p:last-child .btn::after{ transition:none }
}

/* ===== CTA (tema claro) — visual suave, sem roxo ===== */
html:not(.dark) .si-page .prose p:last-child .btn{
  background: linear-gradient(180deg, #FFFFFF, #F8FAFC); /* branco -> quase branco */
  color:#0F172A;                                        /* texto bem legível */
  border:1px solid #E2E6ED;                             /* borda sutil */
  box-shadow: 0 6px 16px rgba(15,23,42,.06);            /* sombra leve */
  text-decoration: none;                                /* tira sublinhado do <a> */
}

/* hover/focus: realce discreto, sem “estouro” visual */
html:not(.dark) .si-page .prose p:last-child .btn:hover{
  background: linear-gradient(180deg, #FFFFFF, #EEF2F7);
  box-shadow: 0 10px 22px rgba(15,23,42,.10), 0 0 0 6px rgba(14,165,233,.12); /* anel ciano suave */
  transform: translateY(-1px);
  text-decoration: none;
}
html:not(.dark) .si-page .prose p:last-child .btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px rgba(14,165,233,.35);
}

/* seta mantém animação discreta no light */
html:not(.dark) .si-page .prose p:last-child .btn::after{
  color: currentColor;
}

/* Prose dentro dos cards da Juros Simples: ocupar a largura do card */
.si-page .card.prose{
  max-width: none !important;
  margin-inline: 0 !important;
}

/* Espaçamento consistente entre parágrafos e listas na prose */
.si-page .card.prose > * + *{ margin-top: .85rem }

/* Callout suave (usada na seção "Converter taxa") */
.si-page .prose .callout{
  padding: 12px 16px;
  border: 1px solid var(--fz-border, #222633);
  border-radius: 12px;
  background: var(--card, var(--card-bg, #0f1013));
}
html:not(.dark) .si-page .prose .callout{
  background:#fff; border-color:#E2E6ED;
}

/* Opcional: alinhar títulos h2/h3 com o ritmo do restante dos cards */
.si-page .card.prose h2{ margin-top: 0; line-height: 1.2 }
.si-page .card.prose h3{ margin-top: 1rem; line-height: 1.25 }

/* === Placeholder mais claro (acessível) === */
/* Use as mesmas classes dos seus inputs, ajuste se necessário */
input::placeholder,
textarea::placeholder {
  opacity: 1; /* garante cor exata em todos browsers */
}

/* Dark */
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: rgba(255, 255, 255, .44); /* tom neutro claro */
}

/* Light */
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: rgba(17, 19, 25, .44);    /* tom neutro escuro */
}

/* (Opcional) de leve: diferenciar com fonte um pouco menor */
input::placeholder,
textarea::placeholder {
  font-weight: 400;
  font-size: .95em;
}

/* === Ajuste do split (input + unidade) ============================== */
#si-form .input-split{
  display:grid;
  grid-template-columns: 1fr auto;    /* input cresce, unidade fixa */
  gap: 8px;
  align-items: center;
}

/* === Token padrão (bate com styles-calc) =========================== */
:root{
  --si-ctrl-h: 46px;
  --si-ctrl-r: 12px;
  --si-ctrl-px: 14px;
}

/* === Select premium (trigger) ===================================== */
#si-form .select--unit{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  height: var(--si-ctrl-h);
  line-height: normal;
  border-radius: var(--si-ctrl-r);
  padding: 0 calc(var(--si-ctrl-px) + 24px) 0 var(--si-ctrl-px); /* espaço pra seta */
  min-width: 132px;                 /* largura confortável pro “ao mês/ano” */
  border: 1px solid var(--fz-border, rgba(255,255,255,.08));
  background:
    /* seta */
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23BEBED1"><path d="M4.2 6.2a1 1 0 0 1 1.4 0L8 8l2.4-1.8a1 1 0 1 1 1.2 1.6L8.7 9.6a1.5 1.5 0 0 1-1.4 0L4.2 7.8a1 1 0 0 1 0-1.6z"/></svg>') no-repeat right 10px center,
    var(--si-bg, transparent);
  cursor: pointer;
}

/* === Estados (Dark/Light) – usa os mesmos tokens do projeto ======== */
html.dark #si-form .select--unit{
  color: var(--fz-text, #EDEDF5);
  background-color: var(--fz-surface-2, #13151B);
}
html:not(.dark) #si-form .select--unit{
  color: #1A1C22;
  background-color: #FFFFFF;
  border-color: rgba(21,23,29,.12);
}

/* Hover/Focus: mesma “aura” dos inputs */
#si-form .select--unit:hover{
  border-color: rgba(130, 120, 210, .45);
}
#si-form .select--unit:focus,
#si-form .select--unit:focus-visible{
  outline: none;
  border-color: rgba(130,120,210,.65);
  box-shadow: 0 0 0 3px rgba(130,120,210,.18);
}

/* Desabilitado (se usar) */
#si-form .select--unit:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Firefox: remove seta antiga */
@-moz-document url-prefix() {
  #si-form .select--unit{
    background-position: right 10px center, 0 0;
  }
}

/* Windows/legacy: oculta setinha antiga do IE/Edge antigo (inofensivo hoje) */
#si-form .select--unit::-ms-expand{ display:none; }

/* === Inputs: garante mesma altura sem brigar com o global ========== */
#si-form input[type="text"],
#si-form input[type="number"],
#si-form input[type="tel"],
#si-form input[placeholder]{
  height: var(--si-ctrl-h);
  padding: 0 var(--si-ctrl-px);
  border-radius: var(--si-ctrl-r);
  line-height: normal;
  box-sizing: border-box;
}

/* Placeholder mais claro (já pedido no reddit) */
html.dark #si-form input::placeholder{ color: rgba(255,255,255,.44); }
html:not(.dark) #si-form input::placeholder{ color: rgba(17,19,25,.44); }