/* =========================================================
   Cartera — sistema visual "extracto de banca privada"
   Papel hueso, tinta azul-noche, latón como único acento.
   Los estados y las series de datos viven en tokens para que
   ambos temas y las gráficas se pinten desde el mismo sitio.
   ========================================================= */
:root {
    /* Superficies */
    --paper:#f1efe9;          /* fondo de la app: papel hueso */
    --surface:#ffffff;        /* paneles, tarjetas y modales */
    --surface-alt:#e9e6dd;    /* relleno suave sobre papel */
    --surface-soft:#faf9f5;   /* cabeceras de tabla */
    --white:#ffffff;
    --row-line:#edeae3;
    --line:#dcd7cc;           /* filete cálido de 1px */
    /* Tinta */
    --ink:#16202e;
    --muted:#6c6a62;
    --nav:#6c6a62;
    /* Riel lateral: siempre en tinta, en los dos temas */
    --rail:#16202e;
    --rail-text:#e9e5db;
    --rail-muted:#9faab8;
    --rail-line:rgba(255,255,255,.12);
    /* Acento: latón */
    --brass:#9a7b3f;
    --brass-ink:#141c28;      /* texto y trazos sobre latón */
    --brass-tint:rgba(154,123,63,.14);
    /* Estados */
    --ok:#3e6b4f;        --ok-bg:rgba(62,107,79,.12);   --ok-on-ink:#9fd9a6;
    --warn:#96711c;      --warn-bg:rgba(150,113,28,.14);
    --danger:#a5402c;    --danger-bg:rgba(165,64,44,.12); --danger-glow:rgba(165,64,44,.45);
    /* Texto sobre la tarjeta invertida (.stat.primary): en claro es tinta,
       en oscuro es marfil, así que estos tres dan la vuelta con ella */
    --primary-fg-muted:#9faab8;
    --primary-fg-danger:#e9a294;
    --primary-fg-ok:#9fd9a6;
    /* Series de datos (barras, donas, áreas) */
    --chart-a:#2c4763;
    --chart-b:#9a7b3f;
    --chart-c:#7d8b99;
    --chart-d:#8c4a3c;
    /* Elevación: sólo overlays (modal, panel de avisos, guía) */
    --shadow:0 24px 60px rgba(22,32,46,.22);
    --shadow-sm:0 1px 2px rgba(22,32,46,.06);
    --focus:#9a7b3f;
    --scroll-thumb:rgba(108,106,98,.35);
    --scroll-thumb-hover:rgba(108,106,98,.6);
    --radius:6px;
    --radius-lg:8px;
    --radius-md:6px;
    --radius-sm:5px;
    --radius-xs:4px;
    --transition:150ms ease;
}
body.dark {
    --paper:#0e1621;
    --surface:#141e2b;
    --surface-alt:#1a2634;
    --surface-soft:#111a25;
    --white:#141e2b;
    --row-line:#1f2b39;
    --line:#2a3849;
    --ink:#e9e5db;
    --muted:#98a2b0;
    --nav:#98a2b0;
    --rail:#0a111a;
    --rail-text:#e9e5db;
    --rail-muted:#93a0af;
    --rail-line:rgba(255,255,255,.10);
    --brass:#c8a45c;
    --brass-ink:#101927;
    --brass-tint:rgba(200,164,92,.16);
    --ok:#8fc7a0;      --ok-bg:rgba(143,199,160,.14);   --ok-on-ink:#9fd9a6;
    --warn:#e0b65c;    --warn-bg:rgba(224,182,92,.14);
    --danger:#e4897a;  --danger-bg:rgba(228,137,122,.14); --danger-glow:rgba(228,137,122,.4);
    --primary-fg-muted:#5c5a53;
    --primary-fg-danger:#a5402c;
    --primary-fg-ok:#3e6b4f;
    --chart-a:#6e93bc;
    --chart-b:#c8a45c;
    --chart-c:#9ba8b4;
    --chart-d:#c48071;
    --shadow:0 24px 60px rgba(0,0,0,.55);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --focus:#c8a45c;
    --scroll-thumb:rgba(152,162,176,.3);
    --scroll-thumb-hover:rgba(152,162,176,.5);
    background:#0e1621 !important;
    color:var(--ink);
}
body.dark aside { background:var(--rail); border-color:var(--rail-line); }
body.dark .panel,
body.dark .stat,
body.dark .btn-light,
body.dark .month-select,
body.dark .filter-total,
body.dark .modal,
body.dark .auth-card,
body.dark .simulator-report,
body.dark .milestones {
    background:var(--surface);
    border-color:var(--line);
}
/* La tarjeta principal se invierte en ambos temas: en oscuro es marfil sobre tinta */
body.dark .stat.primary { background:var(--ink); color:var(--paper); border-color:var(--ink); }
body.dark .btn-light { color:var(--ink); }
body.dark .brand-mark rect { fill:var(--brass); }
body.dark .brand-mark path { stroke:var(--brass-ink); }
body.dark .auth-screen { background:var(--paper); }
body.dark .modal-backdrop { background:rgba(6,10,16,.72); }
body.dark .table-wrap table,
body.dark .filter-total,
body.dark .month-select,
body.dark .category,
body.dark .report-line { border-color:var(--line); }
* { box-sizing:border-box; }
/* Scrollbars estilizados: tablas, paneles, modales y la propia página. */
* { scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-corner { background:transparent; }
*::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border:3px solid transparent; border-radius:999px; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--scroll-thumb-hover); background-clip:padding-box; }
html:has(body.dark) { --scroll-thumb:rgba(223,236,224,.3); --scroll-thumb-hover:rgba(223,236,224,.55); }
html { -webkit-text-size-adjust:100%; }
img { max-width:100%; height:auto; }
button, input, select, textarea { font:inherit; }
input, select, textarea {
    width:100%; min-height:44px; border:1px solid var(--line); background:var(--surface); border-radius:6px; color:var(--ink); padding:10px 12px; transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
input[type="checkbox"], input[type="radio"] {
    width:16px; min-width:16px; min-height:16px; height:16px; margin:0; accent-color:var(--brass); vertical-align:middle;
}
.row-select {
    width:16px; min-width:16px; height:16px; min-height:16px; margin:0; accent-color:var(--brass);
}
select option { background:var(--surface); color:var(--ink); }
input:hover, select:hover, textarea:hover { border-color:var(--muted); }
input:focus, select:focus, textarea:focus { border-color:var(--ink); box-shadow:0 0 0 3px var(--brass-tint); outline:none; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'IBM Plex Sans',system-ui,sans-serif; transition:background .25s,color .25s; overflow-x:hidden; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline:2px solid var(--brass); outline-offset:2px; border-radius:4px; }
button { cursor:pointer; border:0; color:inherit; }
.app { display:grid; grid-template-columns:minmax(0,1fr); min-height:100vh; }
aside {
    min-width:0;
    padding:14px 16px 12px;
    background:var(--rail);
    border-bottom:1px solid var(--rail-line);
    display:flex;
    flex-direction:column;
    gap:12px;
    transition:background .25s;
    color:var(--rail-text);
}
body.dark aside {
    background:var(--rail);
}
.brand { display:flex; align-items:center; gap:10px; font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:21px; letter-spacing:-.01em; margin:0; color:inherit; }
.nav-toggle { display:inline-grid; place-items:center; flex:none; width:44px; height:44px; margin-left:auto; padding:0; border:1px solid var(--rail-line); border-radius:6px; background:rgba(255,255,255,.07); color:var(--rail-text); line-height:1; transition:background .2s, transform .12s; }
.nav-toggle:hover { background:rgba(255,255,255,.13); }
.nav-toggle:active { transform:scale(.94); }
.nav-toggle svg { display:block; }
.brand-mark { width:30px; height:30px; display:grid; place-items:center; overflow:hidden; border-radius:7px; background:transparent; color:inherit; line-height:0; flex:none; }
.brand-mark svg { display:block; width:100%; height:100%; }
.brand-mark rect { fill:var(--brass); }
.brand-mark path { fill:none; stroke:var(--brass-ink); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.brand-mark path:nth-of-type(2) { stroke-width:5.5; }
.brand-mark path.accent { stroke:var(--brass-ink); stroke-opacity:.45; stroke-width:3; }
.nav-label { display:none; color:var(--rail-muted); font-size:12px; font-weight:500; margin:0 12px 6px; }
nav { display:none; gap:4px; min-width:0; }
aside.nav-open nav { display:grid; }
nav button {
    width:100%;
    min-height:44px;
    white-space:nowrap;
    color:var(--rail-muted);
    background:transparent;
    text-align:left;
    border:1px solid transparent;
    border-radius:6px;
    padding:11px 12px;
    font-size:14px;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:11px;
    transition:border-color var(--transition), background var(--transition), color var(--transition);
}
nav button.active, nav button:hover {
    color:var(--rail-text);
    background:rgba(255,255,255,.07);
    border-color:transparent;
    box-shadow:none;
}
nav button.active {
    position:relative;
    font-weight:600;
}
nav button.active::before {
    content:'';
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:2px;
    border-radius:2px;
    background:var(--brass);
}
.nav-icon { display:inline-flex; align-items:center; justify-content:center; width:18px; flex:none; color:inherit; }
.nav-icon svg { display:block; width:18px; height:18px; }
.profile-card { position:relative; margin-top:auto; }
.side-bottom { display:none !important; }
.profile-button {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:9px 12px;
    border:1px solid var(--rail-line);
    border-radius:6px;
    background:transparent;
    color:var(--rail-text);
    text-align:left;
    box-shadow:none;
}
.profile-button:hover { background:rgba(255,255,255,.07); }
.profile-avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--brass); color:var(--brass-ink); font:600 12px 'IBM Plex Sans',sans-serif; }
.profile-meta { display:grid; min-width:0; }
.profile-meta strong { font-size:13px; font-weight:500; line-height:1.2; color:var(--rail-text); }
.profile-meta small { color:var(--rail-muted); font:10px 'IBM Plex Mono',monospace; }
.profile-chevron { margin-left:auto; color:var(--rail-muted); font-size:12px; }
.profile-menu { position:absolute; left:0; right:0; bottom:calc(100% + 8px); display:grid; gap:6px; padding:8px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); z-index:5; }
.profile-menu-item { width:100%; min-height:40px; border-radius:5px; background:var(--paper); color:var(--ink); text-align:left; padding:10px 12px; font-weight:500; border:1px solid transparent; }
.profile-menu-item:hover { background:var(--white); border-color:var(--line); }
@media (min-width:1024px) {
    .profile-card { margin-top:auto; }
}
main { min-width:0; padding:20px clamp(14px,4.5vw,22px) 44px; max-width:1500px; width:100%; margin-inline:auto; }
.topbar { display:flex; flex-direction:column; align-items:stretch; gap:16px; margin-bottom:22px; }
.topbar > div:first-child { min-width:0; }
h1 { margin:0 0 8px; font-family:'Newsreader',Georgia,serif; font-size:clamp(29px,5.4vw,40px); font-weight:500; letter-spacing:-.015em; line-height:1.08; }
.eyebrow { color:var(--muted); font-size:13px; font-weight:400; letter-spacing:0; }
.actions { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.actions .btn { flex:1; }
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border-radius:6px; padding:11px 18px; font-size:13px; font-weight:600; letter-spacing:0; transition:background var(--transition), border-color var(--transition), color var(--transition), filter var(--transition), opacity var(--transition), transform var(--transition);
    border:1px solid transparent;
}
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); opacity:.9; }
.btn-dark { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.btn-dark:hover { filter:brightness(1.18); }
.btn-light { color:var(--ink); background:var(--surface); border-color:var(--line); }
.btn-light:hover { border-color:var(--muted); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.overview-header { display:flex; justify-content:flex-end; margin:0 0 14px; }
.month-picker { display:flex; align-items:center; gap:8px; padding:6px 8px 6px 12px; border:1px solid var(--line); background:var(--surface); border-radius:6px; color:var(--muted); font-size:12px; font-weight:500; }
.month-picker span { color:var(--muted); }
.month-picker .month-select { min-width:170px; width:auto; min-height:38px; padding:6px 10px; border:none; background:transparent; box-shadow:none; font-size:13px; color:var(--ink); }
/* KPI: cards separadas (aire + borde de 1px + radio), no un bloque fusionado */
.overview { display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:16px; }
.stat { min-width:0; min-height:120px; padding:20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.overview .stat { border:1px solid var(--line); border-radius:var(--radius); margin:0; }
.stat.primary { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.stat-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.stat-icon { flex:none; width:16px; height:16px; color:var(--brass); fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.stat-label { color:var(--muted); font-size:12px; font-weight:600; letter-spacing:0; }
.primary .stat-label { color:var(--primary-fg-muted); }
.amount { min-width:0; margin-top:0; font-family:'Newsreader',Georgia,serif; font-size:27px; font-weight:500; letter-spacing:-.01em; line-height:1.15; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.amount small { font-family:'IBM Plex Sans',sans-serif; font-size:12px; letter-spacing:0; font-weight:500; }
.delta { float:right; margin-top:14px; color:var(--brass); font:12px 'IBM Plex Mono',monospace; }
.primary .delta { color:var(--primary-fg-muted); }
@media (max-width:767px) {
    .table-wrap,
    .import-table-wrap {
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    table,
    .status-summary-table,
    .import-table {
        min-width:520px;
    }
    .balance-view .panel,
    .balance-view .table-wrap {
        overflow-x:auto;
    }
}

@media (min-width:600px) {
    .overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:768px) {
    .overview { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:18px; }
}
.content-grid { display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:none; transition:border-color var(--transition); }
.status-summary-panel { margin-bottom:16px; }
.status-summary-table { min-width:540px; }
.status-summary-table td:first-child { font-weight:800; }
.balance-view { min-height:60vh; }
.overview.balance-overview { grid-template-columns:1fr; }
.balance-overview .stat { min-height:132px; }
.balance-overview .amount { font-size:26px; }
.savings-view { min-height:60vh; }
.savings-panel { max-width:960px; }
.savings-grid { display:grid; grid-template-columns:1fr; gap:20px; align-items:stretch; }
.savings-report { align-content:start; }
.savings-progress-track { height:12px; overflow:hidden; border-radius:999px; background:var(--line); }
.savings-progress-fill { width:0; height:100%; border-radius:inherit; background:var(--brass); transition:width .35s ease; }
.stepper { display:grid; grid-template-columns:1fr; gap:8px; list-style:none; margin:0 0 24px; padding:0; }
.step { display:flex; align-items:center; gap:10px; width:100%; padding:12px; text-align:left; border:1px solid var(--line); border-radius:6px; background:var(--paper); transition:border-color .2s, background .2s, transform .15s ease; }
.step:hover:not(:disabled) { border-color:var(--brass); background:var(--surface); transform:translateY(-1px); }
.step:hover:not(:disabled) { border-color:var(--muted); }
.step:disabled { opacity:.45; cursor:not-allowed; }
.step-index { display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:var(--surface); border:1px solid var(--line); font:12px 'IBM Plex Mono',monospace; color:var(--muted); }
.step.is-done .step-index { background:var(--brass); border-color:transparent; color:var(--brass-ink); }
.step.is-active { background:var(--surface); border-color:var(--ink); box-shadow:none; }
.step:disabled { color:var(--muted); cursor:default; }
.step.is-active .step-index { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.step-copy { display:grid; gap:2px; min-width:0; }
.step-copy strong { font-size:13px; font-weight:600; letter-spacing:-.01em; }
.step-copy em { display:block; color:var(--muted); font-size:11px; font-style:normal; line-height:1.35; overflow-wrap:anywhere; }
.savings-step { display:none; }
.savings-step.is-active { display:block; }
.step-heading { margin-bottom:18px; }
.step-heading h3 { margin:6px 0 0; font-family:'Newsreader',Georgia,serif; font-size:24px; font-weight:500; letter-spacing:-.01em; }
.step-heading + .savings-grid { margin-top:0; }
.savings-step[data-step="4"] .savings-grid { grid-template-columns:1fr; }
.savings-tip { margin:2px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.mode-switch { display:grid; gap:10px; margin:0; padding:0; border:0; }
.mode-switch legend { margin-bottom:4px; padding:0; }
.mode-switch label { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--white); font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:13px; font-weight:700; text-transform:none; letter-spacing:0; color:var(--ink); cursor:pointer; transition:.2s; }
.mode-switch label:hover { border-color:var(--ink); }
.mode-switch label:has(input:checked) { border-color:var(--ink); background:var(--paper); }
.mode-switch input { appearance:none; -webkit-appearance:none; flex:none; width:16px; height:16px; margin:0; border:2px solid var(--line); border-radius:50%; background:var(--white); position:relative; cursor:pointer; }
.mode-switch input:checked { border-color:var(--ink); }
.mode-switch input:checked::after { content:''; position:absolute; inset:2px; border-radius:50%; background:var(--ink); }
.milestones { padding:18px; border:1px solid var(--line); border-radius:6px; background:var(--paper); }
.milestones-head { margin-bottom:8px; }
.milestones ul { list-style:none; margin:0; padding:0; }
.milestones li { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--row-line); }
.milestones li:last-child { border-bottom:0; }
.milestones li span { color:var(--muted); font-size:12px; }
.milestones li strong { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.milestones li.milestone-final strong { color:var(--ok); }
.milestones .milestone-empty { display:block; color:var(--muted); font-size:13px; line-height:1.6; }
.step-actions-inline { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.step-actions-inline .btn { flex:1; }
.step-hint { min-height:18px; margin:18px 0 0; color:var(--danger); font-size:13px; font-weight:700; }
.wizard-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:14px; padding-top:18px; border-top:1px solid var(--row-line); }
.wizard-actions .btn { flex:1; }
.panel-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; margin-bottom:16px; }
.panel-head .btn { margin-left:auto; }
#clearBtn { min-height:40px; padding:10px 8px; border-radius:8px; }
h2 { margin:0; font-family:'Newsreader',Georgia,serif; font-size:19px; font-weight:500; letter-spacing:-.01em; }
.month-select { width:auto; max-width:100%; border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:8px 10px; font-size:13px; font-weight:600; color:var(--ink); }
.chart { height:190px; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); align-items:end; gap:clamp(6px,1.6vw,16px); padding:0 2px; border-bottom:1px solid var(--line); margin-top:12px; width:100%; min-width:0; }
.chart-empty { grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--muted); font:11px 'IBM Plex Sans',sans-serif; text-align:center; padding:16px; }
.bar-wrap { width:100%; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; position:relative; }
.bar { width:100%; max-width:58px; min-height:8px; background:var(--chart-a); border-radius:3px 3px 0 0; transition:height .5s ease, filter .2s ease; }
.bar:hover { filter:brightness(1.12); }
.bar.current { background:var(--chart-b); }
.bar.is-zero { height:8px; background:var(--line); opacity:.5; }
.bar-value { color:var(--muted); font:600 9.5px 'IBM Plex Mono',monospace; line-height:1; white-space:nowrap; pointer-events:none; }
.bar-value-amount { display:none; }
.bar-value-pct { display:inline; }
.bar-wrap span { color:var(--muted); font:9.5px 'IBM Plex Mono',monospace; line-height:1; padding-bottom:4px; white-space:nowrap; }
.simulator-view { min-height:60vh; }
.simulator-panel { max-width:960px; margin-bottom:16px; }
.simulator-grid { display:grid; grid-template-columns:1fr; gap:20px; align-items:stretch; }
.simulator-form { display:grid; gap:14px; align-content:start; }
.simulator-real { display:grid; gap:4px; padding:14px; border:1px solid var(--line); border-radius:6px; background:var(--paper); }
.simulator-real strong { font-family:'Newsreader',Georgia,serif; font-size:24px; font-weight:500; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.simulator-real span { color:var(--muted); font:11px 'IBM Plex Mono',monospace; }
.simulator-form .btn { justify-content:center; }
.simulator-link { display:inline-block; padding-bottom:2px; border-bottom:1px solid var(--line); color:var(--ink); font-size:13px; font-weight:600; text-decoration:none; }
.simulator-link:hover { border-color:var(--ink); }
.simulator-report { display:grid; gap:12px; padding:18px; border:1px solid var(--line); border-radius:6px; background:var(--paper); align-content:start; }
.report-line { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:10px; border-bottom:1px solid var(--row-line); }
.report-line span { color:var(--muted); font-size:13px; }
.report-line strong { font-size:15px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.report-line strong.is-ok, .breakdown-card strong.is-ok, .is-ok { color:var(--ok); }
.report-line strong.is-alert, .breakdown-card strong.is-alert, .is-alert { color:var(--danger); }
#simulatorAdvice { font-size:13px; line-height:1.4; }
#simulatorSummary { margin:8px 0 0; color:var(--muted); line-height:1.6; font-size:13px; }
.simulator-breakdown { margin-top:24px; padding-top:20px; border-top:1px solid var(--row-line); }
.breakdown-grid { display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:16px; }
.breakdown-card { display:grid; gap:6px; padding:16px; border:1px solid var(--line); border-radius:6px; background:var(--paper); }
.breakdown-card strong { font-family:'Newsreader',Georgia,serif; font-size:23px; font-weight:500; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.breakdown-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.breakdown-list { display:grid; gap:2px; }
.breakdown-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:center; padding:12px 0; border-top:1px solid var(--row-line); }
.breakdown-name, .breakdown-bar { grid-column:1 / -1; }
.breakdown-row strong { text-align:left; }
.breakdown-name { display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; font-weight:600; }
.breakdown-name span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.breakdown-name em { flex:none; padding:3px 7px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font:11px 'IBM Plex Mono',monospace; font-style:normal; }
.breakdown-bar { height:8px; overflow:hidden; border-radius:999px; background:var(--line); }
.breakdown-bar i { display:block; height:100%; border-radius:inherit; background:var(--chart-a); }
.breakdown-row strong { font-size:14px; text-align:right; }
.breakdown-share { color:var(--muted); font:11px 'IBM Plex Mono',monospace; text-align:right; }

/* Paleta de colores de categorías */
.color-field { display:grid; gap:8px; align-content:start; }
.color-field-label { display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--muted); font:11px 'IBM Plex Mono',monospace; letter-spacing:0; }
.color-field-label em { font-style:normal; color:var(--ink); font-weight:700; text-transform:none; letter-spacing:0; }
.color-palette { display:grid; grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:9px; justify-items:center; padding:13px; border:1px solid var(--line); border-radius:6px; background:var(--paper); }
.color-swatch { position:relative; width:100%; max-width:40px; aspect-ratio:1; padding:0; border-radius:50%; border:2px solid rgba(108,106,98,.38); background:var(--swatch); transition:transform .15s, box-shadow .15s, opacity .15s; }
.color-swatch:hover { transform:scale(1.14); }
.color-swatch.is-selected { transform:scale(1.1); box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.color-swatch.is-taken { opacity:.6; }
.color-swatch.is-taken:hover { opacity:.9; }
.swatch-check { position:absolute; right:-4px; bottom:-4px; display:grid; place-items:center; width:15px; height:15px; border-radius:50%; background:var(--ink); color:var(--paper); border:1.5px solid var(--surface); font-size:9px; font-weight:700; line-height:1; }
.color-hint { display:block; min-height:17px; font-size:12px; line-height:1.4; color:var(--muted); }
.color-hint.is-error { color:var(--danger); font-weight:600; }
.color-swatch.is-shake { animation:swatch-shake .35s ease; }
@keyframes swatch-shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } }

/* Notificaciones de pagos */
.notif-widget { position:fixed; right:14px; bottom:14px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.notif-bell { position:relative; display:grid; place-items:center; width:48px; height:48px; padding:0; border-radius:50%; background:var(--ink); color:var(--brass); border:1px solid rgba(255,255,255,.10); box-shadow:0 10px 24px rgba(22,32,46,.28); transition:filter .2s, transform .2s ease; }
.notif-bell:hover { transform:translateY(-2px); }
.notif-bell:active { transform:translateY(0) scale(.96); }
.notif-bell:hover { filter:brightness(1.15); }
.notif-bell.has-alert { animation:bell-pulse 2.4s ease-in-out infinite; }
body.dark .notif-bell { background:var(--brass); color:var(--brass-ink); border-color:transparent; }
@keyframes bell-pulse { 0%,100% { box-shadow:0 10px 24px rgba(22,32,46,.28), 0 0 0 0 var(--danger-glow); } 50% { box-shadow:0 10px 24px rgba(22,32,46,.28), 0 0 0 9px transparent; } }
.notif-badge { position:absolute; top:-3px; right:-3px; min-width:21px; height:21px; padding:0 5px; display:grid; place-items:center; border-radius:999px; background:#a5402c; color:#fff; border:2px solid var(--surface); font:600 11px 'IBM Plex Mono',monospace; }
.notif-panel { position:fixed; left:14px; right:14px; bottom:74px; width:auto; max-height:70vh; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); overflow:hidden; }
.notif-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:16px 16px 12px; border-bottom:1px solid var(--row-line); }
.notif-head h3 { margin:5px 0 0; font-family:'Newsreader',Georgia,serif; font-size:18px; font-weight:500; letter-spacing:-.01em; }
.notif-close { width:38px; height:38px; flex:none; border-radius:6px; background:var(--paper); border:1px solid var(--line); color:var(--ink); font-size:18px; line-height:1; }
.notif-filters { display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px 4px; }
.notif-chip { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:9px 13px; border-radius:4px; border:1px solid var(--line); background:var(--paper); color:var(--muted); font-size:12px; font-weight:600; }
.notif-chip span { display:grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:var(--line); color:var(--ink); font:600 10px 'IBM Plex Mono',monospace; }
.notif-chip.is-active { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.notif-chip.is-active span { background:var(--brass); color:var(--brass-ink); }
.notif-list { display:grid; gap:10px; overflow:auto; padding:12px 16px 8px; }
.notif-item { display:grid; gap:9px; padding:12px 12px 12px 13px; border:1px solid var(--line); border-left:4px solid var(--line); border-radius:6px; background:var(--paper); }
.notif-item.is-vencido { border-left-color:var(--danger); }
.notif-item.is-pendiente { border-left-color:var(--warn); }
.notif-item.is-pagado { border-left-color:var(--ok); }
.notif-item.is-unread { background:var(--surface); }
.notif-item-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.notif-state { padding:4px 8px; border-radius:4px; font:600 10px 'IBM Plex Mono',monospace; letter-spacing:0; }
.state-vencido { background:var(--danger-bg); color:var(--danger); }
.state-pendiente { background:var(--warn-bg); color:var(--warn); }
.state-pagado { background:var(--ok-bg); color:var(--ok); }
.notif-new { color:var(--danger); font:600 9px 'IBM Plex Mono',monospace; letter-spacing:.1em; }
.notif-item h4 { margin:0; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.notif-cat { display:flex; align-items:center; gap:7px; margin-top:3px; color:var(--muted); font-size:12px; }
.notif-meta { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.notif-amount { font:600 15px 'IBM Plex Mono',monospace; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.notif-due { color:var(--muted); font:11px 'IBM Plex Mono',monospace; text-align:right; }
.notif-item.is-vencido .notif-due { color:var(--danger); font-weight:600; }
.notif-item-actions { display:flex; gap:8px; }
.notif-item-actions button { flex:1; min-height:40px; padding:9px 10px; border-radius:6px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:12px; font-weight:600; transition:.15s; }
.notif-item-actions button:hover { border-color:var(--ink); }
.notif-item-actions .notif-pay { background:var(--brass); border-color:transparent; color:var(--brass-ink); }
.notif-empty { padding:28px 12px; text-align:center; color:var(--muted); font-size:13px; line-height:1.6; }
.notif-foot { display:grid; gap:8px; padding:12px 16px 14px; border-top:1px solid var(--row-line); }
.notif-foot .btn { width:100%; justify-content:center; padding:11px 14px; }
.notif-foot .btn:disabled { opacity:.45; cursor:not-allowed; }
.notif-toggle-seen { width:100%; min-height:40px; padding:10px; border:1px dashed var(--line); border-radius:6px; background:transparent; color:var(--muted); font-size:12px; font-weight:600; transition:.15s; }
.notif-toggle-seen:hover { border-color:var(--ink); color:var(--ink); }
.notif-empty-note { display:block; margin-top:6px; color:var(--ink); font-weight:600; }
.notif-item.is-seen { opacity:.72; }
.notif-item.is-seen:hover { opacity:1; }

/* Guía paso a paso del simulador */
.tour-overlay { position:fixed; inset:0; z-index:80; }
.tour-spotlight { position:fixed; z-index:81; border-radius:6px; pointer-events:none; box-shadow:0 0 0 9999px rgba(8,12,9,.74), 0 0 0 3px var(--brass); transition:top .28s ease, left .28s ease, width .28s ease, height .28s ease; }
.tour-card { position:fixed; z-index:82; left:14px; right:14px; top:auto; bottom:16px; width:auto; max-height:64vh; overflow:auto; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); color:var(--ink); }
.tour-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:13px; }
.tour-badge { color:var(--muted); font-size:12px; font-weight:500; }
.tour-dots { display:flex; gap:6px; align-items:center; }
.tour-dots i { width:7px; height:7px; border-radius:50%; background:var(--line); transition:.2s; }
.tour-dots i.is-active { width:20px; border-radius:999px; background:var(--ink); }
.tour-heading { display:flex; align-items:center; gap:11px; }
.tour-icon { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; background:var(--brass); color:var(--brass-ink); font:600 14px 'IBM Plex Mono',monospace; }
.tour-heading h3 { margin:0; font-family:'Newsreader',Georgia,serif; font-size:19px; font-weight:500; letter-spacing:-.01em; }
.tour-card p { margin:12px 0 0; color:var(--muted); font-size:13.5px; line-height:1.65; }
.tour-tip { margin-top:12px; padding:11px 13px; border:1px dashed var(--line); border-radius:6px; background:var(--paper); color:var(--ink); font-size:12.5px; line-height:1.55; }
.tour-tip:empty { display:none; }
.tour-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:17px; }
.tour-nav { display:flex; gap:8px; }
.tour-actions .btn { min-height:40px; padding:10px 14px; font-size:12px; }
.tour-actions .btn:disabled { opacity:.4; cursor:not-allowed; }
.filters-row { display:grid; grid-template-columns:1fr; gap:12px; align-items:end; margin:0 0 18px; }
.filters-row > * { min-width:0; }
.filters-row label { display:grid; gap:7px; color:var(--muted); font-size:12px; font-weight:500; }
.filters-row input, .filters-row select { width:100%; }
.filter-total { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px; min-height:46px; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); }
.page-size-inline { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.page-size-inline select { width:70px; min-width:70px; min-height:38px; height:38px; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); font-size:12px; }
.filter-total span { color:var(--muted); font-size:12px; }
.filter-total strong { font-size:15px; font-variant-numeric:tabular-nums; }
.filter-actions { display:grid; gap:8px; }
#clearFiltersBtn { justify-content:center; width:100%; }
/* En pantallas pequeñas cada tabla crece dentro de su propio marco con scroll vertical
   (más una cabecera fija), en vez de alargar la página. */
.table-wrap {
    --table-bg:#faf9f5; overflow:auto; overscroll-behavior:contain; max-height:min(66vh,540px); scrollbar-width:thin; border:1px solid var(--line); border-radius:6px; background:var(--surface-soft);
}
body.dark .table-wrap { --table-bg:var(--surface-soft); }
.table-wrap thead th { position:sticky; top:0; z-index:2; padding:6px 10px 10px; background:var(--table-bg); box-shadow:inset 0 -1px 0 var(--line); }
table { width:100%; min-width:660px; border-collapse:collapse; font-size:13px; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
th { color:var(--muted); text-align:left; padding:0 10px 12px; font:500 10px 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; }
td { padding:13px 8px; border-top:1px solid var(--row-line); white-space:nowrap; font-variant-numeric:tabular-nums; }
td:first-child { font-weight:600; }
tbody tr { transition:background .15s ease; }
tbody tr:hover { background:var(--brass-tint); }
.cat { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.date { color:var(--muted); font:11px 'IBM Plex Mono',monospace; }
.payment-status { min-width:118px; min-height:38px; padding:7px 8px; font-size:12px; }
.row-actions { opacity:1; width:38px; min-width:38px; min-height:38px; padding:7px; border-radius:8px; color:var(--muted); background:none; font-size:16px; }
tr.row-flash > td { animation:row-flash 1.8s ease; }
@keyframes row-flash { 0%, 55% { background:rgba(200,164,92,.32); } 100% { background:transparent; } }
.dark tr.row-flash > td { animation:row-flash-dark 1.8s ease; }
@keyframes row-flash-dark { 0%, 55% { background:rgba(200,164,92,.18); } 100% { background:transparent; } }
tr:hover .row-actions { opacity:1; }
.categories { display:grid; gap:10px; }
.category-toggle-row { display:flex; justify-content:flex-end; margin-bottom:12px; }
.toggle-chart-btn {
    min-height:40px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:4px;
    padding:10px 14px; font-size:12px; font-weight:600;
}
.category-chart-panel {
    display:flex; flex-direction:column; align-items:center; gap:22px; margin:12px 0 24px;
    opacity:1; transform:scale(1); transition:opacity .25s ease, transform .25s ease;
}
.category-chart-panel.hidden {
    display:none;
    opacity:0; transform:scale(.96);
}
.donut-chart {
    position:relative; width:200px; height:200px; border-radius:50%;
    background:conic-gradient(var(--brass) 0deg 120deg, var(--chart-a) 120deg 250deg, var(--chart-b) 250deg 330deg, var(--chart-d) 330deg 360deg);
    box-shadow:inset 0 0 0 3px var(--line), 0 2px 8px rgba(0,0,0,.06);
    cursor:pointer;
    animation: donutIn .35s ease;
    display:inline-flex; align-items:center; justify-content:center;
    border:2px solid var(--line);
}
.donut-chart::before {
    content:''; position:absolute; inset:30px; border-radius:50%; background:var(--white); border:1px solid var(--line);
    z-index:1;
}
.donut-center {
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; z-index:2; pointer-events:none; padding:0 12px;
}
.donut-center strong {
    font-size:17px; letter-spacing:-.03em; line-height:1.25; text-align:center; max-width:128px; display:block; color:var(--ink);
    font-variant-numeric:tabular-nums;
}
.donut-center em { display:block; color:var(--muted); font:9.5px 'IBM Plex Mono',monospace; font-style:normal; letter-spacing:0; margin-top:7px; pointer-events:none; }
.chart-tooltip {
    position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:4;
    opacity:0; pointer-events:none; padding:10px 12px; border-radius:10px;
    background:rgba(16,24,20,.97); color:#edf5ec; border:1px solid rgba(255,255,255,.12);
    font:10px 'IBM Plex Sans',sans-serif, monospace; letter-spacing:0; white-space:nowrap; box-shadow:0 14px 36px rgba(0,0,0,.32);
    transition:opacity .18s ease, transform .18s ease;
}
.donut-chart:hover .chart-tooltip,
.donut-chart:focus-within .chart-tooltip {
    opacity:1; transform:translate(-50%, -50%) scale(1.02);
}
.donut-legend { display:flex; flex-direction:column; gap:6px; width:100%; max-width:460px; font:11px 'IBM Plex Mono',monospace; }
.donut-legend-item {
    display:grid; grid-template-columns:14px minmax(0,1fr);
    grid-template-areas:"dot label" "dot value";
    align-items:center; column-gap:12px; row-gap:2px;
    padding:10px 14px; border-radius:10px;
    background:rgba(108,106,98,.07); cursor:default;
}
body.dark .donut-legend-item { background:rgba(255,255,255,.05); }
.donut-legend-dot { grid-area:dot; align-self:center; width:13px; height:13px; border-radius:4px; border:1px solid rgba(32,37,31,.16); flex:none; }
.donut-legend-label { grid-area:label; color:var(--ink); min-width:0; font:600 12px 'IBM Plex Sans',sans-serif; line-height:1.35; }
.donut-legend-value { grid-area:value; color:var(--muted); font-weight:800; font-size:11px; text-align:left; }
.donut-empty { grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; justify-content:center; height:200px; color:var(--muted); font:11px 'IBM Plex Sans',sans-serif; text-align:center; padding:16px; }
@keyframes donutIn {
    from { opacity:0; transform:scale(.9); }
    to { opacity:1; transform:scale(1); }
}
body.dark .donut-chart::before { background:var(--paper); border-color:var(--line); }
body.dark .donut-chart { border-color:var(--line); box-shadow:inset 0 0 0 3px var(--line), 0 2px 8px rgba(0,0,0,.3); }
.category { display:flex; justify-content:space-between; align-items:center; padding:8px 0 12px; border-bottom:1px solid var(--row-line); }
.category-info { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; }
.category-delete { min-width:38px; min-height:38px; padding:6px; color:var(--muted); background:transparent; font-size:17px; line-height:1; opacity:1; }
.category:hover .category-delete { opacity:1; }
.category-total { font:12px 'IBM Plex Sans',sans-serif; color:var(--muted); }
.empty { padding:28px 10px; text-align:center; color:var(--muted); font-size:13px; }
.pagination { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:10px; margin-top:18px; }
.page-size-inline { grid-column:1 / -1; }
#pageInfo { grid-column:1 / -1; grid-row:2; justify-self:center; padding:7px 13px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--ink); white-space:nowrap; }
#prevPage { grid-column:1; grid-row:3; }
#nextPage { grid-column:2; grid-row:3; }
.pagination span { color:var(--muted); font:11px 'IBM Plex Sans',sans-serif; }
.panel, .content-grid, .balance-grid { min-width:0; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.modal-backdrop { display:none; position:fixed; inset:0; z-index:3; place-items:center; padding:12px; background:rgba(5,10,6,.58); }
.modal-backdrop.open { display:grid; }
.modal { width:min(450px,100%); max-height:calc(100vh - 24px); overflow:auto; padding:20px; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface); box-shadow:0 30px 80px rgba(0,0,0,.35); }
.category-list { display:grid; gap:10px; max-height:220px; margin:0 0 22px; overflow:auto; }
.category-list:empty { display:none; }
.category-list .category { padding:10px 0; }
.categories-view { min-height:60vh; }
.categories-panel { max-width:1100px; display:grid; gap:22px; }
.category-editor { display:grid; gap:15px; padding:18px; border:1px solid var(--line); border-radius:6px; background:var(--surface-soft); }
.editor-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.editor-head h3 { margin:6px 0 0; font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:21px; letter-spacing:-.01em; }
.editor-head .savings-tip { max-width:440px; text-align:left; }
.category-form-grid { grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); align-items:start; }
.editor-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.category-hint { margin:0; }
.editor-actions { display:flex; gap:10px; }
.categories-table-head { margin-bottom:0; }
.category-name { overflow-wrap:anywhere; }
.category-color { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font:11px 'IBM Plex Sans',sans-serif; }
.category-color .swatch { display:inline-block; width:14px; height:14px; border-radius:4px; border:1px solid rgba(22,32,46,.18); }
.category-actions { text-align:right; white-space:nowrap; }
.category-edit { margin-right:8px; min-height:40px; padding:8px 12px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); font-size:12px; font-weight:600; transition:.15s; }
.category-row .category-edit, .category-row .category-delete { opacity:1; }
.category-row:hover .category-edit, .category-row:hover .category-delete,
.category-row:focus-within .category-edit, .category-row:focus-within .category-delete { opacity:1; }
.category-edit:hover { border-color:var(--ink); transform:translateY(-1px); }
.modal h2 { font-size:20px; margin-bottom:22px; }
.form-grid { display:grid; gap:15px; }
label { display:grid; gap:7px; color:var(--muted); font-size:12px; font-weight:500; }
input:not([type="checkbox"]):not([type="radio"]), select { width:100%; min-height:44px; padding:11px 12px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); outline:none; }
input:focus,select:focus { border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-tint); }
.modal-actions { display:flex; flex-direction:column-reverse; gap:10px; margin-top:23px; }
.modal-actions .btn { width:100%; }
.hidden { display:none !important; }
[hidden] { display:none !important; }
/* Entrada suave al cambiar de sección (se respeta reduce-motion más abajo) */
[id$="View"]:not(.hidden) { animation:view-in .28s cubic-bezier(.2,.7,.3,1) both; }
@keyframes view-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.auth-screen { min-height:100vh; display:grid; place-items:center; padding:16px; background:var(--paper); }
.auth-card { width:min(430px,100%); padding:26px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.auth-brand { margin:0 0 38px; }
.auth-card h1 { margin:8px 0; }
.auth-actions { display:grid; gap:10px; margin-top:18px; }
.auth-actions .btn { width:100%; }
.auth-copy { margin:0 0 26px; color:var(--muted); font-size:14px; }
.google-submit { width:100%; justify-content:center; margin-top:10px; }
.google-mark { font-size:16px; font-weight:800; color:#4285f4; }
.auth-error { min-height:18px; margin:16px 0 0; color:var(--danger); font-size:12px; font-weight:700; }
.auth-note { margin:24px 0 0; color:var(--muted); font:10px 'IBM Plex Mono',monospace; line-height:1.5; text-align:center; }
.app { display:none; }
.app.authenticated { display:grid; }
body.dark .auth-error { color:var(--danger); }
/* Ayuda de importación CSV */
.import-modal { width:min(660px,100%); max-height:88vh; overflow:auto; }
.import-lead { margin:-8px 0 18px; font-size:14px; line-height:1.6; color:var(--muted); }
.import-spec { display:grid; gap:12px; padding:16px; border:1px solid var(--line); border-radius:6px; background:rgba(108,106,98,.06); }
.import-table-wrap { overflow-x:auto; }
.import-table { width:100%; min-width:520px; border-collapse:collapse; font-size:12px; }
.import-table th { padding:8px 10px; text-align:left; font:500 10px 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); border-bottom:1px solid var(--line); }
.import-table td { padding:9px 10px; border-bottom:1px solid var(--row-line); color:var(--ink); }
.import-table tbody tr:last-child td { border-bottom:0; }
.import-notes { display:grid; gap:7px; margin:0; padding-left:18px; font-size:13px; line-height:1.5; color:var(--muted); }
.import-notes strong { color:var(--ink); }
.import-notes code { padding:1px 5px; border-radius:5px; background:rgba(108,106,98,.16); font:12px 'IBM Plex Mono',monospace; color:var(--ink); }

/* Pagos recurrentes */
.recurring-tag { display:inline-block; margin-left:8px; padding:2px 7px; border:1px solid var(--line); border-radius:4px; background:var(--surface-alt); color:var(--muted); font:500 10px 'IBM Plex Mono',monospace; vertical-align:middle; }
.check-field { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px dashed var(--line); border-radius:10px; background:rgba(108,106,98,.07); color:var(--ink); font:600 13px 'IBM Plex Sans',sans-serif; text-transform:none; cursor:pointer; }
.check-field input { width:17px; height:17px; margin:1px 0 0; accent-color:var(--ok); }
.check-field span { display:grid; gap:3px; }
.check-field em { font-style:normal; font-weight:400; font-size:12px; color:var(--muted); }

/* Presupuestos por categoría */
.budget-banner { display:block; margin-top:12px; padding:11px 14px; border:1px solid transparent; border-radius:10px; font-size:13px; font-weight:700; }
.budget-banner.is-warn { background:rgba(245,202,114,.18); border-color:rgba(245,202,114,.55); color:var(--ink); }
.budget-banner.is-danger { background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.45); color:var(--danger); }
.dark .budget-banner.is-danger { color:var(--danger); }
.category { flex-wrap:wrap; }
.category-budget { flex:1 0 100%; display:grid; gap:5px; margin-top:8px; }
.category-budget-track { height:6px; border-radius:999px; background:rgba(108,106,98,.2); overflow:hidden; }
.category-budget-track i { display:block; height:100%; border-radius:inherit; transition:width .4s ease; }
.category-budget-track i.is-ok { background:var(--ok); }
.category-budget-track i.is-warn { background:var(--warn); }
.category-budget-track i.is-exceeded { background:var(--danger); }
.category-budget-copy { font:11px 'IBM Plex Sans',sans-serif; color:var(--muted); }
.category-budget-copy.is-warn { color:var(--warn); font-weight:700; }
.category-budget-copy.is-exceeded { color:var(--danger); font-weight:700; }
.dark .category-budget-copy.is-warn { color:var(--warn); }
.dark .category-budget-copy.is-exceeded { color:var(--danger); }
.category-budget-cell { text-align:right; }
.budget-cell { display:inline-flex; align-items:center; gap:8px; font:12px 'IBM Plex Sans',sans-serif; color:var(--muted); }
.budget-cell em { font-style:normal; font-weight:700; padding:2px 6px; border-radius:999px; background:rgba(108,106,98,.16); }
.budget-cell em.is-warn { background:rgba(245,202,114,.28); color:var(--warn); }
.budget-cell em.is-exceeded { background:rgba(239,68,68,.18); color:var(--danger); }
.dark .budget-cell em.is-warn { color:var(--warn); }
.dark .budget-cell em.is-exceeded { color:var(--danger); }
.budget-none { color:var(--muted); opacity:.55; }

/* =========================================================
   Reportes (vista detallada)
   ========================================================= */
.report-presets { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; }
.report-presets .chip { min-height:40px; padding:9px 15px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--muted); font:700 11px 'IBM Plex Mono',monospace; letter-spacing:0; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.report-presets .chip:hover { border-color:var(--ink); color:var(--ink); }
.report-presets .chip.is-active { background:var(--ink); border-color:var(--ink); color:var(--paper); }

.report-delta { float:right; max-width:56%; margin-top:25px; font:11px 'IBM Plex Mono',monospace; color:var(--muted); line-height:1.35; text-align:right; }
.report-delta.up { color:var(--danger); }
.report-delta.down { color:var(--ok); }
/* En los KPI el delta va debajo del importe, sin flotar encima */
.report-kpis .report-delta { float:none; clear:both; display:block; max-width:none; margin-top:9px; text-align:left; }
/* Tarjeta principal: se invierte entre temas (tinta en claro, marfil en oscuro) */
.primary .report-delta { color:var(--primary-fg-muted); }
.primary .report-delta.up { color:var(--primary-fg-danger); }
.primary .report-delta.down { color:var(--primary-fg-ok); }

.report-summary { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.report-summary li { position:relative; padding-left:19px; font-size:13.5px; line-height:1.6; color:var(--ink); overflow-wrap:anywhere; }
.report-summary li::before { content:''; position:absolute; left:1px; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--ok); }
.report-summary strong { font-weight:800; }

.report-bars { display:grid; gap:12px; margin:0 0 20px; }
.report-bar { display:grid; grid-template-columns:minmax(88px,auto) minmax(0,1fr) auto; gap:8px 12px; align-items:center; }
.report-bar-label { font:11px 'IBM Plex Mono',monospace; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.report-bar strong { font-size:13px; white-space:nowrap; text-align:right; }
.report-bar-track { height:10px; border-radius:999px; background:rgba(108,106,98,.16); overflow:hidden; }
.report-bar-track i { display:block; height:100%; min-width:3px; border-radius:inherit; background:var(--chart-a); transition:width .5s ease; }
body.dark .report-bar-track { background:rgba(152,162,176,.18); }
.report-bar-zero { color:var(--muted); font:10px 'IBM Plex Mono',monospace; text-align:center; padding:10px; }

.report-note { margin:-4px 0 14px; font-size:12px; line-height:1.55; color:var(--muted); }
.report-empty { padding:18px 8px; text-align:center; color:var(--muted); font-size:13px; }
.report-total-row td { border-top:2px solid var(--line); font-weight:800; }
.reports-grid { grid-template-columns:minmax(0,1fr); }
/* Filtros extendidos de reportes */
.report-filters-extended { grid-column:1 / -1; display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px; border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--paper); }
.report-filters-extended .chip { min-height:36px; padding:7px 14px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--muted); font:700 10px 'IBM Plex Mono',monospace; letter-spacing:0; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.report-filters-extended .chip:hover { border-color:var(--ink); color:var(--ink); }
.report-filters-extended .chip.is-active { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.report-filters-extended label { color:var(--muted); font-size:12px; font-weight:500; }
.report-filters-extended input, .report-filters-extended select { width:100%; min-height:38px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); font-size:12px; }
/* Reportes adicionales */
.report-comparative { display:grid; gap:14px; }
.report-comparative-row { display:flex; gap:10px; align-items:flex-start; }
.report-comparative-col { flex:1; min-width:0; }
.report-distribution { display:flex; flex-direction:column; gap:14px; }
.report-distribution-donut { display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:center; }
.report-recurring { display:grid; gap:12px; }
.report-recurring-empty { grid-column:1 / -1; text-align:center; color:var(--muted); font:12px 'IBM Plex Sans',sans-serif; padding:16px; }
/* KPIs adicionales para reportes */
.report-kpis .stat.delta-card .report-delta { margin-top:6px; }

.toast-container { position:fixed; right:16px; bottom:16px; z-index:9999; display:grid; gap:8px; max-width:min(360px, calc(100vw - 32px)); }
.toast { padding:12px 16px; border-radius:10px; background:var(--ink); color:var(--paper); font:700 12px 'IBM Plex Mono',monospace; box-shadow:0 8px 24px rgba(0,0,0,.25); animation:toastIn .2s ease; display:flex; align-items:center; gap:10px; }
.toast.is-error { background:var(--danger); }
.toast.is-success { background:var(--ok); }
.toast-action { background:transparent; color:inherit; border:1px solid currentColor; border-radius:6px; padding:4px 10px; font:700 11px 'IBM Plex Mono',monospace; letter-spacing:0; cursor:pointer; }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.savings-goal { padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); margin-bottom:10px; }
.savings-goal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.savings-goal-head strong { font-size:14px; font-weight:700; }
.savings-goal-bar { height:8px; border-radius:999px; background:var(--surface-alt); overflow:hidden; margin-bottom:6px; }
.savings-goal-bar i { display:block; height:100%; background:var(--brass); border-radius:999px; transition:width .3s ease; }
.savings-goal-meta { display:flex; justify-content:space-between; font:10px 'IBM Plex Sans',sans-serif; color:var(--muted); letter-spacing:0; }
.skip-link {
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index:1000;
    background:var(--ink);
    color:var(--paper);
    border-radius:0 0 8px 0;
    font:700 12px 'IBM Plex Mono',monospace;
    letter-spacing:0;
    padding:10px 14px;
}
.skip-link:focus {
    display:block;
    left:0;
    top:0;
}
.bulk-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; margin:0 0 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
.bulk-bar.hidden { display:none; }
.bulk-bar #bulkCount { font:700 11px 'IBM Plex Mono',monospace; letter-spacing:0; color:var(--muted); margin-right:auto; }

   ========================================================= */
.charts-presets { display:flex; flex-wrap:wrap; gap:8px; }
.charts-presets .chip { min-height:40px; padding:9px 15px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--muted); font:700 11px 'IBM Plex Mono',monospace; letter-spacing:0; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.charts-presets .chip:hover { border-color:var(--ink); color:var(--ink); }
.charts-presets .chip.is-active { background:var(--ink); border-color:var(--ink); color:var(--paper); }

.conn-status { display:inline-block; width:9px; height:9px; border-radius:50%; margin:0 8px 0 0; vertical-align:middle; background:var(--ok); box-shadow:0 0 0 2px rgba(123,171,58,.25); transition:background .2s ease; }
.conn-status.is-offline { background:var(--danger); box-shadow:0 0 0 2px rgba(224,74,47,.25); }

/* Moneda y Sincronización */
.nav-currency-wrap { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid var(--rail-line); margin-bottom:4px; }
.nav-currency-label { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:500; color:var(--rail-muted); }
.nav-currency-select { margin-left:auto; min-height:34px; padding:4px 8px; border:1px solid var(--rail-line); border-radius:5px; background:rgba(255,255,255,.08); color:var(--rail-text); font-size:12px; font-weight:600; cursor:pointer; }
.nav-currency-select:hover { background:rgba(255,255,255,.13); }
.amount-currency-grid { display:grid; grid-template-columns:1fr minmax(110px,auto); gap:8px; }
.side-status-row { display:inline-flex; align-items:center; gap:8px; margin:4px 0; }
.sync-status { display:inline-flex; align-items:center; gap:4px; font:700 10px 'IBM Plex Mono',monospace; letter-spacing:0; color:var(--muted); }
.sync-status::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); }
.sync-status.is-syncing::before { background:var(--warn); animation:syncPulse 1s infinite alternate; }
.sync-status.is-offline::before { background:#94a3b8; }
.sync-status.is-conflict::before { background:var(--danger); }
@keyframes syncPulse { from { opacity:.4; } to { opacity:1; } }

/* Presupuestos por mes (histórico) en categorías */
.category-month-filter { display:inline-flex; align-items:center; gap:8px; }
.category-budget-badge { display:inline-block; font-size:10px; padding:2px 6px; border-radius:4px; background:var(--surface-alt); color:var(--muted); margin-left:4px; }

/* Comprobantes / Recibos */
.attachment-field { grid-column:1 / -1; display:grid; gap:6px; }
.attachment-preview { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border-radius:8px; background:var(--surface-alt); border:1px solid var(--line); font-size:12px; }
.btn-remove-attachment { background:none; border:none; color:var(--danger); font-weight:700; cursor:pointer; font-size:12px; }
.receipt-btn { color:var(--chart-a); font-size:14px; margin-right:4px; }
.receipt-modal { max-width:560px; width:92%; }
.receipt-preview-body { max-height:60vh; overflow:auto; text-align:center; padding:12px 0; }
.receipt-preview-body img { max-width:100%; max-height:50vh; object-fit:contain; border-radius:8px; border:1px solid var(--line); }
.receipt-preview-body iframe { width:100%; height:50vh; border:none; border-radius:8px; }

/* Notificaciones Push del sistema */
.notif-push-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; margin:0 0 10px; border-radius:10px; background:var(--surface-alt); border:1px solid var(--line); }
.notif-push-text strong { display:block; font-size:12px; font-weight:700; }
.notif-push-text p { margin:2px 0 0; font-size:11px; color:var(--muted); }
.charts-date-row label { display:grid; gap:7px; color:var(--muted); font:11px 'IBM Plex Sans',sans-serif; letter-spacing:0; }
.charts-date-row input { width:100%; min-height:38px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); font-size:12px; }
.charts-filters { margin-top:12px; }
.charts-filters .charts-check { display:flex; align-items:center; gap:8px; min-height:38px; }
.charts-filters .charts-check input { width:16px; height:16px; min-height:0; margin:0; flex:none; }
.charts-filters .charts-amounts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.charts-filters #chartsFilterClear { min-height:38px; }

