/* Agrupación de tarjetas dashboard */
.dash-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(59,130,246,0.15);
    background: linear-gradient(145deg, #1A2A3F 0%, #162236 100%);
}
.dash-group-top {
    margin-bottom: 10px; /* Espacio mínimo entre grupos */
}
.dash-group-bottom {
    margin-top: 10px;
    margin-bottom: 10px;
}
/* Elimina margen vertical entre tarjetas dentro de cada grupo */
.dash-group .dash-block,
.dash-group .dash-compact-card,
.dash-group .card-balance,
.dash-group .card-ingresos,
.dash-group .card-gastos,
.dash-group .card-deudas,
.dash-group .card-tc,
.dash-group .card-pagominimo {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Inside a group, cards lose their own border-radius and outer border */
.dash-group .dash-compact-card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid rgba(59,130,246,0.08);
}
.dash-group .dash-block {
    gap: 0;
}
.dash-group .dash-block .dash-block-left:first-child .dash-compact-card {
    border-right: 1px solid rgba(59,130,246,0.08);
}
/* Last row of cards in group: no bottom border (group border suffices) */
.dash-group > :last-child .dash-compact-card {
    border-bottom: none;
}
/* Mantiene el pequeño margen entre los grupos principales */
.dash-group-top + .dash-date-bar {
    margin-top: 8px;
    margin-bottom: 8px;
}
.dash-date-bar + .dash-group-bottom {
    margin-top: 8px;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: "Twemoji Country Flags", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* ══════════════════════════════════════════════════════════
   📐 RESPONSIVE SPACING SYSTEM
   Mobile → Tablet → Desktop — all sizes driven by :root vars
   ══════════════════════════════════════════════════════════ */
:root {
    /* Outer body margin (screen edge → content edge) */
    --page-mx: 12px;
    /* Inner container padding (content edge → card edge) */
    --page-px:  4px;
    --page-pt:  12px;
    --page-pb:  32px;
    /* Card */
    --card-px:  12px;
    --card-py:  14px;
    --card-r:   14px;
    --card-gap: 10px;
    /* Table cells */
    --th-px: 11px;  --th-py: 11px;
    --td-px: 11px;  --td-py: 10px;
    --table-r: 14px;
    /* Section spacing */
    --section-mb: 28px;

    /* ── La barra inferior y lo que sale de ella ──
       Los paneles de "+", Herramientas, Estadisticas y Perfil se cuelgan de la
       barra, asi que su ancho y su posicion son los de la barra y no otros.
       Estan aqui, en un solo sitio, porque cuando cada uno llevaba los suyos
       acabaron en 100%, 420px y 520px: tres ventanas distintas para lo mismo. */
    --nav-h:  60px;   /* alto de la barra */
    --nav-max: 1200px;
    --panel-gap: 10px; /* aire entre el panel y la barra */
}
/* ─ small phone → phablet ─ */
@media (min-width: 400px) {
    :root {
        --page-mx: 12px;
        --page-px:  6px;
        --page-pt:  14px;
        --card-px:  14px;  --card-py:  16px;
        --card-r:   16px;  --card-gap: 11px;
        --th-px: 12px;  --th-py: 12px;
        --td-px: 12px;  --td-py: 11px;
        --table-r: 16px;
        --section-mb: 32px;
    }
}
/* ─ tablet portrait ─ */
@media (min-width: 600px) {
    :root {
        --page-mx: 16px;
        --page-px:  14px;
        --page-pt:  18px;
        --page-pb:  44px;
        --card-px:  18px;  --card-py:  20px;
        --card-r:   18px;  --card-gap: 14px;
        --th-px: 14px;  --th-py: 14px;
        --td-px: 14px;  --td-py: 13px;
        --table-r: 18px;
        --section-mb: 42px;
    }
}
/* ─ tablet landscape / small desktop ─ */
@media (min-width: 900px) {
    :root {
        --page-mx: 20px;
        --page-px:  20px;
        --page-pt:  24px;
        --page-pb:  52px;
        --card-px:  22px;  --card-py:  24px;
        --card-r:   20px;  --card-gap: 16px;
        --th-px: 16px;  --th-py: 16px;
        --td-px: 16px;  --td-py: 14px;
        --table-r: 20px;
        --section-mb: 50px;
    }
}
/* ─ desktop ─ */
@media (min-width: 1200px) {
    :root {
        --page-mx: 24px;
        --page-px:  28px;
        --page-pt:  30px;
        --page-pb:  60px;
        --card-px:  24px;  --card-py:  26px;
        --card-gap: 18px;
        --th-px: 18px;  --th-py: 18px;
        --td-px: 18px;  --td-py: 16px;
        --section-mb: 56px;
    }
}
/* ─ large desktop ─ */
@media (min-width: 1440px) {
    :root {
        --page-mx: 32px;
        --page-px:  36px;
        --card-px:  26px;  --card-py:  28px;
        --card-gap: 20px;
    }
}

/* ═══ PANEL DE NOTIFICACIONES ═══ */
/* El titulo de la barra hace de boton: lleva el numero de avisos sin leer y
   despliega la lista. Sin avisos se comporta como el texto de siempre. */
.topbar-resumen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 2px 6px;
    border-radius: 10px;
    color: inherit;
    font: inherit;
    cursor: default;
}
.topbar-resumen.con-avisos { cursor: pointer; }
.topbar-resumen.con-avisos:hover { background: rgba(59,130,246,0.12); }
.topbar-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}
.topbar-bell-btn:hover {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #10b981;
    transform: scale(1.05);
}
.topbar-bell-btn.con-avisos {
    color: #fbbf24;
}
.topbar-bell-btn .topbar-avisos-cuenta {
    position: absolute;
    top: -5px;
    right: -5px;
    border: 2px solid #060b14;
}
.topbar-avisos-cuenta {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}
.topbar-avisos-cuenta[hidden] { display: none; }
/* El punto de los que siguen sin leer: abrir la lista no los da por vistos. */
.notif-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
}
.notif-item.notif-sin-leer .notif-ir { margin-left: 8px; }
/* Cada aviso lleva a donde se arregla. */
.notif-item.notif-clicable { cursor: pointer; }
.notif-item.notif-clicable:hover { background: rgba(59,130,246,0.08); }
.notif-ir {
    margin-left: auto;
    color: #64748b;
    font-size: 1.2rem;
    line-height: 1;
}

#panelNotificaciones {
    position: fixed !important;
    top: 65px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: min(480px, calc(100vw - 24px)) !important;
    z-index: 1050 !important;
    pointer-events: none !important;
    transform: none !important;
}
#panelNotificaciones:not(:empty) {
    pointer-events: auto !important;
}

.notif-panel {
    margin-bottom: 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    border: 1px solid rgba(59,130,246,0.35) !important;
    background: rgba(15,24,42,0.96) !important;
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08) !important;
    animation: notifFadeIn 0.22s ease-out !important;
    max-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
}
@keyframes notifFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
.notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.1rem;
    background: rgba(59,130,246,0.12);
    font-weight: 700;
    font-size: 0.92rem;
    color: #93c5fd;
    border-bottom: 1px solid rgba(59,130,246,0.15);
}
.notif-close {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
    transition: color 0.2s;
}
.notif-close:hover { color: #ef4444; }
.notif-list { display: flex; flex-direction: column; }
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.87rem;
}
.notif-item:last-child { border-bottom: none; }
.notif-item strong { font-size: 0.9rem; display: block; margin-bottom: 2px; }
.notif-item p { margin: 0; color: #94a3b8; font-size: 0.83rem; }
.notif-icono { font-size: 1.3rem; flex-shrink: 0; }
.notif-danger { background: rgba(239,68,68,0.07); border-left: 4px solid #ef4444; }
.notif-danger strong { color: #fca5a5; }
.notif-warning { background: rgba(245,158,11,0.07); border-left: 4px solid #f59e0b; }
.notif-warning strong { color: #fcd34d; }
.notif-info { background: rgba(59,130,246,0.07); border-left: 4px solid #3b82f6; }
.notif-info strong { color: #93c5fd; }

body {
    margin: 0;
    background: linear-gradient(135deg, #060b14 0%, #091322 40%, #0d192c 70%, #122036 100%);
    color:white;
    overflow-x: hidden;
}

/* Animated background shapes */
.bg-shapes {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.bg-shapes span {
    position: absolute;
    border-radius: 50%;
    opacity: 0.06;
    animation: bgFloat 20s infinite ease-in-out;
}
.bg-shapes span:nth-child(1) {
    width: 400px; height: 400px;
    background: #2563eb;
    top: -100px; left: -100px;
    animation-delay: 0s;
}
.bg-shapes span:nth-child(2) {
    width: 300px; height: 300px;
    background: #22c55e;
    bottom: -80px; right: -60px;
    animation-delay: -7s;
}
.bg-shapes span:nth-child(3) {
    width: 200px; height: 200px;
    background: #1E7881;
    top: 50%; left: 60%;
    animation-delay: -14s;
}
@keyframes bgFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
}

/* 🔥 CONTROL REAL DEL LAYOUT */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--page-pt) var(--page-px) var(--page-pb);
    position: relative;
    z-index: 1;
}

h1{
    font-size:24px;
    margin-bottom:20px;
    color: #F1F5F9;
    font-weight: 700;
}

/* 🟠 BARRA DE HERRAMIENTAS SIDEBAR */
.sidebar {
    position: fixed;
    right: 20px;
    top: 20px;
    width: 50px;
    height: 50px;

    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 1200;

    box-shadow: 0 6px 20px rgba(59,130,246,0.4);
    transition: 0.3s;
}

.sidebar:hover {
    transform: scale(1.1);
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(59,130,246,0.3);
    border-radius: 2px;
}

.sidebar-item {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 20px;
    color: #64748b;
    background: rgba(59,130,246,0.05);
    border: 1px solid rgba(59,130,246,0.1);
    position: relative;
    flex-shrink: 0;
}

.sidebar-item:hover {
    color: #3b82f6;
    background: rgba(59,130,246,0.15);
    border-color: rgba(59,130,246,0.3);
    transform: scale(1.08) translateX(2px);
}

.sidebar-item.activo {
    color: white;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59,130,246,0.4);
}

.sidebar-item.activo::before {
    content: '';
    position: absolute;
    width: 3px;
    height: 20px;
    background: #3b82f6;
    right: -11px;
    border-radius: 0 4px 4px 0;
}

/* HERRAMIENTAS PANEL */
.herramientas-panel {
    position: fixed;
    right: -320px; /* oculto */
    top: 0;
    width: 320px;
    height: 100vh;

    background: linear-gradient(180deg, #091524 0%, #060b14 100%);
    border-left: 1px solid rgba(59,130,246,0.2);

    padding: 20px;
    transition: right 0.35s ease;

    z-index: 1100;
}

.herramientas-panel.activo {
    right: 0;
}

.herramientas-panel h3 {
    font-size: 14px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 15px;
    margin-top: 10px;
    font-weight: 600;
}

.herramientas-panel p {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 15px;
}

.herramienta-item {
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.2);
    padding: 12px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 10px;
    font-size: 13px;
    color: #cbd5e1;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.herramienta-item:hover {
    background: rgba(59,130,246,0.15);
    border-color: #3b82f6;
    color: white;
    transform: translateX(-2px);
}

.herramienta-item.activo {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #3b82f6;
    color: white;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}

.herramientas-panel::-webkit-scrollbar {
    width: 6px;
}

.herramientas-panel::-webkit-scrollbar-track {
    background: rgba(59,130,246,0.05);
}

.herramientas-panel::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 3px;
}

.herramientas-panel::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}

.herramientas-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #3b82f6, transparent);
    opacity: 0.4;
}

.herramienta-btn {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;

    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 8px;

    color: #cbd5e1;
    cursor: pointer;
    transition: 0.2s;
}

.herramienta-btn:hover {
    background: rgba(59,130,246,0.2);
    color: white;
}

.herramienta-btn.activo {
    background: #3b82f6;
    color: white;
}

/* DASHBOARD — MOBILE-STYLE STAT CARDS */
.dashboard-scroll {
    display: grid;
    /* minmax(0, 1fr) y no 1fr a secas: un track 1fr tiene por minimo el de su
       contenido, asi que cualquier hijo ancho --la fila de presupuestos, una
       tabla-- estiraba el inicio entero en vez de desplazarse dentro. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--card-gap);
    padding: 10px 0 20px;
}
.dashboard-scroll .stat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--card-gap);
}

/* STAT CARD (glassmorphic, matches mobile) */
.card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(59,130,246,0.13);
    background: #1A2A3F;
    padding: var(--card-py) var(--card-px);
    border-radius: var(--card-r);
    box-shadow:
        0 6px 18px rgba(30,120,129,0.06),
        0 4px 12px rgba(0,0,0,0.30);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--card-glow, rgba(59,130,246,0.12)), transparent);
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 0;
}

.card:hover::before {
    top: -30%;
    right: -30%;
    width: 220px;
    height: 220px;
}

.card:hover {
    border-color: var(--card-accent, #3b82f6);
    box-shadow:
        0 8px 24px rgba(30,120,129,0.12),
        0 6px 16px rgba(0,0,0,0.35);
    transform: translateY(-3px) scale(1.01);
}

/* Icon container */
.card .stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, var(--icon-bg-start, rgba(59,130,246,0.20)), var(--icon-bg-end, rgba(59,130,246,0.05)));
}

/* Value */
.card p {
    font-size: 22px;
    font-weight: 800;
    color: #F1F5F9;
    position: relative;
    z-index: 1;
    margin: 0 0 4px;
    line-height: 1.2;
}

