@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
* { box-sizing: border-box; }
html {
    overflow-x: hidden;
    overflow-y: auto;
    /* auto: no reserva carril fijo; el layout usa todo el ancho del viewport.
       (stable reservaba siempre ~15px y angostaba header/fondo en todo momento.) */
    scrollbar-gutter: auto;
    /* Evita que el scroll “salte” cuando cambia la altura del header (splash) al volver arriba */
    overflow-anchor: none;
    /* Mantener scroll funcional pero ocultar la barra visual */
    scrollbar-width: none; /* Firefox */
    background-color: #121212;
}
/* WebKit/Safari: overlay hace que la barra flote sobre el contenido y no reste ancho al layout */
@supports (overflow: overlay) {
    html {
        overflow-y: overlay;
        scrollbar-gutter: auto;
    }
}
/* Chromium / Edge / Safari: ocultar barra visual, conservar scroll */
html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    background-color: var(--rm-page-bg, #121212);
    background-image: url("../img/Background.png?v=20260411");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    color: var(--rm-text, #f4f4f5);
    /* overlay/auto en body rompe position:sticky en descendientes; el scroll queda en html */
    overflow-x: hidden;
    overflow-y: visible;
}
@supports (min-height: 100dvh) {
    body {
        min-height: 100dvh;
    }
}
/* Tema oscuro global + acentos dorados (#f0c040) */
:root {
    --rm-page-bg: #121212;
    --rm-surface: #1a1a1f;
    --rm-surface-2: #222228;
    --rm-border: #333338;
    --rm-border-soft: #2e2e35;
    --rm-text: #f4f4f5;
    --rm-text-muted: #a1a1aa;
    --rm-yellow: #f0c040;
    --rm-gold-active-gradient: linear-gradient(180deg, #fff9e0 0%, #fde68a 28%, #f0c040 55%, #d4a017 100%);
    --rm-gold-active-text: #0a0a0a;
    --rm-gold-active-border: rgba(240, 192, 64, 0.85);
    --rm-cta-auth-text: #0a0a0a;
    --rm-cta-login-gradient: var(--rm-gold-active-gradient);
    --rm-cta-hero-gradient: linear-gradient(90deg, #2a2418 0%, #4a3c14 35%, #f0c040 72%, #c9a035 100%);
    --rm-cta-salir-gradient: linear-gradient(180deg, #3d3d45 0%, #2a2a30 100%);
    --rm-cta-salir-text: #f4f4f5;
    /* Botón hero "Registrar …" */
    --rm-registrar-gradient: linear-gradient(180deg, #fff3a8 0%, #f0c040 42%, #c9a035 100%);
    --rm-registrar-gradient-hover: linear-gradient(180deg, #fff8c8 0%, #f5c84a 40%, #d4a017 100%);
    --rm-registrar-text: #0a0a0a;
    --rm-registrar-border: rgba(240, 192, 64, 0.55);
    --rm-registrar-shadow: 0 8px 22px rgba(240, 192, 64, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    --rm-month-rail-outline: rgba(240, 192, 64, 0.4);
    --rm-month-rail-inset-glow: rgba(240, 192, 64, 0.12);
    --rm-month-divider: rgba(255, 255, 255, 0.1);
    --rm-month-label: #e4e4e7;
    --rm-month-label-muted: #a1a1aa;
    --rm-month-active-cell: linear-gradient(180deg, #fff9e0 0%, #f0c040 55%, #c9a035 100%);
    --rm-month-active-text: #0a0a0a;
    --rm-topbar-radius: 14px;
    --rm-topbar-link-radius: 8px;
    --rm-empty-state-bg: rgba(240, 192, 64, 0.1);
    --rm-empty-state-fg: #f4f4f5;
    /* Cabecera ancho completo (verde bosque) */
    --rm-header-forest: #052010;
    --rm-header-underline: #fdcb58;
    --rm-header-nav-muted: #d1d5db;
    --rm-header-active-icon: #76ba1b;
}
.topbar {
    background: #141418;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
}
/*
 * Header: barra fina siempre fija (.topbar-bar) + franja splash con ilustración solo al inicio.
 * Total alto inicial ~10% menor que el hero monolítico anterior (~148px → ~133px): barra + splash.
 */
.topbar.topbar--hero {
    display: block;
    padding: 0;
    background: transparent;
}
/* Sin z-index/isolation aquí: si no, la barra fija queda “atrapada” y main (z-index:2) la tapa al scroll */
.topbar--hero {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    --topbar-bar-h: 56px;
    /* Reserva amplia bajo la barra fija (z-index 1100); si es poco, el main queda tapado. */
    --topbar-hero-reserve-extra: 96px;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--topbar-bar-h) + var(--topbar-hero-reserve-extra));
    padding-left: 0;
    padding-right: 0;
    /* visible en Y para que la ilustración con margin-top negativo no quede recortada */
    overflow-x: hidden;
    overflow-y: visible;
    background: var(--rm-header-forest);
}
/* /login: sin ilustración en el header; evita franja verde enorme (reserve-extra alto era para el wallet) */
.topbar--hero.topbar--hero-login {
    --topbar-hero-reserve-extra: 20px;
    /* fixed + overflow-x:hidden del hero recortaba el 2.º botón a la derecha */
    overflow-x: visible;
}
/* Login: grid = logo (izq.) + bloque botones (ancho auto, una sola fila; sin flex-wrap que los apilaba) */
.topbar--hero.topbar--hero-login .topbar-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    padding-right: max(22px, calc(env(safe-area-inset-right, 0px) + 20px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
.topbar--hero-login .topbar-bar .brand {
    min-width: 0;
    justify-self: start;
    position: relative;
    z-index: 7;
}
/* .topbar-bar nav centra el menú principal; en /login el <nav> es auth-landing-nav y debe quedar en el grid (no absolute) */
.topbar--hero.topbar--hero-login .topbar-bar nav.auth-landing-nav {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .topbar-hero-splash {
        transition: none !important;
    }
    .topbar-hero-art {
        transition: none;
    }
}
/* Barra superior fija: logo y botones de página siempre al mismo tamaño */
.topbar-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--topbar-bar-h);
    padding: 8px 16px;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-bottom: 8px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 72% 36%, rgba(240, 192, 64, 0.07) 0, rgba(240, 192, 64, 0) 42%),
        linear-gradient(180deg, #1f1f24 0%, #141418 100%);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
.topbar-bar .brand,
.topbar-bar nav,
.topbar-bar .lang {
    position: relative;
    z-index: 5;
}
.topbar-bar nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
/* Padding horizontal simétrico; el avatar (.topbar--hero > .topbar-auth) va fixed encima (z-index mayor). */
.topbar--hero .topbar-bar {
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    /* Sin franja arriba: solo safe-area en notch; la pastilla llega al borde superior del viewport */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: 6px;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
}
/* Franja cabecera: 100% ancho, verde bosque + grano sutil */
.topbar--hero .topbar-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.022) 0px,
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px,
            transparent 3px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.06) 0px,
            rgba(0, 0, 0, 0.06) 1px,
            transparent 1px,
            transparent 4px
        ),
        radial-gradient(ellipse 120% 180% at 50% -40%, rgba(118, 186, 27, 0.12), transparent 52%),
        linear-gradient(180deg, #062814 0%, var(--rm-header-forest) 45%, #041808 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
@media (max-width: 999px) {
    .topbar--hero .topbar-bar::before {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}
/* Franja splash: la ilustración va position:fixed (ver .topbar-hero-art) para que no se vaya al scroll. */
.topbar-hero-splash {
    position: relative;
    z-index: 1110;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    transition:
        min-height 0.42s cubic-bezier(0.33, 0.86, 0.36, 1),
        padding 0.38s ease;
}
.topbar--hero.topbar--splash-collapsed .topbar-hero-splash {
    min-height: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
    pointer-events: none;
}
.topbar--hero::after {
    content: none;
}
/* Ilustración fija junto al avatar; escala ligera para acercar tamaño al icono de usuario */
.topbar-hero-art {
    position: fixed;
    top: 0;
    right: 72px;
    z-index: 1110;
    display: block;
    height: var(--topbar-bar-h);
    width: auto;
    max-width: min(280px, 40vw);
    max-height: none;
    object-fit: contain;
    object-position: center center;
    transform: scale(1.22);
    transform-origin: right center;
    pointer-events: none;
    user-select: none;
    margin: 0;
    flex-shrink: 0;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    filter: none;
    -webkit-filter: none;
}
.topbar--hero.topbar--splash-collapsed .topbar-hero-art {
    opacity: 1;
    visibility: visible;
}
.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 5px 12px;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.topbar--hero .brand {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    border-radius: var(--rm-topbar-radius);
}
.brand-logotipo {
    height: 23px;
    width: auto;
    object-fit: contain;
}
.topbar nav { display: flex; gap: 8px; flex-wrap: nowrap; }
.topbar-menu-toggle {
    display: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-radius: 8px;
    width: 40px;
    height: 36px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 3;
}
.topbar-menu-toggle span,
.topbar-menu-toggle::before,
.topbar-menu-toggle::after {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    background: #ffffff;
    border-radius: 999px;
    transition: transform 0.16s ease, opacity 0.16s ease;
    position: absolute;
    left: 50%;
    top: 50%;
}
.topbar-menu-toggle span {
    transform: translate(-50%, -50%);
}
.topbar-menu-toggle::before {
    transform: translate(-50%, -7px);
}
.topbar-menu-toggle::after {
    transform: translate(-50%, 5px);
}
.topbar-menu-toggle[aria-expanded="true"]::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.topbar-menu-toggle[aria-expanded="true"]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.topbar-menu-toggle[aria-expanded="true"] span {
    opacity: 0;
}
.topbar--hero .topbar-menu-toggle {
    border-radius: var(--rm-topbar-radius);
}
/* Solo /login: bloque de acciones (grid col 2) */
.topbar--hero .topbar-bar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 6;
}
.topbar--hero .topbar-bar__right--login-only {
    justify-self: end;
    margin-left: 0;
    width: auto;
    max-width: 100%;
    min-width: 0;
    justify-content: flex-end;
}
.topbar-auth--guest {
    flex: 0 0 auto;
}
.topbar-auth--guest .auth-landing-nav {
    flex-wrap: nowrap;
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav__ghost {
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav__cta {
    padding: 11px 18px;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(234, 179, 8, 0.35);
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav__cta,
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav__ghost {
    flex: 0 1 auto;
    min-width: 0;
}
/* Sobre .topbar nav a (mismo <nav>): restaurar ghost + CTA dorado de la landing */
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav > a.auth-landing-nav__ghost {
    color: #ffffff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: none;
    font-weight: 600;
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav > a.auth-landing-nav__cta {
    color: var(--rm-cta-auth-text);
    background: var(--rm-cta-login-gradient);
    border: 1px solid var(--rm-gold-active-border);
    box-shadow: 0 2px 12px rgba(234, 179, 8, 0.35);
    font-weight: 700;
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav > a.auth-landing-nav__ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.65);
    filter: none;
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav > a.auth-landing-nav__cta:hover {
    filter: brightness(1.06);
    background: var(--rm-cta-login-gradient);
}
.topbar nav a {
    color: #ffffff;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.2px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.topbar nav a:hover {
    background: rgba(255, 255, 255, 0.16);
}
.topbar nav a.active {
    background: var(--rm-gold-active-gradient);
    border-color: var(--rm-gold-active-border);
    color: var(--rm-gold-active-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
/* Submenú: Configuraciones + Sobre RichMind */
.topbar nav .topbar-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.topbar nav .topbar-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.2px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.topbar nav .topbar-dropdown__trigger:hover {
    background: rgba(255, 255, 255, 0.16);
}
/* Abierto o con ítem activo en el panel: mismo estilo que el resto de enlaces (no dorado como pestaña activa) */
.topbar nav .topbar-dropdown.is-open .topbar-dropdown__trigger,
.topbar nav .topbar-dropdown:has(.topbar-dropdown__panel a.active) .topbar-dropdown__trigger {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    box-shadow: none;
}
.topbar nav .topbar-dropdown__chev {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    margin-top: 2px;
    transition: transform 0.18s ease;
}
.topbar nav .topbar-dropdown.is-open .topbar-dropdown__chev {
    transform: rotate(180deg);
}
.topbar nav .topbar-dropdown__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1300;
    display: none;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(11, 96, 48, 0.98);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.topbar nav .topbar-dropdown.is-open .topbar-dropdown__panel {
    display: flex;
}
.topbar nav .topbar-dropdown__panel a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.topbar nav .topbar-dropdown__panel a:hover {
    background: rgba(255, 255, 255, 0.16);
}
.topbar nav .topbar-dropdown__panel a.active {
    background: var(--rm-gold-active-gradient);
    border-color: var(--rm-gold-active-border);
    color: var(--rm-gold-active-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
/* Navegación principal hero: texto apagado, activo blanco + icono lima + barra dorada */
.topbar--hero .topbar-bar nav > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    font-size: 14px;
    border-radius: var(--rm-topbar-link-radius);
    border: 1px solid transparent;
    background: transparent;
    color: var(--rm-header-nav-muted);
    font-weight: 500;
}
.topbar--hero .topbar-bar nav > a > i {
    font-size: 0.95em;
    opacity: 0.95;
    color: var(--rm-header-nav-muted);
}
.topbar--hero .topbar-bar nav > a:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: transparent;
    color: #f3f4f6;
}
.topbar--hero .topbar-bar nav > a:hover > i {
    color: #e5e7eb;
}
.topbar--hero .topbar-bar nav > a.active {
    position: relative;
    background: transparent;
    border-color: transparent;
    color: #ffffff;
    font-weight: 700;
    box-shadow: none;
}
.topbar--hero .topbar-bar nav > a.active > i {
    color: var(--rm-header-active-icon);
    opacity: 1;
}
@media (min-width: 1000px) {
    .topbar--hero .topbar-bar nav > a.active::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -10px;
        transform: translateX(-50%);
        width: 52%;
        max-width: 76px;
        height: 3px;
        border-radius: 2px;
        background: var(--rm-header-underline);
        box-shadow: 0 0 12px rgba(253, 203, 88, 0.55);
        pointer-events: none;
    }
}
.topbar--hero .topbar-bar nav .topbar-dropdown__trigger {
    border-radius: var(--rm-topbar-link-radius);
    background: transparent;
    border: 1px solid transparent;
    backdrop-filter: none;
    padding: 7px 12px;
    font-size: 14px;
    color: var(--rm-header-nav-muted);
    font-weight: 500;
}
.topbar--hero .topbar-bar nav .topbar-dropdown__trigger:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f3f4f6;
}
.topbar--hero .topbar-bar nav .topbar-dropdown--context-active .topbar-dropdown__trigger {
    background: rgba(253, 224, 71, 0.2);
    border-color: rgba(253, 224, 71, 0.55);
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.35);
}
.topbar--hero .topbar-bar nav .topbar-dropdown.is-open .topbar-dropdown__trigger,
.topbar--hero .topbar-bar nav .topbar-dropdown:has(.topbar-dropdown__panel a.active) .topbar-dropdown__trigger {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    color: #ffffff;
    box-shadow: none;
}
.topbar--hero .topbar-bar nav .topbar-dropdown--context-active.is-open .topbar-dropdown__trigger,
.topbar--hero .topbar-bar nav .topbar-dropdown--context-active:has(.topbar-dropdown__panel a.active) .topbar-dropdown__trigger {
    background: rgba(253, 224, 71, 0.22);
    border-color: rgba(253, 224, 71, 0.55);
}
.topbar--hero .topbar-bar nav .topbar-dropdown__panel {
    border-radius: var(--rm-topbar-radius);
}
.topbar--hero .topbar-bar nav .topbar-dropdown__panel a {
    border-radius: max(6px, calc(var(--rm-topbar-link-radius) - 2px));
}
.topbar--hero .topbar-user-menu-trigger {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #3f8f4f 0%, #2d6a38 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.topbar--hero .topbar-user-menu-trigger .fa-circle-user {
    font-size: 1.18rem;
}
.lang { background: #1e1e24; color: #f0c040; border: 1px solid var(--rm-border); padding: 5px 8px; border-radius: 8px; font-weight: 600; font-size: 13px; }
.container { max-width: 1220px; margin: 18px auto; padding: 0 12px; }
/* Tras el header hero, el main sigue el flujo normal (sin margin negativo): el contenido queda
   debajo del bloque verde en pantalla, no subido bajo la barra fija. */
.topbar--hero ~ main.container {
    margin-top: 0;
    padding-top: 77px;
    position: relative;
    z-index: 2;
}
.topbar--hero ~ main.container .panel {
    margin-top: 0;
    position: relative;
    z-index: 1;
}
.topbar--hero ~ main.container .subnav {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    border: none;
}
.cards { display: grid; gap: 12px; margin-bottom: 16px; }
.cards.five { grid-template-columns: repeat(5, 1fr); }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.card {
    background: var(--rm-surface-2);
    border: 1px solid var(--rm-border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
    color: var(--rm-text);
}
.card h3 { margin: 0 0 8px; font-size: 14px; color: #475569; }
.card p { margin: 0; font-size: 22px; font-weight: 700; }
.card.negative { background: #1c2432; color: #fff; }
.card.negative p { color: #f87171; }
.ok { color: #16a34a; }
.warn { color: #ea580c; }
.panel {
    background: var(--rm-surface);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--rm-border);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.38);
    color: var(--rm-text);
}
.panel h1, .panel h2 { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.list-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.list-item small { display: block; margin-top: 4px; color: #64748b; }
.badge {
    border-radius: 999px;
    padding: 4px 10px;
    background: #e5e7eb;
    font-size: 12px;
}
.badge.ok { background: #dcfce7; color: #166534; }
.badge.warn { background: #ffedd5; color: #9a3412; }
.alert-list > div {
    background: #fff8db;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
}
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row.form { display: flex; gap: 10px; margin: 10px 0 14px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--rm-text-muted); font-size: 13px; margin: 8px 0 0; }
.gastos-top {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
    align-items: stretch;
}
.gastos-top > .panel {
    padding: 10px 12px;
    margin-bottom: 0;
}
.gastos-head-panel {
    padding: 0;
}
.gastos-head-panel h1 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}
.gastos-head-panel h1 .head-panel-title-text {
    min-width: 0;
    line-height: 1.25;
}
.gastos-head-panel h1 [class$="-head-icon"] {
    flex-shrink: 0;
}
.gastos-head-panel p {
    margin: 0;
    font-size: 12px;
}
.gastos-head-panel .muted {
    margin-top: 4px;
}
.gastos-head-panel > div {
    min-width: 0;
}
.gastos-top .gastos-head-panel > div {
    flex: 1;
    min-height: 0;
}
.totals-panel-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    width: 100%;
}
.totals-panel-row .totals-grid {
    flex: 0 0 auto;
    width: 100%;
}
.totals-panel__add-btn {
    flex-shrink: 0;
    align-self: center;
    margin-left: 0;
}
.page-gastos .gastos-top > .panel,
.page-ingresos .gastos-top > .panel,
.page-ahorros .gastos-top > .panel,
.page-inversiones .gastos-top > .panel,
.page-cuentas-gasto .gastos-top > .panel {
    min-height: 0;
}
.page-gastos .gastos-top > .gastos-head-panel,
.page-gastos .gastos-top > .totals-panel,
.page-gastos .gastos-top > .month-panel,
.page-ingresos .gastos-top > .gastos-head-panel,
.page-ingresos .gastos-top > .totals-panel,
.page-ingresos .gastos-top > .month-panel,
.page-ahorros .gastos-top > .gastos-head-panel,
.page-ahorros .gastos-top > .totals-panel,
.page-ahorros .gastos-top > .month-panel,
.page-inversiones .gastos-top > .gastos-head-panel,
.page-inversiones .gastos-top > .totals-panel,
.page-inversiones .gastos-top > .month-panel,
.page-cuentas-gasto .gastos-top > .gastos-head-panel,
.page-cuentas-gasto .gastos-top > .totals-panel,
.page-cuentas-gasto .gastos-top > .month-panel {
    min-height: 0 !important;
}
.page-gastos .gastos-add-btn,
.page-ingresos .income-add-btn,
.page-ahorros .savings-add-btn,
.page-inversiones .investment-add-btn,
.page-cuentas-gasto .gastos-add-btn.expense-account-add-cat-btn {
    min-width: 182px !important;
    min-height: 50px !important;
    padding: 10px 16px !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}
/* Botón registrar en panel Totales: más bajo que el tamaño genérico */
.gastos-top .totals-panel .gastos-add-btn.totals-panel__add-btn,
.gastos-top .totals-panel .income-add-btn.totals-panel__add-btn,
.gastos-top .totals-panel .savings-add-btn.totals-panel__add-btn,
.gastos-top .totals-panel .investment-add-btn.totals-panel__add-btn,
.gastos-top .totals-panel .expense-account-add-cat-btn.totals-panel__add-btn {
    min-width: 168px !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 15px !important;
}
.gastos-add-btn {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 20px;
    line-height: 1.05;
    border-radius: 12px;
    white-space: normal;
    text-align: center;
}
.totals-panel h2 {
    text-align: center;
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}
/* Montos en una fila; mismo tamaño de título que .month-year-header (año) */
.gastos-top .month-year-header {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}
.gastos-top .month-year-header strong {
    font-weight: 700;
}
.totals-grid {
    max-width: 100%;
    margin: 0 auto;
    border-top: 1px solid var(--rm-border-soft);
    padding-top: 2px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 0;
}
.total-currency {
    text-align: center;
    padding: 0 6px;
    border-right: 1px solid var(--rm-border-soft);
    flex: 1 1 0;
    min-width: 0;
}
.total-currency:last-child { border-right: 0; }
.total-currency .label {
    font-weight: 700;
    font-size: 10px;
    margin-bottom: 0;
    line-height: 1.15;
    letter-spacing: 0.02em;
}
.total-currency .value {
    font-weight: 700;
    font-size: 12px;
    line-height: 1.15;
    color: var(--rm-text);
}
.month-panel { padding: 4px; }
/* Calendario: ocupa el alto del panel (igual que Totales) y reparte filas */
.gastos-top .month-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
.gastos-top .month-panel .month-year-header {
    flex-shrink: 0;
}
.gastos-top .month-panel .month-grid {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: repeat(3, minmax(0, 1fr));
}
.gastos-top .month-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 4px 2px;
    box-sizing: border-box;
}
.month-year-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    margin-bottom: 2px;
}
.year-arrow {
    color: var(--rm-text);
    text-decoration: none;
    padding: 2px 6px;
}
.month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--rm-border);
    border-radius: 10px;
    overflow: hidden;
    background: #141418;
}
.month-grid a {
    text-decoration: none;
    text-align: center;
    padding: 3px 0;
    border-right: 1px solid var(--rm-border-soft);
    border-bottom: 1px solid var(--rm-border-soft);
    color: var(--rm-month-label);
    font-size: 12px;
    font-weight: 700;
    background: #18181c;
}
.month-grid a:nth-child(4n) { border-right: 0; }
.month-grid a:nth-last-child(-n+4) { border-bottom: 0; }
.month-grid a:hover {
    background: rgba(240, 192, 64, 0.1);
    color: #fff;
}
.month-grid a.active {
    background: var(--rm-month-active-cell);
    color: var(--rm-month-active-text);
    box-shadow: inset 0 0 0 1px rgba(240, 192, 64, 0.45);
}
/* Mes civil actual en el año mostrado (se distingue cuando la vista es otro mes) */
.month-grid a.month-nav-today:not(.active) {
    background: rgba(240, 192, 64, 0.12);
    color: var(--rm-text);
    box-shadow: inset 0 -2px 0 0 rgba(240, 192, 64, 0.65);
}
.month-grid a.month-nav-today:not(.active):hover {
    background: rgba(240, 192, 64, 0.2);
    color: #fff;
}
input {
    border: 1px solid var(--rm-border);
    border-radius: 8px;
    padding: 8px 10px;
    background: #141418;
    color: var(--rm-text);
}
.btn {
    border: 0;
    background: linear-gradient(180deg, #2d5a32 0%, #1f7a3a 100%);
    color: #fff;
    border-radius: 8px;
    padding: 9px 14px;
    cursor: pointer;
}
.btn-link {
    border: 1px solid var(--rm-border);
    background: var(--rm-surface-2);
    color: var(--rm-text);
    border-radius: 8px;
    padding: 6px 10px;
}
.btn-danger {
    border: 1px solid #fecaca;
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 8px;
    padding: 6px 10px;
}
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--rm-surface-2);
}
.table-scroll {
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
th, td {
    border-bottom: 1px solid var(--rm-border-soft);
    padding: 10px 8px;
    text-align: left;
    font-size: 14px;
    color: var(--rm-text);
}
.category-panel { padding-top: 0; }

.cat-header__kicker {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    opacity: 0.95;
}
.cat-header {
    margin: 0 -16px 10px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--cat) 16%, #1a1a1f);
    border-bottom: 1px solid var(--rm-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cat-header h2 { margin: 0; font-size: 18px; }
.expense-table thead th {
    background: #25252c;
    font-size: 12px;
    color: var(--rm-text-muted);
    min-width: 2.75rem;
}
.expense-table {
    table-layout: fixed;
}
.expense-table th,
.expense-table td {
    white-space: nowrap;
    padding: 6px 6px;
    font-size: 13px;
}
/* 12 columnas: Costo … Titular + Acción (sin Emisión en la grilla) */
.expense-table th:nth-child(1), .expense-table td:nth-child(1) { width: 6%; }
.expense-table th:nth-child(2), .expense-table td:nth-child(2) { width: 8%; }
.expense-table th:nth-child(3), .expense-table td:nth-child(3) { width: 7%; }
.expense-table th:nth-child(4), .expense-table td:nth-child(4) { width: 8%; }
.expense-table th:nth-child(5), .expense-table td:nth-child(5) { width: 7%; }
/* 6 = Cta. depósito, 7 = Met. pago */
.expense-table th:nth-child(6), .expense-table td:nth-child(6) { width: 8%; }
.expense-table th:nth-child(7), .expense-table td:nth-child(7) { width: 6%; }
.expense-table th:nth-child(8), .expense-table td:nth-child(8) { width: 4%; }
.expense-table th:nth-child(9), .expense-table td:nth-child(9) { width: 5%; }
.expense-table th:nth-child(10), .expense-table td:nth-child(10) { width: 5%; }
.expense-table th:nth-child(11), .expense-table td:nth-child(11) { width: 5%; }
.expense-table th:nth-child(12), .expense-table td:nth-child(12) {
    width: 7%;
    min-width: 5.5rem;
    text-align: center;
}
.expense-table td:nth-child(12) .actions-inner {
    justify-content: center;
}
.expense-table thead th.expense-table__th-action {
    min-width: 5.75rem;
}
.expense-table .due-day-cell {
    text-align: center;
}
.expense-table .due-day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65em;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    line-height: 1.2;
    box-sizing: border-box;
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--due-accent, #166534) 72%, #000);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--due-accent, #166534) 42%, #fff) 0%,
        var(--due-accent, #166534) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 1px 2px rgba(0, 0, 0, 0.16);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}
.expense-table td.amount-cell {
    text-align: left;
    padding-left: 8px;
    padding-right: 6px;
}
.expense-table td:nth-child(1) .amount,
.expense-table td:nth-child(1) .amount-partial {
    text-align: left;
}
.expense-table th:nth-child(2),
.expense-table td:nth-child(2),
.expense-table th:nth-child(3),
.expense-table td:nth-child(3),
.expense-table th:nth-child(4),
.expense-table td:nth-child(4),
.expense-table th:nth-child(5),
.expense-table td:nth-child(5),
.expense-table th:nth-child(6),
.expense-table td:nth-child(6),
.expense-table th:nth-child(7),
.expense-table td:nth-child(7) {
    overflow: hidden;
    text-overflow: ellipsis;
}
.expense-table tbody td {
    vertical-align: middle;
}
.amount-cell {
    vertical-align: middle;
    white-space: normal;
}
.amount-stack {
    display: block;
    line-height: 1.1;
}
.amount-line {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    min-width: 0;
}
.expense-payment-icon {
    flex-shrink: 0;
    font-size: 0.95em;
    line-height: 1;
}
.expense-payment-icon--paid { color: #22c55e; }
.expense-payment-icon--partial { color: #f59e0b; }
.expense-payment-icon--overdue { color: #ef4444; }
.expense-payment-icon--pending { color: rgba(244, 244, 245, 0.45); }
.amount-stack .amount {
    display: block;
    min-width: 0;
}
.amount { color: var(--rm-yellow); font-weight: 700; font-size: 13px; line-height: 1.15; }
.amount-partial {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 400;
    color: #c2410c;
    letter-spacing: 0.01em;
    line-height: 1.15;
}
.status-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 2px solid #d1d5db;
    margin-right: 6px;
    vertical-align: middle;
}
.status-dot.ok { border-color: #16a34a; background: #16a34a; }
.status-dot.warn { border-color: #f97316; background: #f97316; }
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 2px solid #d1d5db;
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    background: #fff;
}
.status-icon.paid {
    border-color: #16a34a;
    color: #ffffff;
    background: #16a34a;
}
.status-icon.partial {
    border-color: #f97316;
    color: #ffffff;
    background: #f97316;
}
.status-icon.pending {
    border-color: #e5e7eb;
    color: transparent;
    background: #fff;
}
.actions-cell {
    vertical-align: middle;
    text-align: right;
    padding-right: 2px;
}
.actions-inner {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    position: relative;
}
.row-action-trigger {
    border: 1px solid #b07a00;
    background:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, #fff7b0 0%, #ffd43b 44%, #e4ae13 52%, #f7d147 100%);
    color: #4a2f00;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -2px 0 rgba(140, 95, 0, 0.28),
        0 1px 2px rgba(0, 0, 0, 0.2);
}
.row-action-trigger:hover {
    border-color: #996600;
    background:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 36%),
        linear-gradient(180deg, #fff5a0 0%, #ffce2b 44%, #dba50f 52%, #f2c93c 100%);
}
.row-action-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
    display: grid;
    gap: 2px;
    padding: 4px;
    background: #fff;
    border: 1px solid #e8d8a3;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    z-index: 20;
    min-width: 128px;
}
.row-action-menu[hidden] {
    display: none !important;
}
.row-action-option {
    border: 0;
    background: transparent;
    text-align: left;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
}
.row-action-option:hover {
    background: #fff7de;
    color: #6b4f00;
}
.row-action-modal-list {
    display: grid;
    gap: 8px;
}
.row-action-modal-list__split {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.row-action-modal-list__split .btn-modal-primary {
    flex: 1;
    min-width: 0;
}
/* Modal gasto en solo lectura (Ver): mismo gris que inputs; selects sin flecha (mayor especificidad que .modal-grid .modal-field__select) */
.edit-expense-modal--readonly .modal-card__body .modal-grid input:not([type="hidden"]):disabled,
.edit-expense-modal--readonly .modal-card__body .modal-grid select:disabled,
.edit-expense-modal--readonly .modal-card__body .modal-grid textarea:disabled,
.edit-expense-modal--readonly .modal-card__body .modal-grid .modal-field__select:disabled {
    cursor: default;
    background-color: #f1f5f9 !important;
    background-image: none !important;
    color: #334155 !important;
    opacity: 1;
    border-color: #cbd5e1;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 12px;
}
.payment-receipt-view-block {
    padding: 4px 0;
}
.payment-receipt-view-link {
    display: inline-block;
    font-weight: 600;
    color: #166534;
    text-decoration: underline;
    font-size: 14px;
    cursor: pointer;
}
.payment-receipt-view-link:hover {
    color: #14532d;
}
.payment-receipt-view-btn {
    display: inline-block;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: #166534;
    text-decoration: underline;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}
.payment-receipt-view-btn:hover {
    color: #14532d;
}
#receiptViewModal .modal-app-shell.auth-login-shell {
    width: min(calc(100vw - 32px), 1200px);
    max-width: calc(100vw - 32px);
}
#receiptViewModal .modal-app-shell .auth-login-card-inner {
    width: 100%;
}
#receiptViewModal .receipt-view-modal__card.modal-card {
    width: 100%;
    max-width: 100%;
}
#receiptViewModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#receiptViewModal .modal-card__body.receipt-view-modal__body {
    padding: 0 !important;
    overflow: hidden;
    background: #e2e8f0;
}
#receiptViewModal .receipt-view-modal__iframe {
    display: block;
    width: 100%;
    height: clamp(260px, calc(100vh - 200px), 820px);
    border: none;
    background: #fff;
}
@supports (height: 1dvh) {
    #receiptViewModal .receipt-view-modal__iframe {
        height: clamp(260px, calc(100dvh - 200px), 820px);
    }
}
.payment-receipt-no-file {
    font-size: 13px;
    display: block;
}
/* Botones de fila en gastos: compactos + icono + texto */
.expense-table .actions-inner .btn-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.expense-table .actions-inner .btn-action__icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.expense-table .actions-inner .btn-link {
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 6px;
    white-space: nowrap;
}
.expense-table .actions-inner .btn-link:hover {
    border-color: #1f7a3a;
    color: #1f7a3a;
    background: color-mix(in srgb, #1f7a3a 6%, white);
}
.expense-table .actions-inner .btn-link:hover .btn-action__icon {
    stroke: #1f7a3a;
}
/* Homogeneidad visual de la pantalla Gastos */
body.page-gastos .panel {
    border: 1px solid var(--rm-border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg, #15251c 0%, #141418 100%);
}
body.page-gastos .panel.expense-empty-panel {
    background: var(--rm-empty-state-bg);
    border-color: rgba(240, 192, 64, 0.25);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
body.page-gastos .gastos-top .panel {
    border-color: rgba(74, 222, 128, 0.35);
}
body.page-gastos .gastos-head-panel h1,
body.page-gastos .totals-panel h2,
body.page-gastos .month-year-header strong {
    color: #bbf7d0;
}
body.page-gastos .gastos-head-icon {
    color: #4ade80;
    font-size: 1.15em;
    flex-shrink: 0;
}
body.page-gastos .gastos-top {
    align-items: stretch;
}
body.page-gastos .gastos-top > .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.page-gastos .gastos-add-btn {
    min-width: 168px;
    min-height: 48px;
    padding: 10px 16px;
    font-size: 17px;
    font-weight: 700;
}
body.page-gastos .category-panel {
    border: 1px solid var(--rm-border);
    border-bottom: 5px solid var(--cat);
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    background: #141418;
}
body.page-gastos .category-panel:has(.expense-card.is-expanded) {
    overflow: visible;
    z-index: 8;
}
/* Menú ⋮ abierto: el desplegable no se recorta ni queda debajo de la categoría siguiente */
body.page-gastos .category-panel:has(.row-action-menu:not([hidden])) {
    overflow: visible;
    z-index: 16;
    position: relative;
}
body.page-gastos .expense-card:has(.row-action-menu:not([hidden])) {
    z-index: 30;
}
body.page-gastos .cat-header {
    margin: 0;
    padding: 8px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    flex-wrap: nowrap;
    background:
        radial-gradient(circle at 72% 36%, color-mix(in srgb, var(--cat) 22%, transparent) 0, transparent 50%),
        linear-gradient(180deg, #1f1f26 0%, #161618 100%);
    border-bottom: 5px solid var(--cat);
}
body.page-gastos .cat-header__overdue-msg {
    margin: 0;
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    max-width: min(52%, 280px);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fbbf24;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    text-align: center;
}
body.page-gastos .cat-header__overdue-msg-icon {
    flex-shrink: 0;
    font-size: 0.95em;
    color: #fbbf24;
}
body.page-gastos .cat-header__totals {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0 4px;
    min-width: 0;
    text-align: right;
}
body.page-gastos .cat-header__total {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--cat);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
body.page-gastos .cat-header__total-sep {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    padding: 0 4px 0 0;
    user-select: none;
}
body.page-gastos .cat-header h2,
body.page-gastos .cat-header .cat-header__title {
    color: var(--cat);
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
body.page-gastos .cat-header__title {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin: 0;
    font-size: 18px;
}
@media (max-width: 520px) {
    body.page-gastos .cat-header {
        flex-wrap: wrap;
    }
    body.page-gastos .cat-header__overdue-msg {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
        justify-content: center;
    }
}
body.page-gastos .cat-header__fa {
    font-size: 1.15em;
    opacity: 0.95;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
body.page-gastos .category-panel .expense-cards-wrap {
    margin: 0;
    padding: 12px;
    box-sizing: border-box;
    overflow: visible;
}
body.page-gastos .expense-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 12px;
    align-items: start;
    overflow: visible;
}
body.page-gastos .expense-card {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--rm-border-soft);
    background: linear-gradient(180deg, #1a1a1f 0%, #161618 100%);
    padding: 12px 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    border-left: 4px solid var(--cat);
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
body.page-gastos .expense-card.is-expanded {
    z-index: 25;
}
body.page-gastos .expense-card:hover {
    background: #1e1e24;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
body.page-gastos .expense-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
body.page-gastos .expense-card__headline {
    flex: 1;
    min-width: 0;
}
body.page-gastos .expense-card__headline-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
body.page-gastos .expense-card__amount-col {
    flex-shrink: 0;
    max-width: 46%;
}
body.page-gastos .expense-card__concept {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #fafafa;
    word-break: break-word;
}
body.page-gastos .expense-card__amount-val.amount {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
body.page-gastos .expense-card__toolbar {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    gap: 6px;
}
body.page-gastos .expense-card__toolbar .actions-inner {
    justify-content: flex-end;
}
body.page-gastos .expense-card__expand-toggle {
    border: 1px solid #166534;
    background: linear-gradient(180deg, #1e3a2a 0%, #152a1c 100%);
    color: #bbf7d0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border-radius: 7px;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.2);
}
body.page-gastos .expense-card__expand-toggle:hover {
    border-color: #22c55e;
    color: #fff;
    background: linear-gradient(180deg, #225a3a 0%, #183828 100%);
}
body.page-gastos .expense-card__expand-icon {
    font-size: 12px;
    line-height: 1;
    transition: transform 0.15s ease;
}
body.page-gastos .expense-card__extra {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 4px);
    margin-top: 0;
    box-sizing: border-box;
    padding: 12px 14px;
    z-index: 40;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--cat) 35%, var(--rm-border-soft));
    background: linear-gradient(180deg, #222228 0%, #1a1a20 100%);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.2);
    max-height: min(70vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
body.page-gastos .expense-card__meta {
    margin: 0;
}
body.page-gastos .expense-card__meta--peek {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr);
    gap: 6px 10px;
    align-items: end;
}
body.page-gastos .expense-card__meta-item--due-day {
    width: max-content;
    max-width: 100%;
}
body.page-gastos .expense-card__meta-item--due-hint {
    justify-self: end;
    text-align: right;
    min-width: 0;
}
body.page-gastos .expense-card__due-hint-cell {
    margin: 0;
    text-align: right;
}
body.page-gastos .expense-card__due-hint {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: #86efac;
}
body.page-gastos .expense-card__due-hint--soon {
    color: #86efac;
}
body.page-gastos .expense-card__due-hint--today {
    color: #fde047;
}
body.page-gastos .expense-card__due-hint--late {
    color: #fca5a5;
}
body.page-gastos .expense-card__due-hint--partial-sum {
    color: #facc15;
    font-weight: 800;
}
body.page-gastos .expense-card__due-hint--today-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}
body.page-gastos .expense-card__due-warn-icon {
    flex-shrink: 0;
    font-size: 0.95em;
    color: #fde047;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
body.page-gastos .expense-card__meta--extra {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}
body.page-gastos .expense-card__meta-item {
    margin: 0;
    min-width: 0;
}
body.page-gastos .expense-card__meta-item--span {
    grid-column: 1 / -1;
}
body.page-gastos .expense-card__meta-item dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rm-text-muted);
    margin: 0 0 2px;
}
body.page-gastos .expense-card__meta-item dd {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    color: var(--rm-text);
    word-break: break-word;
}
body.page-gastos .expense-card__due {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
body.page-gastos .category-panel .expense-card .amount {
    color: var(--cat);
}
body.page-gastos .category-panel .expense-card .amount.expense-card__amount-val--paid,
body.page-gastos .category-panel .expense-card .amount.expense-card__amount-val--ontime {
    color: #4ade80 !important;
}
body.page-gastos .category-panel .expense-card .amount.expense-card__amount-val--partial {
    color: #facc15 !important;
}
body.page-gastos .category-panel .expense-card .amount.expense-card__amount-val--overdue {
    color: #f87171 !important;
}
body.page-gastos .expense-card .view-shared-expense-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}
@media (max-width: 520px) {
    body.page-gastos .expense-card__meta--peek,
    body.page-gastos .expense-card__meta--extra {
        grid-template-columns: 1fr;
    }
    body.page-gastos .expense-card__meta-item--due-hint {
        justify-self: start;
        text-align: left;
        padding-top: 0;
    }
    body.page-gastos .expense-card__concept {
        font-size: 1.02rem;
    }
    body.page-gastos .expense-card__amount-val.amount {
        font-size: 1.08rem;
    }
}
body.page-gastos .row-action-trigger,
body.page-ingresos .row-action-trigger,
body.page-ahorros .row-action-trigger,
body.page-inversiones .row-action-trigger {
    border-color: #166534;
    background: linear-gradient(180deg, #22a34d 0%, #17703a 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.85rem !important;
    width: 1.85rem !important;
    height: 1.85rem !important;
    max-width: 1.85rem !important;
    padding: 0 !important;
    border-radius: 7px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-shadow: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.18);
}
/* Desktop: mismo botón cuadrado que mobile */
@media (min-width: 1000px) {
    body.page-gastos .expense-card__expand-toggle {
        width: 1.85rem !important;
        min-width: 1.85rem !important;
        height: 1.85rem !important;
    }
    body.page-gastos .expense-table .row-action-trigger,
    body.page-gastos .expense-card .row-action-trigger,
    body.page-ingresos .income-table .row-action-trigger,
    body.page-ahorros .savings-table .row-action-trigger,
    body.page-inversiones .investment-table .row-action-trigger {
        width: 1.85rem !important;
        min-width: 1.85rem !important;
        max-width: 1.85rem !important;
        height: 1.85rem !important;
        aspect-ratio: 1 / 1;
        border-radius: 7px !important;
        box-sizing: border-box;
        padding: 0 !important;
    }
    body.page-gastos .expense-table .row-action-trigger__icon,
    body.page-gastos .expense-card .row-action-trigger__icon,
    body.page-ingresos .income-table .row-action-trigger__icon,
    body.page-ahorros .savings-table .row-action-trigger__icon,
    body.page-inversiones .investment-table .row-action-trigger__icon {
        font-size: 13px;
        line-height: 1;
    }
}
body.page-gastos .row-action-trigger:hover,
body.page-ingresos .row-action-trigger:hover,
body.page-ahorros .row-action-trigger:hover,
body.page-inversiones .row-action-trigger:hover {
    border-color: #14532d;
    background: linear-gradient(180deg, #24b053 0%, #166534 100%);
}
/* Icono de 3 puntos también en desktop */
body.page-gastos .row-action-trigger__icon,
body.page-ingresos .row-action-trigger__icon,
body.page-ahorros .row-action-trigger__icon,
body.page-inversiones .row-action-trigger__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}
body.page-gastos .row-action-menu,
body.page-ingresos .row-action-menu,
body.page-ahorros .row-action-menu,
body.page-inversiones .row-action-menu {
    border-color: #4ade80;
}
/* Gastos: menú desplegable hacia abajo, tema oscuro (lista Ver / Editar / Registrar pago) */
body.page-gastos .expense-card .row-action-menu {
    top: calc(100% + 4px);
    bottom: auto;
    right: 0;
    left: auto;
    min-width: 10rem;
    padding: 6px;
    z-index: 50;
    background: linear-gradient(180deg, #25252c 0%, #1c1c22 100%);
    border: 1px solid rgba(74, 222, 128, 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
body.page-gastos .expense-card .row-action-option {
    width: 100%;
    color: #f4f4f5;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}
body.page-gastos .expense-card .row-action-option:hover {
    background: rgba(74, 222, 128, 0.14);
    color: #dcfce7;
}

/* Ahorros: acento azul sobre tema oscuro */
body.page-ahorros .panel {
    border: 1px solid var(--rm-border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg, #1a1e28 0%, #141418 100%);
}
body.page-ahorros .panel.savings-empty-panel {
    background: var(--rm-empty-state-bg);
    border-color: rgba(240, 192, 64, 0.25);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
body.page-ahorros .gastos-top .panel {
    border-color: rgba(96, 165, 250, 0.35);
}
body.page-ahorros .savings-head-panel h1,
body.page-ahorros .savings-totals-panel h2,
body.page-ahorros .month-year-header strong {
    color: #93c5fd;
}
body.page-ahorros .savings-head-icon {
    color: #60a5fa;
    font-size: 1.15em;
    flex-shrink: 0;
}
body.page-ahorros .savings-tagline {
    color: var(--rm-text-muted);
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}
body.page-ahorros .gastos-top {
    align-items: stretch;
}
body.page-ahorros .gastos-top > .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.page-ahorros .savings-add-btn {
    min-width: 168px;
    min-height: 48px;
    padding: 10px 16px;
    font-size: 17px;
    font-weight: 700;
}
body.page-ahorros .category-panel {
    border: 1px solid var(--rm-border);
    border-bottom: 5px solid var(--cat);
    overflow: hidden;
    padding: 0;
    background: #141418;
}
body.page-ahorros .cat-header {
    margin: 0;
    padding: 8px 12px;
    justify-content: flex-start;
    background:
        radial-gradient(circle at 72% 36%, color-mix(in srgb, var(--cat) 25%, transparent) 0, transparent 50%),
        linear-gradient(180deg, #1e293b 0%, #161618 100%);
    border-bottom: 5px solid var(--cat);
}
body.page-ahorros .cat-header h2,
body.page-ahorros .cat-header .cat-header__title {
    color: var(--cat);
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
body.page-ahorros .cat-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 18px;
}
body.page-ahorros .cat-header__fa {
    font-size: 1.15em;
    opacity: 0.95;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
body.page-ahorros .category-panel .table-scroll {
    margin: 0;
}
body.page-ahorros .category-panel .savings-table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}
body.page-ahorros .savings-table thead th {
    background: linear-gradient(180deg, #1e40af 0%, #1d4ed8 100%);
    color: #f8fafc;
    font-size: 12px;
    padding: 6px 6px;
    border-bottom: 2px solid #93c5fd;
}
body.page-ahorros .savings-table tbody td {
    font-size: 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--rm-border-soft);
    background: #161618;
    color: var(--rm-text);
}
body.page-ahorros .savings-table tbody tr {
    background: #161618;
}
body.page-ahorros .savings-table tbody tr:hover {
    background: #1e1e24;
}
body.page-ahorros .savings-amount-col {
    text-align: right;
    white-space: nowrap;
}
body.page-ahorros .savings-amount-cell {
    font-weight: 700;
}
body.page-ahorros .savings-notes-cell {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-ahorros .savings-empty-cell {
    text-align: center;
    color: var(--rm-empty-state-fg);
    padding: 20px 12px;
}
body.page-ahorros .savings-empty-cell strong {
    color: var(--rm-empty-state-fg);
    font-weight: 700;
}
body.page-ahorros .savings-empty-panel {
    padding: 8px 12px;
}
body.page-ahorros .savings-totals-section h2 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #93c5fd;
}
body.page-ahorros .savings-edit-btn {
    border: 1px solid #2563eb;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}
body.page-ahorros .savings-edit-btn:hover {
    background: linear-gradient(180deg, #60a5fa 0%, #1d4ed8 100%);
    color: #fff;
}
body.page-ahorros .savings-row-actions {
    text-align: center;
    white-space: nowrap;
}
body.page-ahorros .savings-row-actions .actions-inner {
    justify-content: center;
    width: 100%;
    margin-left: auto;
}
body.page-ahorros .savings-actions-col,
body.page-ahorros .savings-row-actions {
    width: 4.4rem;
    min-width: 4.4rem;
    max-width: 4.4rem;
}
body.page-ahorros .savings-table thead th.savings-actions-col,
body.page-ahorros .savings-table tbody td.savings-row-actions {
    position: sticky;
    right: 0;
    z-index: 3;
    background: #161618;
}
body.page-ahorros .savings-table thead th.savings-actions-col {
    z-index: 4;
    background: linear-gradient(180deg, #1e40af 0%, #1d4ed8 100%);
    text-align: center;
}
body.page-ahorros .savings-row-actions .actions-inner {
    justify-content: center;
    margin-right: 0;
}

/* Popup de acciones de ahorros: botones homogéneos */
#savingRowActionModal .modal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#savingRowActionModal .modal-actions > button {
    min-width: 112px;
    height: 40px;
    padding: 0 14px;
    box-sizing: border-box;
}

/* Ingresos: paneles por categoria — variante oscura (negra) */
body.page-ingresos .category-panel {
    border: 1px solid var(--rm-border);
    border-bottom: 5px solid var(--cat);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    background: #141418;
    overflow: hidden;
    padding: 0;
}
body.page-ingresos .cat-header {
    margin: 0;
    padding: 8px 12px;
    justify-content: flex-start;
    background:
        radial-gradient(circle at 72% 36%, rgba(75, 85, 99, 0.26) 0, rgba(75, 85, 99, 0) 46%),
        linear-gradient(180deg, #111827 0%, #1f2937 52%, #0b1220 100%);
    border-bottom: 5px solid var(--cat);
}
body.page-ingresos .cat-header h2,
body.page-ingresos .cat-header .cat-header__title {
    color: var(--cat);
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
body.page-ingresos .cat-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 18px;
}
body.page-ingresos .cat-header__fa {
    font-size: 1.15em;
    opacity: 0.95;
    color: var(--cat);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
body.page-ingresos .category-panel .table-scroll {
    margin: 0;
}
body.page-ingresos .category-panel .income-table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}
body.page-ingresos .income-empty-panel {
    padding: 8px 12px;
}
body.page-gastos .expense-empty-panel {
    padding: 8px 12px;
}
body.page-ingresos .income-totals-section h2 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #fde68a;
}
body.page-ingresos .income-totals-section .total-item {
    background: color-mix(in srgb, var(--cat) 22%, #1a1a1f);
    border-left-color: var(--cat);
    color: var(--rm-text);
}
body.page-ingresos .income-edit-btn {
    border: 1px solid #111827;
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 1px 2px rgba(17, 24, 39, 0.28);
}
body.page-ingresos .income-edit-btn:hover {
    background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
    color: #fff;
}

/* Inversiones: paneles por categoria */
body.page-inversiones .category-panel {
    border: 1px solid var(--rm-border);
    border-bottom: 5px solid var(--cat);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    background: #141418;
    overflow: hidden;
    padding: 0;
}
body.page-inversiones .cat-header {
    margin: 0;
    padding: 8px 12px;
    justify-content: flex-start;
    background:
        radial-gradient(circle at 72% 36%, color-mix(in srgb, var(--cat) 28%, transparent) 0, transparent 50%),
        linear-gradient(180deg, #2e1f45 0%, #161618 100%);
    border-bottom: 5px solid var(--cat);
}
body.page-inversiones .cat-header h2,
body.page-inversiones .cat-header .cat-header__title {
    color: var(--cat);
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
body.page-inversiones .cat-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 18px;
}
body.page-inversiones .cat-header__fa {
    font-size: 1.15em;
    opacity: 0.95;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
body.page-inversiones .category-panel .table-scroll {
    margin: 0;
}
body.page-inversiones .category-panel .investment-table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}

/* Borde de grillas (igual a Gastos) para Ingresos / Ahorros / Inversiones */
body.page-ingresos .category-panel,
body.page-ahorros .category-panel,
body.page-inversiones .category-panel {
    border: 1px solid var(--rm-border);
    border-bottom: 5px solid var(--cat);
    border-radius: 14px;
    overflow: hidden;
}
body.page-inversiones .investment-empty-panel {
    padding: 8px 12px;
}
body.page-inversiones .investment-totals-section h2 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #c4b5fd;
}
#savingModal .modal-card {
    border-color: color-mix(in srgb, #3b82f6 35%, #e5e7eb);
    border-top: none;
}

/* Inversiones: layout tipo Ahorros, acento violeta / indigo */
body.page-inversiones .panel:not(.category-panel) {
    border: 1px solid var(--rm-border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg, #221a2e 0%, #141418 100%);
}
body.page-inversiones .panel.investment-empty-panel {
    background: var(--rm-empty-state-bg);
    border-color: rgba(240, 192, 64, 0.25);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
body.page-inversiones .gastos-top .panel {
    border-color: rgba(167, 139, 250, 0.35);
}
body.page-inversiones .investment-head-panel h1,
body.page-inversiones .investment-totals-panel h2,
body.page-inversiones .month-year-header strong {
    color: #c4b5fd;
}
body.page-inversiones .investment-head-panel h1 {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 10px;
}
body.page-inversiones .investment-head-icon {
    color: #a78bfa;
    font-size: 1.15em;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.page-inversiones .investment-tagline {
    color: var(--rm-text-muted);
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}
body.page-inversiones .gastos-top {
    align-items: stretch;
}
body.page-inversiones .gastos-top > .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.page-inversiones .investment-add-btn {
    min-width: 168px;
    min-height: 48px;
    padding: 10px 16px;
    font-size: 17px;
    font-weight: 700;
}
body.page-inversiones .investment-table-panel {
    padding: 0;
    overflow: hidden;
}
body.page-inversiones .investment-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1020px;
}
body.page-inversiones .investment-table thead th {
    background: #3b2b55;
    color: #f4f4f5;
    font-size: 12px;
    padding: 6px 6px;
    border-bottom: 2px solid rgba(167, 139, 250, 0.45);
}
body.page-inversiones .investment-table tbody td {
    font-size: 14px;
    vertical-align: middle;
    border-bottom-color: var(--rm-border-soft);
    background: #161618;
    color: var(--rm-text);
}
body.page-inversiones .investment-table tbody tr {
    background: #161618;
}
body.page-inversiones .investment-table tbody tr:hover {
    background: #1e1e24;
}
body.page-inversiones .investment-amount-col {
    text-align: right;
    white-space: nowrap;
}
body.page-inversiones .investment-amount-cell {
    font-weight: 700;
}
body.page-inversiones .investment-notes-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-inversiones .investment-empty-cell {
    text-align: center;
    color: var(--rm-empty-state-fg);
    padding: 20px 12px;
}
body.page-inversiones .investment-empty-cell strong {
    color: var(--rm-empty-state-fg);
    font-weight: 700;
}
body.page-inversiones .investment-row-actions {
    text-align: center;
    white-space: nowrap;
}
body.page-inversiones .investment-row-actions .actions-inner {
    justify-content: center;
    width: 100%;
    margin-left: auto;
}
body.page-inversiones .investment-actions-col,
body.page-inversiones .investment-row-actions {
    width: 4.4rem;
    min-width: 4.4rem;
    max-width: 4.4rem;
}
body.page-inversiones .investment-table thead th.investment-actions-col,
body.page-inversiones .investment-table tbody td.investment-row-actions {
    position: sticky;
    right: 0;
    z-index: 3;
    background: #161618;
}
body.page-inversiones .investment-table thead th.investment-actions-col {
    z-index: 4;
    background: #3b2b55;
    text-align: center;
}
body.page-inversiones .investment-row-actions .actions-inner {
    justify-content: center;
    margin-right: 0;
}

/* Popup de acciones de inversiones: botones homogéneos */
#investmentRowActionModal .modal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#investmentRowActionModal .modal-actions > button {
    min-width: 112px;
    height: 40px;
    padding: 0 14px;
    box-sizing: border-box;
}
#investmentModal .modal-card {
    border-color: color-mix(in srgb, #8b5cf6 35%, #e5e7eb);
    border-top: none;
}

/* Ingresos: tema oscuro + acento dorado */
body.page-ingresos .panel:not(.category-panel) {
    border: 1px solid var(--rm-border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg, #1f1e18 0%, #141418 100%);
}
body.page-ingresos .panel.income-empty-panel {
    background: var(--rm-empty-state-bg);
    border-color: rgba(240, 192, 64, 0.25);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
body.page-ingresos .gastos-top .panel {
    border-color: rgba(240, 192, 64, 0.28);
}
body.page-ingresos .income-head-panel h1,
body.page-ingresos .income-totals-panel h2,
body.page-ingresos .month-year-header strong {
    color: #fde68a;
}
body.page-ingresos .income-head-icon {
    color: #f0c040;
    font-size: 1.15em;
    flex-shrink: 0;
}
body.page-ingresos .income-tagline {
    color: var(--rm-text-muted);
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}
body.page-ingresos .gastos-top {
    align-items: stretch;
}
body.page-ingresos .gastos-top > .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.page-ingresos .income-add-btn {
    min-width: 168px;
    min-height: 48px;
    padding: 10px 16px;
    font-size: 17px;
    font-weight: 700;
}
body.page-ingresos .income-table-panel {
    padding: 0;
    overflow: hidden;
}
body.page-ingresos .income-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    min-width: 1320px;
}
body.page-ingresos .income-table thead th {
    background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
    color: #f8fafc;
    font-size: 12px;
    padding: 6px 6px;
    border-bottom: 2px solid #374151;
    box-sizing: border-box;
}
body.page-ingresos .income-table tbody td {
    font-size: 13px;
    vertical-align: middle;
    border-bottom-color: var(--rm-border-soft);
    background: #161618;
    color: var(--rm-text);
    padding: 6px 6px;
    box-sizing: border-box;
}
body.page-ingresos .income-table tbody tr {
    background: #161618;
}
body.page-ingresos .income-table tbody tr:hover {
    background: #1e1e24;
}
body.page-ingresos .income-amount-col {
    text-align: right;
    white-space: nowrap;
}
body.page-ingresos .income-amount-cell {
    font-weight: 700;
}
body.page-ingresos .income-empty-cell {
    text-align: center;
    color: var(--rm-empty-state-fg);
    padding: 20px 12px;
}
body.page-ingresos .income-empty-cell strong {
    color: var(--rm-empty-state-fg);
    font-weight: 700;
}
body.page-gastos .expense-empty-cell {
    text-align: center;
    color: var(--rm-empty-state-fg);
    padding: 20px 12px;
}
body.page-gastos .expense-empty-cell strong {
    color: var(--rm-empty-state-fg);
    font-weight: 700;
}
body.page-ingresos .income-row-actions {
    text-align: center;
    white-space: nowrap;
}
body.page-ingresos .income-row-actions .actions-inner {
    justify-content: center;
    width: 100%;
    margin-left: auto;
}
body.page-ingresos .income-table thead th.income-actions-col,
body.page-ingresos .income-table tbody td.income-row-actions {
    position: sticky;
    right: 0;
    z-index: 3;
    background: #161618;
}
body.page-ingresos .income-table thead th.income-actions-col {
    z-index: 4;
    background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
    text-align: center;
}
body.page-ingresos .income-row-actions .actions-inner {
    justify-content: center;
    margin-right: 0;
}

/* Popup de acciones de ingresos: botones homogéneos */
#incomeRowActionModal .modal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#incomeRowActionModal .modal-actions > button {
    min-width: 112px;
    height: 40px;
    padding: 0 14px;
    box-sizing: border-box;
}
#incomeModal .modal-card--income {
    max-width: 560px;
    border-color: color-mix(in srgb, #d4af37 35%, #e5e7eb);
    border-top: none;
}
.modal-grid--income {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.modal-field--checkbox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.modal-field--checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #c9a227;
    cursor: pointer;
}

.total-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
}
.total-item {
    background: color-mix(in srgb, var(--cat) 18%, white);
    border-left: 6px solid var(--cat);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 40, 25, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    /* Por encima del topbar fijo (~1100) y con aire superior para no quedar tapado */
    z-index: 1200;
    padding: max(52px, env(safe-area-inset-top, 0px) + 44px) 16px 28px;
    box-sizing: border-box;
}
/* Todos los modales: fondo con fade + tarjeta sube desde abajo (opacidad al inicio) */
@keyframes modal-backdrop-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modal-card-rise-in {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.modal-backdrop.open {
    display: flex;
    animation: modal-backdrop-fade-in 0.32s ease-out forwards;
}
.modal-backdrop.open > .modal-card,
.modal-backdrop.open > .modal-app-shell {
    transform-origin: center bottom;
    animation: modal-card-rise-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Cierre modales: mismo efecto invertido (fade + tarjeta baja) */
@keyframes modal-backdrop-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes modal-card-rise-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(40px);
    }
}
.modal-backdrop.open.is-closing {
    animation: modal-backdrop-fade-out 0.28s ease-in forwards;
}
.modal-backdrop.open.is-closing > .modal-card,
.modal-backdrop.open.is-closing > .modal-app-shell {
    animation: modal-card-rise-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

@keyframes expense-edit-drawer-slide-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}
@keyframes expense-edit-drawer-slide-out {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* Drawer lateral — ver/editar gasto (reemplaza popup centrado) */
#editExpenseModal.modal-backdrop--drawer {
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
}
#editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__scrim {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
}
#editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card {
    flex: 0 0 auto;
    width: min(100vw, 560px);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    box-shadow:
        -10px 0 36px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(18, 111, 56, 0.12);
    transform: translateX(100%);
    transform-origin: right center;
}
#editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding-right: 16px;
}
#editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title {
    min-width: 0;
}
#editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}
#editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__close:hover {
    background: rgba(255, 255, 255, 0.24);
}
#editExpenseModal.modal-backdrop--drawer .modal-card__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* Animación lateral (anula subida desde abajo del .modal-card genérico) */
#editExpenseModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card {
    animation: expense-edit-drawer-slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#editExpenseModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card {
    animation: expense-edit-drawer-slide-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
#editExpenseModal.modal-backdrop--drawer.open > .expense-edit-drawer__scrim {
    animation: none;
}

/* Gastos — drawer alineado a category-panel / expense-card (tema oscuro + acento #4ade80) */
body.page-gastos #editExpenseModal.modal-backdrop {
    background: rgba(8, 16, 11, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card {
    border-radius: 14px 0 0 14px;
    border: 1px solid var(--rm-border-soft);
    border-left: 4px solid #4ade80;
    background: linear-gradient(180deg, #1a1a1f 0%, #141418 100%);
    box-shadow:
        -14px 0 44px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.28);
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head {
    background:
        radial-gradient(circle at 78% 28%, rgba(74, 222, 128, 0.14) 0, transparent 52%),
        linear-gradient(180deg, #1f2520 0%, #161a18 100%);
    border-radius: 14px 0 0 0;
    border-bottom: 4px solid rgba(74, 222, 128, 0.55);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.22);
    padding: 14px 16px 14px 18px;
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title {
    color: #bbf7d0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__close {
    border: 1px solid #166534;
    background: linear-gradient(180deg, #1e3a2a 0%, #152a1c 100%);
    color: #bbf7d0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.22);
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__close:hover {
    border-color: #22c55e;
    color: #fff;
    background: linear-gradient(180deg, #225a3a 0%, #183828 100%);
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .modal-card__body {
    background: linear-gradient(180deg, #18181d 0%, #141418 100%);
    padding: 16px 18px 18px;
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-field__label {
    color: #94a3b8;
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-grid input,
body.page-gastos #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select,
body.page-gastos #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea {
    border-color: var(--rm-border-soft);
    background: #1e1e24;
    color: var(--rm-text);
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-grid input:focus,
body.page-gastos #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select:focus,
body.page-gastos #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-grid input::placeholder,
body.page-gastos #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea::placeholder {
    color: #71717a;
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-grid input[type="file"] {
    color: #cbd5e1;
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .payment-receipt-hint {
    color: #94a3b8;
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .payment-receipt-view-btn {
    color: #86efac;
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .payment-receipt-view-btn:hover {
    color: #bbf7d0;
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .modal-error {
    color: #fecaca;
    background: rgba(127, 29, 29, 0.38);
    border-color: rgba(248, 113, 113, 0.45);
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .modal-actions {
    border-top: 1px solid rgba(74, 222, 128, 0.14);
    margin-top: 16px;
    padding-top: 14px;
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .btn-modal-primary {
    border: 1px solid rgba(74, 222, 128, 0.42);
    background: linear-gradient(180deg, #22a34d 0%, #17703a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 16px rgba(0, 0, 0, 0.35);
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .btn-modal-primary:hover {
    background: linear-gradient(180deg, #2abf5a 0%, #1a853f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 6px 18px rgba(0, 0, 0, 0.4);
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .btn-modal-secondary {
    border: 2px solid rgba(74, 222, 128, 0.38);
    background: rgba(22, 40, 30, 0.65);
    color: #bbf7d0;
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .btn-modal-secondary:hover {
    border-color: #4ade80;
    background: rgba(34, 90, 58, 0.55);
    color: #fff;
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .btn-danger {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(127, 29, 29, 0.35);
    color: #fecaca;
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .btn-danger:hover {
    background: rgba(153, 27, 27, 0.5);
    color: #fff;
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .category-quick-add-btn--icon {
    border: 1px solid #166534;
    background: linear-gradient(180deg, #1e3a2a 0%, #152a1c 100%);
    color: #86efac;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.2);
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer .category-quick-add-btn--icon:hover {
    border-color: #22c55e;
    color: #ecfdf5;
    background: linear-gradient(180deg, #225a3a 0%, #183828 100%);
}
body.page-gastos #editExpenseModal.modal-backdrop--drawer.edit-expense-modal--readonly .modal-card__body .modal-grid input:not([type="hidden"]):disabled,
body.page-gastos #editExpenseModal.modal-backdrop--drawer.edit-expense-modal--readonly .modal-card__body .modal-grid select:disabled,
body.page-gastos #editExpenseModal.modal-backdrop--drawer.edit-expense-modal--readonly .modal-card__body .modal-grid textarea:disabled,
body.page-gastos #editExpenseModal.modal-backdrop--drawer.edit-expense-modal--readonly .modal-card__body .modal-grid .modal-field__select:disabled {
    cursor: default;
    background-color: #25252d !important;
    background-image: none !important;
    color: #cbd5e1 !important;
    opacity: 1;
    border-color: #3f3f48 !important;
    box-shadow: none !important;
}
@media (max-width: 520px) {
    body.page-gastos #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card {
        border-radius: 0;
        border-left-width: 3px;
    }
    body.page-gastos #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head {
        border-radius: 0;
    }
}

/* Menú hamburguesa (mobile): panel baja desde arriba + fade (inverso vertical al modal) */
@keyframes topbar-nav-slide-down-in {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes topbar-nav-slide-up-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-14px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop.open,
    .modal-backdrop.open > .modal-card,
    .modal-backdrop.open > .modal-app-shell {
        animation: none;
        opacity: 1;
    }
    .modal-backdrop.open > .modal-card,
    .modal-backdrop.open > .modal-app-shell {
        transform: none;
    }
    #editExpenseModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
    #editExpenseModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card {
        animation: none;
        transform: none;
    }
    .modal-backdrop.open.is-closing,
    .modal-backdrop.open.is-closing > .modal-card,
    .modal-backdrop.open.is-closing > .modal-app-shell {
        animation: none;
        opacity: 1;
    }
    .modal-backdrop.open.is-closing > .modal-card,
    .modal-backdrop.open.is-closing > .modal-app-shell {
        transform: none;
    }
    body.auth-modal-open:not(.auth-modal-is-closing) .auth-modal-backdrop:not([hidden]),
    body.auth-modal-is-closing .auth-modal-backdrop,
    body.auth-show-login:not(.auth-modal-is-closing) #auth-login.auth-login-shell,
    body.auth-modal-is-closing.auth-show-login #auth-login.auth-login-shell,
    body.auth-show-register:not(.auth-modal-is-closing) .auth-register-panel__inner.auth-login-shell,
    body.auth-modal-is-closing.auth-show-register .auth-register-panel__inner.auth-login-shell,
    body.auth-show-plans:not(.auth-modal-is-closing) .auth-plans-panel__inner.auth-login-shell,
    body.auth-modal-is-closing.auth-show-plans .auth-plans-panel__inner.auth-login-shell {
        animation: none !important;
        opacity: 1;
    }
    body.auth-show-login #auth-login.auth-login-shell {
        transform: translate(-50%, -50%);
    }
    .topbar-bar nav.is-open {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .topbar-bar nav.is-open.is-closing {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.modal-card {
    width: min(680px, 100%);
    max-height: min(90vh, 720px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow:
        0 4px 6px -1px rgba(31, 122, 58, 0.08),
        0 25px 50px -12px rgba(0, 0, 0, 0.22);
    border: 1px solid color-mix(in srgb, #1f7a3a 14%, #e5e7eb);
}
.modal-card--payment {
    width: min(440px, 100%);
    max-height: none;
}
/* Formularios en sesión: mismo marco verde/dorado que login/planes */
.modal-app-shell.auth-login-shell {
    position: relative;
    overflow: visible;
    width: min(680px, 100%);
    max-width: 100%;
    padding: 44px 10px 12px;
    border-radius: 22px;
    border: 2px solid rgba(212, 175, 55, 0.9);
    background:
        linear-gradient(145deg, rgba(34, 197, 94, 0.14) 0%, transparent 45%),
        linear-gradient(165deg, rgba(11, 96, 48, 0.52) 0%, rgba(4, 46, 28, 0.78) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 1px rgba(253, 230, 138, 0.55),
        0 16px 48px rgba(0, 0, 0, 0.42),
        0 0 24px 6px rgba(255, 220, 130, 0.5),
        0 0 52px 16px rgba(212, 175, 55, 0.38),
        0 0 88px 28px rgba(180, 83, 9, 0.18),
        -6px -10px 64px rgba(253, 224, 71, 0.12);
    backdrop-filter: blur(2px);
    box-sizing: border-box;
}
#incomeModal .modal-app-shell.auth-login-shell {
    width: min(560px, 100%);
}
.modal-app-shell.auth-login-shell .auth-login-card-inner {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: min(85vh, 720px);
    margin: 4px 4px 2px;
    padding: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fafcfa 100%);
    border: 1px solid rgba(212, 175, 55, 0.65);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.85) inset,
        0 2px 12px rgba(11, 96, 48, 0.08);
}
.modal-app-shell.auth-login-shell .modal-card.modal-card--in-app-shell {
    width: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}
/* Misma lectura que login: marco verde exterior + tarjeta blanca; sin segunda franja verde en la cabecera */
.modal-app-shell.auth-login-shell .auth-login-card-inner .modal-card.modal-card--in-app-shell {
    border-top: none;
    border-radius: 0;
    overflow: hidden;
}
.modal-app-shell.auth-login-shell .auth-login-card-inner .modal-card.modal-card--in-app-shell .modal-card__head {
    background: #ffffff;
    padding: 20px 20px 14px;
    border-radius: 14px 14px 0 0;
    box-shadow: none;
    border-bottom: 1px solid rgba(18, 111, 56, 0.12);
}
.modal-app-shell.auth-login-shell .auth-login-card-inner .modal-card.modal-card--in-app-shell .modal-card__title {
    color: #126f38;
    text-shadow: none;
}
.modal-app-shell.auth-login-shell .auth-login-card-inner .modal-card.modal-card--in-app-shell .modal-card__subtitle {
    color: #475569;
}
/* editExpenseModal: drawer lateral (.modal-backdrop--drawer), sin modal-app-shell */
#categoryEditModal .modal-app-shell.auth-login-shell {
    width: min(680px, 100%);
}
#categoryEditModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#categoryViewModal .modal-app-shell.auth-login-shell {
    width: min(680px, 100%);
}
#categoryViewModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
/* Perfil: un solo marco verde/dorado (sin .auth-login-card-inner anidado) */
.page-perfil #perfilAuthShell.modal-app-shell.auth-login-shell {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 16px 14px 18px;
    box-sizing: border-box;
}
.page-perfil #perfilAuthShell > .modal-card.modal-card--in-app-shell {
    margin: 0;
    max-width: 100%;
    width: 100%;
    max-height: min(85vh, 720px);
    border-radius: 14px;
    overflow: hidden;
    border-top: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12) inset,
        0 8px 28px rgba(0, 0, 0, 0.18);
}
.page-perfil #perfilAuthShell .modal-card__body {
    overflow-x: hidden;
    max-width: 100%;
    background: #ffffff;
    border-radius: 0 0 14px 14px;
    /* Sin padding superior: evita franja blanca entre cabecera verde y pestañas */
    padding: 0 0 20px;
}
.page-perfil #perfilAuthShell .modal-card__head {
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    /* La ilustración no pegada al borde derecho */
    padding-right: 18px;
}
.page-perfil #perfilAuthShell .perfil-modal-card__head-text {
    min-width: 0;
    flex: 1;
}
/* Ilustración alineada al bloque del título (antes absolute arriba a la derecha del shell) */
.page-perfil #perfilAuthShell .modal-card__head .auth-login-deco.perfil-head-deco {
    position: relative;
    top: auto;
    right: auto;
    flex-shrink: 0;
    width: min(72px, 22vw);
    align-self: center;
}
.page-perfil #perfilAuthShell .modal-card__title {
    color: #d4af37;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.page-perfil #perfilAuthShell .modal-card__subtitle {
    color: rgba(255, 255, 255, 0.88);
}
.page-perfil #perfilAuthShell .perfil-form label > span:first-child,
.page-perfil #perfilAuthShell .perfil-password-form label > span:first-child,
.page-perfil #perfilAuthShell .perfil-share-form label > span:first-child {
    color: #374151;
    font-weight: 600;
}
.page-perfil #perfilAuthShell .perfil-footnote {
    color: #64748b;
}
.page-perfil #perfilAuthShell .perfil-password-title,
.page-perfil #perfilAuthShell .perfil-share-subtitle {
    color: #1f2937;
}
#incomeModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#investmentModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#savingModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#paymentModal .modal-app-shell.auth-login-shell,
#rowActionModal .modal-app-shell.auth-login-shell,
#incomeDeleteModal .modal-app-shell.auth-login-shell,
#investmentDeleteModal .modal-app-shell.auth-login-shell,
#savingDeleteModal .modal-app-shell.auth-login-shell {
    width: min(440px, 100%);
}
#paymentModal .modal-app-shell .modal-card.modal-card--in-app-shell,
#rowActionModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#incomeDeleteModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#investmentDeleteModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#savingDeleteModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
.modal-app-shell.auth-login-shell .auth-modal__close {
    background: transparent;
    border: none;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.88);
    opacity: 0.88;
    border-radius: 10px;
    left: 8px;
    right: auto;
    z-index: 6;
}
.modal-app-shell.auth-login-shell .auth-modal__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    opacity: 1;
}
.modal-card__head {
    padding: 18px 20px 16px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, #1f7a3a 92%, #0d3d1f) 0%,
        #1f7a3a 48%,
        color-mix(in srgb, #1f7a3a 75%, #2d9f52) 100%
    );
    color: #fff;
}
.modal-card__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.modal-card__subtitle {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 400;
}
.modal-card__title--gold {
    color: #d4af37;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.modal-card__body {
    padding: 18px 20px 20px;
    overflow-y: auto;
}
.modal-card__body .modal-grid {
    margin-bottom: 0;
}
.modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.modal-grid--fields {
    gap: 12px 14px;
}
/* Gastos — modal editar: filas lógicas (2/3 columnas) */
#editExpenseModal .modal-grid--expense-edit {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
}
#editExpenseModal .modal-expense-row {
    display: grid;
    gap: 12px 18px;
    width: 100%;
    min-width: 0;
    align-items: start;
}
#editExpenseModal .modal-expense-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
#editExpenseModal .modal-expense-row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#editExpenseModal .modal-expense-row--1 {
    grid-template-columns: minmax(0, 1fr);
}
/* Intereses (1/3) + Notas (2/3), misma rejilla que las filas de 3 campos */
#editExpenseModal .modal-expense-row--interest-notes .modal-field--notes-span2 {
    grid-column: span 2;
    min-width: 0;
}
#editExpenseModal .modal-expense-row--interest-notes .modal-field--interest {
    max-width: none;
}
#editExpenseModal .category-picker-row__select {
    max-width: none;
}
@media (max-width: 720px) {
    #editExpenseModal .modal-expense-row--2,
    #editExpenseModal .modal-expense-row--3 {
        grid-template-columns: 1fr;
    }
    #editExpenseModal .modal-expense-row--interest-notes .modal-field--notes-span2 {
        grid-column: auto;
    }
}
.modal-field--full {
    grid-column: 1 / -1;
}
.modal-field__textarea {
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    min-height: 52px;
    resize: vertical;
    font-family: inherit;
    background: #fff;
    color: #1f2937;
}
.modal-field__textarea:focus {
    outline: none;
    border-color: #1f7a3a;
    box-shadow: 0 0 0 3px color-mix(in srgb, #1f7a3a 22%, transparent);
}
.payment-detail-grid {
    margin-bottom: 4px;
}
.payment-receipt-hint {
    font-size: 11px;
    margin: 4px 0 0;
    color: #64748b;
}
.modal-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.modal-field__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin: 0;
    line-height: 1.25;
}
.modal-card__body .modal-grid input,
.modal-card__body .modal-grid .modal-field__select {
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #fff;
    color: #1f2937;
}
.modal-card__body .modal-grid .modal-field__select {
    cursor: pointer;
    appearance: auto;
}
.modal-card__body .modal-grid input[type="file"] {
    padding: 8px 0;
    font-size: 13px;
    border: 0;
    background: transparent;
}
.modal-card__body .modal-grid input:focus,
.modal-card__body .modal-grid .modal-field__select:focus {
    outline: none;
    border-color: #1f7a3a;
    box-shadow: 0 0 0 3px color-mix(in srgb, #1f7a3a 22%, transparent);
}
.modal-card__body .modal-grid input::placeholder {
    color: #9ca3af;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef2f0;
}
.btn-modal-primary {
    border: 0;
    background: #1f7a3a;
    color: #fff;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px color-mix(in srgb, #1f7a3a 35%, transparent);
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.btn-modal-primary:hover {
    background: color-mix(in srgb, #1f7a3a 88%, #000);
    box-shadow: 0 4px 14px color-mix(in srgb, #1f7a3a 40%, transparent);
}
.btn-modal-primary:active {
    transform: translateY(1px);
}
.btn-modal-secondary {
    border: 2px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.btn-modal-secondary:hover {
    border-color: #1f7a3a;
    color: #1f7a3a;
    background: color-mix(in srgb, #1f7a3a 6%, white);
}
.btn-modal-danger {
    border: 2px solid #fecaca;
    background: #fff5f5;
    color: #dc2626;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-modal-danger:hover {
    border-color: #fca5a5;
    background: #fee2e2;
}
.payment-section-label {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}
.payment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.payment-option[hidden],
#pendingPaymentOption[hidden] {
    display: none !important;
}
.payment-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 14px 14px 16px;
    border: 2px solid #e8ece9;
    border-radius: 12px;
    cursor: pointer;
    background: #fafcfb;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.payment-option:hover {
    border-color: color-mix(in srgb, #1f7a3a 35%, #e8ece9);
    background: color-mix(in srgb, #1f7a3a 4%, #fafcfb);
}
.payment-option:has(input:checked) {
    border-color: #1f7a3a;
    background: color-mix(in srgb, #1f7a3a 10%, white);
    box-shadow: 0 0 0 1px #1f7a3a;
}
.payment-option:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}
.payment-option input[type="radio"] {
    margin: 2px 0 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #1f7a3a;
    cursor: pointer;
}
.payment-option:has(input:disabled) input[type="radio"] {
    cursor: not-allowed;
}
.payment-option__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.payment-option__title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.25;
}
.payment-option__hint {
    font-size: 12px;
    line-height: 1.4;
    color: #6b7280;
}
.payment-option:has(input:checked) .payment-option__title {
    color: #14532d;
}
.partial-amount-wrap {
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, #1f7a3a 7%, #f8faf9);
    border: 1px solid color-mix(in srgb, #1f7a3a 18%, #e5e7eb);
}
.partial-amount-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}
.partial-input-shell {
    position: relative;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    min-height: 44px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.partial-input-shell:focus-within {
    border-color: #1f7a3a;
    box-shadow: 0 0 0 3px color-mix(in srgb, #1f7a3a 22%, transparent);
}
.partial-input-watermark {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, #1f7a3a 28%, #94a3b8);
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.12s ease;
}
.partial-input-watermark.is-hidden {
    opacity: 0;
    visibility: hidden;
}
.modal-card__body #partialAmountInput {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    min-height: 42px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 15px;
    background: transparent;
    box-shadow: none;
    transition: none;
}
.modal-card__body #partialAmountInput:focus {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}
.modal-error {
    color: #b91c1c;
    font-size: 13px;
    margin: 0 0 12px;
    line-height: 1.35;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
}
.currency-form-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(160px, max-content);
    gap: 12px 14px;
    align-items: end;
    margin-bottom: 20px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}
.currency-official-cell {
    min-height: 42px;
    display: flex;
    align-items: center;
}
.currency-official-cb {
    width: 18px;
    height: 18px;
    accent-color: #1f7a3a;
    cursor: pointer;
}
.currency-form-btns-label {
    visibility: hidden;
    line-height: 1.2;
    min-height: 1em;
}
.currency-form-btns-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 42px;
}
.currency-form-btns-row .btn,
.currency-form-btns-row .btn-modal-secondary {
    white-space: nowrap;
}
.currency-form-grid .modal-field input[type="color"] {
    height: 42px;
    padding: 2px 4px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}
.currency-form-grid #currencyCode[readonly] {
    background: #e2e8f0;
    color: #475569;
    border-color: #cbd5e1;
    cursor: not-allowed;
    box-shadow: none;
}
.currency-form-grid #currencyCode[readonly]:focus {
    outline: none;
    border-color: #cbd5e1;
    box-shadow: none;
}
@media (max-width: 1100px) {
    .currency-form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .currency-form-btns {
        grid-column: 1 / -1;
    }
}
@media (max-width: 640px) {
    .currency-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}
/* Config > Monedas: lista Frankfurter + alta manual */
.currency-section-title {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin: 0 0 12px;
}
.currency-subtitle-manual {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #92400e;
}
.currency-config-ff-block {
    margin-bottom: 4px;
}
.currency-ff-filter {
    width: 100%;
    max-width: 480px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    box-sizing: border-box;
}
.currency-ff-select {
    width: 100%;
    min-height: 200px;
    max-height: 300px;
    font-size: 14px;
    line-height: 1.35;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    box-sizing: border-box;
}
.currency-manual-panel {
    margin-top: 14px;
    padding: 16px;
    border-radius: 12px;
    border: 1px dashed #ca8a04;
    background: #fffbeb;
}
.btn-currency-manual-toggle {
    margin-top: 12px;
    background: transparent;
    border: none;
    color: #1d4ed8;
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 0;
    font-weight: 600;
}
.btn-currency-manual-toggle:hover {
    color: #1e3a8a;
}
.currency-readonly-input {
    background: #e2e8f0 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
    cursor: default;
}
body.page-config-monedas .subnav {
    border-top-right-radius: 18px;
    overflow: hidden;
}
body.page-config-monedas .subnav + .panel {
    border-top-right-radius: 18px;
    overflow: hidden;
}
.currency-form-grid--ff {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    .currency-form-grid--ff {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.currency-form-grid--manual {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
    .currency-form-grid--manual {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.currency-add-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}
.config-form-msg {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    background: #ecfdf5;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.config-form-msg--err {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}
.config-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.category-order-cell {
    white-space: nowrap;
    text-align: center;
}
/* Flechas de orden estilo referencia (sin imagen externa) */
.category-order-inline {
    display: inline-flex;
    border: 1px solid #d7ba48;
    border-radius: 10px;
    overflow: hidden;
    flex: 0 0 auto;
}
.category-move-btn,
.subcat-inner-table .subcat-move-btn {
    width: 32px;
    height: 24px;
    border: 0;
    border-radius: 0;
    background: #efe58f;
    cursor: pointer;
    vertical-align: middle;
    padding: 0;
    flex: 0 0 auto;
    position: relative;
}
.category-move-btn[data-dir="down"],
.subcat-inner-table .subcat-move-btn[data-dir="down"] {
    background: #efe58f;
}
.category-move-btn[data-dir="up"],
.subcat-inner-table .subcat-move-btn[data-dir="up"] {
    background: #f2cb05;
}
.category-move-btn::before,
.subcat-inner-table .subcat-move-btn::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 3px solid #105312;
    border-bottom: 3px solid #105312;
    position: absolute;
    top: 50%;
    left: 50%;
}
.category-move-btn[data-dir="down"]::before,
.subcat-inner-table .subcat-move-btn[data-dir="down"]::before {
    transform: translate(-50%, -52%) rotate(45deg);
}
.category-move-btn[data-dir="up"]::before,
.subcat-inner-table .subcat-move-btn[data-dir="up"]::before {
    transform: translate(-50%, -48%) rotate(-135deg);
}
.category-move-btn + .category-move-btn,
.subcat-inner-table .subcat-move-btn + .subcat-move-btn {
    border-left: 1px solid #d7ba48;
    margin-left: 0;
}
.category-move-btn:hover,
.subcat-inner-table .subcat-move-btn:hover {
    filter: brightness(0.95);
}
.config-cat-name {
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}
.modal-card--category-view .category-view-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.35;
    overflow-x: auto;
    padding: 4px 0 14px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 12px;
}
.modal-card--category-view .category-view-name {
    font-weight: 700;
    flex-shrink: 0;
}
.modal-card--category-view .category-view-sep {
    color: #94a3b8;
    flex-shrink: 0;
    user-select: none;
}
.modal-card--category-view .category-view-sep--icon {
    margin-left: 2px;
}
.modal-card--category-view .category-view-kind {
    color: #475569;
    flex-shrink: 0;
}
.modal-card--category-view .category-view-color {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.modal-card--category-view .category-view-color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}
.modal-card--category-view .category-view-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    min-width: 1.25em;
}
.modal-card--category-view .category-view-subsec {
    margin-top: 8px;
}
.modal-card--category-view .category-view-subsec .subcat-table-frame {
    margin-top: 0;
}
.modal-card--category-view .category-view-actions {
    margin-top: 16px;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
.cat-main-row td {
    border-bottom-color: color-mix(in srgb, #000 14%, transparent);
}
.cat-main-row td:not(.category-name-cell):not(.category-icon-cell) {
    background: #ffffff;
}
.category-name-cell {
    border-radius: 0;
}
.config-actions .btn.category-edit-btn,
.subcat-inner-table .btn.subcat-edit-btn {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
}
.category-form-grid {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 92px minmax(140px, 0.85fr) minmax(180px, 1.1fr) auto;
    gap: 8px 8px;
    align-items: end;
    margin-bottom: 12px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}
.category-form-grid .category-form-input,
.category-form-grid .modal-field__select,
.category-form-grid .category-icon-combo__btn {
    min-height: 40px;
    height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.category-form-grid .modal-field__select,
.category-grid-toolbar .modal-field__select,
.category-form-grid .category-icon-combo__btn {
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    color: #1f2937;
}
.category-form-grid .category-icon-combo__btn {
    font-size: 14px;
}
.category-icon-select {
    font-size: 13px;
    max-width: 100%;
}
.category-table-icon-col {
    width: 52px;
    text-align: center;
    vertical-align: middle;
}
.category-grid-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 10px;
}
.category-grid-toolbar .modal-field__label {
    margin: 0;
    white-space: nowrap;
}
.category-grid-toolbar .modal-field__select {
    width: auto;
    min-width: 180px;
    min-height: 40px;
    padding: 8px 12px;
    appearance: auto;
}
.cat-main-row .category-icon-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.22));
}
.category-icon-empty {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
    font-size: 14px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.category-icon-combo {
    position: relative;
    width: 100%;
    min-width: 0;
}
.category-icon-combo__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    min-height: 38px;
    padding: 6px 10px;
    font-size: 13px;
    color: #1f2937;
    background: #fff;
}
.category-icon-combo__btn:focus {
    outline: none;
    border-color: #1f7a3a;
    box-shadow: 0 0 0 3px color-mix(in srgb, #1f7a3a 22%, transparent);
}
.category-icon-combo__leading {
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.2em;
}
.category-icon-combo__leading i {
    font-size: 16px;
    color: #166534;
}
.category-icon-combo__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.category-icon-combo__caret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #64748b;
    margin-left: 4px;
}
.category-icon-combo__list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 10050;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
.category-icon-combo__list[hidden] {
    display: none !important;
}
.category-icon-combo__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #1f2937;
}
.category-icon-combo__option:hover,
.category-icon-combo__option[aria-selected="true"] {
    background: #f1f5f9;
}
.category-icon-combo__option i {
    flex: 0 0 22px;
    width: 22px;
    text-align: center;
    font-size: 16px;
    color: #166534;
}
.category-icon-combo__opt-empty {
    flex: 0 0 22px;
    width: 22px;
    text-align: center;
    color: #94a3b8;
    font-weight: 600;
}
.category-icon-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.category-edit-icon-field {
    grid-column: 1 / -1;
}
.category-form-grid .modal-field {
    min-width: 0;
}
.category-form-grid .modal-field__label,
.category-edit-grid .modal-field__label {
    text-transform: none;
    letter-spacing: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}
.category-form-input {
    width: 100%;
    min-height: 38px;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 14px;
    background: #fff;
    color: #1f2937;
}
.category-form-input:focus {
    outline: none;
    border-color: #1f7a3a;
    box-shadow: 0 0 0 3px color-mix(in srgb, #1f7a3a 22%, transparent);
}
.category-form-input--color {
    height: 38px;
    padding: 1px 3px;
    cursor: pointer;
}
.color-map-picker {
    position: relative;
    width: 236px;
    max-width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    padding: 4px;
}
.color-picker-trigger {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
}
.color-picker-trigger__swatch {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    display: inline-block;
}
.color-picker-trigger__label {
    line-height: 1;
}
.color-picker-trigger:hover {
    border-color: #1f7a3a;
    background: color-mix(in srgb, #1f7a3a 6%, white);
}
.color-map-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 7px;
    cursor: crosshair;
}
.color-map-modal-card {
    width: min(500px, 90vw);
}
.color-map-modal-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
.color-map-picker--modal {
    width: 100% !important;
    max-width: none !important;
    padding: 6px;
    margin: 0;
}
.color-map-picker--modal .color-map-center-black {
    width: 18px;
    height: 18px;
}
.color-map-picker--modal .color-map-marker {
    width: 20px;
    height: 20px;
}
.color-map-center-black {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #111111;
    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.color-map-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px rgba(0,0,0,.35);
    pointer-events: none;
    display: none;
}
.category-form-btns-label {
    visibility: hidden;
    line-height: 1.2;
    min-height: 1em;
}
.category-form-btns-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 38px;
}
.category-form-btns-row .btn,
.category-form-btns-row .btn-modal-secondary {
    min-height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 11px;
    padding-right: 11px;
}
/* Configuracion > Categorias: esquinas y scroll de grilla */
body.page-config-categorias .subnav {
    border-top-right-radius: 18px;
    overflow: hidden;
}
body.page-config-categorias .subnav + .panel {
    border-top-right-radius: 18px;
    overflow: hidden;
}
body.page-config-categorias .table-scroll.table-scroll--category-fit {
    max-height: 430px;
    overflow: auto;
    padding-right: 4px;
}
body.page-config-categorias .table-scroll.table-scroll--category-fit .category-grid-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #ffffff;
}
.category-table th,
.category-table td {
    padding-top: 8px;
    padding-bottom: 8px;
}
.category-table th:nth-child(1),
.category-table td:nth-child(1) {
    width: 35%;
    min-width: 0;
    box-sizing: border-box;
    word-break: break-word;
}
/* Icono: una sola celda compacta (no confundir con ancho de acciones) */
.category-table th:nth-child(2),
.category-table td:nth-child(2) {
    width: 52px;
    max-width: 56px;
    padding-left: 4px;
    padding-right: 4px;
    box-sizing: border-box;
}
.category-table td.config-actions {
    min-width: 0;
    width: auto;
    height: 44px;
    vertical-align: middle;
}
@media (min-width: 769px) {
    .category-table td.config-actions {
        min-width: 260px;
    }
}
.category-table .config-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    white-space: nowrap;
}
.category-table td.config-actions:empty::before {
    content: "\00a0";
    display: inline-block;
    min-width: 1px;
}
.category-table .config-actions .btn,
.category-table .config-actions .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    white-space: nowrap;
}
.category-edit-grid {
    grid-template-columns: 1fr 110px;
}
.category-edit-grid .color-map-picker {
    width: 236px;
}
.category-edit-actions {
    margin-top: 10px;
}
.category-edit-divider {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 14px 0 12px;
}
.category-edit-subtitle {
    margin: 0 0 10px;
    font-size: 14px;
    color: #334155;
}
.subcat-table-frame {
    margin-top: 8px;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}
.subcat-table-frame__head {
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    background: #eef2f7;
    border-bottom: 1px solid #d9e2ec;
}
.subcat-table-frame__body {
    padding: 10px;
    background: #f8fafc;
}
.subcat-toolbar--modal {
    margin-bottom: 8px;
}
.subcat-table-scroll {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
}
.subcat-modal-table th,
.subcat-modal-table td {
    padding-top: 7px;
    padding-bottom: 7px;
}
@media (max-width: 900px) {
    .category-form-grid {
        grid-template-columns: 1fr 84px;
        gap: 8px 8px;
        padding: 8px;
        margin-bottom: 10px;
    }
    .category-form-grid .modal-field:nth-child(3) {
        grid-column: 1 / -1;
    }
    .category-form-grid .category-form-btns {
        grid-column: 1 / -1;
    }
    .category-form-btns-row {
        justify-content: flex-end;
    }
    .color-map-picker {
        width: 210px;
    }
    .color-map-modal-card {
        width: min(96vw, 100%);
    }
    .color-map-modal-body {
        width: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }
    .color-map-picker--modal {
        width: 100% !important;
        max-width: none !important;
    }
}
@media (max-width: 520px) {
    .category-form-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .category-form-btns-row {
        justify-content: stretch;
    }
    .category-form-btns-row .btn,
    .category-form-btns-row .btn-modal-secondary {
        flex: 1 1 0;
    }
    .color-picker-trigger {
        width: 100%;
        justify-content: center;
    }
    .color-map-modal-body {
        padding-left: 6px;
        padding-right: 6px;
    }
}
.subcat-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.subcat-toolbar .subcat-name-input {
    flex: 1 1 200px;
    min-width: 160px;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
}
.subcat-inner-table {
    margin-top: 4px;
    font-size: 14px;
}
.subcat-inner-table .subcat-name-cell {
    font-weight: 500;
}
.subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0;
    margin-bottom: 0;
    max-width: 100%;
    border-bottom: 1px solid #cbd5e1;
}
.subnav a {
    text-decoration: none;
    border: 1px solid #cbd5e1;
    border-bottom: 0;
    background: #f8fafc;
    color: #334155;
    border-radius: 10px 10px 0 0;
    padding: 8px 14px;
    flex: 0 1 auto;
    max-width: 100%;
    box-sizing: border-box;
    margin-right: 6px;
    margin-bottom: -1px;
    font-weight: 500;
}
.subnav a.active {
    background: #d4af37;
    color: #173018;
    border-color: #b8941f;
    border-bottom: 1px solid #ffffff;
    font-weight: 700;
}
.subnav + .panel {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 1px solid #cbd5e1;
    border-top: none;
    box-shadow: none;
}
/* Configuración (/configuracion/*): subnav + panel como tarjeta única, estilo cercano a la Guía (tabs intactos) */
.topbar--hero ~ main.container:has(> section.subnav) {
    padding-bottom: 32px;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0;
    margin-bottom: 0;
    max-width: 100%;
    border: 1px solid rgba(27, 94, 32, 0.14);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    padding: 12px 14px 0;
    background: linear-gradient(180deg, #ecfdf5 0%, #f8fafc 46%, #ffffff 100%);
    box-shadow: 0 6px 28px rgba(15, 41, 24, 0.1);
}
.topbar--hero ~ main.container:has(> section.subnav) > section.subnav a {
    text-decoration: none;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-bottom: 0;
    background: #ffffff;
    color: #334155;
    border-radius: 12px 12px 0 0;
    padding: 9px 16px;
    flex: 0 1 auto;
    max-width: 100%;
    box-sizing: border-box;
    margin-right: 8px;
    margin-bottom: 0;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.subnav a:hover {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.22);
    color: #0f172a;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.subnav a.active {
    background: linear-gradient(180deg, #fde68a 0%, #d4af37 96%);
    color: #0f172a;
    border-color: rgba(148, 124, 31, 0.85);
    border-bottom: 1px solid #ffffff;
    font-weight: 800;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 18px rgba(212, 175, 55, 0.32);
}
.topbar--hero ~ main.container:has(> section.subnav) > section.panel {
    margin-top: -1px;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(27, 94, 32, 0.12);
    border-radius: 0 0 20px 20px;
    background: #ffffff;
    box-shadow:
        0 24px 48px rgba(15, 41, 24, 0.12),
        0 8px 16px rgba(15, 23, 42, 0.06);
    padding: 22px 24px 28px;
    /* El body usa texto claro (--rm-text); en panel blanco forzar texto oscuro */
    color: #0f172a;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.panel .muted {
    color: #475569;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.panel h2 {
    color: #0f172a;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.panel .modal-field__label,
.topbar--hero ~ main.container:has(> section.subnav) > section.panel label:not(.fx-mode-label) {
    color: #334155;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.panel input,
.topbar--hero ~ main.container:has(> section.subnav) > section.panel select,
.topbar--hero ~ main.container:has(> section.subnav) > section.panel textarea {
    color: #0f172a;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.panel > h1:first-child {
    font-size: clamp(1.35rem, 2.8vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
}
@media (max-width: 640px) {
    .subnav {
        gap: 0;
    }
    .subnav a {
        padding: 6px 10px;
        font-size: 13px;
        margin-right: 4px;
    }
    .topbar--hero ~ main.container:has(> section.subnav) > section.subnav a {
        padding: 7px 11px;
        font-size: 13px;
        margin-right: 5px;
    }
}
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}
.dot--lg {
    width: 22px;
    height: 22px;
    margin-right: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    vertical-align: middle;
}
.chips { display: flex; gap: 8px; margin-bottom: 12px; }
.chip {
    border-radius: 999px;
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    background: #fff;
    font: inherit;
    cursor: pointer;
}
.chip.active { background: #111827; color: #fff; }
/* Chips 2/3/4 colores (vencimientos): pastilla tipo Acción, rojo oscuro */
.due-color-mode .chip {
    border: 1px solid #d1d5db;
    padding: 5px 14px;
    background: #fff;
    color: #7f1d1d;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.25;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.due-color-mode .chip:hover {
    border-color: #fca5a5;
    background: #fff5f5;
    color: #991b1b;
}
.due-color-mode .chip.active {
    border-color: #7f1d1d;
    color: #fff;
    background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.18);
    text-shadow: none;
}
.due-color-mode .chip.active:hover {
    border-color: #7f1d1d;
    background: linear-gradient(180deg, #e11d48 0%, #7f1d1d 100%);
    color: #fff;
}
.range-bar {
    background: linear-gradient(90deg, #ef4444 0% 32%, #f97316 32% 65%, #eab308 65% 80%, #22c55e 80% 100%);
    height: 20px;
    border-radius: 8px;
    margin-bottom: 10px;
}
.due-color-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 12px;
}
.due-color-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
}
.due-color-pill i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.due-color-track {
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 12px;
}
.due-boundaries {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.due-boundary {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    display: grid;
    gap: 8px;
}
.due-boundary label {
    font-size: 13px;
    color: #334155;
    font-weight: 700;
}
.due-boundary strong {
    font-size: 14px;
    color: #166534;
}
.due-boundary input[type="range"] {
    width: 100%;
    accent-color: #1f7a3a;
    padding: 0;
}
.tag-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.tag {
    border-left: 6px solid var(--c);
    background: color-mix(in srgb, var(--c) 10%, white);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media (max-width: 980px) {
    .cards.five, .cards.three, .grid-2, .tag-grid, .total-grid, .gastos-top { grid-template-columns: 1fr; }
    .due-boundaries { grid-template-columns: 1fr; }
}
/* Menú hamburguesa: ancho menor a 1000px (misma interacción que mobile) */
@media (max-width: 999px) {
    .topbar {
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 8px 10px;
    }
    .topbar--hero {
        --topbar-bar-h: 52px;
        --topbar-hero-reserve-extra: 140px;
        overflow-x: hidden;
        overflow-y: visible;
    }
    .topbar--hero.topbar--hero-login {
        --topbar-hero-reserve-extra: 20px;
        overflow-x: visible;
    }
    .topbar-bar {
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 8px 10px;
    }
    .topbar--hero .topbar-bar {
        padding-right: max(12px, env(safe-area-inset-right, 0px));
        padding-left: max(12px, env(safe-area-inset-left, 0px));
    }
    .topbar-hero-splash {
        min-height: 0;
        padding: 0;
        justify-content: flex-end;
    }
    .topbar-hero-art {
        right: calc(max(12px, env(safe-area-inset-right, 0px)) + 74px);
        left: auto;
        top: 0;
        height: var(--topbar-bar-h);
        width: auto;
        max-width: min(248px, 46vw);
        max-height: none;
        transform: scale(1.08);
        transform-origin: right center;
    }
    .topbar-bar nav {
        position: fixed;
        right: 10px;
        top: 56px;
        left: auto;
        transform: none;
        z-index: 1200;
        width: min(260px, calc(100vw - 20px));
        display: none;
        flex-direction: column;
        gap: 6px;
        padding: 10px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.26);
        background: rgba(11, 96, 48, 0.94);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
        overflow: visible;
    }
    .topbar-bar nav.is-open {
        display: flex;
        animation: topbar-nav-slide-down-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .topbar-bar nav.is-open.is-closing {
        animation: topbar-nav-slide-up-out 0.3s ease-in forwards;
    }
    .topbar-bar nav a {
        white-space: normal;
        font-size: 13px;
        padding: 9px 10px;
    }
    .topbar-bar nav .topbar-dropdown {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .topbar-bar nav .topbar-dropdown__trigger {
        width: 100%;
        justify-content: space-between;
        font-size: 13px;
        padding: 9px 10px;
    }
    .topbar-bar nav .topbar-dropdown__panel {
        position: static;
        transform: none;
        left: auto;
        min-width: 0;
        width: 100%;
        margin-top: 2px;
        padding: 6px 6px 8px;
        gap: 4px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: none;
    }
    .topbar-bar nav .topbar-dropdown__panel a {
        white-space: normal;
        font-size: 13px;
        padding: 9px 10px;
    }
    .topbar-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        /* Misma altura que .topbar--hero .topbar-user-menu-trigger (40px); centrado en la fila --topbar-bar-h */
        top: calc(env(safe-area-inset-top, 0px) + (var(--topbar-bar-h) - 40px) / 2);
        right: calc(max(12px, env(safe-area-inset-right, 0px)) + 46px);
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        box-sizing: border-box;
        border-radius: 8px;
        z-index: 1130;
    }
    /* /login: mismo grid; botones más compactos si el ancho es justo */
    .topbar--hero.topbar--hero-login .topbar-bar {
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(14px, calc(env(safe-area-inset-right, 0px) + 14px));
    }
    .topbar--hero .topbar-bar__right--login-only .auth-landing-nav__ghost {
        padding: 6px 10px;
        font-size: 0.78rem;
    }
    .topbar--hero .topbar-bar__right--login-only .auth-landing-nav__cta {
        padding: 7px 12px;
        font-size: 0.8rem;
    }
    .topbar--hero .topbar-menu-toggle {
        border-radius: var(--rm-topbar-radius);
    }
    .brand { padding: 5px 12px; }
    .brand-logotipo { height: 21px; }
    /* Gastos: scroll horizontal + Costo y Acción fijos (antes solo bajo 768px) */
    .table-scroll {
        overflow-x: auto;
        overflow-y: visible;
    }
    .table-scroll.table-scroll--category-fit {
        overflow-x: hidden;
    }
    .expense-table {
        min-width: 1160px;
    }
    /*
     * Gastos (mis gastos): scroll en .table-scroll; Costo (sticky left) + centro deslizable + Acción (sticky right).
     * border-collapse: separate mejora sticky en celdas (Safari / Chrome).
     */
    body.page-gastos .category-panel .table-scroll.table-scroll--gastos-expense {
        position: relative;
        z-index: 0;
        overflow-x: auto;
        overflow-y: visible;
        width: 100%;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
    }
    body.page-gastos .category-panel .expense-table {
        min-width: 1220px;
        width: max(1220px, 100%);
        border-collapse: separate;
        border-spacing: 0;
    }
    body.page-gastos .category-panel .expense-table th:nth-child(1),
    body.page-gastos .category-panel .expense-table td:nth-child(1) {
        min-width: 5.75rem;
        width: 6.5rem;
        max-width: 7.5rem;
    }
    body.page-gastos .category-panel .expense-table th:nth-child(n+2):nth-child(-n+11),
    body.page-gastos .category-panel .expense-table td:nth-child(n+2):nth-child(-n+11) {
        min-width: 4.75rem;
    }
    body.page-gastos .category-panel .expense-table th:nth-child(2),
    body.page-gastos .category-panel .expense-table td:nth-child(2) {
        min-width: 7.25rem;
    }
    /* Por encima del “medio” al desplazar; cabecera por encima del cuerpo */
    body.page-gastos .category-panel .expense-table th:nth-child(1),
    body.page-gastos .category-panel .expense-table td:nth-child(1),
    body.page-gastos .category-panel .expense-table th:nth-child(12),
    body.page-gastos .category-panel .expense-table td:nth-child(12) {
        z-index: 6;
    }
    body.page-gastos .category-panel .expense-table thead th:nth-child(1),
    body.page-gastos .category-panel .expense-table thead th:nth-child(12) {
        z-index: 7;
    }
    body.page-gastos .category-panel .expense-table th:nth-child(12),
    body.page-gastos .category-panel .expense-table td:nth-child(12) {
        min-width: 4.75rem;
        width: 5rem;
        max-width: none;
    }
    .expense-table th:nth-child(1),
    .expense-table td:nth-child(1) {
        width: 7%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }
    .expense-table th:nth-child(12),
    .expense-table td:nth-child(12) {
        width: auto;
        min-width: 2.75rem;
        max-width: 4.5rem;
        box-sizing: border-box;
        overflow: visible;
    }
    .expense-table .actions-cell {
        padding-right: 2px;
        padding-left: 0;
    }
    .expense-table .actions-inner {
        gap: 2px;
        justify-content: center;
        min-width: 0;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .expense-table .actions-inner .btn-link {
        padding: 3px 5px;
        font-size: 11px;
    }
    body.page-gastos .expense-table .row-action-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 3.75rem;
        min-width: 0;
        padding: 4px 6px;
        box-sizing: border-box;
        line-height: 1.15;
        text-align: center;
        white-space: nowrap;
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.page-gastos .expense-table thead th.expense-table__th-action {
        min-width: 2.25rem;
        max-width: 3.75rem;
        padding-left: 3px;
        padding-right: 3px;
        font-size: 10px;
    }
    .expense-table .actions-inner .btn-action {
        gap: 3px;
    }
    .expense-table .actions-inner .btn-action__icon {
        width: 13px;
        height: 13px;
    }
    .row-action-menu {
        right: 0;
    }
    .expense-table th:nth-child(1),
    .expense-table td:nth-child(1),
    .expense-table th:nth-child(12),
    .expense-table td:nth-child(12) {
        position: -webkit-sticky;
        position: sticky;
        background-clip: padding-box;
    }
    body.page-gastos .expense-table tbody tr td:nth-child(1),
    body.page-gastos .expense-table tbody tr td:nth-child(12) {
        background: #ffffff;
    }
    body.page-gastos .expense-table thead th:nth-child(1),
    body.page-gastos .expense-table thead th:nth-child(12) {
        background: #184f2d;
        color: #f8fafc;
    }
    .expense-table th:nth-child(1) {
        left: 0;
        z-index: 5;
        box-shadow: 1px 0 0 #e5e7eb;
        padding-left: 2px;
        padding-right: 2px;
        text-align: center;
        white-space: nowrap;
    }
    .expense-table td:nth-child(1) {
        left: 0;
        z-index: 5;
        box-shadow: 1px 0 0 #e5e7eb;
        padding-left: 6px;
        padding-right: 2px;
        text-align: left;
        white-space: normal;
    }
    .expense-table th:nth-child(12),
    .expense-table td:nth-child(12) {
        right: 0;
        z-index: 4;
        box-shadow: -1px 0 0 #e5e7eb;
        padding-left: 1px;
        padding-right: 2px;
        text-align: center;
    }
    .expense-table td:nth-child(1) .amount {
        font-size: 13px;
        text-align: left;
        white-space: nowrap;
    }
    .expense-table td:nth-child(1) .amount-partial {
        font-size: 10px;
        text-align: left;
        white-space: nowrap;
    }
}

/* Mobile/tablet: igual a desktop, con scroll horizontal (sin sticky/compactado) */
@media (max-width: 999px) {
    body.page-gastos .category-panel {
        overflow: visible;
    }
    body.page-gastos .category-panel .expense-cards-wrap {
        overflow-x: visible !important;
        padding: 10px;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    body.page-gastos .category-panel .expense-cards-grid {
        gap: 10px;
    }
    body.page-gastos .category-panel .expense-card .row-action-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.85rem;
        width: 1.85rem;
        height: 1.85rem;
        max-width: 1.85rem;
        padding: 0;
        border-radius: 7px;
        font-size: 0;
        overflow: visible;
        text-overflow: clip;
    }
    body.page-gastos .category-panel .expense-card .row-action-trigger__icon {
        display: inline-flex;
        font-size: 13px;
        line-height: 1;
    }
    body.page-gastos .category-panel .expense-card__expand-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.85rem;
        width: 1.85rem;
        height: 1.85rem;
        max-width: 1.85rem;
        padding: 0;
        border-radius: 7px;
        font-size: 0;
    }
    body.page-gastos .category-panel .expense-card__expand-icon {
        font-size: 11px;
    }
    body.page-gastos .category-panel .expense-card--shared-read .view-shared-expense-btn {
        padding: 5px 8px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.15;
        white-space: nowrap;
    }
    body.page-gastos .category-panel .table-scroll.table-scroll--gastos-expense {
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        padding-right: 0;
        box-sizing: border-box;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    body.page-gastos .category-panel .expense-table {
        min-width: 780px !important;
        width: max-content;
        table-layout: auto;
        border-collapse: collapse;
        border-spacing: 0;
    }
    /* En mobile/tablet, concepto un poco más angosto para priorizar scroll central útil */
    body.page-gastos .category-panel .expense-table th:nth-child(2),
    body.page-gastos .category-panel .expense-table td:nth-child(2) {
        width: 6% !important;
    }
    body.page-gastos .category-panel .expense-table th:nth-child(1),
    body.page-gastos .category-panel .expense-table td:nth-child(1) {
        padding-left: 4px;
        padding-right: 2px;
    }
    body.page-gastos .category-panel .expense-table th:nth-child(1),
    body.page-gastos .category-panel .expense-table td:nth-child(1) {
        position: static !important;
        left: auto !important;
        right: auto !important;
        box-shadow: none !important;
        z-index: auto !important;
        min-width: 4.4rem !important;
        max-width: 4.4rem !important;
        width: 4.4rem !important;
    }
    body.page-gastos .category-panel .expense-table th:nth-child(12),
    body.page-gastos .category-panel .expense-table td:nth-child(12) {
        position: sticky !important;
        right: 1px !important;
        left: auto !important;
        z-index: 6;
        min-width: 2.35rem !important;
        width: 2.35rem !important;
        max-width: 2.35rem !important;
        box-shadow: -1px 0 0 #e5e7eb;
        background-clip: padding-box;
    }
    body.page-gastos .category-panel .expense-table thead th:nth-child(12) {
        z-index: 7;
    }
    body.page-gastos .category-panel .expense-table thead th.expense-table__th-action {
        min-width: 2.35rem;
        width: 2.35rem;
        max-width: 2.35rem;
        font-size: 0;
        padding-left: 0;
        padding-right: 0;
    }
    body.page-gastos .category-panel .expense-table .row-action-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.85rem;
        width: 1.85rem;
        height: 1.85rem;
        max-width: 1.85rem;
        padding: 0;
        border-radius: 7px;
        font-size: 0;
        overflow: visible;
        text-overflow: clip;
    }
    body.page-gastos .category-panel .expense-table .row-action-trigger__icon {
        display: inline-flex;
        font-size: 13px;
        line-height: 1;
    }
    body.page-gastos .category-panel .expense-table .actions-cell {
        padding-left: 0;
        padding-right: 4px;
        text-align: center;
    }
    body.page-gastos .category-panel .expense-table .actions-inner {
        justify-content: center;
        width: 100%;
        margin: 0;
    }
    /* Recupera la sensación de esquinas redondeadas de la grilla */
    body.page-gastos .category-panel .cat-header {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    body.page-gastos .category-panel .expense-table tbody tr:last-child td:first-child {
        border-bottom-left-radius: 12px;
    }
    body.page-gastos .category-panel .expense-table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 12px;
    }
    body.page-gastos .category-panel .expense-table tbody tr:last-child td {
        border-bottom: 0;
    }
    /* Compartidos: columna Acción con texto "Ver" (un poco más ancha que el menú …) */
    body.page-gastos .category-panel .expense-table--shared-read th:nth-child(12),
    body.page-gastos .category-panel .expense-table--shared-read td:nth-child(12) {
        min-width: 3.35rem !important;
        width: 3.35rem !important;
        max-width: 4.25rem !important;
    }
    body.page-gastos .category-panel .expense-table--shared-read .view-shared-expense-btn {
        padding: 3px 5px;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.15;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .gastos-top .gastos-head-panel h1 {
        font-size: 14px;
    }
    .container {
        margin: 12px auto;
        padding: 0 8px;
    }
    .topbar--hero ~ main.container .panel {
        margin-top: 0;
    }
    .panel { padding: 12px; margin-bottom: 12px; }
    .panel h1 { font-size: 22px; }
    .panel h2 { font-size: 18px; }
    .cards.five .card p,
    .cards.three .card p { font-size: 20px; }
    .month-year-header { font-size: 22px; }
    .month-grid a { font-size: 14px; padding: 7px 0; }
    .gastos-top {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .gastos-head-panel {
        grid-column: 1 / -1;
    }
    .totals-panel,
    .month-panel {
        min-height: 0;
    }
    .totals-grid {
        max-width: 100%;
        flex-direction: column;
        padding-top: 2px;
    }
    .totals-panel-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .totals-panel__add-btn {
        align-self: center;
        margin-left: 0;
        width: 100%;
        max-width: 320px;
    }
    .total-currency {
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }
    .total-currency:last-child { border-bottom: 0; }
    /* Gastos: totales + calendario más compactos en mobile */
    body.page-gastos .totals-panel.panel {
        padding: 8px 10px;
    }
    body.page-gastos .totals-panel h2 {
        font-size: 14px;
        margin: 0 0 4px;
    }
    body.page-gastos .total-currency {
        padding: 3px 6px;
    }
    body.page-gastos .total-currency .label {
        font-size: 11px;
        margin-bottom: 1px;
    }
    body.page-gastos .total-currency .value {
        font-size: 12px;
    }
    body.page-gastos .month-panel.panel {
        padding: 4px 8px;
    }
    body.page-gastos .month-year-header {
        font-size: 14px;
        margin-bottom: 2px;
    }
    body.page-gastos .month-grid a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        padding: 6px 4px;
        box-sizing: border-box;
    }
    body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn {
        font-size: 11px;
        font-weight: 700;
        padding: 6px 4px;
        box-sizing: border-box;
    }
    body.page-ahorros .totals-panel.panel {
        padding: 8px 10px;
    }
    body.page-ahorros .totals-panel h2 {
        font-size: 14px;
        margin: 0 0 4px;
    }
    body.page-ahorros .total-currency {
        padding: 3px 6px;
    }
    body.page-ahorros .total-currency .label {
        font-size: 11px;
        margin-bottom: 1px;
    }
    body.page-ahorros .total-currency .value {
        font-size: 12px;
    }
    body.page-ahorros .month-panel.panel {
        padding: 4px 8px;
    }
    body.page-ahorros .month-year-header {
        font-size: 14px;
        margin-bottom: 2px;
    }
    body.page-ahorros .month-grid a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        padding: 6px 4px;
        box-sizing: border-box;
    }
    body.page-inversiones .totals-panel.panel {
        padding: 8px 10px;
    }
    body.page-inversiones .totals-panel h2 {
        font-size: 14px;
        margin: 0 0 4px;
    }
    body.page-inversiones .total-currency {
        padding: 3px 6px;
    }
    body.page-inversiones .total-currency .label {
        font-size: 11px;
        margin-bottom: 1px;
    }
    body.page-inversiones .total-currency .value {
        font-size: 12px;
    }
    body.page-inversiones .month-panel.panel {
        padding: 4px 8px;
    }
    body.page-inversiones .month-year-header {
        font-size: 14px;
        margin-bottom: 2px;
    }
    body.page-inversiones .month-grid a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        padding: 6px 4px;
        box-sizing: border-box;
    }
    /* .expense-table: min-width 1120px ya definido en max-width 999px (scroll + columnas fijas) */
    body.page-ingresos .totals-panel.panel {
        padding: 8px 10px;
    }
    body.page-ingresos .totals-panel h2 {
        font-size: 14px;
        margin: 0 0 4px;
    }
    body.page-ingresos .total-currency {
        padding: 3px 6px;
    }
    body.page-ingresos .total-currency .label {
        font-size: 11px;
        margin-bottom: 1px;
    }
    body.page-ingresos .total-currency .value {
        font-size: 12px;
    }
    body.page-ingresos .month-panel.panel {
        padding: 4px 8px;
    }
    body.page-ingresos .month-year-header {
        font-size: 14px;
        margin-bottom: 2px;
    }
    body.page-ingresos .month-grid a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        padding: 6px 4px;
        box-sizing: border-box;
    }
    .panel table:not(.expense-table):not(.category-table):not(.investment-table):not(.income-table) { min-width: 860px; }
    .page-gastos .category-panel {
        overflow: visible;
    }
    .category-table,
    .subcat-modal-table {
        min-width: 0 !important;
        table-layout: fixed;
        width: 100%;
    }
    .category-table th,
    .category-table td,
    .subcat-modal-table th,
    .subcat-modal-table td {
        font-size: 12px;
        padding: 6px 4px;
    }
    .category-table th:nth-child(1),
    .category-table td:nth-child(1) {
        width: 35%;
        min-width: 0;
        word-break: break-word;
    }
    .category-table th:nth-child(2),
    .category-table td:nth-child(2) {
        width: 40px;
        max-width: 44px;
        padding-left: 2px;
        padding-right: 2px;
    }
    .cat-main-row .category-icon-preview {
        font-size: 14px;
    }
    .category-move-btn,
    .subcat-inner-table .subcat-move-btn {
        width: 30px;
        height: 22px;
        border-radius: 0;
    }
    .config-actions {
        gap: 4px;
    }
    .config-actions .btn,
    .config-actions .btn-danger {
        font-size: 12px;
        padding: 4px 6px;
    }
    .category-table .config-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 4px;
        min-width: 0;
    }
    .category-table td.config-actions {
        min-width: 0;
    }
    .color-map-picker {
        width: 190px;
    }
    .category-edit-grid {
        grid-template-columns: 1fr;
    }
    .subcat-toolbar--modal {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .subcat-toolbar--modal .subcat-name-input {
        grid-column: 1 / -1;
        min-width: 0;
    }
    .subcat-table-frame__body {
        padding: 8px;
    }
    .modal-grid { grid-template-columns: 1fr; }
    /* Editar gasto: filas internas ya pasan a 1 col en max-width 720px */
    .actions-inner {
        flex-direction: row;
        align-items: center;
        gap: 4px;
    }
    .actions-inner .btn-link { display: inline-flex; }
}
@media (max-width: 480px) {
    .lang {
        font-size: 12px;
        padding: 4px 7px;
    }
    .btn {
        padding: 8px 10px;
        font-size: 13px;
    }
    .btn-link, .btn-danger {
        font-size: 12px;
        padding: 5px 8px;
    }
}

/* Sugerencias: contenido a la izquierda, imagen a la derecha */
.page-sugerencias .sugerencias-panel {
    border: 1px solid #dbe2ea;
    background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
.sugerencias-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 380px);
    gap: 28px 36px;
    align-items: start;
}
.sugerencias-layout__main {
    min-width: 0;
}
.page-sugerencias .sugerencias-layout__main h1 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 34px;
    letter-spacing: -0.2px;
}
.page-sugerencias .sugerencias-lead {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.65;
    color: #334155;
    max-width: 70ch;
}
.page-sugerencias .sugerencias-block {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
}
.page-sugerencias .sugerencias-block h2 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #1e293b;
}
.page-sugerencias .sugerencias-block p {
    margin: 0;
    line-height: 1.6;
    color: #334155;
}
.page-sugerencias .sugerencias-block ul {
    margin: 0;
    padding-left: 20px;
    color: #334155;
}
.page-sugerencias .sugerencias-block li {
    margin: 0 0 6px;
}
.page-sugerencias .sugerencias-note {
    margin-top: 10px;
    padding: 12px 14px;
    border-left: 4px solid #64748b;
    background: #f8fafc;
    color: #334155;
    border-radius: 8px;
}
.sugerencias-layout__aside {
    position: sticky;
    top: 12px;
}
.sugerencias-hero-img {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto;
    border-radius: 14px;
    box-shadow:
        0 4px 6px -1px rgba(31, 122, 58, 0.08),
        0 25px 50px -12px rgba(0, 0, 0, 0.18);
    border: 1px solid #dbe2ea;
}
@media (max-width: 960px) {
    .sugerencias-layout {
        grid-template-columns: 1fr;
    }
    .sugerencias-layout__aside {
        position: static;
        max-width: 400px;
        margin: 0 auto;
        order: 1;
    }
    .sugerencias-layout__main {
        order: 0;
    }
    .page-sugerencias .sugerencias-layout__main h1 {
        font-size: 28px;
    }
}

/* Guía de la riqueza — tarjeta clara, hero en degradado menta, columna Progreso + pasos */
.page-guia .guia-layout.sugerencias-layout {
    grid-template-columns: minmax(0, 1fr);
}
.page-guia .guia-panel,
.page-info .guia-panel {
    border: 1px solid rgba(27, 94, 32, 0.12);
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 24px 48px rgba(15, 41, 24, 0.14),
        0 8px 16px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    margin-top: 0;
}
.page-guia .guia-hero,
.page-info .guia-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 220px);
    gap: 20px 28px;
    align-items: start;
    padding: 24px 28px 14px;
    border-radius: 19px 19px 0 0;
    overflow: hidden;
    border-bottom: none;
    /* Degradé menta: el verde se mantiene más abajo antes de fundirse en blanco */
    background: linear-gradient(
        to bottom,
        #dcfce7 0%,
        #e9fbe7 30%,
        rgba(220, 252, 231, 0.95) 54%,
        rgba(236, 252, 244, 0.9) 72%,
        rgba(255, 255, 255, 0.5) 90%,
        #ffffff 100%
    );
}
/* Sobre RichMind: una columna (ilustración va dentro del hero) */
.page-info .sugerencias-layout.page-info-layout--single {
    grid-template-columns: 1fr;
    gap: 0;
}
.page-info .guia-hero {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 300px);
}
.page-info .page-info-sections {
    padding: 8px 24px 26px;
    background: #ffffff;
}
.page-info .page-info-sections .sugerencias-block {
    margin: 0 0 16px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.page-info .page-info-sections .sugerencias-block h2 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}
.page-info .page-info-sections .sugerencias-block p,
.page-info .page-info-sections .sugerencias-block ul {
    color: #475569;
}
.page-info .sugerencias-note {
    margin-top: 4px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(27, 94, 32, 0.12);
    border-left: 4px solid #126f38;
    background: linear-gradient(90deg, rgba(220, 252, 231, 0.45) 0%, #f8fafc 38%, #ffffff 100%);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.page-info .sugerencias-note h2 {
    color: #0f172a;
    font-weight: 800;
}
.page-guia .guia-hero__copy,
.page-info .guia-hero__copy {
    min-width: 0;
}
.page-guia .guia-hero__intro,
.page-info .guia-hero__intro {
    margin-top: 12px;
}
.page-guia .guia-page-title-row,
.page-info .guia-page-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0;
}
.page-guia .guia-page-title-row h1,
.page-info .guia-page-title-row h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.page-guia .guia-page-title-deco,
.page-info .guia-page-title-deco {
    width: 52px;
    line-height: 0;
    flex-shrink: 0;
}
.page-guia .guia-page-title-deco__img,
.page-info .guia-page-title-deco__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.2));
}
.page-guia .guia-kicker {
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #126f38;
    text-transform: uppercase;
}
.page-guia .guia-intro,
.page-info .guia-intro {
    margin: 0 0 12px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    line-height: 1.65;
    color: #475569;
    max-width: 52rem;
    white-space: pre-line;
}
.page-guia .guia-intro:last-child,
.page-info .guia-intro:last-child {
    margin-bottom: 0;
}
.page-guia .guia-hero__art,
.page-info .guia-hero__art {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.page-guia .guia-hero__art .guia-intro-book {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 28px rgba(27, 94, 32, 0.18));
}
.page-info .guia-hero__art .page-info-hero__img {
    width: 100%;
    max-width: min(300px, 42vw);
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(27, 94, 32, 0.2));
}
.page-guia .guia-content-grid {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 20px 24px;
    align-items: start;
    padding: 8px 24px 26px;
    background: #ffffff;
}
.page-guia .guia-progress-card {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    padding: 18px 16px;
    position: sticky;
    top: 88px;
}
.page-guia .guia-progress-card__title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: 0.02em;
}
.page-guia .guia-progress-percentage {
    font-size: clamp(1.35rem, 2.1vw, 1.85rem);
    font-weight: 800;
    color: #15803d;
    line-height: 1.1;
    white-space: nowrap;
}
.page-guia .guia-progress-percentage span {
    font-variant-numeric: tabular-nums;
}
.page-guia .guia-progress-track {
    height: 8px;
    border-radius: 999px;
    background: #dcfce7;
    overflow: hidden;
    margin-top: 10px;
}
.page-guia .guia-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e 0%, #84cc16 100%);
    transition: width 0.25s ease;
}
.page-guia .guia-progress-current {
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fffbeb 0%, #fef9c3 100%);
    border: 1px solid rgba(234, 179, 8, 0.35);
}
.page-guia .guia-progress-current__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a16207;
    margin-bottom: 4px;
}
.page-guia .guia-progress-current__value {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #713f12;
    line-height: 1.35;
}
.page-guia .guia-next-levels {
    margin-top: 16px;
    border-top: 1px solid #e2e8f0;
    padding-top: 14px;
}
.page-guia .guia-next-levels__title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.page-guia .guia-next-levels ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.page-guia .guia-next-levels li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px 10px;
    align-items: center;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 14px;
}
.page-guia .guia-level-nav__badge {
    font-size: 1rem;
    line-height: 1;
}
.page-guia .guia-level-nav__name {
    font-weight: 600;
    color: #1e293b;
    min-width: 0;
}
.page-guia .guia-level-nav__status {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}
.page-guia .guia-next-levels li.guia-level-nav--current {
    border-color: #fcd34d;
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.15);
}
.page-guia .guia-next-levels li.guia-level-nav--current .guia-level-nav__status {
    color: #92400e;
    background: #fef08a;
    border-color: #facc15;
}
.page-guia .guia-next-levels li.guia-level-nav--done {
    border-color: #86efac;
    background: #f0fdf4;
}
.page-guia .guia-next-levels li.guia-level-nav--done .guia-level-nav__status {
    color: #166534;
    background: #bbf7d0;
    border-color: #4ade80;
}
.page-guia .guia-next-levels li.guia-level-nav--openable {
    cursor: pointer;
}
.page-guia .guia-next-levels li.guia-level-nav--openable:focus-visible {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}
.page-guia .guia-levels-area {
    min-width: 0;
}
.page-guia .guia-levels-area__head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}
.page-guia .guia-steps-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #bbf7d0;
    color: #166534;
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(22, 101, 52, 0.08);
}
.page-guia .guia-steps-badge__fraction span {
    font-variant-numeric: tabular-nums;
}
.page-guia .guia-level {
    margin: 0 0 20px;
    padding: 20px 20px 22px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.page-guia .guia-level-title {
    margin: 0 0 10px;
    font-size: 1.125rem;
    line-height: 1.35;
    font-weight: 800;
    color: #0f172a;
}
.page-guia .guia-level-hook {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
    color: #c2410c;
    padding-left: 2px;
}
.page-guia .guia-level--hidden {
    display: none;
}
.page-guia .guia-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.page-guia .guia-item {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.page-guia .guia-item--done {
    background: #f0fdf4;
    border-color: #86efac;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.12);
}
.page-guia .guia-item--done .guia-check-row {
    color: #166534;
}
.page-guia .guia-item--current {
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    border-color: #fdba74;
    box-shadow:
        0 0 0 1px rgba(251, 146, 60, 0.25),
        0 8px 20px rgba(154, 52, 18, 0.08);
}
.page-guia .guia-item--current .guia-check-row {
    color: #7c2d12;
}
.page-guia .guia-item--current .guia-note-trigger {
    border-color: #ea580c;
    color: #7c2d12;
    background: #ffffff;
}
.page-guia .guia-item--locked {
    opacity: 0.78;
}
.page-guia .guia-item--locked .guia-check-row {
    cursor: default;
    color: #64748b;
}
.page-guia .guia-item--locked .guia-check-row input[type="checkbox"] {
    cursor: not-allowed;
    opacity: 0.5;
}
.page-guia .guia-check-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin: 0;
    font-weight: 600;
    color: #334155;
    line-height: 1.5;
}
.page-guia .guia-check-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.15rem;
    accent-color: #16a34a;
    cursor: pointer;
}
.page-guia .guia-item-note {
    margin: 8px 0 0;
    padding-left: calc(1.2rem + 12px);
    font-size: 14px;
    line-height: 1.55;
    color: #64748b;
    font-weight: 400;
}
.page-guia .guia-item-note[hidden] {
    display: none;
}
.page-guia .guia-note-trigger {
    margin-top: 10px;
    margin-left: calc(1.2rem + 12px);
    min-width: 158px;
    border-radius: 10px;
    font-weight: 600;
}
.page-guia .guia-note-modal-text {
    margin: 0;
    color: #334155;
    line-height: 1.65;
    font-size: 15px;
}
@media (max-width: 960px) {
    .page-guia .guia-hero,
    .page-info .guia-hero {
        grid-template-columns: 1fr;
        padding: 20px 18px 12px;
    }
    .page-guia .guia-hero__art,
    .page-info .guia-hero__art {
        order: -1;
        justify-content: flex-start;
    }
    .page-guia .guia-hero__art .guia-intro-book {
        max-width: 140px;
    }
    .page-info .guia-hero__art .page-info-hero__img {
        max-width: min(220px, 58vw);
    }
    .page-guia .guia-content-grid {
        grid-template-columns: 1fr;
        padding: 8px 16px 22px;
    }
    .page-guia .guia-progress-card {
        position: static;
    }
    .page-guia .guia-levels-area__head {
        justify-content: flex-start;
    }
}

/* Login / registro */
.auth-page {
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(160deg, #f0fdf4 0%, #f8fafc 45%, #eef2ff 100%);
}
.auth-wrap {
    max-width: 420px;
    margin: 0 auto;
    padding: 32px 16px 48px;
}
.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}
.auth-panel h1 {
    margin: 0 0 16px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
    color: #334155;
}
.auth-form label span {
    font-weight: 600;
}
.auth-form input {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    background: #fff;
}
.auth-form input:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.auth-submit {
    margin-top: 4px;
    width: 100%;
    justify-content: center;
}
.auth-hint {
    margin: -4px 0 0;
    font-size: 0.8rem;
    color: #64748b;
}
.auth-caps-hint {
    display: block;
    margin: 6px 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b45309;
}
.auth-caps-hint[hidden] {
    display: none !important;
}
.auth-lead {
    margin: 0 0 14px;
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.45;
}
.auth-msg {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
}
.auth-msg--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.auth-msg--ok {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: #94a3b8;
    font-size: 0.85rem;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.auth-google-gmail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #dadce0;
    background: #fff;
    color: #3c4043;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.auth-google-gmail i.fa-google {
    font-size: 1.25rem;
    color: #4285f4;
}
.auth-google-gmail:hover {
    background: #f8f9fa;
    border-color: #c6c9ce;
    box-shadow: 0 2px 6px rgba(60, 64, 67, 0.14);
}
.auth-oauth-buttons {
    width: 100%;
    margin-bottom: 4px;
}
.auth-oauth-buttons--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "oauth-google oauth-apple"
        "oauth-facebook oauth-microsoft";
    gap: 8px;
    align-items: stretch;
}
.auth-oauth-buttons--grid .auth-google-gmail {
    grid-area: oauth-google;
}
.auth-oauth-buttons--grid .auth-oauth-apple {
    grid-area: oauth-apple;
}
.auth-oauth-buttons--grid .auth-oauth-facebook {
    grid-area: oauth-facebook;
}
.auth-oauth-buttons--grid .auth-oauth-ms {
    grid-area: oauth-microsoft;
}
.auth-oauth-buttons--grid > .btn {
    width: 100%;
    min-width: 0;
    font-size: 0.84rem;
    padding: 7px 8px;
    gap: 6px;
    line-height: 1.2;
}
.auth-oauth-buttons--grid > .btn i {
    font-size: 1.05rem;
    line-height: 1;
}
.auth-oauth-buttons--grid > .btn i.fa-apple {
    font-size: 1.12rem;
}
.auth-oauth-buttons--grid > .btn span {
    text-align: center;
    line-height: 1.2;
}
.auth-oauth-ms {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.35);
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.auth-oauth-ms i.fa-microsoft {
    font-size: 1.25rem;
}
.auth-oauth-ms:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}
.auth-oauth-apple {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #1f2937;
    background: #000000;
    color: #fff;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: background 0.15s, box-shadow 0.15s;
}
.auth-oauth-apple i.fa-apple {
    font-size: 1.35rem;
}
.auth-oauth-apple:hover {
    background: #1a1a1a;
}
.auth-oauth-facebook {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #166fe5;
    background: #1877f2;
    color: #fff;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(24, 119, 242, 0.35);
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.auth-oauth-facebook i.fa-facebook-f {
    font-size: 1.25rem;
}
.auth-oauth-facebook:hover {
    background: #166fe5;
    border-color: #1464d8;
}
/* Crear categoria rapida: select acotado + boton icono a la derecha (label: solo gap del .modal-field, sin margen extra — alinea fila con Concepto/Cuenta) */
.modal-field--category-picker > .modal-field__label {
    display: block;
    margin-bottom: 0;
}
.category-picker-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    max-width: 100%;
    min-height: 0;
}
.category-picker-row__select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 260px;
    min-height: 42px;
    align-self: stretch;
}
.edit-expense-modal--readonly .category-quick-add-btn--icon {
    display: none !important;
}
.edit-expense-modal--readonly .category-picker-row__select {
    max-width: 100%;
}
.category-quick-add-btn--icon {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #1f7a3a 32%, #cbd5e1);
    background: linear-gradient(180deg, #f8faf9 0%, #eef7f0 100%);
    color: #15803d;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
}
.category-quick-add-btn--icon:hover {
    border-color: #1f7a3a;
    background: #fff;
    color: #0b6030;
}
.category-quick-add-btn--icon:focus-visible {
    outline: 2px solid #1f7a3a;
    outline-offset: 2px;
}
@media (max-width: 520px) {
    .category-picker-row__select {
        max-width: none;
    }
}
/* Por encima de otros modales (p. ej. editar gasto) cuando se abre alta rápida (modalPopupNuevo) */
.modal-popup-nuevo {
    z-index: 10060;
}
#modalPopupNuevo .modal-app-shell.auth-login-shell,
#subcategoryQuickAddModal .modal-app-shell.auth-login-shell {
    width: min(520px, 100%);
}
#modalPopupNuevo .modal-card__body .modal-grid.modal-popup-nuevo__grid,
#subcategoryQuickAddModal .modal-card__body .modal-grid {
    gap: 12px;
}
.auth-footer {
    margin: 20px 0 0;
    text-align: center;
    font-size: 0.95rem;
    color: #64748b;
}
.auth-footer a {
    color: #15803d;
    font-weight: 600;
    text-decoration: none;
}
.auth-footer a:hover {
    text-decoration: underline;
}

/* Login: landing (dos columnas + barra superior) — mismo fondo que el resto de la app (body + Background.png) */
.auth-page--landing {
    margin: 0;
    min-height: 100vh;
    background-color: #fff8db;
    background-image: url("../img/Background.png?v=20260411");
    background-position: center top;
    /* Sin mosaico: cubre el viewport en pantallas anchas (evita la “costura” al repetir) */
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    color: #1f2937;
}
/* Misma barra verde que .topbar-bar en sesión iniciada */
.auth-landing-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
    padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
    padding-top: max(12px, env(safe-area-inset-top));
    border-bottom: none;
    background:
        radial-gradient(circle at 72% 36%, rgba(168, 239, 93, 0.35) 0, rgba(168, 239, 93, 0) 42%),
        linear-gradient(180deg, #0f7a3a 0%, #0b6030 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}
/* Como en .topbar-bar: el bloque blanco solo envuelve el logo (no crece con flex) */
.auth-landing-home {
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
    width: fit-content;
    max-width: min(100%, 280px);
    align-self: center;
}
.auth-landing-home .brand-logotipo {
    height: 23px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}
.auth-landing-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-shrink: 0;
}
.auth-landing-nav__ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.auth-landing-nav__ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.65);
}
.auth-landing-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--rm-cta-auth-text);
    background: var(--rm-cta-login-gradient);
    box-shadow: 0 2px 14px rgba(234, 179, 8, 0.38);
    border: 1px solid var(--rm-gold-active-border);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.auth-landing-nav__cta:hover {
    filter: brightness(1.06);
}
/* Login: aire claro entre la franja del header y las tarjetas */
body.auth-page--landing .topbar--hero-login + .auth-landing-hero {
    padding-top: clamp(40px, 8vw, 72px);
}
.auth-landing-hero {
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 16px 56px;
    display: grid;
    /* Dos columnas del mismo ancho: texto e ilustración alineados */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 40px;
    align-items: stretch;
}
.auth-landing-copy {
    /* Misma altura que la columna derecha (grid align-items: stretch) */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    padding: 20px 20px 22px;
    border-radius: 16px;
    background: rgba(255, 255, 252, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 32px rgba(15, 90, 45, 0.12);
    backdrop-filter: blur(8px);
    width: 100%;
    min-width: 0;
}
@media (min-width: 520px) {
    .auth-landing-copy {
        padding-right: clamp(100px, 19vw, 210px);
    }
}
.auth-landing-copy__wallet {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: min(150px, 40%);
    max-width: 200px;
    pointer-events: none;
    user-select: none;
    line-height: 0;
}
.auth-landing-copy__wallet-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(15, 122, 58, 0.22));
}
@media (max-width: 519px) {
    .auth-landing-copy {
        padding-right: clamp(76px, 30vw, 130px);
    }
    .auth-landing-copy__wallet {
        width: min(112px, 42%);
        top: 8px;
        right: 8px;
    }
}
.auth-landing-eyebrow {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #15803d;
}
.auth-landing-title {
    margin: 0 0 16px;
    font-size: clamp(1.65rem, 3.6vw, 2.35rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.02em;
    background: linear-gradient(115deg, #b45309 0%, #d97706 35%, #ca8a04 70%, #a16207 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.auth-landing-lead {
    margin: 0 0 18px;
    font-size: 1.02rem;
    line-height: 1.55;
    color: #334155;
}
.auth-landing-lead strong {
    color: #14532d;
    font-weight: 700;
}
.auth-landing-subtitle {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #166534;
}
.auth-landing-text {
    margin: 0 0 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #475569;
}
.auth-landing-checks {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.auth-landing-checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #334155;
}
.auth-landing-checks .fa-circle-check {
    margin-top: 2px;
    color: #16a34a;
    flex-shrink: 0;
}
/* Misma familia visual que .auth-landing-nav__cta (Ingresar): degradado dorado vertical + borde oro */
.auth-landing-scrollcta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--rm-cta-auth-text);
    background: var(--rm-cta-login-gradient);
    box-shadow: 0 2px 14px rgba(234, 179, 8, 0.38);
    border: 1px solid var(--rm-gold-active-border);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.auth-landing-scrollcta:hover {
    filter: brightness(1.06);
}
.auth-landing-aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    min-height: 0;
    /* Misma altura útil que la tarjeta de texto (la fila del grid iguala al más alto) */
    height: 100%;
}
.auth-landing-genie {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
    width: 100%;
    pointer-events: none;
    user-select: none;
}
.auth-landing-genie__img,
.auth-landing-genie__video {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
    border-radius: 14px;
    box-shadow:
        0 4px 6px -1px rgba(31, 122, 58, 0.1),
        0 22px 45px -12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.55);
}
.auth-landing-genie__video {
    display: block;
    background: #0f2818;
}
.auth-panel--landing-card {
    position: relative;
    margin-bottom: 0;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, #fffef7 100%);
    border: 1px solid rgba(212, 175, 55, 0.45);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    border-radius: 16px;
    padding: 18px 18px 20px;
    scroll-margin-top: 96px;
}
/* Login: nunca embebido en la landing; solo como popup (todas las resoluciones) */
#auth-login.auth-panel--landing-card {
    display: none !important;
}
/* Popup login: capa exterior verde semitransparente + tarjeta blanca interior */
body.auth-show-login #auth-login.auth-login-shell {
    display: block !important;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 420px;
    max-height: min(88vh, 680px);
    overflow: visible;
    margin: 0;
    z-index: 3000;
    padding: 44px 10px 12px;
    border-radius: 22px;
    border: 2px solid rgba(212, 175, 55, 0.9);
    background:
        linear-gradient(145deg, rgba(34, 197, 94, 0.14) 0%, transparent 45%),
        linear-gradient(165deg, rgba(11, 96, 48, 0.52) 0%, rgba(4, 46, 28, 0.78) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 1px rgba(253, 230, 138, 0.55),
        0 16px 48px rgba(0, 0, 0, 0.42),
        0 0 24px 6px rgba(255, 220, 130, 0.5),
        0 0 52px 16px rgba(212, 175, 55, 0.38),
        0 0 88px 28px rgba(180, 83, 9, 0.18),
        -6px -10px 64px rgba(253, 224, 71, 0.12);
    backdrop-filter: blur(2px);
}
body.auth-show-register .auth-register-panel__inner.auth-login-shell {
    width: calc(100% - 32px);
    max-width: 420px;
    padding: 44px 10px 12px;
    border-radius: 22px;
    border: 2px solid rgba(212, 175, 55, 0.9);
    background:
        linear-gradient(145deg, rgba(34, 197, 94, 0.14) 0%, transparent 45%),
        linear-gradient(165deg, rgba(11, 96, 48, 0.52) 0%, rgba(4, 46, 28, 0.78) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 1px rgba(253, 230, 138, 0.55),
        0 16px 48px rgba(0, 0, 0, 0.42),
        0 0 24px 6px rgba(255, 220, 130, 0.5),
        0 0 52px 16px rgba(212, 175, 55, 0.38),
        0 0 88px 28px rgba(180, 83, 9, 0.18),
        -6px -10px 64px rgba(253, 224, 71, 0.12);
    backdrop-filter: blur(2px);
    overflow: visible;
    max-height: none;
}
body.auth-show-login #auth-login .auth-login-card-inner,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner {
    position: relative;
    overflow-y: auto;
    max-height: min(calc(88vh - 120px), 560px);
    margin: 4px 4px 2px;
    padding: 18px 16px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fafcfa 100%);
    border: 1px solid rgba(212, 175, 55, 0.65);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.85) inset,
        0 2px 12px rgba(11, 96, 48, 0.08);
}
body.auth-show-login #auth-login .auth-login-card-inner::before,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner::before,
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell .auth-login-card-inner::before,
.modal-app-shell.auth-login-shell .auth-login-card-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, transparent, #d4af37, #fde68a, #d4af37, transparent);
    opacity: 0.85;
    pointer-events: none;
}
body.auth-show-login #auth-login .auth-login-logo-tab,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-logo-tab {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -46%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 6px 16px 8px;
    background: #fff;
    border-radius: 12px;
    border: 2px solid #d4af37;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}
