/* =====================================================================
   Simulação de Finanças — wizard (/simulacao-financas) e lista
   (/simulacoes-financas). Prefixo .sf-. Só tokens do tema: funciona em
   claro e escuro sem regras próprias. Texto sobre o gradiente da marca
   usa --df-on-primary (landing-tokens.css, redefinido no tema escuro).
   ===================================================================== */

.sf-page {
    --sf-on-brand: rgb(var(--df-on-primary));
    --sf-radius: var(--border-radius-lg, 16px);
    --sf-radius-sm: var(--border-radius-md, 10px);
    --sf-muted-bg: var(--surface-subtle, var(--bg-secondary));
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

.sf-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;
}

/* ── Cabeçalho ─────────────────────────────────────────────────────── */
/* O cabeçalho é o .header-section partilhado (app.css); o gap da página já o separa do resto. */
.sf-page > .header-section { margin-bottom: 0; }

.sf-editing {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    align-self: flex-start;
    margin: 0;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    overflow-wrap: anywhere;
}

.sf-loading { display: flex; justify-content: center; padding: 3rem 1rem; }

/* ── Botões ────────────────────────────────────────────────────────── */
.sf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.55rem 1.1rem;
    border-radius: var(--sf-radius-sm);
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s, background 0.15s;
}

.sf-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.sf-btn-primary { background: var(--gradient-brand, var(--primary)); color: var(--sf-on-brand); }
.sf-btn-primary:hover:not(:disabled) {
    filter: brightness(1.06);
    color: var(--sf-on-brand);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
}

.sf-btn-outline { background: transparent; border-color: var(--border-color); color: var(--text-primary); }
.sf-btn-outline:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }

.sf-btn-ghost { background: transparent; color: var(--text-secondary); padding-inline: 0.6rem; }
.sf-btn-ghost:hover:not(:disabled) { color: var(--primary); background: var(--sf-muted-bg); }

.sf-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
}

.sf-icon-btn:hover { border-color: var(--primary); color: var(--primary); }

.sf-link-btn {
    margin-top: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sf-page :is(.sf-btn, .sf-icon-btn, .sf-link-btn, .sf-step-btn, .sf-switch-row, .sf-product, .sf-option, .sf-chip-option, .sf-chart-col, .sf-action, .sf-saved-main, .sf-table-wrap):focus-visible,
.sf-page :is(.sf-option, .sf-chip-option):focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ── Stepper + barra de progresso ──────────────────────────────────── */
.sf-stepper { display: flex; flex-direction: column; gap: 0.75rem; }

.sf-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--sf-muted-bg);
    overflow: hidden;
}

.sf-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-brand, var(--primary));
    transition: width 0.3s ease;
}

.sf-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.sf-step-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.25rem;
    border: 0;
    border-radius: var(--sf-radius-sm);
    background: none;
    font: inherit;
    color: var(--text-secondary);
    text-align: left;
}

button.sf-step-btn { cursor: pointer; }
button.sf-step-btn:hover:not(:disabled) .sf-step-label { color: var(--primary); }

.sf-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--card-bg);
}

.sf-step-label { font-size: 0.85rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sf-step.is-current .sf-step-num { background: var(--gradient-brand, var(--primary)); border-color: transparent; color: var(--sf-on-brand); }
.sf-step.is-current .sf-step-label { color: var(--text-primary); }
.sf-step.is-done .sf-step-num { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* ── Cartão do passo ───────────────────────────────────────────────── */
.sf-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--sf-radius);
    padding: 1.5rem;
    min-width: 0;
}

.sf-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.sf-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gradient-brand, var(--primary));
    color: var(--sf-on-brand);
    font-weight: 700;
}

.sf-card-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
.sf-card-title:focus { outline: none; }
.sf-card-title:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
.sf-card-subtitle { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--text-secondary); }

