/* =============================================
   SISTEMA VISUAL PREMIUM DE FINANZAS PRO
   Aqui se ajustan colores, espaciados seguros y detalles generales del diseno.
   ============================================= */

/* Variables de color base para modo claro y modo oscuro.
   Piensa en estas variables como una paleta reutilizable en toda la app. */
:root {
    --color-bg-app:       #f4f7fb;
    --color-bg-surface:   #ffffff;
    --color-bg-header:    #ffffff;
    --color-text-primary: #0f172a;
    --color-text-secondary: #64748b;
    --color-border:       rgba(15,23,42,0.08);
    --color-primary:      #0a84ff;
    --color-primary-glow: rgba(10,132,255,0.20);
    --color-green:        #10b981;
    --color-red:          #ef4444;
    --radius-card:        20px;
    --shadow-card:        0 2px 14px rgba(0,0,0,0.07);
    --shadow-elevated:    0 8px 32px rgba(0,0,0,0.12);

    /* Estas variables leen las zonas seguras del dispositivo.
       Sirven para que el contenido no choque con notch, barra inferior o bordes especiales. */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

body.dark-mode {
    --color-bg-app:       #08101d;
    --color-bg-surface:   #101826;
    --color-bg-header:    #0d1624;
    --color-text-primary: #edf3ff;
    --color-text-secondary: #8ca0bf;
    --color-border:       rgba(255,255,255,0.08);
    --color-primary:      #4da3ff;
    --color-primary-glow: rgba(77,163,255,0.22);
    --shadow-card:        0 2px 14px rgba(0,0,0,0.40);
    --shadow-elevated:    0 8px 32px rgba(0,0,0,0.60);
}

/* -- PANTALLA LOGIN: coincide con imagen objetivo -- */
#view-login {
    background: linear-gradient(160deg, #050d1a 0%, #0b1f3a 40%, #0d2850 70%, #111e3f 100%) !important;
    min-height: 100dvh;
    padding-top: max(60px, calc(var(--sat) + 40px));
    padding-bottom: max(40px, var(--sab));
}

#view-login .login-card {
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 28px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.40) !important;
}

#view-login .login-card .btn-login-google,
#view-login #btn-login-google {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-radius: 16px !important;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(0,0,0,0.20);
    transition: transform 0.15s, box-shadow 0.15s;
}
#view-login #btn-login-google:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,0.28); }

/* -- SAFE AREAS: header y contenido -- */
#main-header {
    padding-top: max(14px, var(--sat)) !important;
    padding-bottom: 14px;
    background: var(--color-bg-header) !important;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 10px rgba(0,0,0,0.06);
}

#app-content {
    padding-top: 0;
    padding-bottom: calc(76px + var(--sab));
    padding-left: max(0px, var(--sal));
    padding-right: max(0px, var(--sar));
}

/* -- BOTTOM NAV -- */
#bottom-nav {
    padding-bottom: max(10px, var(--sab)) !important;
    background: var(--color-bg-surface) !important;
    border-top: 1px solid var(--color-border) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
    height: auto !important;
}

/* -- FAB -- */
#fab-container {
    bottom: calc(68px + var(--sab) + 10px) !important;
}

/* -- LOCK SCREENS -- */
#view-lock, #view-pin-lock {
    padding-top: max(60px, calc(var(--sat) + 24px));
    padding-bottom: max(40px, var(--sab));
}

/* -- TARJETA BALANCE TOTAL (dashboard) -- */
#balance-card,
.balance-card {
    background: linear-gradient(135deg, #1a3a6e 0%, #1e4d8c 50%, #2563eb 100%) !important;
    border-radius: 28px !important;
    box-shadow: 0 8px 32px rgba(37,99,235,0.35) !important;
    border: none !important;
    position: relative;
    overflow: hidden;
}
#balance-card::before, .balance-card::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 220px;
    height: 220px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    pointer-events: none;
}

/* -- Boton ojo de balance -- */
#btn-eye-balance {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    color: #ffffff;
}
#btn-eye-balance:hover { background: rgba(255,255,255,0.25); }

/* -- BOTONES DE ACCION RAPIDA (Gasto, Ingreso, etc.) -- */
.action-btn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.action-btn {
    width: 60px; height: 60px;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    box-shadow: var(--shadow-card);
    transition: transform 0.15s, box-shadow 0.15s;
}
.action-btn:active { transform: scale(0.93); }
.action-btn.gasto     { background: #fff0f0; color: #ef4444; }
.action-btn.ingreso   { background: #f0fff8; color: #10b981; }
.action-btn.transfer  { background: #eff6ff; color: #3b82f6; }
.action-btn.cuentas   { background: #f5f0ff; color: #8b5cf6; }
body.dark-mode .action-btn.gasto     { background: rgba(239,68,68,0.15);   color: #f87171; }
body.dark-mode .action-btn.ingreso   { background: rgba(16,185,129,0.15);  color: #34d399; }
body.dark-mode .action-btn.transfer  { background: rgba(59,130,246,0.15);  color: #60a5fa; }
body.dark-mode .action-btn.cuentas   { background: rgba(139,92,246,0.15);  color: #a78bfa; }

/* -- RESUMEN DEL MES -- */
.resumen-card {
    background: var(--color-bg-surface) !important;
    border-radius: 28px !important;
    box-shadow: var(--shadow-card) !important;
    border: 1px solid var(--color-border) !important;
}
.resumen-ingreso-pill {
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16,185,129,0.20);
    border-radius: 16px;
    padding: 10px 14px;
}
.resumen-gasto-pill {
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.20);
    border-radius: 16px;
    padding: 10px 14px;
}

/* -- TARJETAS GENERALES -- */
.card-premium {
    background: var(--color-bg-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    transition: box-shadow 0.2s, transform 0.15s;
}
.card-premium:active { transform: scale(0.99); box-shadow: var(--shadow-elevated); }

/* -- SECCION DE CUENTAS (separadas por tipo) -- */
.accounts-section-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    padding: 4px 0 8px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.accounts-section-title::before {
    content: '';
    display: inline-block;
    width: 3px; height: 14px;
    border-radius: 2px;
    background: var(--color-primary);
}

/* -- TIP DEL DIA -- */
.tip-card {
    background: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(139,92,246,0.08) 100%);
    border: 1px solid rgba(37,99,235,0.14);
    border-radius: 22px;
}

/* -- MODAL QUICK-ADD premium -- */
#modal-quick-add {
    border-radius: 32px 32px 0 0 !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.20) !important;
    padding-bottom: max(24px, var(--sab)) !important;
}

/* -- INPUT FIELDS -- */
input[type=text], input[type=number], input[type=date], textarea, select {
    background: var(--color-bg-app) !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: 14px !important;
    color: var(--color-text-primary) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-glow) !important;
    outline: none !important;
}

/* -- BOTON PRIMARIO -- */
.btn-primary, .bg-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}
.btn-primary:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(37,99,235,0.25); }

/* -- BOTON IA (gradiente) -- */
#btn-ai-advisor {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%) !important;
    box-shadow: 0 6px 24px rgba(139,92,246,0.40) !important;
    border-radius: 20px !important;
}

