/* ===========================================================================
   DASHBOARD PRO — rediseño visual del dashboard de recargas.
   SOLO diseño: reestiliza las clases existentes (.dashboard-card, etc.).
   No cambia markup, datos ni validación. Se carga DESPUÉS de estilo.css.
   Para revertir: quita el <link> de dashboard-pro.css en home/principal.php.
   =========================================================================== */

/* Paleta por color de tarjeta (se hereda a íconos y barras internas) */
.card-blue   { --a1:#2563eb; --a2:#60a5fa; --glow:rgba(37,99,235,.45); }
.card-green  { --a1:#16a34a; --a2:#4ade80; --glow:rgba(22,163,74,.45); }
.card-red    { --a1:#e11d48; --a2:#fb7185; --glow:rgba(225,29,72,.45); }
.card-purple { --a1:#7c3aed; --a2:#c084fc; --glow:rgba(124,58,237,.45); }

/* Tipografía del dashboard: Sora (texto) + Space Grotesk (títulos y números) */
.dashboard-card,
.dashboard-card-lg {
    font-family: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#principal legend,
.dashboard-title,
.dashboard-value,
.card-lg-title {
    font-family: "Urbanist", "Sora", system-ui, sans-serif;
}

/* Separa las cartas de los botones (Caja / Egresos / Ingresos) */
#principal .row:has(.dashboard-card),
#principal .row:has(.dashboard-card-lg) {
    margin-top: 22px;
}

/* ===== Marco general del dashboard ===== */
#principal fieldset {
    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.05);
    box-shadow: 0 18px 50px rgba(2,18,80,.18);
    padding: 18px 18px 8px !important;
}
#principal legend.lead,
#principal legend {
    font-weight: 800;
    letter-spacing: .5px;
    color: #fff;
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    border-radius: 999px;
    padding: 6px 22px !important;
    box-shadow: 0 8px 18px rgba(37,99,235,.35);
    font-size: 1.05rem;
}

/* ===== Tarjetas chicas ===== */
.dashboard-card {
    min-height: 150px;
    height: 100%;          /* iguala la altura de todas las cartas de la fila */
    border-radius: 22px;
    padding: 18px 20px;
    color: #0b1f6b;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.65);
    background:
        linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 28px rgba(4,18,70,.22);
    transition: transform .28s cubic-bezier(.2,.8,.2,1),
                box-shadow .28s ease;
    animation: sc-rise .5s ease both;
}
.dashboard-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(4,18,70,.30), 0 0 0 1px rgba(255,255,255,.7) inset;
}

/* Glow superior de color */
.dashboard-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 120px;
    background: radial-gradient(120px 80px at 85% -10%, var(--glow), transparent 70%);
    opacity: .9;
    pointer-events: none;
}

/* Barra inferior de color (más gruesa y con glow, crece al hover) */
.dashboard-card::after {
    height: 4px;
    left: 18px; right: 18px;
    background: linear-gradient(90deg, var(--a1), var(--a2));
    box-shadow: 0 0 14px var(--glow);
    transition: left .28s ease, right .28s ease;
}
.dashboard-card:hover::after { left: 10px; right: 10px; }

/* ===== Íconos: badge circular con gradiente y glow ===== */
.dashboard-icon {
    right: 18px; top: 18px;
    width: 46px; height: 46px;
    border-radius: 14px;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 8px 18px var(--glow);
    transition: transform .28s ease;
}
.dashboard-card:hover .dashboard-icon { transform: scale(1.08) rotate(-4deg); }
.dashboard-icon::after {
    border-radius: 14px;
    background: linear-gradient(135deg, var(--a1), var(--a2)) !important;
}

/* ===== Textos ===== */
.dashboard-title {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #334155;
    padding-right: 56px;   /* deja espacio para el ícono */
}
.dashboard-value {
    font-size: 32px;
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.8px;
    font-variant-numeric: tabular-nums;
    color: #0a1a5c;
    margin: 2px 0;
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.dashboard-sub {
    font-size: 13px;
    color: #475569;
    opacity: 1;
}
.dashboard-scroll .dashboard-value {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
    text-shadow: none;
}

/* ===== Tarjetas grandes ===== */
.dashboard-card-lg {
    border-radius: 22px;
    height: 100%;
    padding: 22px 24px;
    color: #0b1f6b;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.6);
    background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,.72));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 14px 34px rgba(4,18,70,.24);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
    animation: sc-rise .5s ease both;
}
.dashboard-card-lg:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(4,18,70,.30);
}
.dashboard-card-lg::after {
    height: 4px; left: 18px; right: 18px;
    background: linear-gradient(90deg, var(--a1), var(--a2));
    box-shadow: 0 0 14px var(--glow);
}
.card-lg-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #1e3a8a;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px dashed rgba(30,58,138,.18);
}
/* Lista de items (líneas separadas por <br>) con buen aire y legibilidad */
.card-lg-scroll {
    max-height: 120px;
    font-size: 13.5px;
    line-height: 2;
    color: #1f2a52;
}
.card-lg-scroll i { color: #64748b; }

/* Área de la frase del día / saldo / recargas: más alta para verla completa */
.dashboard-scroll { max-height: 200px; }

/* ===== Scrollbars finos y tintados ===== */
.dashboard-scroll,
.card-lg-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--a2, #93c5fd) transparent;
}
.dashboard-scroll::-webkit-scrollbar,
.card-lg-scroll::-webkit-scrollbar { width: 6px; }
.dashboard-scroll::-webkit-scrollbar-thumb,
.card-lg-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--a1, #3b82f6), var(--a2, #93c5fd));
    border-radius: 999px;
}
.dashboard-scroll::-webkit-scrollbar-track,
.card-lg-scroll::-webkit-scrollbar-track { background: transparent; }

/* ===== Animación de entrada (escalonada) ===== */
@keyframes sc-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
#principal .row > div:nth-child(1) .dashboard-card,
#principal .row > div:nth-child(1) .dashboard-card-lg { animation-delay: .03s; }
#principal .row > div:nth-child(2) .dashboard-card,
#principal .row > div:nth-child(2) .dashboard-card-lg { animation-delay: .09s; }
#principal .row > div:nth-child(3) .dashboard-card,
#principal .row > div:nth-child(3) .dashboard-card-lg { animation-delay: .15s; }
#principal .row > div:nth-child(4) .dashboard-card,
#principal .row > div:nth-child(4) .dashboard-card-lg { animation-delay: .21s; }
#principal .row > div:nth-child(5) .dashboard-card-lg { animation-delay: .27s; }
#principal .row > div:nth-child(6) .dashboard-card-lg { animation-delay: .33s; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .dashboard-card   { padding: 14px 16px; min-height: 140px; }
    .dashboard-card-lg{ padding: 16px 18px; }
    .dashboard-value  { font-size: 22px; }
    .dashboard-icon   { width: 40px; height: 40px; font-size: 17px; }
    #principal fieldset { border-radius: 20px !important; padding: 12px !important; }
}

/* Respeta usuarios que piden menos animación */
@media (prefers-reduced-motion: reduce) {
    .dashboard-card, .dashboard-card-lg { animation: none; }
    .dashboard-card:hover, .dashboard-card-lg:hover { transform: none; }
}

/* ===== Fix iOS (sin blur): mantiene legibilidad y el nuevo look ===== */
@supports (-webkit-touch-callout: none) {
    .dashboard-card,
    .dashboard-card-lg {
        background: rgba(255,255,255,.95);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        color: #0b1f6b;
    }
}