/* Mismo sistema de diseño ya validado en el rediseño de index.html (paleta
   "papel cálido" con soporte claro/oscuro). Ver ese archivo para el detalle
   de por qué se eligió esta paleta. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* Cero estilos de foco de teclado en toda la app — navegar solo con teclado
   era efectivamente imposible, sin ninguna indicación visual de qué
   elemento tenía el foco (auditoría #13.1). Una sola regla global. */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
:root{
  --bg:#f6f3ee; --card:rgba(255,255,255,.74); --card-strong:#ffffff; --surface:#ffffff;
  --field:rgba(24,18,8,.045); --field-border:rgba(24,18,8,.14); --line:rgba(24,18,8,.12);
  --ink:#1c1914; --muted:#6b6255; --faint:#948b7c;
  --red:#c53d3d; --green:#0e8f5c; --blue:#3d6ea0; --gold:#a8703a;
  --red-soft:rgba(197,61,61,.12); --green-soft:rgba(14,143,92,.12); --gold-soft:rgba(168,112,58,.14);
  --r-lg:24px; --r-md:16px; --r-sm:12px; --r-pill:999px;
  --font-sans:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',system-ui,sans-serif;
  --font-display:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,serif;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#09090b; --card:rgba(24,24,27,.66); --card-strong:#18181b; --surface:#18181b;
    --field:rgba(255,255,255,.06); --field-border:rgba(255,255,255,.1); --line:rgba(255,255,255,.08);
    --ink:#f4f4f5; --muted:#8d8d95; --faint:#57575f; --red:#f87171; --green:#34d399; --blue:#7ab3e8; --gold:#cf9d5f;
    --red-soft:rgba(248,113,113,.14); --green-soft:rgba(52,211,153,.14); --gold-soft:rgba(207,157,95,.16); }
}
:root[data-theme="dark"]{ --bg:#09090b; --card:rgba(24,24,27,.66); --card-strong:#18181b; --surface:#18181b;
  --field:rgba(255,255,255,.06); --field-border:rgba(255,255,255,.1); --line:rgba(255,255,255,.08);
  --ink:#f4f4f5; --muted:#8d8d95; --faint:#57575f; --red:#f87171; --green:#34d399; --blue:#7ab3e8; --gold:#cf9d5f;
  --red-soft:rgba(248,113,113,.14); --green-soft:rgba(52,211,153,.14); --gold-soft:rgba(207,157,95,.16); }
:root[data-theme="light"]{ --bg:#f6f3ee; --card:rgba(255,255,255,.74); --card-strong:#ffffff; --surface:#ffffff;
  --field:rgba(24,18,8,.045); --field-border:rgba(24,18,8,.14); --line:rgba(24,18,8,.12);
  --ink:#1c1914; --muted:#6b6255; --faint:#948b7c; --red:#c53d3d; --green:#0e8f5c; --blue:#3d6ea0; --gold:#a8703a;
  --red-soft:rgba(197,61,61,.12); --green-soft:rgba(14,143,92,.12); --gold-soft:rgba(168,112,58,.14); }

body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:13.5px;-webkit-font-smoothing:antialiased}
button,input,select{font-family:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:var(--font-display)}