@media (min-width:600px) {
    .charts-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .charts-filters .charts-amounts { grid-column:1 / -1; }
}
@media (min-width:1024px) {
    .charts-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .charts-filters .charts-amounts { grid-column:span 2; }
    .charts-filters #chartsFilterClear { grid-column:1 / -1; justify-self:start; }
}

.charts-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:16px; }
.chart-panel { min-width:0; }
.chart-panel-wide { grid-column:1 / -1; }
.charts-donut { display:flex; flex-direction:column; align-items:center; gap:18px; }
.charts-donut .donut-legend { width:100%; max-width:420px; }
.chart-evolution .bar-value { display:none; }
.chart-evolution .bar-wrap span { font-size:8px; letter-spacing:-.02em; }
.charts-area-wrap { display:grid; gap:10px; }
.charts-area { width:100%; height:190px; display:block; }
.charts-grid-line { stroke:var(--line); stroke-width:1; }
.charts-area-fill { fill:rgba(44,71,99,.20); }
.charts-area-line { fill:none; stroke:var(--chart-a); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.charts-area-dot { fill:var(--chart-a); stroke:var(--white); stroke-width:2; }
.charts-axis { display:flex; justify-content:space-between; padding:0 2px; color:var(--muted); font:9px 'IBM Plex Mono',monospace; }
.charts-note { margin:12px 0 0; color:var(--muted); font:10px 'IBM Plex Mono',monospace; letter-spacing:0; }
body.dark .charts-grid-line { stroke:var(--line); }
body.dark .charts-area-fill { fill:rgba(110,147,188,.22); }
body.dark .charts-area-dot { stroke:var(--paper); }

@media (min-width:600px) {
    .charts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .chart-evolution .bar-value { display:block; }
    .chart-evolution .bar-wrap span { font-size:9px; }
    .charts-area { height:210px; }
}

/* =========================================================
   Mobile-first.
   Base = móvil (320–599 px).
   Escalas: 600 px (teléfono grande), 768 px (tablet),
   1024 px (escritorio con barra lateral), 1440 y 1920 px
   (pantallas grandes y ultrawide).
   ========================================================= */

@media (min-width:600px) {
    main { padding:26px clamp(18px,4vw,40px) 46px; }
    h1 { font-size:clamp(32px,3.4vw,42px); }
    .topbar { gap:20px; margin-bottom:28px; }
    .overview { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
    .overview.balance-overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .stat { min-height:148px; padding:23px; }
    .amount { margin-top:22px; font-size:28px; }
    .panel { padding:23px 18px; }
    .stepper { grid-template-columns:repeat(2,1fr); gap:10px; }
    .step-copy em { display:block; }
    .breakdown-grid { grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); }
    .breakdown-row { grid-template-columns:minmax(150px,1.2fr) minmax(90px,1fr) auto 52px; gap:14px; }
    .breakdown-name, .breakdown-bar { grid-column:auto; }
    .breakdown-row strong { text-align:right; }
    .filters-row { grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr)); }
    .color-swatch { max-width:40px; }
    .table-wrap { margin:0; padding:0; }
    td { padding:15px 10px; }
    .chart { gap:clamp(8px,2vw,24px); }
    .bar-wrap span { font-size:10px; }
    .pagination { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:12px; }
    #prevPage { margin-left:auto; }
    .modal-backdrop { padding:20px; }
    .modal { padding:26px; }
    .modal-actions { flex-direction:row; }
    .modal-actions .btn { width:auto; }
    .wizard-actions .btn, .step-actions-inline .btn { flex:0 1 auto; }
    .auth-screen { padding:24px; }
    .auth-card { padding:32px 28px; }
    .notif-widget { right:22px; bottom:22px; }
    .notif-bell { width:52px; height:52px; }
    .notif-panel { position:absolute; left:auto; right:0; bottom:64px; width:min(378px,calc(100vw - 32px)); max-height:min(72vh,560px); border-radius:16px; }
    .tour-card { left:auto; right:auto; top:auto; bottom:auto; width:min(364px,calc(100vw - 28px)); max-height:none; }
}

