/* ═══════════════════════════════════════════════════════════════════════════
   simulador.css — a aba Simulador na Direção A ("a página é uma conta que fecha")

   A gramática visual é a de um EXTRATO, não a de um dashboard:

   - número é mono e tabular, sempre alinhado à direita. Coluna de dinheiro que
     não alinha na vírgula obriga o olho a ler dígito a dígito, e o usuário
     desta tela quer COMPARAR contas, não ler uma;
   - separação por régua fina, não por card dentro de card. A página antiga
     empilhava painel em painel até ninguém achar o total;
   - a faixa de reconciliação é uma equação com os operadores visíveis. Ela é o
     único bloco com destaque tipográfico, porque é a promessa da página.

   OURO (#fbbf24 / --cmd-sys-b) é RESERVADO ao Sistema B (CLAUDE.md, regra #1).
   Nada nesta folha usa ouro fora do badge `.sx-badge-b`.
   ═══════════════════════════════════════════════════════════════════════════ */

#page-simulador {
    --sx-num: var(--cmd-ff-mono, ui-monospace, 'SF Mono', Menlo, monospace);
    --sx-pos: var(--cmd-em, #34d399);
    --sx-neg: var(--cmd-sell, #fb7185);
    --sx-rule: var(--cmd-border-subtle, #20202a);
    --sx-rule-strong: var(--cmd-border-strong, #34343d);
}

/* ── cabeçalho e aviso legal ─────────────────────────────────────────────── */

.sx-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.sx-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--cmd-r-pill, 999px);
    border: 1px solid var(--sx-rule);
    font-size: 11.5px;
    color: var(--text-muted, #83899a);
    white-space: nowrap;
}
.sx-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sx-pos);
}
.sx-status--erro .sx-status__dot { background: var(--sx-neg); }

/* O aviso não é rodapé. Desempenho simulado apresentado sem a ressalva é
   exatamente o que a RCVM 20 art. 14 §1º e o Art. 38 III do código ANBIMA
   endereçam — e o lugar dele é antes do número, não depois. */
.sx-legal {
    margin: 0 0 22px;
    padding: 10px 14px;
    border-left: 2px solid var(--sx-rule-strong);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 8px 8px 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted, #83899a);
    max-width: 78ch;
}

/* ── faixa de reconciliação ──────────────────────────────────────────────── */