body.auth-show-login #auth-login .auth-login-logo-tab__word,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-logo-tab__word {
    height: 22px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
}
body.auth-show-login #auth-login .auth-login-deco,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-deco,
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell .auth-login-deco,
.modal-app-shell.auth-login-shell .auth-login-deco {
    position: absolute;
    top: 8px;
    right: 8px;
    /* Por encima de la pestaña del logo: si no, en modales estrechos el arte quedaba tapado */
    z-index: 5;
    width: 58px;
    line-height: 0;
    pointer-events: none;
}
body.auth-show-login #auth-login .auth-login-deco__img,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-deco__img,
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell .auth-login-deco__img,
.modal-app-shell.auth-login-shell .auth-login-deco__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.28));
}
body.auth-show-login #auth-login .auth-input-icon-wrap,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-input-icon-wrap {
    display: block;
    position: relative;
    width: 100%;
}
body.auth-show-login #auth-login .auth-input-icon-wrap .auth-input-icon,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-input-icon-wrap .auth-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: #15803d;
    font-size: 1.02rem;
    pointer-events: none;
    opacity: 0.92;
}
body.auth-show-login #auth-login .auth-input-icon-wrap input,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-input-icon-wrap input {
    width: 100%;
    padding-left: 2.55rem;
    box-sizing: border-box;
}
.auth-modal__close {
    display: inline-flex;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.auth-modal__close:hover {
    background: rgba(15, 23, 42, 0.12);
}
.auth-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2990;
    background: rgba(2, 6, 23, 0.62);
    backdrop-filter: blur(4px);
}
body.auth-show-login .auth-modal-backdrop,
body.auth-show-register .auth-modal-backdrop,
body.auth-show-plans .auth-modal-backdrop {
    background:
        radial-gradient(ellipse 85% 55% at 50% 35%, rgba(34, 197, 94, 0.14) 0%, transparent 55%),
        linear-gradient(165deg, rgba(8, 72, 42, 0.88) 0%, rgba(2, 22, 14, 0.92) 100%);
    backdrop-filter: blur(6px);
}
body.auth-modal-open {
    overflow: hidden;
}
/* Login / registro / planes: fade del backdrop + tarjeta como .modal-backdrop */
@keyframes auth-login-shell-rise-in {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 36px));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}
@keyframes auth-login-shell-rise-out {
    from {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    to {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 28px));
    }
}
body.auth-modal-open:not(.auth-modal-is-closing) .auth-modal-backdrop:not([hidden]) {
    animation: modal-backdrop-fade-in 0.32s ease-out forwards;
}
body.auth-modal-is-closing .auth-modal-backdrop {
    animation: modal-backdrop-fade-out 0.28s ease-in forwards;
}
body.auth-show-login:not(.auth-modal-is-closing) #auth-login.auth-login-shell {
    animation: auth-login-shell-rise-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.auth-modal-is-closing.auth-show-login #auth-login.auth-login-shell {
    animation: auth-login-shell-rise-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
