/* ========================================
   MONEL v2 — SISTEMA DE DISEÑO
   Oscuro (OLED), verde de marca, IBM Plex Sans.
   ======================================== */

/* ---------- Tokens ---------- */
:root {
    color-scheme: dark;

    /* Superficies: oscuro premium. Los colores de los gráficos están validados
       contra --c-surface; si cambia, correr scripts/validar-paleta.mjs. */
    --c-bg: #0d1117;
    --c-surface: #161b22;
    --c-surface-2: #1c222b;
    --c-surface-3: #242b36;
    --c-surface-4: #2d3542;
    --c-line: #21262d;
    --c-line-strong: #30363d;

    --c-text: #f0f6fc;
    --c-text-2: #aeb7c1;
    --c-text-3: #8b949e;

    --c-brand: #00f0a0;
    --c-brand-press: #00d68f;
    --c-brand-soft: rgba(0, 240, 160, 0.12);
    --c-on-brand: #03140d;

    --c-ok: #2ee59d;
    --c-ok-soft: rgba(46, 229, 157, 0.14);
    --c-warn: #ffb547;
    --c-warn-soft: rgba(255, 181, 71, 0.14);
    --c-danger: #ff5c72;
    --c-danger-soft: rgba(255, 92, 114, 0.14);
    --c-info: #62aeff;
    --c-info-soft: rgba(98, 174, 255, 0.12);

    /* Fuente del sistema: SF Pro en iPhone/iPad/Mac, sin descarga */
    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 14px;
    --fs-base: 16px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 28px;
    --fs-hero: 34px;

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 999px;

    --dur: 180ms;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    --z-header: 20;
    --z-nav: 30;
    --z-fab: 35;
    --z-sheet: 50;
    --z-toast: 60;

    --header-h: 60px;
    --nav-h: 64px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* En la app nativa la franja superior del sistema (hora, batería) es zona
   muerta: nunca menos de 24 px, diga lo que diga env(). Se construye hacia
   abajo a partir de ahí. */
html.nativo { --safe-top: max(env(safe-area-inset-top, 0px), 24px); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    background: var(--c-bg);
}

html.bloqueado { overflow: hidden; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, p { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

button:disabled { cursor: not-allowed; }

a { color: var(--c-brand); }

:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.positivo { color: var(--c-ok); }
.negativo { color: var(--c-danger); }
.texto-2 { color: var(--c-text-2); }
.texto-3 { color: var(--c-text-3); }

/* ---------- Carga inicial ---------- */
.app-cargando {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    color: var(--c-text-3);
    font-size: var(--fs-md);
}

.app-mensaje {
    max-width: 440px;
    margin: 20vh auto 0;
    padding: 0 var(--s-6);
    text-align: center;
    color: var(--c-text-2);
}

.app-mensaje h1 { color: var(--c-text); font-size: var(--fs-xl); margin-bottom: var(--s-3); }

/* ========================================
   SHELL
   ======================================== */
/* La app solo se muestra con sesión iniciada; antes se ve el login.
   Se oculta desde el estado "sin sesión" para no competir con el display
   que define .app (bloque en móvil, rejilla de dos columnas en escritorio). */
body:not(.authenticated) #app { display: none; }

.app { min-height: 100dvh; }

.barra-lateral { display: none; }

.cabecera {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s-2);
    min-height: calc(var(--header-h) + var(--safe-top));
    /* Esquina simétrica en teléfono: 12 px a la izquierda y 12 bajo la franja
       del sistema (5 de relleno + 7 que aporta centrar la marca de 30 px en la
       fila de 44). 5 + 44 + 11 = 60, la altura mínima, para que no sobre. */
    padding: calc(var(--safe-top) + 5px) var(--s-3) 11px;
    background: rgba(13, 17, 23, 0.86);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    backdrop-filter: saturate(140%) blur(16px);
    border-bottom: 1px solid var(--c-line);
}

/* Marca: ícono de MONEL (sin fondo) + el nombre, a la izquierda del mes.
   En teléfono va pequeño porque compite con el navegador de meses; en tablet
   hay sitio de sobra y además se separa de la barra de estado del iPad. */
.marca {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 0;
}

.marca-icono { display: block; width: 30px; height: 30px; }

.marca-texto {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--c-text);
}

@media (min-width: 600px) {
    .marca { gap: 10px; }
    .marca-icono { width: 36px; height: 36px; }
    .marca-texto { font-size: 18px; }
    /* Esquinas simétricas: la marca queda a 20 px del borde izquierdo y a
       20 px por debajo de la franja muerta del sistema. La fila mide 44 px
       (navegador de meses) y la marca 36, así que el centrado aporta 4 px:
       16 de relleno + 4 = 20. */
    .cabecera { padding: calc(var(--safe-top) + 16px) 20px 14px; }
}

.cabecera-acciones {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.contenido {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--s-4) var(--s-4) calc(var(--nav-h) + var(--safe-bottom) + 104px);
    outline: none;
}

.vista-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.titulo-vista {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Navegación inferior (móvil) */
.nav-inferior {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-nav);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + var(--safe-bottom));
    background: rgba(11, 14, 19, 0.94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--c-line);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    border-radius: var(--r-md);
    color: var(--c-text-3);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color var(--dur) var(--ease);
}