/* Label */
.card h3 {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* Color variants */
.card.card-balance  { --card-accent: #22C55E; --card-glow: rgba(34,197,94,0.12); --icon-bg-start: rgba(34,197,94,0.20); --icon-bg-end: rgba(34,197,94,0.05); border-color: rgba(34,197,94,0.18); }
.card.card-ingresos { --card-accent: #22C55E; --card-glow: rgba(34,197,94,0.12); --icon-bg-start: rgba(34,197,94,0.20); --icon-bg-end: rgba(34,197,94,0.05); border-color: rgba(34,197,94,0.18); }
.card.card-gastos   { --card-accent: #EF4444; --card-glow: rgba(239,68,68,0.12); --icon-bg-start: rgba(239,68,68,0.20); --icon-bg-end: rgba(239,68,68,0.05); border-color: rgba(239,68,68,0.18); }
.card.card-deudas   { --card-accent: #F59E0B; --card-glow: rgba(245,158,11,0.12); --icon-bg-start: rgba(245,158,11,0.20); --icon-bg-end: rgba(245,158,11,0.05); border-color: rgba(245,158,11,0.18); }
.card.card-pagominimo { --card-accent: #F97316; --card-glow: rgba(249,115,22,0.12); --icon-bg-start: rgba(249,115,22,0.20); --icon-bg-end: rgba(249,115,22,0.05); border-color: rgba(249,115,22,0.18); }

@media (min-width: 700px) {
    /* gap is handled by CSS vars above */
    .card p {
        font-size: 26px;
    }
}
@media (min-width: 1024px) {
    .card p {
        font-size: 28px;
    }
}

/* ═══ COMPACT DASHBOARD CARDS ═══ */
/* Ajuste: reducir aún más el espacio vertical entre bloques y tarjetas */
.dash-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 2px;
    margin-bottom: 2px;
}
/* Dos tarjetas en una rejilla declarada de dos filas dejaban la segunda fila
   reservada y vacia, y el grupo la pintaba como un cuadro sin contenido. */
.dash-block-una-fila {
    grid-template-rows: auto;
}

/* Las dos tarjetas del bloque mensual llenan su celda.
   El pago minimo se hizo mas alto al anadirle el desglose, asi que su vecina
   se quedaba corta y debajo de ella aparecia un hueco oscuro con pinta de
   cuadro vacio. Ahora las dos ocupan lo mismo y centran su contenido. */
.dash-monthly-card .dash-block-left {
    justify-content: stretch;
}

.dash-monthly-card .dash-compact-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dash-monthly-card {
    margin-bottom: 2px;
    gap: 2px;
}
.dash-block-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-block-right {
    grid-row: 1 / 3;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* Espaciado vertical entre tarjetas compactas solo arriba y abajo */
/* Espaciado vertical entre tarjetas compactas aún menor */
.dash-compact-card {
    background: linear-gradient(145deg, #1A2A3F 0%, #162236 100%);
    border: 1px solid rgba(59,130,246,0.13);
    border-radius: 14px;
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    margin-top: 2px;
    margin-bottom: 2px;
}
.dash-compact-card:hover {
    transform: translateY(-2px);
    border-color: var(--card-accent, #3b82f6);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.dash-compact-card p {
    font-size: 1.05rem;
    font-weight: 800;
    color: #F1F5F9;
    margin: 0 0 4px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-compact-card h3 {
    font-size: 0.6rem;
    color: #94a3b8;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
/* Compact card color variants - estilo y color unificado */
.dash-compact-card.card-ingresos,
.dash-compact-card.card-gastos,
.dash-compact-card.card-deudas,
.dash-compact-card.card-tc,
.dash-compact-card.card-pagominimo {
    --card-accent: #38bdf8;
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(15, 23, 42, 0.65);
}
.dash-compact-card.card-ingresos p,
.dash-compact-card.card-gastos p,
.dash-compact-card.card-deudas p,
.dash-compact-card.card-tc p,
.dash-compact-card.card-pagominimo p {
    color: #f8fafc !important;
}
.dash-compact-card.card-balance, .dash-compact-card.card-monthly-balance, .dash-compact-card.card-posicion-neta { --card-accent: #38bdf8; border-color: rgba(56, 189, 248, 0.2); }
.dash-compact-card.card-balance:not(.card-posicion-neta) p { color: #f8fafc !important; }
.dash-compact-card.card-monthly-balance p {
    font-size: 1.05rem;
    font-weight: 800;
}

/* Date bar */
.dash-date-bar {
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.15);
    border-radius: 10px;
    padding: 8px 14px;
    text-align: center;
    color: #93c5fd;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 6px;
}

/* Monthly movements */
.dash-movimientos-container {
    margin-top: 14px;
    background: linear-gradient(165deg, rgba(10, 20, 36, 0.92) 0%, rgba(6, 12, 22, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 1px rgba(16, 185, 129, 0.15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.dash-movimientos-title {
    font-size: 0.92rem;
    color: #e2e8f0;
    margin: 0 0 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-movimientos-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    border-radius: 3px;
}
.dash-movimientos-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}
.dash-movimientos-lista::-webkit-scrollbar { width: 4px; }
.dash-movimientos-lista::-webkit-scrollbar-track { background: transparent; }
.dash-movimientos-lista::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.25); border-radius: 4px; }
.dash-movimientos-lista::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.4); }
.dash-mov-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(14, 25, 44, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dash-mov-item:hover {
    background: rgba(18, 32, 56, 0.9);
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.dash-mov-item .mov-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.dash-mov-item .mov-desc { color: #f1f5f9; font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-mov-item .mov-fecha { color: #64748b; font-size: 0.72rem; font-weight: 500; }
.dash-mov-item .mov-tipo {
    font-size: 0.70rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    width: fit-content;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.dash-mov-item .mov-tipo.tipo-ingreso { background: rgba(34,197,94,0.12); color: #34d399; border-color: rgba(34,197,94,0.22); }
.dash-mov-item .mov-tipo.tipo-gasto { background: rgba(239,68,68,0.12); color: #f87171; border-color: rgba(239,68,68,0.22); }
.dash-mov-item .mov-tipo.tipo-pago-min,
.dash-mov-item .mov-tipo.tipo-pago_tc,
.dash-mov-item .mov-tipo.tipo-compra_tc,
.dash-mov-item .mov-tipo.tipo-pago_deuda,
.dash-mov-item .mov-tipo.tipo-cargo_deuda { background: rgba(249,115,22,0.12); color: #fb923c; border-color: rgba(249,115,22,0.22); }
.dash-mov-item .mov-monto { font-weight: 800; font-size: 0.98rem; white-space: nowrap; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #ffffff !important; }
.dash-mov-item .mov-monto.ingreso { color: #ffffff !important; }
.dash-mov-item .mov-monto.gasto { color: #ffffff !important; }
.dash-mov-item .mov-monto.pago-min { color: #ffffff !important; }
.mov-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 16px;
    margin-right: 12px;
    flex-shrink: 0;
    transition: transform 0.18s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.dash-mov-item:hover .mov-icon { transform: scale(1.08); }


/* Month filter — sticks directly above bottom nav */
.dash-month-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(15,23,42,0.95), rgba(15,23,42,0.98));
    border-top: 1px solid rgba(71,85,105,0.3);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    /* A la medida del contenido, igual que las barras de arriba y abajo. */
    width: calc(100% - var(--page-mx) * 2);
    max-width: 1200px;
    margin-inline: auto;
    border-left: 1px solid rgba(71,85,105,0.3);
    border-right: 1px solid rgba(71,85,105,0.3);
    border-radius: 14px 14px 0 0;
    z-index: 1399;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Calendar picker dark theme */
input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}
input[type="month"] {
    color-scheme: dark;
}
/* Las flechas llevan un galon dibujado, no un caracter de texto: ese lo pinta
   cada sistema a su manera y en varios sale como emoji de color. */
.dash-month-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.08));
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 10px;
    color: #93c5fd;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
}
.dash-month-arrow:hover {
    background: rgba(59,130,246,0.3);
    border-color: rgba(96,165,250,0.55);
    color: #dbeafe;
    transform: scale(1.06);
}
.dash-month-arrow:active { transform: scale(0.94); }
.dash-month-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #e2e8f0;
    font-size: 0.97rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    min-width: 168px;
    padding: 7px 14px;
    background: rgba(59,130,246,0.10);
    border: 1px solid rgba(59,130,246,0.22);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s, border-color 0.18s;
}
.dash-month-label:hover {
    background: rgba(59,130,246,0.2);
    border-color: rgba(96,165,250,0.5);
}
.dash-month-label svg { color: #93c5fd; flex: none; }

/* INDICADOR CAMBIO */
.card-indicator {
    font-size: 12px;
    color: #22c55e;
    margin-top: 6px;
    position: relative;
    z-index: 1;
}
.card-indicator.negativo {
    color: #ef4444;
}

/* PANEL */
.panel {
    margin-bottom: 40px;
}

/* SECTION MEJORADO */
.section {
    margin-bottom: var(--section-mb);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.section h2 {
    margin-top: 40px;
    margin-bottom: 20px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    color: #F1F5F9;
    transition: all 0.3s ease;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(59,130,246,0.15);
    position: relative;
    display: inline-block;
}

.section h2::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    transition: width 0.3s ease;
}

.section h2:hover {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

.section h2:hover::after {
    width: 100%;
}

/* TABLA MEJORADA — GLASSMORPHIC */
table {
    width: 100%;
    min-width: 460px;
    border-collapse: separate;
    border-spacing: 0;
    background: #1A2A3F;
    border-radius: var(--table-r);
    overflow: hidden;
    margin-bottom: var(--section-mb);
    box-shadow:
        0 6px 18px rgba(30,120,129,0.06),
        0 8px 24px rgba(0,0,0,0.30);
    border: 1px solid rgba(59,130,246,0.13);
}

thead {
    background: linear-gradient(135deg, #1E7E8F 0%, #37C9BF 100%);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
}

th {
    padding: var(--th-py) var(--th-px);
    text-align: left;
    font-weight: 700;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

td {
    padding: var(--td-py) var(--td-px);
    border-top: 1px solid rgba(255,255,255,0.03);
    font-size: 14px;
    color: #cbd5e1;
    transition: all 0.2s ease;
}

tbody tr {
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.01);
}

tbody tr:hover {
    background: rgba(59,130,246,0.12);
    box-shadow: inset 4px 0 0 #3b82f6;
}

tbody tr:hover td {
    color: white;
}

tbody tr:last-child td {
    border-bottom: none;
}

/* ─── FILAS EXPANDIBLES ─── */
.tabla-expandible {
    border-collapse: separate;
    border-spacing: 0;
}

.fila-expandible {
    cursor: pointer;
    user-select: none;
}

.fila-expandible:hover {
    background: rgba(59,130,246,0.15) !important;
}

.fila-expandida {
    background: rgba(59,130,246,0.08) !important;
    border-bottom: none;
}

.fila-expandida td {
    color: white !important;
    border-bottom: none !important;
}

.td-expand {
    width: 36px;
    text-align: center;
    padding: 12px 8px !important;
}

.expand-icon {
    font-size: 10px;
    color: #64748b;
    transition: all 0.3s ease;
    display: inline-block;
}

.fila-expandida .expand-icon {
    color: #3b82f6;
}

.fila-detalle {
    background: rgba(15, 23, 42, 0.6) !important;
}

.fila-detalle:hover {
    background: rgba(15, 23, 42, 0.6) !important;
    box-shadow: none !important;
}

.td-detalle {
    padding: 0 !important;
    border-top: none !important;
}

.detalle-movimientos {
    padding: 12px 20px 16px 44px;
    animation: slideDown 0.25s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.detalle-cargando, .detalle-vacio {
    color: #64748b;
    font-size: 13px;
    padding: 16px 0;
    text-align: center;
    font-style: italic;
}

.tabla-detalle {
    width: 100%;
    border-collapse: collapse;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0;
    box-shadow: inset 0 0 0 1px rgba(59,130,246,0.1);
    border: none;
}

.tabla-detalle thead {
    background: rgba(59,130,246,0.12);
}

.tabla-detalle th {
    padding: 10px 14px;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    border-bottom: 1px solid rgba(59,130,246,0.1);
}

.tabla-detalle td {
    padding: 10px 14px;
    font-size: 13px;
    color: #cbd5e1;
    border-top: 1px solid rgba(255,255,255,0.03);
}

.tabla-detalle tbody tr:hover {
    background: rgba(59,130,246,0.06);
    box-shadow: none;
}

/* ─── MINI BARRA DE PROGRESO ─── */
.saldo-con-progreso {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mini-progreso {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
}

.mini-progreso-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* MONTH FILTER BAR */
.month-filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* Centrado y estrecho: es un control, no una seccion. */
    width: 100%;
    max-width: 420px;
    margin: 14px auto;
    padding: 10px 18px;
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.15);
    border-radius: 12px;
}
.month-filter-arrow {
    background: rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.22);
    color: #93c5fd;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.month-filter-arrow:hover {
    background: rgba(59,130,246,0.3);
    border-color: rgba(96,165,250,0.5);
    color: #dbeafe;
    transform: scale(1.08);
}
.month-filter-arrow:active { transform: scale(0.94); }
.month-filter-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #bfdbfe;
    font-weight: 700;
    font-size: 15px;
    font-family: inherit;
    min-width: 168px;
    cursor: pointer;
    padding: 7px 14px;
    background: rgba(59,130,246,0.10);
    border: 1px solid rgba(59,130,246,0.22);
    border-radius: 9px;
    transition: background 0.18s, border-color 0.18s;
}
.month-filter-label:hover {
    background: rgba(59,130,246,0.22);
    border-color: rgba(96,165,250,0.5);
}
.month-filter-label svg { color: #93c5fd; flex: none; }

/* BOTONES TABLA */
.btn-editar,
.btn-eliminar,
.btn-duplicar {
    padding: 8px 14px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: all 0.2s ease;
    margin-right: 6px;
    position: relative;
    overflow: hidden;
    min-width: 40px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}

.btn-editar::before,
.btn-eliminar::before,
.btn-duplicar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.2);
    transition: left 0.3s ease;
    z-index: -1;
}

.btn-editar:hover::before,
.btn-eliminar:hover::before,
.btn-duplicar:hover::before {
    left: 0;
}

.btn-editar {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}

.btn-editar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(59,130,246,0.5);
}

.btn-duplicar {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    box-shadow: 0 4px 12px rgba(34,197,94,0.3);
}

.btn-duplicar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(34,197,94,0.5);
}

.btn-eliminar {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 12px rgba(239,68,68,0.3);
}

.btn-eliminar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(239,68,68,0.5);
}

.acciones {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* 🔵 BOTONES PRINCIPALES — QUICK-ACTION GRID (mobile-style) */
.botones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 24px 0 48px 0;
}

.campo {
    margin-bottom: 18px;
}

.btn-main {
    background: transparent;
    color: #22C55E;
    border: 1px solid rgba(34,197,94,0.3);
    padding: 18px 12px;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.btn-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(34,197,94,0.08);
    z-index: -1;
    transition: background 0.2s;
}

.btn-main:hover::before {
    background: rgba(34,197,94,0.15);
}

.btn-main:hover {
    transform: translateY(-2px);
    border-color: rgba(34,197,94,0.5);
}

.btn-main:active {
    transform: translateY(0);
}

/* Color variants for quick-action buttons */
.btn-main.btn-ingreso { color: #22C55E; border-color: rgba(34,197,94,0.3); }
.btn-main.btn-ingreso::before { background: rgba(34,197,94,0.08); }
.btn-main.btn-ingreso:hover { border-color: rgba(34,197,94,0.5); }
.btn-main.btn-ingreso:hover::before { background: rgba(34,197,94,0.15); }

.btn-main.btn-gasto { color: #EF4444; border-color: rgba(239,68,68,0.3); }
.btn-main.btn-gasto::before { background: rgba(239,68,68,0.08); }
.btn-main.btn-gasto:hover { border-color: rgba(239,68,68,0.5); }
.btn-main.btn-gasto:hover::before { background: rgba(239,68,68,0.15); }

.btn-main.btn-deuda { color: #F59E0B; border-color: rgba(245,158,11,0.3); }
.btn-main.btn-deuda::before { background: rgba(245,158,11,0.08); }
.btn-main.btn-deuda:hover { border-color: rgba(245,158,11,0.5); }
.btn-main.btn-deuda:hover::before { background: rgba(245,158,11,0.15); }

.btn-main-tc {
    color: #3B82F6 !important;
    border-color: rgba(59,130,246,0.3) !important;
}
.btn-main-tc::before {
    background: rgba(59,130,246,0.08) !important;
}
.btn-main-tc:hover {
    border-color: rgba(59,130,246,0.5) !important;
}
.btn-main-tc:hover::before {
    background: rgba(59,130,246,0.15) !important;
}

/* 🔵 CONVERSIÓN DE TASAS */


/* ═══════════════════════════════════════════
   CONVERSOR DE TASAS (MEJORADO)
   ═══════════════════════════════════════════ */

#vista-tasas.activa {
    display: flex;
    flex-direction: column;
}

/* Hero */
.tasas-hero {
    text-align: center;
    padding: 20px 10px 6px;
    flex-shrink: 0;
}
.tasas-hero-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 6px;
}
.tasas-hero h2 {
    margin: 0 0 4px;
    font-size: 20px;
    color: #f1f5f9;
}
.tasas-subtitle {
    color: #94a3b8;
    font-size: 12px;
    margin: 0;
}

/* Tabs */
.tasas-tabs {
    display: flex;
    gap: 6px;
    margin: 18px 0 14px;
    flex-shrink: 0;
}
.tasas-tab {
    flex: 1;
    padding: 10px 8px;
    background: rgba(59,130,246,0.06);
    border: 1.5px solid rgba(59,130,246,0.15);
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
    text-align: center;
}
.tasas-tab:hover {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.3);
    color: #cbd5e1;
}
.tasas-tab.activo {
    background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(59,130,246,0.1));
    border-color: #3b82f6;
    color: #f1f5f9;
    box-shadow: 0 4px 12px rgba(59,130,246,0.15);
}

/* Panel */
.tasa-panel {
    display: none;
}
.tasa-panel.activa {
    display: block;
}

/* Card v2 */
.tasa-card-v2 {
    background: rgba(15,40,71,0.4);
    border: 1px solid rgba(59,130,246,0.12);
    border-radius: 12px;
    padding: 18px 16px;
}

.tasa-field {
    margin-bottom: 14px;
}
.tasa-field label {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: 6px;
}
.tasa-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.tasa-input-wrap input {
    width: 100%;
    padding: 11px 36px 11px 14px;
    border-radius: 8px;
    border: 1px solid rgba(59,130,246,0.2);
    background: #0f1f2f;
    color: #f1f5f9;
    font-size: 14px;
    box-sizing: border-box;
}
.tasa-input-wrap input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.tasa-suffix {
    position: absolute;
    right: 12px;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
}

.tasa-card-v2 select {
    width: 100%;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid rgba(59,130,246,0.2);
    background: #0f1f2f;
    color: #f1f5f9;
    font-size: 13px;
    cursor: pointer;
    box-sizing: border-box;
}
.tasa-card-v2 select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

/* Resultado v2 */
.tasa-resultado-box {
    margin-top: 18px;
    background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(59,130,246,0.06));
    border: 1.5px solid rgba(34,197,94,0.25);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}
.tasa-resultado-label {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.tasa-resultado-valor {
    font-size: 32px;
    font-weight: 800;
    color: #4ade80;
    letter-spacing: -0.5px;
}

/* Info educativa */
.tasas-info {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.tasas-info-item {
    background: rgba(15,31,47,0.5);
    border: 1px solid rgba(59,130,246,0.08);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.5;
}
.tasas-info-item strong {
    color: #cbd5e1;
}

#vista-tasas {
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 rgba(255,255,255,0.05);
}
#vista-tasas::-webkit-scrollbar { width: 6px; }
#vista-tasas::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 10px; }
#vista-tasas::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 10px; }
#vista-tasas::-webkit-scrollbar-thumb:hover { background: #2563eb; }

/* Legacy .tasa-card and .resultado kept for backward compat */
.tasa-card { display: none; }
.resultado { display: none; }

/* ═══════════════════════════════════════════
   BANCOS (MEJORADO)
   ═══════════════════════════════════════════ */

#vista-bancos.activa {
    display: flex;
    flex-direction: column;
}

/* Hero */
.bancos-hero {
    text-align: center;
    padding: 20px 10px 6px;
    flex-shrink: 0;
}
.bancos-hero-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 6px;
}
.bancos-hero h2 {
    margin: 0 0 4px;
    font-size: 20px;
    color: #f1f5f9;
}
.bancos-subtitle {
    color: #94a3b8;
    font-size: 12px;
    margin: 0;
}

/* Add section */
.bancos-add-section {
    margin-top: 18px;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.bancos-input-row {
    display: flex;
    gap: 8px;
}
.bancos-input-row input {
    flex: 1;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid rgba(59,130,246,0.2);
    background: #0f1f2f;
    color: #f1f5f9;
    font-size: 13px;
    box-sizing: border-box;
}
.bancos-input-row input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.bancos-input-row button {
    padding: 11px 18px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(59,130,246,0.2);
}
.bancos-input-row button:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59,130,246,0.3);
}

/* Count */
.bancos-count {
    font-size: 11px;
    color: #64748b;
    text-align: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}

/* Lista */
.bancos-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 rgba(255,255,255,0.05);
}
.bancos-lista::-webkit-scrollbar { width: 6px; }
.bancos-lista::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 10px; }
.bancos-lista::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 10px; }

/* Banco item mejorado */
.banco-item {
    background: rgba(15,40,71,0.4);
    border: 1px solid rgba(59,130,246,0.12);
    padding: 14px 16px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.banco-item .banco-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.banco-item .banco-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(59,130,246,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.banco-item:hover {
    background: rgba(15,40,71,0.7);
    border-color: rgba(59,130,246,0.3);
    transform: translateX(3px);
}

.banco-item .btn-banco-del {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.2);
    color: #f87171;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.banco-item .btn-banco-del:hover {
    background: rgba(239,68,68,0.2);
    border-color: #ef4444;
    color: #ef4444;
    transform: scale(1.1);
}

#listaBancosPanel {
    list-style: none;
    padding: 0;
}

/* ============ MODALES ============ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal.activo {
    display: flex;
}

.modal-content {
    background: #1A2A3F;
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 20px;

    padding: 25px 30px;
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;

    box-shadow: 
        0 25px 80px rgba(0,0,0,0.6),
        0 0 0 1px rgba(59,130,246,0.08);

    animation: modalIn 0.25s ease;

    scrollbar-width: thin;
    scrollbar-color: #3b82f6 transparent;
}

.modal-content::-webkit-scrollbar {
    width: 6px;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
    background: rgba(59,130,246,0.4);
    border-radius: 3px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #3b82f6;
}

.modal-content h3 {
    margin-bottom: 14px;
}

@keyframes modalIn {
    from {
        transform: translateY(-40px) scale(0.96);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-content input,
.modal-content select {
    width: 100%;
    padding: 12px 14px;

    border-radius: 14px;
    border: 1px solid rgba(59,130,246,0.15);

    background: #162038;
    color: #F1F5F9;

    font-size: 14px;
    margin-top: 5px;
}

.modal-content input:focus,
.modal-content select:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.campo label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 0.5px;
}



.modal-content h2 {
    color: white;
    margin-bottom: 30px;
    font-size: 24px;
}

.form-group {
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    background: #162038;
    border: 1px solid rgba(59,130,246,0.15);
    border-radius: 14px;
    color: #F1F5F9;
    font-size: 14px;
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.form-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.btn-guardar,
.btn-cancelar {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.btn-guardar {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    border-radius: 14px;
    height: 48px;
    box-shadow: 0 4px 12px rgba(34,197,94,0.3);
}

.btn-guardar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(34,197,94,0.5);
}

.btn-cancelar {
    background: transparent;
    color: #94a3b8;
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 14px;
    height: 48px;
    box-shadow: none;
}

.btn-cancelar:hover {
    background: rgba(148,163,184,0.08);
    color: #F1F5F9;
}

/* ============ INPUT ROW PARA BANCOS Y TIPOS ============ */
.input-row {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
}

.input-row input {
    flex: 1;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(59,130,246,0.2);
    background: #0f1f2f;
    color: white;
    transition: all 0.2s ease;
}

.input-row input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.input-row button {
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    background: #3b82f6;
    color: white;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.input-row button:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}

/* ============ BTN MINI PARA AGREGAR TIPOS ============ */
.btn-mini {
    padding: 8px 12px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    width: auto;
    margin-top: 8px;
}

.btn-mini:hover {
    background: #2563eb;
    transform: scale(1.05);
}

/* ============ TIPO GRUPO ============ */
.tipo-grupo {
    display: flex;
    gap: 8px;
}

.tipo-grupo select {
    flex: 1;
}

/* ============ LISTA DE BANCOS ============ */
#listaBancosPanel {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.banco-item {
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.2);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #cbd5e1;
    transition: all 0.2s ease;
}

.banco-item:hover {
    background: rgba(59,130,246,0.15);
    border-color: #3b82f6;
}

.banco-item button {
    background: #ef4444;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.banco-item button:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.panel-vista {
    display: none;
}

.panel-vista.activa {
    display: block;
}

.panel-contenido {
    margin-top: 20px;
}

.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 900;
}

.overlay.activo {
    opacity: 1;
    pointer-events: all;
}

/* Base: hidden, no old right-slide animations */
.overlay-sidebar {
    position: fixed;
    background: #060B14;
    display: flex;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
}

.overlay-sidebar.activa {
    opacity: 1;
    pointer-events: auto;
}

/* ── Estadisticas y Perfil ──
   Las medidas y la animacion salen del bloque comun de los paneles de la barra;
   aqui solo queda lo suyo. */
.overlay-sidebar.mode-bottom {
    flex-direction: column;
}
.overlay-sidebar.mode-bottom::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    margin: 14px auto 4px;
    flex-shrink: 0;
}
.overlay-sidebar.mode-bottom .sidebar-menu {
    display: none;
}
.overlay-sidebar.mode-bottom .sidebar-content {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    transition: none;
}
.overlay-sidebar.mode-bottom .sidebar-content,
.overlay-sidebar.mode-bottom .sidebar-content.activa {
    width: 100%;
    /* El panel mide lo que la barra, pero un formulario de perfil estirado a
       1200px no se lee. La columna comoda se consigue con relleno y no con
       max-width: con max-width, quien se estrechaba era el marco que lleva la
       barra de desplazamiento, y esta acababa a 150px del borde del panel en
       vez de pegada a el. Asi el marco llega al borde y el texto no. */
    max-width: none;
    margin-inline: 0;
    padding: 12px max(20px, calc((100% - 900px) / 2)) 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
}

/* La X vuelve a la esquina del panel.
   Iba anclada a la vista, que vive dentro de la columna de texto, asi que se
   quedaba a 192px del borde. Anclada al panel se queda en su esquina y ademas
   no se va con el desplazamiento. */
.overlay-sidebar.mode-bottom .vista {
    position: static;
}
.overlay-sidebar.mode-bottom .vista-close-x,
.overlay-sidebar.mode-bottom #vista-dashboard .vista-close-x {
    top: 12px;
    right: 14px;
}

/* La barra de desplazamiento de los paneles: fina y del color del panel, para
   que se vea que pertenece a el y no al contenido. */
.nav-panel::-webkit-scrollbar,
.overlay-sidebar.mode-bottom .sidebar-content::-webkit-scrollbar {
    width: 10px;
}
.nav-panel::-webkit-scrollbar-track,
.overlay-sidebar.mode-bottom .sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}
.nav-panel::-webkit-scrollbar-thumb,
.overlay-sidebar.mode-bottom .sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.32);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
.nav-panel::-webkit-scrollbar-thumb:hover,
.overlay-sidebar.mode-bottom .sidebar-content::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.55);
    background-clip: content-box;
}
.nav-panel,
.overlay-sidebar.mode-bottom .sidebar-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

/* Sidebar menu hidden — only bottom-sheet mode used */
.sidebar-menu {
    display: none;
}

.sidebar-menu-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #93c5fd;
    padding: 4px 2px 8px;
    text-align: left;
    margin-top: 6px;
    margin-bottom: 6px;
}

.sidebar-menu::-webkit-scrollbar {
    width: 6px;
}

.sidebar-menu::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(59,130,246,0.3);
    border-radius: 3px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: #3b82f6;
}

.sidebar-menu button {
    background: rgba(26, 42, 63, 0.7);
    border: 1px solid rgba(59,130,246,0.13);
    color: #CBD5E1;
    text-align: left;
    padding: 12px 14px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: normal;
    line-height: 1.35;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 52px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.sidebar-menu button:hover {
    background: rgba(37,99,235,0.25);
    border-color: rgba(96,165,250,0.95);
    color: white;
    transform: translateX(-2px);
}

.sidebar-menu button.activo {
    background: linear-gradient(135deg, rgba(59,130,246,0.45), rgba(37,99,235,0.3));
    border-color: #60a5fa;
    color: white;
    box-shadow: inset 0 0 12px rgba(59,130,246,0.25), 0 6px 18px rgba(37,99,235,0.25);
}

/* Sidebar content — no width animation */
.sidebar-content {
    flex: 1;
    overflow: hidden;
}

.sidebar-content.activa {
    overflow-y: auto;
    padding: 25px 20px;
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 rgba(59,130,246,0.1);
}

.sidebar-content.activa::-webkit-scrollbar {
    width: 6px;
}

.sidebar-content.activa::-webkit-scrollbar-track {
    background: rgba(59,130,246,0.05);
}

.sidebar-content.activa::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 3px;
}

.sidebar-content.activa::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}

.vista {
    display: none;
}

.vista.activa {
    display: block;
}

.vista h2 {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

/* ── Vista / Sheet X close button ── */
.vista-close-x {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.25);
    color: #ef4444;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 2;
    padding: 4px 10px;
    line-height: 1;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.vista-close-x:hover {
    background: rgba(239,68,68,0.22);
    color: #f87171;
    border-color: rgba(239,68,68,0.4);
}
/* Dashboard vista: X a bit higher */
#vista-dashboard .vista-close-x {
    top: 4px;
}
/* Tools sheet: X a bit lower */
.tools-sheet .vista-close-x {
    top: 16px;
}

/* btn-sidebar removed — no longer used */

/* ============ NORMALIZACIÓN SELECT CROSS-BROWSER ============ */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px !important;
    cursor: pointer;
}

/* ============ DASHBOARD COMPLETA ============ */
.dashboard-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.dashboard-charts .chart-card:first-child {
    grid-column: 1 / -1;
}

.chart-card {
    background: linear-gradient(160deg, rgba(12, 25, 48, 0.95), rgba(6, 14, 30, 0.98));
    border: 1px solid rgba(79,143,234,0.12);
    border-radius: 12px;
    padding: 20px 16px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 2px 16px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.03);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.chart-card:hover {
    border-color: rgba(79,143,234,0.28);
    box-shadow:
        0 4px 24px rgba(79,143,234,0.08),
        0 2px 16px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(79,143,234,0.3), transparent);
}

.chart-card h3 {
    font-size: 11px;
    font-weight: 700;
    color: #8aa8cc;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: system-ui, -apple-system, sans-serif;
}

.chart-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.chart-card-header h3 {
    margin-bottom: 0;
    min-width: 0;
    flex: 1;
}

.chart-filter-control {
    display: flex;
    align-items: center;
    pointer-events: auto;
    z-index: 3;
}

.chart-filter-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid rgba(79,143,234,0.3);
    border-radius: 10px;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(10, 17, 34, 0.96));
    color: #c8d6e5;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 28px 6px 10px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2393c5fd' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}

.chart-filter-select:hover,
.chart-filter-select:focus {
    border-color: rgba(79,143,234,0.55);
    box-shadow: 0 0 0 2px rgba(79,143,234,0.15);
}

.chart-filter-select option {
    color: #d0d8e4;
    background: #0f1f2f;
}

.chart-card h3::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #4f8fea;
    box-shadow: 0 0 6px rgba(79,143,234,0.5);
    flex-shrink: 0;
}

.chart-card canvas {
    width: 100% !important;
    max-width: 100%;
}

.sim-chart-fixed {
    cursor: pointer;
}

.sim-chart-fixed:hover {
    border-color: rgba(79,143,234,0.5);
}

.sim-chart-wrap {
    height: 280px;
    overflow: hidden;
    position: relative;
}

.sim-chart-wrap canvas {
    height: 100% !important;
}

.sim-chart-modal {
    max-width: 90vw !important;
    width: 90vw !important;
    max-height: 85vh !important;
    padding: 20px 24px 24px !important;
}

.sim-chart-modal canvas {
    width: 100% !important;
    height: 65vh !important;
}

.btn-cerrar-modal {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #ef4444;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.btn-cerrar-modal:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    transform: scale(1.1);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.25);
}

.btn-cerrar-modal:active {
    transform: scale(0.95);
}

.chart-card .chart-wrapper {
    position: relative;
    width: 100%;
}

.chart-card .dashboard-chart-wrap {
    min-height: 220px;
}

.chart-card .dashboard-chart-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: 100%;
}

/* ─── RESUMEN RÁPIDO DASHBOARD ─── */
.dash-resumen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.dash-resumen-item {
    background: linear-gradient(160deg, rgba(12, 25, 48, 0.92), rgba(6, 14, 30, 0.96));
    border: 1px solid rgba(79,143,234,0.1);
    border-radius: 10px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: border-color 0.3s ease, transform 0.2s ease;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.dash-resumen-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(79,143,234,0.15), transparent);
}

.dash-resumen-item:hover {
    border-color: rgba(79,143,234,0.28);
    transform: translateY(-1px);
}