.sf-section-title { margin: 1.5rem 0 0.6rem; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.sf-section-title:first-child { margin-top: 0; }

.sf-hint { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--text-secondary); display: flex; gap: 0.4rem; align-items: baseline; }
.sf-hint--end { justify-content: flex-end; text-align: right; }
.sf-hint--aviso { color: var(--warning, #b45309); }

.sf-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.sf-actions--end { justify-content: flex-end; }
.sf-actions-group { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ── Estados (vazio / erro) e avisos ───────────────────────────────── */
.sf-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    padding: 1.75rem 1rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--sf-radius-sm);
    color: var(--text-secondary);
}

.sf-state > i { font-size: 2rem; opacity: 0.6; }
.sf-state p { margin: 0; max-width: 46ch; font-size: 0.9rem; }
.sf-state--large { padding: 3rem 1.25rem; background: var(--card-bg); border-style: solid; border-radius: var(--sf-radius); }
.sf-state-title { margin: 0; font-size: 1.1rem; color: var(--text-primary); }
.sf-state-links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.sf-state-links a { color: var(--primary); font-weight: 600; font-size: 0.88rem; }

.sf-banner {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    border-radius: var(--sf-radius-sm);
    font-size: 0.86rem;
    color: var(--text-primary);
}

.sf-banner--warn {
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
}

.sf-banner--warn > i { color: var(--warning); margin-top: 0.1rem; }
.sf-banner ul { margin: 0; padding-left: 1rem; }
.sf-banner li + li { margin-top: 0.25rem; }
.sf-result .sf-banner { margin-bottom: 1rem; }

/* ── Passo 1: Quando ───────────────────────────────────────────────── */
.sf-fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.sf-label { display: block; margin-bottom: 0.5rem; padding: 0; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }

.sf-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

.sf-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--sf-radius-sm);
    background: var(--card-bg);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.sf-option input, .sf-chip-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sf-option:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border-color)); }
.sf-option.is-selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--card-bg)); }

.sf-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--sf-muted-bg);
    color: var(--primary);
    font-size: 1.05rem;
}

.sf-option-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.sf-option-text strong { font-size: 0.92rem; color: var(--text-primary); }
.sf-option-text small { font-size: 0.78rem; color: var(--text-secondary); }

.sf-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.sf-chip-option {
    position: relative;
    padding: 0.45rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.sf-chip-option.is-selected { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }

.sf-month { display: flex; align-items: center; gap: 0.75rem; }

.sf-month-value {
    flex: 1;
    max-width: 260px;
    text-align: center;
    padding: 0.55rem 0.75rem;
    border-radius: var(--sf-radius-sm);
    background: var(--sf-muted-bg);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    text-transform: capitalize;
}

.sf-summary-line {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    flex-wrap: wrap;
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.sf-summary-line i { color: var(--primary); }
.sf-summary-line strong { color: var(--text-primary); }

/* ── Passo 2: Alvo ─────────────────────────────────────────────────── */
.sf-total {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: var(--sf-radius-sm);
    background: var(--sf-muted-bg);
}

.sf-total-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); }
.sf-total-value { font-size: 1.8rem; font-weight: 800; line-height: 1.15; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sf-total-sub { font-size: 0.82rem; color: var(--text-secondary); }

.sf-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.5rem; }

.sf-month-chip {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--sf-radius-sm);
    font-size: 0.82rem;
    min-width: 0;
}

.sf-month-chip-name { color: var(--text-secondary); font-size: 0.74rem; }
.sf-month-chip strong { color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sf-month-chip.is-diff { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }

.sf-items { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-color); border-radius: var(--sf-radius-sm); overflow: hidden; }
.sf-items li + li { border-top: 1px solid var(--border-color); }

.sf-switch-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border: 0;
    background: var(--card-bg);
    font: inherit;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.sf-switch-row:hover { background: var(--sf-muted-bg); }
.sf-switch-row.is-off .sf-switch-info, .sf-switch-row.is-off .sf-item-value { opacity: 0.55; }
.sf-switch-row.is-off .sf-item-value { text-decoration: line-through; }