body.auth-show-register:not(.auth-modal-is-closing) .auth-register-panel__inner.auth-login-shell {
    transform-origin: center bottom;
    animation: modal-card-rise-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.auth-modal-is-closing.auth-show-register .auth-register-panel__inner.auth-login-shell {
    transform-origin: center bottom;
    animation: modal-card-rise-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
body.auth-show-plans:not(.auth-modal-is-closing) .auth-plans-panel__inner.auth-login-shell {
    transform-origin: center bottom;
    animation: modal-card-rise-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.auth-modal-is-closing.auth-show-plans .auth-plans-panel__inner.auth-login-shell {
    transform-origin: center bottom;
    animation: modal-card-rise-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
.auth-register-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px 16px;
    pointer-events: none;
}
body.auth-show-register .auth-register-panel {
    display: flex;
    pointer-events: auto;
}
.auth-register-panel__inner {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: min(90vh, 720px);
    overflow-y: auto;
    pointer-events: auto;
    margin: auto;
}
.auth-register-panel__inner.auth-login-shell {
    overflow-y: visible;
    overflow-x: visible;
}
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner {
    max-height: min(calc(88vh - 120px), 640px);
}
/* Modal planes (Empezá ahora): misma cáscara que login (verde + oro + tarjeta blanca) */
.auth-plans-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px 16px;
    pointer-events: none;
}
body.auth-show-plans .auth-plans-panel {
    display: flex;
    pointer-events: auto;
}
.auth-plans-panel__inner {
    position: relative;
    width: calc(100% - 32px);
    max-width: 1040px;
    pointer-events: auto;
    margin: auto;
}
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell {
    overflow: visible;
    max-height: none;
    padding: 44px 10px 12px;
    border-radius: 22px;
    border: 2px solid rgba(212, 175, 55, 0.9);
    background:
        linear-gradient(145deg, rgba(34, 197, 94, 0.14) 0%, transparent 45%),
        linear-gradient(165deg, rgba(11, 96, 48, 0.52) 0%, rgba(4, 46, 28, 0.78) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 1px rgba(253, 230, 138, 0.55),
        0 16px 48px rgba(0, 0, 0, 0.42),
        0 0 24px 6px rgba(255, 220, 130, 0.5),
        0 0 52px 16px rgba(212, 175, 55, 0.38),
        0 0 88px 28px rgba(180, 83, 9, 0.18),
        -6px -10px 64px rgba(253, 224, 71, 0.12);
    backdrop-filter: blur(2px);
}
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell .auth-login-card-inner {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: min(calc(92vh - 120px), 820px);
    margin: 4px 4px 2px;
    padding: 18px 16px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fafcfa 100%);
    border: 1px solid rgba(212, 175, 55, 0.65);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.85) inset,
        0 2px 12px rgba(11, 96, 48, 0.08);
}
.auth-plans-panel__title {
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 800;
    color: #14532d;
}
.auth-plans-panel__lead {
    margin: 0 0 20px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #475569;
}
.auth-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}
.auth-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 14px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 122, 58, 0.06);
}
.auth-plan-card--featured {
    border-color: #d4af37;
    box-shadow: 0 6px 24px rgba(212, 175, 55, 0.25);
    position: relative;
}
.auth-plan-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1a1508;
    background: linear-gradient(145deg, #fde68a 0%, #d4af37 100%);
    border-radius: 999px;
}
.auth-plan-card__name {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}
.auth-plan-card__price {
    margin: 0 0 4px;
    font-size: 1.65rem;
    font-weight: 800;
    color: #14532d;
    line-height: 1.15;
}
.auth-plan-card__currency {
    font-size: 0.95rem;
    font-weight: 700;
    color: #64748b;
}
.auth-plan-card__tag {
    margin: 0 0 12px;
    font-size: 0.82rem;
    color: #64748b;
    min-height: 2.5em;
}
.auth-plan-card__features {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.86rem;
    line-height: 1.35;
    color: #334155;
}
.auth-plan-card__features .fa-check {
    color: #16a34a;
    margin-right: 8px;
    width: 1em;
}
.auth-plan-card__cta {
    width: 100%;
    margin-top: auto;
}
.auth-plans-panel__footnote {
    margin: 16px 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #64748b;
    text-align: center;
}
@media (max-width: 900px) {
    .auth-plans-grid {
        grid-template-columns: 1fr;
    }
    .auth-plan-card--featured {
        order: -1;
    }
}
.auth-modal__switch {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #15803d;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.auth-modal__switch:hover {
    color: #166534;
}
.auth-panel--landing-card h1 {
    font-size: 1.25rem;
    color: #0f172a;
}
.auth-panel__brand-row {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.auth-brand--landing {
    margin-bottom: 0;
}
.auth-page--landing .auth-panel--landing-card .auth-lead,
.auth-page--landing .auth-panel--landing-card .auth-footer {
    color: #475569;
}
.auth-page--landing .auth-panel--landing-card .auth-footer a,
.auth-page--landing .auth-panel--landing-card .auth-footer .auth-modal__switch {
    color: #15803d;
}
.auth-page--landing .auth-panel--landing-card .auth-form label {
    color: #334155;
}
.auth-page--landing .auth-panel--landing-card .auth-form input {
    background: #fff;
    border-color: #cbd5e1;
}

/* Popup login / registro / planes: cerrar sutil (sin caja blanca) */
body.auth-show-login #auth-login.auth-login-shell .auth-modal__close,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-modal__close,
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell .auth-modal__close {
    background: transparent;
    border: none;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.88);
    opacity: 0.88;
    border-radius: 10px;
}
body.auth-show-login #auth-login.auth-login-shell .auth-modal__close {
    left: 8px;
    right: auto;
    z-index: 6;
}
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-modal__close,
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell .auth-modal__close {
    left: 8px;
    right: auto;
    z-index: 6;
}
body.auth-show-login #auth-login.auth-login-shell .auth-modal__close:hover,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-modal__close:hover,
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell .auth-modal__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    opacity: 1;
}
body.auth-show-login #auth-login .auth-login-card-inner h1 {
    text-align: left;
    font-size: 1.35rem;
    font-weight: 800;
    color: #14532d;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner h1 {
    text-align: left;
    font-size: 1.35rem;
    font-weight: 800;
    color: #14532d;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}