/* -- NAV ITEMS -- */
#bottom-nav button.active i,
#bottom-nav button.text-primary i { color: var(--color-primary); }

/* -- SCROLLBAR oculta en movil -- */
::-webkit-scrollbar { width: 0; height: 0; }

/* -- Animacion fade-in general -- */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in, .card-premium, #modal-quick-add { animation: fadeSlideUp 0.28s ease; }

/* -- Animacion slide-in-right para subpantallas de ajustes -- */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.slide-in-right { animation: slideInRight 0.25s ease; }

/* -- Subpantallas de ajustes -- */
#panel-moneda,
#panel-seguridad {
    animation: slideInRight 0.25s ease;
}

/* -- Grafico de barras headers -- */
#barChartMonthly, #barChartCategories {
    border-radius: 12px;
}

/* -- Objetivo de ahorro - barra de progreso animada -- */
.ahorro-progress-bar {
    transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Modales de ahorro alineados al estilo principal */
#modal-ahorro .savings-modal-panel,
#modal-add-aporte .savings-modal-panel {
    border: 1px solid var(--border-color);
    border-bottom: none;
}

#modal-ahorro input,
#modal-ahorro select,
#modal-add-aporte input,
#modal-add-aporte select {
    box-shadow: none;
}

#modal-ahorro input:focus,
#modal-ahorro select:focus,
#modal-add-aporte input:focus,
#modal-add-aporte select:focus {
    border-color: var(--color-primary);
}

/* -- Drill-down pie chart -- */
#btn-pie-back {
    transition: all 0.2s ease;
}
#pie-breadcrumb {
    animation: fadeSlideUp 0.2s ease;
}

/* -- Pantalla de cuentas estilo app financiera -- */
.accounts-screen {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 0;
}

.accounts-hero {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 22px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.22), transparent 34%),
        radial-gradient(circle at left bottom, rgba(255,255,255,0.16), transparent 30%),
        linear-gradient(135deg, #5d8fff 0%, #6c7dff 48%, #59c7ff 100%);
    box-shadow: 0 18px 44px rgba(76, 122, 255, 0.28);
    color: #ffffff;
}

#view-analisis {
    padding-top: 8px !important;
    margin-top: 0 !important;
}

.accounts-kicker {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.78);
}

.accounts-hero-title {
    margin: 0;
    font-size: 2rem;
    line-height: 1;
    font-weight: 900;
}

.accounts-hero-subtitle {
    margin: 6px 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
}

.accounts-hero-actions {
    margin-top: 18px;
}

.accounts-primary-btn,
.accounts-secondary-btn {
    border: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 800;
    cursor: pointer;
}

.accounts-primary-btn {
    padding: 12px 18px;
    background: rgba(255,255,255,0.16);
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
}

.accounts-secondary-btn {
    padding: 10px 14px;
    background: rgba(92, 97, 255, 0.10);
    color: #4755d7;
}

body.dark-mode .accounts-secondary-btn {
    background: rgba(116, 140, 255, 0.16);
    color: #d9e5ff;
}

.accounts-hero-stats {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.accounts-stat-card {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 20px;
    padding: 12px 14px;
    backdrop-filter: blur(12px);
}

.accounts-stat-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}

.accounts-stat-value {
    display: block;
    margin-top: 8px;
    font-size: 1rem;
    font-weight: 900;
    color: #ffffff;
}

.accounts-panel {
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 30px;
    padding: 18px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px);
}

body.dark-mode .accounts-panel {
    background: rgba(17,24,39,0.88);
    border-color: rgba(255,255,255,0.07);
}

.accounts-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.accounts-panel-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--color-text-primary);
}

.accounts-panel-subtitle {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.accounts-empty-state {
    padding: 18px;
    border-radius: 24px;
    border: 1px dashed rgba(93, 143, 255, 0.35);
    background: linear-gradient(135deg, rgba(93, 143, 255, 0.08), rgba(89, 199, 255, 0.08));
    text-align: center;
    margin-bottom: 16px;
}

.accounts-empty-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 20px;
    color: #4f7df5;
    background: rgba(255,255,255,0.7);
}

.accounts-empty-state h4 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 900;
    color: var(--color-text-primary);
}

.accounts-empty-state p {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.accounts-group {
    margin-bottom: 18px;
}

.accounts-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accounts-card {
    display: block;
}

.accounts-card-main {
    position: relative;
    cursor: pointer;
    color: #ffffff;
    border-radius: 28px;
    padding: 16px 16px 18px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.26), transparent 32%),
        linear-gradient(135deg, var(--account-grad-start) 0%, var(--account-grad-end) 100%);
    box-shadow: 0 16px 32px rgba(71, 85, 105, 0.14);
}

.accounts-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.accounts-card-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.accounts-card-id {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.accounts-card-logo {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    object-fit: cover;
    background: rgba(255,255,255,0.16);
}

.accounts-card-logo-fallback {
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 18px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}

.accounts-card-copy {
    min-width: 0;
}

.accounts-card-type {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.74);
}

.accounts-card-name {
    margin: 4px 0 0;
    font-size: 1.05rem;
    font-weight: 900;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.accounts-card-currency {
    font-size: 11px;
    font-weight: 800;
    padding: 7px 10px;
    border-radius: 999px;
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.14);
}

.accounts-card-balance {
    margin-top: 16px;
}

.accounts-card-balance-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.72);
}

.accounts-card-balance-value {
    display: block;
    margin-top: 4px;
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 900;
}

.accounts-card-badge-row {
    margin-top: 10px;
}

.accounts-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.accounts-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    background: rgba(255,255,255,0.14);
}

.accounts-chip.ok {
    background: rgba(16,185,129,0.18);
}

.accounts-chip.warn {
    background: rgba(239,68,68,0.18);
}