.nav-item-icono {
    display: grid;
    place-items: center;
    width: 52px;
    height: 28px;
    border-radius: var(--r-pill);
    font-size: 17px;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav-item:hover { color: var(--c-text-2); }
.nav-item[aria-current="page"] { color: var(--c-text); font-weight: 600; }
.nav-item[aria-current="page"] .nav-item-icono { background: var(--c-brand-soft); color: var(--c-brand); }

/* Botón flotante */
.boton-flotante {
    position: fixed;
    right: var(--s-4);
    bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--s-4));
    z-index: var(--z-fab);
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--c-brand);
    color: var(--c-on-brand);
    font-size: 22px;
    box-shadow: 0 8px 24px rgba(0, 240, 160, 0.22), 0 4px 14px rgba(0, 0, 0, 0.55);
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.boton-flotante:hover { background: var(--c-brand-press); }
.boton-flotante:active { transform: scale(0.95); }

/* Navegador de meses */
.nav-mes { display: flex; align-items: center; }

.nav-mes-flecha {
    display: grid;
    place-items: center;
    width: 40px;
    height: 44px;
    border-radius: var(--r-md);
    color: var(--c-text-2);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav-mes-flecha:hover { background: var(--c-surface-2); color: var(--c-text); }

.nav-mes-actual {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 132px;
    min-height: 44px;
    padding: 3px 10px;
    border-radius: var(--r-md);
    line-height: 1.2;
    transition: background var(--dur) var(--ease);
}

.nav-mes-actual:hover { background: var(--c-surface-2); }

.nav-mes-nombre {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-base);
    font-weight: 600;
    white-space: nowrap;
}

.nav-mes-nombre i { font-size: 10px; color: var(--c-text-3); }

/* El nombre corto solo aparece en pantallas muy angostas (ver abajo) */
.nav-mes-corto { display: none; }

.nav-mes-contexto { font-size: 11px; font-weight: 500; color: var(--c-text-3); }
.nav-mes-contexto[data-tipo="actual"] { color: var(--c-brand); }
.nav-mes-contexto[data-tipo="futuro"] { color: var(--c-info); }

/* Estado de guardado y avatar */
.estado-guardado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-3);
    background: var(--c-surface-2);
}

.estado-guardado[data-estado="guardado"] i { color: var(--c-ok); }
.estado-guardado[data-estado="demo"] { color: var(--c-info); background: var(--c-info-soft); }
.estado-guardado[data-estado="sin-conexion"],
.estado-guardado[data-estado="conflicto"] { color: var(--c-warn); background: var(--c-warn-soft); }
.estado-guardado[data-estado="error"] { color: var(--c-danger); background: var(--c-danger-soft); }

.avatar-boton {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--c-surface-4);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.avatar-boton:hover .avatar { background: #313a49; }

@media (max-width: 420px) {
    .estado-guardado .estado-guardado-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
    .estado-guardado { width: 32px; padding: 0; justify-content: center; }
    .marca { margin-left: 0; }
    .nav-mes-actual { min-width: 112px; padding: 3px 4px; }
    .nav-mes-flecha { width: 36px; }
}

/* Teléfonos muy angostos (320-360 px): "Septiembre 2026" no cabe junto a la
   marca, las flechas y las acciones, así que el mes se abrevia. El aria-label
   del botón conserva el nombre completo, y las áreas táctiles no se tocan. */
/* En teléfonos el mes se abrevia ("Sep 2026") para que quepa junto al
   logotipo, las flechas y las acciones. El aria-label del botón conserva el
   nombre completo del mes, así que un lector de pantalla no pierde nada, y las
   áreas táctiles de 44 px no se tocan. Va después del bloque de 420 px para
   ganarle el min-width. */
@media (max-width: 430px) {
    .nav-mes-largo { display: none; }
    .nav-mes-corto { display: inline; }
    .nav-mes-actual { min-width: 0; }
}

/* Teléfonos muy angostos (320-370 px): se aprieta además el encabezado. */
@media (max-width: 370px) {
    .cabecera { gap: var(--s-1); padding-left: var(--s-1); padding-right: var(--s-1); }
    .marca-texto { display: none; }
}

/* Escritorio */
@media (min-width: 960px) {
    .app {
        display: grid;
        grid-template-columns: 248px minmax(0, 1fr);
    }

    .barra-lateral {
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        gap: var(--s-4);
        height: 100dvh;
        /* Arriba: la franja del sistema + 24 px; a la izquierda, 16 + 8 de la
           marca = 24 px. Esquina simétrica. */
        padding: calc(var(--s-6) + var(--safe-top)) var(--s-4) var(--s-6);
        border-right: 1px solid var(--c-line);
        background: var(--c-surface);
    }

    .marca-lateral {
        /* La barra lateral es flex en columna: sin esto el bloque se estira */
        align-self: flex-start;
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 var(--s-2) var(--s-2);
    }

    .marca-lateral .marca-icono { width: 44px; height: 44px; }
    .marca-lateral .marca-texto { font-size: 22px; }

    .nav-lateral { display: flex; flex-direction: column; gap: 2px; }

    .nav-lateral .nav-item {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--s-3);
        min-height: 44px;
        padding: 0 var(--s-3);
        font-size: var(--fs-md);
    }

    .nav-lateral .nav-item-icono { width: 24px; height: 24px; background: none !important; font-size: 16px; }
    .nav-lateral .nav-item[aria-current="page"] { background: var(--c-surface-3); }
    .nav-lateral .nav-item:hover { background: var(--c-surface-2); }

    .lateral-pie { margin-top: auto; }

    .usuario-chip {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: var(--s-3);
        width: 100%;
        min-height: 56px;
        padding: var(--s-2);
        border-radius: var(--r-md);
        text-align: left;
    }

    .usuario-chip:hover { background: var(--c-surface-2); }
    .usuario-chip-nombre { font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .usuario-chip-email { font-size: var(--fs-xs); color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .nav-inferior, .boton-flotante, .cabecera .marca, .cabecera .avatar-boton { display: none; }

    /* Aquí la marca vive en la barra lateral, así que el encabezado queda con
       dos hijos: mes a la izquierda y acciones pegadas al borde derecho. Con
       tres columnas, las acciones caían en la del medio. */
    .cabecera {
        grid-template-columns: auto minmax(0, 1fr);
        padding: calc(var(--s-3) + var(--safe-top)) var(--s-8) var(--s-3);
    }
    .contenido { padding: var(--s-6) var(--s-8) var(--s-10); }
}

/* ========================================
   COMPONENTES
   ======================================== */

/* Tarjetas y secciones */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--s-4);
}

