/* ─── B3 Calculator Visual Replica ─────────────────────────────────── */

:root {
    --b3-dark: #1a1f4e;
    --b3-dark-2: #252b6a;
    --b3-blue: #4a90d9;
    --b3-light-blue: #5ba3e6;
    --b3-cyan: #00bcd4;
    --b3-white: #ffffff;
    --b3-bg: #f0f2f5;
    --b3-border: #dde1e6;
    --b3-text: #333;
    --b3-text-light: #666;
    --b3-row-alt: #f7f9fc;
    --b3-highlight: #fff3cd;
    --b3-success: #28a745;
    --b3-danger: #dc3545;
}

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

body {
    font-family: var(--font-sans);
    background: var(--surface-0);
    color: var(--text-0);
    font-size: var(--text-base);
    line-height: 1.55;
    margin: 0;
}

/* ─── Navigation ──────────────────────────────────────────────────── */

/* `height: auto` + `min-height`, nao `height: 56px` — com altura FIXA a barra
   nao cresce ao quebrar, e a segunda linha renderiza SOBRE o conteudo da
   pagina (medido: a 1024px o ultimo item terminava em y=77,5 com a barra
   acabando em y=56, que e exatamente onde o <main> comeca). Desempata os DOIS
   modos de quebra: a das linhas de flex (marca/links/tema/usuario) e a dos
   proprios <a> inline-block DENTRO de .nav-links, que e a que acontece
   primeiro (o div e `flex: 1` e encolhe ate o min-content do item mais largo).
   Sem padding vertical de proposito: o conteudo mede ~47px, entao o min-height
   governa e a barra desdobrada fica visualmente identica a de antes (56px).

   Promovido do override local do console BTG (tools/btg_console/templates/
   base.html), onde essa mesma correcao ja existia — la sobra so o respiro
   vertical, que e proprio dele. */
.topnav {
    background: var(--surface-1);
    border-bottom: 0.5px solid var(--border-1);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.25rem;
    padding: 0 var(--space-5);
    height: auto;
    min-height: 56px;
}

.nav-brand {
    color: var(--text-0);
    font-family: var(--font-mono);
    letter-spacing: 0.18em;
    font-size: var(--text-md);
    font-weight: 500;
    margin-right: var(--space-6);
}

/* Tracking 0,10em e padding lateral 14px seguram os SEIS itens de consulta em
   uma linha. A barra era larga por ESTILO, nao por conteudo: sobre texto em
   caixa alta, 0,18em cobrava ~0,9px por caractere (so "RECOMENDADOS
   ESCRITORIO" gastava ~40px so de entreletras) e o padding cobrava 40px por
   item. Os 0,10em continuam abrindo a caixa alta o suficiente para ela nao
   ficar apertada — e o piso de 44px de area clicavel segue folgado (o item
   mais estreito da ~76px de largura por ~47px de altura). */
.nav-links a {
    color: var(--text-2);
    text-decoration: none;
    padding: 16px 14px;
    display: inline-block;
    font-size: var(--text-sm);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border-bottom: 1.5px solid transparent;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--text-1);
}

.nav-links a.active {
    color: var(--text-0);
    border-bottom-color: var(--accent-gold);
}

/* ─── Main Content ────────────────────────────────────────────────── */

/* Dois niveis de largura util (tokens em tokens.css): `leitura` e o 1200px de
   sempre — formulario, configuracao, confirmacao — e `denso` alarga ate 1490px
   quando o viewport permite, para a tela cujo conteudo principal e uma tabela
   de dados. Quem escolhe e a propria pagina, pelo `{% block largura %}`; o
   base.html traduz o bloco nesta classe. Ver
   tests/unit/api/test_largura_pagina_declarada.py. */
main.largura-densa { --largura-pagina: var(--largura-densa); }

main {
    max-width: var(--largura-pagina);
    margin: 0 auto;
    padding: var(--space-6) var(--space-8);
    background: var(--surface-0);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.page-header h1 {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--text-0);
}

/* ─── Buttons ─────────────────────────────────────────────────────── */

.btn {
    display: inline-block;
    padding: 8px 16px;
    border: 0.5px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: var(--transition);
}

.btn-primary { background: var(--action-primary-bg); color: var(--action-primary-text); }
.btn-primary:hover { background: var(--action-primary-bg-hover); }
.btn-secondary { background: transparent; color: var(--text-0); border-color: var(--border-2); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger-border); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-icon-danger { background: transparent; color: var(--danger); border: none; }
.btn-icon-danger:hover { background: var(--danger-soft); }
.btn-sm { padding: 4px 10px; font-size: var(--text-sm); }

/* ─── Tables (b3-table) ──────────────────────────────────────────── */

.b3-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-1);
    border: 0.5px solid var(--border-2);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.b3-table thead {
    background: var(--surface-2);
}

.b3-table thead th {
    padding: 10px 16px;
    font-weight: 500;
    font-size: var(--uppercase-size);
    letter-spacing: var(--uppercase-tracking);
    text-transform: uppercase;
    color: var(--text-2);
    text-align: left;
    border-bottom: 0.5px solid var(--border-1);
}

.b3-table tbody td {
    padding: 10px 16px;
    border-bottom: 0.5px solid var(--border-0);
    font-size: var(--text-base);
    color: var(--text-1);
}

.b3-table tbody tr:nth-child(even) {
    background: transparent;
}

.b3-table tbody tr:hover {
    background: var(--row-hover);
}

.b3-table tbody td.num {
    color: var(--text-0);
    font-variant-numeric: tabular-nums;
}

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.center, th.center { text-align: center; }

.b3-table thead th.num { text-align: right; }
.b3-table thead th.center { text-align: center; }

.b3-table td.nowrap, .b3-table th.nowrap { white-space: nowrap; }

/* ─── Cards ───────────────────────────────────────────────────────── */

.card {
    background: var(--surface-1);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 20px;
}
.card:last-child { margin-bottom: 0; }
.card > h2 {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-0);
    margin-bottom: 16px;
}
.card > h2:not(:first-child) { margin-top: 24px; }

/* ─── Data table (cabeçalho claro, dentro de cards) ────────────────── */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}
.data-table thead th {
    text-align: left;
    font-weight: 500;
    font-size: var(--uppercase-size);
    letter-spacing: var(--uppercase-tracking);
    text-transform: uppercase;
    color: var(--text-2);
    padding: 8px 12px;
    border-bottom: 0.5px solid var(--border-1);
    white-space: nowrap;
}
.data-table tbody td {
    padding: 10px 12px;
    border-bottom: 0.5px solid var(--border-0);
    vertical-align: middle;
    color: var(--text-1);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--row-hover); }

/* ─── Badges ──────────────────────────────────────────────────────── */

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    background: var(--surface-3);
    color: var(--text-1);
    letter-spacing: 0.06em;
}
.badge-J { background: var(--info-soft); color: var(--info); border: 0.5px solid var(--info-border); }
.badge-A { background: var(--warning-soft); color: var(--warning); border: 0.5px solid var(--warning-border); }
.badge-V { background: var(--success-soft); color: var(--success); border: 0.5px solid var(--success-border); }
.badge-I { background: var(--violet-soft); color: var(--violet); border: 0.5px solid var(--violet-border); }

/* Linha-legenda da incorporacao de juros (evento I) nas abas de fluxo:
   callout sutil que amarra visualmente ao badge violeta da linha "I". */
.row-incorporacao-nota td { background: var(--violet-soft); }

/* ─── Links ───────────────────────────────────────────────────────── */

.link-primary { color: var(--link); text-decoration: none; font-weight: 500; }
.link-primary:hover { color: var(--link-hover); text-decoration: underline; }

/* ─── Forms ───────────────────────────────────────────────────────── */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-group { margin-bottom: 16px; }

.form-group label {
    display: block;
    font-size: var(--uppercase-size);
    letter-spacing: var(--uppercase-tracking);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    color: var(--text-0);
    font-family: inherit;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-3);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px var(--accent-gold-soft);
}

/* ─── Upload ──────────────────────────────────────────────────────── */

.upload-form {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--surface-1);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-2);
}

.upload-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.upload-row label { font-weight: 500; white-space: nowrap; color: var(--text-1); }
.help-text { display: block; color: var(--text-2); font-size: var(--text-sm); margin-top: 4px; }

/* ─── Messages ────────────────────────────────────────────────────── */

.msg {
    padding: 10px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    font-size: var(--text-base);
}
.msg-success { background: var(--success-soft); color: var(--success); border: 0.5px solid var(--success-border); }
.msg-error { background: var(--danger-soft); color: var(--danger); border: 0.5px solid var(--danger-border); }
.msg-info { background: var(--info-soft); color: var(--info); border: 0.5px solid var(--info-border); }
.msg-warn { background: var(--warning-soft); color: var(--warning); border: 0.5px solid var(--warning-border); }

/* ─── Empty states ────────────────────────────────────────────────── */

.empty-state, .empty-text {
    text-align: center;
    padding: 3rem;
    color: var(--text-2);
}

.summary-text {
    text-align: right;
    color: var(--text-2);
    font-size: var(--text-sm);
    margin-top: 0.5rem;
}

hr {
    border: none;
    border-top: 0.5px solid var(--border-1);
    margin: 2rem 0;
}

/* ─── Calculator Input Bar ────────────────────────────────────────── */

.calc-input-bar {
    background: var(--surface-1);
    border: 0.5px solid var(--border-1);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.calc-input-bar .input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calc-input-bar label {
    color: var(--text-2);
    font-size: var(--uppercase-size);
    letter-spacing: var(--uppercase-tracking);
    text-transform: uppercase;
    font-weight: 500;
}

.calc-input-bar input,
.calc-input-bar select {
    padding: 8px 12px;
    background: var(--surface-2);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-sm);
    color: var(--text-0);
    font-family: var(--font-mono);
    font-size: var(--text-base);
    min-width: 150px;
}

.calc-input-bar input::placeholder { color: var(--text-3); }
.calc-input-bar input:focus,
.calc-input-bar select:focus {
    outline: none;
    border-color: var(--accent-gold);
    background: var(--surface-2);
    box-shadow: 0 0 0 2px var(--accent-gold-soft);
}

.calc-input-bar select option {
    background: var(--surface-2);
    color: var(--text-0);
}

.input-suffix {
    display: flex;
    align-items: center;
    gap: 4px;
}

.input-suffix span {
    color: var(--text-2);
    font-size: var(--text-base);
}

.btn-calcular {
    background: var(--action-primary-bg);
    color: var(--action-primary-text);
    border: none;
    padding: 8px 28px;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.btn-calcular:hover {
    background: var(--action-primary-bg-hover);
}

/* ─── DADOS DA CONSULTA Card ──────────────────────────────────────── */

.dados-consulta {
    background: var(--surface-1);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    color: var(--text-0);
    margin-bottom: 0;
}

.dados-header {
    margin-bottom: 0.5rem;
}

.dados-title {
    display: flex;
    flex-direction: column;
}

.dados-label {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--text-0);
}

.dados-sublabel {
    font-size: var(--uppercase-size);
    letter-spacing: var(--uppercase-tracking);
    text-transform: uppercase;
    color: var(--text-2);
}

/* Fileira de crachás do cabeçalho da página do título (F3, §6.1). `wrap` de
   propósito: são quatro crachás de largura variável (a remuneração pode ser
   longa, "IPCA + 7,0718%"), e sem ele a fileira estoura o card em telas
   estreitas em vez de descer para a segunda linha. */
.titulo-crachas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: 0.9rem;
}

.dados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem 0.9rem;
    margin-bottom: 0.75rem;
}

.dados-grid-bottom {
    padding-top: 0.75rem;
    border-top: 0.5px solid var(--border-1);
}

.dado {
    display: flex;
    flex-direction: column;
}

.dado-label {
    font-size: var(--uppercase-size);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 2px;
}

.dado-value {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-0);
    font-variant-numeric: tabular-nums;
}

.dado.highlight .dado-value {
    color: var(--accent-gold);
    font-size: var(--text-md);
    font-weight: 500;
}

.tipo-badge {
    display: inline-block;
    border: 0.5px solid var(--accent-gold-border);
    background: var(--accent-gold-soft);
    color: var(--accent-gold);
    font-size: var(--text-xs);
    font-weight: 500;
    padding: 0 6px;
    border-radius: var(--radius-full);
    vertical-align: 1px;
}

.dado-isin {
    font-size: var(--text-xs);
    color: var(--text-2);
    font-family: var(--font-mono);
    margin-top: 2px;
}

/* ─── Tabs ────────────────────────────────────────────────────────── */

.tabs {
    display: flex;
    background: transparent;
    border-bottom: 0.5px solid var(--border-1);
    margin-bottom: 0;
    border-radius: 0;
    gap: 0;
}

.tab {
    padding: 10px 16px;
    border: none;
    background: transparent;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
    border-bottom: 1.5px solid transparent;
    margin-bottom: -0.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: var(--transition);
}

.tab:hover { color: var(--text-1); }
.tab.active {
    color: var(--text-0);
    border-bottom-color: var(--accent-gold);
}
.tab.disabled {
    color: var(--text-3);
    cursor: not-allowed;
}

.tab-panel {
    background: var(--surface-1);
    border: 0.5px solid var(--border-1);
    border-top: none;
    padding: 1.5rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.section-title {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--text-0);
    margin-bottom: 1rem;
}

/* ─── Cashflow Table ──────────────────────────────────────────────── */

.cashflow-table {
    font-size: var(--text-base);
}

.cashflow-summary {
    margin-top: 1rem;
    text-align: right;
    color: var(--text-2);
    font-size: var(--text-sm);
}

/* ─── PU Par Detail ───────────────────────────────────────────────── */

.formula-box {
    background: var(--surface-2);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    border-left: 2px solid var(--accent-gold);
    margin-bottom: 1.5rem;
}

.formula-box h3 {
    font-size: var(--uppercase-size);
    letter-spacing: var(--uppercase-tracking);
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 8px;
}

.formula {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--text-0);
    font-family: 'Georgia', serif;
}

.formula-sub {
    font-size: var(--text-base);
    color: var(--text-2);
    margin-top: 4px;
    font-family: 'Georgia', serif;
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.detail-table thead {
    background: var(--surface-2);
}

.detail-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: var(--uppercase-size);
    letter-spacing: var(--uppercase-tracking);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-2);
}

.detail-table td {
    padding: 10px 16px;
    border-bottom: 0.5px solid var(--border-0);
    font-size: var(--text-base);
    color: var(--text-1);
}

.detail-table th.num, .detail-table td.num { text-align: right; white-space: normal; }
.detail-table th.center, .detail-table td.center { text-align: center; }

.detail-table .highlight-row {
    background: var(--row-selected);
    box-shadow: inset 2px 0 0 var(--accent-gold);
}

.detail-table .highlight-row td {
    color: var(--accent-gold);
    font-weight: 500;
}

/* ─── Calculation Steps ───────────────────────────────────────────── */

.calc-steps {
    margin-bottom: 1.5rem;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 0.5px solid var(--border-0);
}

.step-num {
    background: var(--accent-gold-soft);
    border: 0.5px solid var(--accent-gold-border);
    color: var(--accent-gold);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    font-weight: 500;
    flex-shrink: 0;
}

.step-text {
    font-size: var(--text-md);
    color: var(--text-1);
    padding-top: 3px;
}

/* ─── Result Box ──────────────────────────────────────────────────── */

.result-box {
    background: var(--surface-1);
    border: 0.5px solid var(--border-1);
    padding: 1.5rem 2rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    color: var(--text-0);
}

.result-main {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.result-label {
    font-size: var(--uppercase-size);
    letter-spacing: var(--uppercase-tracking);
    text-transform: uppercase;
    color: var(--text-2);
}

.result-value {
    font-size: 28px;
    font-weight: 500;
    color: var(--accent-gold);
    font-variant-numeric: tabular-nums;
}

.result-detail {
    margin-top: 8px;
    font-size: var(--text-sm);
    color: var(--text-2);
    font-family: var(--font-mono);
}

/* ─── Flow Details (expandable) ───────────────────────────────────── */

.flow-details {
    margin-top: 1.5rem;
}

.flow-details summary {
    cursor: pointer;
    color: var(--link);
    font-weight: 500;
    padding: 8px 0;
}

.flow-details summary:hover {
    color: var(--link-hover);
}

.dia-nao-util {
    background: var(--surface-2);
    color: var(--text-3);
}

.b3-table td.di-medido {
    color: var(--success);
    font-weight: 500;
}

.b3-table td.di-interpolado {
    color: var(--violet);
    font-style: italic;
}

.b3-table td.di-vertice {
    font-weight: 500;
    color: var(--accent-gold);
}

.flow-event-details {
    margin: 0.5rem 0;
}

.flow-event-details summary {
    font-weight: 500;
    color: var(--text-0);
    padding: 0.3rem 0;
    cursor: pointer;
}

.flow-event-details summary:hover {
    color: var(--accent-gold);
}

.flow-event-details h4 {
    margin: 0.5rem 0 0.3rem;
    font-size: var(--text-sm);
    color: var(--text-2);
}

/* ─── Bond Form ───────────────────────────────────────────────────── */

.bond-form {
    background: var(--surface-1);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--border-1);
    margin-bottom: 1.5rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2 {
    font-size: var(--text-lg);
    color: var(--text-0);
    font-weight: 500;
}

/* ─── Market Data Page ───────────────────────────────────────────── */

.market-data-section {
    margin-bottom: 1.5rem;
}

.market-data-section h2 {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--text-0);
    margin-bottom: 1rem;
}

.metadata-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metadata-card {
    background: var(--surface-1);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    border: 0.5px solid var(--border-1);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metadata-label {
    font-size: var(--uppercase-size);
    font-weight: 500;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: var(--uppercase-tracking);
}

.metadata-value {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-0);
}

.metadata-value.highlight {
    color: var(--accent-gold);
    font-size: var(--text-lg);
}

.table-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    color: var(--text-2);
    font-size: var(--text-base);
}

.table-scroll {
    max-height: 500px;
    overflow: auto;            /* vertical + horizontal (tabelas largas) */
    border-radius: var(--radius-md);
    border: 0.5px solid var(--border-1);
}

/* Scroll horizontal para tabelas largas (muitas colunas) sem limite de altura */
.table-scroll-x {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--border-1);
}