body.auth-show-login #auth-login .auth-login-card-inner .auth-lead,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-lead {
    text-align: center;
    color: #3f4f5c;
    font-size: 0.88rem;
}
body.auth-show-login #auth-login .auth-login-card-inner .auth-msg--ok,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-msg--ok {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #34d399;
    color: #065f46;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
body.auth-show-login #auth-login .auth-login-card-inner .auth-msg--error,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-msg--error {
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
body.auth-show-login #auth-login .auth-login-card-inner .auth-google-gmail,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-google-gmail {
    border: 1px solid rgba(11, 96, 48, 0.35);
    background: linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);
    box-shadow: 0 2px 10px rgba(11, 96, 48, 0.1);
}
body.auth-show-login #auth-login .auth-login-card-inner .auth-google-gmail:hover,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-google-gmail:hover {
    border-color: rgba(212, 175, 55, 0.85);
    background: #fff;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.22);
}
body.auth-show-login #auth-login .auth-login-card-inner .auth-divider,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-divider {
    color: #475569;
    font-weight: 600;
}
body.auth-show-login #auth-login .auth-login-card-inner .auth-divider::before,
body.auth-show-login #auth-login .auth-login-card-inner .auth-divider::after,
body.auth-show-register .auth-register-panel__inner .auth-divider::before,
body.auth-show-register .auth-register-panel__inner .auth-divider::after {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.55) 45%, rgba(11, 96, 48, 0.35) 100%);
}
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-divider::before,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-divider::after {
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.55) 50%, transparent 100%);
}
body.auth-show-login #auth-login .auth-login-card-inner .auth-form label > span:first-child,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-form label > span:first-child {
    color: #0f172a;
    font-weight: 700;
}
body.auth-show-login #auth-login .auth-login-card-inner .auth-form input,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-form input {
    background: linear-gradient(180deg, #f0f7ff 0%, #e8f0fe 100%);
    border: 1px solid #93c5fd;
    border-radius: 10px;
    color: #0f172a;
}
body.auth-show-login #auth-login .auth-login-card-inner .auth-form input:focus,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-form input:focus {
    outline: none;
    border-color: #15803d;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.22);
}
body.auth-show-login #auth-login .auth-login-card-inner .auth-submit.btn-modal-primary,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-submit.btn-modal-primary {
    border-radius: 12px;
    border: 2px solid #c9a227;
    background: linear-gradient(180deg, #16904a 0%, #0f7a3a 38%, #0b6030 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 2px 0 rgba(0, 0, 0, 0.12) inset,
        0 8px 22px rgba(11, 96, 48, 0.38);
    font-weight: 800;
    letter-spacing: 0.02em;
}
body.auth-show-login #auth-login .auth-login-card-inner .auth-submit.btn-modal-primary:hover,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-submit.btn-modal-primary:hover {
    filter: brightness(1.05);
    border-color: #e8c547;
}
body.auth-show-login #auth-login .auth-login-card-inner .auth-footer,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-footer {
    color: #334155;
    text-align: center;
}
body.auth-show-login #auth-login .auth-login-card-inner .auth-footer .auth-modal__switch,
body.auth-show-register .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-footer .auth-modal__switch {
    color: #0b6030;
    font-weight: 700;
}
@media (max-width: 900px) {
    .auth-landing-hero {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 40px;
    }
    .auth-landing-aside {
        order: 2;
        height: auto;
    }
    .auth-landing-copy {
        order: 1;
    }
    /* Mismo ancho que la tarjeta de texto (una columna = 100% del hero) */
    .auth-landing-genie {
        flex: 0 1 auto;
        min-height: min(52vw, 280px);
    }
    .auth-landing-genie__img,
    .auth-landing-genie__video {
        height: auto;
        max-height: min(70vh, 520px);
    }
    .auth-landing-header {
        gap: 8px;
    }
    .auth-landing-nav__ghost {
        padding: 7px 10px;
        font-size: 0.78rem;
        white-space: nowrap;
    }
    .auth-landing-nav__cta {
        padding: 7px 12px;
        font-size: 0.78rem;
        white-space: nowrap;
    }
}
@media (min-width: 901px) {
    .auth-landing-header {
        flex-wrap: wrap;
    }
}

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