.card + .card { margin-top: var(--s-3); }

/* Dentro de una rejilla las tarjetas ya están separadas por el gap:
   el margen de apilado las desalinearía verticalmente. */
.rejilla .card + .card,
.totales-mes .card + .card { margin-top: 0; }

.seccion { margin-top: var(--s-6); }

.seccion-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text-2);
}

.rejilla { display: grid; gap: var(--s-3); }

@media (min-width: 720px) {
    .rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur);
}

.btn-primario { background: var(--c-brand); color: var(--c-on-brand); }
.btn-primario:hover { background: var(--c-brand-press); }
.btn-secundario { background: var(--c-surface-3); color: var(--c-text); }
.btn-secundario:hover { background: var(--c-surface-4); }
.btn-borde { border-color: var(--c-line-strong); color: var(--c-text); }
.btn-borde:hover { background: var(--c-surface-2); }
.btn-fantasma { color: var(--c-brand); padding: 0 12px; }
.btn-fantasma:hover { background: var(--c-brand-soft); }
.btn-peligro { background: var(--c-danger-soft); color: var(--c-danger); }
.btn-peligro:hover { background: rgba(255, 92, 114, 0.22); }
.btn-bloque { width: 100%; }
.btn-pequeno { min-height: 36px; padding: 0 12px; font-size: var(--fs-md); }
.btn:disabled { opacity: 0.5; }

.btn.cargando { position: relative; color: transparent !important; }
.btn.cargando::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-color: var(--c-text-2) transparent var(--c-text-2) transparent;
    border-radius: 50%;
    animation: girar 700ms linear infinite;
}

