:root {
  color-scheme: dark;
  --bg: #17130f;
  --panel: #211b15;
  --panel-2: #29221a;
  --panel-3: #332a20;
  --line: #40352a;
  --muted: #b2a18d;
  --text: #f5ede2;
  --orange: #e7a55b;
  --orange-2: #f2bd7c;
  --green: #74bc91;
  --red: #e87871;
  --radius: 16px;
  --finance-font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  --finance-text-sm: 12px;
  --finance-text-base: 14px;
  --finance-text-lg: 18px;
  --finance-text-xl: 24px;
  --finance-space-1: 4px;
  --finance-space-2: 8px;
  --finance-space-3: 12px;
  --finance-space-4: 16px;
  --finance-space-8: 32px;
  --finance-control-size: 44px;
  --finance-account-width: 288px;
  --finance-stat-height: 144px;
  --finance-table-width: 880px;
  --finance-table-height: 560px;
  --finance-reading-width: 70ch;
  --finance-border-width: 1px;
  --finance-focus-width: 2px;
  --finance-line-height: 1.5;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="Grafito"] {
  --bg: #171a1e;
  --panel: #20252a;
  --panel-2: #282e34;
  --panel-3: #343c43;
  --line: #414a52;
  --muted: #aeb8c0;
  --text: #eef1f3;
  --orange: #a9c6d2;
  --orange-2: #c5dce5;
  --green: #77cba4;
  --red: #ef8589;
}