.dash-resumen-label {
    font-size: 9px;
    font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: system-ui, -apple-system, sans-serif;
}

.dash-resumen-valor {
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace;
    letter-spacing: -0.5px;
    cursor: default;
}

.dash-resumen-valor.verde { color: #26c6a0; text-shadow: 0 0 12px rgba(38,198,160,0.2); }
.dash-resumen-valor.rojo { color: #e05565; text-shadow: 0 0 12px rgba(224,85,101,0.2); }
.dash-resumen-valor.amarillo { color: #e8a838; text-shadow: 0 0 12px rgba(232,168,56,0.2); }
.dash-resumen-valor.azul { color: #4f8fea; text-shadow: 0 0 12px rgba(79,143,234,0.2); }

@media (min-width: 900px) {
    .dash-resumen {
        grid-template-columns: repeat(4, 1fr);
    }
    .dash-resumen-valor {
        font-size: 22px;
    }
    .dash-resumen-label {
        font-size: 10px;
    }
    .dashboard-charts {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .chart-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .chart-filter-control {
        justify-content: flex-end;
    }

    .dashboard-chart-wrap[style*="height:380px"] {
        height: 320px !important;
    }

    .dashboard-chart-wrap[style*="height:300px"] {
        height: 260px !important;
    }

    .dashboard-chart-wrap[style*="height:280px"] {
        height: 240px !important;
    }
}

/* ============ SIMULADOR DE PAGOS ============ */
.sim-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.sim-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sim-group label {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.sim-group input,
.sim-group select {
    padding: 10px 12px;
    background: #0f1f2f;
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sim-group input:focus,
.sim-group select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

.btn-simular {
    grid-column: 1 / -1;
    padding: 14px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(59,130,246,0.35);
    margin-top: 4px;
}

.btn-simular:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(59,130,246,0.5);
}

.btn-simular:active {
    transform: translateY(0);
}

.sim-botones {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.sim-botones .btn-simular {
    flex: 1;
    grid-column: auto;
    margin-top: 0;
}

.btn-limpiar {
    padding: 14px 28px;
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.btn-limpiar:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
}

.btn-limpiar:active {
    transform: translateY(0);
}

/* Grupo full width */
.sim-group-full {
    grid-column: 1 / -1;
}

/* FRECH toggle */
.sim-frech-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.sim-frech-label {
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
}

.sim-frech-label small {
    color: #64748b;
    font-weight: 400;
}

/* Toggle switch */
.sim-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.sim-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sim-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 24px;
    transition: background 0.3s;
}

.sim-switch-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #94a3b8;
    border-radius: 50%;
    transition: transform 0.3s, background 0.3s;
}

.sim-switch input:checked + .sim-switch-slider {
    background: rgba(34, 197, 94, 0.4);
}

.sim-switch input:checked + .sim-switch-slider::before {
    transform: translateX(20px);
    background: #22c55e;
}

/* FRECH panel */
.sim-frech-panel {
    grid-column: 1 / -1;
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0.02));
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 12px;
    padding: 16px;
    animation: frechSlideIn 0.3s ease;
}

@keyframes frechSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.sim-frech-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 14px;
    line-height: 1.5;
    flex-wrap: wrap;
}

.sim-frech-badge {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    font-size: 9px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 5px;
    letter-spacing: 0.8px;
    flex-shrink: 0;
    white-space: nowrap;
}

.sim-frech-fields {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 12px;
}

.sim-frech-fields .sim-group {
    min-width: 0;
}

.sim-frech-fields .sim-group input,
.sim-frech-fields .sim-group select {
    width: 100%;
    box-sizing: border-box;
}

/* Fechas info */
.sim-fechas-info {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sim-fecha-item {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(145deg, rgba(15, 31, 55, 0.9), rgba(10, 20, 40, 0.95));
    border: 1px solid rgba(59,130,246,0.15);
    border-radius: 12px;
    padding: 14px 16px;
}

.sim-fecha-item.sim-fecha-highlight {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.08), rgba(10, 20, 40, 0.95));
}

.sim-fecha-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.sim-fecha-label {
    display: block;
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 3px;
}

.sim-fecha-value {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
    text-transform: capitalize;
}

.sim-fecha-highlight .sim-fecha-value {
    color: #22c55e;
}

/* Tabla fecha col */
.sim-tabla-fecha {
    text-transform: capitalize;
    white-space: nowrap;
    font-size: 12px;
    color: #94a3b8;
}

/* FRECH resumen */
.sim-frech-resumen {
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.08), rgba(16, 185, 129, 0.04));
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.sim-frech-resumen h3 {
    font-size: 14px;
    color: #22c55e;
    margin-bottom: 12px;
    font-weight: 700;
}

.sim-frech-resumen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.sim-frech-resumen-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.sim-frech-resumen-label {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.sim-frech-resumen-value {
    font-size: 17px;
    font-weight: 700;
    color: #22c55e;
}

.sim-frech-resumen-value.sim-frech-post {
    color: #f59e0b;
}

/* Meses abono - header */
.sim-meses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.sim-meses-header label {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.sim-meses-actions {
    display: flex;
    gap: 6px;
}

.sim-meses-action-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: 6px;
    background: rgba(59,130,246,0.1);
    color: #93c5fd;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.sim-meses-action-btn:hover {
    background: rgba(59,130,246,0.25);
    border-color: #3b82f6;
}

/* Intervalos rápidos */
.sim-intervalos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(15, 31, 55, 0.6);
    border: 1px solid rgba(59,130,246,0.12);
    border-radius: 10px;
}

.sim-intervalo-btn {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    background: rgba(139, 92, 246, 0.08);
    color: #c4b5fd;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}

.sim-intervalo-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-1px);
}

.sim-intervalo-btn.activo {
    background: rgba(139, 92, 246, 0.5);
    border-color: #8b5cf6;
    color: #fff;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}

.sim-intervalo-btn.sim-intervalo-rango {
    border-color: rgba(234, 179, 8, 0.3);
    background: rgba(234, 179, 8, 0.08);
    color: #fde68a;
}

.sim-intervalo-btn.sim-intervalo-rango:hover {
    background: rgba(234, 179, 8, 0.2);
    border-color: rgba(234, 179, 8, 0.5);
}

.sim-intervalo-btn.sim-intervalo-rango.activo {
    background: rgba(234, 179, 8, 0.45);
    border-color: #eab308;
    color: #fff;
    box-shadow: 0 2px 10px rgba(234, 179, 8, 0.3);
}

.sim-intervalo-sep {
    color: rgba(255,255,255,0.15);
    line-height: 28px;
    font-size: 14px;
    margin: 0 2px;
}

/* Meses grid con grupos por año */
.sim-meses-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sim-meses-year-group {
    background: rgba(15, 31, 55, 0.4);
    border: 1px solid rgba(59,130,246,0.1);
    border-radius: 10px;
    padding: 10px 12px;
}

.sim-meses-year-label {
    font-size: 11px;
    font-weight: 700;
    color: #8b5cf6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-left: 2px;
}

.sim-meses-year-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sim-mes-btn {
    width: 40px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sim-mes-btn:hover {
    background: rgba(59,130,246,0.15);
    border-color: rgba(59,130,246,0.4);
    color: #e2e8f0;
}

.sim-mes-btn.activo {
    background: linear-gradient(135deg, rgba(59,130,246,0.5), rgba(99,102,241,0.5));
    border-color: #3b82f6;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 8px rgba(59,130,246,0.25);
}

/* Contador de meses */
.sim-meses-counter {
    text-align: right;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    margin-top: 8px;
    padding-right: 4px;
}

.sim-meses-counter span {
    color: #3b82f6;
    font-weight: 700;
}

/* Resumen */
.sim-resumen {
    margin-bottom: 20px;
}

.sim-resumen-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.sim-stat {
    background: linear-gradient(145deg, rgba(15, 31, 55, 0.9), rgba(10, 20, 40, 0.95));
    border: 1px solid rgba(59,130,246,0.18);
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

.sim-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sim-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #e2e8f0;
}

/* Comparación ahorro */
.sim-comparacion {
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 12px;
    padding: 18px;
}

.sim-comparacion h3 {
    font-size: 14px;
    color: #22c55e;
    margin-bottom: 14px;
    font-weight: 700;
}

.sim-ahorro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.sim-ahorro-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.sim-ahorro-label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
}

.sim-ahorro-value {
    font-size: 18px;
    font-weight: 700;
    color: #22c55e;
}

/* Tabla amortización */
.sim-tabla-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 12px;
}

.sim-tabla-title {
    font-size: 14px;
    font-weight: 700;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0;
}

.sim-export-btns {
    display: flex;
    gap: 8px;
}

.sim-export-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.sim-export-pdf {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.sim-export-pdf:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(239, 68, 68, 0.2);
}

.sim-export-xlsx {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.sim-export-xlsx:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: #22c55e;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(34, 197, 94, 0.2);
}

.sim-tabla-scroll {
    max-height: 400px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid rgba(59,130,246,0.18);
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 transparent;
}

.sim-tabla-scroll::-webkit-scrollbar {
    width: 6px;
}

.sim-tabla-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sim-tabla-scroll::-webkit-scrollbar-thumb {
    background: rgba(59,130,246,0.4);
    border-radius: 3px;
}

.sim-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sim-tabla thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.sim-tabla thead th {
    background: linear-gradient(135deg, #1a2a4a, #162040);
    color: #93c5fd;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 10px;
    text-align: right;
    border-bottom: 1px solid rgba(59,130,246,0.25);
}

.sim-tabla thead th:first-child {
    text-align: center;
    border-radius: 10px 0 0 0;
}

.sim-tabla thead th:last-child {
    border-radius: 0 10px 0 0;
}

.sim-tabla tbody td {
    padding: 10px 10px;
    text-align: right;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(59,130,246,0.06);
    font-variant-numeric: tabular-nums;
}

.sim-tabla tbody td:first-child {
    text-align: center;
    color: #64748b;
    font-weight: 600;
}

.sim-tabla tbody tr:hover td {
    background: rgba(59,130,246,0.06);
}

.sim-tabla tbody tr:last-child td:first-child {
    border-radius: 0 0 0 10px;
}

.sim-tabla tbody tr:last-child td:last-child {
    border-radius: 0 0 10px 0;
}

/* ============ MOVIMIENTOS ============ */

.mov-selector {
    margin-bottom: 16px;
}

.mov-selector label {
    display: block;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mov-selector select {
    width: 100%;
    padding: 10px 12px;
    background: #0f1f2f;
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    transition: all 0.2s ease;
}

.mov-selector select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.mov-deuda-info {
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.mov-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.mov-info-row + .mov-info-row {
    border-top: 1px solid rgba(59,130,246,0.1);
}

.mov-info-label {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mov-info-value {
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 500;
}

.mov-info-value.saldo {
    color: #f59e0b;
    font-weight: 700;
    font-size: 16px;
}

.mov-subtitle {
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mov-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.btn-mov-agregar {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
}

.btn-mov-agregar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(34,197,94,0.4);
}

.mov-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: auto;
}

.mov-tabla-wrap {
    overflow-x: auto;
}

.mov-tabla thead th {
    background: rgba(59,130,246,0.15);
    color: #93c5fd;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 11px;
}

.mov-tabla tbody td {
    padding: 8px 10px;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(59,130,246,0.08);
}

.mov-tabla tbody tr:hover {
    background: rgba(59,130,246,0.05);
}

.mov-tipo-abono {
    color: #22c55e;
    font-weight: 600;
}

.mov-tipo-cargo {
    color: #ef4444;
    font-weight: 600;
}

.badge-interes {
    display: inline-block;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px;
    margin-left: 4px;
    vertical-align: middle;
}
.badge-sin-interes {
    display: inline-block;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px;
    margin-left: 4px;
    vertical-align: middle;
}

.mov-fila-totales {
    background: rgba(100, 116, 139, 0.15) !important;
    border-top: 2px solid #475569;
}

.mov-fila-totales td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.btn-mov-eliminar {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-mov-eliminar:hover {
    background: rgba(239,68,68,0.15);
}

.btn-mov-abonar {
    background: none;
    border: none;
    color: #22c55e;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-mov-abonar:hover {
    background: rgba(34,197,94,0.15);
}

/* Panel de acciones inline TC */
.tc-acciones-row td {
    padding: 0 !important;
    border-top: none !important;
}

.tc-acciones-panel {
    display: flex;
    gap: 0;
    background: #1e293b;
    border: 1px solid #334155;
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.tc-accion-btn {
    flex: 1;
    background: none;
    border: none;
    border-right: 1px solid #334155;
    color: #e2e8f0;
    padding: 10px 0;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.tc-accion-btn:last-child {
    border-right: none;
}

.tc-accion-editar:hover {
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
}

.tc-accion-abonar:hover {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
}

.tc-accion-liquidar:hover {
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
}

.tc-accion-ajustar:hover {
    background: rgba(251,191,36,0.15);
    color: #fbbf24;
}

/* Marca una compra cuyo estado fue corregido a mano: sigue avanzando sola,
   pero contando desde el ajuste y no desde la fecha de compra. */
.badge-ajustada {
    display: inline-block;
    background: rgba(251,191,36,0.18);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.35);
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px;
    margin-left: 4px;
    vertical-align: middle;
}

.tc-accion-eliminar:hover {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
}

/* Fila clickable */
.mov-fila-clickable {
    cursor: pointer;
}

.mov-fila-clickable:hover {
    background: rgba(59,130,246,0.08) !important;
}

/* Fila liquidada */
.mov-liquidado td {
    opacity: 0.5;
    text-decoration: line-through;
}

.mov-liquidado td:last-child {
    text-decoration: none;
}

.btn-mov-editar {
    background: none;
    border: none;
    color: #60a5fa;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-mov-editar:hover {
    background: rgba(96,165,250,0.15);
}

/* Inline edit */
.mov-fila-editando {
    background: rgba(59, 130, 246, 0.08) !important;
}
.mov-inline-input {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 4px;
    color: #e2e8f0;
    padding: 4px 6px;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
}
.mov-inline-input:focus {
    outline: none;
    border-color: #3b82f6;
}
.mov-inline-select {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 4px;
    color: #e2e8f0;
    padding: 4px 4px;
    font-size: 12px;
    width: 100%;
    cursor: pointer;
}
.mov-inline-select:focus {
    outline: none;
    border-color: #3b82f6;
}
.mov-inline-monto {
    width: 90px;
}
.mov-inline-actions {
    display: flex;
    gap: 4px;
    white-space: nowrap;
}
.btn-mov-guardar-inline {
    background: none;
    border: none;
    color: #4ade80;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}
.btn-mov-guardar-inline:hover {
    background: rgba(74,222,128,0.15);
}
.btn-mov-cancelar-inline {
    background: none;
    border: none;
    color: #f87171;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}
.btn-mov-cancelar-inline:hover {
    background: rgba(248,113,113,0.15);
}

.mov-sin-datos {
    color: #64748b;
    text-align: center;
    font-size: 13px;
    padding: 20px 0;
    margin: 0;
}

/* ============ MOVIMIENTOS - EXCEL IMPORT ============ */

.mov-excel-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(59,130,246,0.15);
}

.mov-excel-desc {
    color: #64748b;
    font-size: 12px;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.btn-mov-excel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px dashed rgba(59,130,246,0.4);
    background: rgba(59,130,246,0.08);
    color: #93c5fd;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Descargar la plantilla del archivo plano. Mismo cuerpo que el boton de cargar,
   en verde y con borde continuo, para que se lea como la accion previa y no como
   otra forma de subir algo. */
.btn-mov-plantilla {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(34,197,94,0.35);
    background: rgba(34,197,94,0.08);
    color: #86efac;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-mov-plantilla:hover {
    background: rgba(34,197,94,0.16);
    border-color: #22c55e;
    transform: translateY(-1px);
}

.btn-mov-excel:hover {
    background: rgba(59,130,246,0.15);
    border-color: #3b82f6;
    transform: translateY(-1px);
}

.mov-excel-nombre {
    display: block;
    color: #94a3b8;
    font-size: 12px;
    margin-top: 6px;
    font-style: italic;
}

.mov-tabla-detectada {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 8px 14px;
    margin-top: 10px;
}
.mov-tabla-detectada-icon {
    font-size: 20px;
}
.mov-tabla-detectada-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mov-tabla-detectada-titulo {
    color: #93c5fd;
    font-size: 13px;
    font-weight: 600;
}
.mov-tabla-detectada-filas {
    color: #94a3b8;
    font-size: 11px;
}

.mov-mapeo-title {
    color: #93c5fd;
    font-size: 13px;
    font-weight: 600;
    margin: 16px 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mov-mapeo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.mov-header-toggle {
    margin: 6px 0 10px 0;
}
.mov-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 13px;
    cursor: pointer;
}
.mov-toggle-label input[type="checkbox"] {
    accent-color: #3b82f6;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.btn-mov-preview {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 4px;
}

.btn-mov-preview:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59,130,246,0.4);
}

.mov-preview-scroll {
    max-height: 250px;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid rgba(59,130,246,0.15);
    margin-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 rgba(59,130,246,0.1);
}

.mov-preview-actions {
    display: flex;
    gap: 10px;
}

.btn-mov-importar {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-mov-importar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(34,197,94,0.4);
}

.btn-mov-cancelar-import {
    flex: 0.5;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-mov-cancelar-import:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(107,114,128,0.3);
}

/* Import buttons row */
.mov-import-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
}

.btn-mov-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px dashed rgba(239,68,68,0.4);
    background: rgba(239,68,68,0.08);
    color: #fca5a5;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-mov-pdf:hover {
    background: rgba(239,68,68,0.15);
    border-color: #ef4444;
    transform: translateY(-1px);
}

/* Editable tipo select in preview */
.mov-preview-tipo-select {
    background: #0f1f2f;
    color: white;
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.mov-preview-tipo-select:focus {
    outline: none;
    border-color: #3b82f6;
}

/* Historial header with action buttons */
.mov-historial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mov-historial-header .mov-subtitle {
    margin: 0;
}

.mov-historial-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-mov-calcular-intereses {
    padding: 6px 12px;
    border: 1px solid rgba(234,179,8,0.3);
    border-radius: 6px;
    background: rgba(234,179,8,0.1);
    color: #fde047;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-mov-calcular-intereses:hover {
    background: rgba(234,179,8,0.25);
    border-color: #eab308;
    transform: translateY(-1px);
}

.mov-th-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}
.mov-th-sortable:hover {
    color: #93c5fd;
}
.mov-sort-icon {
    font-size: 10px;
    margin-left: 4px;
    color: #60a5fa;
}

.btn-mov-limpiar-todos {
    padding: 6px 12px;
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 6px;
    background: rgba(239,68,68,0.1);
    color: #fca5a5;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-mov-limpiar-todos:hover {
    background: rgba(239,68,68,0.25);
    border-color: #ef4444;
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════
   ASESOR FINANCIERO
   ═══════════════════════════════════════════ */

/* Hero */
.asesor-hero {
    text-align: center;
    padding: 30px 10px 10px;
}
.asesor-hero-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 8px;
}
.asesor-hero h2 {
    margin: 0 0 6px;
    font-size: 22px;
    color: #f1f5f9;
}
.asesor-subtitle {
    color: #94a3b8;
    font-size: 13px;
    margin: 0;
}

/* Pregunta objetivo */
.asesor-pregunta {
    margin-top: 24px;
}
.asesor-pregunta h3 {
    text-align: center;
    font-size: 15px;
    color: #cbd5e1;
    margin-bottom: 16px;
}
.asesor-opciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.asesor-opcion {
    background: rgba(59,130,246,0.06);
    border: 1.5px solid rgba(59,130,246,0.2);
    border-radius: 12px;
    padding: 20px 18px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}
.asesor-opcion:hover {
    background: rgba(59,130,246,0.14);
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59,130,246,0.2);
}
.asesor-opcion-icono {
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
}
.asesor-opcion h4 {
    margin: 0 0 6px;
    font-size: 16px;
    color: #f1f5f9;
}
.asesor-opcion p {
    margin: 0;
    color: #94a3b8;
    font-size: 12px;
}

/* La elegida y la recomendada. Antes se lanzaba el analisis al tocar, asi que
   no hacia falta marcar ninguna; ahora se elige y luego se pulsa Analizar. */
.asesor-opcion.destacada {
    border: 2px solid rgba(251,191,36,0.5);
    background: rgba(251,191,36,0.08);
}
.asesor-opcion.elegida {
    border-color: #3b82f6;
    background: rgba(59,130,246,0.18);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}
.asesor-opcion.destacada.elegida {
    border-color: #fbbf24;
    background: rgba(251,191,36,0.18);
    box-shadow: 0 0 0 3px rgba(251,191,36,0.2);
}
.btn-analizar-asesor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 20px;
    padding: 14px 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg,#14b8a6,#0d9488);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: filter 0.2s, transform 0.2s;
}
.btn-analizar-asesor:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Extra input */
.asesor-extra-input {
    margin-top: 22px;
    text-align: center;
}
.asesor-extra-input label {
    display: block;
    color: #94a3b8;
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: 600;
}
.asesor-extra-input input {
    width: 100%;
    max-width: 260px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(59,130,246,0.25);
    background: #0f1f2f;
    color: #f1f5f9;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
}
.asesor-extra-input input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.asesor-extra-input small {
    display: block;
    color: #64748b;
    font-size: 11px;
    margin-top: 6px;
}

/* Loading */
#asesor-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}
.asesor-loading-content {
    text-align: center;
    color: #94a3b8;
}
.asesor-loading-content h3 {
    color: #e2e8f0;
    margin: 20px 0 8px;
    font-size: 16px;
}
.asesor-loading-content p {
    font-size: 12px;
}
.asesor-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(59,130,246,0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    margin: 0 auto;
    animation: asesorSpin 0.8s linear infinite;
}
@keyframes asesorSpin {
    to { transform: rotate(360deg); }
}

/* Results header */
.asesor-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-shrink: 0;
}
.asesor-result-header h2 {
    margin: 0;
    font-size: 18px;
    color: #f1f5f9;
}
.btn-volver-asesor {
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.3);
    color: #93c5fd;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-volver-asesor:hover {
    background: rgba(59,130,246,0.25);
    border-color: #3b82f6;
}