.btn-icono {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    color: var(--c-text-2);
    font-size: 16px;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn-icono:hover { background: var(--c-surface-3); color: var(--c-text); }

.grupo-botones { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Chips */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    background: var(--c-surface-3);
    color: var(--c-text-2);
    font-size: var(--fs-md);
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.chip i { color: var(--chip-color, var(--c-text-3)); font-size: 13px; }
.chip:hover { color: var(--c-text); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.chip-radio { position: relative; }
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio input:checked + .chip {
    background: var(--chip-bg, var(--c-brand-soft));
    border-color: var(--chip-color, var(--c-brand));
    color: var(--c-text);
}
.chip-radio input:focus-visible + .chip { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* Etiquetas de estado */
.estado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.estado-pagado { background: var(--c-ok-soft); color: var(--c-ok); }
.estado-pendiente { background: var(--c-warn-soft); color: var(--c-warn); }
.estado-info { background: var(--c-info-soft); color: var(--c-info); }
.estado-neutro { background: var(--c-surface-3); color: var(--c-text-2); }

/* Listas */
.lista {
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 64px;
    padding: 10px 14px;
    border-top: 1px solid var(--c-line);
    text-align: left;
}

.item:first-child { border-top: 0; }
button.item:hover, a.item:hover { background: var(--c-surface-2); }

.item-icono {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--icono-bg, var(--c-surface-3));
    color: var(--icono-color, var(--c-text-2));
    font-size: 15px;
}

.item-cuerpo { display: block; min-width: 0; }
.item-titulo { display: block; font-size: var(--fs-base); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-sub { display: block; font-size: var(--fs-sm); color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.item-monto { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Casilla de pagado */
.check {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -8px;
    border-radius: 50%;
}

.check-circulo {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 2px solid var(--c-line-strong);
    border-radius: 50%;
    color: transparent;
    font-size: 12px;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur);
}

.check[aria-checked="true"] .check-circulo { background: var(--c-ok); border-color: var(--c-ok); color: #04140c; }
.check:hover .check-circulo { border-color: var(--c-ok); }

/* Montos grandes y estadísticas */
.monto-hero {
    font-size: var(--fs-hero);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.etiqueta-suave { font-size: var(--fs-md); color: var(--c-text-2); }

.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-2);
    margin-top: var(--s-4);
}

.stat-etiqueta { font-size: var(--fs-xs); color: var(--c-text-3); font-weight: 500; }
.stat-valor { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Resumen del mes: cifras a la izquierda, dona a la derecha, barra abajo.
   En teléfono la dona acompaña solo al titular; desde tablet abarca también
   las estadísticas. */
.resumen-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titulo dona" "stats stats" "barra barra";
    column-gap: var(--s-4);
    align-items: center;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(0, 240, 160, 0.09), transparent 60%),
        var(--c-surface);
}

.resumen-hero.sin-dona { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "stats" "barra"; }
.resumen-hero-titulo { grid-area: titulo; min-width: 0; }
.resumen-hero > .stats { grid-area: stats; }
.resumen-hero-barra { grid-area: barra; margin-top: 12px; }

/* Dona del resumen: mismo lenguaje que la barra (relleno / rayado / pista) */
.dona-resumen {
    --dona-color: var(--c-ok);
    grid-area: dona;
    position: relative;
    width: 104px;
    height: 104px;
}

.dona-resumen[data-estado="excedido"] { --dona-color: var(--c-danger); }
.dona-resumen svg { display: block; width: 100%; height: 100%; }
.dona-resumen-pista { stroke: var(--c-surface-4); }
.dona-resumen-pagado { stroke: var(--dona-color); }
.dona-resumen-pista-rayas { fill: var(--c-surface-4); }
.dona-resumen-color { fill: var(--dona-color); }

.dona-resumen-centro {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1.05;
    pointer-events: none;
}

.dona-resumen-centro b { font-size: var(--fs-lg); font-weight: 700; }
.dona-resumen-centro span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3); }
.dona-resumen[data-estado="excedido"] .dona-resumen-centro b { color: var(--c-danger); }

@media (min-width: 600px) {
    .resumen-hero { grid-template-areas: "titulo dona" "stats dona" "barra barra"; }
    .dona-resumen { width: 136px; height: 136px; }
    .dona-resumen-centro b { font-size: var(--fs-xl); }
}

/* Barra de progreso (presupuesto)
   La pista entera lleva el gradiente verde→ámbar; "pendiente" es una capa
   rayada del color de la pista encima, y "resto" tapa lo que no se ha usado.
   Así el color en cualquier punto depende de la posición en el límite, no de
   dónde termine el relleno. Al excederse, la pista pasa a rojo. */
.barra {
    --barra-color: var(--c-ok);
    --barra-glow: rgba(0, 240, 160, 0.22);
    position: relative;
    height: 10px;
    margin: 6px 0;
}

.barra-pista {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--c-ok) 0%, var(--c-warn) 100%);
    box-shadow: 0 0 14px var(--barra-glow);
}

.barra-pendiente,
.barra-resto {
    position: absolute;
    top: 0;
    bottom: 0;
    transition: left 300ms var(--ease), width 300ms var(--ease);
}

.barra-pendiente { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--c-surface-4) 4px 8px); }
.barra-resto { right: 0; background: var(--c-surface-4); }

.barra[data-estado="alerta"] { --barra-glow: rgba(255, 181, 71, 0.22); }
.barra[data-estado="excedido"] { --barra-glow: rgba(255, 92, 114, 0.26); }
.barra[data-estado="excedido"] .barra-pista { background: var(--c-danger); }
.barra[data-estado="sin-limite"] { --barra-glow: transparent; }
.barra[data-estado="sin-limite"] .barra-pista { background: var(--c-text-3); }
.barra[data-estado="en-progreso"] { --barra-glow: rgba(98, 174, 255, 0.22); }
.barra[data-estado="en-progreso"] .barra-pista { background: var(--c-info); }
.barra[data-estado="cumplido"] .barra-pista,
.barra-avance .barra-pista { background: var(--c-ok); }

/* Leyenda: una pieza por zona, con una muestra que imita la zona */
.barra-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 6px;
    font-size: var(--fs-xs);
    color: var(--c-text-2);
}