.accounts-card-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: flex-end;
}

.accounts-action-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 16px;
    background: rgba(14, 24, 47, 0.20);
    color: #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.accounts-action-btn.danger {
    color: #ffe1e1;
}

body.dark-mode .accounts-action-btn {
    background: rgba(9, 15, 31, 0.32);
    color: #ffffff;
}

@media (max-width: 640px) {
    .accounts-hero {
        padding: 18px;
    }

    .accounts-hero-title {
        font-size: 1.75rem;
    }

    .accounts-hero-stats {
        grid-template-columns: 1fr;
    }

    .accounts-panel-head {
        flex-direction: column;
        align-items: stretch;
    }

    .accounts-card-actions {
        gap: 6px;
    }
}



/* =============================================
   HOME SCREEN REDESIGN
   Rediseño seguro de Inicio y corrección de color
   ============================================= */
body:not(.dark-mode) {
    background: radial-gradient(circle at top, #ffffff 0%, #f5f7fb 28%, #edf3fb 100%) !important;
}

body.dark-mode {
    background: radial-gradient(circle at top, #162033 0%, #0c1423 34%, #08101d 100%) !important;
}

#main-header {
    background: rgba(255,255,255,0.92) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: 0 12px 30px rgba(15,23,42,0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.dark-mode #main-header {
    background: rgba(13,22,36,0.94) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}

#view-dashboard {
    padding-top: 20px !important;
    padding-bottom: 28px !important;
}

#view-dashboard > div:first-child {
    background: linear-gradient(135deg, #163a70 0%, #1d56a2 52%, #0a84ff 100%) !important;
    border-radius: 32px !important;
    padding: 24px !important;
    box-shadow: 0 18px 44px rgba(10,132,255,0.24) !important;
}

#view-dashboard > div:first-child #balance-general {
    font-size: clamp(2.4rem, 5.6vw, 3.35rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

#view-dashboard > div:first-child #db-status {
    color: rgba(255,255,255,0.82) !important;
}

#view-dashboard > div:first-child #balance-disponible,
#view-dashboard > div:first-child #balance-ahorros {
    color: rgba(255,255,255,0.86) !important;
    font-size: 12px !important;
}

#btn-eye-balance {
    width: 48px !important;
    height: 48px !important;
    background: rgba(255,255,255,0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}

#view-dashboard .grid.grid-cols-4.gap-3.mb-8 {
    gap: 14px !important;
    margin-bottom: 28px !important;
}

#view-dashboard .grid.grid-cols-4.gap-3.mb-8 > button {
    padding: 0 2px;
}

#view-dashboard .grid.grid-cols-4.gap-3.mb-8 > button > div {
    width: 64px !important;
    height: 64px !important;
    border-radius: 22px !important;
    border: 1px solid var(--color-border);
    background: rgba(255,255,255,0.92) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}

body.dark-mode #view-dashboard .grid.grid-cols-4.gap-3.mb-8 > button > div {
    background: rgba(16,24,38,0.92) !important;
    border-color: rgba(255,255,255,0.07);
    box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}

#view-dashboard .grid.grid-cols-4.gap-3.mb-8 > button > span {
    font-size: 13px !important;
    color: var(--color-text-secondary) !important;
}

#view-dashboard > .rounded-2xl.p-4.mb-6.flex.justify-between.items-center.gap-2 {
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 28px !important;
    padding: 18px 16px !important;
    box-shadow: 0 10px 26px rgba(15,23,42,0.06);
}

#view-dashboard > .rounded-2xl.p-4.mb-6.flex.justify-between.items-center.gap-2 #dash-mini-ingresos {
    color: #16a34a !important;
}

#view-dashboard > .rounded-2xl.p-4.mb-6.flex.justify-between.items-center.gap-2 #dash-mini-flujo {
    color: var(--color-primary) !important;
}

#view-dashboard > .rounded-2xl.p-4.mb-6.flex.justify-between.items-center.gap-2 #dash-mini-gastos {
    color: #ef4444 !important;
}

#view-dashboard > .rounded-2xl.p-4.mb-6.flex.justify-between.items-center.gap-2 button,
#view-dashboard > .flex.justify-between.items-center.mb-4 button,
#view-dashboard .bg-\[var\(--bg-surface\)\].rounded-3xl button {
    background: rgba(10,132,255,0.12) !important;
    color: var(--color-primary) !important;
    border-radius: 14px !important;
}

body.dark-mode #view-dashboard > .rounded-2xl.p-4.mb-6.flex.justify-between.items-center.gap-2 button,
body.dark-mode #view-dashboard > .flex.justify-between.items-center.mb-4 button,
body.dark-mode #view-dashboard .bg-\[var\(--bg-surface\)\].rounded-3xl button {
    background: rgba(77,163,255,0.16) !important;
}

#view-dashboard > .bg-gradient-to-br.from-indigo-50.to-blue-50.rounded-3xl,
#view-dashboard > .bg-\[var\(--bg-surface\)\].rounded-3xl.p-4.mb-8.border.border-theme.shadow-sm {
    border-radius: 30px !important;
    box-shadow: 0 14px 32px rgba(15,23,42,0.07) !important;
}

#view-dashboard > .bg-gradient-to-br.from-indigo-50.to-blue-50.rounded-3xl {
    background: linear-gradient(135deg, #ffffff 0%, #f4f7ff 58%, #edf3ff 100%) !important;
    border: 1px solid rgba(10,132,255,0.12) !important;
}

body.dark-mode #view-dashboard > .bg-gradient-to-br.from-indigo-50.to-blue-50.rounded-3xl {
    background: linear-gradient(135deg, rgba(17,24,39,0.96) 0%, rgba(15,30,56,0.96) 100%) !important;
    border-color: rgba(77,163,255,0.14) !important;
}

#view-dashboard > .bg-gradient-to-br.from-indigo-50.to-blue-50.rounded-3xl h3,
#view-dashboard > .bg-gradient-to-br.from-indigo-50.to-blue-50.rounded-3xl p {
    color: var(--color-text-primary) !important;
}

#view-dashboard > .bg-gradient-to-br.from-indigo-50.to-blue-50.rounded-3xl h3 {
    color: #3730a3 !important;
}

body.dark-mode #view-dashboard > .bg-gradient-to-br.from-indigo-50.to-blue-50.rounded-3xl h3 {
    color: #a5b4fc !important;
}