.sf-switch-row--dono {
    margin: 1rem 0;
    border: 1px solid var(--border-color);
    border-radius: var(--sf-radius-sm);
}

.sf-switch-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.sf-switch-info strong { font-size: 0.9rem; overflow-wrap: anywhere; }
.sf-switch-info small { font-size: 0.78rem; color: var(--text-secondary); }
.sf-item-value { font-weight: 700; font-size: 0.88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

.sf-switch {
    display: inline-flex;
    align-items: center;
    width: 40px;
    height: 22px;
    padding: 2px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--border-color);
    transition: background 0.15s;
}

.sf-switch-knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--card-bg);
    box-shadow: 0 1px 2px var(--shadow);
    transition: transform 0.15s;
}

.is-on > .sf-switch { background: var(--primary); }
.is-on > .sf-switch .sf-switch-knob { transform: translateX(18px); }

/* ── Passo 3: Produtos ─────────────────────────────────────────────── */
.sf-search { position: relative; margin-bottom: 0.75rem; }
.sf-search > i { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); }
.sf-search .sf-input { padding-left: 2.2rem; }

.sf-input {
    width: 100%;
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--sf-radius-sm);
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.sf-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.sf-input.is-invalid { border-color: var(--error); }
.sf-input:disabled { opacity: 0.6; }

.sf-products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.5rem; }

.sf-product {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    height: 100%;
    padding: 0.75rem 0.85rem;
    border: 1.5px solid var(--border-color);
    border-radius: var(--sf-radius-sm);
    background: var(--card-bg);
    font: inherit;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.sf-product:hover:not(:disabled) { border-color: color-mix(in srgb, var(--primary) 50%, var(--border-color)); }
.sf-product.is-selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--card-bg)); }
.sf-product:disabled { cursor: not-allowed; background: var(--sf-muted-bg); }
.sf-product:disabled strong { color: var(--text-secondary); }

.sf-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 0.1rem;
    flex-shrink: 0;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    color: transparent;
    font-size: 0.8rem;
}

.sf-product.is-selected .sf-check { background: var(--primary); border-color: var(--primary); color: var(--sf-on-brand); }
.sf-product-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sf-product-info strong { font-size: 0.9rem; overflow-wrap: anywhere; }
.sf-product-info small { font-size: 0.76rem; color: var(--text-secondary); }
.sf-product-motivo { font-style: italic; }

.sf-lines { display: flex; flex-direction: column; gap: 0.75rem; }

.sf-line {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--sf-radius-sm);
    background: var(--card-bg);
}

.sf-line-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.sf-line-head strong { overflow-wrap: anywhere; }
.sf-line-head .sf-icon-btn { width: 34px; height: 34px; border-color: transparent; }

.sf-line-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sf-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.sf-field > label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.sf-field-error { min-height: 1em; margin: 0; font-size: 0.76rem; color: var(--error); }
.sf-field-error:empty { min-height: 0; }

.sf-line-figures { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0.5rem 0 0; }
.sf-line-figures > div { display: flex; flex-direction: column; min-width: 0; }
.sf-line-figures dt { font-size: 0.74rem; font-weight: 500; color: var(--text-secondary); }
.sf-line-figures dd { margin: 0; font-weight: 700; font-size: 0.92rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sf-line-figures .is-negative dd { color: var(--error); }

.sf-quota-sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
    padding: 0.75rem 1rem;
    border-radius: var(--sf-radius-sm);
    border: 1px solid var(--border-color);
}

.sf-quota-sum.is-ok { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 10%, transparent); }
.sf-quota-sum.is-error { border-color: color-mix(in srgb, var(--error) 45%, transparent); background: color-mix(in srgb, var(--error) 8%, transparent); }
.sf-quota-sum-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; }
.sf-quota-sum-text span { font-size: 0.85rem; color: var(--text-secondary); }
.sf-quota-sum-text strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.sf-quota-sum-text small { flex-basis: 100%; font-size: 0.78rem; color: var(--text-secondary); }