/* Menú usuario: hijo directo de .topbar--hero (no dentro de .topbar-bar) para z-index por encima del splash sin tapar la ilustración con la barra */
.topbar--hero > .topbar-auth {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 6px);
    right: max(20px, calc(env(safe-area-inset-right, 0px) + 10px));
    z-index: 1120;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}
@media (max-width: 999px) {
    .topbar--hero > .topbar-auth {
        right: max(18px, calc(env(safe-area-inset-right, 0px) + 8px));
        /* Alineado con .topbar-menu-toggle: centro vertical en la fila del header (mismo offset que hamburguesa) */
        top: calc(env(safe-area-inset-top, 0px) + (var(--topbar-bar-h) - 40px) / 2);
    }
    .topbar-user-menu-trigger {
        min-width: 0 !important;
        min-height: 0 !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        font-size: 1.02rem !important;
        line-height: 1 !important;
        box-sizing: border-box;
    }
    .topbar-user-menu-trigger .fa-circle-user {
        font-size: 1rem;
    }
    .topbar--hero .topbar-user-menu-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: var(--rm-topbar-radius) !important;
    }
}
.topbar-user-dropdown {
    position: relative;
}
.topbar-user-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 8px 12px;
    min-width: 0;
    min-height: 0;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2px;
    box-sizing: border-box;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.topbar-user-menu-trigger .fa-circle-user {
    font-size: 1.08rem;
    line-height: 1;
}
.topbar-user-menu-trigger:hover,
.topbar-user-dropdown.is-open .topbar-user-menu-trigger {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.25);
}
.topbar--hero,
.topbar-hero-splash,
.topbar-auth,
.topbar-user-dropdown {
    overflow: visible;
}
.topbar-user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(260px, calc(100vw - 24px));
    z-index: 10050;
    display: none;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
    padding: 10px 10px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(11, 96, 48, 0.98);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    overscroll-behavior: contain;
}
.topbar-user-dropdown.is-open .topbar-user-menu-panel {
    display: flex;
}
.topbar-user-menu-email {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 8px 8px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    line-height: 1.3;
}
.topbar-user-menu-logout-form {
    margin: 0;
    padding: 4px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.topbar-user-menu-logout {
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rm-cta-salir-text);
    background: var(--rm-cta-salir-gradient);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: filter 0.15s ease;
}
.topbar-user-menu-logout:hover {
    filter: brightness(1.06);
}
/* Mismo tratamiento que .topbar nav .topbar-dropdown__panel a (bordes + fondo) */
.topbar-user-menu-link {
    display: block;
    margin: 0;
    padding: 9px 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.topbar-user-menu-link:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

/* Primer acceso OAuth: mostrar correo sobre el formulario */
.auth-oauth-email {
    margin: 0 0 14px;
    font-size: 0.95rem;
    color: #334155;
}
.auth-oauth-email span {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: #475569;
}
.auth-footer-logout {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

/* Perfil */
.perfil-modal-body {
    padding-top: 0;
    min-width: 0;
}
/* Pestañas tipo configuración: subnav + panel a ancho completo dentro del cuerpo del modal */
.page-perfil #perfilAuthShell .perfil-modal-body > .subnav {
    margin-left: 0;
    margin-right: 0;
    margin-top: -4px;
    padding: 4px 16px 0;
    /* Mismo verde que la cabecera del modal (.modal-card__head), sin salto de color */
    background: linear-gradient(
        135deg,
        color-mix(in srgb, #1f7a3a 92%, #0d3d1f) 0%,
        #1f7a3a 48%,
        color-mix(in srgb, #1f7a3a 75%, #2d9f52) 100%
    );
    border-bottom: none;
}
.page-perfil #perfilAuthShell .perfil-modal-body > .subnav a {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
}
.page-perfil #perfilAuthShell .perfil-modal-body > .subnav a:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}
.page-perfil #perfilAuthShell .perfil-modal-body > .subnav a.active {
    background: var(--rm-month-active-cell);
    color: var(--rm-month-active-text);
    border-color: rgba(255, 255, 255, 0.38);
    border-bottom: 1px solid #ffffff;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.page-perfil #perfilAuthShell .perfil-modal-body > .subnav + .panel {
    margin-left: 0;
    margin-right: 0;
}
.page-perfil #perfilAuthShell .perfil-modal-body > .panel.perfil-tab-panel {
    margin-bottom: 0;
}
.page-perfil .perfil-layout {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
@media (min-width: 720px) {
    .page-perfil .perfil-layout {
        grid-template-columns: 160px minmax(0, 1fr);
    }
}
.page-perfil .perfil-form {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}
.page-perfil .perfil-form label {
    min-width: 0;
    max-width: 100%;
}
.page-perfil .perfil-form input,
.page-perfil .perfil-form select {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
/* Mismos bordes/relleno que los inputs del auth-form (los <select> no heredaban estas reglas) */
.page-perfil .perfil-form input:not([type="hidden"]),
.page-perfil .perfil-form select {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.35;
    font-family: inherit;
    background: #fff;
    color: #1f2937;
    min-height: 44px;
}
.page-perfil .perfil-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-color: #fff;
}
.page-perfil .perfil-form input:focus,
.page-perfil .perfil-form select:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.page-perfil .perfil-form input[type="date"] {
    min-height: 44px;
}
.page-perfil .perfil-form input:disabled {
    opacity: 0.85;
    cursor: not-allowed;
}
@media (min-width: 520px) {
    .page-perfil .perfil-row-2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}
.perfil-saved-msg {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(18, 111, 56, 0.12);
    color: #126f38;
    font-weight: 700;
    font-size: 0.95rem;
}
.perfil-layout {
    display: grid;
    gap: 24px;
    align-items: start;
}
@media (min-width: 720px) {
    .perfil-layout {
        grid-template-columns: 160px 1fr;
        gap: 32px;
    }
}
.perfil-avatar-block {
    text-align: center;
}
.perfil-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(18, 111, 56, 0.35);
    display: block;
    margin: 0 auto 12px;
}
.perfil-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 111, 56, 0.15);
    color: #126f38;
    font-size: 2.5rem;
}
.perfil-footnote {
    font-size: 0.82rem;
    color: #4b5563;
    line-height: 1.4;
    margin: 0;
}
.perfil-form .perfil-select {
    width: 100%;
    max-width: 100%;
}
.perfil-form .perfil-state-text {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.perfil-form .perfil-readonly {
    opacity: 0.85;
    cursor: not-allowed;
}
.perfil-row-2 {
    display: grid;
    gap: 12px;
}
@media (min-width: 520px) {
    .perfil-row-2 {
        grid-template-columns: 1fr 1fr;
    }
}
.page-perfil .perfil-form .perfil-submit {
    margin-top: 12px;
    width: auto;
    max-width: min(320px, 100%);
    align-self: flex-start;
    padding-left: 22px;
    padding-right: 22px;
}
.perfil-password-wrap {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 22px;
    border-top: 1px solid #e5e7eb;
}
.perfil-password-title {
    margin: 0 0 14px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
}
.perfil-msg {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.4;
}
.perfil-msg--ok {
    background: rgba(18, 111, 56, 0.12);
    color: #126f38;
    font-weight: 700;
}
.perfil-msg--err {
    background: rgba(185, 28, 28, 0.1);
    color: #991b1b;
    font-weight: 600;
}
.perfil-msg--warn {
    background: rgba(180, 130, 20, 0.12);
    color: #92400e;
    font-weight: 600;
}
.page-perfil .perfil-billing-grid {
    display: grid;
    gap: 10px 16px;
    margin: 12px 0 18px;
    max-width: 520px;
}
.page-perfil .perfil-billing-row {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    gap: 8px 12px;
    align-items: baseline;
    font-size: 0.95rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
}
.page-perfil .perfil-billing-row:last-child {
    border-bottom: none;
}
.page-perfil .perfil-billing-k {
    color: #64748b;
    font-weight: 600;
}
.page-perfil .perfil-billing-v {
    color: #0f172a;
}
.page-perfil .perfil-billing-upsell {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(18, 111, 56, 0.08));
    border: 1px solid rgba(251, 191, 36, 0.35);
    margin: 14px 0 18px;
    max-width: 560px;
}
.page-perfil .perfil-billing-upsell__text {
    margin: 0;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.45;
}
.page-perfil .perfil-billing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.page-perfil .perfil-billing-portal-msg {
    min-height: 1.2em;
    color: #991b1b;
}
.page-perfil .perfil-billing-subtitle {
    margin: 18px 0 8px;
    font-size: 1rem;
    color: #0f172a;
}
.page-perfil .perfil-billing-history {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 420px;
}
.page-perfil .perfil-billing-history li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.95rem;
}
.page-perfil .perfil-billing-history__sep {
    color: #94a3b8;
}
.page-perfil .perfil-billing-history__ok {
    margin-left: 4px;
}
.page-perfil .perfil-billing-progress {
    margin: 20px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(18, 111, 56, 0.08);
    color: #126f38;
    font-size: 0.98rem;
    line-height: 1.45;
    max-width: 520px;
}
@media (max-width: 520px) {
    .page-perfil .perfil-billing-row {
        grid-template-columns: 1fr;
    }
}
.perfil-password-form .perfil-footnote {
    margin-top: 4px;
    margin-bottom: 8px;
}