#view-dashboard .bg-\[var\(--bg-surface\)\].rounded-3xl.p-4.mb-8.border.border-theme.shadow-sm {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid var(--color-border) !important;
}

#dashboard-scheduled-widget > * {
    background: rgba(246,249,255,0.92) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 22px !important;
    padding: 14px 16px !important;
}

body.dark-mode #dashboard-scheduled-widget > * {
    background: rgba(8,16,29,0.86) !important;
}

#view-dashboard .flex.justify-between.items-center.mb-4 h3 {
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

@media (max-width: 640px) {
    #view-dashboard {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    #view-dashboard > div:first-child {
        padding: 20px !important;
    }

    #view-dashboard .grid.grid-cols-4.gap-3.mb-8 > button > div {
        width: 58px !important;
        height: 58px !important;
        border-radius: 20px !important;
    }

    #view-dashboard > .rounded-2xl.p-4.mb-6.flex.justify-between.items-center.gap-2 {
        flex-wrap: wrap;
    }

    #view-dashboard > .rounded-2xl.p-4.mb-6.flex.justify-between.items-center.gap-2 > button {
        width: 100%;
        margin-top: 8px;
        padding: 12px 14px !important;
    }
}


/* =============================================
   HISTORY SCREEN REDESIGN
   Rediseño seguro de Historial
   ============================================= */
#view-historial {
    padding-top: 22px !important;
    padding-bottom: 30px !important;
}

#view-historial > .flex.justify-between.items-center.bg-\[var\(--bg-surface\)\].p-4.rounded-2xl.shadow-sm.border.border-theme.mb-6 {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 32px !important;
    padding: 18px 18px !important;
    box-shadow: 0 14px 34px rgba(15,23,42,0.07) !important;
}

body.dark-mode #view-historial > .flex.justify-between.items-center.bg-\[var\(--bg-surface\)\].p-4.rounded-2xl.shadow-sm.border.border-theme.mb-6 {
    background: rgba(16,24,38,0.96) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.28) !important;
}

#view-historial > .flex.justify-between.items-center.bg-\[var\(--bg-surface\)\].p-4.rounded-2xl.shadow-sm.border.border-theme.mb-6 button {
    width: 42px;
    height: 42px;
    background: rgba(10,132,255,0.08) !important;
    color: var(--color-primary) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(10,132,255,0.10);
}

body.dark-mode #view-historial > .flex.justify-between.items-center.bg-\[var\(--bg-surface\)\].p-4.rounded-2xl.shadow-sm.border.border-theme.mb-6 button {
    background: rgba(77,163,255,0.14) !important;
    border-color: rgba(77,163,255,0.14);
}

#historial-periodo {
    font-size: 1.55rem !important;
    letter-spacing: -0.03em;
}

#view-historial > .flex.items-center.gap-2.mb-4 {
    gap: 10px !important;
    margin-bottom: 18px !important;
    flex-wrap: wrap;
}

#view-historial > .flex.items-center.gap-2.mb-4 button,
#view-historial > .flex.items-center.gap-2.mb-4 span {
    min-height: 38px;
    border-radius: 14px !important;
}

#view-historial > button[onclick='exportarExcelMensualIA()'],
#view-historial > button[onclick='exportarPdfMensualIA()'] {
    min-height: 56px;
    border-radius: 24px !important;
    box-shadow: 0 14px 30px rgba(15,23,42,0.12) !important;
    letter-spacing: -0.02em;
}

#view-historial > .bg-\[var\(--bg-surface\)\].rounded-3xl.shadow-sm.border.border-theme.p-5.mb-6 {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 32px !important;
    padding: 22px !important;
    box-shadow: 0 16px 38px rgba(15,23,42,0.07) !important;
}

body.dark-mode #view-historial > .bg-\[var\(--bg-surface\)\].rounded-3xl.shadow-sm.border.border-theme.p-5.mb-6 {
    background: rgba(16,24,38,0.96) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,0.30) !important;
}

#view-historial #histResumenDoughnut {
    filter: drop-shadow(0 10px 18px rgba(15,23,42,0.10));
}

#view-historial #hist-flujo {
    color: var(--color-primary) !important;
    font-size: 1.1rem !important;
    letter-spacing: -0.03em;
}

#view-historial #hist-ingresos,
#view-historial #hist-gastos {
    font-size: 1.05rem !important;
    letter-spacing: -0.03em;
}

#view-historial .bg-\[var\(--bg-surface\)\].p-5.rounded-3xl.shadow-sm.border.border-theme.mb-6 {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 30px !important;
    box-shadow: 0 14px 34px rgba(15,23,42,0.07) !important;
}

body.dark-mode #view-historial .bg-\[var\(--bg-surface\)\].p-5.rounded-3xl.shadow-sm.border.border-theme.mb-6 {
    background: rgba(16,24,38,0.96) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.28) !important;
}

#view-historial .bg-\[var\(--bg-surface\)\].p-5.rounded-3xl.shadow-sm.border.border-theme.mb-6 h3 {
    font-size: 1rem !important;
    letter-spacing: -0.02em;
}

#view-historial .bg-\[var\(--bg-surface\)\].p-5.rounded-3xl.shadow-sm.border.border-theme.mb-6 .h-44,
#view-historial .bg-\[var\(--bg-surface\)\].p-5.rounded-3xl.shadow-sm.border.border-theme.mb-6 .h-48,
#view-historial .bg-\[var\(--bg-surface\)\].p-5.rounded-3xl.shadow-sm.border.border-theme.mb-6 .h-56 {
    background: linear-gradient(180deg, rgba(10,132,255,0.02) 0%, rgba(10,132,255,0.00) 100%);
    border-radius: 24px;
}

body.dark-mode #view-historial .bg-\[var\(--bg-surface\)\].p-5.rounded-3xl.shadow-sm.border.border-theme.mb-6 .h-44,
body.dark-mode #view-historial .bg-\[var\(--bg-surface\)\].p-5.rounded-3xl.shadow-sm.border.border-theme.mb-6 .h-48,
body.dark-mode #view-historial .bg-\[var\(--bg-surface\)\].p-5.rounded-3xl.shadow-sm.border.border-theme.mb-6 .h-56 {
    background: linear-gradient(180deg, rgba(77,163,255,0.06) 0%, rgba(77,163,255,0.00) 100%);
}

#pie-breadcrumb {
    background: rgba(10,132,255,0.08);
    padding: 8px 10px;
    border-radius: 999px;
    width: fit-content;
}