/* Secciones */
.asesor-seccion {
    margin-bottom: 24px;
    background: rgba(15,40,71,0.4);
    border: 1px solid rgba(59,130,246,0.12);
    border-radius: 12px;
    padding: 18px 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.asesor-seccion-title {
    margin: 0 0 14px;
    font-size: 15px;
    color: #e2e8f0;
}

/* Modos de cálculo Asesor */
.asesor-modos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}
.btn-modo-asesor {
    padding: 8px 4px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.btn-modo-asesor .modo-ico {
    font-size: 1.15rem;
    line-height: 1;
}
.btn-modo-asesor .modo-txt {
    font-size: clamp(0.68rem, 2.2vw, 0.8rem);
    line-height: 1.2;
    text-align: center;
    word-break: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.btn-modo-asesor.active {
    border-color: #1E7881;
    background: rgba(30, 120, 129, 0.2);
    color: #fff;
}
.btn-modo-asesor:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

/* Resumen grid */
.asesor-resumen-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.asesor-stat {
    background: rgba(15,31,47,0.7);
    border: 1px solid rgba(59,130,246,0.12);
    border-radius: 8px;
    padding: 10px 6px;
    text-align: center;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    word-break: break-word;
}
.asesor-stat.positivo {
    border-color: rgba(34,197,94,0.35);
    background: rgba(34,197,94,0.06);
}
.asesor-stat.negativo {
    border-color: rgba(239,68,68,0.35);
    background: rgba(239,68,68,0.06);
}
.stat-label {
    display: block;
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
    line-height: 1.25;
    text-align: center;
    width: 100%;
    word-break: break-word;
}
.stat-valor {
    display: block;
    font-size: clamp(12px, 3.2vw, 15px);
    font-weight: 700;
    color: #f1f5f9;
    text-align: center;
    width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.25;
}
.stat-sub {
    display: block;
    font-size: 9.5px;
    color: #94a3b8;
    margin-top: 3px;
    text-align: center;
    width: 100%;
    word-break: break-word;
    line-height: 1.2;
    font-weight: 400;
}

/* Diagnóstico */
.asesor-diagnostico {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.diagnostico-badge {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    border: 1.5px solid;
    letter-spacing: 0.5px;
}
.asesor-diagnostico p {
    margin: 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
}

/* Obligaciones */
.asesor-obligaciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
}
.asesor-obl-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15,31,47,0.6);
    border: 1px solid rgba(59,130,246,0.1);
    border-radius: 8px;
    padding: 10px 12px;
    gap: 8px;
}
.obl-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.obl-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.obl-nombre {
    font-size: 12px;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.obl-detalles {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    align-items: center;
}
.obl-saldo {
    font-size: 12px;
    font-weight: 700;
    color: #f1f5f9;
}
.obl-tasa {
    font-size: 11px;
    color: #f59e0b;
    background: rgba(245,158,11,0.1);
    padding: 2px 6px;
    border-radius: 4px;
}
.obl-min {
    font-size: 11px;
    color: #64748b;
}

/* Recomendación */
.asesor-recomendacion-box {
    background: linear-gradient(135deg, rgba(34,197,94,0.1), rgba(59,130,246,0.1));
    border: 1.5px solid rgba(34,197,94,0.3);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.5;
}
.asesor-recomendacion-box strong {
    color: #4ade80;
}

/* Estrategias */
.asesor-estrategias {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.estrategia-card {
    background: rgba(15,31,47,0.6);
    border: 1.5px solid rgba(59,130,246,0.15);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
}
.estrategia-card.baseline {
    opacity: 0.7;
    border-style: dashed;
}
.estrategia-card.recomendada {
    border-color: #22c55e;
    background: rgba(34,197,94,0.06);
    box-shadow: 0 0 20px rgba(34,197,94,0.1);
}
.estrategia-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}
.estrategia-header h4 {
    margin: 0;
    font-size: 14px;
    color: #f1f5f9;
}
.estrategia-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    white-space: nowrap;
}
.baseline-tag {
    background: rgba(100,116,139,0.2);
    color: #94a3b8;
}
.rec-tag {
    background: rgba(34,197,94,0.15);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
}
.estrategia-desc {
    margin: 0 0 12px;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.4;
}
.estrategia-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.estrategia-stats > div {
    background: rgba(15,40,71,0.5);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
}
.estrategia-stats > div strong {
    display: block;
    font-size: 16px;
    color: #f1f5f9;
    margin-bottom: 2px;
}
.estrategia-stats .stat-ahorro strong {
    color: #4ade80;
}

/* Orden de pago */
.estrategia-orden {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(59,130,246,0.1);
}
.estrategia-orden strong {
    font-size: 11px;
    color: #94a3b8;
}
.estrategia-orden ol {
    margin: 6px 0 0;
    padding-left: 20px;
}
.estrategia-orden li {
    font-size: 12px;
    color: #cbd5e1;
    margin-bottom: 3px;
}
.estrategia-orden li small {
    color: #64748b;
}

/* Timeline chart */
#vista-asesor .chart-wrapper {
    position: relative;
    width: 100%;
}
#vista-asesor .chart-wrapper canvas {
    width: 100% !important;
}

/* Tips */
.asesor-tips {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.asesor-tip {
    background: rgba(15,31,47,0.6);
    border: 1px solid rgba(59,130,246,0.1);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.5;
}

/* Tabla comparativa */
.asesor-tabla-wrap {
    overflow-x: auto;
    margin-top: 12px;
}
.asesor-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.asesor-tabla th {
    background: rgba(15,40,71,0.6);
    color: #94a3b8;
    padding: 8px 6px;
    text-align: center;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(59,130,246,0.15);
}
.asesor-tabla td {
    padding: 8px 6px;
    text-align: center;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(59,130,246,0.06);
}
.asesor-tabla tr.fila-recomendada td {
    background: rgba(34,197,94,0.06);
    color: #f1f5f9;
    font-weight: 600;
}

@media (min-width: 900px) {
    .asesor-resumen-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .estrategia-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ═══ Paso a Paso ═══ */
.asesor-paso {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(59,130,246,0.08);
}
.asesor-paso:last-child { border-bottom: none; }
.paso-numero {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
}
.paso-contenido h4 {
    margin: 0 0 4px;
    font-size: 13px;
    color: #e2e8f0;
}
.paso-contenido p {
    margin: 0 0 6px;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.5;
}
.paso-accion {
    font-size: 11px;
    color: #4ade80;
    font-weight: 600;
}

/* ═══ Plan de Pago Mensual ═══ */
.asesor-plan-select {
    background: #0f1f2f;
    color: #e2e8f0;
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    margin-left: 8px;
    cursor: pointer;
}
.asesor-plan-select:focus {
    outline: none;
    border-color: #3b82f6;
}
.asesor-plan-tabla-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 480px;
    margin-top: 14px;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.22);
    background: rgba(15, 23, 42, 0.55);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 rgba(15, 23, 42, 0.85);
}
.asesor-plan-tabla-wrap::-webkit-scrollbar {
    width: 8px;
    height: 10px;
    display: block;
}
.asesor-plan-tabla-wrap::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.85);
    border-radius: 6px;
}
.asesor-plan-tabla-wrap::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 6px;
    border: 2px solid rgba(15, 23, 42, 0.85);
}
.asesor-plan-tabla-wrap::-webkit-scrollbar-thumb:hover {
    background: #60a5fa;
}
.asesor-plan-tabla-wrap::-webkit-scrollbar-corner {
    background: rgba(15, 23, 42, 0.95);
}
.asesor-plan-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}
.asesor-plan-table thead th {
    position: sticky;
    top: 0;
    background: #0c1c36;
    color: #94a3b8;
    padding: 10px 14px;
    text-align: center;
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid rgba(59, 130, 246, 0.25);
    z-index: 10;
}
.asesor-plan-table th:first-child,
.asesor-plan-table td:first-child {
    position: sticky;
    left: 0;
    background: #0c1c36;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.35);
    z-index: 5;
}
.asesor-plan-table thead th:first-child {
    z-index: 20;
}
.asesor-plan-table td {
    padding: 8px 8px;
    text-align: center;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(59, 130, 246, 0.08);
    white-space: nowrap;
}
.asesor-plan-table tbody tr:hover td {
    background-color: rgba(59, 130, 246, 0.08);
}
.asesor-plan-table tbody tr:hover td:first-child {
    background-color: #122849;
}
.asesor-plan-table .plan-mes {
    font-weight: 700;
    color: #93c5fd;
}
.asesor-plan-table .plan-extra {
    color: #4ade80;
    font-weight: 600;
}
.asesor-plan-table .plan-cero {
    color: #475569;
}

/* ═══ Botón Exportar PDF ═══ */
.btn-exportar-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(59,130,246,0.3);
}
.btn-exportar-pdf:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(59,130,246,0.45);
}

/* ══════════════════════════════════════════════════════════
   🔵 BOTTOM NAVIGATION BAR (mobile‑style)
   ══════════════════════════════════════════════════════════ */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(100% - var(--page-mx) * 2);
    max-width: 1200px;
    margin-inline: auto;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(8, 16, 28, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1.5px solid rgba(16, 185, 129, 0.28);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(16, 185, 129, 0.18);
    z-index: 1400;
    padding: 0 12px;
    box-sizing: border-box;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: #94A3B8;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 12px;
    transition: all 0.22s ease;
    min-width: 54px;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item .bottom-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    line-height: 1;
    color: inherit;
    transition: transform 0.22s ease;
}

.bottom-nav-item.active {
    color: #10B981;
    background: rgba(16, 185, 129, 0.12);
}

.bottom-nav-item.active .bottom-nav-icon {
    transform: scale(1.12);
}

.bottom-nav-item:hover {
    color: #E2E8F0;
    background: rgba(255, 255, 255, 0.04);
}

.bottom-nav-item.active:hover {
    color: #10B981;
    background: rgba(16, 185, 129, 0.16);
}

.bottom-nav-label {
    font-size: 11.5px;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: 0.1px;
    font-family: inherit;
}

.bottom-nav-item.active .bottom-nav-label {
    font-weight: 800;
    color: #10B981;
}

/* ── FAB center button ── */
.bottom-nav-fab {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981, #059669);
    border: none;
    color: #fff;
    font-size: 26px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -24px;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 2;
}

.bottom-nav-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(16, 185, 129, 0.65);
}

.bottom-nav-fab:active {
    transform: scale(0.95);
}

.bottom-nav-fab.open .bottom-nav-fab-icon {
    transform: rotate(45deg);
}

.bottom-nav-fab-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════
   PANELES DE LA BARRA INFERIOR
   ══════════════════════════════════════════════════════════

   Cuatro paneles salen de la barra: "+", Herramientas, Estadisticas y Perfil.
   Los cuatro comparten ancho, posicion, alto maximo y animacion, porque son la
   misma cosa vista cuatro veces. Cada uno llevaba lo suyo y se notaba: el de
   "+" ocupaba la pantalla entera mientras la barra de la que salia no.

   Se posicionan igual que la barra --left/right a 0 y margenes automaticos-- en
   vez de con translateX(-50%), asi el transform queda libre para la animacion y
   no hay que arrastrar el centrado en cada fotograma. */
.nav-panel,
.overlay-sidebar.mode-bottom {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(var(--nav-h) + var(--panel-gap) + env(safe-area-inset-bottom, 0px));
    width: calc(100% - var(--page-mx) * 2);
    max-width: var(--nav-max);
    margin-inline: auto;
    box-sizing: border-box;
    height: auto;
    /* Nunca tapa la pantalla entera: siempre se ve algo de lo que hay detras,
       que es lo que hace entender que esto se cierra. */
    max-height: min(72vh, calc(100vh - var(--nav-h) - 96px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #060B14;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.5);
    z-index: 1450;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Sube un poco y crece lo justo. Antes entraba desde fuera de la pantalla
       recorriendo todo el alto, que es mas recorrido del necesario y se nota. */
    transform: translate3d(0, 14px, 0) scale(0.985);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 150ms ease,
                visibility 0s linear 240ms;
    /* Solo son cuatro elementos y solo animan estas dos propiedades: se les deja
       su capa para que el navegador no la cree a mitad de la animacion. */
    will-change: transform, opacity;
}

.nav-panel.active,
.overlay-sidebar.mode-bottom.activa {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 140ms ease,
                visibility 0s linear 0s;
}

/* Alto maximo con el alto real del navegador movil, donde la barra de
   direcciones aparece y desaparece. Va aparte porque dvh no lo entienden todos
   y la regla de arriba tiene que seguir valiendo. */
@supports (height: 100dvh) {
    .nav-panel,
    .overlay-sidebar.mode-bottom {
        max-height: min(72dvh, calc(100dvh - var(--nav-h) - 96px));
    }
}

/* El fondo oscuro es el mismo para los cuatro. */
.quickadd-overlay,
.tools-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1350;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.quickadd-overlay.active,
.tools-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ── Panel de "+" ── */
.quickadd-sheet {
    padding: 16px 20px 20px;
}

.quickadd-handle {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    margin: 0 auto 14px;
}

.quickadd-title {
    color: #F1F5F9;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px;
    text-align: center;
}

/* Dos columnas en un movil y las cuatro en una pantalla ancha. Los tramos
   llevan tope: el panel es tan ancho como la barra, y sin tope cuatro botones
   repartiendose 1200px salian de 280px cada uno, que para "Ingreso" o "Gasto"
   es un cartel, no un boton. Con tope, la fila se queda centrada. */
.quickadd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    /* El tope va en la rejilla y no en el tramo: un tramo con maximo fijo cuenta
       con ese maximo para decidir cuantos caben, y en un movil dejaba una sola
       columna. Asi el movil mantiene sus dos y el ordenador no estira los
       botones a lo ancho de la barra. */
    max-width: 920px;
    margin-inline: auto;
    gap: 12px;
}

.quickadd-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    border-radius: 14px;
    border: 1px solid;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.quickadd-btn-icon {
    font-size: 28px;
    line-height: 1;
}

.quickadd-btn:active {
    transform: scale(0.96);
}

/* Quick-add color variants */
.quickadd-ingreso {
    color: #22C55E;
    border-color: rgba(34,197,94,0.3);
    background: rgba(34,197,94,0.08);
}
.quickadd-ingreso:hover {
    border-color: rgba(34,197,94,0.5);
    background: rgba(34,197,94,0.15);
}

.quickadd-gasto {
    color: #EF4444;
    border-color: rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.08);
}
.quickadd-gasto:hover {
    border-color: rgba(239,68,68,0.5);
    background: rgba(239,68,68,0.15);
}

.quickadd-deuda {
    color: #F59E0B;
    border-color: rgba(245,158,11,0.3);
    background: rgba(245,158,11,0.08);
}
.quickadd-deuda:hover {
    border-color: rgba(245,158,11,0.5);
    background: rgba(245,158,11,0.15);
}

.quickadd-tc {
    color: #3B82F6;
    border-color: rgba(59,130,246,0.3);
    background: rgba(59,130,246,0.08);
}
.quickadd-tc:hover {
    border-color: rgba(59,130,246,0.5);
    background: rgba(59,130,246,0.15);
}

/* ── Body: top/bottom for fixed bars, left/right outer page margin ── */
body {
    padding-top: 56px;
    padding-bottom: 110px;
    padding-left: var(--page-mx);
    padding-right: var(--page-mx);
}

/* ══════════════════════════════════════════════════════════
   🔵 TOOLS SHEET (Herramientas bottom sheet)
   ══════════════════════════════════════════════════════════ */
/* ── Panel de Herramientas ── */
.tools-sheet {
    max-width: 560px !important;
    width: min(560px, calc(100% - var(--page-mx) * 2)) !important;
    margin-inline: auto;
    padding: 22px 24px 26px;
    box-sizing: border-box;
}

.tools-sheet .quickadd-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 18px;
    text-align: center;
    color: #f8fafc;
}

/* Vista de ordenador y móvil: una sola columna limpia, bien distribuida y centrada */
.tools-sheet-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0;
    gap: 11px;
}
.tools-sheet-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 14px 20px;
    color: #e2e8f0;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    position: relative;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}
.tools-sheet-item:hover, .tools-sheet-item:active {
    background: linear-gradient(135deg, rgba(59,130,246,0.2) 0%, rgba(30,120,129,0.16) 100%);
    border-color: rgba(59,130,246,0.45);
    color: #93C5FD;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.25);
}
.tools-sheet-item.locked {
    opacity: 0.65;
}
.tools-sheet-item.locked:hover {
    background: rgba(245,158,11,0.08);
    border-color: rgba(245,158,11,0.25);
    color: #fbbf24;
}
.tool-unlock-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    color: #000;
    white-space: nowrap;
}
.tool-unlocked-badge {
    margin-left: auto;
    font-size: 13px;
    color: #22c55e;
}

/* ── Sub-page container ── */
.subpage-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--page-pt) var(--page-px) var(--page-pb);
    position: relative;
    z-index: 1;
}
.subpage-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.subpage-hero-icon {
    font-size: 2.2rem;
    line-height: 1;
}
.subpage-hero h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #F1F5F9;
    margin: 0;
}
.subpage-hero p {
    color: #64748B;
    font-size: 0.88rem;
    margin: 2px 0 0;
}
.subpage-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 20px;
}
.subpage-stat-icon {
    font-size: 2rem;
    line-height: 1;
}
.subpage-stat-info p {
    font-size: 1.6rem;
    font-weight: 800;
    color: #F1F5F9;
    margin: 0;
}
.subpage-stat-info small {
    color: #64748B;
    font-size: 0.8rem;
}
.subpage-add-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
}
.subpage-add-btn:hover { transform: translateY(-1px); }
.subpage-add-btn:active { transform: scale(0.98); }

/* ── Sub-page table responsive ── */
.subpage-container .section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--page-px));
    margin-right: calc(-1 * var(--page-px));
    padding-left: var(--page-px);
    padding-right: var(--page-px);
}
.subpage-container table {
    min-width: 0;
    width: 100%;
    font-size: 13px;
}
.subpage-container table th,
.subpage-container table td {
    padding: 10px 8px;
    font-size: 12px;
    white-space: nowrap;
}
.subpage-container table th {
    font-size: 10px;
    letter-spacing: 0.4px;
}
.subpage-container .acciones {
    gap: 4px;
}
.subpage-container .btn-editar,
.subpage-container .btn-eliminar {
    padding: 5px 10px;
    font-size: 11px;
}
/* Wide tables (deudas, tarjetas) scroll smoothly */
.subpage-container .tabla-expandible {
    min-width: 640px;
}
@media (max-width: 600px) {
    /* ── Keep tables as tables, reduce font sizes for vertical phone ── */
    .subpage-container .section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .subpage-container table { min-width: 0; }
    .subpage-container table th,
    .subpage-container table td {
        padding: 4px 3px;
        font-size: 10px;
        white-space: nowrap;
    }
    .subpage-container table th {
        font-size: 9px;
        letter-spacing: 0.2px;
    }

    /* ── Expandable tables (deudas, tarjetas) — compact ── */
    .subpage-container .tabla-expandible {
        min-width: 0;
    }
    .subpage-container .tabla-expandible th,
    .subpage-container .tabla-expandible td {
        padding: 4px 3px;
        font-size: 10px;
    }
    .subpage-container .tabla-expandible th {
        font-size: 9px;
    }

    /* ── action buttons ── */
    .subpage-container .btn-editar,
    .subpage-container .btn-eliminar,
    .subpage-container .btn-duplicar {
        padding: 3px 5px;
        font-size: 9px;
    }

    /* Viajes responsive */
    .viaje-crear-grid { grid-template-columns: 1fr !important; }
    .viaje-gastos-grid { grid-template-columns: 1fr !important; }
    .viaje-miembros-row { flex-wrap: wrap !important; }
    .viaje-miembros-row input { min-width: 0 !important; }
    .viaje-miembros-row button { width: 100% !important; }
    .viaje-multipayer-label { font-size: 0.8rem !important; padding: 0.4rem 0.6rem !important; }
    .viaje-pagador-row { flex-direction: column !important; align-items: stretch !important; }
    .viaje-pagador-row select { width: 100% !important; }

    /* ── Sidebar content: reduce padding for more table space ── */
    .overlay-sidebar.mode-bottom .sidebar-content.activa { padding: 12px 10px calc(16px + env(safe-area-inset-bottom, 0)); }

    /* ── Movement form: single-column on mobile ── */
    .mov-form-grid { grid-template-columns: 1fr !important; gap: 8px; }

    /* ── Movement tables — keep as tables with smaller text ── */
    .mov-tabla { min-width: 0; }
    .mov-tabla th,
    .mov-tabla td {
        padding: 4px 3px;
        font-size: 10px;
        white-space: nowrap;
    }
    .mov-tabla th {
        font-size: 9px;
    }
    /* Hide Valor Actual (5th) and Cuotas Pagadas (6th) columns on mobile */
    .mov-tabla th:nth-child(5),
    .mov-tabla td:nth-child(5),
    .mov-tabla th:nth-child(6),
    .mov-tabla td:nth-child(6) {
        display: none;
    }
    .mov-tabla-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Movement action buttons compact ── */
    .mov-tabla .btn-mov-editar,
    .mov-tabla .btn-mov-eliminar,
    .mov-tabla .btn-duplicar {
        padding: 2px 4px;
        font-size: 10px;
    }

    /* ── Simulator responsive ── */
    .sim-inputs { grid-template-columns: 1fr !important; }
    .sim-group input,
    .sim-group select { font-size: 13px; padding: 8px 10px; }
    .sim-group label { font-size: 11px; }
    .sim-frech-fields { grid-template-columns: 1fr !important; }
    .sim-group-full { grid-column: auto !important; }
    .sim-resumen-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .sim-stat { padding: 10px 8px; }
    .sim-stat-label { font-size: 9px; }
    .sim-stat-value { font-size: 13px; }
    .sim-ahorro-grid { grid-template-columns: 1fr !important; gap: 8px; }
    .sim-ahorro-label { font-size: 10px; }
    .sim-ahorro-value { font-size: 14px; }
    .sim-comparacion { padding: 12px; }
    .sim-comparacion h3 { font-size: 12px; }
    .sim-fechas-info { flex-direction: column; gap: 8px; }
    .sim-fecha-item { min-width: 0; padding: 10px 12px; }
    .sim-fecha-value { font-size: 12px; }
    .sim-fecha-label { font-size: 9px; }
    .sim-frech-resumen { padding: 12px !important; }
    .sim-frech-resumen h3 { font-size: 12px !important; }
    .sim-frech-resumen-grid { grid-template-columns: 1fr !important; gap: 8px; }
    .sim-tabla { font-size: 10px; }
    .sim-tabla th,
    .sim-tabla td { padding: 4px 3px; font-size: 10px; }
    .sim-tabla-header { flex-direction: column; gap: 8px; align-items: flex-start; }
    .sim-export-btns { width: 100%; }
    .sim-export-btn { font-size: 10px; padding: 6px 10px; }
    .btn-simular { font-size: 12px; padding: 12px; }
    .btn-limpiar { font-size: 12px; padding: 12px 16px; }
    .sim-chart-wrap { height: 200px; }
    .sim-mes-btn { width: 32px; height: 28px; font-size: 10px; }

    /* ── Asesor / Debts Goodbye analysis responsive ── */
    .asesor-result-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    .asesor-result-header h2 {
        font-size: 15px;
    }
    .btn-volver-asesor {
        width: 100%;
        text-align: center;
    }
    .asesor-seccion {
        padding: 12px 10px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    .asesor-seccion-title {
        font-size: 13px;
    }
    .asesor-resumen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        box-sizing: border-box;
    }
    .asesor-stat {
        padding: 8px 4px;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .stat-label {
        font-size: 8.5px;
        letter-spacing: 0.2px;
        margin-bottom: 3px;
        line-height: 1.2;
    }
    .stat-valor {
        font-size: clamp(10.5px, 2.9vw, 13px);
        line-height: 1.2;
    }
    .stat-sub {
        font-size: 8.5px;
        margin-top: 2px;
    }
    .asesor-diagnostico {
        flex-direction: column;
        gap: 8px;
    }
    .asesor-obl-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .obl-detalles {
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }
    .obl-nombre {
        white-space: normal;
        font-size: 11px;
    }
    .estrategia-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .estrategia-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .estrategia-stats > div {
        padding: 6px 4px;
        font-size: 10px;
    }
    .estrategia-stats > div strong {
        font-size: 13px;
    }
    .asesor-plan-selector {
        flex-wrap: wrap !important;
    }
    .asesor-plan-tabla-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .btn-exportar-pdf {
        font-size: 12px;
        padding: 10px 16px;
        width: 100%;
    }
}
@media (min-width: 900px) {
    .subpage-container table th,
    .subpage-container table td {
        padding: var(--td-py) var(--td-px);
        font-size: 14px;
    }
    .subpage-container table th {
        font-size: 12px;
        letter-spacing: 0.6px;
    }
}

/* ══════════════════════════════════════════════════════════
   🔵 TOP APP BAR
   ══════════════════════════════════════════════════════════ */
/* Las dos barras fijas se alinean con el contenido, no con el borde de la pantalla.
   El cuerpo lleva var(--page-mx) de margen lateral y el contenedor se limita a
   1200px centrado; estas repiten las dos cosas para que los bordes coincidan en
   cualquier ancho, que es lo que hacia que se vieran demasiado anchas. */
.app-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: calc(100% - var(--page-mx) * 2);
    max-width: 1200px;
    margin-inline: auto;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(8, 16, 28, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1.5px solid rgba(16, 185, 129, 0.28);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-top: none;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(16, 185, 129, 0.18);
    z-index: 1300;
    padding: 0 16px;
    gap: 8px;
    box-sizing: border-box;
}

/* Left: icon */
.topbar-left {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.topbar-ico {
    height: 36px;
    width: 36px;
    object-fit: contain;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.topbar-ico:hover { opacity: 0.8; }
.topbar-ico:active { opacity: 0.6; }

/* Center: tokens · Resumen · plan badge */
.topbar-center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.topbar-token {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(251,191,36,0.12);
    border: 1px solid rgba(251,191,36,0.28);
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 700;
    color: #fbbf24;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.topbar-token:hover { background: rgba(251,191,36,0.2); }

.topbar-token-count { color: #fbbf24; }

.topbar-title {
    font-size: 15px;
    font-weight: 700;
    color: #F1F5F9;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.topbar-plan {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(148,163,184,0.12);
    border: 1px solid rgba(148,163,184,0.25);
    color: #94a3b8;
}
.topbar-plan.is-pro {
    background: linear-gradient(135deg, rgba(30,120,129,0.3), rgba(34,197,94,0.2));
    border-color: rgba(34,197,94,0.4);
    color: #22C55E;
}
.topbar-plan.is-admin {
    background: linear-gradient(135deg, rgba(139,92,246,0.3), rgba(99,102,241,0.2));
    border-color: rgba(139,92,246,0.4);
    color: #a78bfa;
}

/* Right: nombre_app logo (tutorial trigger) */
.topbar-right {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.topbar-tut-btn {
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.topbar-nombre {
    height: 28px;
    object-fit: contain;
    transition: opacity 0.2s;
    display: block;
}
.topbar-tut-btn:hover .topbar-nombre { opacity: 0.8; }

.topbar-notif-dot {
    position: absolute;
    top: 0;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #EF4444;
    border-radius: 50%;
    border: 2px solid rgba(26,42,63,0.97);
    pointer-events: none;
}

/* Notifications dropdown */
.topbar-notif-panel {
    position: fixed;
    top: 60px;
    right: 12px;
    width: min(360px, calc(100vw - 24px));
    background: #1A2A3F;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    z-index: 1299;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    overflow: hidden;
    animation: fadeInDown 0.2s ease;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.topbar-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 13px;
    font-weight: 700;
    color: #F1F5F9;
}

.topbar-notif-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.topbar-notif-close:hover { background: rgba(255,255,255,0.08); }

.topbar-notif-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.topbar-notif-empty {
    text-align: center;
    color: #64748b;
    font-size: 13px;
    padding: 16px 0;
    margin: 0;
}

.topbar-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12px;
}
.topbar-notif-item strong { display: block; font-size: 12px; margin-bottom: 2px; }
.topbar-notif-item p { margin: 0; color: #94a3b8; font-size: 11px; }
.topbar-notif-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

.topbar-notif-item.notif-danger {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.2);
    color: #f87171;
}
.topbar-notif-item.notif-warning {
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.2);
    color: #fbbf24;
}
.topbar-notif-item.notif-info {
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.2);
    color: #93c5fd;
}

/* ── Mobile responsive tweaks ── */
@media (max-width: 480px) {
    /* La barra encoge, y con ella el hueco que dejan los paneles: si no, se
       quedaban dos pixeles descolgados justo donde mas se nota. */
    :root { --nav-h: 58px; }
    .bottom-nav {
        height: 58px;
        padding: 0 4px;
    }
    .bottom-nav-item {
        padding: 4px 6px;
        min-width: 48px;
    }
    .bottom-nav-fab {
        width: 50px;
        height: 50px;
        margin-top: -24px;
        font-size: 24px;
    }
    .quickadd-btn {
        padding: 14px 10px;
    }
}

/* ══════════════════════════════════════════════════════════
   📱 VIAJES & SIMULADOR — Mobile responsive
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Viajes: trip creation form → single column */
    #viajeCrearForm [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    /* Viajes: trip detail grids → single column */
    #viajeDetalle [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    /* Viajes: detail sections padding */
    #viajeDetalle > div {
        padding: 1rem !important;
    }
    /* Viajes: participant chips wrap */
    #integrantesLista {
        gap: 0.4rem !important;
    }
    /* Simulator: inputs → single column */
    .sim-inputs {
        grid-template-columns: 1fr !important;
    }
    /* Simulator: results card */
    .sim-results {
        padding: 1rem !important;
    }
    .sim-results h3 {
        font-size: 1rem !important;
    }
    /* Chart expand modal — full width on mobile */
    #modalChartDash .modal-content,
    #modalChartExpand .modal-content {
        width: 98vw !important;
        max-width: 98vw !important;
        height: 70vh !important;
        padding: 0.8rem !important;
    }
    /* Perfil form grid → single column on small screens */
    #vista-perfil [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    #vista-perfil [style*="grid-column"] {
        grid-column: auto !important;
    }
}

