/**
 * Estimei — simulador-rapido.css
 * Widget "Simulador Rápido" do Hero (#inicio) — 4 abas, 1 controle cada.
 * (18/09/2026, pedido do Celso — nova Home, aprovada pela diretoria).
 * Substitui hero-simulator.css (retirado na mesma sessão). Reaproveita os
 * tokens --mk-* já existentes em marketplace.css — tema claro/escuro
 * automático, sem duplicar paleta.
 */

/* `auto` nas laterais (01/10/2026): `22px 0` anulava o `margin:0 auto` do
   .mk e a seção ficava encostada à esquerda no desktop (x=0, não centralizada). */
.mk-simulador-rapido { margin: 22px auto 24px; }
.mk-simulador-rapido h2 { font-size: 16px; font-weight: 700; color: var(--mk-t900); margin-bottom: 14px; }

.sr-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.sr-tab {
    /* width:auto sobrescreve o button{width:100%} genérico de style.css —
       sem isso, width:100% vira a flex-basis (flex-basis:auto usa width)
       e os 4 botões empilham em vez de dividir a linha. */
    flex: 1 1 0; width: auto; padding: 9px 8px; border: 1px solid var(--mk-t200); background: var(--mk-dado);
    border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mk-t700);
    cursor: pointer; text-align: center; white-space: nowrap;
}
.sr-tab .icone-svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.sr-tab:hover { background: var(--mk-hover-tint); }
.sr-tab.active { background: var(--mk-t900); color: #fff; border-color: var(--mk-t900); }
[data-theme="dark"] .sr-tab.active { background: var(--mk-ouro-luz); color: var(--mk-t900); border-color: var(--mk-ouro-luz); }

.sr-panel { background: var(--mk-dado); border: 1px solid var(--mk-t200); border-radius: 6px; padding: 16px 18px; }
.sr-panel label { display: block; font-size: 12.5px; font-weight: 600; color: var(--mk-t700); margin-bottom: 8px; }
.sr-slider-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sr-slider-row input[type="range"] { flex: 1; accent-color: var(--mk-ouro-luz); }
.sr-slider-valor { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; font-weight: 700; color: var(--mk-t900); min-width: 76px; text-align: right; }

/* Número Herói (18/09/2026, pedido do Celso — 3ª rodada de ajustes) —
   borda dourada destacada + leve elevação, pra ler como dado nobre, não
   texto solto num box cinza. Fundo continua neutro (--mk-t100) — a
   borda já carrega o peso de destaque, sem competir com o CTA laranja
   abaixo. */
.sr-resultado {
    background: var(--mk-t100); border: 1.5px solid var(--mk-ouro-luz); border-radius: 8px;
    padding: 13px 15px; margin-bottom: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.sr-resultado-label { display: block; font-size: 11.5px; color: var(--mk-t500); margin-bottom: 3px; }
.sr-resultado-valor {
    display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 22px;
    font-weight: 800; color: var(--mk-t900); letter-spacing: -0.02em;
}
.sr-nota { font-size: 11px; color: var(--mk-t500); margin: 0 0 12px; }

/* CTA de Conversão Máxima (18/09/2026, pedido do Celso — 3ª rodada) — só
   1 painel fica visível por vez, então este botão compartilhado é
   sempre o único CTA na 1ª dobra, em qualquer aba. Laranja vibrante só
   no tema CLARO (queixa original: "modo claro frio/desbotado"); o tema
   escuro usa o dourado sólido do design system, sem mudança. */
.sr-cta { display: inline-block; font-size: 12.5px; font-weight: 700; background: var(--mk-t900); color: #fff; padding: 10px 18px; border-radius: 6px; text-decoration: none; }
:root:not([data-theme="dark"]) .sr-cta {
    background: #EA580C; color: #ffffff; font-weight: 700; border-radius: 6px;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35);
    transition: background .15s, box-shadow .15s;
}
:root:not([data-theme="dark"]) .sr-cta:hover { background: #C2410C; box-shadow: 0 5px 16px rgba(194, 65, 12, 0.4); }
[data-theme="dark"] .sr-cta { background: var(--mk-ouro-luz); color: var(--mk-t900); }

@media (max-width: 480px) {
    .sr-tabs { gap: 4px; }
    .sr-tab { font-size: 10.5px; padding: 8px 4px; }
}