@media (min-width:768px) {
    .topbar { flex-direction:row; justify-content:space-between; align-items:flex-start; margin-bottom:30px; }
    .topbar > div:first-child { min-width:0; }
    .actions { width:auto; }
    .actions .btn { flex:0 1 auto; }
    .overview { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .savings-grid, .simulator-grid { grid-template-columns:minmax(220px,320px) minmax(260px,1fr); }
    .savings-step[data-step="4"] .savings-grid { grid-template-columns:minmax(280px,1.15fr) minmax(240px,.85fr); }
    .editor-head .savings-tip { text-align:right; }
}

@media (min-width:1024px) {
    .app { grid-template-columns:250px minmax(0,1fr); }
    aside { padding:30px 22px; border-bottom:0; border-right:1px solid var(--line); gap:0; }
    .brand { margin:0 10px 54px; font-size:20px; }
    .nav-label { display:block; }
    .nav-toggle { display:none; }
    nav { display:grid; gap:5px; padding-bottom:0; }
    nav button { width:auto; min-height:0; padding:12px; white-space:normal; }
    main { padding:38px clamp(24px,5vw,76px); }
    .topbar { margin-bottom:34px; }
    .btn { min-height:0; padding:12px 16px; }
    input:not([type="checkbox"]):not([type="radio"]), select { min-height:0; }
    .amount { margin-top:24px; font-size:clamp(26px,2vw,30px); }
    .stepper { grid-template-columns:repeat(4,1fr); }
    .step-copy em { display:block; }
    .overview.balance-overview { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .balance-overview .amount { font-size:26px; }
    .breakdown-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .row-actions { opacity:0; padding:7px; min-width:38px; min-height:38px; border-radius:8px; }
    #clearBtn { min-height:40px; padding:9px 6px; border-radius:8px; margin:0; }
    .toggle-chart-btn { min-height:38px; padding:9px 12px; }
    .category-edit, .category-row .category-edit, .category-row .category-delete { opacity:0; }
    .category-delete { opacity:0; }
}

@media (min-width:1440px) {
    main { max-width:1560px; }
    .content-grid { gap:18px; }
    .overview { gap:16px; }
    .panel { padding:26px; }
}

@media (min-width:1920px) {
    main { max-width:1680px; padding-inline:clamp(40px,3vw,72px); }
    .savings-panel, .simulator-panel { max-width:1060px; }
}

.calculator-shell { display:grid; gap:16px; }
.calculator-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.calculator-tab { min-height:44px; border:1px solid var(--line); border-radius:999px; padding:10px 14px; background:var(--surface-soft); color:var(--ink); }
.calculator-tab.is-active { background:var(--brass); color:var(--brass-ink); border-color:var(--brass); }
.calculator-panels { display:grid; gap:16px; }
.calculator-panel { display:none; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px; box-shadow:var(--shadow-sm); }
.calculator-panel.is-active { display:block; }
.calculator-notes { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px; }
.calculator-notes h3 { margin:0 0 12px; font-size:1rem; }
.calculator-notes ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.calculator-notes li { border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--surface-soft); }
.calculator-notes .note-label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:2px; }
.calculator-notes strong { display:block; margin-bottom:4px; }
.calculator-notes span { color:var(--muted); font-size:.9rem; }
.calculator-form, .labor-form { display:grid; gap:16px; }
.field-grid { display:grid; gap:12px; }
.two-up { grid-template-columns:repeat(1, minmax(0, 1fr)); }
.three-up { grid-template-columns:repeat(1, minmax(0, 1fr)); }
.four-up { grid-template-columns:repeat(1, minmax(0, 1fr)); }
.field { display:grid; gap:8px; color:var(--ink); }
.field span { font-size:.9rem; font-weight:600; }
.panel-actions, .labor-actions, .calc-result-actions { display:flex; flex-wrap:wrap; gap:10px; }
.calc-result-box, .labor-result-box {
    margin-top:16px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); padding:16px;
    display:grid; gap:14px;
}
.calc-result-box h3, .labor-result-box h3 { margin:0; }
.calc-stat-grid { display:grid; gap:12px; grid-template-columns:repeat(1, minmax(0, 1fr)); }
.calc-stat { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.calc-stat strong { font-size:1rem; }
.calc-extra { color:var(--muted); }
.calc-extra table, .labor-result-table { width:100%; border-collapse:collapse; }
.calc-amortization-table th, .calc-amortization-table td, .labor-result-table th, .labor-result-table td { padding:10px 8px; border-bottom:1px solid var(--row-line); font-size:.88rem; }
.labor-result-box { overflow:hidden; }
.labor-result-table {
    width:100%;
    min-width:0;
    table-layout:fixed;
    border-collapse:collapse;
}
.labor-result-table th:nth-child(1), .labor-result-table td:nth-child(1),
.labor-result-table th:nth-child(2), .labor-result-table td:nth-child(2) {
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.labor-result-table th:nth-child(3), .labor-result-table td:nth-child(3) {
    white-space:nowrap;
}
.labor-layout { display:grid; gap:16px; }
.labor-panel, .labor-result-panel { padding:18px; }
.labor-result-box.empty-state-box { color:var(--muted); }
.labor-alert {
    display:flex;
    align-items:flex-start;
    gap:10px;
    border:1px solid rgba(181,136,40,.45);
    background:linear-gradient(180deg, rgba(214,170,67,.12), rgba(214,170,67,.07));
    color:var(--ink);
    padding:12px 14px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    line-height:1.45;
    box-shadow:inset 0 0 0 1px rgba(214,170,67,.08);
}
.labor-alert::before {
    content:'!';
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    flex:none;
    border-radius:50%;
    background:rgba(181,136,40,.15);
    border:1px solid rgba(181,136,40,.45);
    color:var(--warn);
    font:700 12px 'IBM Plex Mono',monospace;
    line-height:1;
    margin-top:1px;
}
.labor-summary-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--row-line); }
.labor-total-box { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:12px; font-size:1.05rem; }
.labor-total-box strong { font-size:1.2rem; }
.empty-note { color:var(--muted); }