.barra-clave { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.barra-clave b { color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; }

.muestra { display: inline-block; width: 14px; height: 8px; border-radius: 3px; flex: none; }
.muestra-pagado { background: linear-gradient(90deg, var(--c-ok), var(--c-warn)); }
.muestra-pendiente { background: repeating-linear-gradient(135deg, var(--c-ok) 0 3px, var(--c-surface-4) 3px 6px); }
.muestra-resto { background: var(--c-surface-4); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.muestra-exceso { background: var(--c-danger); }

.barra-leyenda[data-estado="excedido"] .muestra-pagado { background: var(--c-danger); }
.barra-leyenda[data-estado="excedido"] .muestra-pendiente { background: repeating-linear-gradient(135deg, var(--c-danger) 0 3px, var(--c-surface-4) 3px 6px); }
.barra-leyenda[data-estado="sin-limite"] .muestra-pagado { background: var(--c-text-3); }
.barra-leyenda[data-estado="sin-limite"] .muestra-pendiente { background: repeating-linear-gradient(135deg, var(--c-text-3) 0 3px, var(--c-surface-4) 3px 6px); }
.barra-leyenda[data-estado="en-progreso"] .muestra-pagado,
.barra-leyenda[data-estado="cumplido"] .muestra-pagado { background: var(--c-info); }
.barra-leyenda[data-estado="cumplido"] .muestra-pagado { background: var(--c-ok); }

.fila-presupuesto { padding: 14px; border-top: 1px solid var(--c-line); }
.fila-presupuesto:first-child { border-top: 0; }

.fila-presupuesto-cabecera {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-2);
}

.fila-presupuesto-lado { text-align: right; }
.fila-presupuesto-pct { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.fila-presupuesto-estado { font-size: var(--fs-xs); color: var(--c-text-3); white-space: nowrap; }
/* Las dos frases del pie no se parten por la mitad: si no caben juntas, cada
   una baja entera a su propia línea. */
.fila-presupuesto-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--s-2); margin-top: 6px; font-size: var(--fs-sm); color: var(--c-text-2); }
.fila-presupuesto-pie > span { white-space: nowrap; }

.texto-estado-ok, .texto-estado-cumplido { color: var(--c-ok); }
.texto-estado-alerta { color: var(--c-warn); }
.texto-estado-excedido { color: var(--c-danger); }
.texto-estado-sin-limite { color: var(--c-text-3); }
.texto-estado-en-progreso { color: var(--c-info); }

/* Avisos */
.aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--c-info-soft);
    color: var(--c-text);
    font-size: var(--fs-md);
}

.aviso > i { color: var(--c-info); margin-top: 3px; }
.aviso-cuerpo { flex: 1; min-width: 0; }
.aviso-titulo { font-weight: 600; }
.aviso-acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.aviso-alerta { background: var(--c-warn-soft); }
.aviso-alerta > i { color: var(--c-warn); }
.aviso + .card, .card + .aviso, .aviso + .aviso { margin-top: var(--s-3); }

/* Estado vacío */
.vacio { padding: var(--s-10) var(--s-6); text-align: center; }

.vacio-icono {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--s-4);
    border-radius: 16px;
    background: var(--c-brand-soft);
    color: var(--c-brand);
    font-size: 22px;
}

.vacio h2, .vacio h3 { font-size: var(--fs-lg); margin-bottom: 6px; }
.vacio p { max-width: 38ch; margin: 0 auto; color: var(--c-text-2); }
.vacio .grupo-botones { justify-content: center; margin-top: var(--s-5); }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-4); border: 0; padding: 0; min-width: 0; }
.campo-etiqueta { font-size: var(--fs-md); font-weight: 500; color: var(--c-text-2); padding: 0; }
.campo-ayuda { font-size: var(--fs-sm); color: var(--c-text-3); }
.campo-error { font-size: var(--fs-sm); color: var(--c-danger); }

.entrada {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-surface-3);
    color: var(--c-text);
    font-size: var(--fs-base);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.entrada::placeholder { color: var(--c-text-3); }
.entrada:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft); }
.entrada[aria-invalid="true"] { border-color: var(--c-danger); }

select.entrada {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a6b0bd' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

input[type="date"].entrada { padding-right: 10px; }
input[type="date"].entrada::-webkit-calendar-picker-indicator { filter: invert(0.8); }

/* Monto grande */
.campo-monto {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 2px 8px;
    border-bottom: 2px solid var(--c-line-strong);
    transition: border-color var(--dur) var(--ease);
}

.campo-monto:focus-within { border-color: var(--c-brand); }
.campo-monto-signo { font-size: 28px; font-weight: 600; color: var(--c-text-3); }

.campo-monto input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    outline: none;
    font-size: var(--fs-hero);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.campo-monto input::placeholder { color: var(--c-text-3); }

/* Control segmentado */
.segmentado {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: var(--r-md);
    background: var(--c-surface-3);
}

.segmentado-opcion { position: relative; }
.segmentado-opcion input { position: absolute; opacity: 0; pointer-events: none; }

.segmentado-opcion span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 8px;
    border-radius: 9px;
    color: var(--c-text-2);
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.segmentado-opcion input:checked + span { background: var(--c-surface-4); color: var(--c-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.segmentado-opcion input:focus-visible + span { outline: 2px solid var(--c-brand); outline-offset: -2px; }

/* Interruptor */
.interruptor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    min-height: 48px;
    margin-bottom: var(--s-4);
    cursor: pointer;
}

.interruptor-texto { display: flex; flex-direction: column; }
.interruptor-titulo { font-weight: 500; }
.interruptor-desc { font-size: var(--fs-sm); color: var(--c-text-3); }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }

.interruptor-pista {
    position: relative;
    width: 50px;
    height: 30px;
    border-radius: var(--r-pill);
    background: var(--c-surface-4);
    transition: background var(--dur) var(--ease);
}

.interruptor-pista::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform var(--dur) var(--ease);
}