.table-scroll .b3-table thead th,
.table-scroll-x .b3-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-2);
    color: var(--text-2);
}

.table-scroll .b3-table,
.table-scroll-x .b3-table {
    box-shadow: none;
    border-radius: 0;
}

/* ─── Cadastro auto-explicativo: notas e callouts ─────────────────────── */

/* Nota destacada para campos criticos (ex.: Inicio da Rentabilidade).
   As dicas curtas por campo reaproveitam a classe .help-text existente. */
.help-note {
    margin-top: 6px;
    padding: 8px 12px;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-1);
    background: var(--info-soft);
    border-left: 2px solid var(--info);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.help-note strong { color: var(--text-0); }

/* Box de aviso (callout) — ex.: o CSV precisa do historico completo */
.callout {
    margin: 1rem 0;
    padding: 12px 16px;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--warning);
    background: var(--warning-soft);
    border: 0.5px solid var(--warning-border);
    border-left: 2px solid var(--warning);
    border-radius: var(--radius-sm);
}
.callout p { margin: 0 0 8px; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--warning); }
.callout-title {
    display: block;
    font-weight: 500;
    font-size: var(--text-base);
    margin-bottom: 6px;
    color: var(--warning);
}

/* ─── Auditoria de Dados ──────────────────────────────────────────── */

.audit-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.btn-download {
    display: inline-block;
    background: var(--surface-2);
    color: var(--text-0);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--border-2);
    font-size: var(--text-base);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}
.btn-download:hover { background: var(--surface-3); color: var(--accent-gold); }

.audit-avisos {
    background: var(--warning-soft);
    border-left: 2px solid var(--warning);
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem;
    margin: 0.75rem 0;
    font-size: var(--text-base);
    color: var(--warning);
}

.resumo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem 1.5rem;
    margin-top: 0.5rem;
}
.resumo-grid > div {
    display: flex;
    flex-direction: column;
    font-size: var(--text-base);
}
.resumo-label {
    color: var(--text-2);
    font-size: var(--uppercase-size);
    text-transform: uppercase;
    letter-spacing: var(--uppercase-tracking);
}
.resumo-val { font-weight: 500; color: var(--text-0); font-variant-numeric: tabular-nums; }

.audit-legenda {
    margin-top: 0.75rem;
    font-size: var(--text-sm);
    color: var(--text-2);
}

.audit-count { font-size: var(--text-sm); font-weight: 400; color: var(--text-2); }

/* Piso de deflacao (auditoria IPCA) — so quando piso_confirmado.
   piso-sep: rotulo do bloco; piso-muted: linhas de reconciliacao (razao crua /
   VNA sem piso); piso-row: mes de deflacao na serie (tint ambar + borda);
   neg-piso: variacao negativa corrigida em 1,0. tbody eleva a especificidade
   acima do nth-child(even) que zera o fundo das linhas pares. */
.detail-table tr.piso-sep td {
    padding-top: 14px;
    border-bottom: none;
    font-size: var(--uppercase-size);
    letter-spacing: var(--uppercase-tracking);
    text-transform: uppercase;
    color: var(--text-2);
}
.detail-table tr.piso-muted td { color: var(--text-2); }
.b3-table tbody tr.piso-row {
    background: var(--warning-soft);
    box-shadow: inset 2px 0 0 var(--warning);
}
.b3-table tbody tr.piso-row td.neg-piso { color: var(--danger); }

/* Cores de fonte fora de tabelas (legenda/resumo) */
.di-medido { color: var(--success); font-weight: 500; }
.di-interpolado { color: var(--violet); }
.di-vertice { color: var(--text-0); font-weight: 500; }

/* Marcos da timeline (startingdate, cupom, data_calculo, vencimento, aniversario) */
.marco-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    font-size: var(--uppercase-size);
    font-weight: 500;
    background: var(--surface-2);
    color: var(--text-1);
    border: 0.5px solid var(--border-1);
    text-transform: capitalize;
}
.marco-data_calculo { background: var(--accent-gold-soft); color: var(--accent-gold); border-color: var(--accent-gold-border); }
.marco-vencimento { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.marco-startingdate { background: var(--info-soft); color: var(--info); border-color: var(--info-border); }
.marco-cupom { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.marco-aniversario { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }

/* Avisos de cálculo (ex.: DI projetado por persistência na ponta) */
.calc-warnings { margin-bottom: 16px; }
.calc-warning {
    background: var(--warning-soft);
    border-left: 2px solid var(--warning);
    color: var(--warning);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    line-height: 1.4;
    margin-bottom: 8px;
}
.calc-warning:last-child { margin-bottom: 0; }

/* ── Histórico de últimos cálculos ──────────────────────────────── */
.calc-history {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 16px;
}
.calc-history-label {
    font-size: var(--uppercase-size);
    letter-spacing: var(--uppercase-tracking);
    text-transform: uppercase;
    color: var(--text-2);
    font-weight: 500;
    margin-right: 4px;
}
.calc-history-chip-form,
.calc-history-clear-form {
    margin: 0;
}
.calc-history-chip {
    background: var(--surface-2);
    border: 0.5px solid var(--border-1);
    color: var(--text-1);
    border-radius: var(--radius-full);
    padding: 4px 12px;
    font-size: var(--text-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}
.calc-history-chip:hover {
    background: var(--accent-gold-soft);
    color: var(--accent-gold);
    border-color: var(--accent-gold-border);
}
.calc-history-clear {
    background: none;
    border: none;
    color: var(--text-3);
    font-size: var(--text-xs);
    cursor: pointer;
    text-decoration: underline;
    padding: 4px;
}
.calc-history-clear:hover {
    color: var(--danger);
}

/* ─── Cadastro de Títulos — listagem (agrupamento, resumo, filtros) ──── */

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

/* Faixa de resumo (4 agregados de saúde) */
.bonds-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 1.25rem;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--surface-1);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}

.stat-label {
    font-size: var(--uppercase-size);
    letter-spacing: var(--uppercase-tracking);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-2);
}

.stat-value {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--text-0);
    font-variant-numeric: tabular-nums;
}

.stat-hint {
    font-size: var(--text-sm);
    color: var(--text-2);
    line-height: 1.3;
}

.stat-value.stat-ok    { color: var(--success); }
.stat-value.stat-warn  { color: var(--warning); }
.stat-value.stat-muted { color: var(--text-3); }

/* Barra de busca + filtros */
.bonds-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 1.25rem;
}
.bonds-toolbar .search-box { flex: 1; min-width: 220px; }
.bonds-toolbar input,
.bonds-toolbar select {
    width: 100%;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-sm);
    color: var(--text-0);
    font-size: var(--text-base);
    font-family: inherit;
}
.bonds-toolbar input::placeholder { color: var(--text-3); }
.bonds-toolbar select { width: auto; }
.bonds-toolbar input:focus,
.bonds-toolbar select:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px var(--accent-gold-soft);
}
.bonds-toolbar select option {
    background: var(--surface-2);
    color: var(--text-0);
}

/* Multi-select (Vender / Comprar) com buscador */
/* Contexto de posicionamento do .ms-panel (absolute). GENERICO de proposito: os
   widgets do drawer vivem fora da .bonds-toolbar e, sem ancestral posicionado, o
   painel se ancoraria no viewport (M2). */
.ms { position: relative; }
.ms-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-sm);
    color: var(--text-0);
    font-size: var(--text-base);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.ms-toggle:hover { border-color: var(--border-2); }
.ms-toggle:focus-visible {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px var(--accent-gold-soft);
}
.ms-toggle.is-active {
    background: var(--accent-gold-soft);
    border-color: var(--accent-gold-border);
    color: var(--accent-gold-strong);
}
.ms-caret { color: var(--text-2); font-size: 0.8em; }
.ms-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    width: 240px;
    padding: 8px;
    background: var(--surface-1);
    border: 0.5px solid var(--border-2);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2);
}
/* O buscador interno herdava de .bonds-toolbar input / .op-filtros-drawer input.
   Como o widget agora e componente (R18), ele carrega o proprio estilo — fora
   daqueles dois contextos o campo ficava sem box nenhum. */
.ms-search {
    width: 100%;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-sm);
    color: var(--text-0);
    font-size: var(--text-base);
    font-family: inherit;
}
.ms-search::placeholder { color: var(--text-3); }
.ms-search:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px var(--accent-gold-soft);
}
.ms-actions { display: flex; gap: 8px; margin: 8px 0; }
.ms-actions button {
    flex: 1;
    padding: 4px 8px;
    background: var(--surface-2);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
}
.ms-actions button:hover { border-color: var(--border-2); color: var(--text-0); }
.ms-options {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 190px;
    overflow-y: auto;
    border-top: 0.5px solid var(--border-1);
}
.ms-option label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text-0);
    cursor: pointer;
}
.ms-option label:hover { background: var(--surface-2); border-radius: 4px; }
.ms-option input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-appearance: auto;
    appearance: auto;
}

/* Grupos colapsáveis por tipo */
.bond-group { margin-bottom: 1.5rem; }
.group-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 4px;
    cursor: pointer;
    user-select: none;
}
.group-caret {
    color: var(--text-2);
    font-size: var(--text-sm);
    transition: transform 0.15s ease;
}
.bond-group.collapsed .group-caret { transform: rotate(-90deg); }
.bond-group.collapsed .group-body { display: none; }
.group-title {
    color: var(--accent-gold);
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    font-size: var(--text-md);
}
.group-desc { font-size: var(--text-sm); color: var(--text-2); }

/* Badge de indexador (limpo, sem D-N) + chip de tipo */
.idx-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    border: 0.5px solid var(--border-1);
}
.idx-badge.idx-pre        { background: rgba(255,255,255,0.04); color: var(--text-1); border-color: var(--border-1); }
.idx-badge.idx-di_perc,
.idx-badge.idx-di_spread  { background: var(--info-soft); color: var(--info); border-color: var(--info-border); }
.idx-badge.idx-ipca       { background: var(--violet-soft); color: var(--violet); border-color: var(--violet-border); }

/* Rating de credito — badge por classe (IG verde / HY laranja / sem rating cinza) */
.rating-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
    border: 0.5px solid var(--border-1);
}
.rating-badge.is-ig { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.rating-badge.is-hy { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.rating-badge.is-na { background: var(--surface-3); color: var(--text-2); }
.rating-scale-tag { font-size: var(--text-xs); color: var(--text-2); margin-left: 4px; }

/* Form: secao repetivel de ratings (add/remove de linhas) */
.ratings-edit {
    margin: 16px 0;
    padding: 12px 16px;
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-md);
}
.ratings-edit legend { font-weight: 500; padding: 0 6px; color: var(--text-0); }
.ratings-edit .help-text { display: block; margin-bottom: 8px; }
.rating-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.rating-row input,
.rating-row select { flex: 1 1 140px; min-width: 0; }
.rating-row button { flex: 0 0 auto; }
.tipo-chip {
    display: inline-block;
    padding: 1px 6px;
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-2);
}

/* Selos de status */
.seal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    white-space: nowrap;
}
.seal + .seal { margin-left: 8px; }
.seal::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.seal-ok    { color: var(--success); }
.seal-warn  { color: var(--warning); }
.seal-muted { color: var(--text-3); }

.vencido-pill {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    background: var(--danger-soft);
    color: var(--danger);
    border: 0.5px solid var(--danger-border);
}

.cadastro-meta { font-size: var(--text-xs); color: var(--text-3); margin-top: 2px; }

/* Ação "Calcular" — habilitada (link) vs desabilitada (sem prontidão) */
.link-calc {
    color: var(--link);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    margin-right: 10px;
}
.link-calc:hover { text-decoration: underline; }
.link-calc.disabled {
    color: var(--text-3);
    cursor: not-allowed;
    text-decoration: none;
}

/* ── Auth (login / forgot / reset) ─────────────────────────────────── */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--surface-0);
    margin: 0;
}
.auth-card {
    background: var(--surface-1);
    border-radius: var(--radius-md);
    border: 0.5px solid var(--border-1);
    padding: 32px 36px;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-2);
}
.auth-card h1 { font-size: var(--text-xl); margin: 0 0 16px; color: var(--text-0); font-weight: 500; }
.auth-brand {
    font-weight: 500;
    color: var(--accent-gold);
    letter-spacing: var(--uppercase-tracking);
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: var(--uppercase-size);
}
.auth-btn-full { width: 100%; margin-top: 8px; }
.auth-link { margin-top: 14px; font-size: var(--text-base); text-align: center; }
.auth-texto { font-size: var(--text-base); color: var(--text-2); }
.auth-msg { padding: 10px 12px; border-radius: var(--radius-sm); font-size: var(--text-base); margin-bottom: 14px; }
.auth-msg-ok { background: var(--success-soft); color: var(--success); border: 0.5px solid var(--success-border); }
.auth-msg-erro { background: var(--danger-soft); color: var(--danger); border: 0.5px solid var(--danger-border); }
.topnav .nav-links { flex: 1; }
.nav-gear {
    display: inline-flex; align-items: center; padding: 5px;
    border-radius: var(--radius-sm); color: var(--text-2);
    text-decoration: none;
}
.nav-gear:hover { background: var(--surface-2); color: var(--text-0); }
.nav-gear.active { color: var(--accent-gold); }

/* ─── Marca como link da home (spec §4.1 / D2) ─────────────────────
   A marca virou <a href="/"> para abrir o slot do item "Mercado". Sem estas
   regras o <a> herda o sublinhado do agente (nao existe regra global de `a`
   neste CSS — o estilo de link e por componente).

   O seletor e `a.nav-brand`, nao `.nav-brand`: a classe e COMPARTILHADA com o
   console BTG, onde a marca e um <div> SEM link. Com `.nav-brand:hover` o
   console passava a acender a marca em dourado ao passar o mouse — afordancia
   falsa de clique num elemento que nao navega (verificado ao vivo em :8002). */