#pie-breadcrumb #breadcrumb-cat {
    background: rgba(10,132,255,0.14) !important;
    border-radius: 999px;
}

#btn-pie-back {
    border-radius: 14px !important;
}

#lista-movimientos-full > * {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 28px rgba(15,23,42,0.06) !important;
}

body.dark-mode #lista-movimientos-full > * {
    background: rgba(16,24,38,0.96) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.26) !important;
}

#pagination-controls {
    padding-top: 8px !important;
}

#pagination-controls button,
#pagination-controls span {
    border-radius: 16px !important;
}

@media (max-width: 640px) {
    #view-historial {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    #view-historial > .bg-\[var\(--bg-surface\)\].rounded-3xl.shadow-sm.border.border-theme.p-5.mb-6 > .flex.items-center.gap-4 {
        flex-direction: column;
        align-items: stretch;
    }

    #view-historial > .bg-\[var\(--bg-surface\)\].rounded-3xl.shadow-sm.border.border-theme.p-5.mb-6 .h-28.w-28 {
        margin: 0 auto;
    }

    #view-historial > button[onclick='exportarExcelMensualIA()'],
    #view-historial > button[onclick='exportarPdfMensualIA()'] {
        font-size: 13px;
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* =============================================
   PLAN SCREEN REDESIGN
   Rediseño seguro de Plan y sus funciones
   ============================================= */
#view-presupuesto {
    padding-top: 22px !important;
    padding-bottom: 30px !important;
}

#view-presupuesto > h2 {
    letter-spacing: -0.04em;
    margin-bottom: 18px !important;
}

#view-presupuesto > .flex.bg-theme-app.border.border-theme.rounded-2xl.p-1.mb-6.shadow-sm.overflow-x-auto.hide-scroll.gap-0\.5 {
    background: rgba(255,255,255,0.84) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 26px !important;
    padding: 6px !important;
    box-shadow: 0 14px 32px rgba(15,23,42,0.06) !important;
}

body.dark-mode #view-presupuesto > .flex.bg-theme-app.border.border-theme.rounded-2xl.p-1.mb-6.shadow-sm.overflow-x-auto.hide-scroll.gap-0\.5 {
    background: rgba(16,24,38,0.92) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,0.28) !important;
}

#tab-plan-presupuesto,
#tab-plan-pagos,
#tab-plan-listas,
#tab-plan-ahorros {
    min-height: 48px;
    border-radius: 18px !important;
    font-size: 12px !important;
    letter-spacing: -0.02em;
}

#tab-plan-presupuesto.bg-\[var\(--bg-surface\)\],
#tab-plan-pagos.bg-\[var\(--bg-surface\)\],
#tab-plan-listas.bg-\[var\(--bg-surface\)\],
#tab-plan-ahorros.bg-\[var\(--bg-surface\)\],
#tab-plan-presupuesto.text-primary,
#tab-plan-pagos.text-primary,
#tab-plan-listas.text-primary,
#tab-plan-ahorros.text-primary {
    background: rgba(255,255,255,0.96) !important;
    box-shadow: 0 8px 18px rgba(15,23,42,0.08) !important;
}

body.dark-mode #tab-plan-presupuesto.bg-\[var\(--bg-surface\)\],
body.dark-mode #tab-plan-pagos.bg-\[var\(--bg-surface\)\],
body.dark-mode #tab-plan-listas.bg-\[var\(--bg-surface\)\],
body.dark-mode #tab-plan-ahorros.bg-\[var\(--bg-surface\)\],
body.dark-mode #tab-plan-presupuesto.text-primary,
body.dark-mode #tab-plan-pagos.text-primary,
body.dark-mode #tab-plan-listas.text-primary,
body.dark-mode #tab-plan-ahorros.text-primary {
    background: rgba(11,18,32,0.94) !important;
}

#plan-presupuesto-content > .bg-primary\/10,
#plan-pagos-content > button,
#plan-ahorros-content > button,
#plan-listas-content > .flex.gap-2.mb-6 {
    margin-bottom: 18px !important;
}

#plan-presupuesto-content > .bg-primary\/10 {
    background: linear-gradient(135deg, rgba(10,132,255,0.10) 0%, rgba(10,132,255,0.05) 100%) !important;
    border: 1px solid rgba(10,132,255,0.14) !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 28px rgba(10,132,255,0.08) !important;
}

#budget-list > *,
#scheduled-list > *,
#shopping-lists > *,
.plan-savings-card {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,0.07) !important;
}

body.dark-mode #budget-list > *,
body.dark-mode #scheduled-list > *,
body.dark-mode #shopping-lists > *,
body.dark-mode .plan-savings-card {
    background: rgba(16,24,38,0.96) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.28) !important;
}

#budget-list > * {
    border-radius: 28px !important;
    padding: 20px !important;
}

#budget-list > * .flex.justify-between.items-center.mb-4 {
    gap: 12px;
    align-items: flex-start;
}

#budget-list > * .w-12.h-12 {
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
}

#budget-list > * .flex.items-center.gap-1.bg-theme-app {
    min-height: 44px;
    border-radius: 16px !important;
    background: rgba(246,248,252,0.96) !important;
}

body.dark-mode #budget-list > * .flex.items-center.gap-1.bg-theme-app {
    background: rgba(8,16,29,0.92) !important;
}

#budget-list > * .relative.w-full.h-3\.5.bg-theme-app {
    height: 12px !important;
    border-radius: 999px !important;
    background: rgba(148,163,184,0.16) !important;
}

#budget-list > * .flex.justify-between.mt-3.text-\[10px\].font-bold span:last-child {
    border-radius: 999px !important;
    padding: 5px 10px !important;
    background: rgba(10,132,255,0.10) !important;
    color: var(--color-primary) !important;
}

#plan-pagos-content > button,
#plan-ahorros-content > button {
    min-height: 56px;
    border-radius: 24px !important;
    box-shadow: 0 16px 32px rgba(15,23,42,0.12) !important;
    letter-spacing: -0.02em;
}

.plan-scheduled-card,
#scheduled-list > * {
    border-radius: 26px !important;
    padding: 18px !important;
}

.plan-scheduled-card {
    align-items: stretch !important;
    gap: 14px;
}

.plan-scheduled-icon {
    border-radius: 18px !important;
    width: 48px !important;
    height: 48px !important;
}

.plan-scheduled-title {
    font-size: 15px;
    letter-spacing: -0.02em;
}

.plan-scheduled-subtitle {
    font-size: 11px !important;
}