.perfil-share-wrap {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid #e5e7eb;
}
.perfil-share-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin: 10px 0 14px;
}
.perfil-share-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #374151;
    cursor: pointer;
}
.perfil-share-check .fa-solid {
    color: #126f38;
    font-size: 0.92rem;
}
.perfil-share-subtitle {
    margin: 18px 0 10px;
    font-size: 0.98rem;
    font-weight: 700;
    color: #1f2937;
}
.perfil-share-inbox,
.perfil-share-outbox {
    margin-top: 8px;
}
.perfil-share-inbox--accepted .perfil-share-card .perfil-share-modules + .perfil-footnote.perfil-share-accepted-hint {
    margin-top: 8px;
}
.perfil-share-card {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
}
.perfil-share-card__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}
.perfil-share-card__head .muted {
    font-size: 0.85rem;
    color: #6b7280;
}
.perfil-share-status {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-left: 8px;
}
.perfil-share-modules span {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(18, 111, 56, 0.12);
    color: #126f38;
    font-size: 0.82rem;
    font-weight: 600;
}
.perfil-share-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.perfil-share-inline-form {
    display: inline;
}
.perfil-share-card__edit {
    margin-top: 4px;
}
.perfil-share-checks--card {
    margin-top: 4px;
    margin-bottom: 10px;
}
.perfil-share-checks--card .perfil-share-check {
    font-size: 0.9rem;
}
.perfil-share-btn {
    padding: 8px 14px;
    font-size: 0.9rem;
}

.module-share-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(18, 111, 56, 0.2);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.module-share-tabs__link {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #374151;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.module-share-tabs__link:hover {
    background: rgba(18, 111, 56, 0.1);
    color: #126f38;
}
.module-share-tabs__link.is-active {
    background: linear-gradient(135deg, #126f38, #15803d);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 12px rgba(18, 111, 56, 0.35);
}
body.page-gastos .expense-account-hero-head__text,
body.page-ingresos .expense-account-hero-head__text,
body.page-ahorros .expense-account-hero-head__text,
body.page-inversiones .expense-account-hero-head__text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.module-share-tabs--hero {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: inline-flex;
    gap: 0;
    flex-wrap: nowrap;
}
.module-share-tabs--hero .module-share-tabs__link {
    min-height: 26px;
    min-width: 124px;
    width: auto;
    padding: 0 14px;
    border-radius: 0;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.18);
    color: #f8fafc;
    font-size: 0.92rem;
    box-shadow: none;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}