a.nav-brand { text-decoration: none; }
a.nav-brand:hover { color: var(--accent-gold); }
a.nav-brand:focus-visible {
    outline: 2px solid var(--accent-gold-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ─── Submenu da engrenagem (operacao) ─────────────────────────────
   Precedente: menu "⋯ Avancado" da /localizar (console BTG), cujo CSS vive no
   <style> local dele — nao neste arquivo. Tres armadilhas herdadas (CLAUDE.md §10):
   (1) o painel e position:absolute -> PRECISA de ancestral posicionado, senao
       ancora no viewport;
   (2) overflow != visible em qualquer ancestral CLIPA o painel, e se um eixo
       deixa de ser visible o outro computa para auto -> a .topnav NAO pode ganhar
       overflow-x (ha teste de ausencia travando isso);
   (3) <details> nativo nao fecha ao clicar fora nem no Esc -> handler global no
       base.html.
   Nao usamos [hidden] aqui: o estado e o do proprio <details>. */
.nav-menu { position: relative; display: inline-flex; }
.nav-menu > summary { list-style: none; cursor: pointer; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:focus-visible {
    outline: 2px solid var(--accent-gold-focus);
    outline-offset: 2px;
}
/* Aberto muda o FUNDO sempre, e a cor so quando a engrenagem NAO e a secao
   atual: `.nav-menu[open] > summary` tem especificidade (0,2,1) e atropelaria o
   dourado de `.nav-gear.active` (0,2,0) — o sinal de "voce esta aqui" sumiria
   justamente enquanto o menu esta aberto. `.nav-gear:hover` ja respeita esse
   dourado hoje (empata em especificidade e vem ANTES no arquivo). */
.nav-menu[open] > summary { background: var(--surface-2); }
.nav-menu[open] > summary:not(.active) { color: var(--text-0); }
/* --text-2, nao --text-3: o caret e o indicador de que a engrenagem ABRE algo,
   e com --text-3 mede 2,50:1 no claro e 2,81:1 no escuro — abaixo do piso de
   3:1 de contraste nao-textual. Com --text-2 da 4,63:1 e 4,87:1, e casa com a
   cor da propria engrenagem (o par le como um controle so). */
.nav-menu-caret { color: var(--text-2); margin-left: 1px; }
/* z-index acima dos paineis de conteudo (30/40/50 neste arquivo) e abaixo do
   modal (1000): o dropdown desce sobre o cabecalho sticky das tabelas. */
.nav-menu-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 60;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    min-width: 216px;
    padding: 6px;
    background: var(--surface-1);
    border: 0.5px solid var(--border-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
}
.nav-menu-panel a {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-1);
    text-decoration: none;
    font-size: var(--text-base);
    white-space: nowrap;
}
.nav-menu-panel a:hover { background: var(--surface-2); color: var(--text-0); }
.nav-menu-panel a.is-active { color: var(--accent-gold); }
.nav-user { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: var(--text-base); }
.nav-user form { margin: 0; }
.nav-user button {
    background: transparent;
    border: 0.5px solid var(--border-2);
    color: var(--text-1);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: var(--text-sm);
    cursor: pointer;
}
.nav-user button:hover { background: var(--surface-2); }

/* Toggle de tema (claro/escuro) — lua no claro, sol no escuro */
.nav-theme {
    display: inline-flex; align-items: center; padding: 5px;
    border-radius: var(--radius-sm); color: var(--text-2);
    background: transparent; border: none; cursor: pointer;
}
.nav-theme:hover { background: var(--surface-2); color: var(--text-0); }
.nav-theme .icon-sun { display: none; }
.nav-theme .icon-moon { display: inline; }
[data-theme="dark"] .nav-theme .icon-sun { display: inline; }
[data-theme="dark"] .nav-theme .icon-moon { display: none; }

/* ── Admin de usuários ─────────────────────────────────────────────── */
.admin-form-inline { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.admin-form-inline .form-group { margin-bottom: 0; min-width: 260px; }
.admin-checkbox { display: flex; align-items: center; gap: 6px; font-size: var(--text-base); padding-bottom: 8px; }
.admin-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-acoes form { margin: 0; }

/* ── Snapshots ─────────────────────────────────────────────────────── */
.snapshot-erro { color: var(--danger); font-weight: 500; }

/* ── Ambiente /settings ────────────────────────────────────────────── */
.settings-wrap { display: flex; gap: 24px; align-items: flex-start; }
.settings-nav { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-nav a {
    padding: 9px 14px; border-radius: var(--radius-sm); font-size: var(--text-md);
    color: var(--text-1); text-decoration: none;
}
.settings-nav a:hover { background: var(--surface-2); color: var(--text-0); }
.settings-nav a.active {
    background: var(--surface-2);
    color: var(--accent-gold);
    border-left: 2px solid var(--accent-gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-weight: 500;
}
.settings-content { flex: 1; min-width: 0; }
.card > h2:first-child { margin-top: 0; }

/* Forms empilhados (perfil) nao devem esticar a largura toda */
.settings-content form:not(.admin-form-inline) { max-width: 460px; }
.settings-content .btn-primary { margin-top: 4px; }

/* Caixa do token recem-criado */
.token-novo { margin-top: 16px; margin-bottom: 0; }
.token-novo code {
    display: inline-block; margin-top: 8px; padding: 8px 12px;
    background: var(--surface-2); border-radius: var(--radius-sm);
    font-size: var(--text-base); word-break: break-all;
    font-family: var(--font-mono);
}
.admin-form-inline + .token-novo { margin-top: 20px; }

/* Pills de status (tokens e usuarios) */
.pill {
    display: inline-block; padding: 2px 10px; border-radius: var(--radius-full);
    font-size: var(--text-sm); font-weight: 500; line-height: 1.5;
}
.pill-ok { background: var(--success-soft); color: var(--success); }
.pill-muted { background: var(--surface-2); color: var(--text-2); }
.pill-warn { background: var(--warning-soft); color: var(--warning); }
tr.token-revogado { color: var(--text-2); }
tr.token-revogado code, tr.token-revogado td { opacity: 0.7; }

/* ─── Console BTG (genéricas, reusadas pelo padrão v3) ───────────────── */

/* Grid de cards de resumo (genérico; ≠ .bonds-summary) */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 1rem;
    padding: 0;
    list-style: none;
}
/* .stat-value (global) já estiliza o número; abaixo só a cor por semântica */
.stat-card.is-ok .stat-value { color: var(--success); }
.stat-card.is-warn .stat-value { color: var(--warning); }
.stat-card.is-err .stat-value { color: var(--danger); }
.stat-card.is-muted .stat-value { color: var(--text-2); }

/* Linha de botões de ação (substitui .check-actions) */
.action-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 12px 0;
}

/* Texto secundário sob o h1 */
.subtitle { color: var(--text-2); font-size: var(--text-base); margin-bottom: 12px; }

/* ── Oportunidades de troca (lista + auditoria) ── */
.hint { border-bottom: 1px dotted var(--text-3); cursor: help; }
.op-controls { display: flex; align-items: center; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.op-data-label { color: var(--text-2); font-size: var(--text-sm); }

/* == Bloco de filtros da /oportunidades (Item 8) ========================== */
/* Barra essencial: UMA linha, sem quebra. Escopada com uma classe propria — a
   .bonds-toolbar e compartilhada por /bonds, /recomendados, _por_conta, os
   componentes e o console BTG, e mudar o flex-wrap la quebraria as 7 telas.
   NAO usar overflow-x aqui: em CSS, se um eixo do overflow deixa de ser visible,
   o outro computa para auto — a barra passaria a clipar os .ms-panel (absolutos)
   de Vender/Comprar. Com nowrap o excesso simplesmente transborda. */
.op-filtros-bar { flex-wrap: nowrap; }
/* A margem da barra vem da .bonds-toolbar compartilhada (1.25rem). Override LOCAL
   para entrar na escala sem tocar a classe global, que 5 telas + o console BTG usam
   e um teste trava byte a byte. Especificidade IGUAL a .bonds-toolbar — precisa vir
   DEPOIS dela no arquivo (esta ja vem: .bonds-toolbar e ~1147, isto e ~1557). */
.op-filtros-bar { margin-bottom: var(--space-5); }
.op-filtros-bar > * { flex: 0 0 auto; white-space: nowrap; }
/* A busca e a UNICA elastica, entao e a primeira a encolher — mas com `min-width:0`
   ela encolhe ate ZERO: medido em 1440px com o filtro de conta (LOCAL) ligado, o
   campo sumia (0px) e a barra ainda transbordava 30px. O piso mantem a busca
   sempre usavel; o aperto vira transbordo, que e o comportamento aceito (§5.5). */
.op-filtros-bar .search-box { flex: 1 1 auto; min-width: 150px; }
/* Os dois campos de texto da barra nasciam com a largura cheia de
   `.bonds-toolbar input` (231px cada). Um ID de conta e um percentual sao curtos —
   o excesso e o que espremia a busca. */
.op-filtros-bar #op-conta { width: 96px; }
.op-filtros-bar #op-ganho-min { width: 64px; }

/* Pilula "So recomendados": era uma faixa propria de 20 px acima da barra (Item 7),
   agora um controle da barra essencial como os demais. */
.op-pill-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: var(--surface-2);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    color: var(--text-0);
    white-space: nowrap;
    cursor: pointer;
}
.op-pill-check.is-active {
    background: var(--accent-gold-soft);
    border-color: var(--accent-gold-border);
    color: var(--accent-gold-strong);
}
/* sem isso o checkbox herda o box de input da .bonds-toolbar (:1155) — width:100%
   + padding:8px 12px — e vira um bloco deformado do tamanho de um campo de texto
   (mesmo bug que .ms-option input[type="checkbox"] ja resolve, acima). */
.op-pill-check input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-appearance: auto;
    appearance: auto;
}

.op-drawer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-sm);
    color: var(--text-0);
    font-size: var(--text-base);
    font-family: inherit;
    cursor: pointer;
}
.op-drawer-toggle:hover { border-color: var(--border-2); }
.op-drawer-toggle:focus-visible {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px var(--accent-gold-soft);
}
.op-drawer-toggle.is-active {
    background: var(--accent-gold-soft);
    border-color: var(--accent-gold-border);
    color: var(--accent-gold-strong);
}
.op-drawer-caret { color: var(--text-2); font-size: 0.8em; }

/* Drawer horizontal: largura cheia ABAIXO da barra (nao lateral — a tabela ja
   tem ~10 colunas e nao pode perder largura). */
.op-filtros-drawer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px 16px;
    padding: 16px;
    margin: 0 0 var(--space-4);
    background: var(--surface-1);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-sm);
}
/* OBRIGATORIO: [hidden] so vale pela folha do agente, que perde para o display
   acima. Sem esta linha o drawer nunca oculta. */
.op-filtros-drawer[hidden] { display: none; }

.op-filtro-grupo {
    grid-column: 1 / -1;
    margin: 4px 0 -4px;
    color: var(--text-2);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.op-filtro-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.op-filtro-rotulo { color: var(--text-2); font-size: var(--text-sm); }

/* Replica do estilo de input da .bonds-toolbar (os widgets do drawer nao sao
   descendentes dela, entao nao herdam as regras de :1155-1174). */
.op-filtros-drawer input,
.op-filtros-drawer select {
    width: 100%;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-sm);
    color: var(--text-0);
    font-size: var(--text-base);
    font-family: inherit;
}
.op-filtros-drawer input::placeholder { color: var(--text-3); }
.op-filtros-drawer input:focus,
.op-filtros-drawer select:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px var(--accent-gold-soft);
}
.op-filtros-drawer select option { background: var(--surface-2); color: var(--text-0); }
/* o checkbox das opcoes nao herda o box de input acima */
.op-filtros-drawer .ms-option input[type="checkbox"] {
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
.op-filtros-drawer .ms-toggle { width: 100%; justify-content: space-between; }
.op-filtros-drawer .ms-option label { font-family: inherit; }

/* O campo da matriz ocupa a LINHA inteira do grid do drawer: as colunas tem ~208 px e
   a grade 4x4 mede ~364 px, entao numa coluna so ela transborda a celula e a PAGINA
   passa a rolar na horizontal (medido no browser a 1440 px, com a lente de cliente
   ligada — a configuracao que o laboratorio default nao cobre). */
.op-filtros-drawer .op-campo-par { grid-column: 1 / -1; }
.op-filtros-drawer .op-campo-par .help-note { max-width: 62ch; }

/* Matriz 4x4 do filtro de par (cross-index 1a, R14).
   🚨 ESCOPO PROPRIO OBRIGATORIO: a regra `.op-filtros-drawer input` acima da a TODO
   input do drawer `width:100%` + padding + borda + fundo. Sem estas regras as 16
   caixas de selecao saem como 16 CAIXAS DE TEXTO da largura da coluna — e o
   seletor abaixo vence por especificidade (0,2,1 contra 0,1,1). */
/* `align-self: start` porque o `.op-filtro-campo` e um flex column com `stretch`
   default: sem isto a tabela e esticada para a largura da LINHA inteira do drawer e as
   colunas se afastam tanto do cabecalho que a associacao linha x coluna se perde. */
.op-matriz { border-collapse: collapse; margin: 2px 0 8px; align-self: start; }
.op-matriz th,
.op-matriz td { padding: 4px 8px; text-align: center; }
.op-matriz thead th { font-weight: normal; }
.op-matriz tbody th { text-align: right; font-weight: normal; }
.op-matriz-eixo { color: var(--text-3); font-size: var(--text-xs); white-space: nowrap; }
.op-matriz input[type="checkbox"] {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    accent-color: var(--accent-gold);
    cursor: pointer;
}
/* As celulas com perna IPCA (o 1b). Cinza + cursor de bloqueio; a EXPLICACAO vive
   no texto da secao, porque `title` num <input disabled> nao aparece em
   Chrome/Safari (R15). */
.op-matriz input[type="checkbox"][disabled] { opacity: 0.35; cursor: not-allowed; }

/* Chips de filtro ativo: sempre visiveis, um por VALOR selecionado. */
/* Avisos metodologicos do fim da /oportunidades: PROSA. A linha de leitura NAO
   acompanha o container denso (~1425px a 1920 = mais de 200 caracteres por
   linha); 78ch e a mesma convencao dos outros pontos de prosa do arquivo.
   O teto vive aqui, com escopo DESTA tela, e nao na macro `alert` — que e
   compartilhada por varias telas e cujas mensagens curtas nao ganham nada. */
.op-avisos .msg { max-width: 78ch; }

.op-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--space-4); }
.op-chips[hidden] { display: none; }
.op-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    background: var(--accent-gold-soft);
    border: 0.5px solid var(--accent-gold-border);
    border-radius: 999px;
    color: var(--accent-gold-strong);
    font-size: var(--text-sm);
}
.op-chip button {
    padding: 0 5px;
    background: none;
    border: 0;
    border-radius: 999px;
    color: inherit;
    font-size: var(--text-sm);
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
}
.op-chip button:hover { background: var(--accent-gold-border); }
.op-chips-limpar {
    padding: 3px 8px;
    background: none;
    border: 0.5px solid var(--border-1);
    border-radius: 999px;
    color: var(--text-2);
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
}
.op-chips-limpar:hover { border-color: var(--border-2); color: var(--text-0); }

/* Desktop-first: abaixo de ~700px a barra empilha (a alternativa, transbordar numa
   tela estreita, e pior). Acima disso o nowrap vale e o excesso transborda — ver o
   comentario de .op-filtros-bar sobre por que NAO usar overflow-x. */
@media (max-width: 700px) {
    .op-filtros-bar { flex-wrap: wrap; }
    .op-filtros-bar .search-box { min-width: 100%; }
}
/* == fim do bloco de filtros da /oportunidades =========================== */

.op-risco-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.op-simulador { margin: 16px 0; }
.op-simulador form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.op-simulador input { width: 110px; }
.op-simulador select { min-width: 150px; }
.op-etapas-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 16px 0; }
.op-etapas-2 .card h3 { margin: 0 0 10px; font-size: var(--text-md); }
.op-audit-tabs { margin-top: 20px; }
.op-audit-tabs .tab-sub { color: var(--text-3); font-weight: 400; }
.audpanel { margin: 12px 0 20px; }
.audpanel h4 { margin: 16px 0 6px; font-size: var(--text-md); }
.op-cenario-b-totais { margin: 14px 0 0 auto; max-width: 460px; }
.op-veredito { margin: 16px 0; }

/* ── Top X por posição (Oportunidades) ── */
.op-group-head td { background: var(--surface-2); font-weight: 500; color: var(--text-1); padding-top: 10px; }
.op-group-head .op-rating { color: var(--text-3); font-weight: 400; margin-left: 6px; }
.op-rank { display: inline-block; min-width: 2em; color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 500; }
.op-alt-link { margin-left: 10px; color: var(--accent-gold); text-decoration: none; font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
.op-alt-link:hover, .op-alt-link:focus-visible { text-decoration: underline; }
/* Refino server-side (HTMX): ganho minimo, cabecalho ordenavel e paginacao */
.op-ganho-min { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: var(--text-sm); }
.op-ganho-min label { white-space: nowrap; }
.bonds-toolbar .op-ganho-min input { width: 6.5rem; }
.op-sort { color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.op-sort:hover, .op-sort:focus-visible { color: var(--accent-gold); text-decoration: underline; }
.op-sort.is-active { color: var(--accent-gold); }
.op-sort-ind { font-size: 0.85em; }
.op-paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; color: var(--text-2); font-size: var(--text-sm); }
.op-total { font-variant-numeric: tabular-nums; }
.op-pag-nav { display: inline-flex; align-items: center; gap: 12px; }
.op-pag-atual { font-variant-numeric: tabular-nums; }
.op-pag-link { color: var(--accent-gold); text-decoration: none; font-weight: 500; cursor: pointer; }
.op-pag-link:hover, .op-pag-link:focus-visible { text-decoration: underline; }
/* Resumo lado a lado (placar manter × trocar) — topo da auditoria da troca.
   A manchete do delta (--text-xl, full-width, no topo, colorida por sinal) + dois cards
   secundarios (--text-lg) abaixo. Empilha <=720px. So var(--*), zero hex. */
.op-resumo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 0.5rem;
}
.op-resumo-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--surface-1);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.op-resumo-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--uppercase-size);
    letter-spacing: var(--uppercase-tracking);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-2);
}
.op-resumo-val {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--text-0);
    font-variant-numeric: tabular-nums;
}
.op-resumo-sub {
    font-size: var(--text-sm);
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}
.op-resumo-delta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-md);
}
.op-resumo-delta-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--text-2);
}
.op-resumo-delta-num {
    font-size: var(--text-xl);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-0);
}
.op-resumo-delta.is-pos .op-resumo-delta-num { color: var(--success); }
.op-resumo-delta.is-neg .op-resumo-delta-num { color: var(--warning); }
.op-resumo-legenda {
    font-size: var(--text-sm);
    color: var(--text-2);
    margin: 0 0 1.25rem;
}
@media (max-width: 720px) {
    .op-resumo { grid-template-columns: 1fr; }
}
.b3-table tfoot tr.total td, .detail-table tr.total td { font-weight: 500; border-top: 1px solid var(--border-1); }

/* ── Cards de prévia da validação de preços (/validar) ── */
.validar-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.validar-card {
    background: var(--surface-1);
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.validar-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}
.validar-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.validar-card-label {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-2);
    font-family: var(--mono, monospace);
}
.validar-card-counts {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-base);
    color: var(--text-2);
}
.validar-card-counts strong {
    color: var(--text-0);
    font-weight: 500;
}
.validar-count-sep { color: var(--border-1); }
.validar-card-desc {
    font-size: var(--text-sm);
    color: var(--text-2);
}
.validar-card-ancora {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
}
.validar-ancora-label { color: var(--text-2); }
.validar-ancora-cod {
    font-family: var(--mono, monospace);
    font-size: var(--text-sm);
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    color: var(--text-0);
}
.validar-ainda-amostra { color: var(--text-2); font-size: var(--text-sm); }

/* Barra de progresso (varredura / envio) */
.progress-bar {
    height: 8px;
    background: var(--surface-2);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: 4px 0 12px;
}
.progress-bar > span { display: block; height: 100%; background: var(--success); }
.progress-bar.is-running > span { background: var(--accent-gold); }

/* Chip de status em tabela */
.status-badge {
    display: inline-block;
    font-size: 11px;
    line-height: 1.6;
    padding: 1px 8px;
    border-radius: 99px;
    white-space: nowrap;
}
.status-badge.is-ok    { background: var(--success-soft); color: var(--success); border: 0.5px solid var(--success-border); }
.status-badge.is-warn  { background: var(--warning-soft); color: var(--warning); border: 0.5px solid var(--warning-border); }
.status-badge.is-err   { background: var(--danger-soft);  color: var(--danger);  border: 0.5px solid var(--danger-border); }
.status-badge.is-info  { background: var(--info-soft);    color: var(--info);    border: 0.5px solid var(--info-border); }
.status-badge.is-muted { background: var(--surface-3);    color: var(--text-2);  border: 0.5px solid var(--border-1); }
/* is-unknown: ausencia de dado (ex.: risco "nao comparavel"). A BORDA TRACEJADA
   e o diferenciador de FORMA vs is-muted (solido) — legivel sem depender de cor
   (daltonismo + PDF paleta clara). Fundo transparente = "vazio"; so var(--*). */
.status-badge.is-unknown { background: transparent;       color: var(--text-2);  border: 1px dashed var(--border-2); }

/* Detalhe de título unificado (console BTG) */
.sec-label { font-size: 10.5px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .7px; color: var(--text-2); padding: 8px 0 6px; }
.raw-note { color: var(--warning); font-size: var(--text-sm); }
.muted { color: var(--text-2); }

/* Spinner indeterminado do cálculo B3 na curadoria (console BTG).
   Escondido por padrão; HTMX põe .htmx-request no form durante a chamada. */
.calc-spinner { display: none; align-items: center; gap: 6px;
                color: var(--text-2); font-size: 0.9rem; }
.htmx-request .calc-spinner { display: inline-flex; }
.calc-spinner .dot { width: 12px; height: 12px; border: 2px solid var(--border-2);
                     border-top-color: var(--accent-gold); border-radius: 50%;
                     animation: b3-spin 0.7s linear infinite; }
@keyframes b3-spin { to { transform: rotate(360deg); } }

/* ── Tooltip leigo do perfil (§11.3) ─────────────────────────────────────── */
.perfil-tooltip-wrap { display: inline-block; }
.perfil-tooltip-wrap > summary { list-style: none; cursor: pointer; display: inline-block; }
.perfil-tooltip-wrap > summary::-webkit-details-marker { display: none; }