.plan-scheduled-amount {
    font-size: 1.05rem;
    letter-spacing: -0.03em;
}

.plan-scheduled-actions {
    gap: 8px !important;
    flex-wrap: wrap;
}

.plan-scheduled-actions button {
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(10,132,255,0.08);
}

.plan-scheduled-actions button.text-green-600 {
    background: rgba(16,185,129,0.12);
}

.plan-scheduled-actions button.text-blue-500 {
    background: rgba(10,132,255,0.10);
}

.plan-scheduled-actions button.text-red-400 {
    background: rgba(239,68,68,0.10);
}

#plan-listas-content > .flex.gap-2.mb-6 {
    background: rgba(255,255,255,0.72);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 8px;
    box-shadow: 0 12px 28px rgba(15,23,42,0.06);
}

body.dark-mode #plan-listas-content > .flex.gap-2.mb-6 {
    background: rgba(16,24,38,0.92);
    box-shadow: 0 12px 28px rgba(0,0,0,0.26);
}

#new-list-name {
    border-radius: 18px !important;
}

#plan-listas-content > .flex.gap-2.mb-6 > button {
    min-width: 54px;
    border-radius: 18px !important;
}

#shopping-lists > * {
    border-radius: 28px !important;
    padding: 20px !important;
}

#shopping-lists > * .border-b {
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
}

#shopping-lists > * .flex.items-center.gap-3.mb-2 {
    padding: 8px 0;
}

#shopping-lists > * input[type='checkbox'] {
    width: 20px;
    height: 20px;
}

#shopping-lists > * .flex.gap-2:last-child {
    margin-top: 12px;
}

.plan-savings-card {
    border-radius: 30px !important;
    padding: 22px !important;
}

.plan-savings-icon {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}

.plan-savings-title {
    font-size: 15px;
    letter-spacing: -0.02em;
}

.plan-savings-subtitle {
    font-size: 11px !important;
}

.plan-savings-bar {
    height: 13px !important;
    background: rgba(148,163,184,0.16) !important;
}

.plan-savings-actions {
    gap: 8px;
    flex-wrap: wrap;
}

.plan-savings-actions button {
    border-radius: 16px !important;
}

.plan-empty-state {
    background: rgba(255,255,255,0.72);
    border: 1px dashed rgba(10,132,255,0.18);
    border-radius: 28px;
}

body.dark-mode .plan-empty-state {
    background: rgba(16,24,38,0.82);
    border-color: rgba(77,163,255,0.16);
}

#modal-scheduled .bg-\[var\(--bg-surface\)\],
#modal-ahorro .savings-modal-panel,
#modal-add-aporte .savings-modal-panel,
#modal-add-aporte-historial .bg-\[var\(--bg-surface\)\],
#modal-aportes-historial .bg-\[var\(--bg-surface\)\] {
    background: rgba(255,255,255,0.98) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 22px 48px rgba(15,23,42,0.16) !important;
}

body.dark-mode #modal-scheduled .bg-\[var\(--bg-surface\)\],
body.dark-mode #modal-ahorro .savings-modal-panel,
body.dark-mode #modal-add-aporte .savings-modal-panel,
body.dark-mode #modal-add-aporte-historial .bg-\[var\(--bg-surface\)\],
body.dark-mode #modal-aportes-historial .bg-\[var\(--bg-surface\)\] {
    background: rgba(16,24,38,0.98) !important;
    box-shadow: 0 22px 48px rgba(0,0,0,0.34) !important;
}

@media (max-width: 640px) {
    #view-presupuesto {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .plan-scheduled-card,
    #scheduled-list > * {
        flex-direction: column;
        align-items: stretch !important;
    }

    .plan-scheduled-actions {
        justify-content: flex-start !important;
    }

    .plan-savings-actions {
        flex-direction: column;
        align-items: stretch !important;
    }

    .plan-savings-actions button {
        width: 100%;
        margin-right: 0 !important;
    }
}

/* =============================================
   ACCOUNTS COMPACT MODE
   Tarjetas mas compactas para listas largas
   ============================================= */
#view-analisis {
    padding-top: 6px !important;
}

.accounts-screen {
    gap: 14px;
}

.accounts-hero {
    padding: 18px;
    border-radius: 26px;
}

.accounts-hero-actions {
    margin-top: 14px;
}

.accounts-hero-stats {
    margin-top: 14px;
    gap: 8px;
}

.accounts-stat-card {
    padding: 10px 12px;
    border-radius: 18px;
}

.accounts-panel {
    padding: 14px;
    border-radius: 26px;
}

.accounts-panel-head {
    margin-bottom: 14px;
}

.accounts-panel-subtitle {
    font-size: 11px;
}

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

.accounts-stack {
    gap: 10px;
}

.accounts-card-main {
    border-radius: 24px;
    padding: 13px 13px 14px;
}

.accounts-card-top {
    gap: 8px;
}

.accounts-card-id {
    gap: 10px;
}

.accounts-card-side {
    gap: 8px;
}

.accounts-card-logo {
    width: 38px;
    height: 38px;
    border-radius: 14px;
}

.accounts-card-logo-fallback {
    font-size: 15px;
}

.accounts-card-type {
    font-size: 9px;
}

.accounts-card-name {
    margin-top: 2px;
    font-size: 0.94rem;
}

.accounts-card-currency {
    font-size: 10px;
    padding: 6px 8px;
}

.accounts-card-actions {
    gap: 6px;
}

.accounts-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 13px;
    font-size: 12px;
}

.accounts-card-balance {
    margin-top: 12px;
}

.accounts-card-balance-label {
    font-size: 10px;
}

.accounts-card-balance-value {
    margin-top: 3px;
    font-size: 1.45rem;
}

.accounts-card-badge-row {
    margin-top: 8px;
}

.accounts-card-chips {
    gap: 6px;
    margin-top: 8px;
}

.accounts-chip {
    padding: 5px 8px;
    font-size: 10px;
}

@media (max-width: 640px) {
    .accounts-hero {
        padding: 16px;
    }

    .accounts-hero-title {
        font-size: 1.58rem;
    }

    .accounts-hero-subtitle {
        font-size: 0.92rem;
    }

    .accounts-panel {
        padding: 12px;
    }

    .accounts-card-main {
        padding: 12px 12px 13px;
    }

    .accounts-card-balance-value {
        font-size: 1.34rem;
    }

    .accounts-chip {
        font-size: 9px;
        padding: 5px 7px;
    }
}