.module-share-tabs--hero .module-share-tabs__link + .module-share-tabs__link {
    margin-left: 0;
    border-left: 0;
}
.module-share-tabs--hero .module-share-tabs__link:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.module-share-tabs--hero .module-share-tabs__link:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.module-share-tabs--hero .module-share-tabs__link:hover {
    background: rgba(255, 255, 255, 0.32);
    color: #ffffff;
}
.module-share-tabs--hero .module-share-tabs__link.is-active {
    background: var(--rm-month-active-cell);
    color: var(--rm-month-active-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.page-gastos .module-share-tabs--hero .gastos-share-tab-form {
    display: inline-flex;
    gap: 0;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
}
body.page-gastos .module-share-tabs--hero .gastos-share-tab-form button.module-share-tabs__link {
    font: inherit;
    font-family: inherit;
    cursor: pointer;
}
body.page-gastos .module-share-tabs--hero .gastos-share-tab-form .module-share-tabs__link + .module-share-tabs__link {
    margin-left: 0;
    border-left: 0;
}
body.page-gastos .module-share-tabs--hero .gastos-share-tab-form .module-share-tabs__link:first-of-type {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
body.page-gastos .module-share-tabs--hero .gastos-share-tab-form .module-share-tabs__link:last-of-type {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.shared-owner-banner {
    margin-bottom: 12px;
    padding: 5px 16px;
    min-height: 34px;
    height: auto;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(21, 115, 49, 0.14);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    overflow: hidden;
}
.shared-owner-banner h2 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    color: #157331;
    white-space: nowrap;
}
.shared-owner-banner .muted {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.2;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}
.shared-module-owner-block {
    margin-top: -6px;
    margin-bottom: 28px;
}
.shared-empty-msg {
    margin: 0;
    padding: 14px;
    color: var(--rm-empty-state-fg);
    font-size: 0.95rem;
}
section.panel:has(> .shared-empty-msg:only-child) {
    background: var(--rm-empty-state-bg);
}
.page-gastos .shared-gastos-intro .gastos-head-panel,
.page-ingresos .shared-gastos-intro .gastos-head-panel,
.page-ahorros .shared-gastos-intro .gastos-head-panel,
.page-inversiones .shared-gastos-intro .gastos-head-panel {
    margin-bottom: 12px;
}

/* --- Dashboard (layout tipo panel de bienvenida + mosaico 2×2) --- */
.page-dashboard .dashboard-main {
    padding-bottom: 32px;
}
.dashboard-welcome {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 24px;
    padding: 28px 20px 32px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.65) 0, rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at 82% 78%, rgba(147, 197, 255, 0.35) 0, rgba(147, 197, 255, 0) 45%),
        linear-gradient(165deg, #e8f4fc 0%, #dbeafe 38%, #eff6ff 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 12px 40px rgba(30, 64, 175, 0.08);
    overflow: hidden;
}
.dashboard-welcome::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(1px 1px at 12% 20%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 28% 60%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 72% 30%, rgba(255, 255, 255, 0.65), transparent),
        radial-gradient(1px 1px at 88% 70%, rgba(255, 255, 255, 0.55), transparent);
    pointer-events: none;
    opacity: 0.9;
}
.dashboard-welcome__text {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 520px;
}
.dashboard-welcome__title {
    margin: 0;
    font-size: clamp(1.35rem, 3.5vw, 1.85rem);
    font-weight: 800;
    color: #1e3a5f;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.dashboard-welcome__brand-rich {
    color: #0f766e;
}
.dashboard-welcome__brand-mind {
    color: #c69b2a;
}
.dashboard-welcome__subtitle {
    margin: 10px 0 0;
    font-size: 1.05rem;
    color: #334155;
    font-weight: 500;
}
.dashboard-welcome__deco {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: min(160px, 28vw);
    line-height: 0;
    filter: drop-shadow(0 8px 20px rgba(15, 118, 110, 0.2));
}
.dashboard-welcome__deco--left {
    margin-right: auto;
}
.dashboard-welcome__deco--right {
    margin-left: auto;
    width: auto;
    max-width: min(380px, 52vw);
    min-width: min(220px, 34vw);
}
.dashboard-welcome__img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.dashboard-welcome__img--guia {
    width: auto;
    max-width: 100%;
    height: clamp(168px, 24vw, 248px);
    margin: 0 auto;
    object-fit: contain;
}

.dashboard-mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 20px;
}
.dashboard-mosaic-card {
    display: block;
    text-decoration: none;
    color: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.12),
        0 14px 32px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dashboard-mosaic-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 14px rgba(0, 0, 0, 0.16),
        0 20px 44px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.dashboard-mosaic-card__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    min-height: 168px;
    padding: 18px 16px 18px 20px;
    position: relative;
}
.dashboard-mosaic-card--gastos .dashboard-mosaic-card__inner {
    background: linear-gradient(145deg, #22c55e 0%, #15803d 50%, #166534 100%);
}
.dashboard-mosaic-card--ingresos .dashboard-mosaic-card__inner {
    background: linear-gradient(145deg, #1f2937 0%, #111827 52%, #030712 100%);
}
.dashboard-mosaic-card--ahorros .dashboard-mosaic-card__inner {
    background: linear-gradient(145deg, #42a5f5 0%, #1565c0 50%, #0d47a1 100%);
}
.dashboard-mosaic-card--inversiones .dashboard-mosaic-card__inner {
    background: linear-gradient(145deg, #7e57c2 0%, #512da8 52%, #311b92 100%);
}
.dashboard-mosaic-card__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.dashboard-mosaic-card__label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.92;
}
.dashboard-mosaic-card__amount {
    margin: 6px 0 0;
    font-size: clamp(1.35rem, 3.2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.dashboard-mosaic-card__meta {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.95;
}
.dashboard-mosaic-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dashboard-mosaic-card__art {
    position: relative;
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    align-self: center;
    opacity: 0.95;
}
.dashboard-mosaic-card__art--donut {
    border-radius: 50%;
    background: conic-gradient(
        #ffeb3b 0deg 52deg,
        #4fc3f7 52deg 120deg,
        #ff7043 120deg 200deg,
        #81c784 200deg 280deg,
        #ba68c8 280deg 360deg
    );
    box-shadow:
        0 0 0 10px rgba(255, 255, 255, 0.2) inset,
        0 6px 16px rgba(0, 0, 0, 0.2);
}
.dashboard-mosaic-card__art--donut::after {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: rgba(183, 28, 28, 0.35);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25) inset;
}
.dashboard-mosaic-card__art--bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding-bottom: 4px;
    background: transparent;
}
.dashboard-mosaic-card__art--bars::before,
.dashboard-mosaic-card__art--bars::after {
    content: "";
    width: 18px;
    border-radius: 6px 6px 2px 2px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
}
.dashboard-mosaic-card__art--bars::before {
    height: 36px;
}
.dashboard-mosaic-card__art--bars::after {
    height: 56px;
}
.dashboard-mosaic-card__bars-arrow {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1.35rem;
    color: rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.dashboard-mosaic-card__art--coins {
    background: radial-gradient(circle at 40% 35%, #fff9c4 0, transparent 45%),
        radial-gradient(circle at 70% 65%, #ffd54f 0, transparent 40%);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.dashboard-mosaic-card__art--coins::after {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.45);
}
.dashboard-mosaic-card__art--chart {
    background: linear-gradient(180deg, transparent 55%, rgba(255, 255, 255, 0.35) 55%),
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 100%);
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
}
.dashboard-mosaic-card__art--chart::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 28%;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ffcdd2, #fff176, #a5d6a7);
    transform: rotate(-8deg);
    box-shadow: 0 -14px 0 -2px rgba(255, 255, 255, 0.25);
}

.dashboard-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}
.dashboard-quick__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    color: #1e293b;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.dashboard-quick__item--link:hover {
    background: #fff;
    border-color: rgba(18, 111, 56, 0.35);
}
.dashboard-quick__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.15rem;
    color: #fff;
}
.dashboard-quick__icon--balance {
    background: linear-gradient(145deg, #3b82f6, #1d4ed8);
}
.dashboard-quick__icon--goals {
    background: linear-gradient(145deg, #f87171, #dc2626);
}
.dashboard-quick__icon--reports {
    background: linear-gradient(145deg, #94a3b8, #64748b);
}
.dashboard-quick__icon--tips {
    background: linear-gradient(145deg, #fbbf24, #d97706);
}
.dashboard-quick__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}
.dashboard-quick__value {
    display: block;
    margin-top: 4px;
    font-size: 1.05rem;
    color: #0f172a;
}
.dashboard-quick__hint {
    display: block;
    margin-top: 4px;
    font-size: 0.88rem;
    color: #475569;
}

.dashboard-panel-secondary h2 {
    margin-top: 0;
}
.dashboard-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
}
.dashboard-mini-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dashboard-mini-stat__label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}

@media (max-width: 900px) {
    .dashboard-mosaic {
        grid-template-columns: 1fr;
    }
    .dashboard-quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-welcome {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 0;
        /* Espacio para la guía sin sumar su alto al flex: la imagen va absolute */
        padding: 18px min(178px, 48vw) 22px 16px;
    }
    .dashboard-welcome__deco--left {
        display: none;
    }
    .dashboard-welcome__text {
        text-align: left;
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
    }
    .dashboard-welcome__deco--right {
        position: absolute;
        right: 10px;
        top: 18px;
        bottom: 22px;
        margin-left: 0;
        width: auto;
        max-width: min(168px, calc(48vw - 12px));
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dashboard-welcome__img--guia {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
        margin: 0;
        object-fit: contain;
    }
}
@media (max-width: 520px) {
    .dashboard-quick {
        grid-template-columns: 1fr;
    }
    .dashboard-mosaic-card__inner {
        min-height: 150px;
    }
    .dashboard-mosaic-card__art {
        width: 72px;
        height: 72px;
    }
}

/* --- Cuentas de gasto (tema verde lima) --- */
body.page-cuentas-gasto .expense-account-toolbar-panel h2 {
    color: #3f6212;
}
body.page-cuentas-gasto .expense-account-head-icon {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.15em;
}
body.page-cuentas-gasto .expense-account-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 20px;
}
body.page-cuentas-gasto .expense-account-toolbar-hint {
    margin: 0;
    font-size: 13px;
    color: #171717;
    flex: 1 1 280px;
}
body.page-cuentas-gasto .expense-account-toolbar-hint a {
    color: #4d7c0f;
    font-weight: 600;
}
body.page-cuentas-gasto .expense-account-add-cat-btn {
    font-weight: 700;
}
/* Mismo verde lima 3D en las 5 pantallas (hero "Registrar …") */
body.page-gastos .gastos-add-btn,
body.page-ingresos .income-add-btn,
body.page-ahorros .savings-add-btn,
body.page-inversiones .investment-add-btn,
body.page-cuentas-gasto .expense-account-add-cat-btn {
    border: 1px solid var(--rm-registrar-border);
    background: var(--rm-registrar-gradient);
    box-shadow: var(--rm-registrar-shadow);
    color: var(--rm-registrar-text);
    text-shadow: none;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
body.page-gastos .gastos-add-btn:hover,
body.page-ingresos .income-add-btn:hover,
body.page-ahorros .savings-add-btn:hover,
body.page-inversiones .investment-add-btn:hover,
body.page-cuentas-gasto .expense-account-add-cat-btn:hover {
    background: var(--rm-registrar-gradient-hover);
    color: var(--rm-registrar-text);
    filter: brightness(1.03);
}
body.page-cuentas-gasto .expense-account-empty-panel {
    border: 1px dashed rgba(74, 222, 128, 0.65);
    background: var(--rm-empty-state-bg);
}
body.page-cuentas-gasto .expense-account-empty-cell {
    margin: 0;
    color: var(--rm-empty-state-fg);
}
body.page-cuentas-gasto .expense-account-empty-cell strong {
    color: var(--rm-empty-state-fg);
    font-weight: 700;
}
body.page-cuentas-gasto .expense-account-category-panel {
    border: 1px solid #bef264;
    background: linear-gradient(180deg, #f7fee7 0%, #ffffff 48%);
    box-shadow: 0 4px 14px rgba(77, 124, 15, 0.12);
    margin-bottom: 0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.page-cuentas-gasto .expense-account-category-panel--empty {
    min-height: 120px;
    max-height: 120px;
}
body.page-cuentas-gasto .expense-account-category-panel--empty .expense-account-footer-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding-top: 4px;
    padding-bottom: 10px;
    gap: 8px;
}
body.page-cuentas-gasto .expense-account-category-panel--empty .expense-account-footer-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}
body.page-cuentas-gasto .expense-account-panels-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
}
body.page-cuentas-gasto .expense-account-groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
body.page-cuentas-gasto .expense-account-group-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
body.page-cuentas-gasto .expense-account-group-title {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
/* Título de grupo: fondo claro; --ea-group-color viene del grupo (p. ej. #0D1B2A … #2F3E46) */
body.page-cuentas-gasto .expense-account-group-title-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--ea-group-color, #166534) 42%, #d9f99d);
    background: linear-gradient(180deg, #f7fee7 0%, #ecfdf5 55%, #f0fdf4 100%);
    box-shadow: 0 1px 2px rgba(15, 41, 24, 0.06);
    color: var(--ea-group-color, #166534);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.2px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body.page-cuentas-gasto .expense-account-group-title-tab:hover {
    background: linear-gradient(180deg, #ecfccb 0%, #d9f99d 45%, #ecfdf5 100%);
    border-color: color-mix(in srgb, var(--ea-group-color, #166534) 55%, #bef264);
    box-shadow: 0 2px 6px rgba(22, 101, 52, 0.1);
}
/* Acento #E0E1DD: texto oscuro para legibilidad sobre fondo claro del tab */
body.page-cuentas-gasto .expense-account-group-title-tab[style*="E0E1DD"],
body.page-cuentas-gasto .expense-account-group-title-tab[style*="e0e1dd"] {
    color: #0D1B2A;
    border-color: color-mix(in srgb, #e0e1dd 62%, #0d1b2a 38%);
}
body.page-cuentas-gasto .expense-account-group-title-tab[style*="E0E1DD"]:hover,
body.page-cuentas-gasto .expense-account-group-title-tab[style*="e0e1dd"]:hover {
    border-color: color-mix(in srgb, #e0e1dd 48%, #0d1b2a 52%);
}
body.page-cuentas-gasto .expense-account-category-panel[style*="E0E1DD"] .cat-header__title,
body.page-cuentas-gasto .expense-account-category-panel[style*="e0e1dd"] .cat-header__title {
    color: #0D1B2A;
}
body.page-cuentas-gasto .expense-account-category-panel[style*="E0E1DD"] .cat-header__fa,
body.page-cuentas-gasto .expense-account-category-panel[style*="e0e1dd"] .cat-header__fa {
    color: #0D1B2A;
}
body.page-cuentas-gasto .expense-account-category-panel[style*="E0E1DD"] .expense-account-title-amount,
body.page-cuentas-gasto .expense-account-category-panel[style*="e0e1dd"] .expense-account-title-amount {
    color: #0D1B2A;
}
/* Solo grupo "Vida diaria": tab de grupo + icono y nombre en paneles hijos */
body.page-cuentas-gasto .expense-account-group--vida-diaria .expense-account-group-title-tab {
    color: #0D1B2A !important;
    --ea-group-color: #0D1B2A !important;
}
body.page-cuentas-gasto .expense-account-group--vida-diaria .expense-account-cat-header .cat-header__fa {
    color: #0D1B2A !important;
}
body.page-cuentas-gasto .expense-account-group--vida-diaria .expense-account-cat-header .cat-header__title > span:not(.expense-account-title-amount) {
    color: #0D1B2A !important;
}
/* Solo grupo "Desarrollo personal": tab de grupo + icono y nombre en paneles hijos */
body.page-cuentas-gasto .expense-account-group--desarrollo-personal .expense-account-group-title-tab {
    color: #748C80 !important;
    --ea-group-color: #748C80 !important;
}
body.page-cuentas-gasto .expense-account-group--desarrollo-personal .expense-account-cat-header .cat-header__fa {
    color: #748C80 !important;
}
body.page-cuentas-gasto .expense-account-group--desarrollo-personal .expense-account-cat-header .cat-header__title > span:not(.expense-account-title-amount) {
    color: #748C80 !important;
}
/* Solo grupo "Otros": tab de grupo + icono y nombre en paneles hijos */
body.page-cuentas-gasto .expense-account-group--otros .expense-account-group-title-tab {
    color: #2F3E46 !important;
    --ea-group-color: #2F3E46 !important;
}
body.page-cuentas-gasto .expense-account-group--otros .expense-account-cat-header .cat-header__fa {
    color: #2F3E46 !important;
}
body.page-cuentas-gasto .expense-account-group--otros .expense-account-cat-header .cat-header__title > span:not(.expense-account-title-amount) {
    color: #2F3E46 !important;
}
/* Solo grupo "Estilo de vida": tab de grupo + icono y nombre en paneles hijos */
body.page-cuentas-gasto .expense-account-group--estilo-de-vida .expense-account-group-title-tab {
    color: #4C7536 !important;
    --ea-group-color: #4C7536 !important;
}
body.page-cuentas-gasto .expense-account-group--estilo-de-vida .expense-account-cat-header .cat-header__fa {
    color: #4C7536 !important;
}
body.page-cuentas-gasto .expense-account-group--estilo-de-vida .expense-account-cat-header .cat-header__title > span:not(.expense-account-title-amount) {
    color: #4C7536 !important;
}
/* Solo grupo "Opcionales": tab de grupo + icono y nombre en paneles hijos */
body.page-cuentas-gasto .expense-account-group--opcionales .expense-account-group-title-tab {
    color: #00B51C !important;
    --ea-group-color: #00B51C !important;
}
body.page-cuentas-gasto .expense-account-group--opcionales .expense-account-cat-header .cat-header__fa {
    color: #00B51C !important;
}
body.page-cuentas-gasto .expense-account-group--opcionales .expense-account-cat-header .cat-header__title > span:not(.expense-account-title-amount) {
    color: #00B51C !important;
}
body.page-cuentas-gasto .expense-account-group-add-btn {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid #84cc16;
    background: linear-gradient(180deg, #a3e635 0%, #65a30d 100%);
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.page-cuentas-gasto .expense-account-cat-header {
    border-bottom: 1px solid #d9f99d;
    background: rgba(217, 249, 157, 0.45);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
body.page-cuentas-gasto .expense-account-cat-header .cat-header__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    color: var(--cat, #365314);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}
body.page-cuentas-gasto .expense-account-cat-header .cat-header__fa {
    color: var(--cat, #365314);
    font-size: 1.1em;
    line-height: 1;
    flex-shrink: 0;
}
body.page-cuentas-gasto .expense-account-title-amount {
    font-weight: 700;
    font-size: 1em;
    line-height: inherit;
    color: var(--cat, #365314);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body.page-cuentas-gasto .expense-account-reset-text {
    margin: 8px 14px 0;
    color: #171717;
    font-weight: 500;
    font-size: 0.95rem;
}
body.page-cuentas-gasto .expense-account-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
body.page-cuentas-gasto .expense-account-budget-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 18px;
    padding: 12px 14px 16px;
    border-bottom: 1px solid #ecfccb;
}
body.page-cuentas-gasto .expense-account-budget-bar--over {
    background: #fff1f2;
    border-bottom-color: #fecdd3;
}
body.page-cuentas-gasto .expense-account-budget-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}
body.page-cuentas-gasto .expense-account-budget-field--static {
    min-width: 260px;
}
body.page-cuentas-gasto .expense-account-static-value {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f8fafc;
    padding: 8px 10px;
    color: #334155;
    font-size: 14px;
    min-height: 38px;
    display: flex;
    align-items: center;
}
body.page-cuentas-gasto .expense-account-budget-field--readonly .expense-account-readout {
    font-weight: 700;
    font-size: 1.05rem;
    padding: 8px 0 0;
}
body.page-cuentas-gasto .expense-account-readout--muted {
    color: #a8a29e;
    font-weight: 600;
}
body.page-cuentas-gasto .expense-account-budget-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}
body.page-cuentas-gasto .expense-account-save-btn {
    border: 1px solid #4d7c0f;
    background: linear-gradient(180deg, #bef264 0%, #65a30d 100%);
    color: #1a2e05;
    font-weight: 700;
}
body.page-cuentas-gasto .expense-account-spending-btn {
    border: 1px solid #365314;
    background: linear-gradient(180deg, #a3e635 0%, #65a30d 100%);
    color: #132a04;
    font-weight: 700;
}
body.page-cuentas-gasto .expense-account-edit-btn {
    border: 1px solid #4d7c0f;
    background: #f7fee7;
    color: #365314;
    font-weight: 700;
}
body.page-cuentas-gasto .expense-account-edit-btn:hover {
    background: #ecfccb;
}
body.page-cuentas-gasto .expense-account-inline-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 8px 14px 0;
}
body.page-cuentas-gasto .expense-account-progress-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 14px 0;
    align-items: stretch;
}
body.page-cuentas-gasto .expense-account-reference-block {
    border: 1px solid #d9f99d;
    border-radius: 10px;
    background: #f7fee7;
    padding: 8px 10px;
    width: 100%;
}
body.page-cuentas-gasto .expense-account-reference-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 2px;
    margin-top: 6px;
    font-size: 13px;
    color: #171717;
    line-height: 1.4;
    width: 100%;
}
body.page-cuentas-gasto .expense-account-reference-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 4px;
}
body.page-cuentas-gasto .expense-account-reference-label {
    white-space: nowrap;
}
body.page-cuentas-gasto .expense-account-reference-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.page-cuentas-gasto .expense-account-progress-block {
    width: 100%;
}
body.page-cuentas-gasto .expense-account-inline-summary div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    color: #171717;
}
body.page-cuentas-gasto .expense-account-inline-summary span {
    font-size: 14px;
}
body.page-cuentas-gasto .expense-account-inline-summary strong {
    font-size: 1.05rem;
    line-height: 1.2;
    color: #1f2937;
    white-space: nowrap;
}
body.page-cuentas-gasto .expense-account-progress-wrap {
    padding: 8px 14px 0;
}
body.page-cuentas-gasto .expense-account-progress-main {
    height: 12px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}
body.page-cuentas-gasto .expense-account-progress-main__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #16a34a 0%, #15803d 100%);
}
body.page-cuentas-gasto .expense-account-progress-main__fill--warn {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}
body.page-cuentas-gasto .expense-account-progress-main__fill--danger {
    background: linear-gradient(90deg, #ef4444 0%, #b91c1c 100%);
}
body.page-cuentas-gasto .expense-account-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    color: #171717;
    font-size: 19px;
}
body.page-cuentas-gasto .expense-account-progress-meta > span {
    color: #171717;
    font-size: 14px;
}
body.page-cuentas-gasto .expense-account-progress-meta strong {
    color: #c2410c;
}
@media (max-width: 980px) {
    body.page-cuentas-gasto .expense-account-panels-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    body.page-cuentas-gasto .expense-account-panels-grid {
        grid-template-columns: 1fr;
    }
}
body.page-cuentas-gasto .expense-account-pace {
    margin: 8px 0 10px;
    padding: 10px 12px;
    border: 1px solid #d9f99d;
    border-radius: 10px;
    background: #f7fee7;
    width: 100%;
}
body.page-cuentas-gasto .expense-account-import-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    border: 1px dashed #84cc16;
    background: linear-gradient(180deg, #f7fee7 0%, #ffffff 100%);
}
body.page-cuentas-gasto .expense-account-import-banner__text {
    flex: 1 1 260px;
    min-width: 0;
}
body.page-cuentas-gasto .expense-account-import-banner__text strong {
    color: #365314;
    font-size: 15px;
}
body.page-cuentas-gasto .expense-account-import-banner .muted {
    color: #171717;
}
body.page-cuentas-gasto .expense-account-reference-block .modal-field__label {
    color: #171717;
}
body.page-cuentas-gasto .expense-account-copy-budgets-all-btn,
body.page-cuentas-gasto .expense-account-copy-budget-prev-btn {
    border: 1px solid #65a30d;
    background: linear-gradient(180deg, #ecfccb 0%, #d9f99d 100%);
    color: #1a2e05;
    font-weight: 700;
}
body.page-cuentas-gasto .expense-account-copy-budget-prev-btn {
    white-space: nowrap;
}
body.page-cuentas-gasto .expense-account-copy-budgets-all-btn:hover,
body.page-cuentas-gasto .expense-account-copy-budget-prev-btn:hover {
    filter: brightness(1.04);
}
body.page-cuentas-gasto .expense-account-footer-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    padding: 0 14px 12px;
    margin-top: auto;
    width: 100%;
}
body.page-cuentas-gasto .expense-account-footer-actions .btn {
    width: 100%;
}
body.page-cuentas-gasto .expense-account-shared-readonly .expense-account-group-add-btn,
body.page-cuentas-gasto .expense-account-shared-readonly .expense-account-footer-actions,
body.page-cuentas-gasto .expense-account-shared-readonly .expense-account-panel-err {
    display: none !important;
}
body.page-cuentas-gasto .expense-account-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.page-cuentas-gasto .expense-account-edit-spendings-wrap {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eef2f0;
}
body.page-cuentas-gasto .expense-account-edit-spendings-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #171717;
}
body.page-cuentas-gasto .expense-account-edit-spendings-hint {
    margin: 0 0 10px;
}
body.page-cuentas-gasto .expense-account-edit-spendings-loading,
body.page-cuentas-gasto .expense-account-edit-spendings-empty {
    margin: 0 0 8px;
}
body.page-cuentas-gasto .expense-account-edit-spendings-empty {
    color: var(--rm-empty-state-fg);
    background: var(--rm-empty-state-bg);
    padding: 14px 12px;
    border-radius: 10px;
    text-align: center;
}
body.page-cuentas-gasto .expense-account-edit-spendings-scroll {
    max-height: min(280px, 42vh);
    overflow: auto;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
}
body.page-cuentas-gasto .expense-account-edit-spendings-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 0;
    background: #fff;
}
body.page-cuentas-gasto .expense-account-edit-spendings-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #4d7c0f;
    color: #f7fee7;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 8px;
    text-align: left;
    border-bottom: 1px solid #3f6212;
}
body.page-cuentas-gasto .expense-account-edit-spendings-table tbody td {
    font-size: 13px;
    padding: 7px 8px;
    vertical-align: middle;
    border-bottom: 1px solid #ecfccb;
    background: #fff;
}
body.page-cuentas-gasto .expense-account-edit-spendings-table tbody tr:hover td {
    background: #f7fee7;
}
body.page-cuentas-gasto .expense-account-edit-spendings-table tbody td:nth-child(3) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.page-cuentas-gasto .expense-account-edit-spendings-actions {
    white-space: nowrap;
    text-align: right;
}
body.page-cuentas-gasto .expense-account-edit-spendings-actions .btn-sm.btn-modal-primary,
body.page-cuentas-gasto .expense-account-edit-spendings-actions .btn-sm.btn-modal-secondary,
body.page-cuentas-gasto .expense-account-edit-spendings-actions .btn-sm.btn-modal-danger {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 8px;
    font-weight: 600;
    margin-left: 4px;
}
body.page-cuentas-gasto .expense-account-edit-spendings-table .modal-field__input,
body.page-cuentas-gasto .expense-account-edit-spendings-table .modal-field__select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 6px 8px;
}
body.page-cuentas-gasto .expense-account-pace__head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #171717;
    font-size: 13px;
    margin-bottom: 6px;
}
body.page-cuentas-gasto .expense-account-pace__head > span {
    color: #171717;
}
body.page-cuentas-gasto .expense-account-pace__head > strong {
    color: #171717;
}
body.page-cuentas-gasto .expense-account-pace__bar {
    height: 10px;
    border-radius: 999px;
    background: #ecfccb;
    overflow: hidden;
}
body.page-cuentas-gasto .expense-account-pace__fill {
    display: block;
    height: 100%;
    background: #65a30d;
}
body.page-cuentas-gasto .expense-account-pace__fill--warn {
    background: #f59e0b;
}
body.page-cuentas-gasto .expense-account-pace__fill--danger {
    background: #dc2626;
}
body.page-cuentas-gasto .expense-account-pace__foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    color: #171717;
    font-size: 13px;
}
body.page-cuentas-gasto .expense-account-pace__foot > span {
    color: #171717;
}
body.page-cuentas-gasto .expense-account-save-btn:hover {
    filter: brightness(1.03);
}
body.page-cuentas-gasto .expense-account-msg--warn {
    margin: 0 14px 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
}
body.page-cuentas-gasto .expense-account-msg--warn a {
    color: #4d7c0f;
    font-weight: 700;
}
body.page-cuentas-gasto .expense-account-panel-err {
    margin: 0 14px 10px;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 600;
}
body.page-cuentas-gasto .expense-account-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 420px;
}
body.page-cuentas-gasto .expense-account-table thead th {
    background: #4d7c0f;
    color: #f7fee7;
    font-size: 12px;
    padding: 8px 10px;
    text-align: left;
}
body.page-cuentas-gasto .expense-account-amount-col {
    text-align: right;
}
body.page-cuentas-gasto .expense-account-table tbody td {
    font-size: 14px;
    padding: 8px 10px;
    border-bottom: 1px solid #ecfccb;
    background: #ffffff;
}
body.page-cuentas-gasto .expense-account-table tbody tr:hover td {
    background: #f7fee7;
}
body.page-cuentas-gasto .expense-account-table-empty {
    color: var(--rm-empty-state-fg);
    background: var(--rm-empty-state-bg);
    font-size: 13px;
    text-align: center;
    padding: 16px 12px !important;
}
body.page-cuentas-gasto .expense-account-table-empty a {
    color: var(--rm-empty-state-fg);
    font-weight: 700;
}
/* --- Presupuestos: cabecera ancho completo, mes en una fila (desktop), totales en una línea --- */
body.page-cuentas-gasto .expense-account-page-hero {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
    box-sizing: border-box;
    margin-bottom: 10px;
}
body.page-cuentas-gasto .expense-account-hero-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
}
body.page-cuentas-gasto .expense-account-hero-head__title {
    margin: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    flex: 0 1 auto;
    min-width: min(100%, 220px);
}
body.page-cuentas-gasto .expense-account-hero-head__text {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 70rem;
    margin-left: auto;
}
body.page-cuentas-gasto .expense-account-hero-head__desc {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.45;
}
/* Calendario lineal “píldora” (Presupuestos + Gastos / Ingresos / Ahorros / Inversiones) */
body.page-cuentas-gasto .expense-account-hero-month.panel,
body.page-gastos .expense-account-hero-month.panel,
body.page-ingresos .expense-account-hero-month.panel,
body.page-ahorros .expense-account-hero-month.panel,
body.page-inversiones .expense-account-hero-month.panel {
    margin-bottom: 12px;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
body.page-cuentas-gasto .expense-account-month-strip,
body.page-gastos .expense-account-month-strip,
body.page-ingresos .expense-account-month-strip,
body.page-ahorros .expense-account-month-strip,
body.page-inversiones .expense-account-month-strip {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    min-height: 40px;
    border-radius: 10px;
    border: 2px solid var(--rm-month-rail-outline);
    background: linear-gradient(180deg, #1a5f38 0%, #0e3d23 52%, #082818 100%);
    box-shadow:
        0 0 0 1px rgba(12, 46, 28, 0.62),
        inset 0 1px 0 0 var(--rm-month-rail-inset-glow),
        inset 0 -1px 0 0 var(--rm-month-rail-inset-glow),
        0 4px 16px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}
body.page-cuentas-gasto .expense-account-month-strip__year.month-year-header,
body.page-gastos .expense-account-month-strip__year.month-year-header,
body.page-ingresos .expense-account-month-strip__year.month-year-header,
body.page-ahorros .expense-account-month-strip__year.month-year-header,
body.page-inversiones .expense-account-month-strip__year.month-year-header {
    flex: 0 0 auto;
    width: min(118px, 20vw);
    min-width: 84px;
    margin-bottom: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--rm-month-label);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, transparent 100%);
    border-right: 1px solid var(--rm-month-divider);
    border-radius: 6px 0 0 6px;
}
body.page-cuentas-gasto .expense-account-month-strip__year .year-arrow,
body.page-gastos .expense-account-month-strip__year .year-arrow,
body.page-ingresos .expense-account-month-strip__year .year-arrow,
body.page-ahorros .expense-account-month-strip__year .year-arrow,
body.page-inversiones .expense-account-month-strip__year .year-arrow {
    color: var(--rm-month-label-muted);
    font-weight: 700;
    opacity: 0.92;
}
body.page-cuentas-gasto .expense-account-month-strip__year .year-arrow:hover,
body.page-gastos .expense-account-month-strip__year .year-arrow:hover,
body.page-ingresos .expense-account-month-strip__year .year-arrow:hover,
body.page-ahorros .expense-account-month-strip__year .year-arrow:hover,
body.page-inversiones .expense-account-month-strip__year .year-arrow:hover {
    color: #fff;
    opacity: 1;
}
body.page-cuentas-gasto .expense-account-month-strip__year strong,
body.page-gastos .expense-account-month-strip__year strong,
body.page-ingresos .expense-account-month-strip__year strong,
body.page-ahorros .expense-account-month-strip__year strong,
body.page-inversiones .expense-account-month-strip__year strong {
    color: var(--rm-month-label);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
body.page-cuentas-gasto .expense-account-month-strip__today.month-nav-today-btn,
body.page-gastos .expense-account-month-strip__today.month-nav-today-btn,
body.page-ingresos .expense-account-month-strip__today.month-nav-today-btn,
body.page-ahorros .expense-account-month-strip__today.month-nav-today-btn,
body.page-inversiones .expense-account-month-strip__today.month-nav-today-btn {
    flex: 0 0 auto;
    width: min(52px, 12vw);
    min-width: 44px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 6px;
    font-size: 18px;
    line-height: 1;
    color: var(--rm-month-label);
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.12) 0%, transparent 100%);
    border-left: 1px solid var(--rm-month-divider);
    border-radius: 0 6px 6px 0;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease;
}
body.page-cuentas-gasto .expense-account-month-strip__today.month-nav-today-btn:hover,
body.page-gastos .expense-account-month-strip__today.month-nav-today-btn:hover,
body.page-ingresos .expense-account-month-strip__today.month-nav-today-btn:hover,
body.page-ahorros .expense-account-month-strip__today.month-nav-today-btn:hover,
body.page-inversiones .expense-account-month-strip__today.month-nav-today-btn:hover {
    background: rgba(217, 249, 157, 0.12);
    color: #fffbeb;
}
body.page-cuentas-gasto .expense-account-month-strip__today.month-nav-today-btn:focus-visible,
body.page-gastos .expense-account-month-strip__today.month-nav-today-btn:focus-visible,
body.page-ingresos .expense-account-month-strip__today.month-nav-today-btn:focus-visible,
body.page-ahorros .expense-account-month-strip__today.month-nav-today-btn:focus-visible,
body.page-inversiones .expense-account-month-strip__today.month-nav-today-btn:focus-visible {
    outline: 2px solid rgba(217, 249, 157, 0.65);
    outline-offset: 2px;
}
body.page-cuentas-gasto .expense-account-hero-month .month-grid.month-grid--expense-hero,
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero,
body.page-ingresos .expense-account-hero-month .month-grid.month-grid--expense-hero,
body.page-ahorros .expense-account-hero-month .month-grid.month-grid--expense-hero,
body.page-inversiones .expense-account-hero-month .month-grid.month-grid--expense-hero {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, auto);
    align-items: stretch;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
body.page-cuentas-gasto .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
body.page-ingresos .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
body.page-ahorros .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
body.page-inversiones .expense-account-hero-month .month-grid.month-grid--expense-hero > a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    min-height: 40px;
    padding: 0 1px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--rm-month-label);
    background: transparent;
    border-bottom: none;
    border-right: 1px solid var(--rm-month-divider);
    text-decoration: none;
    border-radius: 0;
}
body.page-cuentas-gasto .expense-account-hero-month .month-grid.month-grid--expense-hero > a:hover,
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > a:hover,
body.page-ingresos .expense-account-hero-month .month-grid.month-grid--expense-hero > a:hover,
body.page-ahorros .expense-account-hero-month .month-grid.month-grid--expense-hero > a:hover,
body.page-inversiones .expense-account-hero-month .month-grid.month-grid--expense-hero > a:hover {
    background: rgba(217, 249, 157, 0.12);
    color: #fffbeb;
}
body.page-cuentas-gasto .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
body.page-ingresos .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
body.page-ahorros .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
body.page-inversiones .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n) {
    border-right: 1px solid var(--rm-month-divider);
}
body.page-cuentas-gasto .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
body.page-ingresos .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
body.page-ahorros .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
body.page-inversiones .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4) {
    border-bottom: none;
}
body.page-cuentas-gasto .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(12n),
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(12n),
body.page-ingresos .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(12n),
body.page-ahorros .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(12n),
body.page-inversiones .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(12n) {
    border-right: none;
}
body.page-cuentas-gasto .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active,
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active,
body.page-ingresos .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active,
body.page-ahorros .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active,
body.page-inversiones .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active {
    background: var(--rm-month-active-cell);
    color: var(--rm-month-active-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    border-right-color: rgba(15, 41, 24, 0.12);
}
body.page-cuentas-gasto .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active:hover,
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active:hover,
body.page-ingresos .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active:hover,
body.page-ahorros .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active:hover,
body.page-inversiones .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active:hover {
    color: #052e16;
    filter: brightness(1.03);
}
body.page-cuentas-gasto .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active),
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active),
body.page-ingresos .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active),
body.page-ahorros .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active),
body.page-inversiones .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active) {
    background: rgba(217, 249, 157, 0.2);
    color: #fefce8;
    box-shadow: inset 0 -3px 0 0 rgba(190, 242, 100, 0.9), inset 0 0 0 1px rgba(190, 242, 100, 0.35);
}
body.page-cuentas-gasto .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active):hover,
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active):hover,
body.page-ingresos .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active):hover,
body.page-ahorros .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active):hover,
body.page-inversiones .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active):hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