.perfil-tooltip-panel {
  position: absolute;
  z-index: 40;
  margin-top: 4px;
  min-width: 280px;
  max-width: 400px;
  background: var(--surface-1);
  border: 0.5px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
}
.perfil-tooltip-aviso {
  background: var(--warning-soft);
  border: 0.5px solid var(--warning-border);
  color: var(--warning);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
}
.perfil-tooltip-ok {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--success);
  margin-bottom: 0.4rem;
}
.perfil-tooltip-lista {
  margin: 0.25rem 0 0.5rem 1rem;
  padding: 0;
  list-style: disc;
  font-size: 0.82rem;
}
.perfil-tooltip-tag {
  display: inline-block;
  background: var(--surface-3);
  color: var(--text-2);
  border-radius: var(--radius-sm);
  font-size: 0.73rem;
  padding: 0 4px;
  margin-right: 4px;
  vertical-align: middle;
}
.perfil-tooltip-desc {
  color: var(--text-2);
  font-size: 0.8rem;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 0.5px solid var(--border-1);
}
.perfil-tooltip-fecho {
  font-size: 0.78rem;
  color: var(--text-2);
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 0.5px solid var(--border-1);
  font-style: italic;
}

/* ── Tooltip leigo em cabecalho de coluna (hover, sem JS) ────────────────── */
/* Abre no hover/foco sobre o rotulo da coluna (+ icone "?"). Substitui o
   title= nativo por um painel formatado. Usado na tabela /oportunidades.
   O wrapper de scroll da tabela deve ser .table-scroll-tip (overflow: visible)
   para o painel absoluto nao ser clipado pelo overflow-x. */
.col-tip { position: relative; display: inline-flex; }
.col-tip__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help;
  outline: none;
  border-bottom: 1px dotted var(--text-3);
}
.col-tip__label:focus-visible { outline: 2px solid var(--accent-gold-focus); outline-offset: 2px; }
.col-tip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--accent-gold-border);
  color: var(--accent-gold);
  font-size: 9px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
}
.col-tip__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: 320px;
  max-width: 340px;
  background: var(--surface-1);
  border: 0.5px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: 0.7rem 0.85rem;
  text-align: left;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  color: var(--text-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  pointer-events: none;
}
.col-tip:hover .col-tip__panel,
.col-tip:focus-within .col-tip__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .12s ease, transform .12s ease;
}
.col-tip--right .col-tip__panel { left: auto; right: 0; }
.col-tip__title {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-0);
  margin-bottom: 5px;
}
.col-tip__intro,
.col-tip__body {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.5;
}
.col-tip__body:last-child { margin-bottom: 0; }
.col-tip__row {
  display: flex;
  gap: 8px;
  margin-bottom: 9px;
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.5;
}
.col-tip__row > span:last-child { flex: 1; }
.col-tip__badge {
  flex-shrink: 0;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 99px;
  white-space: nowrap;
  border: 0.5px solid transparent;
}
.col-tip__badge.is-success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.col-tip__badge.is-info    { background: var(--info-soft);    color: var(--info);    border-color: var(--info-border); }
.col-tip__foot {
  margin: 2px 0 0;
  padding-top: 9px;
  border-top: 0.5px solid var(--border-1);
  font-size: 0.75rem;
  color: var(--text-2);
  line-height: 1.5;
}

/* Deixa o painel do tooltip escapar sem ser clipado. O wrapper troca o
   overflow-x:auto por visivel (a tabela cabe no desktop) E a propria .b3-table
   perde o overflow:hidden (que existe so para clipar os cantos arredondados —
   ja zerados dentro do wrapper de scroll, entao aqui e inofensivo remover). */
.table-scroll-tip,
.table-scroll-tip .b3-table { overflow: visible; }

/* ── Rodapé "Sobre a quarentena" (§11.4) ─────────────────────────────────── */
.validar-quarentena-casos {
  display: flex;
  gap: 0.75rem;
  margin: 0.75rem 0;
  flex-wrap: wrap;
}
.validar-quarentena-caso {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1;
  min-width: 220px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
}
.validar-quarentena-saidas {
  margin: 0.25rem 0 0 1.2rem;
  padding: 0;
  line-height: 1.7;
}

/* Quarentena recolhível na tela /enviar (console BTG) */
details.quarentena-det > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
details.quarentena-det > summary::-webkit-details-marker { display: none; }
details.quarentena-det .q-caret { transition: transform 0.15s; color: var(--warning); }
details.quarentena-det[open] .q-caret { transform: rotate(90deg); }
details.quarentena-det .q-ver { margin-left: auto; font-size: 12px; opacity: 0.85; }
details.quarentena-det ul {
    margin: 10px 0 2px;
    padding-left: 18px;
    columns: 4;
    font-size: 12px;
    line-height: 1.7;
}

/* Botão de ação afirmativa transparente (gêmeo do .btn-icon-danger) */
.btn-icon-primary { background: transparent; color: var(--info); border: none; }
.btn-icon-primary:hover { background: var(--info-soft); }
.btn-icon-primary:disabled { color: var(--text-2); background: transparent; cursor: not-allowed; }

/* ── Validar: cards por perfil ─────────────────────────────────────────── */
.validar-perfil-card { border:0.5px solid var(--border-1); border-radius:var(--radius-md);
  margin-bottom:.6rem; overflow:hidden; border-left:3px solid var(--border-2); }
.validar-perfil-card.is-ok   { border-left-color:var(--success); }
.validar-perfil-card.is-err  { border-left-color:var(--danger); }
.validar-perfil-card.is-warn { border-left-color:var(--warning); }
/* NÃO usar display:flex direto no <summary> — quebra o toggle nativo do
   <details> no Chrome/Safari. O flex vai num wrapper interno. */
.validar-perfil-head { padding:.5rem .7rem; background:var(--surface-2);
  cursor:pointer; list-style:none; }
.validar-perfil-head::-webkit-details-marker { display:none; }
.validar-perfil-head-row { display:flex; align-items:center; gap:.5rem; }
.validar-perfil-meta { font-size:.78rem; color:var(--text-2); }
.validar-herdam { padding:.35rem .7rem; margin:0; font-size:.8rem; }
.btn-ghost { background:transparent; color:var(--text-1); border:0.5px solid var(--border-2); border-radius:var(--radius-sm); }
.btn-ghost:hover { background:var(--surface-2); }

/* ── Modal genérico (console) ──────────────────────────────────────────── */
.modal-backdrop { position:fixed; inset:0; background:rgba(12,18,40,.45);
  display:flex; align-items:flex-start; justify-content:center; z-index:1000;
  padding:4vh 1rem; overflow:auto; }
.modal-backdrop[hidden] { display:none; }
.modal { position:relative; background:var(--surface-1); border-radius:var(--radius-lg); max-width:min(960px, 94vw);
  width:100%; box-shadow:var(--shadow-2); border:0.5px solid var(--border-1); }
.modal-x { position:absolute; top:.7rem; right:.9rem; width:30px; height:30px; z-index:2;
  display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1;
  border:0.5px solid var(--border-2); background:var(--surface-2); border-radius:var(--radius-sm);
  color:var(--text-2); cursor:pointer; box-shadow:var(--shadow-2); }
.modal-x:hover { background:var(--surface-3); color:var(--text-1); }
.modal-bd { padding:1.1rem 1.2rem; max-height:80vh; overflow:auto; scrollbar-gutter:stable;
  scrollbar-width:thin; scrollbar-color:var(--text-3) transparent; }
.modal-bd::-webkit-scrollbar { width:10px; }
.modal-bd::-webkit-scrollbar-track { background:transparent; }
.modal-bd::-webkit-scrollbar-thumb { background:var(--text-3); border-radius:6px;
  border:2px solid transparent; background-clip:padding-box; }
.modal-bd::-webkit-scrollbar-thumb:hover { background:var(--text-2); }
.ev-passado td { color:var(--text-2); background:var(--surface-2); }
.data-evento-nominal { color: var(--text-2); font-size: 0.85em; margin-left: .25em; }

/* Stepper de fases da tela /localizar (ANBIMA -> Fallback B3) */
.loc-stepper { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; flex-wrap: wrap; }
.loc-step {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; padding: 5px 11px; border-radius: var(--radius-full);
    border: 1px solid var(--border-1); background: var(--surface-1); color: var(--text-2);
}
.loc-step .loc-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; }
.loc-step.is-done { color: var(--success); border-color: var(--success); }
.loc-step.is-active {
    color: var(--surface-0); background: var(--accent-gold);
    border-color: var(--accent-gold); font-weight: 600;
}
.loc-step.is-active .loc-dot { background: var(--surface-0); animation: loc-pulse 1s ease-in-out infinite; }
.loc-arrow { color: var(--text-3); }
@keyframes loc-pulse { 50% { opacity: .35; } }

/* Barra listrada na transição ANBIMA->B3 (b3_pendente) */
.progress-bar.is-transition > span {
    background: repeating-linear-gradient(45deg,
        var(--accent-gold), var(--accent-gold) 8px,
        var(--accent-gold-soft) 8px, var(--accent-gold-soft) 16px);
    animation: loc-stripe 1s linear infinite;
}
@keyframes loc-stripe { to { background-position: 22px 0; } }

/* Sub-tab "Rating XP" da /curadoria: comparação BTG×XP por título ambíguo */
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin: 12px 0; }
.cmp-col { border: 1px solid var(--border-1); border-radius: 10px; padding: 14px; }
.cmp-name { font-weight: 600; padding: 8px 10px; margin: 4px 0 12px; border-radius: 8px;
            background: var(--surface-1); }
.cmp-why { border-left: 3px solid var(--accent-gold); padding: 8px 12px; margin: 8px 0;
           background: var(--surface-1); border-radius: 0 6px 6px 0; }
.cmp-det { border: 1px solid var(--border-1); border-radius: 8px; padding: 10px 14px; margin: 8px 0; }
.cmp-det > summary { cursor: pointer; }
@media (max-width: 720px) { .cmp-grid { grid-template-columns: 1fr; } }

/* == Histograma da distribuicao do ganho (/oportunidades, Item 6c) ========= */
.op-histograma { border: 1px solid var(--border-1); border-radius: var(--radius-md);
                 background: var(--surface-1); padding: 8px 14px 4px; margin: 0 0 12px; }
.op-hist-titulo { color: var(--text-1); font-weight: 600; font-size: var(--text-base);
                  margin: 0 0 2px; }
.op-hist-grid { stroke: var(--border-1); stroke-width: 1; }
.op-hist-eixo-tit { fill: var(--text-2); font-size: var(--text-xs); font-weight: 600; }
/* Largura CHEIA (redesenho do topo, Task 6, 2026-07-29): o grafico deixou de dividir a
   linha com a coluna de KPIs (Task 5) e agora ocupa os 1136 px do card.
   O `max-width` na largura NATURAL do viewBox e OBRIGATORIO — e a mesma protecao que o
   `max-width: 720px` dava quando o viewBox era 720, e removê-la foi um bug de regressao
   reportado do escritorio. Num SVG com viewBox, TUDO escala junto com a largura,
   inclusive o texto: num container de ~2.000 px o fator vira 1,8 e os rotulos de eixo
   (`var(--text-xs)`, 10 px) renderizam a ~18 px — MAIORES que os 13 px do corpo da
   tabela, que nao escala. Com o teto, a escala nunca passa de 1,0 e a tipografia do
   grafico continua subordinada a da pagina. */
.op-hist-svg { display: block; width: 100%; max-width: 1100px; height: auto;
               margin: 0 auto; font-variant-numeric: tabular-nums; }
/* Regua DIVERGENTE (melhor <-> pior) com neutro no meio, nao categorica: a variacao
   de rating e polaridade, nao identidade. Validado com o script de paleta do
   ferramental de dataviz: CVD dE 9,9 (piso 8) e visao normal 15,7 (piso 15) — passa,
   com o respiro de 1 px entre segmentos como codificacao secundaria. */
.op-hist-seg.is-melhora { fill: var(--success); }
.op-hist-seg.is-mesmo   { fill: var(--text-2); }
.op-hist-seg.is-aumento { fill: var(--warning); }
/* "sem rating" e ausencia de dado, nao uma quarta classe de risco: hachura fora da
   regua de cor. */
.op-hist-seg.is-nc      { fill: url(#op-hist-hachura); }
/* `--surface-3`, nao `--surface-2`: o fundo da hachura precisa se separar do CARD, que
   e `--surface-1`. Medido no dark, surface-2 da rgb(27,34,53) contra um card
   rgb(19,24,38) — 8 pontos por canal, e o segmento "sem rating" lia como BURACO na
   barra, nao como fatia. */
.op-hist-hachura-fundo  { fill: var(--surface-3); }
.op-hist-hachura-linha  { stroke: var(--text-3); stroke-width: 1; }
.op-hist-seg.is-dim { opacity: 0.28; }
.op-hist-seg.is-sel { opacity: 1; }
/* `is-sel` vence `is-dim` quando as duas coexistem (previa do arraste troca as duas ao
   vivo): mesma especificidade, entao a ORDEM decide — esta regra vem depois. */
.op-hist-keys { font-weight: 400; color: var(--text-2); font-size: var(--text-sm);
                margin-left: 18px; }
.op-hist-sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px;
              vertical-align: -1px; margin: 0 5px 0 12px; }
.op-hist-sw.is-melhora { background: var(--success); }
.op-hist-sw.is-mesmo   { background: var(--text-2); }
.op-hist-sw.is-aumento { background: var(--warning); }
.op-hist-sw.is-nc { background: var(--surface-2); border: 0.5px solid var(--border-2);
    background-image: repeating-linear-gradient(45deg, transparent 0 2px, var(--text-3) 2px 3px); }
.op-hist-hit { fill: transparent; cursor: ew-resize; }
.op-hist-captura:hover .op-hist-hit:hover { fill: var(--accent-gold-soft); }
.op-hist-eixo { stroke: var(--border-2); stroke-width: 1; }
.op-hist-eixo-lbl { fill: var(--text-3); font-size: var(--text-xs); }
.op-hist-n { fill: var(--text-2); font-size: var(--text-xs); }
.op-hist-mediana { stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.op-hist-limiar { stroke: var(--warning); stroke-width: 1; stroke-dasharray: 2 3; }
.op-hist-corte { stroke: var(--accent-gold-strong); stroke-width: 1.5; }
.op-hist-legenda { margin: 4px 0 0; }
.op-hist-key { display: inline-block; width: 14px; vertical-align: middle;
               border-top: 2px dashed var(--text-2); }
.op-hist-key.is-limiar { border-top-color: var(--warning); }
.op-hist-key.is-corte { border-top-style: solid; border-top-color: var(--accent-gold-strong); }
/* Linha do titulo: nome a esquerda, acoes de pagina a direita. `flex-wrap` para
   degradar em telas estreitas em vez de transbordar. Ritmo vertical na escala de
   tokens (Item 7) — o `margin: 0 0 2px` antigo era o outlier gritante da tela: um
   gap cru de 2px entre o titulo e a faixa de procedencia, que virou chip. */
.op-topo { display: flex; align-items: baseline; justify-content: space-between;
           gap: var(--space-4); flex-wrap: wrap; margin: 0 0 var(--space-4); }
.op-topo-titulo { margin: 0; font-size: var(--text-xl); color: var(--text-0); }
/* Titulo + chip de procedencia agrupados, para o chip nao disputar `justify-content:
   space-between` com as acoes de pagina (que continuam sendo o 2o filho direto). */
.op-topo-titulo-grupo { display: flex; align-items: baseline; gap: var(--space-3);
                        flex-wrap: wrap; }
.op-proc-chip { display: inline-flex; align-items: center; gap: 6px;
                font-size: var(--text-sm); color: var(--text-2);
                border: 0.5px solid var(--border-1); border-radius: var(--radius-full);
                padding: 2px 9px; }
.op-topo-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Resumo: agora e SO o grafico — os big numbers migraram para a barra de comando
   (`.op-tbar`, abaixo), ao lado das abas de visao. NAO usar `overflow-x` aqui: os
   `.ms-panel` da barra de filtros sao absolutos e um eixo de overflow nao-visible
   faria o outro computar para `auto`, clipando os paineis. */
.op-painel { margin: 0 0 var(--space-4); }
.op-painel .op-histograma { margin: 0; height: 100%; }

/* Barra de comando da tabela: abas de visao + big numbers, imediatamente acima do
   <thead>. Os numeros deixaram de ser cards — quatro caixas com rotulo de 9 px que
   quebrava em duas linhas ("POSITIVAS (A E B)") e cujas colunas nasciam com larguras
   diferentes (124 e 108 px, auto-fit pelo conteudo). Aqui eles sao tipografia, e a
   unidade fica ao lado da tabela que a conta. */
.op-tbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
           padding: 2px 2px 6px; border-bottom: 1px solid var(--border-1);
           margin: 0 0 var(--space-2); }
.op-tabs { display: inline-flex; gap: 2px; background: var(--surface-2);
           border: 0.5px solid var(--border-1); border-radius: var(--radius-sm); padding: 2px; }
.op-tabs a { padding: 4px 12px; border-radius: var(--radius-sm); color: var(--text-2);
             font-size: var(--text-base); line-height: 1.35; text-decoration: none;
             white-space: nowrap; }
.op-tabs a[aria-selected="true"] { background: var(--surface-1); color: var(--text-0);
             font-weight: 600; box-shadow: var(--shadow-1); }
.op-tabs a:focus-visible { outline: 2px solid var(--accent-gold-focus); outline-offset: 2px; }
.op-nums { display: flex; gap: 18px; margin-left: auto; align-items: baseline; flex-wrap: wrap; }
.op-num { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.op-num-valor { font-size: var(--text-lg); font-weight: 600; color: var(--text-0);
                font-variant-numeric: tabular-nums; line-height: 1.25; }
.op-num.is-ok .op-num-valor { color: var(--success); }
.op-num.is-muted .op-num-valor { color: var(--text-2); }
.op-num-rotulo { font-size: var(--text-sm); color: var(--text-2); }
/* "de M" (o total do escopo) subordinado ao numero filtrado — quem le enxerga N
   primeiro e M como referencia. */
.op-num-de { font-size: var(--text-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .op-nums { margin-left: 0; gap: var(--space-3); }
}
/* == fim do histograma da distribuicao do ganho ============================ */

/* ===== /clientes — agenda do assessor (Plano 2a) ===== */
/* Portadas do mockup aprovado (static/mockup-clientes-c.html, variante C),
   verbatim salvo: (1) o fantasma do histograma migrou de --surface-2 para
   --surface-3 — dentro de um .card (--surface-1) o --surface-2 le como BURACO
   no tema escuro, o mesmo defeito ja documentado para a barra empilhada da
   /oportunidades; (2) as regras da variante B (.cl-drawer/.cl-grupo/
   .cl-universo/.cl-regra) NAO foram portadas — o mockup as carrega como resto.
   Token-puras: zero hex, para o tema escuro continuar valendo.

   O mockup-clientes-c.html foi removido de static/ em 2026-08-11 (exposicao
   sem login); o arquivo original, com o desenho aprovado que este bloco porta,
   fica recuperavel por:
   git log --all -- src/calc_b3/api/static/mockup-clientes-c.html */

/* ---------- numeros ---------- */
.cl-tbar { display: flex; align-items: baseline; gap: var(--space-6); flex-wrap: wrap;
           padding: var(--space-4) var(--space-4) var(--space-6);
           border-bottom: 1px solid var(--border-1); }
.cl-num { display: flex; flex-direction: column; gap: 2px; }
.cl-num b { font-size: var(--text-lg); font-variant-numeric: tabular-nums; color: var(--text-0); }
.cl-num small { font-size: var(--uppercase-size); letter-spacing: var(--uppercase-tracking);
                text-transform: uppercase; color: var(--text-2); }
.cl-num .cl-antes { font-size: var(--text-base); color: var(--text-3); font-weight: 400; }
.cl-num.is-gain b { color: var(--success); }
/* Qualificador do ganho: `flex-basis: 100%` e o que lhe da LINHA PROPRIA sob a
   fileira dos 4 cards — a .cl-tbar e um flex com wrap, e sem isto ele entraria
   como 5o item ao lado deles. */
.cl-cross { flex-basis: 100%; margin: 0; font-size: var(--text-base); color: var(--text-2); }
.cl-cross strong { color: var(--text-0); font-variant-numeric: tabular-nums; }
.cl-cross b { font-weight: 600; color: var(--text-1); }

/* ---------- busca + apoios do bloco de filtros (Task 12) ---------- */
.cl-busca-tabela { display: flex; align-items: center; justify-content: space-between;
                   gap: var(--space-3); padding: var(--space-3) var(--space-4);
                   border-bottom: 1px solid var(--border-1); }
.cl-busca-tabela .search-box { min-width: 260px; }
.op-filtro-grupo .cl-ponto { margin-right: 6px; }
.op-filtro-grupo em { font-style: normal; font-weight: 400; font-size: var(--text-sm);
                      color: var(--text-2); text-transform: none; letter-spacing: 0; }
.cl-inline { display: flex; align-items: center; gap: 6px; font-size: var(--text-base); }
/* Campo do drawer cujo controle e um checkbox: o rotulo mora DENTRO do
   <label> (junto do input), entao o painel de ajuda nao pode envolve-lo —
   entra como irmao, e esta regra os poe lado a lado. */
/* 🚨 `flex-direction: row` e EXPLICITO. Este campo tambem carrega
   `.op-filtro-campo`, que declara `column` — e como esta regra nao declarava
   a propriedade, nao havia conflito para resolver: a `column` simplesmente
   valia, e o icone de ajuda caia numa linha abaixo do rotulo. Nao e questao
   de ordem nem de peso; e propriedade que so uma das duas define. */
.cl-campo-tip { display: flex; flex-direction: row; align-items: center; gap: 6px; }
/* 🚨 Sem o `0 0 auto` o rotulo ENCOLHE abaixo da largura natural e quebra em
   varias linhas — e nao por falta de espaco: medido, "Só isento de IR" pede
   129px numa celula de 201px e mesmo assim saia em 3 linhas, porque o item
   flex encolhe por default. */
.cl-campo-tip > .cl-inline { flex: 0 0 auto; white-space: nowrap; }
.cl-drawer-pe { grid-column: 1 / -1; }
.cl-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-gold);
            display: inline-block; }
.cl-rot { position: absolute; bottom: 100%; margin-bottom: 3px; left: -2px; right: -2px;
          text-align: center; font-size: var(--text-xs); font-weight: 500; line-height: 1; }
.cl-rot.is-p { color: var(--text-2); }
.cl-rot.is-g { color: var(--success); }
/* Sufixo de unidade do campo de corte — usado tambem pela /oportunidades, que
   o emite sem nunca ter tido a regra. */
.op-ganho-min-suffix { font-size: var(--text-sm); color: var(--text-2); }

/* Container do bloco de filtros DENTRO do card (a barra, o drawer e os chips do
   componente da /oportunidades nascem com margem de pagina; aqui eles moram numa
   faixa do card). NAO usar overflow aqui: se um eixo deixa de ser visible, o outro
   computa para auto e a barra passa a clipar os .ms-panel, que sao absolutos. */
.cl-filtros { padding: var(--space-4) var(--space-4) var(--space-2);
              border-bottom: 1px solid var(--border-1); }
.cl-filtros .op-filtros-bar { margin-bottom: var(--space-3); }
.cl-filtros .op-filtros-drawer { margin-bottom: var(--space-3); }
.cl-filtros .cl-chips { padding: 0 0 var(--space-2); border-bottom: none; }

/* ---------- aviso de universo restrito ---------- */
.cl-efeito { padding: var(--space-3) var(--space-4); background: var(--accent-gold-soft);
             border-top: 1px solid var(--accent-gold-border); font-size: var(--text-base);
             color: var(--text-1); }
.cl-efeito b { font-variant-numeric: tabular-nums; }
.cl-marca { display: flex; align-items: center; gap: 6px; font-size: var(--text-base);
            white-space: nowrap; position: relative; padding-left: 12px; }
.cl-marca::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
                    width: 6px; height: 6px; border-radius: 50%; background: var(--accent-gold); }