.sx-recon {
    margin-bottom: 30px;
    padding: 22px 24px 16px;
    border: 1px solid var(--sx-rule-strong);
    border-radius: var(--cmd-r-lg, 14px);
    background: var(--cmd-bg-surface, rgba(255, 255, 255, 0.02));
}
.sx-recon__skel { color: var(--text-muted, #83899a); font-size: 13px; }

.sx-recon__eq {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px 18px;
}

.sx-recon__term {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 132px;
}
.sx-recon__lbl {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted, #83899a);
}
.sx-recon__val {
    font-family: var(--sx-num);
    font-variant-numeric: tabular-nums;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text-primary, #f5f5f7);
}
.sx-recon__term--forte .sx-recon__val { font-size: 27px; }
.sx-recon__note {
    font-size: 11px;
    color: var(--text-muted, #83899a);
}

.sx-recon__op {
    font-family: var(--sx-num);
    font-size: 19px;
    line-height: 1;
    padding-top: 20px;
    color: var(--text-muted, #83899a);
}
.sx-recon__op--eq { color: var(--text-secondary, #a8a8b0); }

.sx-recon__rule {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--sx-rule);
    font-size: 12px;
    color: var(--text-muted, #83899a);
}
.sx-recon__vs {
    font-family: var(--sx-num);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
}
.sx-recon__vs span { font-family: inherit; font-weight: 400; color: var(--text-muted, #83899a); }

/* Degradação da régua e falha de reconciliação usam a MESMA marca: as duas são
   "o número abaixo não vale o que parece". */
.sx-recon__warn {
    padding: 2px 8px;
    border-radius: var(--cmd-r-sm, 6px);
    border: 1px solid color-mix(in srgb, var(--sx-neg) 35%, transparent);
    background: color-mix(in srgb, var(--sx-neg) 10%, transparent);
    color: var(--sx-neg);
    font-size: 11.5px;
}

/* A conta que saiu do total aparece ESCRITA logo abaixo dele. Ela é o maior
   número da página; omitir seria o oposto do que a aba promete. */
.sx-recon__harness {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--sx-rule);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-muted, #83899a);
    max-width: 82ch;
}
.sx-recon__harness b {
    font-family: var(--sx-num);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

/* ── blocos ──────────────────────────────────────────────────────────────── */

.sx-block { margin-bottom: 34px; }

.sx-block__head { margin-bottom: 12px; }
.sx-block__head--acoes {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.sx-acoes { display: flex; gap: 8px; flex-shrink: 0; }
.sx-export { display: inline-flex; align-items: center; gap: 6px; }
.sx-block__head h3 {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 650;
    color: var(--text-primary, #f5f5f7);
}
.sx-block__head p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted, #83899a);
    max-width: 74ch;
}
.sx-count {
    margin-left: 6px;
    font-family: var(--sx-num);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted, #83899a);
}

/* ── camada 1: cards de carteira ─────────────────────────────────────────── */

.sx-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: 12px;
}

.sx-card {
    padding: 15px 16px;
    border: 1px solid var(--sx-rule);
    border-radius: var(--cmd-r-md, 10px);
    background: var(--cmd-bg-surface, rgba(255, 255, 255, 0.02));
}
/* Carteira sem operação NÃO some da tela: sumir faz o usuário achar que ela foi
   apagada. Ela fica apagada visualmente e diz o porquê. */
.sx-card--vazia { opacity: .62; border-style: dashed; }

.sx-card__head { margin-bottom: 10px; }
.sx-card__head h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 3px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary, #f5f5f7);
}
/* Editar aparece no hover do card: é ação rara numa tela de leitura, e um ícone
   permanente em cada card compete com o número, que é o que importa. Em toque
   não há hover — por isso o `@media (hover: none)` abaixo o deixa sempre visível
   em vez de torná-lo inalcançável no celular. */
.sx-card__edit {
    padding: 2px;
    border: none;
    background: none;
    color: var(--text-muted, #83899a);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, color .15s;
}
.sx-card:hover .sx-card__edit { opacity: 1; }
.sx-card__edit:hover  { color: var(--text-primary, #f5f5f7); }
.sx-card__edit:focus-visible { opacity: 1; outline: 2px solid var(--sx-rule-strong); }
@media (hover: none) { .sx-card__edit { opacity: 1; } }
.sx-card__tickers {
    font-family: var(--sx-num);
    font-size: 10.5px;
    letter-spacing: .02em;
    color: var(--text-muted, #83899a);
}
.sx-card__num {
    font-family: var(--sx-num);
    font-variant-numeric: tabular-nums;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.sx-card__sub,
.sx-card__empty,
.sx-card__hint {
    font-size: 11.5px;
    color: var(--text-muted, #83899a);
}
.sx-card__empty { margin: 4px 0 2px; font-size: 13px; color: var(--text-secondary, #a8a8b0); }
.sx-card__hint  { margin: 0; line-height: 1.45; }

/* ── tabelas ─────────────────────────────────────────────────────────────── */

.sx-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--sx-rule);
    border-radius: var(--cmd-r-md, 10px);
}

.sx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.sx-table th {
    padding: 9px 12px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, #83899a);
    border-bottom: 1px solid var(--sx-rule-strong);
    white-space: nowrap;
}
.sx-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--sx-rule);
    vertical-align: top;
    color: var(--text-secondary, #a8a8b0);
}
.sx-table tbody tr:last-child td { border-bottom: none; }

/* Dinheiro alinhado na vírgula. É o ponto inteiro de a página ser um extrato. */
.sx-num {
    text-align: right;
    font-family: var(--sx-num);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sx-pos { color: var(--sx-pos); }
.sx-neg { color: var(--sx-neg); }
.sx-muted { color: var(--text-muted, #83899a); }
.sx-sub  { font-size: 11px; color: var(--text-muted, #83899a); }
.sx-tk   { font-family: var(--sx-num); font-weight: 600; color: var(--text-primary, #f5f5f7); }
.sx-empty { padding: 20px 12px; text-align: center; color: var(--text-muted, #83899a); }

.sx-conta { display: flex; align-items: center; gap: 6px; }
.sx-conta__nome { font-weight: 600; color: var(--text-primary, #f5f5f7); }
.sx-conta__tese {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-muted, #83899a);
    max-width: 46ch;
}
.sx-row--arq { opacity: .55; }

/* Único uso de ouro na folha: a marca do Sistema B. */
.sx-badge-b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--cmd-sys-b, #fbbf24) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--cmd-sys-b, #fbbf24) 42%, transparent);
    color: var(--cmd-sys-b, #fbbf24);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
}

.sx-side {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--cmd-r-sm, 5px);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}
.sx-side--long  { background: color-mix(in srgb, var(--sx-pos) 14%, transparent); color: var(--sx-pos); }
.sx-side--short { background: color-mix(in srgb, var(--sx-neg) 14%, transparent); color: var(--sx-neg); }

/* Estágio de amostra. Nenhum degrau diz "validada" — a palavra sugere garantia,
   que é o que a RCVM 20 art. 14 §1º veda. Ver `_ESCADA_AMOSTRA` na rota. */
.sx-stage {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--cmd-r-pill, 999px);
    border: 1px solid var(--sx-rule-strong);
    font-size: 10.5px;
    white-space: nowrap;
    cursor: help;
}
.sx-stage--mensuravel { border-color: color-mix(in srgb, var(--sx-pos) 40%, transparent); color: var(--sx-pos); }
.sx-stage--preliminar { color: var(--text-secondary, #a8a8b0); }
.sx-stage--arquivo,
.sx-stage--harness,
.sx-stage--sem_leitura,
.sx-stage--sem_spec  { color: var(--text-muted, #83899a); }

.sx-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted, #83899a);
    cursor: pointer;
}

/* ── blotter ─────────────────────────────────────────────────────────────── */

.sx-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.sx-filters select {
    padding: 6px 10px;
    border-radius: var(--cmd-r-sm, 7px);
    border: 1px solid var(--sx-rule-strong);
    background: var(--cmd-bg-elevated, rgba(255, 255, 255, 0.03));
    color: var(--text-primary, #f5f5f7);
    font-size: 12px;
}

/* Os totais são os DO FILTRO. Tabela filtrada exibindo o total do conjunto
   inteiro mente com uma soma tecnicamente correta — o rótulo à esquerda existe
   para tornar impossível confundir os dois. */
.sx-filter-totals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding: 9px 13px;
    margin-bottom: 10px;
    border-radius: var(--cmd-r-sm, 8px);
    background: rgba(255, 255, 255, 0.025);
    font-size: 12px;
    color: var(--text-muted, #83899a);
}
.sx-filter-totals:empty { display: none; }
.sx-filter-totals b {
    font-family: var(--sx-num);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #f5f5f7);
}
.sx-filter-totals__lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.sx-row--exp { cursor: pointer; }
.sx-row--exp:hover { background: rgba(255, 255, 255, 0.03); }

.sx-fatias-tag {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--cmd-r-sm, 5px);
    border: 1px solid var(--sx-rule-strong);
    font-family: var(--cmd-ff-ui, inherit);
    font-size: 9.5px;
    font-weight: 500;
    color: var(--text-muted, #83899a);
}

.sx-fatias > td { background: rgba(255, 255, 255, 0.02); padding: 12px 16px; }
.sx-subtable { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.sx-subtable th {
    padding: 5px 9px;
    font-size: 9.5px;
    color: var(--text-muted, #83899a);
    border-bottom: 1px solid var(--sx-rule);
}
.sx-subtable td { padding: 5px 9px; border-bottom: none; }
.sx-subtable__note {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted, #83899a);
}

/* As tres leituras por operacao (XAI, replay, anotacoes). Ficam ACIMA das fatias
   porque respondem a pergunta que a linha levanta; a fatia e' contabilidade. */
.sx-detalhe-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
}
.sx-mini {
    padding: 4px 10px;
    font-size: 11px;
    font-family: inherit;
    color: var(--text-secondary, #b6bcca);
    background: transparent;
    border: 1px solid var(--sx-rule);
    border-radius: 5px;
    cursor: pointer;
    transition: color .12s, border-color .12s;
}
.sx-mini:hover { color: var(--text-primary, #eef1f6); border-color: var(--text-muted, #83899a); }

.sx-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
}
.sx-pager__info {
    font-family: var(--sx-num);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--text-muted, #83899a);
}

/* ── quarentena ──────────────────────────────────────────────────────────── */

.sx-block--quar .sx-tablewrap { border-style: dashed; }
.sx-block--quar .sx-table td  { color: var(--text-muted, #83899a); }

/* ── gaveta de operação (owner) ──────────────────────────────────────────── */

/* Fechada por padrão: são controles de motor, não de leitura. A página tem um
   leitor (o dono da carteira) e um operador (o owner) — misturar os dois foi o
   que encheu a aba antiga de botão que 99% das visitas não usa. */
.sx-drawer {
    margin-bottom: 26px;
    border: 1px solid var(--sx-rule);
    border-radius: var(--cmd-r-md, 10px);
    background: rgba(255, 255, 255, 0.015);
}
.sx-drawer > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary, #a8a8b0);
    list-style: none;
}
.sx-drawer > summary::-webkit-details-marker { display: none; }
.sx-drawer__hint {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted, #83899a);
}
.sx-drawer__body { padding: 0 15px 14px; }
.sx-drawer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.sx-drawer__clock {
    font-size: 11.5px;
    color: var(--text-muted, #83899a);
}
.sx-drawer__clock b {
    font-family: var(--sx-num);
    color: var(--text-secondary, #a8a8b0);
}
.sx-drawer__logs {
    max-height: 190px;
    overflow-y: auto;
    padding: 9px 11px;
    border-radius: var(--cmd-r-sm, 7px);
    background: var(--cmd-bg-primary, rgba(0, 0, 0, 0.25));
    font-family: var(--sx-num);
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-muted, #83899a);
    white-space: pre-wrap;
}

/* ── link cruzado ────────────────────────────────────────────────────────── */

.sx-crosslink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--cmd-r-md, 10px);
    border: 1px solid var(--sx-rule-strong);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary, #a8a8b0);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}
.sx-crosslink:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--text-muted, #83899a);
    color: var(--text-primary, #f5f5f7);
}

/* ── responsivo ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    /* No estreito a equação vira lista: espremer os cinco termos numa linha só
       encolhe o número, que é a única coisa que a faixa existe para mostrar. */
    .sx-recon__eq { flex-direction: column; align-items: stretch; gap: 10px; }
    .sx-recon__op { display: none; }
    .sx-recon__term {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--sx-rule);
    }
    .sx-recon__term--forte { border-bottom: none; padding-top: 4px; }
    .sx-recon__note { flex-basis: 100%; text-align: right; }
    .sx-recon__val { font-size: 18px; }
    .sx-recon__term--forte .sx-recon__val { font-size: 23px; }
    .sx-cards { grid-template-columns: 1fr; }
}