@media (min-width:600px) {
    .two-up { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .three-up { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .four-up { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .calc-stat-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .labor-layout { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); }
}
@media (min-width:768px) {
    .three-up { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .four-up { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* =========================================================
   Reportes: escalas (van después para no ser eclipsadas)
   ========================================================= */
@media (min-width:600px) {
    .report-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .report-bar { grid-template-columns:minmax(96px,auto) minmax(0,1fr) auto; gap:12px; }
    .report-bar-label { grid-area:1 / 1; }
    .report-bar-track { grid-area:1 / 2; }
    .report-bar strong { grid-area:1 / 3; }
    .donut-legend-item { grid-template-columns:14px minmax(0,1fr) auto; grid-template-areas:"dot label value"; column-gap:16px; row-gap:0; }
    .donut-legend-value { text-align:right; white-space:nowrap; }
    .bar-value-amount { display:inline; }
    .bar-value-pct { display:none; }
}
@media (min-width:768px) {
    /* Los paneles de Reportes van en una columna: las tablas necesitan el ancho completo */
    .reports-grid { grid-template-columns:minmax(0,1fr); }
    /* El pastel y su leyenda conviven en fila, con aire entre ellos */
    .category-chart-panel { flex-direction:row; align-items:center; justify-content:center; gap:36px; }
    .donut-chart { width:220px; height:220px; }
    .donut-chart::before { inset:34px; }
    .donut-center strong { font-size:18px; max-width:144px; }
    .donut-legend { max-width:520px; }
}
@media (min-width:1024px) {
    .report-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* =========================================================
   Impresión: "Imprimir / PDF" desde Reportes sale limpio
   en blanco y negro, también partiendo del tema oscuro.
   ========================================================= */
@media print {
    @page { margin:14mm; }
    aside, .nav-toggle, #notifWidget, #tourCard, #tourSpotlight, .modal-backdrop, .auth-screen, .topbar .actions, .report-filters, .pagination, .row-actions, .empty { display:none !important; }
    body, body.dark { background:#fff !important; }
    .app { display:block !important; grid-template-columns:minmax(0,1fr) !important; }
    main { padding:0 !important; max-width:none !important; }
    .panel, .stat, .table-wrap { box-shadow:none !important; border-color:#d9ddd6 !important; background:#fff !important; }
    .table-wrap { max-height:none !important; overflow:visible !important; --table-bg:#fff !important; }
    table { min-width:0 !important; width:100% !important; }
    .panel { break-inside:avoid; margin-bottom:9mm; }
    .report-bars, .report-summary, .report-bar, .overview { break-inside:avoid; }
    h1 { font-size:24px; }
    /* Paleta clara forzada aunque la app esté en tema oscuro */
    body.dark {
        --ink:#16202e; --muted:#6c6a62; --line:#dcd7cc; --row-line:#edeae3;
        --paper:#fff; --white:#fff; --surface:#fff; --surface-alt:#fff; --surface-soft:#fff;
        --ok:#3e6b4f; --warn:#96711c; --danger:#a5402c; --brass:#9a7b3f;
        --chart-a:#2c4763; --chart-b:#9a7b3f; --chart-c:#7d8b99; --chart-d:#8c4a3c;
        --primary-fg-muted:#6c6a62; --primary-fg-danger:#a5402c; --primary-fg-ok:#3e6b4f;
        color:#16202e !important;
    }
    body.dark .stat, body.dark .panel, body.dark .table-wrap, body.dark .btn-light, body.dark .simulator-report { background:#fff !important; color:#16202e !important; border-color:#dcd7cc !important; }
    body.dark .recurring-tag { color:#6c6a62 !important; background:rgba(108,106,98,.16) !important; }
    body.dark .budget-cell { color:#6c6a62; }
    body.dark .budget-cell em { background:rgba(108,106,98,.16); color:#6c6a62 !important; }
    body.dark .budget-cell em.is-warn { background:rgba(150,113,28,.16); color:var(--warn) !important; }
    body.dark .budget-cell em.is-exceeded { background:rgba(165,64,44,.14); color:var(--danger) !important; }
    body.dark .budget-cell em.is-ok { color:var(--ok) !important; }
    body.dark .budget-none { color:#6c6a62; }
    body.dark .budget-banner.is-danger { color:var(--danger) !important; }
    body.dark .report-delta.up { color:var(--danger) !important; }
    body.dark .report-delta.down { color:var(--ok) !important; }
    /* Tarjeta principal: en papel siempre clara y con texto oscuro */
    .stat.primary, body.dark .stat.primary { background:#fff !important; color:#16202e !important; border-color:#dcd7cc !important; }
    .primary .stat-label { color:#6c6a62 !important; }
    .report-delta, .primary .report-delta, body.dark .report-delta, body.dark .primary .report-delta { color:#6c6a62 !important; }
    .report-delta.up, .primary .report-delta.up, body.dark .report-delta.up, body.dark .primary .report-delta.up { color:var(--danger) !important; }
    .report-delta.down, .primary .report-delta.down, body.dark .report-delta.down, body.dark .primary .report-delta.down { color:var(--ok) !important; }
    body.dark .report-summary li::before { background:var(--ok) !important; }
    body.dark .report-bar-track { background:rgba(108,106,98,.18) !important; }
    body.dark .report-bar-track i { background:var(--chart-a) !important; }
    body.dark .chart .bar { background:var(--chart-a) !important; }
    body.dark .chart .bar.current { background:var(--chart-b) !important; }
    /* Diagramas: sin controles en papel y a una sola columna */
    .charts-presets, .charts-filters, .charts-date-row, .chart-panel .month-select { display:none !important; }
    .charts-grid { grid-template-columns:1fr !important; }
    .charts-grid, .donut-chart, .chart, .report-bar-track, .charts-area { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .charts-area-line { stroke:#2c4763 !important; }
    .charts-area-fill { fill:rgba(44,71,99,.3) !important; }
    .charts-grid-line { stroke:#dcd7cc !important; }
    .charts-area-dot { stroke:#fff !important; }
    .charts-donut .donut-legend-item { break-inside:avoid; }
}