/* ---------- dois graficos lado a lado ---------- */
.cl-graficos { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--border-1); }
.cl-graficos > .cl-hist { flex: 1 1 0; min-width: 0; border-bottom: none; }
.cl-graficos > .cl-hist + .cl-hist { border-left: 1px solid var(--border-1); }
@media (max-width: 900px) { .cl-graficos { flex-direction: column; }
  .cl-graficos > .cl-hist + .cl-hist { border-left: none; border-top: 1px solid var(--border-1); } }

/* Area do plot. Existe para ancorar as linhas de referencia (mediana, corte) como
   IRMAS das barras, e nao dentro delas: e o que mantem o corpo do grafico livre de
   qualquer texto que nomeie a mediana — quem a nomeia e a legenda. */
.cl-plot { position: relative; }
/* O grafico de posicao poe um rotulo ACIMA de cada barra (`.cl-rot`, ancorado
   em `bottom: 100%`). Na barra mais alta esse rotulo sai do plot e batia no
   cabecalho — medido em 23px de invasao, e o valor em reais ainda quebra em
   duas linhas em faixa estreita. O espaco e reservado aqui, e nao no `style`
   do template, pelo mesmo motivo da altura: fonte unica na folha.
   ⚠️ Isto NAO depende da altura das barras — o rotulo se ancora no topo DA
   BARRA, que na mais alta e o topo do plot. A invasao existia com 82px. */
.cl-plot-rot { margin-top: 40px; }
.cl-eixo-nome { text-align: center; font-size: var(--text-xs); color: var(--text-3);
                margin-top: 4px; }
/* Nome do eixo VERTICAL. Hook proprio, e nao `.cl-eixo-nome`, por duas
   razoes medidas: aquela classe ja serve a TRES papeis distintos no mesmo
   arquivo (eixo horizontal dos dois graficos e a frase do corte), entao um
   guard escrito contra ela nao consegue distinguir os graficos; e ela e
   `text-align: center` com `margin-top`, isto e, uma legenda ABAIXO do plot.
   Aqui o rotulo fica ACIMA e a esquerda, colado nas barras que ele conta. */
.cl-eixo-y { font-size: var(--text-xs); color: var(--text-3); margin-bottom: 2px; }
/* 🚨 O seletor traz o `i` de PROPOSITO. `.cl-legenda .s` (mais abaixo no
   arquivo) tem a MESMA especificidade (0-2-0) e vencia por vir depois — as
   duas amostras da legenda da direita saiam verdes, e a de "posicoes"
   deixava de representar a barra cinza que explica. Com o elemento o peso
   vira 0-2-1 e a regra ganha INDEPENDENTE DA ORDEM: mover qualquer um dos
   dois blocos, ou inserir regra nova entre eles, nao ressuscita o bug. */
.cl-legenda i.cl-amostra-p { background: var(--text-3); opacity: .55; }

/* barras pareadas: trabalho (posicoes) x dinheiro (ganho) */
.cl-par { display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.cl-par > div { flex: 1; border-radius: 2px 2px 0 0; position: relative; }
.cl-par .p { background: var(--text-3); opacity: .55; }
.cl-par .g { background: var(--success); opacity: .8; }
.cl-slot:hover .cl-par .p { opacity: .8; }
.cl-slot:hover .cl-par .g { opacity: 1; }
.cl-corte { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); }
.cl-mediana { position: absolute; top: -6px; bottom: 0; width: 0;
              border-left: 2px dashed var(--accent-gold); z-index: 1; }
.cl-legenda .m { border-left: 2px dashed var(--accent-gold); width: 0; height: 9px;
                 margin-right: 6px; }
.cl-corte-tag { color: var(--danger); font-weight: 600; white-space: nowrap; }
.cl-corte span { position: absolute; top: 0; left: 5px; white-space: nowrap;
                 font-size: var(--text-xs); color: var(--danger); font-weight: 600;
                 background: var(--surface-1); padding: 1px 4px; border-radius: var(--radius-sm); }

/* ---------- histograma com fantasma do universo irrestrito ---------- */
.cl-hist { padding: var(--space-4); border-bottom: 1px solid var(--border-1); }
.cl-hist-head { display: flex; justify-content: space-between; align-items: baseline;
                margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--text-2); }
/* Altura dos DOIS graficos. O de posicao trazia `height:82px` inline no
   template, que vencia esta classe e deixava os dois desiguais sem motivo.
   O inline saiu: a fonte da altura e so esta linha. */
.cl-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.cl-slot { flex: 1; position: relative; height: 100%; }
.cl-ghost { position: absolute; bottom: 0; left: 0; right: 0; border: 1px dashed var(--text-3);
            border-bottom: none; border-radius: 2px 2px 0 0; background: var(--surface-3); }
.cl-bar { position: absolute; bottom: 0; left: 0; right: 0; background: var(--success);
          opacity: .8; border-radius: 2px 2px 0 0; }
.cl-slot:hover .cl-bar { opacity: 1; }
/* Faixa selecionada pelo arraste (e a previa, antes do servidor responder). Sem
   estas duas regras o `is-sel` renderiza e nao pinta nada — selecao invisivel. */
.cl-hist-hit { cursor: ew-resize; }
/* O grafico da direita se CLICA (move um limiar), nao se arrasta (faixa). O
   `ew-resize` do irmao acima seria cursor errado e promessa errada de gesto. */
.cl-pos-hit { cursor: pointer; }
.cl-slot.is-dim { opacity: .35; }
.cl-slot.is-sel .cl-bar { opacity: 1; }
.cl-slot.is-sel .cl-ghost { border-color: var(--accent-gold); }
.cl-bar-n { position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
            font-size: var(--text-xs); color: var(--text-2); font-weight: 500; }
.cl-axis { display: flex; gap: 6px; margin-top: 4px; }
.cl-axis span { flex: 1; text-align: center; font-size: var(--text-xs); color: var(--text-3); }
.cl-legenda { display: flex; gap: var(--space-4); justify-content: center; margin-top: 6px;
              font-size: var(--text-xs); color: var(--text-3); }
.cl-legenda i { display: inline-block; width: 10px; height: 8px; margin-right: 4px; vertical-align: middle; }
.cl-legenda .s { background: var(--success); opacity: .8; }
.cl-legenda .g { border: 1px dashed var(--text-3); border-bottom: none; height: 7px;
                 background: var(--surface-3); }
/* Nota didatica sob a legenda. Explica COMO ler a altura das barras — o que
   o nome do eixo sozinho nao diz (na esquerda, que cada cliente entra uma vez;
   na direita, que as duas series tem unidades diferentes). Fica menor e mais
   apagada que a legenda para nao competir com ela. */
.cl-nota { text-align: center; font-size: var(--text-xs); color: var(--text-3);
           margin-top: 4px; line-height: 1.4; }

/* ---------- chips ---------- */
.cl-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--border-1); align-items: center; }
/* OBRIGATORIO: o `hidden` so vale pela folha do AGENTE, que perde para o
   `display: flex` de autor acima. Sem esta linha a faixa de chips nunca oculta —
   fica uma tira vazia sob a barra. Mesmo defeito ja documentado em
   `.op-filtros-drawer[hidden]`. */
.cl-chips[hidden] { display: none; }
.cl-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm);
           background: var(--surface-2); border: 1px solid var(--border-1);
           border-radius: var(--radius-full); padding: 3px 10px; color: var(--text-1); }
.cl-chip.is-universo { background: var(--accent-gold-soft); border-color: var(--accent-gold-border);
                       color: var(--accent-gold-strong); font-weight: 500; }
.cl-chip button { border: none; background: none; cursor: pointer; color: inherit;
                  font-size: var(--text-base); line-height: 1; padding: 0; }

/* ---------- tabela ---------- */
.cl-conta { font-family: var(--font-mono); font-size: var(--text-base); }
.cl-sub { display: block; font-size: var(--text-xs); color: var(--text-3); margin-top: 2px; }
.cl-rs { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--success); }
.cl-livre { font-variant-numeric: tabular-nums; color: var(--text-3); }
.cl-go { color: var(--text-3); }
tr:hover .cl-go { color: var(--accent-gold); }
/* A busca client-side esconde por style.display; um `hidden` futuro tem de
   vencer o `display: table-row` do agente. */
.cl-linha[hidden] { display: none; }
/* == fim da agenda do assessor ============================================ */
/* Detentores no cabecalho de grupo. INLINE com margin-left, espelhando o padrao que
   `.op-rating` (margin-left: 6px) e `.op-alt-link` (10px) ja usam nesta MESMA linha —
   `.op-group-head td` NAO e flex (style.css:1851 e so background/font-weight/color/
   padding-top), entao `margin-left: auto` nao alinharia a direita: nao faria NADA. */
.op-grupo-detentores {
    margin-left: 10px;
    color: var(--text-2);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

/* ── Prêmio negociado (onda 1 de crédito) ──────────────────────────────────
   O sinal do prêmio vive no NÚMERO da célula (composição "+"/"-" simétrica +
   ênfase tipográfica na perna comprada, ver _tabela.html); a ausência TEM
   elemento visual próprio -- .op-premio-ausente, pílula com contorno
   tracejado (B.1/B.2; a frase "não há elemento visual dedicado" descrevia
   um estado anterior a essas tasks e ficou falsa).
   INVARIANTE desta seção (não lista de nomes -- a lista já apodreceu uma
   vez: citava 4 blocos na Task 3, são 8 hoje, e cada task que acrescentou
   um bloco novo não tocou este comentário): nenhum bloco `.op-premio-*`
   usa hex nem hue de valência. Guard: test_css_do_premio_nao_usa_hex_nem_hue_de_valencia
   varre TODOS os blocos por seletor, não uma lista fixa -- então o guard
   não apodrece quando um bloco novo entra, só este comentário apodrecia.
   --success/--warning já significam "melhora"/"aumento de risco" nesta
   mesma tela.
   Obituário: a barra SVG saiu (Task 3) — medição completa em
   docs/superpowers/specs/2026-08-20-premio-negociado-celula-design.md §1
   (defeito 3) / test_barra_de_premio_foi_aposentada. */

/* Legenda do cabecalho (Task 1): segunda linha, menor e em texto secundario,
   explicando ordem ("vende -> compra") e unidade (bp) da sub-linha da celula —
   sem ela a sub-linha e ilegivel. Mesmo receituario de `.lista-th-sub`
   (bonds/_tabela.html); classe PROPRIA porque nome cruzando tela ja custou
   colisao neste projeto (`.op-resumo`). Sem `color`: herda `--text-2` do
   `.b3-table thead th`, igual ao rotulo ordenavel ao lado. */
.op-premio-th-legenda {
    display: block;
    font-weight: 400;
    font-size: var(--text-xs);
    text-transform: none;
    letter-spacing: normal;
}

.op-premio-cel .op-sub { white-space: nowrap; }

/* Cotação antiga: tracejado, nunca cor (UX-D2). */
.op-premio-estagnado {
    border-bottom: 1px dashed var(--border-2);
}

/* Ausência curta (Task 4, D6): "sem cotação" -- o motivo exato (100% das
   ausências hoje têm a MESMA causa, SEM_BID_T2) mora só no `title` da
   célula, não mais escrito por extenso no corpo. Pill discreto -- não é
   status_badge (esta célula não carrega crachá de valência nenhum, ver
   test_celula_NAO_tem_chip_de_data), só um contorno neutro. Mesma classe
   nas duas colunas de crédito (Task 5). */
.op-premio-ausente {
    display: inline-block;
    font-size: var(--text-xs);
    color: var(--text-2);
    border: 1px dashed var(--border-2);
    border-radius: 3px;
    padding: 0 5px;
}

/* Banda de ±50 bp do breakeven (cross-index 1b, T9). Sub-linha da coluna
   «% a.a.», porque é `min(an_A, an_B)` que ela limita. Aparece em TODA linha com
   perna IPCA — ~90% delas, então tem de ser barata em altura: 11px numa linha só,
   sem quebrar (o `nowrap` evita que "−0,42% a 2,10%" vire duas linhas e cresça a
   tabela inteira). */
.op-banda {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-top: 2px;
}

/* A ênfase vai só onde o intervalo CONTÉM ZERO — a troca pode não ser ganho
   nenhum. Medido nos 4 caches: 8,5% a 9,4% das linhas com banda, contra o teto de
   30% fixado a priori; é exceção, e por isso pode ser destacada.
   UX-D2: a marca é FORMA (contorno tracejado). A cor é reforço — quem não a
   distingue continua vendo o contorno. */
.op-banda.is-cruza-zero {
    display: inline-block;
    color: var(--warning);
    border: 1px dashed var(--warning);
    border-radius: 3px;
    padding: 0 4px;
    margin-top: 1px;
}

/* A mesma banda na auditoria do par, logo abaixo do «Ganho ao ano» que ela
   limita. Aqui há largura para a frase inteira — na lista cabe só o intervalo. */
.op-banda-audit {
    margin: -6px 0 14px;
    padding: 8px 12px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-2);
    background: var(--surface-2);
    border-left: 3px solid var(--border-2);
    border-radius: 0 4px 4px 0;
}