/* =============================================
   ACCOUNTS HERO COMPACT TUNE
   Reduce la altura del master de cuentas
   ============================================= */
.accounts-hero {
    padding: 14px !important;
    border-radius: 24px !important;
}

.accounts-kicker {
    margin-bottom: 4px;
    font-size: 11px;
}

.accounts-hero-title {
    font-size: 1.55rem;
}

.accounts-hero-subtitle {
    margin-top: 4px;
    font-size: 0.88rem;
}

.accounts-hero-actions {
    margin-top: 10px;
}

.accounts-primary-btn {
    padding: 10px 14px;
    font-size: 12px;
}

.accounts-hero-stats {
    margin-top: 10px;
    gap: 7px;
}

.accounts-stat-card {
    padding: 8px 10px;
    border-radius: 16px;
}

.accounts-stat-label {
    font-size: 9px;
}

.accounts-stat-value {
    margin-top: 5px;
    font-size: 0.92rem;
}

@media (max-width: 640px) {
    .accounts-hero {
        padding: 12px !important;
        border-radius: 22px !important;
    }

    .accounts-hero-title {
        font-size: 1.38rem;
    }

    .accounts-hero-subtitle {
        font-size: 0.82rem;
    }

    .accounts-primary-btn {
        padding: 9px 12px;
        font-size: 11px;
    }

    .accounts-stat-card {
        padding: 7px 9px;
    }

    .accounts-stat-value {
        font-size: 0.84rem;
    }
}

/* =============================================
   ACCOUNT DETAIL REDESIGN
   Vista premium y profesional de detalle
   ============================================= */
.account-detail-modal-shell {
    background: radial-gradient(circle at top, rgba(255,255,255,0.10) 0%, transparent 30%), var(--color-bg-app) !important;
}

.account-detail-hero {
    overflow: hidden;
    min-height: 250px;
    border-radius: 0 0 38px 38px !important;
    box-shadow: 0 24px 52px rgba(15,23,42,0.18);
}

.account-detail-back {
    width: 46px;
    height: 46px;
    border-radius: 18px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(10px);
}

.account-detail-logo-wrap {
    box-shadow: 0 18px 34px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.34);
}

.account-detail-title {
    font-size: clamp(2.1rem, 5.5vw, 2.85rem);
    letter-spacing: -0.05em;
}

.account-detail-subtitle {
    font-size: 12px;
    letter-spacing: 0.18em;
}

.account-detail-body {
    margin-top: -28px;
}

.account-detail-summary {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 18px 40px rgba(15,23,42,0.10) !important;
    backdrop-filter: blur(18px);
}

body.dark-mode .account-detail-summary {
    background: rgba(16,24,38,0.96) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.30) !important;
}

.account-detail-balance-value {
    font-size: clamp(2.25rem, 6vw, 3.35rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
    color: var(--color-text-primary);
}

.account-detail-action-grid {
    flex-wrap: wrap;
}

.account-detail-action,
.account-detail-wide-btn {
    border: 1px solid transparent;
    box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}

.account-detail-action.income {
    background: rgba(16,185,129,0.10);
    color: #0f9f63;
    border-color: rgba(16,185,129,0.12);
}

.account-detail-action.expense {
    background: rgba(239,68,68,0.10);
    color: #dc3b3b;
    border-color: rgba(239,68,68,0.12);
}

.account-detail-wide-btn.credit {
    background: rgba(10,132,255,0.12);
    color: var(--color-primary);
    border-color: rgba(10,132,255,0.16);
}

.account-detail-wide-btn.loan {
    background: rgba(16,185,129,0.12);
    color: #089669;
    border-color: rgba(16,185,129,0.16);
}

.account-detail-metric-card,
.account-detail-loan-stat {
    background: rgba(246,248,252,0.92);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 14px;
}

body.dark-mode .account-detail-metric-card,
body.dark-mode .account-detail-loan-stat {
    background: rgba(8,16,29,0.86);
}

.account-detail-history-head {
    padding: 0 2px;
}

.account-detail-history-kicker {
    margin-bottom: 4px;
}

.account-detail-tx {
    background: rgba(255,255,255,0.96) !important;
    border-radius: 22px !important;
    padding: 14px 15px !important;
    box-shadow: 0 12px 28px rgba(15,23,42,0.08) !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.account-detail-tx:active {
    transform: scale(0.99);
}

body.dark-mode .account-detail-tx {
    background: rgba(16,24,38,0.96) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.28) !important;
}

.account-detail-tx-title {
    font-size: 13px;
    letter-spacing: -0.02em;
}

.account-detail-tx-subtitle {
    margin-top: 4px;
}

.account-detail-tx-amount {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.account-detail-tx-amount.positive {
    color: #16a34a;
}

.account-detail-tx-amount.negative {
    color: var(--color-text-primary);
}

.account-detail-empty {
    background: rgba(255,255,255,0.90) !important;
}

body.dark-mode .account-detail-empty {
    background: rgba(16,24,38,0.96) !important;
}

.account-detail-empty-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 20px;
    color: var(--color-primary);
    background: rgba(10,132,255,0.10);
}

#det-loan-cuotas-list > * {
    border-radius: 16px !important;
    padding: 10px 12px !important;
}

@media (max-width: 640px) {
    .account-detail-hero {
        min-height: 220px;
        border-radius: 0 0 32px 32px !important;
        padding: 22px 18px 18px !important;
    }

    .account-detail-logo-wrap {
        width: 82px !important;
        height: 82px !important;
    }

    .account-detail-body {
        padding-left: 18px !important;
        padding-right: 18px !important;
        margin-top: -24px;
    }

    .account-detail-summary {
        padding: 18px !important;
        border-radius: 28px !important;
    }

    .account-detail-action-grid {
        flex-direction: column;
    }

    .account-detail-action {
        width: 100%;
    }

    .account-detail-metrics,
    .account-detail-loan-grid {
        grid-template-columns: 1fr !important;
    }

    .account-detail-tx {
        padding: 13px 14px !important;
    }

    .account-detail-tx-amount {
        font-size: 1.05rem;
    }
}

.account-detail-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
}

.account-detail-page-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    background: rgba(255,255,255,0.92);
    color: var(--color-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(15,23,42,0.08);
    transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}

.account-detail-page-btn:active {
    transform: scale(0.97);
}

.account-detail-page-btn:disabled {
    opacity: 0.42;
    box-shadow: none;
}