/* ── Passo 4: Resultado ────────────────────────────────────────────── */
.sf-result { transition: opacity 0.15s; }
.sf-result.is-busy { opacity: 0.6; pointer-events: none; }

.sf-hero {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: var(--sf-radius);
    background: var(--gradient-brand, var(--primary));
    color: var(--sf-on-brand);
}

.sf-hero-kicker { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; }
.sf-hero-value { font-size: clamp(2rem, 7vw, 2.9rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sf-hero-sub { font-size: 0.88rem; opacity: 0.92; }

.sf-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }

.sf-metric {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    border-radius: var(--sf-radius-sm);
    background: var(--sf-muted-bg);
    min-width: 0;
}

.sf-metric-label { font-size: 0.76rem; font-weight: 600; color: var(--text-secondary); }
.sf-metric-value { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sf-metric-note { font-size: 0.74rem; color: var(--text-secondary); }
.sf-metric--sobra .sf-metric-value { color: var(--success); }

.sf-field--inline { padding: 0.9rem 1rem; border: 1px solid var(--border-color); border-radius: var(--sf-radius-sm); }
.sf-field-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.sf-field-row .sf-input { width: 120px; flex-shrink: 0; }
.sf-field-row .sf-hint, .sf-field-row .sf-field-error { margin: 0; flex: 1 1 200px; }

.sf-product-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sf-product-result { padding: 0.8rem 1rem; border: 1px solid var(--border-color); border-radius: var(--sf-radius-sm); }
.sf-product-result-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.sf-product-result-head strong { overflow-wrap: anywhere; }
.sf-product-result-units { font-size: 1.05rem; font-weight: 800; color: var(--primary); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Gráfico mensal (barras CSS; a tabela abaixo é a vista acessível dos dados) */
.sf-chart { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--sf-radius-sm); }
.sf-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sf-chart-title { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }
.sf-chart-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-secondary); }
.sf-chart-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sf-legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.sf-legend-dot--alvo, .sf-bar--alvo { background: color-mix(in srgb, var(--text-secondary) 45%, transparent); }
.sf-legend-dot--fat, .sf-bar--fat { background: var(--primary); }

.sf-chart-plot { position: relative; height: 200px; margin-left: 3.6rem; }

.sf-chart-grid { position: absolute; inset: 0 0 1.5rem 0; pointer-events: none; }
.sf-chart-grid span {
    position: absolute;
    left: -3.6rem;
    right: 0;
    transform: translateY(50%);
    font-size: 0.68rem;
    color: var(--text-secondary);
    border-bottom: 1px dashed color-mix(in srgb, var(--border-color) 80%, transparent);
    line-height: 0;
    padding-bottom: 0;
}

.sf-chart-bars { position: absolute; inset: 0; display: flex; gap: 2px; }

.sf-chart-col {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 6px;
    outline-offset: 0;
}

.sf-chart-pair { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 0 2px; }
.sf-bar { width: 100%; max-width: 18px; min-height: 2px; border-radius: 4px 4px 0 0; transition: height 0.3s ease; }
.sf-chart-label { height: 1.5rem; line-height: 1.5rem; text-align: center; font-size: 0.66rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; }
.sf-chart-col:hover .sf-chart-pair, .sf-chart-col:focus-visible .sf-chart-pair { background: var(--sf-muted-bg); border-radius: 6px 6px 0 0; }

.sf-chart-tip {
    position: absolute;
    bottom: calc(100% - 1rem);
    left: 50%;
    z-index: 2;
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 170px;
    padding: 0.5rem 0.65rem;
    transform: translateX(-50%);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    box-shadow: 0 6px 18px var(--shadow);
    font-size: 0.74rem;
    color: var(--text-primary);
    white-space: nowrap;
    pointer-events: none;
}