/* Mesma regra da lista: contorno primeiro (UX-D2), cor como reforço. */
.op-banda-audit.is-cruza-zero {
    color: var(--text-1);
    background: var(--surface-2);
    border-left: 3px solid var(--warning);
    border-top: 1px dashed var(--warning);
    border-right: 1px dashed var(--warning);
    border-bottom: 1px dashed var(--warning);
}

.op-premio-nota {
    margin: 8px 0 0;
    max-width: 900px;
}

/* Tabela de interpretacao compacta do rodape (Task 7, D7): "o que voce ve /
   o que significa", CINCO linhas (a 5a -- contorno tracejado -- devolvida
   no Bloco B.1 item 2, depois que o sinal de forma passou a renderizar de
   verdade). Estilo deliberadamente discreto -- e nota de rodape, nao
   tabela de dados (por isso nao usa `.b3-table`). */
.op-premio-legenda {
    margin: 6px 0 0;
    max-width: 900px;
    border-collapse: collapse;
    font-size: var(--text-xs);
    color: var(--text-2);
}

.op-premio-legenda td {
    padding: 3px 10px 3px 0;
    vertical-align: top;
    border: none;
}

.op-premio-legenda-chave {
    white-space: nowrap;
    color: var(--text-1);
    font-weight: 500;
}

/* == lista de inteligencia de /bonds (F2c) ================================= */
/* Barra de lentes + contador + a tabela de 10 colunas com minigrafico e faixa de
   premio. Classes proprias (`lista-*`) em vez das `op-*` da /oportunidades:
   reaproveitar o nome de outra tela ja custou uma colisao aqui (duas telas
   dividindo um `.op-resumo`).

   NAO usar `overflow-x` na `.lista-tbar`: um eixo de overflow nao-visible faz o
   outro computar para `auto` e clipa os `.ms-panel` absolutos do multi-select da
   barra de filtros, que fica logo acima.

   A BARRA DE FILTROS nao tem regra aqui, e e de proposito: ela usa a
   `.bonds-toolbar` compartilhada (flex + wrap + gap) e os `.ms-*` da F2a, e
   nenhum ajuste se mostrou necessario — medido a 1200 px e a 1000 px, cinco
   controles em uma linha, transbordo 0. Quem for acrescentar uma regra para ela
   escope numa classe nova; a `.bonds-toolbar` e compartilhada por 5 telas mais o
   console BTG e ha teste travando o conteudo dela. */
.lista-tbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
              padding: 2px 2px 6px; border-bottom: 1px solid var(--border-1);
              margin: 0 0 var(--space-2); }
.lista-tabs { display: inline-flex; gap: 2px; background: var(--surface-2);
              border: 0.5px solid var(--border-1); border-radius: var(--radius-sm);
              padding: 2px; }
.lista-tabs a { padding: 4px 12px; border-radius: var(--radius-sm); color: var(--text-2);
                font-size: var(--text-base); line-height: 1.35; text-decoration: none;
                white-space: nowrap; }
.lista-tabs a[aria-selected="true"] { background: var(--surface-1); color: var(--text-0);
                font-weight: 600; box-shadow: var(--shadow-1); }
.lista-tabs a:focus-visible { outline: 2px solid var(--accent-gold-focus); outline-offset: 2px; }
.contador { margin: 0 0 0 auto; font-size: var(--text-sm); color: var(--text-2);
            font-variant-numeric: tabular-nums; }
/* Ausencia e informacao (D5): o traco carrega o motivo no `title`, entao precisa
   de affordance de dica — sem ela ninguem descobre que ha explicacao ali. */
.dado-ausente { color: var(--text-3); border-bottom: 1px dotted var(--border-2);
                cursor: help; }
/* Numero ESTIMADO (aproximacao de um periodo, e as vezes extrapolacao da curva).
   Mesma affordance de dica do traco: o rotulo e CONDICAO da decisao aprovada
   ("pode estimar com aviso"), nao enfeite — se ninguem descobre que ha
   explicacao no `≈`, o numero volta a viajar sozinho. */
.dado-estimado { color: var(--text-3); cursor: help; font-size: var(--text-sm); }

/* -- cabecalhos ordenaveis -- */
/* O rotulo QUEBRA em duas linhas. Sao dez colunas: com cada cabecalho numa linha
   so, a soma das larguras passava a viewport e a `.table-scroll-x` rolava na
   horizontal — a tabela inteira paga pelo rotulo mais longo. O corpo continua
   `nowrap` (numero e unidade separados em duas linhas leem como dois dados).

   O seletor comeca em `#bonds-tabela` por DOIS motivos: vence o
   `white-space: nowrap` de `td.num, th.num` (id > classe) e nao alcanca as
   outras telas que compartilham `.b3-table`. */
.lista-sort { color: inherit; text-decoration: none; }
.lista-sort:hover { color: var(--link-hover); text-decoration: underline; }
.lista-sort.is-active { color: var(--accent-gold); }
.lista-sort:focus-visible { outline: 2px solid var(--accent-gold-focus); outline-offset: 2px; }
.lista-sort-ind { font-size: var(--text-xs); }
/* Coluna travada pela unidade (§5.3): NAO e link, e o motivo esta no `title`.
   O cursor de dica e o unico sinal de que ha explicacao — sem ele a coluna so
   parece quebrada. */
.lista-th-travada { color: var(--text-3); cursor: help; }
/* O `Δ 30 dias` mora dentro do <th> de Mercado: e sub-elemento da celula, nao
   uma 11a coluna, mas ordena como se fosse. */
.lista-th-sub { display: block; font-weight: 400; font-size: var(--text-xs);
                text-transform: none; letter-spacing: normal; }
/* Com a quebra, a largura das duas colunas de rotulo longo e dado curto
   (`REMUNERACAO (EMISSAO)` sobre `IPCA + 5,5780%`, `EQUIVALENTE TRIBUTAVEL`
   sobre `13,79%`) cai para a maior PALAVRA do rotulo: medido 193 -> 133 px e
   195 -> 116 px, e o transbordo da tabela some a 1440.

   🚨 Nao ha `max-width` aqui, e a tentativa esta registrada porque parece
   funcionar: `max-width` em `<th>` e ignorado no layout `auto` da tabela, e o
   teto posto no inline-block de dentro do rotulo CORTA a palavra em silencio —
   `REMUNERACAO` mede 118 px e um teto de `12ch` da ~90 px. Um teto que respeite
   a palavra e, por definicao, o proprio min-content: nao ha o que economizar
   ali. O que ainda sobra de largura vem de OUTRAS colunas (a leitura em
   palavras da coluna de Mercado e o nome do devedor no Titulo), nao destas. */
#bonds-tabela .b3-table thead th { white-space: normal; }

/* -- celula de Mercado: numero, minigrafico e leitura em palavras -- */
/* 🚨 `max-width` NAO e cosmetico: num SVG com viewBox o desenho escala junto com
   a largura do container, e sem teto o minigrafico cresceria com a coluna
   (medido na /oportunidades, onde rotulos de 10 px passaram os 13 px do corpo da
   tabela). `display:block` + `margin-left:auto` alinham a direita, como o resto
   da coluna numerica. */
.lista-spark { display: block; margin: 2px 0 2px auto; max-width: 100%;
               height: auto; overflow: visible; }
.lista-spark path { stroke: var(--accent-gold); stroke-width: 1;
                    stroke-linejoin: round; stroke-linecap: round; }
/* A leitura em palavras (D18) e o que torna a curva interpretavel — taxa
   subindo = preco caindo, e o significado depende de quem pergunta. */
.lista-leitura { white-space: nowrap; }

