[hidden] { display: none !important; }
.feature-layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.6fr); gap: 20px; align-items: start; }
.feature-layout .card { min-width: 0; }
.feature-layout h3, .analysis-card h3 { margin-bottom: 16px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-head p { margin: 6px 0; }
.section-title { font-size: 18px; font-weight: 600; }
.muted { color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.filter-btn { color: var(--text-soft); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; background: var(--paper); cursor: pointer; }
.filter-btn[aria-pressed="true"] { background: var(--gold-soft); color: var(--text); border-color: var(--gold); }
.task-list { list-style: none; margin: 0; padding: 0; }
.task-row { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.task-row:last-child { border-bottom: 0; }
.task-row input[type="checkbox"], .pretrade-item input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: var(--gold); cursor: pointer; }
.task-copy { flex: 1; min-width: 120px; overflow-wrap: anywhere; }
.task-copy small { display: block; margin-top: 5px; color: var(--text-soft); font-size: 12px; }
.task-copy small.overdue { color: var(--danger); }
.is-done .task-title { text-decoration: line-through; color: var(--text-soft); }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.finance-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 12px 0 24px; }
.eyebrow { font-size: 10px; letter-spacing: .09em; color: var(--text-soft); font-weight: 600; }
.metric { display: block; font-family: Fraunces, serif; font-size: clamp(24px, 2.4vw, 36px); margin: 12px 0 8px; overflow-wrap: anywhere; }
.currency-filter { flex-direction: row; align-items: center; gap: 12px; margin: 0; }
.currency-filter select { width: auto; }
.feature-stack { display: grid; gap: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.full-width { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea { min-width: 0; width: 100%; box-sizing: border-box; }
.pretrade-item { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.6; padding: 11px 0; }
.pretrade-item input { margin-top: 2px; }
.pattern-list { list-style: none; padding: 0; }
.pattern-list li { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 12px 0; font-size: 13px; }
.pattern-list small { color: var(--text-soft); }
.analysis-card, .trade-history { margin-top: 20px; }
.analysis-output { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; margin-top: 16px; font-size: 14px; color: var(--text-soft); }
.trade-entry { padding: 20px 0; border-top: 1px solid var(--line); margin-top: 16px; }
.trade-entry h3, .trade-entry p { overflow-wrap: anywhere; }
.trade-entry details { font-size: 12px; color: var(--text-soft); margin: 12px 0; }
.trade-entry summary { cursor: pointer; }
.snapshot-list { padding-left: 18px; line-height: 1.8; }
.trade-result { font-size: 19px; }
.positive { color: var(--green); }
.negative { color: var(--danger); }
.trade-notes { white-space: pre-wrap; font-size: 14px; line-height: 1.65; }
.pill { display: inline-block; border: 1px solid var(--line); border-radius: 4px; font: 11px Inter, sans-serif; padding: 4px 7px; margin-left: 6px; color: var(--text-soft); }
:root[data-theme="dark"] .btn.secondary { color: var(--text); border-color: var(--line); }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--paper-card); color: var(--text); }
@media (max-width: 900px) { .sidebar:not(.open) { visibility: hidden; } .sidebar.open { visibility: visible; } }
.filter-btn:focus-visible, .task-row input:focus-visible, .pretrade-item input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 1100px) { .feature-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .finance-stats { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .currency-filter { flex-wrap: wrap; } .metric { font-size: 30px; } }

/* Finanzas personales: primero la lectura en móvil, después las columnas. */
#view-finanzas .card { border-radius: 8px; }
#view-finanzas h2 { font-size: 20px; font-weight: 600; margin: 0; }
#view-finanzas .card h3 { margin: 0; }
.fin-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fin-heading .page-desc { margin-bottom: 16px; }
.fin-local { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-soft); margin: 6px 0 12px; }
.fin-local svg { width: 14px; height: 14px; }
.fin-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 0 18px; }
.fin-controls .field { margin-bottom: 0; }
.fin-controls .muted { margin: 0; max-width: 34ch; }
.fin-controls input { max-width: 210px; }
.fin-tabs { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 4px 0 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.fin-tab { display: inline-flex; align-items: center; flex-shrink: 0; gap: 7px; padding: 10px 13px; border: 1px solid transparent; border-radius: 6px; color: var(--text-soft); font: 500 13px Inter, sans-serif; background: transparent; cursor: pointer; white-space: nowrap; }
.fin-tab svg { width: 16px; height: 16px; }
.fin-tab[aria-selected="true"] { background: var(--gold-soft); color: var(--text); border-color: var(--gold); }
.fin-tab:hover { color: var(--text); }
.fin-tab:focus-visible, .fin-icon-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fin-optional { font-size: 9px; border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; color: var(--text-soft); }
.fin-summary-stats { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 18px 0; }
.fin-stat-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--text-soft); }
.fin-stat-label svg { width: 18px; height: 18px; color: var(--gold); }
.fin-stat .metric { margin: 16px 0 10px; font-size: clamp(24px, 2.2vw, 32px); }
.fin-summary-charts { display: grid; grid-template-columns: 1fr; gap: 18px; }
.fin-summary-charts > .card { min-width: 0; }
.fin-chart-wrap { position: relative; width: 100%; height: 220px; min-width: 0; }
.fin-bar-wrap { height: 250px; margin-top: 14px; }
.fin-donut-layout { display: grid; gap: 16px; margin-top: 14px; }
.fin-category-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; align-content: center; }
.fin-category-legend li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; }
.fin-category-legend li > span { display: flex; align-items: center; gap: 7px; }
.fin-category-legend strong { white-space: nowrap; font-size: 12px; font-weight: 500; }
.fin-color-dot { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.fin-chart-details { color: var(--text-soft); font-size: 12px; margin-top: 12px; }
.fin-chart-details summary { cursor: pointer; }
.fin-chart-details ul { padding-left: 18px; line-height: 1.9; }
.fin-pill { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; font-size: 11px; color: var(--text-soft); }
.fin-summary-goals { margin-top: 18px; }
.fin-empty-state { padding: 24px 8px; text-align: center; color: var(--text-soft); font-size: 13px; }
.fin-empty-state > svg { width: 28px; height: 28px; color: var(--gold); }
.fin-empty-state .btn { margin-top: 12px; }
.fin-goal-compact { padding: 20px 0; border-top: 1px solid var(--line); margin-top: 12px; }
.fin-goal-amount { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin: 16px 0 10px; }
.fin-progress { background: var(--line); height: 7px; border-radius: 20px; overflow: hidden; }
.fin-progress > span { height: 100%; display: block; background: var(--gold); border-radius: inherit; }
.fin-progress.good > span { background: var(--green); }
.fin-progress.near > span { background: var(--gold); }
.fin-progress.over > span { background: var(--danger); }
.fin-panel-head { margin: 24px 0 18px; }
.fin-panel-head > .muted { max-width: 65ch; }
.fin-panel-head .btn svg, .fin-contribution-form .btn svg, .fin-summary-goals .btn svg, .fin-debt-card .btn svg { width: 15px; height: 15px; }
.fin-record-form { margin-bottom: 18px; }
.fin-record-form h3 { padding-bottom: 18px; }
.fin-period-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.fin-period-toolbar .field { margin: 0; }
.fin-date-range { display: flex; flex-wrap: wrap; gap: 12px; }
.fin-date-range .field { flex: 1; }
.fin-period-total { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-soft); margin: 0 0 4px auto; }
.fin-period-total strong { font-size: 19px; color: var(--text); }
.fin-table-scroll { overflow-x: auto; margin-top: 18px; }
.fin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fin-table th { font-size: 11px; color: var(--text-soft); font-weight: 500; text-align: left; }
.fin-table td, .fin-table th { padding: 13px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.fin-table td:first-child, .fin-table th:first-child { padding-left: 0; }
.fin-table .number { text-align: right; white-space: nowrap; }
.fin-table td { max-width: 250px; overflow-wrap: anywhere; }
.fin-table .row-actions { flex-wrap: nowrap; }
.fin-icon-button { display: inline-flex; padding: 7px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--text-soft); cursor: pointer; }
.fin-icon-button:hover { color: var(--text); border-color: var(--gold); }
.fin-icon-button svg { width: 14px; height: 14px; }
.fin-empty { padding: 28px 14px !important; text-align: center; color: var(--text-soft); font-size: 13px; }
.fin-expense-chart { margin-top: 18px; }
.fin-error { color: var(--danger); font-size: 13px; line-height: 1.6; }
.fin-error:empty { display: none; }
.fin-budget-inputs { display: grid; grid-template-columns: 1fr; gap: 0 18px; margin-top: 20px; }
.fin-budget-status { margin-top: 18px; }
.fin-budget-key { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; margin: 16px 0; }
.good { color: var(--green); }.near { color: var(--gold); }.over { color: var(--danger); }
.fin-budget-row { padding: 16px 0; border-top: 1px solid var(--line); font-size: 13px; }
.fin-budget-row .section-head { margin-bottom: 10px; }
.fin-budget-row strong { color: var(--text); }
.fin-budget-row small { display: block; margin-top: 8px; font-size: 11px; }
.fin-debt-stats { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 18px 0; }
.fin-debt-amount { font-size: 22px; font-family: Fraunces, serif; }
.fin-debt-card h3 { margin-top: 12px !important; }
.fin-item-list { display: grid; gap: 16px; }
.fin-savings-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 13px; color: var(--text-soft); }
.fin-savings-total strong { color: var(--text); font-size: 20px; font-family: Fraunces, serif; }
.fin-contribution-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 20px; }
.fin-contribution-form .field { flex: 1 1 130px; margin-bottom: 0; min-width: 0; }
.fin-contribution-form label { display: flex; flex-direction: column; gap: 6px; }
.fin-contribution-form input { width: 100%; min-width: 0; box-sizing: border-box; }
.fin-contributions { margin-top: 16px; color: var(--text-soft); font-size: 12px; }
.fin-contributions summary { cursor: pointer; }
.fin-contributions ul { list-style: none; padding: 0; margin: 14px 0; }
.fin-contributions li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (min-width: 580px) { .fin-summary-stats, .fin-debt-stats, .fin-budget-inputs { grid-template-columns: repeat(2,minmax(0,1fr)); } .fin-donut-layout { grid-template-columns: minmax(180px,1fr) minmax(150px,1fr); align-items: center; } }
@media (min-width: 1150px) { .fin-summary-stats { grid-template-columns: repeat(4,minmax(0,1fr)); } .fin-summary-charts { grid-template-columns: 1.2fr 1fr; } .fin-summary-charts .fin-donut-layout { grid-template-columns: 1fr; } .fin-budget-inputs { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (min-width: 1500px) { .fin-summary-charts .fin-donut-layout { grid-template-columns: 1fr 1fr; } }
@media (max-width: 579px) { .fin-table { min-width: 580px; } .fin-period-toolbar > .field, .fin-date-range { width: 100%; } .fin-period-total { margin: 8px 0 0; width: 100%; } .fin-record-form .form-grid { grid-template-columns: 1fr; } }