.interruptor input:checked + .interruptor-pista { background: var(--c-brand); }
.interruptor input:checked + .interruptor-pista::after { transform: translateX(20px); }
.interruptor input:focus-visible + .interruptor-pista { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* ---------- Hojas (bottom sheet / diálogo) ---------- */
.hoja-capa {
    position: fixed;
    inset: 0;
    z-index: var(--z-sheet);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hoja-fondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    transition: opacity 220ms var(--ease);
}

.hoja {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100dvh - var(--safe-top) - 24px);
    padding-bottom: var(--safe-bottom);
    border: 1px solid var(--c-line);
    border-bottom: 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--c-surface-2);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 280ms var(--ease);
}

.hoja-capa[data-estado="abierta"] .hoja-fondo { opacity: 1; }
.hoja-capa[data-estado="abierta"] .hoja { transform: none; }

.hoja-asa {
    flex: none;
    width: 38px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: 3px;
    background: var(--c-line-strong);
}

.hoja-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: 6px 8px 2px 20px;
}

.hoja-cabecera h2 { font-size: var(--fs-lg); font-weight: 600; }

.hoja-cuerpo {
    flex: 1;
    padding: var(--s-2) 20px var(--s-4);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.hoja-pie {
    display: flex;
    gap: 10px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--c-line);
}

.hoja-pie .btn { flex: 1; }

.texto-dialogo { color: var(--c-text-2); margin-bottom: var(--s-3); }

@media (min-width: 640px) {
    .hoja-capa { align-items: center; padding: var(--s-6); }
    .hoja {
        max-width: 520px;
        max-height: calc(100dvh - 48px);
        padding-bottom: 0;
        border-bottom: 1px solid var(--c-line);
        border-radius: 20px;
        opacity: 0;
        transform: translateY(12px) scale(0.98);
        transition: transform 200ms var(--ease), opacity 200ms var(--ease);
    }
    .hoja-capa[data-estado="abierta"] .hoja { opacity: 1; }
    .hoja-asa { display: none; }
    .hoja-cabecera { padding-top: 12px; }
}

/* Listas de opciones (menús, alcance de cambios) */
.opciones { display: flex; flex-direction: column; gap: 4px; }

.opcion {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 60px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    text-align: left;
    transition: background var(--dur) var(--ease);
}

.opcion:hover { background: var(--c-surface-3); }
.opcion-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c-surface-3); color: var(--c-brand); }
.opcion-titulo { display: block; font-weight: 600; }
.opcion-desc { display: block; font-size: var(--fs-sm); color: var(--c-text-2); }
.opcion-flecha { color: var(--c-text-3); font-size: 12px; }
.opcion-peligro .opcion-icono { color: var(--c-danger); background: var(--c-danger-soft); }
.opcion-peligro .opcion-titulo { color: var(--c-danger); }

/* Selector de mes */
.selector-mes-anio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-3);
}

.selector-mes-anio strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }

.selector-mes-rejilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-2);
}

.selector-mes-celda {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 58px;
    border-radius: var(--r-md);
    background: var(--c-surface-3);
    font-weight: 600;
    transition: background var(--dur) var(--ease);
}

.selector-mes-celda:hover { background: var(--c-surface-4); }
.selector-mes-celda[aria-current="date"] { box-shadow: inset 0 0 0 1.5px var(--c-brand); }
.selector-mes-celda[aria-pressed="true"] { background: var(--c-brand); color: var(--c-on-brand); }

.selector-mes-celda .punto {
    position: absolute;
    bottom: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c-brand);
}

.selector-mes-celda[aria-pressed="true"] .punto { background: var(--c-on-brand); }

/* ---------- Toasts ---------- */
.toasts {
    position: fixed;
    left: 50%;
    bottom: calc(var(--nav-h) + var(--safe-bottom) + 88px);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    width: min(92vw, 440px);
    transform: translateX(-50%);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 52px;
    padding: 8px 8px 8px 16px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: #232a36;
    color: var(--c-text);
    font-size: 15px;
    box-shadow: var(--shadow-float);
    pointer-events: auto;
    animation: toast-entrar 220ms var(--ease);
}

.toast > i { font-size: 16px; }
.toast-exito > i { color: var(--c-ok); }
.toast-error > i { color: var(--c-danger); }
.toast-info > i { color: var(--c-info); }
.toast-texto { flex: 1; min-width: 0; }

.toast-accion {
    min-height: 36px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    color: var(--c-brand);
    font-weight: 700;
}

.toast-accion:hover { background: var(--c-brand-soft); }
.toast.saliendo { opacity: 0; transform: translateY(8px); transition: opacity 180ms, transform 180ms; }

@media (min-width: 960px) {
    .toasts { bottom: var(--s-6); left: calc(50% + 124px); }
}

/* ---------- Guía de componentes ---------- */
.kit-seccion { margin-top: var(--s-8); }
.kit-seccion > h2 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.kit-muestra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.kit-colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--s-3); }
.kit-color-caja { height: 48px; border-radius: var(--r-md); border: 1px solid var(--c-line); margin-bottom: 6px; }
.kit-color span { display: block; font-size: var(--fs-xs); color: var(--c-text-2); }