/* -- faixa de premio e de liquidez (terco dentro da familia) -- */
.lista-faixa, .lista-liquidez {
    display: inline-block; padding: 0 6px; border-radius: var(--radius-full);
    font-size: var(--text-xs); line-height: 1.6; white-space: nowrap;
    border: 0.5px solid transparent; cursor: help;
}
.lista-faixa.is-barato, .lista-liquidez.is-alta {
    background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.lista-faixa.is-tipico, .lista-liquidez.is-media {
    background: var(--surface-2); color: var(--text-2); border-color: var(--border-1); }
.lista-faixa.is-caro, .lista-liquidez.is-baixa {
    background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.lista-liquidez { cursor: default; }
/* Marcador das linhas de %DI na coluna `vs mercado`: ali a diferenca esta em
   pontos de CDI, ~14x a escala das demais familias. */
.lista-escala { color: var(--warning); cursor: help; }
/* Valor + unidade nao podem quebrar em duas linhas: "0,4000" numa linha e "pp"
   na seguinte le como dois dados (visto no browser na coluna de Liquidez, que e
   estreita porque a faixa ocupa a primeira linha). */
.lista-valor-unidade { white-space: nowrap; }
/* A legenda fica na TELA, nao so nos tooltips: a palavra e RELATIVA a populacao
   e um titulo pode mudar de faixa sem ter mudado de preco — o que surpreende
   quem le "caro" como absoluto. */
.lista-legenda { margin: var(--space-2) 0 0; font-size: var(--text-sm);
                 color: var(--text-2); max-width: 78ch; }
/* == fim da lista de inteligencia de /bonds ================================ */

/* == regua posicional da aba Mercado da pagina do titulo (F3) ==============
   Valores COPIADOS do mockup aprovado
   (docs/superpowers/specs/mockups/mockup-titulo-mercado.html, secao "(a)
   REGUA"), nao inventados. Markup em templates/bond_page/_bloco_mercado.html.

   🚨 A geometria (D27) vive no TEMPLATE, nao aqui: `left: calc(60px + t *
   (100% - 120px))`, com `t` normalizado 0..1 vindo do modulo puro. O que esta
   folha define e a caixa em que essas posicoes caem — as duas metades tem de
   concordar no recuo de 60px, senao os rotulos das pontas vazam (medido: 1
   rotulo a 1024px, 2 a 820px).

   Prefixo `rg-` em TODAS as regras: este arquivo e disputado por outra frente
   (prefixo `cl-`), e o bloco fica confinado para os dois lados poderem pousar
   sem colidir. */
.rg { --rg-h: 132px; position: relative; height: var(--rg-h);
      margin: var(--space-5) 0 var(--space-6); }
.rg-eixo { position: absolute; left: 0; right: 0; top: 62px; height: 2px;
           background: var(--border-2); }
/* A caixa colorida so e desenhada com AS DUAS pontas dela (garantido no modulo
   puro): uma ponta sozinha nao define intervalo. */
.rg-faixa { position: absolute; top: 54px; height: 18px; border-radius: var(--radius-sm); }
.rg-faixa.btg { background: var(--accent-gold-soft); border: 1px solid var(--accent-gold-border); }
.rg-faixa.anb { background: var(--info-soft); border: 1px solid var(--info-border);
                top: 58px; height: 10px; }
.rg-mk { position: absolute; top: 46px; width: 2px; height: 34px; background: var(--text-2); }
.rg-mk.is-cli { background: var(--accent-gold-strong); width: 3px; height: 42px; top: 42px; }
.rg-mk.is-ind { background: var(--info); width: 3px; height: 42px; top: 42px; }
/* `translateX(-50%)` centra o rotulo NA marca — e e por isso que o eixo precisa
   do recuo de 60px: sem ele os rotulos das pontas saem pela borda da caixa. */
.rg-rot { position: absolute; font-size: var(--text-xs); color: var(--text-2);
          white-space: nowrap; transform: translateX(-50%); line-height: 1.35;
          text-align: center; }
.rg-rot b { display: block; font-size: var(--text-base); color: var(--text-0);
            font-variant-numeric: tabular-nums; }
.rg-rot.cima { top: 0; }
.rg-rot.baixo { top: 88px; }
.rg-rot.is-cli b { color: var(--accent-gold-strong); }
.rg-rot.is-ind b { color: var(--info); }

.rg-destaque { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.rg-destaque + .rg-destaque { margin-top: var(--space-2); }
/* Vermelho e o caso DEFAULT porque o premio e negativo em quase toda linha (o
   banco vende acima do consenso por construcao). Mas positivo acontece — pela
   regra do sinal, 3 de 227 titulos —, e pintar "voce paga menos" de danger
   inverteria a leitura. Os modificadores usam a MESMA familia semantica de
   `.lista-faixa.is-barato`, entao as duas telas concordam na cor. */
.rg-destaque .n { font-size: 2rem; font-weight: 700; color: var(--danger);
                  font-variant-numeric: tabular-nums; }
.rg-destaque .n.is-acima { color: var(--success); }
.rg-destaque .n.is-neutro { color: var(--text-1); }
.rg-destaque .p { font-size: var(--text-lg); color: var(--text-0); }
.rg-destaque .faixa { font-size: var(--text-sm); color: var(--text-2); }

.rg-2a { font-size: var(--text-base); color: var(--text-1); margin-top: var(--space-2); }
.rg-2a b { font-variant-numeric: tabular-nums; }

.rg-legenda { display: flex; gap: var(--space-5); flex-wrap: wrap;
              font-size: var(--text-sm); color: var(--text-2);
              border-top: 1px solid var(--border-1); padding-top: var(--space-3);
              margin-top: var(--space-4); }
.rg-legenda i { font-style: normal; display: inline-block; width: 10px; height: 10px;
                border-radius: 2px; margin-right: 6px; vertical-align: middle; }
/* As amostras de cor da legenda: no mockup elas eram `style=` inline; viram
   classe aqui porque regra mora nesta folha. Os valores sao os mesmos das
   `.rg-faixa` correspondentes — se um par divergir, a legenda passa a nomear
   uma cor que nao esta no desenho. */
.rg-legenda i.rg-cor-btg { background: var(--accent-gold-soft);
                           border: 1px solid var(--accent-gold-border); }
.rg-legenda i.rg-cor-anb { background: var(--info-soft);
                           border: 1px solid var(--info-border); }
/* Vintage por celula (§7.5.2). `nowrap` porque e uma data curta e quebrar
   "29/07/2026" ao meio le como dois dados. */
.rg-vintage { font-size: var(--text-xs); color: var(--text-3);
              font-variant-numeric: tabular-nums; white-space: nowrap; }
.rg-vintage b { color: var(--text-2); font-weight: 600; }
/* A reconciliacao regua x lista. Mesmos tokens do vintage acima, SEM o
   `nowrap`: e uma frase inteira, e nowrap a faria transbordar na horizontal —
   o `max-width` em ch segue `.lista-legenda`, que e a nota irma na lista. */
.rg-nota { font-size: var(--text-sm); color: var(--text-2);
           margin: var(--space-3) 0 0; max-width: 78ch; }
/* == fim da regua da aba Mercado ========================================== */

/* ── Bloco E da página do título: a cascata do estado vazio (F3) ────────
   Estado · rótulo · valor. A linha ausente NÃO é apagada nem cinza-uniforme:
   ela mantém o rótulo legível e põe o motivo no lugar do número (D5 — ausência
   é informação). Só o travessão e o motivo baixam de contraste. */
.cascata { margin: var(--space-5) 0 var(--space-4); }
.cascata-linha { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto;
                 gap: var(--space-3); align-items: baseline;
                 padding: var(--space-2) 0; border-bottom: 1px solid var(--border-1); }
.cascata-linha:last-child { border-bottom: none; }
.cascata-estado { color: var(--success); font-weight: 700; }
.cascata-linha.is-ausente .cascata-estado { color: var(--text-3); font-weight: 400; }
.cascata-rot { color: var(--text-1); }
.cascata-val { font-variant-numeric: tabular-nums; color: var(--text-0); font-weight: 600; }
.cascata-linha.is-ausente .cascata-val { color: var(--text-2); font-weight: 400;
                                         font-variant-numeric: normal; text-align: right; }
/* == fim da cascata do estado vazio ======================================= */

/* == Bloco B da aba Mercado: a traducao em dinheiro (F3, D26) ==============
   Valores COPIADOS do mockup aprovado
   (docs/superpowers/specs/mockups/mockup-titulo-mercado.html, secao "(b)
   DINHEIRO"), nao inventados. Markup em templates/bond_page/_bloco_dinheiro.html.

   Prefixo `dn-` (e `.dn` na caixa) em TODAS as regras: este arquivo e disputado
   por outra frente, e o bloco fica confinado para os dois lados poderem pousar
   sem colidir — mesma disciplina do `rg-` acima.

   As duas familias de cor sao as MESMAS da regua: ouro para as pontas do
   cliente (`is-cli`), azul para a marcacao da ANBIMA (`is-marca`). Divergir
   aqui faria as duas metades do bloco parecerem falar de coisas diferentes. */
.dn { border: 1px solid var(--border-1); border-radius: var(--radius-md);
      overflow: hidden; margin-top: var(--space-4); }
.dn table { width: 100%; border-collapse: collapse; }
.dn th, .dn td { padding: var(--space-2) var(--space-4); text-align: left;
                 font-size: var(--text-base);
                 border-bottom: 1px solid var(--border-1); }
.dn th { font-size: var(--uppercase-size); text-transform: uppercase;
         letter-spacing: var(--uppercase-tracking); color: var(--text-2);
         font-weight: 600; background: var(--surface-2); }
/* Cabecalho herda o alinhamento da SUA coluna (convencao de tabelas do
   projeto): `th.num` precisa vencer o `text-align:left` acima, que tem a mesma
   especificidade e vem antes — por isso a regra propria em vez de so a classe. */
.dn th.num, .dn td.num { text-align: right; font-variant-numeric: tabular-nums;
                         white-space: nowrap; }
.dn tr.is-marca td { background: var(--info-soft); }
.dn tr.is-cli td { background: var(--accent-gold-soft); font-weight: 600; }
.dn tr:last-child td { border-bottom: none; }
.dn-frase { font-size: var(--text-md); color: var(--text-0);
            padding: var(--space-4) var(--space-5); background: var(--surface-2);
            border-top: 1px solid var(--border-1); }
.dn-frase b { color: var(--danger); font-variant-numeric: tabular-nums; }
/* Tracejado, e nao solido: a posicao e linha a MAIS (D26/`b4`) — o corte mais
   fraco diz que ela pertence ao bloco sem competir com a frase da unidade. */
.dn-pos { padding: var(--space-3) var(--space-5);
          border-top: 1px dashed var(--border-2); font-size: var(--text-base);
          color: var(--text-1); background: var(--surface-1); }
.dn-pos .gate { font-size: var(--text-xs); color: var(--text-3); display: block;
                margin-top: 4px; }
/* Mesmos tokens do `.rg-vintage`: as duas datas da aba tem de se ler como a
   mesma classe de informacao (procedencia), nao como duas notas diferentes. */
.dn-vintage { font-size: var(--text-xs); color: var(--text-3);
              margin: var(--space-2) 0 0; max-width: 78ch; }
.dn-vintage b { color: var(--text-2); font-weight: 600; }
/* == fim da traducao em dinheiro ========================================== */

/* == dossie do cliente (/clientes/{token}, Plano 2b) ======================= */
/* Portado do mockup aprovado do Plano 2b, com DUAS correcoes deliberadas — ver
   `.cl-alt-row` e `.cl-alt-table tr.is-melhor`. 100% via var(--*): esta folha
   tem regra de zero hex hardcoded.

   O mockup (`static/mockup-cliente-dossie.html`) foi removido de static/ ao
   concluir o 2b — a tela real o substitui e ele so aumentava a superficie
   servida sem login. Recuperar:
   git log --all -- src/calc_b3/api/static/mockup-cliente-dossie.html */
.cl-crumb { font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--space-2); }
.cl-crumb a { color: var(--text-2); }
.cl-dossie-head { display: flex; justify-content: space-between; align-items: flex-start;
                  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.cl-dossie-conta { margin: 0 0 var(--space-2); }
.cl-dossie-acoes { display: flex; gap: var(--space-2); }
.cl-kpis { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.cl-vender b { font-family: var(--font-mono); }
.cl-alerta-conc { border-left: 3px solid var(--warning); margin-bottom: var(--space-4); }
.cl-dossie-rodape { padding: var(--space-3) 0; }
.cl-motivo { color: var(--text-3); font-style: italic; }

/* ---- alternativas por posicao (expansivel) ---- */
/* 🚨 `--surface-3`, NAO `--surface-2` (que e o que o mockup usa). Medido no
   browser, tema escuro: a tabela computa rgb(19,24,38) e `--surface-2` daria
   rgb(27,34,53) — a diferenca e pequena demais e a gaveta le como BURACO.
   `--surface-3` computa rgb(35,43,64), que e o degrau que o mockup pretendia.
   (Os valores vao em rgb() de proposito: ha guarda de zero-hex nesta folha, e
   ela varre o fonte INCLUINDO comentarios — documentar a medicao em hex
   reprovaria o proprio guard que a medicao existe para respeitar.) */
.cl-alt-row > td { background: var(--surface-3) !important; padding: 0 !important; }
/* `[hidden]` so vale pela folha do AGENTE e perde para qualquer regra de autor.
   Nao ha `display` de autor nesta linha hoje, mas o override explicito e barato e
   e o que impede a proxima regra de `tr` de destravar a gaveta em silencio. */
.cl-alt-row[hidden] { display: none; }
.cl-alt { padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
          border-left: 3px solid var(--accent-gold); }
.cl-alt-head { display: flex; align-items: baseline; gap: var(--space-3);
               font-size: var(--text-base); margin-bottom: var(--space-2); flex-wrap: wrap; }
.cl-alt-head span { color: var(--text-3); font-size: var(--text-sm); }
.cl-alt-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.cl-alt-table td { padding: 5px 10px; border-bottom: 1px solid var(--border-0); }
.cl-alt-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cl-alt-table tr:last-child td { border-bottom: none; }
/* 🚨 O mockup destacava a melhor com `--surface-3`; como a GAVETA passou a ser
   `--surface-3`, o destaque precisou de outro token, senao os dois colapsam e a
   "melhor" deixa de se distinguir. */
.cl-alt-table tr.is-melhor td { background: var(--accent-gold-soft); }
.cl-alt-table b { font-family: var(--font-mono); }
.cl-alt-nota { color: var(--text-2); font-size: var(--text-sm); }
.cl-alt-nota b { font-family: var(--font-sans); }
.cl-diversifica { color: var(--success); }
.cl-alt-link { font-size: var(--text-sm); color: var(--accent-gold); white-space: nowrap; }

/* ---- posicao sem troca (D7: em cinza, com motivo) ---- */
tr.cl-sem-troca td { color: var(--text-3); }
tr.cl-sem-troca .cl-vender b { color: var(--text-2); }

/* ---- paginacao (D2b-12: a unidade e a POSICAO) ---- */
.cl-pag { display: flex; align-items: center; justify-content: space-between;
          gap: var(--space-3); padding: var(--space-3) 0; font-size: var(--text-base); }
.cl-pag a { padding: 2px var(--space-2); color: var(--accent-gold); }
.cl-pag-atual { padding: 2px var(--space-2); font-weight: 600; color: var(--text-0); }
/* == fim do dossie do cliente ============================================== */

/* == Bloco C da pagina do titulo: o historico (F3, Task 7) =================
   Prefixo `bc-` em TODAS as regras: este arquivo e disputado por outras
   frentes (`rg-` do Bloco A, `bd-` do Bloco B, `cl-` do dossie do cliente), e
   o bloco fica confinado para os lados poderem pousar sem colidir. Markup em
   templates/bond_page/_bloco_historico.html.

   🚨 O percentil (`.bc-percentil`) NAO tem regra de COR propria, e a ausencia
   e o ponto: a §5.4 recusou o percentil como fonte da palavra caro/barato, e
   pintar seria reintroduzi-lo como classificacao pela porta dos fundos. Ele
   herda `--text-1` do paragrafo, igual ao Delta ao lado. Quem for "melhorar"
   isto com verde/vermelho esta desfazendo a D24 — ha teste. */
.bc { margin-top: var(--space-5); padding-top: var(--space-4);
      border-top: 1px solid var(--border-1); }
.bc-tit { font-size: var(--text-base); font-weight: 600; color: var(--text-0);
          margin: 0 0 var(--space-3); }
.bc-subtit { font-size: var(--text-sm); font-weight: 600; color: var(--text-1);
             margin: 0 0 var(--space-2); }

.bc-serie { display: flex; align-items: baseline; gap: var(--space-3);
            flex-wrap: wrap; }
/* `max-width` OBRIGATORIO: com `viewBox` e sem teto o desenho escala com a
   largura do container — o mesmo defeito que fez rotulos de 10px passarem os
   13px do corpo da tabela na /oportunidades. O numero acompanha o `LARGURA`
   de api/sparkline.py (72); ha teste amarrando os dois na lista. */
.bc-spark { width: 100%; max-width: 108px; height: 27px; color: var(--accent-gold);
            align-self: center; }
.bc-hoje { font-size: var(--text-xl); font-weight: 700; color: var(--text-0);
           font-variant-numeric: tabular-nums; }
.bc-vintage { font-size: var(--text-xs); color: var(--text-3); }
.bc-vintage b { color: var(--text-2); font-weight: 600; }

.bc-faixa, .bc-mov { font-size: var(--text-sm); color: var(--text-1);
                     margin: var(--space-2) 0 0; }
.bc-faixa b, .bc-mov b { color: var(--text-0); font-variant-numeric: tabular-nums; }
.bc-janela { color: var(--text-2); }
.bc-nota, .bc-formacao { font-size: var(--text-xs); color: var(--text-3);
                         margin: var(--space-1) 0 0; }
.bc-formacao b { color: var(--warning); }
.bc-ausencia { font-size: var(--text-base); color: var(--text-2); margin: 0; }

.bc-btg { margin-top: var(--space-4); }
.bc-btg-lista { list-style: none; margin: 0; padding: 0;
                display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.bc-btg-lista li { display: flex; gap: var(--space-2); align-items: baseline;
                   font-size: var(--text-sm); color: var(--text-1); }
.bc-btg-data { color: var(--text-3); font-variant-numeric: tabular-nums; }
.bc-btg-taxa b { color: var(--text-0); font-variant-numeric: tabular-nums; }
.bc-btg-taxa i { font-style: normal; color: var(--text-3); }
/* == fim do Bloco C ======================================================= */

/* == Bloco D da pagina do titulo: liquidez e disponibilidade (F3, Task 8) ==
   Prefixo `bl-` em TODAS as regras: este arquivo e disputado por outras
   frentes (`rg-` do Bloco A, `bd-`/`dn-` do Bloco B, `bc-` do Bloco C, `cl-`
   do dossie do cliente), e o bloco fica confinado para os lados poderem pousar
   sem colidir. Markup em templates/bond_page/_bloco_liquidez.html.

   As cores da faixa reusam as MESMAS variaveis da coluna de liquidez da lista
   (`.lista-liquidez`): alta = success, media = neutra, baixa = warning. Aqui
   pintar e legitimo — a faixa E uma classificacao (D14), ao contrario do
   percentil do Bloco C, que a D24 proibe de virar cor. */
.bl { margin-top: var(--space-5); padding-top: var(--space-4);
      border-top: 1px solid var(--border-1); }
.bl-tit { font-size: var(--text-base); font-weight: 600; color: var(--text-0);
          margin: 0 0 var(--space-3); }
.bl-linha { display: flex; flex-wrap: wrap; align-items: baseline;
            gap: var(--space-2); font-size: var(--text-sm);
            margin-bottom: var(--space-2); }
.bl-rot { color: var(--text-2); min-width: 15rem; }
.bl-dado { color: var(--text-1); display: flex; flex-wrap: wrap;
           align-items: baseline; gap: var(--space-2); }
.bl-dado b { color: var(--text-0); }
.bl-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-faixa { display: inline-block; padding: 0 6px;
            border-radius: var(--radius-full); font-size: var(--text-xs);
            line-height: 1.6; white-space: nowrap;
            border: 0.5px solid transparent; }
.bl-faixa.is-alta { background: var(--success-soft); color: var(--success);
                    border-color: var(--success-border); }
.bl-faixa.is-media { background: var(--surface-2); color: var(--text-2);
                     border-color: var(--border-1); }
.bl-faixa.is-baixa { background: var(--warning-soft); color: var(--warning);
                     border-color: var(--warning-border); }
.bl-pop { font-size: var(--text-xs); color: var(--text-3); }
/* Ausencia NOMEADA, nunca celula em branco (D5): branco se le como zero ou
   como bug de renderizacao. */
.bl-sem { color: var(--text-3); }
.bl-vintage, .bl-run { font-size: var(--text-xs); color: var(--text-3);
                       margin: 0 0 var(--space-3); }
.bl-vintage b, .bl-run b { color: var(--text-2); font-weight: 600; }
.bl-dado .gate { font-size: var(--text-xs); color: var(--text-3);
                 display: block; }
/* == fim do Bloco D ======================================================= */
/* ---- projecao ANBIMA: proposta e coletas do mes (DP-5/DP-6) ---- */
/* 100% var(--*), zero hex — regra da folha (CLAUDE.md secao 10). */
.proposta-projecao { border: 0.5px solid var(--accent-gold-border);
                     background: var(--surface-2); }
.coleta-chip { display: inline-block; padding: 1px var(--space-2);
               margin: 0 var(--space-1) var(--space-1) 0;
               border: 0.5px solid var(--border-1); border-radius: 3px;
               background: var(--surface-3); color: var(--text-1);
               font-size: var(--text-base); font-variant-numeric: tabular-nums;
               white-space: nowrap; }

/* ── Chip de frescor do mercado no navbar (F10) ───────────────────── */
/* Zero hex: 100% var(--*), como o resto do arquivo. A regua de cor usa os
   semanticos ja existentes; nao ha token de "warn" proprio neste projeto — o
   ambar do design system e o --accent-gold, que e o mesmo usado nos banners de
   procedencia do VNA. */

.chip-mercado {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    font-size: var(--text-xs);
    color: var(--text-1);
    white-space: nowrap;
}

.chip-mercado.is-ok { border-color: var(--success-border); }
.chip-mercado.is-atrasada { border-color: var(--accent-gold-border); }
.chip-mercado.is-vazia,
.chip-mercado.is-falhou { border-color: var(--danger-border); }

.chip-mercado.is-ok .chip-mercado-texto { color: var(--success); }
.chip-mercado.is-atrasada .chip-mercado-texto { color: var(--accent-gold); }
.chip-mercado.is-vazia .chip-mercado-texto,
.chip-mercado.is-falhou .chip-mercado-texto { color: var(--danger); }

.chip-mercado-btn {
    border: 0;
    background: none;
    padding: 0 2px;
    cursor: pointer;
    color: var(--text-2);
    font-size: var(--text-sm);
    line-height: 1;
}
.chip-mercado-btn:hover { color: var(--accent-gold); }

/* Spinner do run em andamento. `--live` ja e o token de "esta acontecendo". */
.chip-mercado-spin {
    width: 9px;
    height: 9px;
    border-radius: var(--radius-full);
    background: var(--live);
    box-shadow: 0 0 0 0 var(--live-glow);
    animation: chip-mercado-pulso 1.4s ease-out infinite;
}
@keyframes chip-mercado-pulso {
    0%   { box-shadow: 0 0 0 0 var(--live-glow); }
    100% { box-shadow: 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .chip-mercado-spin { animation: none; }
}

/* O <details> nativo cuida do abre/fecha; o handler global do base.html so
   fecha `details.nav-menu`, entao este fica independente do menu da engrenagem. */
.chip-mercado-det > summary {
    list-style: none;
    cursor: pointer;
    color: var(--text-3);
    padding: 0 2px;
}
.chip-mercado-det > summary::-webkit-details-marker { display: none; }
.chip-mercado-det > summary:hover { color: var(--accent-gold); }

.chip-mercado-painel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 60;
    min-width: 420px;
    padding: var(--space-3);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    box-shadow: var(--shadow-2);
    white-space: normal;
}

.chip-mercado-tabela { width: 100%; border-collapse: collapse; }
.chip-mercado-tabela th,
.chip-mercado-tabela td {
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--border-0);
    text-align: left;
    font-size: var(--text-xs);
}
.chip-mercado-tabela th { color: var(--text-2); font-weight: 600; }
.chip-mercado-tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.chip-mercado-tabela th.num { text-align: right; }

.chip-mercado-tabela tr.is-ok td { color: var(--text-1); }
.chip-mercado-tabela tr.is-atrasada td { color: var(--accent-gold); }
.chip-mercado-tabela tr.is-vazia td,
.chip-mercado-tabela tr.is-falhou td { color: var(--danger); }

/* O ponto de status. Quando esta tudo em dia, o chip e SO ele: "esta em dia?"
   e pergunta de sim ou nao, e um ponto verde a responde. Medido a 1155px: com o
   texto "Mercado em dia" sempre visivel o chip custa 151px e empurra a quebra da
   barra de 1021px para 1172px. */
.chip-mercado-ponto {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex: none;
}
.chip-mercado.is-ok .chip-mercado-ponto { background: var(--success); }
.chip-mercado.is-atrasada .chip-mercado-ponto { background: var(--accent-gold); }
.chip-mercado.is-vazia .chip-mercado-ponto,
.chip-mercado.is-falhou .chip-mercado-ponto { background: var(--danger); }

/* Texto so-leitor-de-tela: o ponto sozinho e mudo para quem usa leitor, e a
   resposta ("Mercado em dia") tem de existir no DOM de qualquer jeito. */
.chip-mercado .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* "nao publicado" NAO e um valor: e a ausencia do segundo relogio. Fica
   esmaecido e em italico para nao se confundir com uma data. */
.chip-mercado-sem-relogio { color: var(--text-2); font-style: italic; }

.chip-mercado-consequencia td {
    color: var(--text-2);
    font-style: italic;
    border-bottom: 1px solid var(--border-1);
}

.chip-mercado-aviso {
    margin: 0 0 var(--space-2);
    padding: var(--space-2);
    border-left: 3px solid var(--accent-gold);
    background: var(--accent-gold-soft);
    color: var(--text-1);
    font-size: var(--text-xs);
}

.chip-mercado-rodape { margin: var(--space-2) 0 0; font-size: var(--text-xs); }

/* ─── Cadastro de títulos: a lista de OPERADOR (F11) ──────────────────
   Irmã da lista de inteligência, em /settings/bonds/. Tudo aqui consome
   var(--*) — zero hex, como o resto do arquivo desde a Fase 4. */

.cad-sub { margin: calc(-1 * var(--space-3)) 0 var(--space-4); }

/* Painel de contadores. Os três grupos NÃO se somam (trabalho · informação ·
   higiene) e por isso são caixas separadas, não uma fileira de KPI cards: o
   card sugere que os números vivem na mesma escala. */
.cad-painel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}
.cad-pn-grupo {
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    padding: var(--space-3) var(--space-4);
}
.cad-pn-grupo > h4 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: var(--uppercase-tracking);
    font-weight: 600;
}
.cad-pn-grupo.is-alerta { border-color: var(--danger-border); background: var(--danger-soft); }
.cad-pn-grupo.is-alerta > h4 { color: var(--danger); }
.cad-pn-grupo.is-alerta .pn-n { color: var(--danger); }

/* Cada contador é um <button>: ele MUDA o estado da tela (recorta a tabela),
   e um <a href="#"> mentiria sobre isso para teclado e leitor de tela. O
   reset de aparência é o preço de usar o elemento certo. */
.cad-pn-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    width: 100%;
    padding: 3px 5px;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-1);
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.cad-pn-item:hover { background: var(--surface-3); }
.cad-pn-item[aria-pressed="true"] {
    background: var(--accent-gold-soft);
    box-shadow: inset 2px 0 0 var(--accent-gold);
    color: var(--accent-gold-strong);
    font-weight: 600;
}
.cad-pn-item .pn-n {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-md);
    color: var(--text-0);
    min-width: 3.2em;
    text-align: right;
}
.cad-pn-de { color: var(--text-2); font-weight: 400; }