/* ═══════ LANGUAGE SWITCHER (inline in profile) ═══════ */
.lang-switcher-inline {
    display: flex;
    gap: 0;
    background: rgba(11, 20, 36, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(59, 130, 246, 0.18);
    border-radius: 12px;
    padding: 3px;
}
.lang-btn {
    background: transparent;
    border: none;
    border-radius: 9px;
    padding: 5px 10px;
    color: #7a8ba5;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.lang-btn:hover {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.06);
}
.lang-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #1E7881, #22c55e);
    box-shadow: 0 2px 8px rgba(30, 120, 129, 0.35);
}

/* ═══════ PROFILE TOKENS + LANGUAGE SECTION ═══════ */
.perfil-tokens-lang {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1.2rem;
}
.perfil-token-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 14px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
}
.perfil-token-row:hover {
    background: rgba(251, 191, 36, 0.14);
}
.perfil-lang-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: 14px;
    padding: 10px 16px;
}
#perfilMoneda {
    max-width: 100%;
    min-width: 0;
    text-overflow: ellipsis;
}
@media (max-width: 600px) {
    .perfil-lang-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .perfil-lang-row #perfilMoneda {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .perfil-lang-row .lang-switcher-inline {
        width: 100%;
        display: flex;
        justify-content: stretch;
    }
    .perfil-lang-row .lang-switcher-inline .lang-btn {
        flex: 1;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   TRANSICIONES DE CARGA
   ═══════════════════════════════════════════════════════════════════

   Antes toda la pagina estaba en display:none hasta que /auth/me respondia:
   pantalla en blanco durante un round trip completo, y luego todo de golpe.

   Ahora el "chrome" (barra superior, navegacion) pinta de inmediato y solo el
   contenido espera, mostrando esqueletos. Cuando los datos llegan, el contenido
   entra con un fundido corto y escalonado.

   Todo esto se anula bajo prefers-reduced-motion (ver el final del bloque).
   ═══════════════════════════════════════════════════════════════════ */

/* El contenido arranca invisible pero ocupando su sitio, para que no haya salto
   de layout cuando aparece. */
.auth-pending .page-content {
    opacity: 0;
}

.page-content {
    opacity: 1;
    transition: opacity 260ms ease-out;
}

/* Entrada escalonada de las tarjetas: cada una entra un pelin despues que la
   anterior, lo justo para que se lea como una secuencia y no como un parpadeo. */
.page-ready .stagger-in > * {
    animation: fynex-rise 380ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.page-ready .stagger-in > *:nth-child(1) { animation-delay: 0ms; }
.page-ready .stagger-in > *:nth-child(2) { animation-delay: 45ms; }
.page-ready .stagger-in > *:nth-child(3) { animation-delay: 90ms; }
.page-ready .stagger-in > *:nth-child(4) { animation-delay: 135ms; }
.page-ready .stagger-in > *:nth-child(5) { animation-delay: 180ms; }
.page-ready .stagger-in > *:nth-child(n+6) { animation-delay: 220ms; }

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

/* ── Esqueletos ──
   Ocupan el sitio del contenido real mientras carga, para que la pagina no
   cambie de forma cuando llegan los datos. */
.skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 8px;
    min-height: 14px;
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(148, 163, 184, 0.14),
        transparent
    );
    animation: fynex-shimmer 1.4s infinite;
}
@keyframes fynex-shimmer {
    100% { transform: translateX(100%); }
}

.skeleton-row {
    height: 46px;
    margin-bottom: 10px;
    border-radius: 10px;
}
.skeleton-card {
    height: 96px;
    margin-bottom: 12px;
    border-radius: 16px;
}

/* Loader de pantalla completa: un fundido de salida en vez de desaparecer seco. */
#loaderAuth {
    transition: opacity 220ms ease-out;
}
#loaderAuth.fading {
    opacity: 0;
    pointer-events: none;
}

/* ── Microinteracciones ──
   Feedback inmediato al pulsar, que es lo que hace que una interfaz se sienta
   rapida aunque la respuesta del servidor tarde lo mismo. */
button,
.btn-guardar,
.btn-mov-agregar,
.tc-accion-btn {
    transition: transform 120ms ease, filter 120ms ease, background-color 160ms ease;
}
button:active,
.btn-guardar:active,
.btn-mov-agregar:active,
.tc-accion-btn:active {
    transform: scale(0.975);
}

/* Filas de tabla: resaltado suave al pasar por encima. */
.mov-tabla tbody tr {
    transition: background-color 140ms ease;
}

/* Modales: entran con una escala minima en vez de aparecer de golpe.

   Esto era una transicion gobernada por una clase .activo, y ahi estaba el fallo:
   la regla .modal:not(.activo) .modal-content dejaba el contenido en opacity 0, pero
   solo cinco modales de la aplicacion llegan a ponerse esa clase. Los demas se abren
   con display:flex y nada mas, asi que se quedaban invisibles: el fondo se oscurecia,
   la ventana no se veia y la pagina parecia colgada.

   Ahora es una animacion. Una animacion arranca sola cuando el elemento pasa de
   display:none a visible, sin depender de que nadie ponga una clase, y termina en
   opacity 1. Ningun modal puede quedarse escondido. La clase .activo que todavia
   pone algun sitio del codigo ya no pinta nada, y no estorba. */