.sf-chart-col:first-child .sf-chart-tip { left: 0; transform: none; }
.sf-chart-col:last-child .sf-chart-tip { left: auto; right: 0; transform: none; }
.sf-chart-col:hover .sf-chart-tip, .sf-chart-col:focus-visible .sf-chart-tip { display: flex; }

.sf-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--sf-radius-sm); }
.sf-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.sf-table th, .sf-table td { padding: 0.6rem 0.75rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border-color); }
.sf-table th:first-child { text-align: left; }
.sf-table thead th { font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); background: var(--sf-muted-bg); }
.sf-table tbody th { font-weight: 600; color: var(--text-primary); }
.sf-table td { color: var(--text-primary); }
.sf-table tfoot th, .sf-table tfoot td { font-weight: 800; border-bottom: 0; background: var(--sf-muted-bg); }

/* ── Lista de simulações guardadas ─────────────────────────────────── */
.sf-saved { list-style: none; margin: 0; padding: 0; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--sf-radius); overflow: hidden; }
.sf-saved-item { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; }
.sf-saved-item + .sf-saved-item { border-top: 1px solid var(--border-color); }

.sf-saved-main { display: flex; align-items: center; gap: 0.85rem; flex: 1; min-width: 0; color: inherit; text-decoration: none; border-radius: 8px; }
.sf-saved-main:hover strong { color: var(--primary); }

.sf-saved-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.sf-saved-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sf-saved-info strong { color: var(--text-primary); overflow-wrap: anywhere; }
.sf-saved-info small { color: var(--text-secondary); font-size: 0.78rem; }

.sf-saved-figures { display: flex; gap: 1.25rem; margin: 0; flex-shrink: 0; }
.sf-saved-figures > div { display: flex; flex-direction: column; align-items: flex-end; }
.sf-saved-figures dt { font-size: 0.72rem; color: var(--text-secondary); font-weight: 500; }
.sf-saved-figures dd { margin: 0; font-weight: 700; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }

.sf-saved-actions { display: flex; gap: 0.15rem; flex-shrink: 0; }
.sf-action { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; text-decoration: none; }
.sf-action:disabled { opacity: 0.5; cursor: not-allowed; }
.sf-action--danger:hover:not(:disabled) { color: var(--error); background: color-mix(in srgb, var(--error) 10%, transparent); }

/* ── Telemóvel ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .sf-title { font-size: 1.35rem; }
    .sf-header > .sf-btn { width: 100%; }
    .sf-card { padding: 1rem; border-radius: var(--sf-radius-sm); }
    .sf-steps { gap: 0.25rem; }
    .sf-step-btn { flex-direction: column; gap: 0.25rem; text-align: center; }
    .sf-step-label { font-size: 0.74rem; max-width: 100%; }
    .sf-options, .sf-metrics { grid-template-columns: minmax(0, 1fr); }
    .sf-hero { padding: 1.25rem 1rem; }
    .sf-actions { flex-direction: column-reverse; align-items: stretch; }
    .sf-actions .sf-btn, .sf-actions-group { width: 100%; }
    .sf-actions-group { flex-direction: column-reverse; }
    .sf-hint--end { justify-content: flex-start; text-align: left; }
    .sf-chart-plot { height: 170px; margin-left: 3rem; }
    .sf-chart-grid span { left: -3rem; }
    .sf-chart-label { font-size: 0.6rem; }
    .sf-saved-item { flex-wrap: wrap; padding: 0.85rem 1rem; }
    .sf-saved-main { flex-basis: 100%; }
    .sf-saved-figures { flex: 1; margin-left: calc(40px + 0.85rem); }
    .sf-saved-figures > div { align-items: flex-start; }
}

@media (max-width: 400px) {
    .sf-line-fields { grid-template-columns: minmax(0, 1fr); }
    .sf-month { gap: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sf-progress-fill, .sf-bar, .sf-switch-knob, .sf-result { transition: none; }
}