.cad-rodape {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-2);
}
.cad-mercado { display: inline-flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.cad-ok { color: var(--success); font-weight: 700; }
.cad-falta-dado { color: var(--danger); font-weight: 700; }

/* O alarme de causa GLOBAL: uma linha, não uma coluna repetida N vezes. */
.alarme {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--danger-border);
    background: var(--danger-soft);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-1);
}
.alarme b { color: var(--danger); }
.cad-alarme-nota { color: var(--text-2); }

.cad-limpar {
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--accent-gold-strong);
    cursor: pointer;
    text-decoration: underline;
}
.cad-contagem { margin-left: auto; font-size: var(--text-sm); color: var(--text-2); }

/* Linha da tabela */
.cad-cod { display: block; font-family: var(--font-mono); font-weight: 600; color: var(--text-0); }
.cad-sublinha { display: block; font-size: var(--text-xs); color: var(--text-2); }
.cad-grupo {
    background: var(--surface-3);
    font-weight: 700;
    color: var(--text-1);
    font-size: var(--text-sm);
}
.cad-grupo small { font-weight: 400; color: var(--text-2); }

.cad-est {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 1px 8px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-1);
    background: var(--surface-3);
    color: var(--text-2);
    white-space: nowrap;
}
.cad-est.is-ok { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.cad-est.is-err { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.cad-est.is-warn { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }

/* Buraco de COBERTURA: borda tracejada de propósito — é ausência de dado, não
   defeito. O crachá de estado (sólido) é que sinaliza defeito. */
.cad-falta {
    display: inline-block;
    font-size: var(--text-xs);
    padding: 1px 7px;
    margin: 1px 3px 1px 0;
    border-radius: var(--radius-full);
    border: 1px dashed var(--border-1);
    background: var(--surface-2);
    color: var(--text-2);
}

.cad-acoes { white-space: nowrap; }
.cad-bt {
    display: inline-block;
    font-size: var(--text-xs);
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-1);
    background: var(--surface-2);
    color: var(--text-1);
    margin-right: 4px;
}
.cad-bt:hover { background: var(--surface-3); }
.cad-bt.is-pri {
    background: var(--accent-gold-soft);
    border-color: var(--accent-gold-border);
    color: var(--accent-gold-strong);
    font-weight: 600;
}
/* Desabilitado, nunca escondido (D10): o operador vê que a porta existe e
   descobre no `title` por que ela não abre. */
.cad-bt.is-off { opacity: .45; text-decoration: line-through; cursor: not-allowed; }

/* 🚨 `[hidden]` em <tr> só vale pela folha do AGENTE e perde para qualquer
   regra de autor — há seis precedentes disso registrados neste arquivo. Hoje
   nenhuma regra de autor dá `display` a <tr>, então o filtro funcionaria sem
   isto; a regra existe para que uma regra futura não o quebre EM SILÊNCIO.
   ⚠️ O zebrado de `.b3-table tbody tr:nth-child(even)` fica torto depois de
   filtrar (linha escondida ainda conta na posição). Defeito cosmético e
   VISÍVEL, aceito: corrigi-lo exigiria repintar as linhas no JS a cada tecla. */
#cadastro-tabela tbody tr[hidden] { display: none; }

/* == Tela /market — consulta de dados de mercado (F8) ==================
   Prefixo `mkt-*` DISJUNTO de proposito: o `style.css` esta disputado com a
   F3 (`rg-*`, `cascata-*`) e com a F11 (`cad-*`). Colisao de merge o git
   resolve; colisao de DESENHO, nao. Bloco no fim do arquivo, sem reordenar
   nada acima.
   Zero hex: toda cor sai de `tokens.css`, nos dois temas — e a paleta de
   serie (`--serie-1..4`) e CATEGORICA, nao semantica. */

.mkt-secao { margin: var(--space-5) 0 0; }
.mkt-secao:first-of-type { margin-top: var(--space-3); }

/* Os dois graficos de curva ficam LADO A LADO numa linha. Uma coluna abaixo do
   breakpoint — a decisao e por LARGURA DE COLUNA, nao por contagem: `auto-fit`
   ainda caberia em duas colunas a 1024px, e a leitura do eixo sofre.
   ⚠️ O `.mkt-svg` continua com `max-width: 760px` (ver adiante). Numa coluna
   mais estreita que 760 o SVG escala PARA BAIXO junto com o texto do eixo —
   e o oposto da regressao que o teto impede, mas custa legibilidade; por isso
   o breakpoint e alto.
   As margens internas sao zeradas: dois itens da MESMA linha com margens
   diferentes (`:first-of-type` acima) desalinhariam os topos. */
.mkt-graficos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
    margin: var(--space-3) 0 0;
}
/* Card: mesmo tratamento do `.op-histograma` da /oportunidades — fundo
   `--surface-1`, borda e raio. Os graficos da /market nasceram SEM card (a F8
   entregou assim) e ficavam soltos sobre o fundo da pagina, enquanto o
   histograma da lista de trocas fica num card. Duas telas, dois tratamentos
   para o mesmo objeto: o dono notou e pediu consistencia.
   ⚠️ O card fica no `.mkt-graficos > .mkt-secao`, NAO no `.mkt-secao` solto:
   a secao "Vertices por prazo" tambem e `.mkt-secao` e ja tem o proprio
   tratamento de tabela — envolve-la num card poria borda dentro de borda. */
.mkt-graficos > .mkt-secao,
.mkt-graficos > .mkt-secao:first-of-type {
    margin: 0;
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    /* Padding lateral ENXUTO de proposito. Ele sai da largura do SVG, que ja
       esta abaixo dos 760 naturais por causa das duas colunas: cada 8px de
       padding tira 8px do desenho e encolhe o texto do eixo junto (o SVG tem
       viewBox). Medido a 1920: com --space-4 o eixo cai a 8,80px; com
       --space-2, 9,11px. O respiro vertical fica; o lateral e que custa. */
    padding: var(--space-3) var(--space-2) var(--space-2);
}
/* Numero IMPAR de graficos: o ultimo ocupa a linha inteira em vez de deixar
   meia linha vazia. Com dois (o caso de hoje) a regra e inerte. */
.mkt-graficos > .mkt-secao:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* A secao seguinte perdeu o `:first-of-type` ao ganhar o wrapper; sem isto ela
   herdaria o espacamento de topo de secao, menor. */
.mkt-graficos + .mkt-secao { margin-top: var(--space-5); }

@media (min-width: 1200px) {
    .mkt-graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mkt-grafico-titulo {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-1);
    margin: 0 0 var(--space-2);
}

/* 🚨 `max-width` NAO e cosmetico. Num SVG com `viewBox` o desenho inteiro —
   TEXTO INCLUSIVE — escala com a largura do container: sem teto, o rotulo de
   eixo (10px) renderiza maior que os 13px do corpo da tabela num container
   largo. Ja regrediu uma vez na /oportunidades, e o sintoma reportado foi
   exatamente "a fonte dos eixos esta maior do que o restante da tela".
   O valor ACOMPANHA `curva_grafico.LARGURA` / `serie_grafico.LARGURA` — ha
   teste amarrando os tres, senao mudar a constante quebra o teto em silencio. */
.mkt-svg {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
    overflow: visible;
}

.mkt-eixo-linha { stroke: var(--border-2); stroke-width: 1; fill: none; }
.mkt-grade { stroke: var(--border-0); stroke-width: 1; fill: none; }
.mkt-eixo-texto {
    font-size: var(--text-xs);
    fill: var(--text-2);
}
.mkt-eixo-titulo {
    font-size: var(--text-xs);
    fill: var(--text-3);
    letter-spacing: var(--uppercase-tracking);
    text-transform: uppercase;
}

.mkt-linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mkt-ponto { stroke: none; }

/* Colunas da variacao mensal do IPCA. Aqui a cor SEMANTICA e a certa, e nao
   contradiz a nota das `--serie-*` em tokens.css: la o alerta e contra pintar
   IDENTIDADE de serie com cor de juizo; aqui o que a cor codifica e o SINAL do
   mes (inflacao x deflacao), que e a propria informacao do grafico — a mesma
   razao pela qual o histograma da /oportunidades usa --success/--danger.
   `mkt-col-zero` e NEUTRA de proposito: o filete de altura minima existe para
   o mes zerado nao sumir, e pinta-lo de positivo mentiria o sinal. */
.mkt-coluna { stroke: none; }
.mkt-col-positivo { fill: var(--success); }
.mkt-col-negativo { fill: var(--danger); }
.mkt-col-zero { fill: var(--text-3); }
.mkt-zero-linha { stroke: var(--border-2); stroke-width: 1; fill: none; }

.mkt-serie-1 { stroke: var(--serie-1); }
.mkt-serie-2 { stroke: var(--serie-2); }
.mkt-serie-3 { stroke: var(--serie-3); }
.mkt-serie-4 { stroke: var(--serie-4); }
.mkt-ponto.mkt-serie-1 { fill: var(--serie-1); }
.mkt-ponto.mkt-serie-2 { fill: var(--serie-2); }
.mkt-ponto.mkt-serie-3 { fill: var(--serie-3); }
.mkt-ponto.mkt-serie-4 { fill: var(--serie-4); }

/* A legenda vive em HTML, nao dentro do SVG: rotulo dentro do desenho colide
   com o proprio tracado (dois casos medidos no browser, no histograma da
   /oportunidades) e o HTML ao lado ainda e mais acessivel. */
.mkt-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--text-1);
}
.mkt-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.mkt-legenda-traco {
    width: 18px; height: 0; flex: none;
    border-top-width: 2px; border-top-style: solid;
}
.mkt-legenda-1 { border-top-color: var(--serie-1); }
.mkt-legenda-2 { border-top-color: var(--serie-2); }
.mkt-legenda-3 { border-top-color: var(--serie-3); }
.mkt-legenda-4 { border-top-color: var(--serie-4); }

/* Procedencia: os DOIS relogios lado a lado, SEM juizo. Quem julga por
   tolerancia e o chip da barra (F10) — a tela so exibe. */
.mkt-proc { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
            margin: var(--space-3) 0 0; font-size: var(--text-xs);
            color: var(--text-2); }
.mkt-proc-item { display: inline-flex; gap: 5px; align-items: baseline; }
.mkt-proc-rot { color: var(--text-3); text-transform: uppercase;
                letter-spacing: var(--uppercase-tracking); }
.mkt-proc-val { color: var(--text-1); font-variant-numeric: tabular-nums; }
/* "nao publicado" e diferente de "vazio": a secao nao TEM esse relogio. */
.mkt-proc-ausente { color: var(--text-3); font-style: italic; }

/* `.mkt-toggles` (o container) foi REMOVIDO em 2026-08-20: as duas abas passaram
   a usar `.bonds-toolbar` do design system. `.mkt-toggle` (o rotulo de cada
   checkbox) continua — nao sao a mesma classe, e apagar o singular junto quebra
   os tres checkboxes da aba Curvas. */
.mkt-toggle { display: inline-flex; align-items: center; gap: 6px;
              font-size: var(--text-sm); color: var(--text-1); cursor: pointer; }
.mkt-toggle input { cursor: pointer; }

.mkt-periodo { display: inline-flex; align-items: center; gap: var(--space-2);
               font-size: var(--text-sm); color: var(--text-1); }

/* As duas abas da /market usam a barra do design system (`.bonds-toolbar`), com
   este modificador para o que e proprio delas. NAO emitem `data-alvo`: o filtro
   e server-side (HTMX), e o driver client-side do base.html so enxerga
   `.bonds-toolbar[data-alvo]` — mesma convencao de /oportunidades e /clientes.
   O `.mkt-select` nao tinha regra NENHUMA antes disto: eram selects nativos do
   browser, destoando de todo o resto do app. Agora herdam de `.bonds-toolbar
   select`. */
.mkt-filtros { margin-bottom: var(--space-3); }
/* Exportar vai para a ponta direita, como na /oportunidades. `auto` na margem
   em vez de `justify-content: space-between` porque a barra tem numero variavel
   de controles antes dele. */
.mkt-filtros > .btn { margin-left: auto; }

.mkt-nota { margin: var(--space-2) 0 0; font-size: var(--text-xs);
            color: var(--text-2); max-width: 78ch; }

/* Coluna de valor interpolado: a curva do Anexo I preenche o DU que a fonte
   nao publica. Distinta da publicada para o leitor nao confundir o que veio
   da fonte com o que a nossa interpolacao derivou. */
.mkt-interpolado { color: var(--text-2); font-style: italic; }

.mkt-vazio-serie { color: var(--text-3); }

/* == fim da tela /market ============================================== */

/* == aba Carteira da pagina do titulo (F5) ============================
   Prefixo `cart-*`, disjunto de tudo o que ja existe: `rg-*`/`cascata-*`
   sao da F3 (aba Mercado), `mkt-*` da F8 (tela /market) e `cad-*` da F11
   (lista de operador em /settings/bonds). Bloco no FIM do arquivo, sem
   reordenar nada acima -- mesma convencao que a F8 adotou.
   100% var(--*), zero hex: a regra da casa e que a MESMA regra renderiza
   claro e escuro, e quem troca sao os valores dos tokens. */

/* A frase que nomeia o que o extrato do pregao nao traz. Nao e alerta --
   e procedencia: a posicao esta completa, so o dinheiro nao pode ser
   apurado. Por isso `--text-2`, e nao a paleta de warning. */
.cart-nota {
    color: var(--text-2);
    font-size: var(--text-sm);
    margin: 0.75rem 0 0;
}

.cart-abstem { color: var(--text-3); }

/* Resultado nao realizado. A cor codifica o SINAL, e o percentual vem
   junto do valor porque um sem o outro nao se le: R$ 2.643,84 pode ser
   3,6% ou 36% conforme o tamanho da posicao. */
.cart-res { white-space: nowrap; }
.cart-res.is-pos { color: var(--success); }
.cart-res.is-neg { color: var(--danger); }

.cart-res-pct {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: var(--text-xs);
    color: var(--text-2);
}

/* Mesma nota de rodape que o Bloco B usa para a posicao do escritorio:
   diz ao leitor que este conteudo depende da flag de clientes, e nao que
   o papel "nao tem" detentor. */
.cart-gate {
    color: var(--text-3);
    font-size: var(--text-xs);
    margin: 0.75rem 0 0;
}

/* == fim da aba Carteira ============================================== */

/* == aba Fluxo da pagina do titulo (F5) ===============================
   Prefixo `fx-`. Disjunto dos outros desta pagina e das fatias vizinhas:
   `cart-` (aba Carteira), `rg-` e `cascata-` (F3), `mkt-` (F8), `cad-`
   (F11).
   ATENCAO: nao escrever curinga seguido de barra dentro deste comentario --
   a sequencia fecha o bloco e a PRIMEIRA regra abaixo e engolida em
   silencio. Foi o que aconteceu aqui: `.fx-sem-caixa` sumiu do CSSOM e a
   marca "sem pagamento" ficou sem estilo, com o arquivo servido intacto. */

/* Incorporacao de juros NAO paga caixa: capitaliza no principal (§3.2).
   Sem esta marca o evento se le como um cupom que o cliente vai receber.
   O crachao ao lado ja diz "Incorpora juros"; esta frase explica o que
   isso significa para o caixa, que e a duvida real de quem le. */
.fx-sem-caixa {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: var(--text-xs);
    color: var(--text-2);
}

/* O passado nao some: e contado, com caminho para a agenda completa. A
   §6.4 pergunta pelos PROXIMOS eventos, entao os liquidados saem da
   tabela -- mas sumir sem dizer faria a contagem parecer o total. */
.fx-passados {
    color: var(--text-2);
    font-size: var(--text-sm);
    margin: 0.75rem 0 0;
}

/* == fim da aba Fluxo ================================================= */

/* == aba Cadastro da pagina do titulo (F5) ============================
   Prefixo `fc-` (ficha cadastral) -- NAO `cad-`, que e da F11 (lista de
   operador em /settings/bonds). Disjunto tambem de `cart-` e `fx-` (as
   outras abas desta fatia), `rg-` e `cascata-` (F3) e `mkt-` (F8).
   Mesma nota do bloco acima sobre curinga seguido de barra. */

.fc-titulo {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-2);
    margin: 1.5rem 0 0.75rem;
}
.fc-titulo:first-child { margin-top: 0; }

/* Selo de procedencia do parametro tecnico. A distincao que ele carrega e
   a razao de a aba existir: "padrao" NAO e "nao configurado" -- o motor
   aplica o default documentado (L=1, D-3/D-2), e um travessao no lugar
   faria o operador concluir que o preco saiu sem o parametro. */
.fc-selo {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border: 0.5px solid var(--border-1);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-2);
}
/* Calibrado por titulo: destacado porque e a excecao (45 e 61 de 678). */
.fc-selo.is-calibrado {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* Terceiro estado, e ele e real: PRE e IPCA nao tem fixing DI. "Nao se
   aplica" tambem nao e "nao configurado". */
.fc-na { color: var(--text-3); font-style: italic; }

.fc-isencao {
    color: var(--text-1);
    font-size: var(--text-sm);
    margin: 0 0 0.5rem;
}

/* A abstencao de procedencia da isencao (divergencia da §6.5): o valor
   esta registrado; o canal que o decidiu nao e persistido. Cor de texto
   secundario porque e ressalva, nao alarme. */
.fc-sem-proc { color: var(--text-2); }

.fc-editar {
    color: var(--text-2);
    font-size: var(--text-sm);
    margin: 1.5rem 0 0;
}

/* == fim da aba Cadastro ============================================== */

/* ─── Upload das planilhas do BTG (Bloco 3 da nuvem) ─────────────────── */

/* 🚨 O projeto NAO tem regra `.btn:disabled` — medido em 28/08/2026: um
   `<button class="btn btn-primary" disabled>` renderiza com `opacity: 1` e
   `cursor: pointer`, visualmente IDENTICO a um botao vivo. Quem clica nao
   recebe sinal nenhum de que o controle esta inerte.

   A regra fica ESCOPADA a esta barra, e nao global, de proposito: o htmx marca
   `disabled` nos botoes com `hx-disabled-elt="this"` ENQUANTO a requisicao
   corre (quatro telas de `market_data/` fazem isso hoje), e uma regra global
   mudaria a aparencia deles durante o request — mudanca de outra frente, que
   esta fatia nao decidiu.

   Mesmos valores do vizinho `.op-matriz input[disabled]`, que ja resolveu o
   mesmo problema para checkbox. */
.imp-btg-acoes .btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}