/* ─────────────────────────────────────────────────────────────
   Silva Neto Advocacia · Simuladores — camada de interface (sim-ux.js)
   Abas, chips de controle, gráfico SVG e tabela anual.
   Usa as variáveis do tema (claro/escuro) de atuacao.css / site-theme.css.
   ───────────────────────────────────────────────────────────── */

.sx-abas { display: flex; gap: .4rem; margin: 2.2rem 0 1.2rem; border-bottom: .5px solid var(--ouro-line); overflow-x: auto; scrollbar-width: none; }
.sx-abas::-webkit-scrollbar { display: none; }
.sx-aba { flex: 0 0 auto; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -.5px; padding: .7rem 1rem; cursor: pointer;
  font-family: 'Open Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--platina-low); transition: color .2s, border-color .2s; }
.sx-aba:hover { color: var(--platina); }
.sx-aba--ativa { color: var(--ouro); border-bottom-color: var(--ouro); }
.sx-aba:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; border-radius: 2px; }

.sx-pane { display: none; }
.sx-pane--ativa { display: block; }
.sx-pane--resumo .sim-headline { margin-top: 0; }
.sx-fora { margin-top: .4rem; }

/* chips de controle */
.sx-controles { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.sx-grupo { display: flex; flex-wrap: wrap; gap: .4rem; }
.sx-chip { background: transparent; border: .5px solid var(--ouro-line); border-radius: 999px; padding: 6px 13px; cursor: pointer;
  font-family: 'Open Sans', sans-serif; font-size: 11.5px; font-weight: 400; color: var(--platina-mid); transition: all .2s; }
.sx-chip:hover { border-color: var(--ouro); color: var(--platina); }
.sx-chip--on { background: var(--ouro-light); border-color: var(--ouro); color: var(--ouro); font-weight: 600; }
.sx-chip:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }

