*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
/* Freno general: en algunos celulares el selector de fecha nativo ignora
   los límites de ancho que le pongamos (es un control del sistema
   operativo, no HTML normal) y termina empujando la página hacia el lado.
   Con esto, así ese u otro elemento se porte mal, la pantalla nunca se
   puede mover horizontalmente — se recorta en vez de desbordarse. */
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;background:var(--page-bg);color:var(--text);min-height:100vh;font-size:14px;letter-spacing:-.01em;transition:background-color 200ms ease,color 200ms ease;overflow-x:hidden}
:root{
  --navy:#312E81;--navy-mid:#4F46E5;--navy-light:#EEF2FF;
  --green:#1A6B3A;--green-light:#E8F5EE;--green-border:#B2DEC5;--green-fill:#1A6B3A;
  --red:#8B1A1A;--red-light:#F8E8E8;--red-border:#EEA8A8;--red-fill:#8B1A1A;
  --amber:#7A5500;--amber-light:#FDF6E3;--amber-border:#F0D98A;
  --teal:#0A6B5A;--teal-light:#E4F5F1;
  --blue:#185FA5;--blue-light:#E6F1FB;--blue-border:#85B7EB;
  --gray:#5A6A7A;--border:#D0D7E2;--border-soft:#EDF0F5;--white:#FFFFFF;--panel-tint:#F7F9FC;--surface-tint:#EEF1F6;
  --page-bg:#EEF1F6;--text:#1C2B3A;
  --row-income-bg:#F5FBF8;--row-income-bg-hover:#EEF8F3;
  --row-expense-bg:#FDF7F7;--row-expense-bg-hover:#FAF0F0;
  --u2-c:#1A6B3A;--u2-bg:#E4F5EE;--u3-c:#B86B00;--u3-bg:#FDF3E3;--u4-c:#8B1A1A;--u4-bg:#F8E8E8;
  --radius:10px;--radius-lg:14px;
  --shadow:0 1px 2px rgba(16,29,46,.04),0 1px 3px rgba(16,29,46,.06);
  --shadow-md:0 2px 6px rgba(16,29,46,.05),0 6px 16px rgba(16,29,46,.07);
  --shadow-lg:0 10px 28px rgba(16,29,46,.16),0 3px 10px rgba(16,29,46,.08);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --cat-ess-c:#3B6D11;--cat-ess-bg:#EAF3DE;--cat-ess-bd:#97C459;
  --cat-non-c:#854F0B;--cat-non-bg:#FAEEDA;--cat-non-bd:#EF9F27;
  --cat-sav-c:#185FA5;--cat-sav-bg:#E6F1FB;--cat-sav-bd:#85B7EB;
  --cat-dbt-c:#A32D2D;--cat-dbt-bg:#FCEBEB;--cat-dbt-bd:#F09595;
  /* Fijo (no cambia con el tema del hogar) — para que "Personal" nunca se
     pueda confundir con "Hogar" ni siquiera si el hogar personalizó su
     color de marca a algo parecido. */
  --purple:#5B21B6;--purple-mid:#7C3AED;--purple-light:#F3EEFF;
}
:root[data-theme="dark"]{
  --purple:#C4B5FD;--purple-mid:#A78BFA;--purple-light:#241B3D;
  --green:#4ADE94;--green-light:#123423;--green-border:#1F5C3B;
  --red:#FF8B8B;--red-light:#3A1518;--red-border:#6B2429;
  --amber:#FFCB66;--amber-light:#332405;--amber-border:#5C4413;
  --teal:#4FE0C7;--teal-light:#0D2E29;
  --blue:#7FB3F5;--blue-light:#12233F;--blue-border:#1F3E6B;
  --gray:#9498AC;--border:#333648;--border-soft:#2A2D3D;--white:#1B1D29;--panel-tint:#242737;--surface-tint:#20222E;
  --page-bg:#10121A;--text:#E4E6EE;
  --row-income-bg:#122318;--row-income-bg-hover:#16301F;
  --row-expense-bg:#2A1517;--row-expense-bg-hover:#33191C;
  --u2-c:#4ADE94;--u2-bg:#123423;--u3-c:#FFB454;--u3-bg:#3A2606;--u4-c:#FF8B8B;--u4-bg:#3A1518;
}
::selection{background:#85B7EB;color:#0B1C2E}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(28,53,83,.18);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(28,53,83,.32);background-clip:content-box}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14)}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24)}
:focus-visible{outline:2px solid var(--navy-mid);outline-offset:2px;border-radius:6px}
.app{display:flex;flex-direction:column;min-height:100vh}
header{position:sticky;top:0;z-index:200;background:linear-gradient(155deg,var(--navy-mid),var(--navy));color:#fff;height:52px;display:flex;align-items:center;padding:0 16px;gap:12px;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 4px 14px rgba(9,18,32,.22);transition:background 250ms ease}
header.personal-mode{background:linear-gradient(155deg,var(--purple-mid),var(--purple))}
.mode-bar{position:sticky;top:52px;z-index:199;display:flex;background:var(--white);border-bottom:1px solid var(--border)}
.mode-bar-btn{flex:1;border:none;background:transparent;padding:9px 8px;font-size:12.5px;font-weight:700;color:var(--gray);cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;border-bottom:3px solid transparent;transition:background-color 150ms ease,color 150ms ease}
.mode-bar-btn.active[data-mode="hogar"]{color:var(--navy);border-bottom-color:var(--navy-mid);background:var(--navy-light)}
.mode-bar-btn.active[data-mode="personal"]{color:var(--purple);border-bottom-color:var(--purple-mid);background:var(--purple-light)}
.hdr-brand{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.hdr-logo{width:28px;height:28px;background:rgba(255,255,255,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;cursor:pointer;border:none;padding:0;color:#fff;transition:background-color 150ms ease,transform 120ms var(--ease-out)}
.hdr-logo:hover{background:rgba(255,255,255,.28)}
.hdr-logo:active{transform:scale(.92)}
.hdr-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;cursor:pointer}
.hdr-edit{background:transparent;border:none;color:rgba(255,255,255,.55);cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;flex-shrink:0;transition:color 150ms ease,background-color 150ms ease,transform 120ms var(--ease-out)}
.hdr-edit:hover{color:#fff;background:rgba(255,255,255,.12)}
.hdr-edit:active{transform:scale(.9)}
.hdr-sel{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:7px;padding:5px 8px;font-size:12px;color:#fff;font-family:inherit;cursor:pointer;transition:background-color 150ms ease,border-color 150ms ease}
.hdr-sel:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32)}
.hdr-sel option{background:var(--navy)}
.sync-badge{display:flex;align-items:center;gap:5px;font-size:11px;color:rgba(255,255,255,.65);flex-shrink:0;white-space:nowrap}
.sync-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);flex-shrink:0;transition:background-color 200ms ease}
.sync-badge.saving .sync-dot{background:#F0D98A;animation:pulse 1s var(--ease-in-out) infinite}
.sync-badge.ok .sync-dot{background:#7FE0B0}
.sync-badge.error .sync-dot{background:#F09595}
.sync-badge.local .sync-dot{background:rgba(255,255,255,.4)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hdr-drawer-backdrop{position:fixed;inset:0;background:rgba(9,18,32,.45);z-index:299;opacity:0;pointer-events:none;transition:opacity 200ms ease}
.hdr-drawer-backdrop.open{opacity:1;pointer-events:auto}
.hdr-drawer{position:fixed;top:0;left:0;bottom:0;width:270px;max-width:82vw;background:var(--white);z-index:300;box-shadow:4px 0 24px rgba(9,18,32,.25);transform:translateX(-100%);transition:transform 220ms var(--ease-out);display:flex;flex-direction:column;padding:16px;overflow-y:auto}
.hdr-drawer.open{transform:translateX(0)}
.hdr-drawer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.hdr-drawer-title{font-size:14px;font-weight:800;color:var(--navy)}
.hdr-drawer-section{margin-bottom:16px}
.hdr-drawer-label{font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.hdr-drawer-item{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);border:none;background:transparent;width:100%;text-align:left;font-family:inherit;transition:background-color 150ms ease}
.hdr-drawer-item:hover{background:var(--navy-light);color:var(--navy-mid)}
.hdr-drawer-item svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.main-area{display:flex;flex:1}
.sidebar{width:188px;background:var(--white);border-right:1px solid var(--border);position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto;padding:12px 8px;display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--gray);border:none;background:transparent;width:100%;text-align:left;font-family:inherit;transition:background-color 150ms ease,color 150ms ease,box-shadow 150ms ease}
.nav-item svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-item:hover{background:var(--navy-light);color:var(--navy-mid)}
.nav-item.active{background:var(--navy-light);color:var(--navy);font-weight:600;box-shadow:inset 3px 0 0 0 var(--navy-mid)}
.content{flex:1;padding:20px;max-width:100%;overflow-x:hidden;min-width:0}
/* Nav inferior flotante estilo "píldora" (como Instagram): solo íconos, con
   margen respecto a los bordes, y se desliza hacia los lados si no caben
   todos — así no se ve apretado con texto forzado a caber. */
.bottom-nav{display:none;position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:200;max-width:calc(100% - 24px);background:color-mix(in srgb,var(--white) 82%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:999px;height:60px;flex-direction:row;align-items:center;gap:2px;padding:0 6px;box-shadow:0 10px 28px rgba(9,18,32,.2);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bottom-nav::-webkit-scrollbar{display:none}
.bn-item{flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;border-radius:50%;background:transparent;color:var(--gray);font-family:inherit;padding:0;transition:color 150ms ease,background-color 150ms ease}
.bn-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 120ms var(--ease-out)}
.bn-item span{display:none}
.bn-item.active{color:var(--navy);background:var(--navy-light)}
.bn-item:active svg{transform:scale(.88)}
/* Aviso flotante de "en qué vista estás" justo encima del nav inferior —
   en celular el encabezado (que ya cambia de color) queda fuera de vista al
   hacer scroll, así que sin esto no hay forma de saber Hogar vs Personal
   sin subir hasta arriba. pointer-events:none para que nunca tape un toque. */
.mode-badge-float{display:none;position:fixed;left:50%;bottom:82px;transform:translateX(-50%);z-index:199;font-size:11px;font-weight:700;padding:4px 12px;border-radius:999px;color:#fff;background:var(--navy-mid);box-shadow:0 4px 10px rgba(9,18,32,.18);pointer-events:none;white-space:nowrap;transition:background-color 200ms ease}
.mode-badge-float.personal{background:var(--purple-mid)}
@media(max-width:680px){
  .sidebar{display:none}.bottom-nav{display:flex}.content{padding:14px 12px 92px}
  .mode-badge-float{display:block}
  /* iOS hace zoom automático al tocar un campo con letra menor a 16px, y a
     veces se queda así después de guardar — subir el tamaño en celular
     evita el zoom desde el principio, en vez de tener que corregirlo. Los
     filtros de Movimientos tienen su tamaño escrito directo en el HTML
     (más específico que una clase), así que necesitan !important aquí. */
  .form-control{font-size:16px!important}
  .hdr-sel{font-size:16px}
  #filtroTipo,#filtroUsuario,#filtroCategoria,#filtroBusqueda,#filtroDesde,#filtroHasta,#saldoInp{font-size:16px!important}
}
@media(max-width:480px){
  header{padding:0 10px;gap:6px}
  .hdr-controls{gap:4px}
  .sync-badge-text{display:none}
  .sync-badge{gap:0}
  .hdr-sel{padding:5px 6px;font-size:16px}
}
.auth-gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--page-bg);z-index:100;overflow-y:auto}
.auth-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;width:100%;max-width:380px;box-shadow:var(--shadow-lg);margin:auto}
.auth-link{color:var(--navy-mid);font-weight:600;text-decoration:none;cursor:pointer}
.auth-link:hover{text-decoration:underline}
.choco-icon{position:relative;width:52px;height:52px;border-radius:50%;background:var(--navy-light);color:var(--navy-mid);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;flex-shrink:0}
.choco-icon svg{width:26px;height:26px}
.steam-line{animation:steamRise 2.4s ease-in-out infinite;transform-origin:bottom center}
.steam-line:nth-child(2){animation-delay:.5s}
.steam-line:nth-child(3){animation-delay:1s}
@keyframes steamRise{0%{opacity:0;transform:translateY(2px)}35%{opacity:.9}100%{opacity:0;transform:translateY(-6px)}}
.steam-symbol{opacity:0;font-size:6px;font-weight:800;fill:currentColor;stroke:none;text-anchor:middle;animation:symbolFloat 13s ease-in-out infinite}
.steam-symbol:nth-of-type(1){animation-delay:0s}
.steam-symbol:nth-of-type(2){animation-delay:3.25s}
.steam-symbol:nth-of-type(3){animation-delay:6.5s}
.steam-symbol:nth-of-type(4){animation-delay:9.75s}
@keyframes symbolFloat{0%,78%{opacity:0;transform:translateY(3px) scale(.6)}85%{opacity:.9;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-8px) scale(.8)}}
.auth-slogan{font-style:italic;color:var(--navy-mid)}
.co-badge{position:fixed;bottom:14px;right:16px;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--gray);background:var(--white);border:1px solid var(--border);padding:5px 10px;border-radius:99px;box-shadow:var(--shadow);z-index:101}
.co-badge svg{border-radius:2px;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
@media(max-width:480px){.co-badge{right:10px;bottom:10px;font-size:10px;padding:4px 8px}}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--white);color:var(--navy);font-family:inherit;transition:background-color 150ms ease,border-color 150ms ease,box-shadow 150ms ease,transform 120ms var(--ease-out);box-shadow:var(--shadow)}
.btn:hover{background:var(--navy-light);border-color:#9BAEC8;box-shadow:var(--shadow-md)}
.btn:active{transform:scale(.97);box-shadow:var(--shadow)}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-mid);border-color:var(--navy-mid)}
.btn-green{background:var(--green-fill);color:#fff;border-color:var(--green-fill)}
.btn-green:hover{background:#1F7D44}
.btn-danger{background:var(--red-light);color:var(--red);border-color:var(--red-border)}
.btn-danger:hover{background:#F5DADA}
.btn-sm{padding:5px 10px;font-size:12px}
.icon-btn{border:none;background:transparent;cursor:pointer;color:var(--gray);padding:5px;border-radius:6px;display:inline-flex;align-items:center;transition:background-color 150ms ease,color 150ms ease,transform 120ms var(--ease-out)}
.icon-btn:hover{color:var(--navy);background:var(--navy-light)}
.icon-btn:active{transform:scale(.9)}
.icon-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow);transition:box-shadow 200ms ease}
.metric-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);transition:box-shadow 200ms ease}
.metric-label{font-size:11px;color:var(--gray);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.metric-value{font-size:23px;font-weight:700;margin-top:3px;letter-spacing:-.02em}
.section-title{font-size:17px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:5px;font-size:11px;font-weight:600}
.badge-income{background:var(--green-light);color:var(--green);border:1px solid var(--green-border)}
.badge-expense{background:var(--red-light);color:var(--red);border:1px solid var(--red-border)}
.badge-warn{background:var(--amber-light);color:var(--amber);border:1px solid var(--amber-border)}
.badge-ok{background:var(--teal-light);color:var(--teal)}
.badge-info{background:var(--navy-light);color:var(--navy-mid)}
.prog-wrap{background:#E4E9F0;border-radius:99px;height:8px;overflow:hidden}
.prog-bar{height:8px;border-radius:99px;transition:width 500ms var(--ease-out)}
.modal-overlay{position:fixed;inset:0;background:rgba(12,20,33,.55);backdrop-filter:blur(2px);z-index:500;display:flex;align-items:center;justify-content:center;padding:16px;animation:overlayIn 180ms ease-out}
.modal{background:var(--white);border-radius:var(--radius-lg);padding:22px;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;overflow-x:hidden;border:1px solid var(--border);box-shadow:var(--shadow-lg);transform-origin:center;animation:modalIn 220ms var(--ease-out)}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:680px){
  .modal-overlay{align-items:flex-end;padding:0}
  .modal{border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:88vh;border-bottom:none;animation:modalInMobile 260ms var(--ease-drawer)}
}
@keyframes modalInMobile{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.modal-title{font-size:15px;font-weight:700;color:var(--navy)}
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.form-control{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;background:var(--white);color:var(--navy);transition:border-color 150ms ease,box-shadow 150ms ease}
.form-control:hover:not(:focus){border-color:#B7C2D3}
.form-control:focus{outline:none;border-color:var(--navy-mid);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy-mid) 16%,transparent)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}
/* El selector nativo de fecha del celular a veces pide más ancho del que le
   da su contenedor (sobre todo dentro de flex/grid) — esto evita que se
   salga y quede más ancho que los campos de al lado. */
input[type="date"]{max-width:100%;min-width:0;width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none}
@media(max-width:480px){
  .filtro-fecha-rango{width:100%}
  .filtro-fecha-rango input[type="date"]{flex:1;width:auto}
}
.type-toggle{display:flex;background:var(--surface-tint);border-radius:9px;padding:3px;gap:3px}
.type-btn{flex:1;padding:9px;border-radius:7px;border:none;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--gray);background:transparent;display:flex;align-items:center;justify-content:center;gap:6px;transition:background-color 150ms ease,color 150ms ease,transform 120ms var(--ease-out)}
.type-btn:active{transform:scale(.97)}
.type-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.type-btn.ti{background:var(--green-fill);color:#fff}
.type-btn.te{background:var(--red-fill);color:#fff}
.type-btn.tn{background:var(--navy);color:#fff}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);color:var(--gray);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;background:var(--panel-tint)}
td{padding:9px 12px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr td{transition:background-color 120ms ease}
.mov-row-income{background:var(--row-income-bg)}.mov-row-income:hover td{background:var(--row-income-bg-hover)}
.mov-row-expense{background:var(--row-expense-bg)}.mov-row-expense:hover td{background:var(--row-expense-bg-hover)}
.mov-card-income{background:var(--green-light);border:1px solid var(--green-border);border-radius:var(--radius);padding:13px;margin-bottom:8px;transition:box-shadow 200ms ease}
.mov-card-expense{background:var(--red-light);border:1px solid var(--red-border);border-radius:var(--radius);padding:13px;margin-bottom:8px;transition:box-shadow 200ms ease}
.alert{padding:10px 14px;border-radius:var(--radius);font-size:13px;border-left:3px solid}
.alert-info{background:var(--navy-light);color:var(--navy-mid);border-color:var(--navy-mid)}
.alert-warn{background:var(--amber-light);color:var(--amber);border-color:var(--amber)}
.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:5px;font-size:11px;background:var(--surface-tint);color:var(--gray);font-weight:500}
.avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.desktop-table{display:block}.mobile-table{display:none}
@media(max-width:680px){.desktop-table{display:none}.mobile-table{display:block}}
.aporte-tabs{display:flex;background:var(--surface-tint);border-radius:8px;padding:3px;gap:2px}
.aporte-tab{flex:1;padding:7px;border-radius:6px;border:none;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--gray);background:transparent;text-align:center;transition:background-color 150ms ease,color 150ms ease,box-shadow 150ms ease}
.aporte-tab.active{background:var(--white);color:var(--navy);box-shadow:var(--shadow)}
.split-bar-wrap{margin-bottom:4px}
.split-bar{display:flex;position:relative;height:56px;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--surface-tint)}
.split-seg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:52px;overflow:hidden;transition:background-color 200ms ease}
.split-seg-name{font-size:11px;font-weight:700;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.split-seg-pct-wrap{display:flex;align-items:baseline;gap:1px;font-size:13px;font-weight:800}
.split-seg-input{width:32px;background:transparent;border:none;font-family:inherit;font-size:13px;font-weight:800;text-align:right;padding:0;-moz-appearance:textfield}
.split-seg-input::-webkit-outer-spin-button,.split-seg-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.split-seg-input:focus{outline:none}
.split-handle{position:absolute;top:0;bottom:0;width:16px;margin-left:-8px;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none;z-index:2}
.split-handle-grip{width:4px;height:26px;border-radius:99px;background:rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(28,53,83,.18);transition:background-color 150ms ease,transform 120ms var(--ease-out)}
.split-handle:hover .split-handle-grip,.split-handle:active .split-handle-grip{background:#fff;transform:scaleX(1.5)}
.split-bar-hint{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--gray);margin-top:8px}
.split-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px}
.split-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius);background:var(--panel-tint);border:1px solid var(--border)}
.split-chip-name{font-size:12px;font-weight:700}
.split-chip-amt{font-size:14px;font-weight:800;color:var(--navy)}
.split-chip-sub{font-size:10px;font-weight:500;color:var(--gray)}
.split-chip-input{padding:6px 8px;font-size:13px;font-weight:700;width:110px}
.theme-swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.theme-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:2px solid var(--border);border-radius:10px;background:var(--white);cursor:pointer;font-family:inherit;transition:border-color 150ms ease,transform 120ms var(--ease-out)}
.theme-swatch-dot{width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,.04)}
.theme-swatch-label{font-size:11px;color:var(--gray);font-weight:600}
.theme-swatch:hover{border-color:#B7C2D3}
.theme-swatch:active{transform:scale(.96)}
.theme-swatch.active{border-color:var(--navy-mid);background:var(--navy-light)}
.theme-swatch.active .theme-swatch-label{color:var(--navy)}
.fab{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;border:none;background:linear-gradient(155deg,var(--navy-mid),var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-lg);z-index:210;transition:transform 120ms var(--ease-out),box-shadow 200ms ease}
.fab svg{width:24px;height:24px}
.fab:hover{box-shadow:0 14px 32px rgba(16,29,46,.22),0 4px 14px rgba(16,29,46,.12)}
.fab:active{transform:scale(.92)}
@media(max-width:680px){.fab{right:16px;bottom:92px;width:52px;height:52px}}
.fab-mic{position:fixed;right:26px;bottom:86px;width:46px;height:46px;border-radius:50%;background:var(--white);color:var(--navy-mid);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-lg);z-index:210;transition:transform 120ms var(--ease-out),box-shadow 200ms ease,background-color 200ms ease,color 200ms ease}
.fab-mic svg{width:20px;height:20px}
.fab-mic:hover{box-shadow:0 14px 32px rgba(16,29,46,.22)}
.fab-mic:active{transform:scale(.92)}
.fab-mic.mic-listening{background:var(--red);color:#fff;border-color:var(--red);animation:micPulse 1.2s ease-in-out infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(139,26,26,.35)}50%{box-shadow:0 0 0 12px rgba(139,26,26,0)}}
@media(max-width:680px){.fab-mic{right:20px;bottom:154px;width:44px;height:44px}}
.voz-toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);max-width:min(90vw,340px);background:var(--navy);color:#fff;padding:12px 16px;border-radius:12px;font-size:12.5px;line-height:1.5;box-shadow:var(--shadow-lg);z-index:216;text-align:center;animation:vozToastIn 180ms var(--ease-out)}
.voz-toast.warn{background:var(--red)}
@keyframes vozToastIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media(max-width:680px){.voz-toast{bottom:212px}}
@media(hover:hover) and (pointer:fine){
  .card:hover{box-shadow:var(--shadow-md)}
  .metric-card:hover{box-shadow:var(--shadow-md)}
  .mov-card-income:hover,.mov-card-expense:hover{box-shadow:var(--shadow-md)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}