:root[data-theme="Ámbar"] {
  --bg: #1a1209;
  --panel: #271b0e;
  --panel-2: #342411;
  --panel-3: #443019;
  --line: #5a4020;
  --muted: #c4aa87;
  --text: #fff2dc;
  --orange: #ffc36d;
  --orange-2: #ffd596;
  --green: #85c99a;
  --red: #f08078;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; }
:root[data-theme="Grafito"] body { background: #171a1e; }
:root[data-theme="Ámbar"] body { background: #1a1209; }
:root[data-theme="Grafito"] .app-shell { background: radial-gradient(ellipse at 92% 14%, rgba(169,198,210,.1), transparent 32%), var(--bg); }
:root[data-theme="Ámbar"] .app-shell { background: radial-gradient(ellipse at 92% 14%, rgba(255,195,109,.14), transparent 32%), var(--bg); }
:root[data-theme="Grafito"] .sidebar { background: #15191d; border-color: #30373d; }
:root[data-theme="Ámbar"] .sidebar { background: #160f08; border-color: #392714; }
:root[data-theme="Grafito"] .topbar { background: rgba(23,26,30,.94); border-color: #30373d; }
:root[data-theme="Ámbar"] .topbar { background: rgba(26,18,9,.94); border-color: #392714; }
:root[data-theme="Grafito"] .card,
:root[data-theme="Grafito"] .card.soft,
:root[data-theme="Grafito"] .tab-row,
:root[data-theme="Grafito"] .action-tile,
:root[data-theme="Grafito"] .local-note { background: #20252a; border-color: #414a52; }
:root[data-theme="Ámbar"] .card,
:root[data-theme="Ámbar"] .card.soft,
:root[data-theme="Ámbar"] .tab-row,
:root[data-theme="Ámbar"] .action-tile,
:root[data-theme="Ámbar"] .local-note { background: #271b0e; border-color: #5a4020; }
:root[data-theme="Grafito"] .button { background: #292f35; border-color: #414a52; color: #eef1f3; }
:root[data-theme="Ámbar"] .button { background: #342411; border-color: #5a4020; color: #fff2dc; }
:root[data-theme="Grafito"] .button.primary { background: #a9c6d2; border-color: #a9c6d2; color: #162025; }
:root[data-theme="Ámbar"] .button.primary { background: #ffc36d; border-color: #ffc36d; color: #281807; }
:root[data-theme="Grafito"] .nav-item { color: #bac4cb; }
:root[data-theme="Ámbar"] .nav-item { color: #d0b48e; }
:root[data-theme="Grafito"] .nav-item:hover,
:root[data-theme="Grafito"] .nav-item.active { background: #293239; border-color: #52626b; color: #eef1f3; }
:root[data-theme="Ámbar"] .nav-item:hover,
:root[data-theme="Ámbar"] .nav-item.active { background: #392714; border-color: #71512b; color: #fff2dc; }
:root[data-theme="Grafito"] input,
:root[data-theme="Grafito"] select,
:root[data-theme="Grafito"] textarea { color: #eef1f3; background-color: #1b2024; border-color: #414a52; }
:root[data-theme="Ámbar"] input,
:root[data-theme="Ámbar"] select,
:root[data-theme="Ámbar"] textarea { color: #fff2dc; background-color: #201509; border-color: #5a4020; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: flex; background: radial-gradient(ellipse at 92% 14%, rgba(231,165,91,.11), transparent 32%), var(--bg); }
.sidebar { width: 254px; flex: 0 0 254px; min-height: 100vh; background: #17120e; border-right: 1px solid #30251b; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 10; transition: width .18s, flex-basis .18s; }
.brand-row { height: 64px; border-bottom: 1px solid #30251b; display: flex; align-items: center; padding: 0 14px; gap: 10px; }
.brand-row > strong { font-size: 14px; white-space: nowrap; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: #e2d5c4; border: 1px solid var(--line); background: #211a14; border-radius: 11px; cursor: pointer; }
.icon-button:hover { color: #fff7ec; border-color: #8a6843; background: #302318; }
.sidebar-toggle { margin-left: auto; width: 28px; height: 28px; border: 0; background: transparent; color: #ad9a84; }
.side-nav { padding: 14px 10px; overflow: auto; flex: 1; }
.nav-group { display: grid; gap: 3px; margin-bottom: 13px; }
.nav-label { padding: 11px 12px 6px; color: #a3937f; font-size: 10px; font-weight: 800; letter-spacing: 1.15px; }
.nav-label.admin-label { color: #9b7150; }
.nav-item { min-height: 39px; display: flex; align-items: center; gap: 11px; width: 100%; border: 1px solid transparent; background: transparent; padding: 7px 11px; text-align: left; border-radius: 10px; color: #c2b09a; cursor: pointer; transition: .15s; }
.nav-item:hover { background: #282017; color: #fff7ec; }
.nav-item.active { background: linear-gradient(90deg, rgba(231,165,91,.2), rgba(231,165,91,.07)); border-color: rgba(231,165,91,.3); color: #fff7ec; }
.nav-item.active .nav-icon { color: var(--orange); }
.nav-item small { margin-left: auto; color: #c0ad97; font-size: 9px; background: #382d22; border-radius: 8px; padding: 3px 5px; }
.nav-item.disabled { cursor: default; opacity: .68; }
.nav-icon { width: 19px; color: #ad9a84; font-size: 17px; text-align: center; }
.sidebar-bottom { padding: 12px; border-top: 1px solid #202225; }
.local-note { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid #392d21; border-radius: 12px; background: #211a14; }
.local-note b, .local-note small { display: block; }
.local-note b { font-size: 11px; }
.local-note small { font-size: 10px; color: var(--muted); margin-top: 3px; }
.status-dot, .local-pill i { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 8px rgba(67,202,138,.5); }
.sidebar-foot { color: #9e8e7a; font-size: 10px; padding: 13px 4px 0; text-align: center; }
.main-area { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.topbar { height: 64px; flex: 0 0 64px; position: sticky; top: 0; z-index: 8; background: rgba(23,19,15,.94); backdrop-filter: blur(15px); border-bottom: 1px solid #382c21; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.topbar h1 { margin: 0; font-size: 18px; letter-spacing: -.2px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.local-pill { border: 1px solid #40503f; background: #1b2119; color: #c0d5bd; font-size: 10px; font-weight: 700; padding: 7px 10px; border-radius: 20px; display: inline-flex; gap: 7px; align-items: center; letter-spacing: .4px; }
.local-pill i { display: inline-block; }
.mobile-brand { display: none; align-items: center; gap: 8px; font-size: 13px; }
.content-area { padding: 24px; flex: 1; max-width: 1680px; width: 100%; margin: 0 auto; }
.app-footer { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #382c21; padding: 14px 24px; color: #9e8e7a; font-size: 10px; }
.button { border: 1px solid var(--line); background: #282119; border-radius: 10px; padding: 9px 13px; color: #f0e5d7; cursor: pointer; transition: .15s; font-weight: 650; white-space: nowrap; }
.button:hover { border-color: #80613d; background: #34281c; }
.button.primary { border-color: var(--orange); background: var(--orange); color: #26180b; font-weight: 800; }
.button.primary:hover { background: #f0b36b; }
.button.subtle { background: transparent; }
.button.danger { color: #ff9a9d; border-color: rgba(239,109,114,.28); }
.button.small { padding: 6px 9px; font-size: 11px; }
.button:disabled { cursor: not-allowed; opacity: .5; }
.page-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-intro h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.6px; }
.page-intro p { margin: 0; color: var(--muted); line-height: 1.55; max-width: 760px; }
.eyebrow { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: 1.15px; text-transform: uppercase; margin-bottom: 7px; }
.grid { display: grid; gap: 14px; }
.grid.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: linear-gradient(145deg, #282017, #201912); border: 1px solid #3a2f24; border-radius: var(--radius); padding: 17px; min-width: 0; box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.card.soft { background: #211a14; box-shadow: none; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.card-header h3 { margin: 0; font-size: 14px; }
.card-header p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.stat-card { position: relative; min-height: 112px; }
.stat-card .label { color: #c0ad97; font-size: 10px; font-weight: 750; letter-spacing: .65px; text-transform: uppercase; }
.stat-card .value { margin-top: 11px; font-size: 25px; font-weight: 780; letter-spacing: -.7px; }
.stat-card .hint { color: #a3937f; font-size: 10px; margin-top: 4px; }
.stat-icon { position: absolute; right: 16px; top: 15px; color: var(--orange); opacity: .85; font-size: 18px; }
.accent { color: var(--orange); }
.positive { color: var(--green); }
.negative { color: var(--red); }
.muted { color: var(--muted); }
.mini-chart { display: flex; align-items: flex-end; height: 120px; gap: 9px; padding: 8px 2px 0; border-bottom: 1px solid #3c3024; }
.mini-bar-wrap { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.mini-bar { min-height: 3px; width: min(34px, 72%); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #f2bd7c, #a96128); }
.mini-bar.loss { background: linear-gradient(180deg, #ef777c, #862e34); }
.mini-bar-labels { display: flex; justify-content: space-between; padding: 7px 3px 0; color: #a3937f; font-size: 9px; }
.action-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.action-tile { min-height: 82px; text-align: left; border: 1px solid #3a3026; background: #241d16; border-radius: 13px; padding: 13px; cursor: pointer; }
.action-tile:hover { border-color: rgba(231,165,91,.48); background: #302319; }
.action-tile b, .action-tile span { display: block; }
.action-tile b { margin-bottom: 6px; font-size: 12px; }
.action-tile span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.section-gap { margin-top: 16px; }
.tab-row { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px; background: #201912; border: 1px solid #3a3026; border-radius: 12px; width: max-content; max-width: 100%; margin-bottom: 16px; }
.tab-button { border: 0; background: transparent; color: #c1b09b; padding: 8px 12px; border-radius: 9px; cursor: pointer; font-weight: 650; font-size: 11px; }
.tab-button.active { color: #fff7ec; background: #3a2d20; box-shadow: inset 0 0 0 1px #57422c; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.toolbar-left, .toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.period-row { display: flex; gap: 3px; padding: 3px; background: #211a14; border: 1px solid #3a3026; border-radius: 10px; }
.period-row button { border: 0; background: transparent; color: #b2a18d; border-radius: 7px; padding: 6px 9px; font-size: 10px; cursor: pointer; }
.period-row button.active { background: #3a2d20; color: #fff7ec; }
.calendar-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .75fr); gap: 14px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 6px; }
.calendar-weekday { text-align: center; color: #a3937f; font-size: 9px; font-weight: 750; padding: 7px 0; }
.calendar-day { min-height: 73px; background: #211a14; border: 1px solid #3a3026; border-radius: 10px; padding: 8px; cursor: pointer; text-align: left; }
.calendar-day:hover { border-color: #8a6843; }
.calendar-day.selected { border-color: var(--orange); box-shadow: inset 0 0 0 1px rgba(231,165,91,.36); background: #322419; }
.calendar-day.outside { opacity: .35; }
.calendar-day .day-number { font-size: 10px; color: #e0d3c2; }
.calendar-day .day-pnl { display: block; margin-top: 13px; font-size: 10px; font-weight: 750; }
.day-mark { width: 5px; height: 5px; border-radius: 50%; background: #786b5b; float: right; margin-top: 3px; }
.calendar-day.win .day-mark { background: var(--green); }
.calendar-day.loss .day-mark { background: var(--red); }
.calendar-detail { min-height: 225px; }
.detail-big { font-size: 24px; font-weight: 800; margin: 8px 0 3px; }
.detail-list { display: grid; gap: 9px; margin-top: 15px; }
.detail-row { display: flex; justify-content: space-between; gap: 10px; color: #c4b29c; font-size: 11px; padding-bottom: 8px; border-bottom: 1px solid #3a3026; }
.detail-row b { color: #f0e5d7; text-align: right; }
.table-wrap { overflow-x: auto; border: 1px solid #3a3026; border-radius: 12px; }
table { border-collapse: collapse; width: 100%; min-width: 540px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #342a20; font-size: 11px; }
th { color: #ad9a84; font-size: 9px; letter-spacing: .7px; text-transform: uppercase; background: #241d16; }
td { color: #e6dac9; }
tr:last-child td { border-bottom: 0; }
.row-actions { display: flex; gap: 5px; }
.link-button { border: 0; background: transparent; color: var(--orange-2); padding: 3px 5px; cursor: pointer; font-size: 10px; }
.empty-state { padding: 28px 18px; border: 1px dashed #54412d; border-radius: 13px; text-align: center; color: #c0af9a; background: rgba(35,27,19,.72); }
.empty-state .empty-symbol { color: var(--orange); font-size: 24px; margin-bottom: 9px; }
.empty-state b { display: block; color: #e5e7e8; margin-bottom: 5px; }
.empty-state p { max-width: 470px; margin: 0 auto 14px; font-size: 11px; line-height: 1.55; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 10px; color: #c0ad97; font-weight: 700; }
.field input, .field select, .field textarea, .search-input { width: 100%; background: #19140f; border: 1px solid #4a3b2b; color: #f5ede2; border-radius: 9px; padding: 10px 11px; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus, .search-input:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(231,165,91,.18); }
.field textarea { min-height: 90px; resize: vertical; }
.field-help { font-size: 9px; color: #a3937f; }
.field input[type="checkbox"] { width: auto; accent-color: var(--orange); }
.check-line { display: flex; align-items: center; gap: 8px; }
.field-stack { display: grid; gap: 8px; }
.field-label { font-size: 10px; color: #c0ad97; font-weight: 700; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 11px; border: 1px solid #4a3b2b; border-radius: 10px; background: #19140f; }
.check-grid .check-line { color: #d4c5b2; font-size: 10px; }
.program-preview { grid-column: 1 / -1; padding: 12px; border-radius: 11px; border: 1px solid rgba(231,165,91,.3); background: rgba(231,165,91,.07); color: #d4c5b2; font-size: 10px; line-height: 1.5; }
.program-preview .eyebrow { margin-bottom: 8px; color: #f0c58f; }
.program-preview p { margin: 9px 0 4px; }
.program-preview small { color: #a3937f; }
.catalog-subnav { margin-top: 13px; width: max-content; }
.catalog-programs { font-size: 9px !important; color: #e1c9aa !important; }
.program-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.program-card { display: flex; flex-direction: column; min-height: 315px; }
.program-card h3 { margin: 11px 0; }
.program-card p { color: #c0ad97; font-size: 10px; line-height: 1.55; }
.program-card .program-rules { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 12px; margin: 12px 0; }
.program-card .detail-row { font-size: 9px; padding-bottom: 5px; }
.program-card .card-actions { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.program-assets { display: grid; gap: 4px; padding: 9px 0; color: #c0ad97; font-size: 9px; }
.program-assets b { color: #f0c58f; }
.instrument-guide { margin-bottom: 14px; }
.instrument-guide p { color: #c0ad97; font-size: 10px; line-height: 1.55; margin: 6px 0 0; }
.button-pair { display: flex; gap: 6px; }
.modal-backdrop { position: fixed; z-index: 50; inset: 0; background: rgba(0,0,0,.68); display: grid; place-items: center; padding: 18px; backdrop-filter: blur(4px); }
.modal { width: min(670px, 100%); max-height: min(90vh, 840px); overflow: auto; border: 1px solid #57432c; border-radius: 17px; background: #241c14; box-shadow: 0 24px 90px rgba(0,0,0,.6); }
.modal-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 18px 20px; background: rgba(36,28,20,.97); border-bottom: 1px solid #403226; }
.modal-header h2 { font-size: 15px; margin: 0; }
.modal-header p { color: var(--muted); font-size: 10px; margin: 6px 0 0; }
.modal-body { padding: 19px 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; }
.toast-root { position: fixed; z-index: 80; right: 18px; bottom: 18px; display: grid; gap: 8px; }
.toast { border: 1px solid #385141; background: #17221c; color: #d7f3e3; padding: 11px 14px; border-radius: 11px; box-shadow: 0 8px 28px rgba(0,0,0,.3); font-size: 11px; }
.notice-banner { border: 1px solid rgba(231,165,91,.3); background: linear-gradient(100deg, rgba(231,165,91,.13), rgba(231,165,91,.035)); border-radius: 14px; padding: 15px 17px; margin-bottom: 15px; color: #e2d4c2; font-size: 11px; line-height: 1.55; }
.notice-banner b { color: #fff; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.catalog-card { min-height: 180px; display: flex; flex-direction: column; }
.catalog-card h3 { margin: 2px 0 8px; }
.catalog-card p { color: #c0ad97; font-size: 11px; line-height: 1.5; margin: 0 0 12px; }
.catalog-card .card-actions { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.badge { display: inline-flex; padding: 5px 8px; border-radius: 14px; background: #382d22; color: #d3c1ab; font-size: 9px; font-weight: 750; }
.badge.orange { color: #f5c78f; background: rgba(231,165,91,.16); }
.badge.green { color: #9fe0bb; background: rgba(67,202,138,.12); }
.split-line { display: flex; flex-wrap: wrap; gap: 7px; }
.metric-line { display: flex; align-items: baseline; gap: 7px; margin: 10px 0; }
.metric-line b { font-size: 22px; }
.metric-line span { color: var(--muted); font-size: 10px; }
.admin-tabs { margin-top: 14px; }
.chart-panel { min-height: 320px; position: relative; }
.chart-canvas { display: block; width: 100%; height: 290px; border-radius: 10px; background: #1b1510; }
.chart-disclaimer { margin-top: 9px; color: #ad9a84; font-size: 10px; line-height: 1.5; }
.sim-inputs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.sim-inputs .field input { padding: 8px 9px; }
.sim-result { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 14px; }
.sim-result .card { padding: 13px; }
.sim-result b { display: block; margin-top: 7px; font-size: 17px; }
.sim-result small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.split-card { display: flex; gap: 12px; align-items: flex-start; }
.split-card .avatar { width: 37px; height: 37px; border-radius: 11px; display: grid; place-items: center; color: #f5d4ad; background: #49321e; font-weight: 800; }
.split-card h3 { margin: 0 0 4px; font-size: 13px; }
.split-card p { margin: 0; color: #b4a18a; font-size: 10px; line-height: 1.45; }
.search-input { width: min(300px, 100%); }
.catalog-filter { max-width: 190px; padding: 9px 10px; border: 1px solid #4a3b2b; border-radius: 9px; background: #19140f; color: #f5ede2; font-size: 10px; }
.notice-card { border: 1px solid #3c3024; border-radius: 14px; overflow: hidden; background: #241d16; margin-bottom: 11px; }
.notice-card .notice-head { display: flex; gap: 8px; align-items: center; padding: 11px 14px; color: #bba992; font-size: 9px; border-bottom: 1px solid #382c21; }
.notice-card .notice-body { padding: 14px; }
.notice-card h3 { margin: 0 0 7px; }
.notice-card p { color: #c0ad97; font-size: 11px; line-height: 1.55; margin: 0; white-space: pre-line; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; border-bottom: 1px solid #3a3026; padding: 13px 0; }
.setting-row:last-child { border-bottom: 0; }
.setting-row b, .setting-row small { display: block; }
.setting-row small { color: var(--muted); margin-top: 4px; font-size: 10px; }
.sidebar.collapsed { width: 76px; flex-basis: 76px; }
.sidebar.collapsed .brand-row > strong, .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-item span:not(.nav-icon), .sidebar.collapsed .nav-item small, .sidebar.collapsed .local-note div, .sidebar.collapsed .sidebar-foot { display: none; }
.sidebar.collapsed .brand-row { justify-content: center; padding: 0; }
.sidebar.collapsed .sidebar-toggle { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 8px 4px; }
.sidebar.collapsed .nav-icon { font-size: 18px; }
.sidebar.collapsed .local-note { justify-content: center; padding: 10px 4px; }

@media (max-width: 1100px) {
  .grid.stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .calendar-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sidebar { width: 67px; flex-basis: 67px; }
  .sidebar .brand-row > strong, .sidebar .nav-label, .sidebar .nav-item span:not(.nav-icon), .sidebar .nav-item small, .sidebar .local-note div, .sidebar .sidebar-foot { display: none; }
  .sidebar .brand-row { justify-content: center; padding: 0; }
  .sidebar .sidebar-toggle { display: none; }
  .sidebar .nav-item { justify-content: center; padding: 8px 4px; }
  .sidebar .nav-icon { font-size: 18px; }
  .sidebar .local-note { justify-content: center; padding: 10px 4px; }
  .side-nav { padding: 12px 6px; }
  .nav-group { margin-bottom: 8px; }
  .nav-item { min-height: 39px; }
  .topbar { padding: 0 12px; }
  .topbar h1 { display: none; }
  .mobile-brand { display: flex; }
  .content-area { padding: 16px 12px; }
  .local-pill { display: none; }
  .notification-button { display: none; }
  .app-footer { padding: 12px; flex-direction: column; }
  .grid.stats { gap: 9px; }
  .stat-card { min-height: 98px; padding: 13px; }
  .stat-card .value { font-size: 21px; }
  .grid.two, .grid.three, .catalog-grid { grid-template-columns: 1fr; }
  .action-grid { grid-template-columns: repeat(2,1fr); }
  .page-intro { flex-direction: column; }
  .calendar-day { min-height: 56px; padding: 6px; }
  .calendar-day .day-pnl { font-size: 9px; margin-top: 9px; }
  .sim-inputs { grid-template-columns: repeat(2,1fr); }
  .sim-result { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .check-grid, .program-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .toolbar { align-items: flex-start; }
}

.chart-control-label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.chart-control-label select { min-height: 32px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--panel-2); }
:root[data-theme="Grafito"] .field input,
:root[data-theme="Grafito"] .field select,
:root[data-theme="Grafito"] .field textarea,
:root[data-theme="Grafito"] .setting-row select,
:root[data-theme="Grafito"] .search-input,
:root[data-theme="Grafito"] .catalog-filter { color: #eef1f3; background-color: #1b2024; border-color: #414a52; }
:root[data-theme="Ámbar"] .field input,
:root[data-theme="Ámbar"] .field select,
:root[data-theme="Ámbar"] .field textarea,
:root[data-theme="Ámbar"] .setting-row select,
:root[data-theme="Ámbar"] .search-input,
:root[data-theme="Ámbar"] .catalog-filter { color: #fff2dc; background-color: #201509; border-color: #5a4020; }

/* Gastos y payouts: presentation only; shared shell and other modules keep their styles. */
.finance-screen { min-width: 0; font-size: var(--finance-text-base); line-height: var(--finance-line-height); }
.finance-screen .finance-controls { align-items: flex-end; gap: var(--finance-space-4); margin-bottom: var(--finance-space-4); }
.finance-screen .finance-filters { flex: 1 1 auto; align-items: flex-end; gap: var(--finance-space-4); min-width: 0; }
.finance-screen .field { gap: var(--finance-space-2); max-width: 100%; }
.finance-screen .field label,
.finance-screen .finance-field-label { color: var(--muted); font-size: var(--finance-text-base); font-weight: 500; }
.finance-screen .finance-account-filter { flex: 0 1 var(--finance-account-width); width: var(--finance-account-width); }
.finance-screen .field select.search-input { width: 100%; min-height: var(--finance-control-size); padding: var(--finance-space-2) var(--finance-space-3); border-color: var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); font-size: var(--finance-text-base); font-weight: 400; box-shadow: none; }
.finance-screen .period-row { flex-wrap: wrap; max-width: 100%; gap: var(--finance-space-1); padding: var(--finance-space-1); border-color: var(--line); border-radius: var(--radius); background: var(--panel); }
.finance-screen .period-row button { flex: 1 0 var(--finance-control-size); min-width: var(--finance-control-size); min-height: var(--finance-control-size); padding: var(--finance-space-2); border-radius: var(--radius); color: var(--muted); font-size: var(--finance-text-base); font-weight: 500; }
.finance-screen .period-row button:hover { background: var(--panel-2); color: var(--text); }
.finance-screen .period-row button.active { background: var(--panel-3); color: var(--text); }
.finance-screen .finance-entry-actions { gap: var(--finance-space-2); }
.finance-screen .button.button { min-height: var(--finance-control-size); padding: var(--finance-space-2) var(--finance-space-4); border-color: var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--text); font-size: var(--finance-text-base); font-weight: 500; transition: none; }
.finance-screen .button.button:hover { border-color: var(--orange); background: var(--panel-3); }
.finance-screen :is(button, select, .table-wrap):focus-visible { outline: var(--finance-focus-width) solid var(--orange); outline-offset: var(--finance-space-1); box-shadow: none; }
.finance-screen .notice-banner { margin-bottom: var(--finance-space-4); padding: var(--finance-space-4); border-color: var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--text); font-size: var(--finance-text-base); line-height: var(--finance-line-height); }
.finance-screen .notice-banner p { max-width: var(--finance-reading-width); margin: 0; }
.finance-screen .finance-notice-actions { display: flex; flex-wrap: wrap; gap: var(--finance-space-2); margin-top: var(--finance-space-2); }
.finance-screen .grid.stats { gap: var(--finance-space-4); }
.finance-screen .card.stat-card,
.finance-screen .card.finance-ledger { padding: var(--finance-space-4); border-color: var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: none; }
.finance-screen .card.stat-card { min-height: var(--finance-stat-height); }
.finance-screen .stat-icon { display: none; }
.finance-screen .stat-card .label { color: var(--muted); font-size: var(--finance-text-base); font-weight: 500; letter-spacing: normal; text-transform: none; }
.finance-screen .stat-card .value { margin-top: var(--finance-space-3); font-family: var(--finance-font-mono); font-size: var(--finance-text-xl); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; text-align: right; overflow-wrap: anywhere; }
.finance-screen .stat-card .hint { margin-top: var(--finance-space-3); color: var(--muted); font-size: var(--finance-text-sm); font-weight: 400; font-variant-numeric: tabular-nums; line-height: var(--finance-line-height); }
.finance-screen .finance-ledger { margin-top: var(--finance-space-4); }
.finance-screen .card-header { gap: var(--finance-space-3); margin-bottom: var(--finance-space-4); }
.finance-screen .card-header h3 { font-size: var(--finance-text-lg); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.finance-screen .card-header p { margin-top: var(--finance-space-2); color: var(--muted); font-size: var(--finance-text-base); line-height: var(--finance-line-height); }
.finance-screen .table-wrap { max-height: var(--finance-table-height); overflow: auto; border-color: var(--line); border-radius: var(--radius); }
.finance-screen table { min-width: var(--finance-table-width); background: var(--panel); }
.finance-screen th,
.finance-screen td { padding: var(--finance-space-2) var(--finance-space-3); border-bottom: var(--finance-border-width) solid var(--line); color: var(--text); font-size: var(--finance-text-base); font-weight: 400; line-height: var(--finance-line-height); vertical-align: middle; }
.finance-screen th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); color: var(--muted); font-size: var(--finance-text-sm); font-weight: 500; letter-spacing: normal; text-transform: none; }
.finance-screen tbody tr:hover { background: var(--panel-2); }
.finance-screen tbody tr:last-child td { border-bottom: 0; }
.finance-screen td small { color: var(--muted); font-size: var(--finance-text-sm); font-weight: 400; }
.finance-screen .finance-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.finance-screen .finance-amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.finance-screen td.finance-amount { font-family: var(--finance-font-mono); font-weight: 500; }
.finance-screen .positive { color: var(--green); }
.finance-screen .negative { color: var(--red); }
.finance-screen .finance-kind { padding: var(--finance-space-1) var(--finance-space-2); border: var(--finance-border-width) solid var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--text); font-size: var(--finance-text-sm); font-weight: 500; white-space: nowrap; }
.finance-screen .row-actions { display: flex; align-items: center; gap: var(--finance-space-1); white-space: nowrap; }
.finance-screen .link-button { min-width: var(--finance-control-size); min-height: var(--finance-control-size); padding: var(--finance-space-2); border-radius: var(--radius); color: var(--orange-2); font-size: var(--finance-text-sm); font-weight: 500; }
.finance-screen .link-button:hover { background: var(--panel-3); }
.finance-screen .finance-empty { padding: var(--finance-space-8); border-color: var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--muted); }
.finance-screen .finance-empty b { margin-bottom: var(--finance-space-2); color: var(--text); font-size: var(--finance-text-lg); font-weight: 600; }
.finance-screen .finance-empty p { max-width: var(--finance-reading-width); margin-bottom: var(--finance-space-4); font-size: var(--finance-text-base); line-height: var(--finance-line-height); }
.finance-screen .finance-sr-only { position: absolute; width: var(--finance-border-width); height: var(--finance-border-width); padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 760px) {
  .finance-screen .finance-filters { width: 100%; }
  .finance-screen .finance-account-filter { flex: 1 1 var(--finance-account-width); }
  .finance-screen .finance-entry-actions { width: 100%; }
  .finance-screen .finance-entry-actions .button { flex: 1; }
  .finance-screen .grid.stats { grid-template-columns: minmax(0, 1fr); }
  .finance-screen .card.stat-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--finance-space-2); min-height: 0; }
  .finance-screen .stat-card .value { margin: 0; font-size: var(--finance-text-lg); }
  .finance-screen .stat-card .hint { grid-column: 1 / -1; margin-top: 0; }
}