.account-detail-page-indicator {
    min-width: 112px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

body.dark-mode .account-detail-page-btn {
    background: rgba(16,24,38,0.94);
    box-shadow: 0 10px 22px rgba(0,0,0,0.24);
}

/* =============================================
   ACCOUNT CREATE REDESIGN
   Modal de nueva cuenta mas premium y consistente
   ============================================= */
.account-create-modal-shell {
    background: radial-gradient(circle at top, rgba(67,136,240,0.12) 0%, transparent 30%), var(--color-bg-app) !important;
}

.account-create-modal-wrap {
    width: 100%;
}

.account-create-topbar {
    align-items: flex-start;
}

.account-create-kicker {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--color-text-secondary);
}

.account-create-title {
    font-size: clamp(2rem, 5.4vw, 2.65rem);
    line-height: 0.94;
    letter-spacing: -0.05em;
    color: var(--color-text-primary);
}

.account-create-subtitle {
    margin-top: 8px;
    max-width: 320px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.account-create-close {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.18);
    background: rgba(255,255,255,0.7);
    color: var(--color-text-secondary);
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 26px rgba(15,23,42,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.dark-mode .account-create-close {
    background: rgba(15,23,42,0.62);
    box-shadow: 0 12px 26px rgba(0,0,0,0.24);
}

.account-create-card {
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--color-border);
    border-radius: 32px;
    padding: 18px;
    box-shadow: 0 24px 56px rgba(15,23,42,0.12);
    backdrop-filter: blur(20px);
}

body.dark-mode .account-create-card {
    background: rgba(11,18,32,0.94);
    box-shadow: 0 24px 56px rgba(0,0,0,0.32);
}

.account-create-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 16px;
    padding: 18px;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(67,136,240,0.14), rgba(56,189,248,0.12));
    border: 1px solid rgba(67,136,240,0.14);
    margin-bottom: 16px;
}

.account-create-hero-kicker,
.account-create-section-kicker {
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-secondary);
}

.account-create-hero-title,
.account-create-section-title {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
}

.account-create-hero-text {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.account-create-logo-preview {
    width: 84px;
    height: 84px;
    border-radius: 28px;
    background: linear-gradient(145deg, #4388f0, #2563eb);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 34px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.36);
    box-shadow: 0 20px 34px rgba(67,136,240,0.24);
}

.account-create-section {
    margin-top: 16px;
    padding: 16px;
    border-radius: 26px;
    background: rgba(246,248,252,0.94);
    border: 1px solid rgba(148,163,184,0.14);
}

body.dark-mode .account-create-section {
    background: rgba(15,23,42,0.72);
}

.account-create-section-head {
    margin-bottom: 12px;
}

.account-create-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.account-create-type-btn {
    min-height: 58px;
    padding: 12px 10px;
    border-radius: 20px;
    border: 1px solid rgba(148,163,184,0.2);
    background: rgba(255,255,255,0.7);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    justify-content: flex-start;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.account-create-type-btn i {
    width: 28px;
    height: 28px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(67,136,240,0.12);
    color: var(--color-primary);
}

.account-create-type-btn.is-active {
    background: linear-gradient(145deg, #4388f0, #2563eb);
    color: #fff;
    box-shadow: 0 18px 34px rgba(37,99,235,0.28);
    border-color: transparent;
}

.account-create-type-btn.is-active i {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

body.dark-mode .account-create-type-btn {
    background: rgba(11,18,32,0.7);
}

.account-create-upload-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    margin-bottom: 12px;
}

.account-create-upload-btn,
.account-create-trash-btn {
    min-height: 48px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.2);
    background: rgba(255,255,255,0.74);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--color-text-secondary);
}

.account-create-trash-btn {
    width: 50px;
    color: #ef4444;
}

body.dark-mode .account-create-upload-btn,
body.dark-mode .account-create-trash-btn {
    background: rgba(11,18,32,0.7);
}

.account-create-fields,
.account-create-grid-2 {
    display: grid;
    gap: 12px;
}

.account-create-grid-2 {
    grid-template-columns: repeat(2, minmax(0,1fr));
}

.account-create-grid-span-2 {
    grid-column: span 2;
}

.account-create-field-wrap.compact {
    margin-top: 10px;
}

.account-create-label {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-text-secondary);
}

.account-create-input {
    width: 100%;
    min-height: 50px;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.18);
    background: rgba(255,255,255,0.86);
    font-size: 14px;
    font-weight: 800;
    color: var(--color-text-primary);
    outline: none;
}

.account-create-select {
    appearance: none;
}

.account-create-input-strong {
    font-size: 1rem;
}

.account-create-readonly {
    background: rgba(67,136,240,0.08);
    color: #d97706;
}

body.dark-mode .account-create-input {
    background: rgba(7,12,24,0.82);
}

.account-create-note {
    padding: 12px 14px;
    border-radius: 18px;
    font-size: 11px;
    line-height: 1.55;
}

.account-create-note.info {
    background: rgba(67,136,240,0.1);
    color: #2563eb;
}

.account-create-note.warning {
    background: rgba(245,158,11,0.12);
    color: #b45309;
    border: 1px solid rgba(245,158,11,0.18);
}

.account-create-preview-card {
    margin-top: 12px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(148,163,184,0.18);
}

.account-create-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    color: var(--color-text-secondary);
}

.account-create-preview-row + .account-create-preview-row {
    margin-top: 10px;
}

body.dark-mode .account-create-preview-card {
    background: rgba(7,12,24,0.72);
}

.account-create-color-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.account-create-color-swatch {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.7);
    box-shadow: 0 6px 16px rgba(15,23,42,0.12);
}

.account-create-color-swatch.is-active {
    outline: 3px solid rgba(67,136,240,0.24);
    transform: scale(1.06);
}

.account-create-save-btn {
    width: 100%;
    margin-top: 18px;
    min-height: 56px;
    border-radius: 22px;
    background: linear-gradient(135deg, #4388f0, #2563eb);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 20px 36px rgba(37,99,235,0.28);
}

@media (max-width: 640px) {
    .account-create-modal-wrap {
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 14px;
    }

    .account-create-card {
        padding: 14px;
        border-radius: 28px;
    }

    .account-create-hero {
        grid-template-columns: 1fr;
    }

    .account-create-logo-preview {
        width: 74px;
        height: 74px;
        border-radius: 24px;
    }

    .account-create-grid-2,
    .account-create-type-grid {
        grid-template-columns: 1fr;
    }

    .account-create-grid-span-2 {
        grid-column: span 1;
    }
}