/* ---------- Movimientos ---------- */
.item-movimiento { display: flex; align-items: center; padding: 0; }

.item-principal {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    min-height: 64px;
    padding: 10px 4px 10px 10px;
    text-align: left;
    transition: background var(--dur) var(--ease);
}

/* Dentro de una tarjeta, la lista no repite superficie ni borde y aprovecha el ancho */
.card > .lista, .card .lista-plana {
    margin-inline: -10px;
    border: 0;
    border-radius: 0;
    background: none;
}

.item-principal:hover { background: var(--c-surface-2); }
.item-movimiento .check { margin: 0 6px 0 0; }
.item-marca-fija { display: grid; place-items: center; width: 40px; color: var(--c-text-3); font-size: 12px; }

.dia-encabezado {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    margin: var(--s-5) 2px var(--s-2);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text-2);
}

.dia-encabezado .num { font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-3); }

.filtros {
    display: flex;
    gap: var(--s-2);
    margin: 0 calc(var(--s-4) * -1) var(--s-3);
    padding: 0 var(--s-4) 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.filtros::-webkit-scrollbar { display: none; }
.chip-activo { background: var(--c-brand-soft); border-color: var(--c-brand); color: var(--c-text); }

/* Ingresos, gastos y balance: son las cifras que se miran de primeras, así que
   van grandes. En teléfono caben dos por fila y el balance ocupa el ancho
   completo; a tres columnas el monto no cabría sin recortarse. */
.totales-mes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-bottom: var(--s-4); }
.totales-item { padding: var(--s-3); }
.totales-mes .totales-item:last-child { grid-column: 1 / -1; }
.totales-mes .stat-etiqueta { font-size: var(--fs-sm); }
.totales-mes .stat-valor { font-size: var(--fs-lg); }

@media (min-width: 600px) {
    .totales-mes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .totales-mes .totales-item:last-child { grid-column: auto; }
    .totales-mes .stat-valor { font-size: var(--fs-xl); }
}
.card + .totales-mes { margin-top: var(--s-3); }

.card-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.card-cabecera h2 { font-size: var(--fs-base); font-weight: 600; }

.resumen-presupuesto .lista-plana { background: none; border: 0; border-radius: 0; }
.resumen-presupuesto .fila-presupuesto { padding-inline: 0; }

.acciones-fijo { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-5); }

.detalle-lista { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s-3); }
.detalle-fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 10px 12px; border-radius: var(--r-sm); background: var(--c-surface-3); }
.detalle-fila dt { color: var(--c-text-2); font-size: var(--fs-md); }
.detalle-fila dd { margin: 0; font-weight: 600; }

/* ---------- Presupuesto ---------- */
.categoria-boton { display: block; width: 100%; text-align: left; border-top: 1px solid var(--c-line); transition: background var(--dur) var(--ease); }
.categoria-boton:first-child { border-top: 0; }
.categoria-boton:hover { background: var(--c-surface-2); }
.categoria-boton .fila-presupuesto { border-top: 0; }

.sin-limite-fila { grid-template-columns: auto minmax(0, 1fr) auto; }

.fila-limite {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 132px;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--c-line);
}

.fila-limite:last-of-type { border-bottom: 0; }
.fila-limite-nombre { font-size: var(--fs-md); }

.fila-limite-campo {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-surface-3);
    transition: border-color var(--dur) var(--ease);
}

.fila-limite-campo span { color: var(--c-text-3); }
.fila-limite-campo:focus-within { border-color: var(--c-brand); }

.fila-limite-campo input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border: 0;
    background: none;
    outline: none;
    text-align: right;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.resumen-asignacion {
    display: flex;
    justify-content: space-between;
    gap: var(--s-2);
    padding: 10px 12px;
    margin-bottom: var(--s-3);
    border-radius: var(--r-md);
    background: var(--c-surface-3);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

/* ---------- Deudas y ahorros ---------- */
.credito-card { margin-bottom: var(--s-3); }
.credito-nombre { font-size: var(--fs-lg); font-weight: 600; }
.credito-cifras { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
.credito-cuota { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.01em; }
.credito-cuota-num { font-size: var(--fs-sm); }

.cuenta-card { display: block; width: 100%; text-align: left; margin-bottom: var(--s-3); transition: background var(--dur) var(--ease); }
.cuenta-card:hover { background: var(--c-surface-2); }
.cuenta-card .card-cabecera { display: flex; }
.cuenta-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }
.cuenta-card .stats > span { display: block; }
.cuenta-card .stat-valor, .cuenta-card .stat-etiqueta { display: block; }

.cargo-fila { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: var(--s-2); margin-bottom: var(--s-2); }
.cargo-fila .entrada { min-height: 44px; }

.tabla-amortizacion { max-height: 320px; overflow-y: auto; }
/* Columnas de dinero apretadas: en teléfono son 4 o 5 y la última es la que
   importa, así que no puede quedar fuera de la pantalla. */
.tabla-amortizacion th, .tabla-amortizacion td { padding-left: 6px; padding-right: 6px; }
.tabla-amortizacion tr[aria-current="true"] { background: var(--c-brand-soft); }
.tabla-amortizacion tr[aria-current="true"] th { color: var(--c-brand); }

/* Desglose apilado (composición de una cuota) */
.desglose-barra { display: flex; gap: 2px; height: 12px; margin-bottom: var(--s-2); }
.desglose-parte { display: block; min-width: 3px; border-radius: 2px; }
.desglose-parte:first-child { border-radius: var(--r-pill) 2px 2px var(--r-pill); }
.desglose-parte:last-child { border-radius: 2px var(--r-pill) var(--r-pill) 2px; }
.desglose-leyenda { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: var(--fs-sm); color: var(--c-text-2); }
.desglose-clave { display: inline-flex; align-items: center; gap: 6px; }
.desglose-clave strong { color: var(--c-text); }

/* ---------- Flujo del año ---------- */
.seccion-flujo { margin-top: var(--s-3); }

.flujo-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-bottom: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
}