/* gráfico */
.sx-chart { border: .5px solid var(--ouro-line); border-radius: 6px; padding: 1rem .6rem .4rem; background: rgba(5,14,28,.35); }
html:not([data-theme="dark"]) .sx-chart { background: var(--c-card, #fff); }
.sx-chart svg { display: block; width: 100%; height: auto; font-family: 'Open Sans', sans-serif; }
.sx-grid { stroke: rgba(232,232,232,.1); stroke-width: .5; }
.sx-zero { stroke: var(--ouro); stroke-opacity: .35; stroke-width: .75; }
.sx-ylab, .sx-xlab { fill: var(--platina-low); font-size: 10.5px; }
.sx-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.sx-line--ouro { stroke: #CFAE70; }
.sx-line--plat { stroke: rgba(232,232,232,.6); }
.sx-line--neutro { stroke: #7FA6C9; }
.sx-area--ouro { fill: rgba(207,174,112,.18); }
.sx-area--plat { fill: rgba(232,232,232,.1); }
.sx-area--neutro { fill: rgba(127,166,201,.15); }
.sx-dot { opacity: 0; transition: opacity .15s; }
.sx-dot--ouro { fill: #CFAE70; } .sx-dot--plat { fill: #E8E8E8; } .sx-dot--neutro { fill: #7FA6C9; }
.sx-chart svg:hover .sx-dot, .sx-dot:focus { opacity: .9; }
.sx-bar--ouro { fill: #CFAE70; } .sx-bar--plat { fill: rgba(232,232,232,.55); } .sx-bar--neutro { fill: #7FA6C9; }
.sx-bar--neg { fill: #C96F5A; }
.sx-virada { stroke: var(--ouro); stroke-opacity: .5; stroke-dasharray: 3 4; stroke-width: 1; }
.sx-virada-lab { fill: var(--ouro); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
html:not([data-theme="dark"]) .sx-grid { stroke: rgba(9,29,57,.08); }
html:not([data-theme="dark"]) .sx-line--plat { stroke: #4A5568; }
html:not([data-theme="dark"]) .sx-area--plat { fill: rgba(74,85,104,.12); }
html:not([data-theme="dark"]) .sx-dot--plat, html:not([data-theme="dark"]) .sx-bar--plat { fill: #4A5568; }
html:not([data-theme="dark"]) .sx-line--ouro, html:not([data-theme="dark"]) .sx-dot--ouro, html:not([data-theme="dark"]) .sx-bar--ouro { stroke: #B8924A; fill: #B8924A; }
html:not([data-theme="dark"]) .sx-line--ouro { fill: none; }
.sx-legenda { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: .8rem; font-size: 12px; color: var(--platina-mid); }
.sx-lg::before { content: ''; display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
.sx-lg--ouro::before { background: #CFAE70; } .sx-lg--plat::before { background: rgba(232,232,232,.6); } .sx-lg--neutro::before { background: #7FA6C9; }
html:not([data-theme="dark"]) .sx-lg--ouro::before { background: #B8924A; }
html:not([data-theme="dark"]) .sx-lg--plat::before { background: #4A5568; }
.sx-nota { font-size: 11.5px; color: var(--platina-low); margin-top: .7rem; line-height: 1.6; }

/* marcas (ex.: "você") e rótulo de grupo */
.sx-marca { stroke: var(--platina-low); stroke-dasharray: 2 3; stroke-width: 1; }
.sx-marca-lab { fill: var(--platina-low); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.sx-grupo-rot { font-size: 10px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ouro); align-self: center; margin-right: .3rem; }
.sx-grupo--varrer { flex-basis: 100%; }
.sx-grupo--varrer:empty { display: none; }
.sx-tabela tr.sx-marca-row td { background: rgba(207,174,112,.07); }
.sx-tabela tr.sx-marca-row td:first-child::after { content: ' · ' attr(data-marca); font-weight: 400; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ouro); }

/* seletor segmentado: valores de referência por campo e cenários */
.sx-seg { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 .45rem; }
.sx-seg-btn { background: rgba(5,14,28,.25); border: .5px solid var(--ouro-line); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .4px; color: var(--platina-mid); transition: all .18s; line-height: 1.2; }
html:not([data-theme="dark"]) .sx-seg-btn { background: var(--c-card, #fff); color: #3C4654; }
.sx-seg-btn:hover:not(:disabled) { border-color: var(--ouro); color: var(--platina); }
html:not([data-theme="dark"]) .sx-seg-btn:hover:not(:disabled) { color: #091D39; }
.sx-seg-btn--on, .sx-seg-btn--on:disabled, html:not([data-theme="dark"]) .sx-seg-btn--on, html:not([data-theme="dark"]) .sx-seg-btn--on:disabled { background: var(--ouro); border-color: var(--ouro); color: #091D39; opacity: 1; font-style: normal; }
/* no claro, o botão sólido fica no ouro da marca com texto azul (regra de cores do site) */
html:not([data-theme="dark"]) .sx-seg-btn--on, html:not([data-theme="dark"]) .sx-seg-btn--on:disabled, html:not([data-theme="dark"]) .sx-modo-btn--on { background: #CFAE70; border-color: #CFAE70; color: #091D39; }
.sx-seg-btn:disabled { opacity: .45; cursor: default; }
.sx-seg-btn--outro { font-weight: 500; font-style: italic; }
.sx-seg-btn:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
/* campo com opções: o campo livre só aparece em "Outro" (ou quando o valor não bate com nenhuma referência) */
.sim-field.sx-tem-opts input[data-fmt] { display: none; margin-top: .25rem; }
.sim-field.sx-tem-opts.sx-livre input[data-fmt] { display: block; }
.sim-field.sx-tem-opts select[data-seg] { display: none; }
/* dois campos lado a lado dentro de uma célula (não desloca o resto da grade) */
.sx-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.sx-duplo > div { display: flex; flex-direction: column; justify-content: flex-end; }
@media (max-width: 460px) { .sx-duplo { grid-template-columns: 1fr; } }
/* cenário: ocupa a linha inteira da grade */
.sx-cenario { grid-column: 1 / -1; padding: 1rem 1.1rem; border: .5px solid var(--ouro-line); border-radius: 3px; background: rgba(207,174,112,.05); }
html:not([data-theme="dark"]) .sx-cenario { background: rgba(207,174,112,.08); }
.sx-cenario .sx-seg { margin-bottom: .6rem; }
.sx-cenario .sx-seg-btn { padding: 8px 16px; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; }
.sx-cenario .sim-hint { font-size: 12px; max-width: 720px; }
.sx-cenario .sx-cenario-fixa { margin-top: .5rem; opacity: .8; }

/* paleta extra para simuladores com mais de três cenários */
.sx-line--verde { stroke: #6FA287; } .sx-dot--verde, .sx-bar--verde, .sx-lg--verde::before { fill: #6FA287; background: #6FA287; } .sx-area--verde { fill: rgba(111,162,135,.15); }
.sx-line--rosa { stroke: #C27C9A; } .sx-dot--rosa, .sx-bar--rosa, .sx-lg--rosa::before { fill: #C27C9A; background: #C27C9A; } .sx-area--rosa { fill: rgba(194,124,154,.15); }
.sx-line--areia { stroke: #D9B98A; } .sx-dot--areia, .sx-bar--areia, .sx-lg--areia::before { fill: #D9B98A; background: #D9B98A; } .sx-area--areia { fill: rgba(217,185,138,.15); }
.sx-line--roxo { stroke: #9B8CC8; } .sx-dot--roxo, .sx-bar--roxo, .sx-lg--roxo::before { fill: #9B8CC8; background: #9B8CC8; } .sx-area--roxo { fill: rgba(155,140,200,.15); }
html:not([data-theme="dark"]) .sx-line--areia { stroke: #A8845A; } html:not([data-theme="dark"]) .sx-dot--areia, html:not([data-theme="dark"]) .sx-bar--areia, html:not([data-theme="dark"]) .sx-lg--areia::before { fill: #A8845A; background: #A8845A; }

/* camada didática */
.sx-simples { border: .5px solid var(--ouro); border-left: 3px solid var(--ouro); border-radius: 6px; padding: 1.1rem 1.3rem; margin-bottom: 1.2rem; background: var(--ouro-light); font-size: 15px; line-height: 1.65; color: var(--platina); }
.sx-simples p { margin: 0; }
.sx-simples-rot { font-size: 10px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ouro); margin: 0 0 .45rem !important; }
.sx-simples strong { color: var(--ouro); font-weight: 600; }
.sx-didatica { margin: 1rem 0 1.2rem; border: .5px solid var(--ouro-line); border-radius: 6px; padding: 0 1.1rem; }
.sx-didatica summary { cursor: pointer; list-style: none; padding: .8rem 0; font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--platina-low); }
.sx-didatica summary::-webkit-details-marker { display: none; }
.sx-didatica summary::before { content: '+ '; color: var(--ouro); }
.sx-didatica[open] summary::before { content: '− '; }
.sx-didatica summary:hover { color: var(--ouro); }
.sx-didatica p, .sx-didatica ol { font-size: 13.5px; line-height: 1.7; color: var(--platina-mid); margin: 0 0 .9rem; }
.sx-didatica ol { padding-left: 1.3rem; }
.sx-didatica li { margin-bottom: .45rem; }
.sx-didatica li::marker { color: var(--ouro); font-weight: 600; }
.sx-dica { border-top: .5px solid var(--ouro-line); padding-top: .8rem; }
.sx-termo { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: help; border-bottom: 1px dotted var(--ouro); text-decoration: none; }
.sx-termo:hover, .sx-termo:focus-visible { color: var(--ouro); outline: none; }
.sx-def { display: block; margin: .45rem 0 .6rem; padding: .7rem .9rem; border-radius: 4px; background: rgba(5,14,28,.45); border: .5px solid var(--ouro-line); font-size: 12.5px; line-height: 1.6; color: var(--platina-mid); position: relative; letter-spacing: 0; text-transform: none; font-weight: 300; }
html:not([data-theme="dark"]) .sx-def { background: var(--c-card2, #FAF8F4); }
.sx-def strong { color: var(--ouro); }
.sx-def-fechar { position: absolute; top: .3rem; right: .5rem; background: none; border: 0; color: var(--platina-low); font-size: 16px; cursor: pointer; line-height: 1; padding: .2rem; }
label .sx-def, summary .sx-def { white-space: normal; }

/* modo básico × completo */
.sx-modo { margin: 0 0 1rem; }
.sx-modo-seg { display: inline-flex; border: .5px solid var(--ouro-line); border-radius: 999px; padding: 3px; background: rgba(5,14,28,.25); }
html:not([data-theme="dark"]) .sx-modo-seg { background: var(--c-card, #fff); }
.sx-modo-btn { background: none; border: 0; border-radius: 999px; padding: 7px 18px; cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--platina-low); transition: all .2s; }
.sx-modo-btn--on { background: var(--ouro); color: #091D39; }
.sx-modo-btn:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.sx-modo-nota { font-size: 12px; color: var(--platina-low); margin: .6rem 0 0; line-height: 1.6; max-width: 560px; }
html.sx-modo-basico .sim-form details.sim-params,
html.sx-modo-basico .sim-breakdown,
html.sx-modo-basico .sx-abas,
html.sx-modo-basico .sx-pane--grafico,
html.sx-modo-basico .sx-pane--tabela,
html.sx-modo-basico .sim-chart { display: none !important; }
html.sx-modo-basico .sx-pane--resumo { display: block !important; }

/* tabela */
.sx-colunas { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .9rem; }
.sx-colunas-rot { font-size: 10px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ouro); margin-right: .4rem; }
.sx-chip--col { font-size: 11px; padding: 5px 11px; }
.sx-chip--col:not(.sx-chip--on) { text-decoration: line-through; opacity: .7; }
.sx-tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: .5px solid var(--ouro-line); border-radius: 6px; }
.sx-tabela { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 100%; }
.sx-tabela th { position: sticky; top: 0; text-align: right; font-size: 10px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ouro); padding: .7rem .6rem; border-bottom: .5px solid var(--ouro-line); background: var(--azul-deep); white-space: nowrap; }
.sx-tabela td { text-align: right; padding: .5rem .6rem; border-bottom: .5px solid rgba(207,174,112,0.08); color: var(--platina-mid); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-tabela th:first-child, .sx-tabela td:first-child { text-align: left; position: sticky; left: 0; background: var(--azul-deep); color: var(--platina); font-weight: 600; z-index: 1; }
.sx-tabela th:first-child { z-index: 2; }
.sx-tabela tbody tr:hover td { background: rgba(207,174,112,.05); }
.sx-tabela tbody tr:hover td:first-child { background: var(--azul-deep); }
.sx-tabela .sx-neg { color: #C96F5A; }
.sx-tabela tr.sx-virada-row td { border-top: 1px solid var(--ouro); border-bottom: 1px solid var(--ouro); }
.sx-tabela tr.sx-virada-row td:first-child::after { content: ' · virada'; font-weight: 400; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ouro); }
html:not([data-theme="dark"]) .sx-tabela th, html:not([data-theme="dark"]) .sx-tabela td:first-child, html:not([data-theme="dark"]) .sx-tabela tbody tr:hover td:first-child { background: var(--c-card, #fff); }

@media (max-width: 600px) {
  .sx-aba { padding: .65rem .75rem; font-size: 10px; letter-spacing: 1.4px; }
  .sx-controles { justify-content: flex-start; }
  .sx-tabela { font-size: 12px; }
  .sx-tabela th, .sx-tabela td { padding: .45rem .5rem; }
}

/* impressão: todos os painéis visíveis, sem controles */
@media print {
  .sx-modo { display: none !important; }
  html.sx-modo-basico .sx-pane--grafico, html.sx-modo-basico .sx-pane--tabela, html.sx-modo-basico .sim-breakdown { display: none !important; }
  .sx-abas, .sx-controles, .sx-colunas, .sx-nota, .sx-def, .sx-didatica, .sx-seg { display: none !important; }
  .sim-field.sx-tem-opts input[data-fmt], .sim-field.sx-tem-opts select[data-seg] { display: block !important; }
  .sx-cenario { border-color: #999 !important; background: none !important; }
  .sx-simples { border: 1pt solid #111 !important; border-left-width: 3pt !important; background: none !important; color: #111 !important; font-size: 11pt !important; padding: 8pt 11pt !important; break-inside: avoid; }
  .sx-simples strong, .sx-simples-rot { color: #111 !important; }
  .sx-termo { border-bottom: 0 !important; color: inherit !important; }
  .sx-marca { stroke: #777 !important; } .sx-marca-lab { fill: #555 !important; }
  .sx-tabela tr.sx-marca-row td { background: #f1ede4 !important; } .sx-tabela tr.sx-marca-row td:first-child::after { color: #111 !important; }
  .sx-pane { display: block !important; }
  .sx-pane--grafico, .sx-pane--tabela { margin-top: 12pt; break-inside: avoid; }
  .sx-pane--grafico::before { content: 'Evolução no tempo'; }
  .sx-pane--tabela::before { content: 'Tabela anual (conforme os filtros escolhidos na tela)'; }
  .sx-pane--grafico::before, .sx-pane--tabela::before { display: block; font-size: 9.5pt; letter-spacing: 2pt; text-transform: uppercase; font-weight: 700; color: #111; margin: 0 0 6pt; padding-bottom: 3pt; border-bottom: .5pt solid #999; }
  .sx-chart { border: .5pt solid #999 !important; border-radius: 0 !important; background: #fff !important; padding: 6pt !important; }
  .sx-grid { stroke: #ddd !important; } .sx-zero { stroke: #555 !important; }
  .sx-ylab, .sx-xlab { fill: #333 !important; font-family: 'Times New Roman', Times, serif !important; }
  .sx-line--ouro, .sx-dot--ouro, .sx-bar--ouro { stroke: #B8924A !important; } .sx-bar--ouro, .sx-dot--ouro { fill: #B8924A !important; }
  .sx-line--plat { stroke: #444 !important; } .sx-bar--plat, .sx-dot--plat { fill: #444 !important; }
  .sx-area--ouro { fill: rgba(184,146,74,.15) !important; } .sx-area--plat { fill: rgba(68,68,68,.1) !important; }
  .sx-dot { opacity: 0 !important; }
  .sx-virada { stroke: #9A7B3F !important; } .sx-virada-lab { fill: #9A7B3F !important; }
  .sx-legenda { color: #222 !important; font-size: 9.5pt !important; }
  .sx-lg--ouro::before { background: #B8924A !important; } .sx-lg--plat::before { background: #444 !important; }
  .sx-tabela-wrap { overflow: visible !important; border: 0 !important; border-radius: 0 !important; }
  .sx-tabela { font-size: 9.5pt !important; }
  .sx-tabela th, .sx-tabela td { position: static !important; background: #fff !important; color: #111 !important; white-space: normal !important; }
  .sx-tabela th { border-bottom: .75pt solid #111 !important; font-size: 8pt; letter-spacing: 1.2pt; }
  .sx-tabela td { border-bottom: .5pt solid #ddd !important; }
  .sx-tabela .sx-neg { color: #8B2E1F !important; }
  .sx-tabela tr.sx-virada-row td { border-top: .75pt solid #111 !important; border-bottom: .75pt solid #111 !important; }
  .sx-tabela tr.sx-virada-row td:first-child::after { color: #111 !important; }
}