.app-shell{display:flex;width:100%;min-height:100vh}
.sidebar{width:230px;flex:none;background:var(--card-strong);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.hamburger-btn{display:none}
.sidebar-overlay{display:none}
/* Tablet (601-860px): antes saltaba directo de "oculta tras hamburguesa" a
   los 230px fijos de escritorio, desperdiciando el espacio de sobra que sí
   hay en este rango — la sidebar queda visible/fija pero angosta
   (auditoría #12.1). */
@media (min-width:601px) and (max-width:860px){
  .sidebar{width:172px;padding:18px 10px}
  .brand{font-size:14px}
  .brand-sub{font-size:9px}
  .nav-item{padding:9px 8px;font-size:12px}
  .hbtn{font-size:10px;padding:9px 6px}
}
/* Sidebar responsive: en pantallas angostas queda oculta fuera de pantalla
   (off-canvas) y se abre con el botón hamburguesa — igual que index.html.
   A partir de 601px el comportamiento pasa a sidebar fija (angosta en
   tablet, ver arriba; 230px en escritorio arriba de 860px). */
@media (max-width:600px){
  .hamburger-btn{position:fixed;top:16px;left:16px;z-index:90;width:44px;height:44px;border-radius:999px;background:var(--card-strong);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:18px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4)}
  .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;opacity:0;pointer-events:none;transition:opacity .25s}
  .sidebar-overlay.show{opacity:1;pointer-events:auto}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:250px;z-index:80;padding-top:76px;transform:translateX(-100%);transition:transform .28s ease;overflow-y:auto}
  .sidebar.open{transform:translateX(0)}
  .app-main{padding-top:68px}
}
.brand{font-size:16px;font-weight:700}
.brand-sub{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.nav{list-style:none;display:flex;flex-direction:column;gap:3px}
.nav-group-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--faint);padding:12px 10px 2px}
.nav-item{padding:10px 12px;border-radius:12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.nav-item:hover{background:var(--field)}
.nav-item.active{background:var(--gold-soft);color:var(--gold)}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:1px solid var(--line)}
.hbtn{width:100%;padding:10px;border-radius:12px;border:1px solid var(--field-border);background:var(--field);color:var(--muted);font-size:11px;font-weight:600}