.modal {
    transition: opacity 180ms ease-out;
}
.modal .modal-content {
    animation: fynex-modal-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fynex-modal-in {
    from { transform: translateY(8px) scale(0.985); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* ── Accesibilidad ──
   Quien pide menos movimiento en su sistema no recibe ninguna de estas
   animaciones; el contenido sigue siendo perfectamente utilizable. */
@media (prefers-reduced-motion: reduce) {
    .page-content,
    #loaderAuth,
    .modal,
    .modal .modal-content,
    button,
    .mov-tabla tbody tr {
        transition: none !important;
    }
    .page-ready .stagger-in > *,
    .modal .modal-content,
    .skeleton::after {
        animation: none !important;
    }
    button:active {
        transform: none;
    }
}

/* ── Loader de sesion ──

   Empieza bajo la barra superior (56px) para que el marco de la app se vea desde
   el primer instante: la espera se percibe como "cargando dentro de la app" y no
   como una pantalla en blanco.

   La animacion cuenta de que va la aplicacion: una cadena que se tensa mientras
   se espera, se rompe cuando los datos llegan y deja monedas donde estaba. Va
   entera en el ::before para que sobreviva a los cambios de idioma, que
   reescriben el texto del elemento (data-i18n="loading") y se llevarian por
   delante cualquier marca que se metiera dentro. */
#loaderAuth {
    top: 56px !important;
    background: transparent !important;
    flex-direction: column;
    gap: 14px;
    /* La palabra "Cargando" se queda en el documento --un lector de pantalla
       tiene que poder anunciar la espera-- pero no se ve: la cadena girando ya
       lo dice, y leerlo ademas escrito sobraba. Va con font-size y no con
       display porque el texto es un nodo suelto, sin etiqueta que apuntar. */
    font-size: 0 !important;
    color: transparent !important;
}

#loaderAuth::before {
    content: "";
    width: 76px;
    height: 76px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round'><rect x='-12.50' y='-6.00' width='25' height='12' rx='6.0' transform='translate(83.00 50.00) rotate(90.00)' opacity='1.00'/><rect x='-12.50' y='-6.00' width='25' height='12' rx='6.0' transform='translate(76.70 69.40) rotate(126.00)' opacity='0.92'/><rect x='-12.50' y='-6.00' width='25' height='12' rx='6.0' transform='translate(60.20 81.38) rotate(162.00)' opacity='0.84'/><rect x='-12.50' y='-6.00' width='25' height='12' rx='6.0' transform='translate(39.80 81.38) rotate(198.00)' opacity='0.76'/><rect x='-12.50' y='-6.00' width='25' height='12' rx='6.0' transform='translate(23.30 69.40) rotate(234.00)' opacity='0.68'/><rect x='-12.50' y='-6.00' width='25' height='12' rx='6.0' transform='translate(17.00 50.00) rotate(270.00)' opacity='0.60'/><rect x='-12.50' y='-6.00' width='25' height='12' rx='6.0' transform='translate(23.30 30.60) rotate(306.00)' opacity='0.52'/><rect x='-12.50' y='-6.00' width='25' height='12' rx='6.0' transform='translate(39.80 18.62) rotate(342.00)' opacity='0.44'/><rect x='-12.50' y='-6.00' width='25' height='12' rx='6.0' transform='translate(60.20 18.62) rotate(378.00)' opacity='0.36'/><rect x='-12.50' y='-6.00' width='25' height='12' rx='6.0' transform='translate(76.70 30.60) rotate(414.00)' opacity='0.28'/></g></svg>");
    /* Lineal y no suavizado: una cadena tirada por un motor va a velocidad
       constante; con aceleracion parece que patina. */
    animation: fynex-cadena 1.4s linear infinite;
}

/* Da vueltas. Antes se estiraba de lado a lado seis centesimas, un movimiento
   tan corto que se confundia con un parpadeo. */
@keyframes fynex-cadena {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Las tres fases las marca el JS (auth.js) porque background-image no se
   interpola y dentro de un keyframe cada navegador decide cuando cambiarla. */
#loaderAuth.rompe::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%2322c55e' stroke-width='3.4' stroke-linecap='round'><path d='M44 36 H24.5 A6.5 6.5 0 0 0 24.5 49 H41'/><path d='M59 36 H75.5 A6.5 6.5 0 0 1 75.5 49 H56'/><path d='M46 30 l-5 -7 M54 30 l5 -7 M46 55 l-5 7 M54 55 l5 7 M44 42.5 h3 M53 42.5 h3'/></g></svg>");
    animation: fynex-chasquido 380ms cubic-bezier(0.3, 0, 0.2, 1) both;
}

@keyframes fynex-chasquido {
    0%   { transform: scaleX(1.18); }
    35%  { transform: scale(1.08) rotate(-4deg); }
    100% { transform: scale(1) rotate(0); }
}

#loaderAuth.rompe.monedas::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' opacity='0.5'><path d='M34 36 H24.5 A6.5 6.5 0 0 0 24.5 49 H34'/><path d='M66 36 H75.5 A6.5 6.5 0 0 1 75.5 49 H66'/></g><g fill='%2322c55e' font-family='system-ui,Segoe UI,Arial,sans-serif' font-size='24' font-weight='700' text-anchor='middle'><text x='32' y='51'>$</text><text x='50' y='51'>€</text><text x='68' y='51'>£</text></g></svg>");
    animation: fynex-monedas 420ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes fynex-monedas {
    0%   { transform: scale(0.6); opacity: 0.2; }
    100% { transform: scale(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    /* Sigue girando, pero despacio. Un cargador parado no se distingue de
       una pagina colgada, y eso inquieta mas que un movimiento suave; es la
       excepcion razonable al freno general de animaciones, y lleva
       !important porque ese freno tambien lo lleva.
       El giro es constante y sin destellos, que es lo que molesta a quien
       pide menos movimiento. */
    #loaderAuth::before {
        animation-duration: 4s !important;
        animation-iteration-count: infinite !important;
    }
    /* Se ven las mismas tres imagenes, solo que sin movimiento. */
    #loaderAuth.rompe::before,
    #loaderAuth.rompe.monedas::before {
        animation: none !important;
        opacity: 1;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   JERARQUIA VISUAL DEL RESUMEN
   ═══════════════════════════════════════════════════════════════════

   Las cinco cifras del resumen compartian el mismo tamano (1.05rem), asi que la
   posicion financiera neta -- que es la respuesta a "como voy" y lo primero que
   deberia leerse -- competia con las cuatro de apoyo en vez de encabezarlas.

   Ademas las cuatro no son lo mismo: ingreso y gasto son FLUJOS del mes, mientras
   que deudas y cupo usado son SALDOS acumulados. Se distinguen con una etiqueta
   discreta para que no se lean como cuatro cifras equivalentes.
   ═══════════════════════════════════════════════════════════════════ */

.dash-compact-card.card-posicion-neta,
.dash-compact-card.card-balance:not(.card-monthly-balance) {
    position: relative;
    padding: 22px 18px 16px;
    background:
        radial-gradient(circle at 0% 0%, rgba(16, 185, 129, 0.40) 0%, transparent 58%),
        radial-gradient(circle at 100% 100%, rgba(239, 68, 68, 0.35) 0%, transparent 58%),
        linear-gradient(135deg, #05141e 0%, #08162b 50%, #1a0814 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55), 0 0 20px rgba(16, 185, 129, 0.08) !important;
    overflow: hidden;
    margin-bottom: 12px !important;
}

.card-balance-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.card-balance-header h3 {
    margin: 0;
    font-size: 0.78rem !important;
    font-weight: 700;
    color: #94a3b8 !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.btn-toggle-eye {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #10b981;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.btn-toggle-eye:hover {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.45);
    transform: scale(1.05);
}

.dash-compact-card.card-posicion-neta p,
.dash-compact-card.card-balance:not(.card-monthly-balance) p {
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
}

.dash-balance-comparativa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    margin-left: auto;
    float: right;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 0.78rem;
    font-weight: 700;
}

.dash-balance-comparativa.negativo {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.dash-balance-comparativa .comparativa-label {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.75rem;
}

.dash-balance-comparativa .comparativa-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #10b981;
    font-weight: 800;
    font-size: 0.82rem;
}

.dash-balance-comparativa.negativo .comparativa-badge {
    color: #ef4444;
}

.dash-balance-comparativa .trend-icon-stepped {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Posición Financiera Neta Separada / Standalone */
.dash-posicion-neta-standalone {
    width: 100%;
    margin-bottom: 14px;
}
.dash-posicion-neta-standalone .card-posicion-neta {
    margin-bottom: 0 !important;
}

/* Grupo unificado de 4 tarjetas: Ingreso, Gasto, Préstamos y Tarjetas (como en la app) */
.dash-group-cards-4 {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(10, 20, 36, 0.90) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    margin-bottom: 14px !important;
}

.dash-group-cards-4 .dash-block {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 0 !important;
}

.dash-group-cards-4 .dash-block-row-1 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dash-group-cards-4 .dash-block .dash-block-left:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dash-group-cards-4 .dash-compact-card {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 16px 14px !important;
    box-shadow: none !important;
    transition: background 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

.dash-group-cards-4 .dash-compact-card:hover {
    transform: none !important;
}

/* Las tarjetas de apoyo y mensuales con diseño mejorado, bordes y sombras */
.dash-group:not(.dash-group-cards-4) .dash-compact-card:not(.card-posicion-neta):not(.card-balance),
.dash-group .dash-compact-card.card-monthly-balance {
    background: rgba(10, 20, 36, 0.88);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    padding: 16px 14px;
}

.dash-compact-card.card-monthly-balance {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.dash-compact-card.card-monthly-balance .dash-balance-comparativa {
    margin-top: 6px;
    float: none;
    justify-content: center;
}

.dash-group .dash-compact-card:not(.card-balance):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Iluminación interactiva al posar el cursor o hacer clic sobre las tarjetas del lobby */
/* Ingresos: Alumbra en verde */
.dash-compact-card.card-ingresos:hover,
.dash-compact-card.card-ingresos:active,
.dash-group-cards-4 .dash-compact-card.card-ingresos:hover,
.dash-group-cards-4 .dash-compact-card.card-ingresos:active {
    background: radial-gradient(circle at center, rgba(34, 197, 94, 0.22) 0%, rgba(34, 197, 94, 0.08) 100%) !important;
    border-color: rgba(34, 197, 94, 0.55) !important;
    box-shadow: inset 0 0 24px rgba(34, 197, 94, 0.28), 0 0 16px rgba(34, 197, 94, 0.20) !important;
}
.dash-compact-card.card-ingresos:hover p,
.dash-compact-card.card-ingresos:active p,
.dash-group-cards-4 .dash-compact-card.card-ingresos:hover p,
.dash-group-cards-4 .dash-compact-card.card-ingresos:active p {
    color: #22c55e !important;
    text-shadow: 0 0 14px rgba(34, 197, 94, 0.65), 0 0 28px rgba(34, 197, 94, 0.35);
}
.dash-compact-card.card-ingresos:hover h3,
.dash-compact-card.card-ingresos:active h3,
.dash-group-cards-4 .dash-compact-card.card-ingresos:hover h3,
.dash-group-cards-4 .dash-compact-card.card-ingresos:active h3 {
    color: #86efac !important;
}

/* Gastos: Alumbra en rojo */
.dash-compact-card.card-gastos:hover,
.dash-compact-card.card-gastos:active,
.dash-group-cards-4 .dash-compact-card.card-gastos:hover,
.dash-group-cards-4 .dash-compact-card.card-gastos:active {
    background: radial-gradient(circle at center, rgba(239, 68, 68, 0.22) 0%, rgba(239, 68, 68, 0.08) 100%) !important;
    border-color: rgba(239, 68, 68, 0.55) !important;
    box-shadow: inset 0 0 24px rgba(239, 68, 68, 0.28), 0 0 16px rgba(239, 68, 68, 0.20) !important;
}
.dash-compact-card.card-gastos:hover p,
.dash-compact-card.card-gastos:active p,
.dash-group-cards-4 .dash-compact-card.card-gastos:hover p,
.dash-group-cards-4 .dash-compact-card.card-gastos:active p {
    color: #ef4444 !important;
    text-shadow: 0 0 14px rgba(239, 68, 68, 0.65), 0 0 28px rgba(239, 68, 68, 0.35);
}
.dash-compact-card.card-gastos:hover h3,
.dash-compact-card.card-gastos:active h3,
.dash-group-cards-4 .dash-compact-card.card-gastos:hover h3,
.dash-group-cards-4 .dash-compact-card.card-gastos:active h3 {
    color: #fca5a5 !important;
}

/* Deudas: Alumbra en amarillo */
.dash-compact-card.card-deudas:hover,
.dash-compact-card.card-deudas:active,
.dash-group-cards-4 .dash-compact-card.card-deudas:hover,
.dash-group-cards-4 .dash-compact-card.card-deudas:active {
    background: radial-gradient(circle at center, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0.08) 100%) !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
    box-shadow: inset 0 0 24px rgba(245, 158, 11, 0.28), 0 0 16px rgba(245, 158, 11, 0.20) !important;
}
.dash-compact-card.card-deudas:hover p,
.dash-compact-card.card-deudas:active p,
.dash-group-cards-4 .dash-compact-card.card-deudas:hover p,
.dash-group-cards-4 .dash-compact-card.card-deudas:active p {
    color: #fbbf24 !important;
    text-shadow: 0 0 14px rgba(245, 158, 11, 0.65), 0 0 28px rgba(245, 158, 11, 0.35);
}
.dash-compact-card.card-deudas:hover h3,
.dash-compact-card.card-deudas:active h3,
.dash-group-cards-4 .dash-compact-card.card-deudas:hover h3,
.dash-group-cards-4 .dash-compact-card.card-deudas:active h3 {
    color: #fde68a !important;
}

/* Tarjetas (Cupo usado): Alumbra en azul */
.dash-compact-card.card-tc:hover,
.dash-compact-card.card-tc:active,
.dash-group-cards-4 .dash-compact-card.card-tc:hover,
.dash-group-cards-4 .dash-compact-card.card-tc:active {
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
    border-color: rgba(59, 130, 246, 0.55) !important;
    box-shadow: inset 0 0 24px rgba(59, 130, 246, 0.28), 0 0 16px rgba(59, 130, 246, 0.20) !important;
}
.dash-compact-card.card-tc:hover p,
.dash-compact-card.card-tc:active p,
.dash-group-cards-4 .dash-compact-card.card-tc:hover p,
.dash-group-cards-4 .dash-compact-card.card-tc:active p {
    color: #60a5fa !important;
    text-shadow: 0 0 14px rgba(59, 130, 246, 0.65), 0 0 28px rgba(59, 130, 246, 0.35);
}
.dash-compact-card.card-tc:hover h3,
.dash-compact-card.card-tc:active h3,
.dash-group-cards-4 .dash-compact-card.card-tc:hover h3,
.dash-group-cards-4 .dash-compact-card.card-tc:active h3 {
    color: #93c5fd !important;
}

/* Pago mínimo estimado */
.dash-compact-card.card-pagominimo:hover,
.dash-compact-card.card-pagominimo:active {
    border-color: rgba(56, 189, 248, 0.45) !important;
    background: rgba(56, 189, 248, 0.08) !important;
}

.dash-group .dash-compact-card:not(.card-balance) p {
    font-size: 1.05rem;
    font-weight: 800;
}

/* La barra de fecha ocupaba una franja entera para una sola linea de texto de
   bajo valor. Se reduce a un separador discreto. */
.dash-date-bar {
    background: transparent;
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 0;
    padding: 12px 0 4px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-top: 10px;
}

/* En pantallas anchas la cifra principal puede crecer mas sin apretar nada. */
@media (min-width: 900px) {
    .dash-compact-card.card-balance p {
        font-size: 2.4rem;
    }
    .dash-compact-card.card-balance {
        padding: 26px 16px 20px;
    }
}

/* ── Contenedores vacios ──
   Dos bloques del resumen reservaban espacio aunque no tuvieran nada dentro: el
   widget de presupuestos (vacio hasta que hay datos, pero con margen inline) y el
   grupo inferior de tarjetas mensuales (colapsado, pero dejando sus bordes y
   margenes). Entre los dos abrian un hueco visible bajo el resumen. */

#presupuestosWidget:empty {
    margin-bottom: 0 !important;
}

/* Un grupo cuyos hijos estan todos ocultos no debe dejar borde ni margen. */
.dash-group:not(:has(> *:not([style*="display: none"]):not([style*="display:none"]))) {
    display: none;
}

/* ── Icono de categoria de presupuesto ──
   Lo usan la pagina de presupuestos y el widget del inicio. Estaba solo dentro de
   presupuestos.html, y por eso el inicio pintaba las categorias sin icono. */
.pres-cat-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1;
}
/* El widget del inicio tiene tarjetas mas pequenas. */
.pres-cat-icono.chico {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 0.8rem;
}

/* ── Gastos en categorias sin presupuesto ──
   Aviso, no error: el dinero esta bien registrado, lo que falta es la categoria
   donde encajarlo. En ambar y no en rojo por eso mismo. */
.pres-huerfanas {
    background: rgba(245, 158, 11, 0.07);
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: var(--card-r, 16px);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.pres-huerfanas-titulo {
    color: #fbbf24;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.pres-huerfanas-texto {
    color: #94a3b8;
    font-size: 0.83rem;
    line-height: 1.4;
    margin: 0 0 10px;
}
.pres-huerfanas-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pres-huerfana {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.1);
    color: #fde68a;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.pres-huerfana:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
}
.pres-huerfana .mas {
    color: #fbbf24;
    font-weight: 800;
}

/* ── Tarjetas de presupuesto del inicio ──
   Mismo lenguaje que la pagina de presupuestos y que la app: recuadro de icono con
   el color de la categoria, nombre, cifras y una dona con el porcentaje usado. El
   color de la dona comunica el estado; el del icono identifica la categoria. Son
   dos cosas distintas y por eso no comparten color. */
/* Los presupuestos del inicio: una fila que se desliza.

   Se quedan todos a la vista de a uno o dos, y el alto del bloque no cambia
   con el numero de presupuestos que tenga cada usuario. */
.dash-pres-caja {
    /* Sin esto, la fila ancha de dentro empuja el ancho de todo el inicio:
       un contenedor flexible no baja de su contenido si no se le dice. */
    min-width: 0;
    background: rgba(30, 120, 129, 0.06);
    border: 1px solid rgba(30, 120, 129, 0.15);
    border-radius: 14px;
    padding: 1.2rem;
    margin-bottom: 1rem;
}

.dash-pres-titulo {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 1rem;
    color: #1E7881;
    font-size: 1.1rem;
    font-weight: 700;
}

/* La pista solo sale cuando hay algo mas que ver; lo decide el JS, que es quien
   sabe cuantos presupuestos hay. */
.dash-pres-pista {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
}

/* La fila de presupuestos. Se mueve arrastrando en tactil y con su barra en el
   ordenador, que es mas directo que unas flechas: se ve de un vistazo cuanto
   queda por ver y se llega a cualquier punto de un tiron. */
.dash-pres-fila {
    position: relative;
    min-width: 0;
}
.dash-pres-carrusel {
    display: flex;
    min-width: 0;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Sitio para la sombra de foco de las tarjetas al tabular. */
    padding: 3px 3px 10px;
    margin-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(30, 120, 129, 0.45) transparent;
    -webkit-overflow-scrolling: touch;
}


.dash-pres-carrusel::-webkit-scrollbar { height: 8px; }

.dash-pres-carrusel::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.12);
    border-radius: 4px;
}

.dash-pres-carrusel::-webkit-scrollbar-thumb {
    background: rgba(30, 120, 129, 0.75);
    border-radius: 4px;
}

.dash-pres-carrusel::-webkit-scrollbar-thumb:hover {
    background: rgba(30, 120, 129, 0.95);
}

.dash-pres-carrusel .dash-pres-card {
    /* Justo un cuarto de la fila, descontando los tres huecos: se ven cuatro y
       la siguiente empieza donde acaba la pantalla. El minimo es lo que necesita
       el nombre sin cortarse; por debajo de eso ya no encogen y caben menos de
       cuatro, que es lo que pasa en un movil. */
    flex: 0 0 calc((100% - 30px) / 4);
    min-width: 196px;
    scroll-snap-align: start;
}

.dash-pres-vertodos {
    width: 100%;
    padding: 0.6rem;
    background: rgba(30, 120, 129, 0.15);
    border: 1px solid rgba(30, 120, 129, 0.3);
    color: #1E7881;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}

.dash-pres-vertodos:hover { background: rgba(30, 120, 129, 0.25); }
.dash-pres-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'head dona' 'cifras dona';
    align-items: center;
    gap: 2px 12px;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(135deg, rgba(30,41,59,0.55), rgba(15,23,42,0.55));
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.dash-pres-card:hover {
    background: linear-gradient(135deg, rgba(30,41,59,0.8), rgba(15,23,42,0.8));
    border-color: rgba(148, 163, 184, 0.3);
    transform: translateY(-1px);
}
.dash-pres-head {
    grid-area: head;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.dash-pres-nombre {
    color: #e2e8f0;
    font-weight: 700;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-pres-cifras {
    grid-area: cifras;
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding-left: 30px;   /* alineado con el nombre, no con el icono */
    min-width: 0;
}
.dash-pres-gastado {
    color: #f1f5f9;
    font-weight: 700;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}
.dash-pres-asignado {
    color: #94a3b8;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La dona: un conic-gradient con un agujero, sin ninguna libreria. */
.dash-pres-dona {
    grid-area: dona;
    --pct: 0;
    --col: #22c55e;
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(var(--col) calc(var(--pct) * 1%), rgba(148,163,184,0.18) 0);
}
.dash-pres-dona::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #111c2e;
}
.dash-pres-dona > span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--col);
    z-index: 1;
    font-variant-numeric: tabular-nums;
}

/* Estado: holgado, ajustado o excedido. */
.dash-pres-holgado  .dash-pres-dona { --col: #22c55e; }
.dash-pres-ajustado .dash-pres-dona { --col: #f59e0b; }
.dash-pres-excedido .dash-pres-dona { --col: #ef4444; }
.dash-pres-excedido { border-color: rgba(239, 68, 68, 0.35); }
.dash-pres-excedido .dash-pres-gastado { color: #fca5a5; }

@media (max-width: 420px) {
    /* En un movil se ve una entera y el borde de la siguiente, que es lo que
       invita a deslizar. */
    .dash-pres-carrusel .dash-pres-card { flex-basis: 78%; min-width: 78%; }
}

/* ── Comparativa presupuesto / gasto / disponible ──
   Barras de CSS, no un <canvas>. Una dona reparte un total entre partes, y aqui
   hay dos totales por categoria: lo asignado y lo gastado. La comparacion pide una
   barra dentro de otra, que ademas se lee con lupa y con lector de pantalla. */
/* La pista es la escala comun a todas las filas. El marco punteado es lo asignado
   y la barra llena lo gastado, sobre la misma escala: asi se ve quien se paso. */
/* ── Repetir en los proximos meses ── */
.repetir-check {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #cbd5e1;
    font-size: 0.88rem;
    cursor: pointer;
    user-select: none;
}
.repetir-check input { width: 17px; height: 17px; accent-color: #22c55e; cursor: pointer; }
.repetir-meses {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    padding-left: 26px;
    color: #94a3b8;
    font-size: 0.82rem;
}
.repetir-meses input {
    width: 68px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 9px;
    padding: 0.42rem 0.55rem;
    color: #e8ecf2;
    text-align: center;
    font-weight: 700;
}

/* Paleta de colores */
.tc-colores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tc-color {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid rgba(148, 163, 184, 0.35);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease;
}

.tc-color:hover { transform: scale(1.12); }

.tc-color.activo {
    border-color: #e8ecf2;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.45);
}

/* El boton "A": deja que mande el color de la franquicia */
.tc-color.auto {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
}

/* La tarjeta de credito, dibujada.

   El color que elige el usuario pinta la tarjeta entera; encima van solo dos
   cosas, el chip y el simbolo de la marca, que es lo que hace que se lea como
   una tarjeta y no como un cuadro de color. La proporcion es la real, asi que
   basta con dar el ancho. */
.tc-tarjeta {
    --tc: #60a5fa;
    position: relative;
    display: inline-block;
    width: 38px;
    aspect-ratio: 1.586;
    max-width: 100%;
    border-radius: 4px;
    background-color: var(--tc);
    /* El degradado va aparte del color para no depender de color-mix. */
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.24),
                                              rgba(0, 0, 0, 0.3));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
                0 1px 3px rgba(0, 0, 0, 0.4);
    vertical-align: middle;
    flex-shrink: 0;
}

.tc-tarjeta.grande {
    width: 64px;
    border-radius: 6px;
}

.tc-chip {
    position: absolute;
    left: 11%;
    top: 22%;
    width: 20%;
    height: 24%;
    border-radius: 1.5px;
    background: linear-gradient(135deg, #f7e3a1, #c9a227);
}

.tc-marca {
    position: absolute;
    right: 7%;
    bottom: 6%;
    color: #fff;
    font-size: 6px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.55);
}

.tc-tarjeta.grande .tc-marca { font-size: 9px; }

/* La tarjeta ocupa el hueco del emoji del encabezado, asi que tiene que
   comportarse como el: sin la altura de linea del texto que la rodea. */
.subpage-hero-icon .tc-tarjeta {
    width: 56px;
    display: block;
}

.tc-previa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
}

.tc-previa-txt {
    color: #cbd5e1;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Los pasos del analisis del asesor.

   Cada uno se enciende cuando le toca y se marca cuando termina. No es
   decoracion: dice de donde sale la recomendacion que viene detras. */
.asesor-pensando {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    text-align: left;
    max-width: 320px;
}

.asesor-pensando li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    color: #64748b;
    font-size: 0.86rem;
    opacity: 0.45;
    transition: opacity 260ms ease, color 260ms ease;
}

.asesor-pensando li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #475569;
    flex-shrink: 0;
    transition: background 260ms ease, box-shadow 260ms ease;
}

.asesor-pensando li.activo {
    opacity: 1;
    color: #cbd5e1;
}

.asesor-pensando li.activo::before {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
    animation: asesor-latido 900ms ease-in-out infinite;
}

.asesor-pensando li.listo::before {
    background: #22c55e;
    box-shadow: none;
    animation: none;
}

.asesor-pensando li.listo {
    opacity: 0.8;
}

@keyframes asesor-latido {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14); }
    50%      { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
    .asesor-pensando li.activo::before { animation: none; }
}

/* Pagos no uniformes: una casilla por cuota.

   Van en rejilla y estrechas a proposito: lo normal es que el usuario solo
   cambie una o dos de diez, asi que lo que importa es verlas todas de una vez
   para encontrar la que toca. */
.cuotas-ayuda {
    margin: 0.35rem 0 0.6rem;
    color: #94a3b8;
    font-size: 0.78rem;
    line-height: 1.35;
}

.cuotas-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
    max-height: 210px;
    overflow-y: auto;
    padding: 2px;
}

.cuota-fila {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cuota-fila span {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 600;
}

.cuota-fila input {
    width: 100%;
    padding: 0.42rem 0.55rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    color: #e8ecf2;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}

.cuotas-total {
    margin-top: 0.6rem;
    color: #cbd5e1;
    font-size: 0.84rem;
    font-weight: 600;
}

/* Un boton que esta trabajando no invita a volver a pulsarlo. */
.btn-guardar[disabled] {
    opacity: 0.65;
    cursor: progress;
}

/* ════════════════════════════════════════
   FOCO DE TECLADO
   ════════════════════════════════════════

   Ningun boton ni enlace tenia estilo de foco: quien navega con el teclado
   --por costumbre o porque lo necesita-- iba a ciegas, sin saber sobre que
   esta parado antes de pulsar Intro. En una aplicacion donde se borran deudas
   y se mueven pagos, eso es un problema de verdad.

   Se usa :focus-visible y no :focus a proposito: el navegador solo lo aplica
   cuando el foco viene del teclado, asi que con raton no cambia nada. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #5eead4;
    outline-offset: 2px;
    /* El halo se ve tambien sobre fondos claros y sobre los degradados. */
    box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.25);
    border-radius: 6px;
}

/* Los que ya son redondos conservan su forma. */
.bottom-nav-fab:focus-visible,
.tc-color:focus-visible,
.lang-globe-btn:focus-visible {
    border-radius: 50%;
}

/* ════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   ════════════════════════════════════════

   Quien pide menos movimiento en su sistema suele hacerlo porque le marea o
   le distrae. Habia bloques sueltos que lo respetaban; este los cubre todos,
   incluidas las animaciones que se anadan despues.

   No se pone `animation: none`: eso romperia las que llevan `forwards` y
   dejan algo en su sitio al terminar. Con una duracion minima se ejecutan,
   acaban donde deben, y no hay movimiento perceptible. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ════════════════════════════════════════
   PRESUPUESTO GENERAL Y DEL MES
   ════════════════════════════════════════

   Un presupuesto ya no es un numero suelto: tiene un tipo (monto o porcentaje
   de los ingresos), un valor de siempre y, si el usuario quiso, un valor solo
   para el mes que esta mirando. Estas clases son las que hacen visible esa
   diferencia; sin ellas, ver 800.000 en diciembre no dice si es lo normal o
   algo que se puso a proposito. */

/* Selector de tipo: dos botones que se comportan como pestanas. */
.pres-tipo-fila {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.pres-tipo-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem 0.5rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.45);
    color: #94a3b8;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.pres-tipo-opt:hover { border-color: rgba(34, 211, 238, 0.45); }

.pres-tipo-opt.activo {
    background: rgba(30, 120, 129, 0.22);
    border-color: rgba(34, 211, 238, 0.65);
    color: #e8ecf2;
}

/* Hasta donde llega el cambio. Cada opcion lleva su explicacion debajo: la
   diferencia entre 'solo este mes' y 'de aqui en adelante' no se adivina. */
.pres-alcance {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.pres-alcance-opt {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.4);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
}

.pres-alcance-opt:hover { border-color: rgba(34, 211, 238, 0.4); }

.pres-alcance-opt.activo {
    border-color: rgba(34, 211, 238, 0.6);
    background: rgba(30, 120, 129, 0.16);
}

.pres-alcance-opt input { margin-top: 0.2rem; accent-color: #22d3ee; }
.pres-alcance-opt .txt { display: flex; flex-direction: column; gap: 0.15rem; }
.pres-alcance-opt .tit { color: #e8ecf2; font-size: 0.87rem; font-weight: 600; }
.pres-alcance-opt .sub { color: #7a8ba5; font-size: 0.76rem; line-height: 1.35; }

/* Lo que va a quedar, calculado antes de guardar. Un 15% no dice nada hasta
   que se ve en pesos. */
.pres-hint {
    margin: 0.4rem 0 0;
    color: #7a8ba5;
    font-size: 0.78rem;
}

.pres-hint strong { color: #22d3ee; }

/* La chapa de 'personalizado': es lo unico que distingue un mes tocado a mano
   de uno que sigue al general. */
.pres-chapa {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: rgba(168, 85, 247, 0.16);
    border: 1px solid rgba(168, 85, 247, 0.45);
    color: #c084fc;
    white-space: nowrap;
}

.pres-card-sub {
    margin-top: 0.3rem;
    color: #7a8ba5;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/* Aviso del mes: de donde sale el ingreso con el que se calculan los
   porcentajes. Sin decirlo, un presupuesto que cambia solo parece un fallo. */
.pres-ingreso-nota {
    margin: 0 0 0.9rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(30, 120, 129, 0.2);
    color: #94a3b8;
    font-size: 0.8rem;
}

.pres-ingreso-nota strong { color: #22d3ee; }

.btn-pres-restaurar {
    width: 100%;
    margin-top: 0.7rem;
    padding: 0.6rem;
    border-radius: 10px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.1);
    color: #22d3ee;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

.btn-pres-restaurar:hover { background: rgba(34, 211, 238, 0.18); }

/* El aviso de la primera configuracion. Se ensena una vez, antes de repartir
   nada, porque 'configurar mi presupuesto' sonaba a que valia solo para este
   mes y no a que se iba a aplicar a todos. */
.pres-aviso-general {
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(30, 120, 129, 0.16), rgba(34, 197, 94, 0.08));
    border: 1px solid rgba(34, 211, 238, 0.28);
    margin-bottom: 1.2rem;
}

.pres-aviso-general h4 {
    margin: 0 0 0.45rem;
    color: #22d3ee;
    font-size: 0.95rem;
    font-weight: 800;
}

.pres-aviso-general p {
    margin: 0 0 0.45rem;
    color: #cbd5e1;
    font-size: 0.83rem;
    line-height: 1.45;
}

.pres-aviso-general p.ejemplo {
    margin-bottom: 0;
    color: #94a3b8;
    font-size: 0.79rem;
}

/* ════════════════════════════════════════
   LOGOTIPO DE LA FRANQUICIA
   ════════════════════════════════════════

   Sobre la tarjeta iba la abreviatura --"MC", "DISC"-- y nadie reconoce una
   Mastercard por dos letras. El dibujo viene descrito desde el servidor y se
   arma como <svg> (ver logoFranquicia en app.js). */
.tc-logo {
    position: absolute;
    right: 4%;
    bottom: 6%;
    display: block;
    /* La marca va sobre un color que el usuario elige, asi que puede tocarle
       un fondo parecido. Una sombra minima la despega sin ensuciarla. */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

/* Las marcas en fila, para elegir con el ojo. */
.tc-franq-tira {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.tc-franq-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 34px;
    padding: 0 8px;
    border-radius: 9px;
    /* Fondo claro fijo: los logotipos son marcas y estan pensadas para ir
       sobre blanco. Sobre el azul oscuro de la aplicacion, el azul de Visa
       desaparece. */
    background: #f8fafc;
    border: 1.5px solid transparent;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.tc-franq-opt:hover { opacity: 0.85; }

.tc-franq-opt.activo {
    opacity: 1;
    border-color: #22d3ee;
    transform: translateY(-1px);
}

.tc-franq-opt .tc-logo {
    position: static;
    filter: none;
}

/* El desplegable se queda, pero discreto: la tira es lo que se usa. */
.tc-franq-select {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* ════════════════════════════════════════
   TASA Y PLAZO
   ════════════════════════════════════════

   El banco dice 26,82% E.A. y el simulador pide la mensual. Antes habia que
   convertirla aparte y copiar el numero; equivocarse en ese paso descuadra
   todas las proyecciones sin que nada avise. Ahora la otra cara se ensena
   debajo del campo, y lo mismo con el plazo en meses y en años. */
.campo-equiv {
    display: block;
    margin-top: 4px;
    color: #22d3ee;
    font-size: 0.78rem;
    /* Reserva su linea: sin esto el formulario da un salto en cuanto el
       usuario escribe la primera cifra. */
    min-height: 1em;
}

.plazo-fila {
    /* Los tres a la vez: cuanto, en que unidad y si tiene plazo. El numero va
       estrecho a proposito --ahi caben cuatro cifras y sobran-- para que la
       unidad y el interruptor quepan en la misma fila sin apretarse. */
    display: grid;
    grid-template-columns: minmax(64px, 0.7fr) minmax(88px, auto) auto;
    gap: 10px;
    align-items: end;
}

.plazo-campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* Cada cuadro dice arriba lo que es. Sin esto, el interruptor quedaba al lado
   de dos campos sin nombre y habia que adivinar a que se referia. */
.plazo-campo > label {
    margin: 0;
    white-space: nowrap;
}

.plazo-campo > input,
.plazo-campo > select {
    margin: 0;
}

.plazo-unidad {
    width: 100%;
    min-width: 0;
}

@media (max-width: 460px) {
    /* En un movil estrecho, el interruptor baja a su propia fila en vez de
       aplastar los otros dos. */
    .plazo-fila {
        grid-template-columns: minmax(64px, 1fr) minmax(88px, 1fr);
    }
    .plazo-fila > .plazo-campo:last-child {
        grid-column: 1 / -1;
        align-items: center !important;
        margin-top: 6px;
    }
}

/* ════════════════════════════════════════
   VISTA PREVIA DE IMPORTACION
   ════════════════════════════════════════

   Subir el archivo ya no guarda nada: se ensena lo que se entendio y el
   usuario corrige antes de confirmar. La tabla es editable y cada celda mala
   dice por que lo esta. */
.import-previa {
    max-width: 1100px;
    width: 96%;
}

.import-previa-titulo { margin: 0 0 0.3rem; color: #22d3ee; font-size: 1.1rem; }
.import-previa-nota { margin: 0 0 0.9rem; color: #94a3b8; font-size: 0.85rem; }

.import-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.8rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 0.86rem;
    font-weight: 600;
}

.import-resumen .bien { color: #22c55e; }
.import-resumen .mal { color: #f59e0b; }
.import-resumen .tasa { color: #94a3b8; font-weight: 500; margin-left: auto; }

/* La tabla puede traer doscientas filas: se desplaza dentro de su caja en vez
   de estirar el modal fuera de la pantalla. */
.import-tabla-caja {
    max-height: 52vh;
    overflow: auto;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.import-tabla { width: 100%; border-collapse: collapse; font-size: 0.8rem; }

.import-tabla thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #111c2f;
    color: #93c5fd;
    text-align: left;
    padding: 0.5rem 0.55rem;
    white-space: nowrap;
}

.import-tabla td {
    padding: 0.3rem 0.4rem;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    vertical-align: top;
}

/* La fila con errores se marca entera: es lo que hace que se encuentre entre
   ciento noventa que estan bien. */
.import-tabla tr.fila-mal { background: rgba(239, 68, 68, 0.07); }

.import-campo {
    width: 100%;
    min-width: 72px;
    padding: 0.28rem 0.4rem;
    border-radius: 7px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.6);
    color: #e8ecf2;
    font-size: 0.8rem;
    box-sizing: border-box;
}

.import-campo.mal {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.import-tasa { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.import-tasa .import-campo { min-width: 64px; }

.import-estado { white-space: nowrap; font-size: 0.95rem; }
.import-aviso { margin-left: 2px; cursor: help; }

/* El motivo, escrito, debajo del icono: un aspa sola no dice que arreglar. */
.import-error {
    color: #fca5a5;
    font-size: 0.72rem;
    font-weight: 600;
    max-width: 190px;
    white-space: normal;
    line-height: 1.3;
    margin-top: 2px;
}

.import-previa-botones { flex-wrap: wrap; }

/* ════════════════════════════════════════
   VER TODOS Y SELECCION MULTIPLE
   ════════════════════════════════════════ */

/* Ver todos, junto a las flechas del mes. El mes sigue siendo lo normal --es
   como se mira el dinero-- pero habia apuntes a los que no se llegaba sin
   recordar en que mes estaban. */
.month-filter-todos {
    margin-left: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: transparent;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.month-filter-todos:hover { border-color: rgba(34, 211, 238, 0.5); color: #cbd5e1; }

.month-filter-todos.activo {
    background: rgba(34, 211, 238, 0.16);
    border-color: #22d3ee;
    color: #22d3ee;
}

/* Con «todos» puesto, las flechas del mes siguen ahi pero apagadas: se ve que
   no estan mandando, y se ve como volver. */
.month-filter-bar.inactiva .month-filter-arrow,
.month-filter-bar.inactiva .month-filter-label { opacity: 0.45; }

/* La barra de acciones aparece sola cuando hay algo marcado: una barra
   siempre visible con los botones apagados es ruido. */
/* Barra de seleccion
   ------------------
   Flota sobre la barra de navegacion en vez de ir encima de la tabla. Antes,
   al bajar por una lista larga la barra se iba con el desplazamiento y habia
   que volver arriba para borrar lo que se acababa de marcar abajo. */
.barra-seleccion {
    display: none;
    align-items: center;
    gap: 10px;
    position: fixed;
    bottom: 72px;
    left: 0;
    right: 0;
    z-index: 1398;
    /* La misma caja que la barra de navegacion de abajo. */
    width: calc(100% - var(--page-mx) * 2);
    max-width: 1200px;
    margin-inline: auto;
    padding: 0.55rem 0.7rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(22, 40, 58, 0.97), rgba(15, 30, 45, 0.98));
    border: 1px solid rgba(34, 211, 238, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.barra-seleccion.visible {
    display: flex;
    animation: sel-entra 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

@keyframes sel-entra {
    from { opacity: 0; transform: translateY(10px); }
}

.sel-cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
    cursor: pointer;
    transition: background 0.16s, color 0.16s;
}
.sel-cerrar:hover { background: rgba(148, 163, 184, 0.24); color: #f1f5f9; }

.sel-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-right: auto;
    min-width: 0;
}

.barra-seleccion .sel-cuenta {
    color: #22d3ee;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.2;
}

/* Cuanto suma lo marcado. Es lo que se quiere saber antes de borrar o copiar
   media docena de apuntes de golpe. */
.sel-suma {
    color: #e2e8f0;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
}

.sel-accion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 0.45rem 0.85rem;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.16s, border-color 0.16s, transform 0.16s;
}
.sel-accion:hover { transform: translateY(-1px); }
.sel-accion:active { transform: translateY(0); }
.sel-accion svg { flex: none; }

.sel-copiar {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.45);
    color: #4ade80;
}
.sel-copiar:hover { background: rgba(34, 197, 94, 0.3); }

.sel-borrar {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.45);
    color: #f87171;
}
.sel-borrar:hover { background: rgba(239, 68, 68, 0.3); }

/* Liquidar no borra: deja la deuda saldada anotando el pago de lo que quedaba.
   Va en azul y no en rojo justamente para no confundirse con eliminar. */
.sel-liquidar {
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(59, 130, 246, 0.45);
    color: #93c5fd;
}
.sel-liquidar:hover { background: rgba(59, 130, 246, 0.3); }

/* Volver a poner en activa lo que se dio por liquidado. Va en gris: no crea ni
   destruye nada, deshace una marca. */
.sel-reabrir {
    background: rgba(148, 163, 184, 0.14);
    border-color: rgba(148, 163, 184, 0.4);
    color: #cbd5e1;
}
.sel-reabrir:hover { background: rgba(148, 163, 184, 0.26); }

/* El boton de estado en la fila, junto a editar y eliminar. */
.btn-estado {
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #34d399;
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-width: 28px;
    min-height: 28px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.btn-estado:hover {
    background: rgba(16, 185, 129, 0.35);
    border-color: #10b981;
    color: #6ee7b7;
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
.btn-estado.es-liquidada {
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #fbbf24;
}
.btn-estado.es-liquidada:hover {
    background: rgba(245, 158, 11, 0.35);
    border-color: #f59e0b;
    color: #fde68a;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

/* En un movil no caben los dos rotulos al lado de la suma: quedan los iconos,
   que con el color ya dicen cual es cual. */
@media (max-width: 560px) {
    .sel-accion { padding: 0.5rem 0.6rem; }
    .sel-accion span { display: none; }
}

.col-sel {
    width: 42px;
    text-align: center;
    vertical-align: middle;
}
.col-sel input, .sel-fila, input.sel-fila, #selTodoDeudas {
    cursor: pointer;
    accent-color: #10b981;
    width: 19px;
    height: 19px;
    border-radius: 5px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    vertical-align: middle;
    margin: 0 auto;
    display: inline-block;
}
.col-sel input:hover, .sel-fila:hover, input.sel-fila:hover, #selTodoDeudas:hover {
    transform: scale(1.18);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.celda-cuotas-centradas {
    text-align: center !important;
    display: block;
    margin: 3px auto 0;
}

/* La fila marcada se tine entera y lleva un filo a la izquierda: con veinte
   filas, una casilla de 16px no se ve desde el otro lado de la tabla. */
tr.fila-sel.marcada { background: rgba(34, 211, 238, 0.12); }
tr.fila-sel.marcada td:first-child { box-shadow: inset 3px 0 0 #22d3ee; }
tr.fila-sel { transition: background 0.14s; }

/* Selector de mes
   ---------------
   Sustituye al calendario nativo de <input type="month">, que cada navegador
   dibuja a su manera y en Firefox ni siquiera existe. Doce meses a la vista,
   el ano a los lados y un boton para volver al mes actual. */
.selmes-fondo {
    position: fixed;
    inset: 0;
    z-index: 2400;
    background: rgba(2, 6, 23, 0.45);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    animation: selmes-entra-fondo 0.14s ease-out;
}

.selmes {
    position: fixed;
    z-index: 2401;
    width: 272px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, #16213a, #111a2e);
    border: 1px solid rgba(96, 165, 250, 0.28);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    transform-origin: top center;
    animation: selmes-entra 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes selmes-entra-fondo { from { opacity: 0; } }
@keyframes selmes-entra {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
}

.selmes-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.selmes-ano {
    font-size: 16px;
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: 0.02em;
}

.selmes-ano-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
    cursor: pointer;
    transition: background 0.16s, color 0.16s;
}
.selmes-ano-btn:hover { background: rgba(59, 130, 246, 0.28); color: #dbeafe; }

.selmes-rejilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.selmes-mes {
    padding: 9px 0;
    border-radius: 9px;
    border: 1px solid transparent;
    background: rgba(148, 163, 184, 0.08);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.selmes-mes:hover { background: rgba(59, 130, 246, 0.24); color: #e2e8f0; }

/* El mes de hoy va senalado aunque se este mirando otro: es la referencia para
   saber si lo que se ve es pasado o futuro. */
.selmes-mes.hoy { border-color: rgba(34, 211, 238, 0.55); color: #a5f3fc; }

.selmes-mes.elegido {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #60a5fa;
    color: #fff;
}

.selmes-pie { margin-top: 10px; }

.selmes-hoy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 8px 0;
    border-radius: 9px;
    border: 1px solid rgba(34, 211, 238, 0.3);
    background: rgba(34, 211, 238, 0.1);
    color: #a5f3fc;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.16s;
}
.selmes-hoy:hover { background: rgba(34, 211, 238, 0.22); }

@media (max-width: 360px) {
    .selmes { width: calc(100vw - 24px); }
}

/* Dialogos
   --------
   Los avisos y las confirmaciones los pintaba el navegador. Esos cuadros no se
   pueden vestir, cada navegador los dibuja distinto, en movil salen pegados a
   la barra de direcciones con el dominio delante, y bloquean la pagina entera.
   Estos son los mismos, pero con el aspecto del resto de la aplicacion. */
.dlg-fondo {
    position: fixed;
    inset: 0;
    z-index: 2600;
    background: rgba(2, 6, 23, 0.62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: dlg-fondo-entra 0.15s ease-out;
}

.dlg {
    position: fixed;
    z-index: 2601;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(400px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(180deg, #16213a, #111a2e);
    border: 1px solid rgba(96, 165, 250, 0.3);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    animation: dlg-entra 0.17s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

/* Un filo rojo arriba cuando lo que se va a hacer destruye algo: se ve antes
   de leer el texto. */
.dlg.peligro { border-top: 3px solid #ef4444; }

@keyframes dlg-fondo-entra { from { opacity: 0; } }
@keyframes dlg-entra {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
}

.dlg-titulo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 800;
    color: #e2e8f0;
}

.dlg-icono { font-size: 19px; line-height: 1; }

.dlg-mensaje {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
    color: #cbd5e1;
    /* Los desgloses llegan con saltos de linea: hay que respetarlos. */
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.dlg-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.dlg-btn {
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.16s, border-color 0.16s, transform 0.16s;
}
.dlg-btn:active { transform: scale(0.97); }
.dlg-btn:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }

.dlg-cancelar {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.28);
    color: #cbd5e1;
}
.dlg-cancelar:hover { background: rgba(148, 163, 184, 0.24); }

.dlg-ok {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #60a5fa;
    color: #fff;
}
.dlg-ok:hover { filter: brightness(1.1); }

.dlg-peligro {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #f87171;
}

/* En un movil estrecho los botones se apilan y el principal queda abajo, que
   es donde llega el pulgar. */
@media (max-width: 400px) {
    .dlg-acciones { flex-direction: column-reverse; }
    .dlg-btn { width: 100%; }
}

/* Tablas ordenables y con filtros
   -------------------------------
   Se pulsa el titulo de una columna para ordenar por ella y se vuelve a pulsar
   para invertir; el embudo abre los valores de esa columna para elegir cuales
   se ven, como en una hoja de calculo. */
.th-ordenable {
    position: relative;
    white-space: nowrap;
}

.th-titulo {
    cursor: pointer;
    user-select: none;
}
.th-titulo:hover { text-decoration: underline; }

.th-orden {
    display: inline-block;
    width: 10px;
    margin-left: 3px;
    font-size: 9px;
    cursor: pointer;
    opacity: 0.9;
}

.th-embudo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    margin-left: 4px;
    padding: 0;
    vertical-align: middle;
    border: none;
    border-radius: 5px;
    background: transparent;
    /* Apagado hasta que se pasa por encima: veinte embudos encendidos a la vez
       tapan los titulos, que es lo que hay que leer. */
    color: currentColor;
    opacity: 0.35;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.th-ordenable:hover .th-embudo { opacity: 0.75; }
.th-embudo:hover { background: rgba(255, 255, 255, 0.16); opacity: 1; }

/* Con un filtro puesto se queda encendido: es la unica pista de que la tabla
   no esta ensenando todo lo que tiene. */
.th-embudo.activo {
    opacity: 1;
    color: #22d3ee;
    background: rgba(34, 211, 238, 0.18);
}

.filtro-fondo {
    position: fixed;
    inset: 0;
    z-index: 2450;
}

.filtro-col {
    position: fixed;
    z-index: 2451;
    width: 236px;
    padding: 10px;
    border-radius: 12px;
    background: linear-gradient(180deg, #16213a, #111a2e);
    border: 1px solid rgba(96, 165, 250, 0.3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    animation: filtro-entra 0.14s ease-out;
}

@keyframes filtro-entra {
    from { opacity: 0; transform: translateY(-5px); }
}

.filtro-buscar {
    width: 100%;
    padding: 7px 9px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.8);
    color: #e2e8f0;
    font-size: 13px;
    font-family: inherit;
}
.filtro-buscar:focus { outline: none; border-color: #60a5fa; }

.filtro-lista {
    max-height: 210px;
    overflow-y: auto;
    margin-bottom: 8px;
}

.filtro-op {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-radius: 6px;
    font-size: 13px;
    color: #cbd5e1;
    cursor: pointer;
}
.filtro-op:hover { background: rgba(59, 130, 246, 0.14); }
.filtro-op input { accent-color: #22d3ee; cursor: pointer; }
.filtro-op span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filtro-pie {
    display: flex;
    gap: 6px;
}

.filtro-btn {
    flex: 1;
    padding: 6px 0;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.filtro-btn:hover { background: rgba(148, 163, 184, 0.22); }

.filtro-ok {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #60a5fa;
    color: #fff;
}
.filtro-ok:hover { filter: brightness(1.1); }

/* El estado de una deuda o una compra: activa o liquidada. */
.chip-estado {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.chip-estado.activa {
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(96, 165, 250, 0.4);
    color: #93c5fd;
}
.chip-estado.liquidada {
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #4ade80;
}

/* Elegir a cuantos meses copiar. Los atajos son los plazos que la gente usa
   —trimestre, semestre, ano—; el campo de al lado es para el resto. */
.copia-meses {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
}

.copia-mes {
    min-width: 42px;
    padding: 8px 0;
    border-radius: 9px;
    border: 1px solid rgba(96, 165, 250, 0.25);
    background: rgba(59, 130, 246, 0.1);
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.copia-mes:hover { background: rgba(59, 130, 246, 0.24); }
.copia-mes.elegido {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #60a5fa;
    color: #fff;
}

.copia-otro {
    width: 74px;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.8);
    color: #e2e8f0;
    font-size: 14px;
    font-family: inherit;
}
.copia-otro:focus { outline: none; border-color: #60a5fa; }

/* Movimientos financieros
   -----------------------
   Lo que se mueve sin ser ingreso ni gasto. La nota de arriba explica por que
   existe la seccion: es lo primero que se pregunta quien la abre. */
.fin-nota {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.22);
    color: #bfdbfe;
    font-size: 12.5px;
    line-height: 1.55;
}

.fin-resumen {
    /* Dos por fila, no «las que quepan».
       `auto-fit` con un minimo de cero no limita nada: los cuadros entraban
       todos en una fila de 343 pixeles, a cuarenta y dos cada uno y con el
       texto encima del de al lado. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 920px;
    margin: 0 auto 14px;
}

@media (min-width: 560px) {
    .fin-resumen { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

.fin-tarjeta {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(59, 130, 246, 0.16);
}

.fin-tarjeta-icono { font-size: 21px; line-height: 1; }

.fin-tarjeta-monto {
    margin: 0;
    color: #e2e8f0;
    font-size: 15px;
    font-weight: 800;
}

.fin-tarjeta h4 {
    margin: 1px 0 0;
    color: #94a3b8;
    font-size: 11.5px;
    font-weight: 600;
}

.fin-tarjeta small { color: #64748b; font-size: 10.5px; }

.fin-tipo { white-space: nowrap; }

/* Un movimiento que viene de una deuda o una tarjeta: aqui solo se mira. Va
   atenuado para que se vea de un golpe cual se puede tocar y cual no. */
.fin-derivado td { opacity: 0.86; }

.btn-ir {
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #93c5fd;
    border-radius: 7px;
    padding: 4px 9px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-ir:hover { background: rgba(59, 130, 246, 0.3); }

.fin-cuentas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dash-fin-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.dash-ver-todos {
    color: #60a5fa;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.dash-ver-todos:hover { text-decoration: underline; }

/* De que se compone el pago minimo del mes. Un solo numero no dejaba ver
   cuanto pesaban las tarjetas, ni distinguir «no hay» de «no se cuenta». */
.pm-desglose {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 6px;
    font-size: 11px;
    color: #94a3b8;
}

.pm-desglose span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.pm-desglose b { color: #cbd5e1; font-weight: 700; }

.pm-punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}
.pm-punto.pm-deudas { background: #f59e0b; }
.pm-punto.pm-tarjetas { background: #a855f7; }

/* La categoria de presupuesto que se llena sola. Va marcada para que se vea de
   un golpe que no se edita, y con su desglose debajo. */
.pres-card-auto {
    border-color: rgba(245, 158, 11, 0.35) !important;
}

.pres-auto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(148, 163, 184, 0.2);
    color: #f59e0b;
    font-size: 11px;
}

.pres-auto span { color: #94a3b8; }

/* Tablas que no se desplazan hacia los lados
   ------------------------------------------
   Una tabla de once columnas no cabe en un movil por mucho que se encoja la
   letra, y el scroll lateral esconde justo lo que se busca: el saldo y el pago
   minimo quedan fuera de la pantalla sin ninguna senal de que estan ahi.

   Por debajo de 760px cada fila pasa a ser una ficha: el titulo de la columna a
   la izquierda y el valor a la derecha. Los titulos los pone el modulo de
   tablas en `data-col` (ver _etiquetarCeldas en app.js). */
.tabla-fichas.fichas-activo,
.tabla-fichas.fichas-activo tbody,
.tabla-fichas.fichas-activo tr,
.tabla-fichas.fichas-activo td {
    display: block;
    width: auto;
}

/* La cabecera ya no hace falta: cada celda lleva su titulo. */
.tabla-fichas.fichas-activo thead { display: none; }

.tabla-fichas.fichas-activo tr {
    margin-bottom: 8px;
    padding: 4px 2px;
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.45);
    border: 1px solid rgba(59, 130, 246, 0.14);
}

.tabla-fichas.fichas-activo td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    border: none;
    text-align: right;
}

.tabla-fichas.fichas-activo td::before {
    content: attr(data-col);
    flex: none;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: left;
}

/* Una celda vacia no merece una linea con su etiqueta y nada al lado. */
.tabla-fichas.fichas-activo td:empty { display: none; }

/* La casilla de seleccion y los botones no llevan etiqueta: se entienden solos
   y ocupan menos sin ella. */
.tabla-fichas.fichas-activo td.col-sel,
.tabla-fichas.fichas-activo td.acciones,
.tabla-fichas.fichas-activo td.mov-inline-actions {
    justify-content: flex-end;
    padding-top: 4px;
    padding-bottom: 4px;
}
.tabla-fichas.fichas-activo td.col-sel::before,
.tabla-fichas.fichas-activo td.acciones::before,
.tabla-fichas.fichas-activo td.mov-inline-actions::before { content: none; }

/* La casilla, arriba del todo y a la izquierda, que es donde se busca. */
.tabla-fichas.fichas-activo td.col-sel { justify-content: flex-start; }

/* El filo de la fila marcada pasa a ser el borde entero: en modo ficha no hay
   «primera celda» donde ponerlo. */
.tabla-fichas.fichas-activo tr.fila-sel.marcada {
    border-color: #22d3ee;
    box-shadow: inset 2px 0 0 #22d3ee;
}
.tabla-fichas.fichas-activo tr.fila-sel.marcada td:first-child { box-shadow: none; }

/* La fila de totales se distingue del resto de fichas. */
.tabla-fichas.fichas-activo tr.mov-fila-totales {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(96, 165, 250, 0.3);
}

/* Nada de barras laterales en lo que envuelve a una tabla que ya sabe caber. */
.section,
.mov-tabla-wrap { overflow-x: visible; }

/* Mientras siga siendo una tabla, las columnas se reparten el ancho que hay y
   el texto largo parte en vez de ensanchar la fila. */
.tabla-fichas {
    width: 100%;
    table-layout: auto;
}
/* Las celdas venian con `white-space: nowrap`, y eso impedia que la tabla se
   encogiera: once columnas en una sola linea cada una sumaban 1530px dentro de
   un contenedor de 1200 y la tabla desbordaba incluso en una pantalla grande.

   Al dejarlas partir, «Tipo de deuda» cabe en dos lineas y la columna se
   estrecha; un importe como $12.000.000 no tiene donde partir, asi que se
   queda entero. Por eso no se usa `overflow-wrap: anywhere`: partiria las
   cifras por la mitad. */
.tabla-fichas:not(.fichas-activo) td,
.tabla-fichas:not(.fichas-activo) th {
    white-space: normal;
}

/* Y con menos aire a los lados caben mas columnas antes de tener que pasar a
   fichas. */
.tabla-fichas:not(.fichas-activo) td,
.tabla-fichas:not(.fichas-activo) th {
    padding-left: 8px;
    padding-right: 8px;
}

/* El titulo de la columna si puede partir; lo que no puede es la flecha de
   orden quedarse sola en una linea. */
.tabla-fichas:not(.fichas-activo) .th-ordenable { white-space: normal; }

/* De cuanto se partia, debajo del saldo actual. Antes era una columna entera
   con la misma pinta que esta, y la tabla de deudas es la que mas ancho pide. */
.saldo-de {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 10.5px;
    white-space: nowrap;
}

/* ────────────────────────────────────────
   EL PLAZO Y SU INTERRUPTOR

   «Sin plazo definido» colgaba suelto debajo del campo, con una casilla del
   sistema y sin alinear con nada. Ahora va en la misma linea que el rotulo
   «Plazo», a la derecha: es donde esta mirando quien acaba de decidir que ese
   prestamo no tiene cuotas. */
.plazo-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    /* El mismo alto que un campo de al lado, para que la fila quede recta. */
    min-height: 42px;
    /* Relleno igual por los dos lados: la palabra va centrada de verdad.
       Antes llevaba la palanca a la izquierda y el relleno era desigual para
       compensarla, asi que el «No» quedaba descentrado. */
    padding: 4px 14px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 999px;
    background: rgba(148, 163, 184, .07);
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: border-color .18s, background .18s, color .18s;
}
.plazo-switch:hover { border-color: rgba(34, 211, 238, .38); color: #cbd5e1; }

.plazo-fila > .plazo-campo:last-child {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: flex-end;
    text-align: center !important;
}
.plazo-fila > .plazo-campo:last-child > label {
    text-align: center !important;
    width: 100%;
}
.plazo-fila > .plazo-campo:last-child .plazo-switch {
    width: 90px !important;
    max-width: 90px !important;
    min-width: 90px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box;
}

/* La casilla de verdad sigue ahi: es la que manda el formulario y la que lee
   el teclado. Solo esta escondida detras de la pista. */
.plazo-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

/* Ya no hay palanca: el cuadro es la respuesta. Se enciende entero, que se ve
   mejor que un puntito moviendose y deja la palabra en el centro. */
.plazo-switch-texto {
    font-weight: 700;
    letter-spacing: .2px;
    text-align: center !important;
    display: block;
    width: 100%;
    line-height: 1;
}

.plazo-switch input:checked ~ .plazo-switch-texto { color: #0b1424; }

.plazo-switch:has(input:checked) {
    background: #22d3ee;
    border-color: #22d3ee;
    color: #0b1424;
}

/* El foco se ve: la casilla esta escondida y sin esto no se sabria donde
   esta uno al llegar con el tabulador. */
.plazo-switch:has(input:focus-visible) {
    outline: 2px solid #22d3ee;
    outline-offset: 2px;
}

/* Cuando no hay plazo, el campo se apaga: sigue ahi, pero se ve que no toca. */
.plazo-fila input:disabled,
.plazo-fila select:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* La segunda cara de un dato, DEBAJO de la principal: los anos bajo los meses,
   la tasa equivalente bajo la tasa. Al lado ensanchaba la columna; debajo no
   ocupa ancho ninguno y se lee igual de bien. */
.celda-equiv {
    display: block;
    margin-top: 2px;
    color: #7a8ba5;
    font-size: 0.8em;
    white-space: nowrap;
}

/* El nombre propio de una deuda, pegado al banco: «BBVA *6389». Va en la misma
   celda para no anadir una columna. */
.celda-apodo {
    color: #94a3b8;
    font-weight: 600;
}

/* De quien es el dinero, bajo el campo del prestamista. */
.campo-ayuda {
    display: block;
    margin-top: 4px;
    color: #7a8ba5;
    font-size: 0.78rem;
    min-height: 1em;
}


/* Inversiones y negocios
   ----------------------
   Capital y rentabilidad SIEMPRE en cuadros distintos: mezclarlos es lo que
   hace creer que uno gano diez millones cuando lo que hizo fue recuperar lo
   que ya era suyo. */
.inv-panel {
    /* Dos por fila en un movil; ver .fin-resumen para el porque. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 1000px;
    margin: 0 auto 14px;
}

@media (min-width: 560px) {
    .inv-panel { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

.inv-tarjeta { border-color: rgba(34, 197, 94, 0.18); }

.inv-filtros {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin: 14px 0 10px;
}

.inv-filtro {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(148, 163, 184, 0.07);
    color: #94a3b8;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.inv-filtro:hover { border-color: rgba(34, 197, 94, 0.4); color: #cbd5e1; }
.inv-filtro.activo {
    border-color: rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
}

.inv-lista { display: flex; flex-direction: column; gap: 12px; }

.inv-op {
    padding: 13px 15px;
    border-radius: 14px;
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(34, 197, 94, 0.16);
}

/* Una terminada se ve de un vistazo: sigue en la lista, pero apagada. */
.inv-op.terminada { opacity: 0.72; border-color: rgba(148, 163, 184, 0.16); }

.inv-op-cab {
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
}

.inv-op-icono { font-size: 22px; line-height: 1; flex-shrink: 0; }

.inv-op-titulo { flex: 1; min-width: 0; }
.inv-op-titulo h3 {
    margin: 0;
    color: #e2e8f0;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inv-op-titulo p {
    margin: 2px 0 0;
    color: #94a3b8;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-op-chevron { color: #64748b; font-size: 13px; flex-shrink: 0; }

.inv-op-cifras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin-top: 11px;
}

@media (min-width: 520px) {
    .inv-op-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.inv-dato { display: flex; flex-direction: column; min-width: 0; }
.inv-dato-rotulo { color: #7a8ba5; font-size: 10.5px; font-weight: 600; }
.inv-dato-valor {
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cuanto capital ha vuelto ya. */
.inv-barra {
    height: 5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    overflow: hidden;
    margin-top: 11px;
}
.inv-barra span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    transition: width 0.3s;
}

.inv-op-detalle { margin-top: 13px; }

.inv-ficha {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 4px 16px;
}
.inv-ficha li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    font-size: 12.5px;
}
.inv-ficha span { color: #94a3b8; }
.inv-ficha b { color: #e2e8f0; font-weight: 700; text-align: right; }

.inv-acciones { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }

.inv-movs { margin-top: 0; }


/* La guia de uso
   --------------
   Cada seccion con el color de su modulo, en muy poca cantidad: lo justo para
   distinguirlas al desplazarse sin que la pagina parezca un arcoiris. */
.guia-lista { display: flex; flex-direction: column; gap: 1.1rem; }

.guia-bloque {
    padding: 1.1rem 1.2rem;
    border-radius: 14px;
    background: rgba(var(--gcr), 0.05);
    border: 1px solid rgba(var(--gcr), 0.16);
}

.guia-bloque h3 {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin: 0 0 0.6rem;
    color: var(--gc);
    font-size: 1.05rem;
    font-weight: 700;
}

.guia-icono { font-size: 1.1rem; }
.guia-num { opacity: 0.6; font-weight: 800; }

.guia-cuerpo p { color: #c8d6e5; font-size: 0.92rem; margin: 0 0 0.5rem; }
.guia-cuerpo p:last-child { margin-bottom: 0; }

.guia-cuerpo ul {
    color: #a0aec0;
    font-size: 0.88rem;
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.75;
}

.guia-cuerpo b { color: var(--gc); font-weight: 700; }

/* El boton que mas se pulsa de una operacion: calcular lo que ha rendido.
   Va marcado para que no se pierda entre los otros tres. */
.btn-ir-fuerte {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.45);
    color: #4ade80;
}
.btn-ir-fuerte:hover { background: rgba(34, 197, 94, 0.3); }


/* La fila de botones de una seccion
   ---------------------------------
   Cada pagina llevaba la suya escrita a mano en el atributo `style`, con
   separaciones distintas y `white-space:nowrap` en los botones. En un movil
   eso dejaba tres botones apretados en 343 pixeles con el texto saliendose:
   «Agregar ingres|Cargar Exc|Descargar plantilla».

   Cada boton pide 150 y se reparten lo que haya: en un ordenador caben los
   tres en una fila, en un movil caben dos y el tercero baja y ocupa el ancho
   entero. */
.subpage-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.subpage-acciones > .subpage-add-btn {
    flex: 1 1 150px;
    /* Sin esto un boton no puede encoger por debajo de su texto y se desborda
       en vez de repartirse. */
    min-width: 0;
    margin-bottom: 0;
    padding: 0.7rem 0.6rem;
    font-size: 0.86rem;
    /* El texto cabe o se parte, pero no se sale. */
    white-space: normal;
    line-height: 1.25;
    text-align: center;
}

@media (max-width: 340px) {
    /* Solo en los moviles mas estrechos: uno por fila antes que dos ilegibles.
       A 375 --el movil mas comun-- caben dos, y cuatro botones apilados
       empujaban la tabla fuera de la pantalla. */
    .subpage-acciones > .subpage-add-btn { flex-basis: 100%; }
}

/* Una tabla sin filas no ensena su cabecera.
   Con la lista vacia quedaba una barra de titulos apretujada que ademas
   se salia por el borde en un movil. Una cabecera sin nada debajo no
   informa de nada: para eso esta el mensaje de «no hay datos». */
.tabla-vacia thead { display: none; }
.tabla-vacia { min-width: 0; }

/* Y lo mismo sin depender del JavaScript: si la lista no llega a cargar
   --sin conexion, o la sesion caducada-- nadie le pone la clase y la cabecera
   se quedaba ahi, desbordada. */
table:has(tbody:empty) thead { display: none; }


/* El desglose de la posicion: lo que esta a mano y lo que esta colocado.
   Pequeno a proposito: la cifra que manda es la de arriba. */
.dash-balance-detalle {
    display: block;
    margin-top: 4px;
    color: #7a8ba5;
    font-size: 0.72rem;
    line-height: 1.35;
}
.dash-balance-detalle b { color: #a5b4c8; font-weight: 700; }


/* ══════════════════════════════════════════════════════════════════
   LAS TARJETAS DE CREDITO, EN MOVIL
   ══════════════════════════════════════════════════════════════════

   Siete columnas no caben en un telefono, y siete renglones de «rotulo: valor»
   por tarjeta se leen pero no se reconocen. Aqui cada tarjeta se ve como lo que
   es, con el color que eligio el usuario.

   Por encima de 760 px esto no existe y manda la tabla de siempre: la vista de
   ordenador no cambia. */

.tc-tarjetones { display: none; }

@media (max-width: 760px) {
    .tc-tarjetones {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 4px 0 8px;
    }

    /* La tabla se esconde entera, cabecera incluida. Se reconoce por estar
       justo delante de los tarjetones, sin depender de en que contenedor
       viva: el ancestro que se pedia antes no siempre esta. */
    table:has(+ .tc-tarjetones) { display: none; }
}

.tc-tarjeton {
    --tc: #60a5fa;
    position: relative;
    display: block;
    padding: 16px 16px 14px;
    border-radius: 16px;
    aspect-ratio: auto;
    color: #fff;
    cursor: pointer;
    background-color: var(--tc);
    /* El degradado va aparte del color para no depender de color-mix. */
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.22),
                                              rgba(0, 0, 0, 0.42));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
                0 8px 20px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

/* El brillo diagonal de una tarjeta de verdad. */
.tc-tarjeton::after {
    content: '';
    position: absolute;
    inset: -40% -10% auto auto;
    width: 70%;
    height: 180%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.10), transparent);
    pointer-events: none;
}

.tcg-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tcg-nombres { min-width: 0; }
.tcg-nombres b {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.tcg-nombres span {
    display: block;
    font-size: 0.78rem;
    opacity: 0.85;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.tcg-marca { flex: 0 0 auto; opacity: 0.95; }
.tcg-marca-texto {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* El chip: es lo que hace que se reconozca como tarjeta de un vistazo. */
.tcg-chip {
    display: block;
    width: 34px;
    height: 25px;
    margin: 14px 0 10px;
    border-radius: 5px;
    background: linear-gradient(135deg, #f7e3a1, #c9a227);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* Lo que se debe, grande, y el cupo total detras. Sin rotulos: la cifra que
   manda va delante y en grande, como el numero de una tarjeta. */
.tcg-principal {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.tcg-principal strong {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.tcg-principal em {
    font-style: normal;
    font-size: 0.85rem;
    opacity: 0.72;
}
.tcg-principal em::before { content: '/ '; opacity: 0.6; }

.tcg-barra {
    height: 6px;
    margin: 10px 0 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
.tcg-barra span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
}

.tcg-pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.tcg-dato {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.86rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* El icono hace de rotulo: dice que es cada cifra sin gastar una palabra. */
.tcg-dato i {
    font-style: normal;
    font-size: 0.72rem;
    opacity: 0.7;
}
.tcg-libre { color: #d9f99d; }

/* El pago minimo lleva su nombre: un importe suelto con un icono al lado no
   dice cual de las tres cifras es. Las otras dos se entienden solas. */
.tcg-minimo {
    color: #fde68a;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}
.tcg-minimo b {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.8;
}

.tcg-acciones { margin-left: auto; display: inline-flex; gap: 4px; }
.tcg-acciones button {
    background: rgba(0, 0, 0, 0.28);
    border: none;
    border-radius: 8px;
    padding: 5px 9px;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
}
.tcg-acciones button:hover { background: rgba(0, 0, 0, 0.45); }


/* El filtro de una columna de fecha: un periodo, no una lista de dias. */
.filtro-fecha {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 232px;
    padding: 12px;
}

.filtro-fecha .filtro-modo,
.filtro-fecha select,
.filtro-fecha input[type="date"] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(71, 85, 105, 0.45);
    border-radius: 9px;
    background: rgba(15, 23, 42, 0.75);
    color: #e8ecf2;
    font-size: 0.86rem;
}

.filtro-fecha-campos {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.filtro-fecha-campos[hidden] { display: none; }

.filtro-fecha-campos label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #94a3b8;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.filtro-fecha .filtro-pie { margin-top: 2px; }


/* ══════════════════════════════════════════════════════════════════
   LAS DEUDAS, EN MOVIL
   ══════════════════════════════════════════════════════════════════

   Ocho columnas no caben en un telefono, y ocho renglones de «rotulo: valor»
   por deuda se leen pero no se reconocen.

   Una deuda no es una tarjeta y no lo parece: nada de color de marca ni chip.
   Lo que tiene es un avance, asi que el bloque se organiza alrededor de eso.

   Por encima de 760 px esto no existe y manda la tabla de siempre: la vista de
   ordenador no cambia. */

.deuda-fichas { display: none; }

@media (max-width: 760px) {
    .deuda-fichas {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 4px 0 8px;
    }

    /* La tabla se esconde entera, cabecera incluida. */
    table:has(+ .deuda-fichas) { display: none; }
}

.deuda-ficha {
    position: relative;
    display: block;
    padding: 14px 14px 12px 17px;
    border-radius: 14px;
    cursor: pointer;
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.14);
    overflow: hidden;
}

/* El filo de color: es lo unico que la tine, y la distingue de una tarjeta. */
.deuda-ficha::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
}
.deuda-ficha.cerrada { opacity: 0.66; }
.deuda-ficha.cerrada::before { background: linear-gradient(180deg, #22c55e, #16a34a); }

.df-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.df-nombre { min-width: 0; }
.df-nombre b {
    display: block;
    color: #e8ecf2;
    font-size: 0.95rem;
    font-weight: 800;
}
.df-nombre span {
    display: block;
    color: #7a8ba5;
    font-size: 0.75rem;
}

.df-estado {
    flex: 0 0 auto;
    text-align: right;
}
.df-estado small {
    display: block;
    margin-top: 2px;
    color: #7a8ba5;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Lo que queda, grande, y de cuanto se partia detras. */
.df-principal {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.df-principal strong {
    color: #e8ecf2;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.df-principal em {
    font-style: normal;
    color: #7a8ba5;
    font-size: 0.8rem;
}

.df-barra {
    height: 6px;
    margin: 9px 0 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    overflow: hidden;
}
.df-barra span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #4ade80);
}
.df-pagado {
    color: #7a8ba5;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 11px;
}

.df-pie {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px 18px;
}

/* Cada cifra con su nombre encima: aqui no hay un lenguaje visual heredado
   --como el de una tarjeta-- que diga cual es cual. */
.df-dato {
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: #cbd5e1;
    font-size: 0.86rem;
    font-weight: 700;
}
.df-dato b {
    color: #7a8ba5;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.df-dato i {
    font-style: normal;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 600;
}
.df-minimo { color: #fbbf24; }

.df-acciones { margin-left: auto; display: inline-flex; gap: 4px; }
.df-acciones button {
    background: rgba(148, 163, 184, 0.12);
    border: none;
    border-radius: 8px;
    padding: 5px 9px;
    color: #cbd5e1;
    font-size: 0.85rem;
    cursor: pointer;
}
.df-acciones button:hover { background: rgba(148, 163, 184, 0.24); }

/* De que mes es el pago minimo, cuando el actual no cobra nada. */
.pm-nota { display: block; color: #7a8ba5; font-size: 0.66rem; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   MEJORAS RESPONSIVE VISTA MÓVIL: CUADROS MENSUALES Y TABLAS ING/GAS
   ═══════════════════════════════════════════════════════════════════ */

/* Mobile view: Pago Mínimo y Balance Mensual */
@media (max-width: 600px) {
    .dash-monthly-card.dash-block-una-fila {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 10px !important;
    }
    .dash-group-bottom {
        background: transparent !important;
        border: none !important;
        overflow: visible !important;
        gap: 10px !important;
    }
    .dash-group-bottom .dash-block .dash-block-left {
        width: 100% !important;
    }
    .dash-group-bottom .dash-compact-card {
        border-radius: 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(10, 20, 36, 0.90) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
        padding: 16px 14px !important;
    }
    .dash-group-bottom .dash-block .dash-block-left:first-child .dash-compact-card {
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .pm-desglose {
        justify-content: center !important;
        gap: 6px 16px !important;
    }
    .card-monthly-balance .dash-balance-comparativa {
        justify-content: center !important;
    }
}

/* ══════ Responsive Ingresos & Gastos Tables on Mobile ══════ */
.sel-todo-label {
    display: none;
}

@media (max-width: 760px) {
    .subpage-container .section {
        overflow-x: visible !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    table#ingresosTabla,
    table#gastosTabla,
    table#ingresosTabla tbody,
    table#gastosTabla tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: none !important;
    }
    table#ingresosTabla thead,
    table#gastosTabla thead {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    table#ingresosTabla thead tr,
    table#gastosTabla thead tr {
        display: flex !important;
        align-items: center !important;
        padding: 8px 12px !important;
        background: rgba(10, 20, 36, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
    }
    table#ingresosTabla thead th:not(.col-sel),
    table#gastosTabla thead th:not(.col-sel) {
        display: none !important;
    }
    table#ingresosTabla thead th.col-sel,
    table#gastosTabla thead th.col-sel {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 !important;
        border: none !important;
        color: #94a3b8 !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
    }
    .sel-todo-label {
        display: inline-block !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
    }
    table#ingresosTabla tr.fila-sel,
    table#gastosTabla tr.fila-sel {
        display: grid !important;
        grid-template-columns: 28px minmax(75px, auto) 1fr auto !important;
        grid-template-rows: auto auto !important;
        row-gap: 8px !important;
        column-gap: 10px !important;
        align-items: center !important;
        background: linear-gradient(135deg, rgba(14, 25, 44, 0.88) 0%, rgba(9, 17, 30, 0.94) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 14px !important;
        padding: 12px 14px !important;
        margin-bottom: 10px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
        transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
    }
    table#ingresosTabla tr.fila-sel:hover,
    table#gastosTabla tr.fila-sel:hover {
        background: rgba(18, 32, 56, 0.95) !important;
        border-color: rgba(16, 185, 129, 0.3) !important;
    }
    table#ingresosTabla tr.fila-sel.seleccionada,
    table#gastosTabla tr.fila-sel.seleccionada {
        border-color: rgba(59, 130, 246, 0.5) !important;
        background: rgba(59, 130, 246, 0.14) !important;
    }
    /* Celda 1: Checkbox */
    table#ingresosTabla tr.fila-sel td:nth-child(1),
    table#gastosTabla tr.fila-sel td:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: none !important;
    }
    /* Celda 3: Descripción (Row 1, Cols 2-3) */
    table#ingresosTabla tr.fila-sel td:nth-child(3),
    table#gastosTabla tr.fila-sel td:nth-child(3) {
        grid-column: 2 / span 2 !important;
        grid-row: 1 !important;
        font-size: 0.94rem !important;
        font-weight: 700 !important;
        color: #f1f5f9 !important;
        padding: 0 !important;
        border: none !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.3 !important;
    }
    /* Celda 4: Monto (Row 1, Col 4) */
    table#ingresosTabla tr.fila-sel td:nth-child(4),
    table#gastosTabla tr.fila-sel td:nth-child(4) {
        grid-column: 4 !important;
        grid-row: 1 !important;
        text-align: right !important;
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        padding: 0 !important;
        border: none !important;
        letter-spacing: -0.3px !important;
        font-variant-numeric: tabular-nums !important;
    }
    table#ingresosTabla tr.fila-sel td:nth-child(4) {
        color: #10b981 !important;
    }
    table#gastosTabla tr.fila-sel td:nth-child(4) {
        color: #ef4444 !important;
    }
    /* Celda 2: Fecha (Row 2, Col 2) */
    table#ingresosTabla tr.fila-sel td:nth-child(2),
    table#gastosTabla tr.fila-sel td:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        font-size: 0.74rem !important;
        color: #64748b !important;
        padding: 0 !important;
        border: none !important;
    }
    /* Celda 5: Categoría (Row 2, Col 3) */
    table#ingresosTabla tr.fila-sel td:nth-child(5),
    table#gastosTabla tr.fila-sel td:nth-child(5) {
        grid-column: 3 !important;
        grid-row: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        font-size: 0.70rem !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        padding: 2px 8px !important;
        border-radius: 12px !important;
        width: fit-content !important;
    }
    /* Celda 6: Acciones (Row 2, Col 4) */
    table#ingresosTabla tr.fila-sel td:nth-child(6),
    table#gastosTabla tr.fila-sel td:nth-child(6) {
        grid-column: 4 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        padding: 0 !important;
        border: none !important;
    }
    table#ingresosTabla tr.fila-sel td:nth-child(6) button,
    table#gastosTabla tr.fila-sel td:nth-child(6) button {
        padding: 4px 8px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }
}


/* ═══════ NOTIFICACIONES: BOTÓN ELIMINAR ═══════ */
.btn-eliminar-notif {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 13px;
    padding: 3px 6px;
    border-radius: 6px;
    transition: all 0.2s;
    line-height: 1;
    margin-left: auto;
    flex-shrink: 0;
}
.btn-eliminar-notif:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.18);
}

/* ═══════ DASHBOARD SALUDO SUPERIOR ═══════ */
.dash-saludo-header {
    margin-bottom: 1.1rem;
    padding: 0 4px;
}
.dash-saludo-titulo {
    font-size: 1.45rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-saludo-subtitulo {
    font-size: 0.85rem;
    color: #94a3b8;
    margin: 3px 0 0 0;
    font-weight: 500;
}

/* ═══════ REDISEÑO PRESUPUESTOS DEL MES (CIRCULAR) ═══════ */
.dash-pres-section {
    margin-bottom: 1.4rem;
}
.dash-pres-section .dash-pres-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}
.dash-pres-title-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
}
.dash-pres-title-icon {
    font-size: 1.05rem;
}
.dash-pres-titulo-text {
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
    letter-spacing: -0.2px;
}
.dash-pres-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.dash-pres-arrow-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #f8fafc;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}
.dash-pres-arrow-btn:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd;
    transform: scale(1.08);
}
.dash-pres-vertodos-btn {
    font-size: 0.8rem;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 8px;
    padding: 4px 10px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dash-pres-vertodos-btn:hover {
    background: rgba(59, 130, 246, 0.22);
    color: #93c5fd;
    transform: translateX(1px);
}
.dash-pres-container {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 2px 0 6px;
    backdrop-filter: none;
    position: relative;
}
.dash-pres-carousel-viewport {
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 8px;
    width: 100%;
}
.dash-pres-carousel-viewport::-webkit-scrollbar {
    display: none;
}
.dash-pres-carousel-track {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}
.dash-pres-circle-item {
    flex: 0 0 calc((100% - 48px) / 5);
    min-width: calc((100% - 48px) / 5);
    max-width: calc((100% - 48px) / 5);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
@media (max-width: 767px) {
    .dash-pres-carousel-track {
        gap: 10px;
    }
    .dash-pres-circle-item {
        flex: 0 0 calc((100% - 20px) / 3);
        min-width: calc((100% - 20px) / 3);
        max-width: calc((100% - 20px) / 3);
    }
}
.dash-pres-circle-item:hover {
    transform: translateY(-3px) scale(1.03);
}
.dash-pres-gauge {
    position: relative;
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-pres-gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    position: relative;
    z-index: 1;
    overflow: visible !important;
}
.dash-pres-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
.dash-pres-gauge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -12px;
    position: relative;
    z-index: 2;
}
.dash-pres-gauge-icon svg {
    transform: none;
}
.dash-pres-gauge-pct {
    position: absolute;
    bottom: 4px;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    color: #ffffff !important;
    background: rgba(10, 16, 28, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    padding: 2px 6px;
    letter-spacing: -0.3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    z-index: 3;
}
.dash-pres-circle-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-top: 6px;
    width: 100%;
    line-height: 1.25;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.dash-pres-circle-cifras {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    margin-top: 2px;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
}