/* Gastos: mes vía POST (barra sin ?year=&month=) — mismos estilos que los enlaces del calendario */
body.page-gastos .expense-account-month-strip__year button.year-arrow {
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 2px 6px;
}
body.page-gastos .expense-account-month-strip__today.month-nav-today-btn {
    border: none;
    cursor: pointer;
    font: inherit;
}
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    min-height: 40px;
    padding: 0 1px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--rm-month-label);
    background: transparent;
    border-bottom: none;
    border-right: 1px solid var(--rm-month-divider);
    border-top: none;
    border-left: none;
    text-decoration: none;
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
}
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:hover {
    background: rgba(217, 249, 157, 0.12);
    color: #fffbeb;
}
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-child(4n) {
    border-right: 1px solid var(--rm-month-divider);
}
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-last-child(-n+4) {
    border-bottom: none;
}
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-child(12n) {
    border-right: none;
}
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.active {
    background: var(--rm-month-active-cell);
    color: var(--rm-month-active-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    border-right-color: rgba(15, 41, 24, 0.12);
}
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.active:hover {
    color: #052e16;
    filter: brightness(1.03);
}
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.month-nav-today:not(.active) {
    background: rgba(217, 249, 157, 0.2);
    color: #fefce8;
    box-shadow: inset 0 -3px 0 0 rgba(190, 242, 100, 0.9), inset 0 0 0 1px rgba(190, 242, 100, 0.35);
}
body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.month-nav-today:not(.active):hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

/* --- Hero estilo Presupuestos en Gastos / Ingresos / Ahorros / Inversiones --- */
body.page-gastos .expense-account-page-hero,
body.page-ingresos .expense-account-page-hero,
body.page-ahorros .expense-account-page-hero,
body.page-inversiones .expense-account-page-hero {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
    box-sizing: border-box;
    margin-bottom: 10px;
}
body.page-gastos .topbar--hero ~ main.container,
body.page-cuentas-gasto .topbar--hero ~ main.container,
body.page-ingresos .topbar--hero ~ main.container,
body.page-ahorros .topbar--hero ~ main.container,
body.page-inversiones .topbar--hero ~ main.container {
    padding-left: 0;
    padding-right: 0;
}
body.page-gastos .expense-account-hero-head,
body.page-ingresos .expense-account-hero-head,
body.page-ahorros .expense-account-hero-head,
body.page-inversiones .expense-account-hero-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
}
body.page-gastos .expense-account-hero-head__title,
body.page-ingresos .expense-account-hero-head__title,
body.page-ahorros .expense-account-hero-head__title,
body.page-inversiones .expense-account-hero-head__title {
    margin: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    flex: 0 1 auto;
    min-width: min(100%, 220px);
}
body.page-gastos .expense-account-head-icon,
body.page-ingresos .expense-account-head-icon,
body.page-ahorros .expense-account-head-icon,
body.page-inversiones .expense-account-head-icon {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.15em;
}
body.page-gastos .expense-account-hero-head__text,
body.page-ingresos .expense-account-hero-head__text,
body.page-ahorros .expense-account-hero-head__text,
body.page-inversiones .expense-account-hero-head__text {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 70rem;
    margin-left: auto;
}
body.page-gastos .expense-account-hero-head__desc,
body.page-ingresos .expense-account-hero-head__desc,
body.page-ahorros .expense-account-hero-head__desc,
body.page-inversiones .expense-account-hero-head__desc {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.45;
}

/* Icono de ayuda junto al título del módulo (Gastos / Ingresos / Ahorros / Inversiones / Presupuestos) */
.expense-account-hero-head__title-main {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.page-screen-info-btn {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 4px;
    padding: 4px 6px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.page-screen-info-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.page-screen-info-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}
.page-screen-info-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
/* Ayuda de pantalla: dropdown anclado al botón (sin modal) */
.page-screen-info-dropdown {
    position: fixed;
    z-index: 1250;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    max-width: min(360px, calc(100vw - 16px));
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.45));
}
.page-screen-info-dropdown__inner {
    border-radius: 14px;
    border: 1px solid rgba(31, 122, 58, 0.35);
    background: linear-gradient(180deg, #fafdfb 0%, #f0fdf4 100%);
    padding: 14px 16px 16px;
    text-align: left;
}
.page-screen-info-dropdown__title {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #14532d;
}
.page-screen-info-dropdown__body {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    font-weight: 500;
    color: #334155;
}
.page-screen-info-dropdown__body p {
    margin: 0 0 0.5em;
}
.page-screen-info-dropdown__body p:last-child {
    margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
    .page-screen-info-dropdown {
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
    }
}
/* Gastos: barra una línea (título | mes | registrar) + calendario en dropdown */
body.page-gastos .expense-account-hero-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 14px;
    max-width: 1220px;
    margin: 0 auto 6px;
    padding: 4px 2px 2px;
}
body.page-gastos .expense-account-hero-toolbar__left {
    justify-self: start;
    min-width: 0;
}
body.page-gastos .expense-account-hero-toolbar__center {
    justify-self: center;
}
body.page-gastos .expense-account-hero-toolbar__right {
    justify-self: end;
}
body.page-gastos .expense-account-hero-toolbar__right--spacer {
    min-width: min(156px, 22vw);
    height: 1px;
}
body.page-gastos .expense-account-hero-toolbar__title {
    flex-wrap: wrap;
}
body.page-gastos .expense-account-month-dropdown {
    position: relative;
    z-index: 40;
}
body.page-gastos .expense-account-month-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(163, 230, 53, 0.42);
    background: linear-gradient(180deg, rgba(31, 122, 58, 0.62) 0%, rgba(15, 61, 32, 0.88) 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(0.88rem, 2vw, 0.98rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body.page-gastos .expense-account-month-dropdown__toggle:hover {
    border-color: rgba(190, 242, 100, 0.55);
    background: linear-gradient(180deg, rgba(34, 140, 72, 0.72) 0%, rgba(17, 72, 38, 0.92) 100%);
}
body.page-gastos .expense-account-month-dropdown__toggle:focus-visible {
    outline: 2px solid rgba(190, 242, 100, 0.85);
    outline-offset: 2px;
}
body.page-gastos .expense-account-month-dropdown__chev {
    font-size: 0.72em;
    opacity: 0.92;
    transition: transform 0.18s ease;
}
body.page-gastos .expense-account-month-dropdown.is-open .expense-account-month-dropdown__chev {
    transform: rotate(180deg);
}
body.page-gastos .expense-account-month-dropdown__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1260;
    box-sizing: border-box;
    width: min(920px, calc(100vw - 24px));
    max-height: min(72vh, 560px);
    overflow: auto;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 14px;
    background: transparent;
    filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.55));
}
body.page-gastos .expense-account-month-dropdown__panel .expense-account-hero-month.panel {
    margin-bottom: 0;
    max-width: none;
    width: 100%;
}
body.page-gastos .expense-account-hero-toolbar .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 156px !important;
    min-height: 34px !important;
    height: 34px;
    padding: 0 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}
body.page-gastos .expense-account-hero-toolbar__tabs {
    max-width: 1220px;
    margin: 0 auto 6px;
    padding: 0 2px;
}
body.page-gastos .expense-account-hero-totals,
body.page-ingresos .expense-account-hero-totals,
body.page-ahorros .expense-account-hero-totals,
body.page-inversiones .expense-account-hero-totals {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    max-width: 1220px;
    margin: 0 auto;
    padding: 2px 2px 4px;
}
body.page-gastos .expense-account-totals-line,
body.page-ingresos .expense-account-totals-line,
body.page-ahorros .expense-account-totals-line,
body.page-inversiones .expense-account-totals-line {
    margin: 0;
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.25;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-height: 34px;
}
body.page-gastos .expense-account-totals-line__label,
body.page-ingresos .expense-account-totals-line__label,
body.page-ahorros .expense-account-totals-line__label,
body.page-inversiones .expense-account-totals-line__label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}
/* Mismo tono que “Saldo restante” en Presupuestos (.expense-account-totals-line__val--avail) */
body.page-gastos .expense-account-totals-line__val,
body.page-ingresos .expense-account-totals-line__val,
body.page-ahorros .expense-account-totals-line__val,
body.page-inversiones .expense-account-totals-line__val {
    font-weight: 800;
    color: #d9f99d;
}
body.page-gastos .expense-account-totals-line__val--unofficial,
body.page-ingresos .expense-account-totals-line__val--unofficial,
body.page-ahorros .expense-account-totals-line__val--unofficial,
body.page-inversiones .expense-account-totals-line__val--unofficial {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}
body.page-gastos .expense-account-totals-line__slash,
body.page-ingresos .expense-account-totals-line__slash,
body.page-ahorros .expense-account-totals-line__slash,
body.page-inversiones .expense-account-totals-line__slash {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    padding: 0 2px;
}
body.page-gastos .expense-account-hero-totals .btn.expense-account-hero-totals__btn,
body.page-ingresos .expense-account-hero-totals .btn.expense-account-hero-totals__btn,
body.page-ahorros .expense-account-hero-totals .btn.expense-account-hero-totals__btn,
body.page-inversiones .expense-account-hero-totals .btn.expense-account-hero-totals__btn {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 156px !important;
    min-height: 34px !important;
    height: 34px;
    padding: 0 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}
body.page-gastos .expense-account-hero-totals--amounts-only {
    justify-content: center;
    padding: 14px 8px 20px;
    margin-top: 2px;
}
body.page-gastos .expense-account-hero-totals--amounts-only .expense-account-totals-line {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 36px;
    font-size: 1rem;
}
body.page-gastos .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}
body.page-gastos .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg--stack {
    display: grid;
    /* Columna de contexto: crece para que “USD … menos que el mes pasado” quepa en una línea */
    grid-template-columns: minmax(280px, 1fr) auto;
    column-gap: 14px;
    align-items: center;
    justify-items: start;
    width: 100%;
    max-width: min(100%, 720px);
    box-sizing: border-box;
}
body.page-gastos
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    > .expense-account-totals-line__val:first-child {
    grid-column: 2;
}
body.page-gastos
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    .expense-account-totals-ctx {
    width: 100%;
    max-width: none;
    min-width: 0;
    text-align: left;
}
body.page-gastos
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    .expense-account-totals-ctx__line {
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center;
}
body.page-gastos
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    .expense-account-totals-ctx__line
    > span:last-child {
    white-space: nowrap;
    overflow-wrap: normal;
}
body.page-gastos
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    .expense-account-totals-line__val {
    justify-self: end;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.page-gastos .expense-account-totals-ctx {
    display: block;
    width: 100%;
    text-align: center;
    font-size: clamp(0.68rem, 1.65vw, 0.78rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.72);
}
body.page-gastos .expense-account-totals-ctx__line {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 5px;
    max-width: 100%;
}
body.page-gastos .expense-account-totals-ctx__line > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}
body.page-gastos .expense-account-totals-ctx__line--eq {
    color: rgba(187, 247, 208, 0.95);
    font-weight: 600;
}
body.page-gastos .expense-account-totals-ctx__line--eq .expense-account-totals-ctx__ico {
    color: #86efac;
    filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.45));
}
body.page-gastos .expense-account-totals-ctx__line--worse {
    color: rgba(254, 215, 170, 0.98);
    font-weight: 600;
}
body.page-gastos .expense-account-totals-ctx__line--worse .expense-account-totals-ctx__ico {
    color: #fb923c;
    filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.55));
}
body.page-gastos .expense-account-totals-ctx__line--better {
    color: rgba(220, 252, 231, 0.98);
    font-weight: 700;
}
body.page-gastos .expense-account-totals-ctx__line--better .expense-account-totals-ctx__ico {
    color: #4ade80;
    filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.65));
    font-size: 1em;
}
body.page-gastos .expense-account-totals-ctx__ico {
    font-size: 0.95em;
    opacity: 0.98;
    flex-shrink: 0;
    align-self: center;
}
body.page-gastos .expense-account-hero-totals--amounts-only .expense-account-totals-line__val {
    font-size: clamp(1.45rem, 4.2vw, 2.05rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
body.page-gastos .expense-account-hero-totals--amounts-only .expense-account-totals-line__slash {
    align-self: center;
    padding: 0 4px;
    font-size: 1.35rem;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.38);
}
/* Fila fina: resumen de gastos vencidos (todas las categorías), debajo de totales */
body.page-gastos .expense-overdue-banner {
    --expense-overdue-line: rgba(251, 191, 36, 0.95);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    max-width: 1220px;
    margin: 4px auto 0;
    padding: 7px 14px;
    box-sizing: border-box;
    border: none;
    background: linear-gradient(180deg, rgba(120, 53, 15, 0.38) 0%, rgba(45, 20, 6, 0.55) 100%);
    box-shadow:
        0 0 14px rgba(251, 191, 36, 0.2),
        0 0 1px rgba(251, 191, 36, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #fbbf24;
    font-weight: 600;
    font-size: clamp(0.86rem, 2vw, 0.95rem);
    letter-spacing: 0.01em;
    line-height: 1.35;
}
body.page-gastos .expense-overdue-banner::before,
body.page-gastos .expense-overdue-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(251, 191, 36, 0.08) 12%,
        var(--expense-overdue-line) 50%,
        rgba(251, 191, 36, 0.08) 88%,
        transparent 100%
    );
}
body.page-gastos .expense-overdue-banner::before {
    top: 0;
}
body.page-gastos .expense-overdue-banner::after {
    bottom: 0;
}
body.page-gastos .expense-overdue-banner__icon {
    flex-shrink: 0;
    font-size: 1.05rem;
    color: #fbbf24;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}
body.page-gastos .expense-overdue-banner__text {
    min-width: 0;
}

body.page-gastos .expense-account-hero-impact-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 24px;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 4px 8px;
}
body.page-gastos .expense-account-hero-impact-row .expense-account-hero-totals {
    flex: 1 1 280px;
    margin: 0;
}
body.page-gastos .expense-fx-impact {
    flex: 1 1 260px;
    max-width: min(100%, 420px);
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(163, 230, 53, 0.28);
    background: linear-gradient(165deg, rgba(22, 60, 36, 0.55) 0%, rgba(12, 28, 18, 0.72) 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
body.page-gastos .expense-fx-impact__main {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 14px;
}
body.page-gastos .expense-fx-impact__col--meta {
    flex: 1 1 0;
    min-width: 0;
}
body.page-gastos .expense-fx-impact__col--amount {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    padding-left: 4px;
}
body.page-gastos .expense-fx-impact__col--amount .expense-fx-impact__title {
    margin: 0 0 2px;
}
body.page-gastos .expense-fx-impact__col--amount .expense-fx-impact__amount {
    margin: 0;
}
body.page-gastos .expense-fx-impact__col--amount .expense-fx-impact__warn {
    text-align: right;
}
body.page-gastos .expense-fx-impact__title {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ecfccb;
}
body.page-gastos .expense-fx-impact__mode {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.62);
}
body.page-gastos .expense-fx-impact__prov {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
}
body.page-gastos .expense-fx-impact__amount {
    margin: 0 0 6px;
    font-size: clamp(1.15rem, 2.8vw, 1.5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #d9f99d;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
body.page-gastos .expense-fx-impact__hint,
body.page-gastos .expense-fx-impact__warn {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(254, 215, 170, 0.95);
}
body.page-gastos .expense-fx-impact__ctx {
    margin-top: 0;
}
body.page-gastos .expense-fx-impact__col--meta .expense-account-totals-ctx {
    text-align: left;
}
body.page-gastos .expense-fx-impact__col--meta .expense-account-totals-ctx__line {
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center;
}
body.page-gastos .expense-fx-tc-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
}
body.page-gastos .expense-fx-tc-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
body.page-gastos .expense-fx-tc-list__src {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
}
body.page-gastos .expense-fx-tc-edit {
    margin-left: 2px;
    padding: 2px 6px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(254, 240, 138, 0.95);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
}
body.page-gastos .expense-fx-tc-edit:hover {
    background: rgba(255, 255, 255, 0.16);
}
body.page-gastos .expense-fx-impact__foot {
    margin: 6px 0 0;
    font-size: 0.72rem;
}
body.page-gastos .expense-fx-impact__link {
    color: rgba(190, 242, 100, 0.95);
    font-weight: 600;
    text-decoration: underline;
}

/* --- Modal calendario (contenido del dialog) --- */
.month-nav-hero-dialog {
    max-width: calc(100vw - 24px);
    width: min(920px, 100%);
    padding: 0;
    border: none;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
}
.month-nav-hero-dialog::backdrop {
    background: rgba(15, 41, 24, 0.45);
    backdrop-filter: blur(2px);
}
.month-nav-hero-dialog__panel {
    background: #fffef7;
    border-radius: 16px;
    border: 1px solid rgba(163, 230, 53, 0.45);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
.month-nav-hero-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #1a5f38 0%, #0e3d23 100%);
    border-bottom: 1px solid var(--rm-month-divider);
}
.month-nav-hero-dialog__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--rm-month-label);
}
.month-nav-hero-dialog__close {
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.month-nav-hero-dialog__close:hover {
    background: rgba(255, 255, 255, 0.2);
}
.month-nav-hero-dialog__body {
    padding: 14px 12px 16px;
    background: linear-gradient(180deg, #f0fdf4 0%, #fffef7 100%);
}
.month-nav-hero-dialog .expense-account-month-strip {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    min-height: 40px;
    border-radius: 999px;
    border: 2px solid var(--rm-month-rail-outline);
    background: linear-gradient(180deg, #1a5f38 0%, #0e3d23 52%, #082818 100%);
    box-shadow:
        0 0 0 1px rgba(12, 46, 28, 0.62),
        inset 0 1px 0 0 var(--rm-month-rail-inset-glow),
        inset 0 -1px 0 0 var(--rm-month-rail-inset-glow),
        0 4px 16px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}
.month-nav-hero-dialog .expense-account-month-strip__year.month-year-header {
    flex: 0 0 auto;
    width: min(118px, 20vw);
    min-width: 84px;
    margin-bottom: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--rm-month-label);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, transparent 100%);
    border-right: 1px solid var(--rm-month-divider);
}
.month-nav-hero-dialog .expense-account-month-strip__year .year-arrow {
    color: var(--rm-month-label-muted);
    font-weight: 700;
    opacity: 0.92;
}
.month-nav-hero-dialog .expense-account-month-strip__year .year-arrow:hover {
    color: #fff;
    opacity: 1;
}
.month-nav-hero-dialog .expense-account-month-strip__year strong {
    color: var(--rm-month-label);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.month-nav-hero-dialog .expense-account-month-strip__today.month-nav-today-btn {
    flex: 0 0 auto;
    width: min(52px, 12vw);
    min-width: 44px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 6px;
    font-size: 18px;
    line-height: 1;
    color: var(--rm-month-label);
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.12) 0%, transparent 100%);
    border-left: 1px solid var(--rm-month-divider);
    border-radius: 0 6px 6px 0;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease;
}
.month-nav-hero-dialog .expense-account-month-strip__today.month-nav-today-btn:hover {
    background: rgba(217, 249, 157, 0.12);
    color: #fffbeb;
}
.month-nav-hero-dialog .expense-account-month-strip__today.month-nav-today-btn:focus-visible {
    outline: 2px solid rgba(217, 249, 157, 0.65);
    outline-offset: 2px;
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, auto);
    align-items: stretch;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    min-height: 40px;
    padding: 0 1px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--rm-month-label);
    background: transparent;
    border-bottom: none;
    border-right: 1px solid var(--rm-month-divider);
    text-decoration: none;
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a:hover {
    background: rgba(217, 249, 157, 0.12);
    color: #fffbeb;
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a:nth-child(4n) {
    border-right: 1px solid var(--rm-month-divider);
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4) {
    border-bottom: none;
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a:nth-child(12n) {
    border-right: none;
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a.active {
    background: var(--rm-month-active-cell);
    color: var(--rm-month-active-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    border-right-color: rgba(15, 41, 24, 0.12);
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a.active:hover {
    color: #052e16;
    filter: brightness(1.03);
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active) {
    background: rgba(217, 249, 157, 0.1);
    color: #fffbeb;
    box-shadow: inset 0 -2px 0 0 rgba(190, 242, 100, 0.75);
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active):hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

body.page-cuentas-gasto .expense-account-hero-totals {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    max-width: 1220px;
    margin: 0 auto;
    padding: 2px 2px 4px;
}
body.page-cuentas-gasto .expense-account-totals-line {
    margin: 0;
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.25;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-height: 34px;
}
body.page-cuentas-gasto .expense-account-totals-line__label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}
body.page-cuentas-gasto .expense-account-totals-line__val {
    font-weight: 800;
    color: #fff;
}
body.page-cuentas-gasto .expense-account-totals-line__val--avail {
    color: #d9f99d;
}
body.page-cuentas-gasto .expense-account-totals-line__slash {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    padding: 0 2px;
}
/* Por encima de .page-cuentas-gasto .gastos-add-btn (50px) para alinear con la línea de totales */
body.page-cuentas-gasto .expense-account-hero-totals .btn.expense-account-add-cat-btn.expense-account-hero-totals__btn {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 156px !important;
    min-height: 34px !important;
    height: 34px;
    padding: 0 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}
@media (max-width: 720px) {
    body.page-cuentas-gasto .expense-account-hero-head {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-cuentas-gasto .expense-account-hero-head__text {
        margin-left: 0;
        max-width: none;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    body.page-cuentas-gasto .expense-account-hero-head__text .module-share-tabs--hero {
        justify-content: flex-start;
    }
    body.page-cuentas-gasto .expense-account-month-strip,
    body.page-gastos .expense-account-month-strip,
    body.page-ingresos .expense-account-month-strip,
    body.page-ahorros .expense-account-month-strip,
    body.page-inversiones .expense-account-month-strip {
        flex-direction: column;
        border-radius: 18px;
        min-height: 0;
    }
    body.page-cuentas-gasto .expense-account-month-strip__year.month-year-header,
    body.page-gastos .expense-account-month-strip__year.month-year-header,
    body.page-ingresos .expense-account-month-strip__year.month-year-header,
    body.page-ahorros .expense-account-month-strip__year.month-year-header,
    body.page-inversiones .expense-account-month-strip__year.month-year-header {
        width: 100%;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid var(--rm-month-divider);
        padding: 8px 14px;
    }
    body.page-cuentas-gasto .expense-account-month-strip__today.month-nav-today-btn,
    body.page-gastos .expense-account-month-strip__today.month-nav-today-btn,
    body.page-ingresos .expense-account-month-strip__today.month-nav-today-btn,
    body.page-ahorros .expense-account-month-strip__today.month-nav-today-btn,
    body.page-inversiones .expense-account-month-strip__today.month-nav-today-btn {
        width: 100%;
        min-width: 0;
        border-left: none;
        border-top: 1px solid var(--rm-month-divider);
        border-radius: 0 0 10px 10px;
        padding: 10px 14px;
        min-height: 40px;
    }
    body.page-cuentas-gasto .expense-account-hero-month .month-grid.month-grid--expense-hero,
    body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero,
    body.page-ingresos .expense-account-hero-month .month-grid.month-grid--expense-hero,
    body.page-ahorros .expense-account-hero-month .month-grid.month-grid--expense-hero,
    body.page-inversiones .expense-account-hero-month .month-grid.month-grid--expense-hero {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, auto));
    }
    body.page-cuentas-gasto .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
    body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
    body.page-ingresos .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
    body.page-ahorros .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
    body.page-inversiones .expense-account-hero-month .month-grid.month-grid--expense-hero > a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 36px;
        padding: 4px 2px;
        font-size: 13px;
        line-height: 1;
        border-bottom: 1px solid rgba(163, 230, 53, 0.32);
        border-right: 1px solid rgba(163, 230, 53, 0.32);
    }
    body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 36px;
        padding: 4px 2px;
        font-size: 13px;
        line-height: 1;
        border-bottom: 1px solid rgba(163, 230, 53, 0.32);
        border-right: 1px solid rgba(163, 230, 53, 0.32);
    }
    body.page-cuentas-gasto .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
    body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
    body.page-ingresos .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
    body.page-ahorros .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
    body.page-inversiones .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n) {
        border-right: 0;
    }
    body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-child(4n) {
        border-right: 0;
    }
    body.page-cuentas-gasto .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
    body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
    body.page-ingresos .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
    body.page-ahorros .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
    body.page-inversiones .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4) {
        border-bottom: 0;
    }
    body.page-gastos .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-last-child(-n+4) {
        border-bottom: 0;
    }
    body.page-cuentas-gasto .expense-account-hero-month .month-panel,
    body.page-gastos .expense-account-hero-month .month-panel,
    body.page-ingresos .expense-account-hero-month .month-panel,
    body.page-ahorros .expense-account-hero-month .month-panel,
    body.page-inversiones .expense-account-hero-month .month-panel {
        min-height: 0;
        height: auto;
    }
    body.page-cuentas-gasto .expense-account-hero-totals {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-cuentas-gasto .expense-account-totals-line {
        font-size: 0.85rem;
        min-height: 0;
    }
    body.page-cuentas-gasto .expense-account-hero-totals .btn.expense-account-add-cat-btn.expense-account-hero-totals__btn {
        align-self: center;
        width: 100%;
        max-width: 320px;
        height: auto;
        min-height: 40px !important;
        padding: 8px 12px !important;
    }
    body.page-gastos .expense-account-hero-head,
    body.page-ingresos .expense-account-hero-head,
    body.page-ahorros .expense-account-hero-head,
    body.page-inversiones .expense-account-hero-head {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-gastos .expense-account-hero-toolbar {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "gasto-tb-left gasto-tb-right"
            "gasto-tb-center gasto-tb-center";
        row-gap: 12px;
        column-gap: 10px;
    }
    body.page-gastos .expense-account-hero-toolbar__left {
        grid-area: gasto-tb-left;
    }
    body.page-gastos .expense-account-hero-toolbar__right {
        grid-area: gasto-tb-right;
    }
    body.page-gastos .expense-account-hero-toolbar__center {
        grid-area: gasto-tb-center;
        justify-self: center;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    body.page-gastos .expense-account-hero-toolbar__right--spacer {
        display: none;
    }
    body.page-gastos .expense-account-hero-impact-row {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-gastos .expense-fx-impact {
        max-width: none;
    }
    body.page-gastos .expense-fx-impact__main {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-gastos .expense-fx-impact__col--amount {
        order: -1;
        align-items: flex-start;
        text-align: left;
        padding-left: 0;
    }
    body.page-gastos .expense-fx-impact__col--amount .expense-fx-impact__warn {
        text-align: left;
    }
    body.page-gastos .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg--stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        max-width: 100%;
        width: 100%;
    }
    body.page-gastos
        .expense-account-hero-totals--amounts-only
        .expense-account-totals-line__seg--stack
        .expense-account-totals-line__val {
        justify-self: auto;
        text-align: center;
    }
    body.page-gastos
        .expense-account-hero-totals--amounts-only
        .expense-account-totals-line__seg--stack
        .expense-account-totals-ctx {
        max-width: 100%;
        text-align: center;
    }
    body.page-gastos
        .expense-account-hero-totals--amounts-only
        .expense-account-totals-line__seg--stack
        .expense-account-totals-ctx__line {
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
    }
    body.page-gastos
        .expense-account-hero-totals--amounts-only
        .expense-account-totals-line__seg--stack
        .expense-account-totals-ctx__line
        > span:last-child {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    body.page-gastos .expense-account-month-dropdown__panel {
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: none;
    }
    body.page-gastos .expense-account-hero-toolbar .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn {
        width: auto;
        max-width: 100%;
    }
    body.page-gastos .topbar--hero ~ main.container,
    body.page-cuentas-gasto .topbar--hero ~ main.container,
    body.page-ingresos .topbar--hero ~ main.container,
    body.page-ahorros .topbar--hero ~ main.container,
    body.page-inversiones .topbar--hero ~ main.container {
        padding-left: 12px;
        padding-right: 12px;
    }
    body.page-gastos .expense-account-hero-head__text,
    body.page-ingresos .expense-account-hero-head__text,
    body.page-ahorros .expense-account-hero-head__text,
    body.page-inversiones .expense-account-hero-head__text {
        margin-left: 0;
        max-width: none;
        align-items: flex-start;
    }
    .module-share-tabs--hero {
        width: 100%;
        justify-content: flex-start;
    }
    .module-share-tabs--hero .module-share-tabs__link {
        min-height: 26px;
        width: auto;
        flex: 1 1 0;
    }
    body.page-gastos .expense-account-hero-totals,
    body.page-ingresos .expense-account-hero-totals,
    body.page-ahorros .expense-account-hero-totals,
    body.page-inversiones .expense-account-hero-totals {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-gastos .expense-account-hero-totals--amounts-only .expense-account-totals-line {
        font-size: 1rem;
    }
    body.page-gastos .expense-account-hero-totals--amounts-only .expense-account-totals-line__val {
        font-size: clamp(1.22rem, 5.2vw, 1.72rem);
    }
    body.page-gastos .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg {
        align-items: center;
        text-align: center;
    }
    body.page-gastos .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg--stack {
        max-width: 100%;
    }
    body.page-gastos .expense-account-totals-line,
    body.page-ingresos .expense-account-totals-line,
    body.page-ahorros .expense-account-totals-line,
    body.page-inversiones .expense-account-totals-line {
        font-size: 0.85rem;
        min-height: 0;
    }
    body.page-gastos .expense-account-hero-totals .btn.expense-account-hero-totals__btn,
    body.page-ingresos .expense-account-hero-totals .btn.expense-account-hero-totals__btn,
    body.page-ahorros .expense-account-hero-totals .btn.expense-account-hero-totals__btn,
    body.page-inversiones .expense-account-hero-totals .btn.expense-account-hero-totals__btn {
        align-self: center;
        width: 100%;
        max-width: 320px;
        height: auto;
        min-height: 40px !important;
        padding: 8px 12px !important;
    }
}

/* --- Refuerzo tema oscuro: guía, login-landing, dashboard, tabs config --- */
.page-guia .guia-panel,
.page-info .guia-panel {
    background: #1a1a1f !important;
    border-color: var(--rm-border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}
.page-guia .guia-hero,
.page-info .guia-hero {
    background: linear-gradient(180deg, #1f2a22 0%, #1a1a1f 55%, #161618 100%) !important;
}
.page-guia .guia-intro,
.page-info .guia-intro {
    color: #d4d4d8 !important;
}
.page-guia .guia-content-grid {
    background: #161618 !important;
}
.page-guia .guia-progress-card,
.page-guia .guia-level {
    background: #1e1e24 !important;
    border-color: var(--rm-border) !important;
}
.auth-landing-copy,
.auth-landing-aside .auth-panel--landing-card {
    background: #1a1a1f !important;
    border: 1px solid var(--rm-border) !important;
    color: var(--rm-text) !important;
}
.auth-landing-title,
.auth-landing-lead,
.auth-landing-text {
    color: #e4e4e7 !important;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.subnav {
    background: linear-gradient(180deg, #1a221e 0%, #1a1a1f 100%) !important;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.panel {
    background: #1a1a1f !important;
}
body.page-dashboard .dashboard-welcome,
body.page-dashboard .panel {
    border-color: var(--rm-border) !important;
}
.config-table thead th {
    background: #25252c !important;
    color: var(--rm-text-muted) !important;
}