.app-main{flex:1;min-width:0;padding:26px 32px 60px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);backdrop-filter:blur(18px)}
.card-pad{padding:18px 20px}
.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.stat{padding:16px 18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.stat .label{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.stat .value{font-family:var(--font-display);font-size:21px;font-weight:600;margin-top:4px}
.stat .value.success{color:var(--green)} .stat .value.danger{color:var(--red)}
.stat .foot{font-size:11px;color:var(--muted);margin-top:4px}

.hero-balance{background:var(--card-strong);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hero-label{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.hero-amount{font-family:var(--font-display);font-size:34px;font-weight:600}
.hero-amount.success{color:var(--green)} .hero-amount.danger{color:var(--red)}
.hero-desc{font-size:12px;color:var(--muted);margin-top:6px;max-width:300px}
.hero-side{display:flex;gap:16px}
.hero-side .mini{display:flex;flex-direction:column;gap:2px}
.hero-side .k{font-size:10px;color:var(--faint);text-transform:uppercase}
.hero-side .v{font-size:14px;font-weight:700}

.breakdown-box{background:var(--field);border:1px solid var(--field-border);border-radius:var(--r-md);padding:14px 16px;margin-top:10px;display:flex;flex-direction:column;gap:8px}
.breakdown-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.breakdown-row .v{font-weight:650;color:var(--ink)}
.balance-hint{font-size:11.5px;padding:8px 10px;border-radius:8px}
.balance-hint.ok{background:var(--green-soft);color:var(--green)}
.balance-hint.bad{background:var(--red-soft);color:var(--red)}

.pill{display:inline-flex;padding:3px 9px;border-radius:var(--r-pill);font-size:10.5px;font-weight:700}
.pill.success{background:var(--green-soft);color:var(--green)}
.pill.danger{background:var(--red-soft);color:var(--red)}
.pill.neutral{background:var(--field);color:var(--muted)}
.pill.accent{background:var(--gold-soft);color:var(--gold)}

.btn{border:1px solid var(--field-border);background:var(--field);color:var(--ink);padding:9px 16px;border-radius:var(--r-md);font-size:13px;font-weight:600}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--muted)}
.btn.danger-outline{background:transparent;border-color:var(--red);color:var(--red)}
/* Usado 11 veces en las vistas (Pendientes, Cuentas, Papelera, Movimientos)
   pero nunca tuvo su propia regla — renderizaban al tamaño default de .btn
   en vez del tamaño compacto que el nombre de la clase sugiere (auditoría #3.1). */
.btn.sm{padding:6px 11px;font-size:11.5px;border-radius:8px}
input.field,select.field{width:100%;padding:11px 13px;border-radius:var(--r-md);border:1px solid var(--field-border);background:var(--field);color:var(--ink);font-size:13.5px}

.stepper{display:flex;align-items:center;gap:0;margin-bottom:16px;flex-wrap:wrap}
.step-node{display:flex;align-items:center;gap:8px}
.step-node .circle{width:24px;height:24px;border-radius:50%;border:1px solid var(--field-border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--faint);background:var(--field)}
.step-node.active .circle{background:var(--gold);border-color:var(--gold);color:#fff}
.step-node.done .circle{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.step-line{flex:1;height:1px;background:var(--field-border);margin:0 10px;min-width:16px}

/* Secciones colapsables de Inicio — <details> nativo, sin JS propio: los 4
   KPIs principales quedan siempre visibles, el resto (matriz de dinero, por
   artista, caja, actividad) plegado por default para reducir la carga
   cognitiva de la pantalla con más densidad de información (auditoría #16.2). */
.dash-section summary{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700;cursor:pointer;padding:4px 0}
.dash-section summary::-webkit-details-marker{color:var(--faint)}
.dash-section[open] summary{margin-bottom:2px}

.entity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.entity{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px}
.entity .name{font-weight:700;font-size:13.5px}
.entity .tag{font-size:11px;color:var(--faint)}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--card-strong);border:1px solid var(--line);color:var(--ink);padding:12px 22px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s;z-index:999}
.toast.show{opacity:1}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-panel{background:var(--card-strong);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto}
.modal-panel h3{margin-bottom:14px;font-size:16px}

.view{display:none}
.view.active{display:block}

/* ============================================================================
   AUTH — pantalla de login / set-password. Gateway de marca "20": deliberadamente
   oscura y fija (no sigue el toggle claro/oscuro del resto de la app — ver
   CLAUDE.md, "el branding 20 solo existe en la autenticación"). Variables
   propias (--a-*) en vez de las --bg/--ink globales para no acoplarse al
   theming del resto de la app ni verse afectada si ese theming cambia.
   ============================================================================ */
.login-shell{
  --a-ink:#f3f1ea; --a-muted:#9c9c9a; --a-faint:#6c6c6a;
  --a-card:rgba(255,255,255,.035); --a-card-border:rgba(255,255,255,.08);
  --a-field:rgba(255,255,255,.05); --a-field-border:rgba(255,255,255,.1); --a-field-focus:rgba(255,255,255,.24);
  --a-accent:#7f9975; --a-accent-hover:#71896a; --a-accent-soft:#aac0a1;
  --a-warn:#cf9d5f; --a-warn-soft:rgba(207,157,95,.14);
  --a-glow:rgba(180,205,168,.5);
  min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;padding:32px;
  background:
    radial-gradient(circle at 50% 8%, rgba(180,205,168,.2), transparent 52%),
    radial-gradient(circle at 50% 100%, rgba(0,0,0,.6), transparent 65%),
    #08090a;
  color:var(--a-ink);
}
.login-shell :focus-visible{outline-color:var(--a-accent-soft)}
.auth-card{
  position:relative;width:100%;max-width:560px;min-width:0;
  background:var(--a-card);border:1px solid var(--a-card-border);border-radius:36px;
  padding:56px 56px 48px;backdrop-filter:blur(20px);
  box-shadow:0 40px 100px -24px rgba(0,0,0,.7);
  display:flex;flex-direction:column;align-items:center;
}
@media (max-width:640px){
  .login-shell{padding:16px}
  .auth-card{padding:40px 28px 32px;border-radius:26px}
}
.auth-card h1{font-family:var(--font-sans);font-size:28px;font-weight:800;color:var(--a-ink);text-align:center;letter-spacing:-.015em}
.auth-subtitle{font-size:14.5px;color:var(--a-muted);text-align:center;margin:8px 0 36px}
.auth-warning{width:100%;background:var(--a-warn-soft);color:var(--a-warn);border:1px solid rgba(207,157,95,.25);padding:11px 14px;border-radius:14px;font-size:12.5px;text-align:center;margin-bottom:18px;line-height:1.4}
.auth-field-wrap{position:relative;width:100%;margin-bottom:16px}
.auth-field-wrap .auth-field-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--a-faint);pointer-events:none}
.auth-input{width:100%;padding:18px 20px 18px 52px;border-radius:16px;border:1px solid var(--a-field-border);background:var(--a-field);color:var(--a-ink);font-size:15px;transition:border-color .15s,background .15s}
.auth-input::placeholder{color:var(--a-muted)}
.auth-input:focus{outline:none;border-color:var(--a-field-focus);background:rgba(255,255,255,.07)}
.auth-field-wrap:has(.auth-toggle-pass) .auth-input{padding-right:50px}
.auth-toggle-pass{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--a-faint);border-radius:10px}
.auth-toggle-pass svg{width:19px;height:19px}
.auth-toggle-pass:hover{color:var(--a-muted);background:rgba(255,255,255,.06)}
.login-error{display:none}
.login-shell .login-error{width:100%;background:rgba(229,115,115,.12);color:#eda3a3;padding:12px 14px;border-radius:14px;margin:2px 0 6px;font-size:13px;line-height:1.4;text-align:center}
.login-shell .btn.primary{width:100%;padding:18px;border-radius:16px;background:var(--a-accent);border:1px solid var(--a-accent);color:#fff;font-size:15.5px;font-weight:700;margin-top:12px;box-shadow:0 14px 28px -10px rgba(127,153,117,.55)}
.login-shell .btn.primary:hover{background:var(--a-accent-hover);border-color:var(--a-accent-hover)}
.auth-link{margin-top:24px;background:none;border:none;padding:4px;color:var(--a-accent-soft);font-size:14px;font-weight:600}
.auth-link:hover{text-decoration:underline}

/* ============================================================================
   A partir de acá: lo que era prototipo.css — estilos propios del modelo
   financiero v2 (Caja/Banco, dirección, flujo/stock, filas de Libro Mayor,
   zona de peligro). Va DESPUÉS a propósito: el modal-as-página de acá abajo
   (pedido del negocio 2026-07-30) reemplaza deliberadamente la regla
   .modal-overlay/.modal-panel de arriba en TODA la app, no solo en una parte.
   ============================================================================ */

.switch-wrap{display:flex; flex-direction:column; gap:4px}
.switch-label{font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; font-weight:700}

.sede-switch{display:flex; gap:6px; flex-wrap:wrap}
.sede-switch .btn{flex:1; padding:7px 4px; font-size:11px}

/* Distinción FLUJO vs STOCK — DOMAIN principio #13: ninguna cifra sin
   aclarar a cuál de las dos categorías pertenece. */
.bloque-etiqueta{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  padding:5px 0; margin-bottom:8px; display:flex; align-items:center; gap:8px;
}
.bloque-etiqueta.flujo{color:var(--blue)}
.bloque-etiqueta.stock{color:var(--gold)}
.nota-principio{font-size:10px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--faint)}

.filtros-mov{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px}
.filtros-mov .field{width:auto; min-width:150px; flex:1}

.fila-mov{
  display:flex; flex-direction:column; gap:6px; padding:14px 20px; border-bottom:1px solid var(--line);
}
.fila-mov:last-child{border-bottom:none}
.fila-mov-izq{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.fila-mov-cuenta{font-weight:700; font-size:12.5px}
.fila-mov-fecha{font-size:11px; color:var(--muted)}
.fila-mov-frase{font-size:12px; color:var(--muted)}
.fila-mov-der{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.fila-mov-monto{font-weight:700; font-size:14px}
.fila-mov-acciones{display:flex; gap:8px; flex-wrap:wrap}

.danger-zone{
  margin-top:12px; padding-top:10px; border-top:1px dashed var(--red);
}
.danger-zone-label{font-size:9.5px; color:var(--red); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; font-weight:700}

.alerta-desactualizado{
  margin-top:10px; padding:10px 12px; border-radius:10px;
  background:var(--red-soft); color:var(--red); font-size:12px; line-height:1.5;
}

.entity-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px}

/* Modal como página fija — pedido del negocio 2026-07-30, segunda vuelta:
   en vez de una tarjeta flotante de max-width:420px centrada sobre un fondo
   oscurecido, cualquier modal de la app se siente como una página propia,
   fija, del mismo fondo que el resto de la app. Ningún campo/botón/lógica de
   ningún modal cambia — esto es exclusivamente el contenedor. */
.modal-overlay{padding:0;background:var(--bg)}
.modal-panel{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}