.flujo-clave { display: inline-flex; align-items: center; gap: 6px; }
.flujo-punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.flujo-punto-trama { background: repeating-linear-gradient(45deg, var(--c-text-2) 0 2px, transparent 2px 5px); }
.flujo-contenedor { position: relative; }
.flujo-svg { display: block; width: 100%; height: auto; }
.flujo-grid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.flujo-tick { fill: var(--c-text-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.flujo-mes { fill: var(--c-text-3); font-size: 10px; }
.flujo-mes-actual { fill: var(--c-text); font-weight: 600; }
.flujo-zona { fill: transparent; cursor: pointer; }
.flujo-grupo.activo .flujo-zona { fill: rgba(255, 255, 255, 0.05); }
.flujo-zona:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -2px; }

.flujo-detalle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    font-variant-numeric: tabular-nums;
}

.flujo-detalle strong { color: var(--c-text); }
.flujo-detalle span { display: inline-flex; align-items: center; gap: 6px; }

/* Dona de gastos por grupo */
.torta-contenedor { position: relative; display: flex; justify-content: center; margin: var(--s-2) 0 var(--s-1); }
.torta-svg { display: block; width: 100%; max-width: 208px; height: auto; }
.torta-pista { stroke: var(--c-surface-2); }

.torta-segmento {
    cursor: pointer;
    transition: opacity var(--dur) var(--ease);
}

.torta-segmento:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }
.torta-contenedor:hover .torta-segmento:not(.activo) { opacity: 0.55; }

.torta-centro {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    pointer-events: none;
}

.torta-centro-valor { font-size: var(--fs-lg); font-weight: 700; line-height: 1.1; }
.torta-centro-etiqueta { font-size: var(--fs-xs); color: var(--c-text-3); }

/* En pantallas anchas el gráfico no se estira: dona y leyenda quedan como un
   bloque centrado, si no el porcentaje se aleja tanto de su nombre que hay que
   rastrearlo con la vista. */
.torta-detalle,
.torta-leyenda { max-width: 560px; margin-left: auto; margin-right: auto; }

.torta-detalle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-3);
    min-height: 22px;
    font-size: var(--fs-sm);
    color: var(--c-text-2);
}

.torta-detalle strong { color: var(--c-text); }

.torta-leyenda {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: var(--s-2) var(--s-3);
    margin-top: var(--s-3);
}

.torta-clave {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--c-text-2);
}

.torta-clave-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.torta-clave-valor { color: var(--c-text); font-variant-numeric: tabular-nums; }
.torta-clave.activo .torta-clave-nombre { color: var(--c-text); }

.flujo-tabla { margin-top: var(--s-3); }
.flujo-tabla summary { min-height: 36px; padding: 8px 0; color: var(--c-text-2); font-size: var(--fs-sm); cursor: pointer; }
.flujo-tabla summary:hover { color: var(--c-text); }

.table-wrapper { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.tabla thead th { color: var(--c-text-3); font-weight: 600; }
.tabla th[scope="row"], .tabla thead th:first-child { text-align: left; }

/* ---------- Rediseño visual: encabezados, barra lateral, dona, escritorio ---------- */
.card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); }

/* Identificadores de sección: pequeños, en mayúsculas, con tracking */
.card-cabecera h2,
.seccion-titulo > span:first-child,
.seccion-titulo > h2 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-3);
}

/* Ícono de categoría en contenedor circular neutro; el glifo conserva su color */
.item-icono-circulo { border-radius: 50%; background: var(--c-surface-3); }

.torta-svg { filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45)); }

@media (min-width: 960px) {
    /* Corte diagonal sutil en el panel principal */
    .principal { background: linear-gradient(135deg, #0d1117 0%, #171d22 100%); }

    .nav-lateral .nav-item[aria-current="page"] {
        background: var(--c-brand-soft);
        box-shadow: inset 0 0 0 1px rgba(0, 240, 160, 0.18), 0 0 18px rgba(0, 240, 160, 0.08);
    }

    .usuario-chip { grid-template-columns: auto minmax(0, 1fr) auto; }
    .usuario-chip-ajustes { color: var(--c-text-3); font-size: 14px; }
}

/* ---------- Animaciones ---------- */
@keyframes girar { to { transform: rotate(360deg); } }

@keyframes toast-entrar {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}