/* =====================================================
   ESQUEMA: Azul clásico
===================================================== */

html,
body {
    background: #eef1f7;
}

main,
#main {
    background:
        radial-gradient(circle at 100% 0%, rgba(2, 132, 199, .06) 0%, transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(15, 23, 42, .04) 0%, transparent 40%),
        #eef1f7 !important;
}

.dark main,
.dark #main,
[data-theme="dark"] main,
[data-theme="dark"] #main {
    background:
        radial-gradient(circle at 100% 0%, rgba(56, 189, 248, .07) 0%, transparent 45%),
        #0b1220 !important;
}

/* =====================================================
   MENÚ LATERAL CON COLOR (Azul clásico)
===================================================== */

#nav-sidebar {
    background-color: #0f172a !important;
    border-right: 1px solid #1e293b;
}

#nav-sidebar-inner {
    background-color: transparent !important;
}

#nav-sidebar a {
    color: #cbd5e1 !important;
}

#nav-sidebar a:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

#nav-sidebar .active {
    background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .3);
}

#nav-sidebar h2,
#nav-sidebar h3,
#nav-sidebar .text-xs {
    color: #64748b !important;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* =====================================================
   TOPBAR
===================================================== */

header {
    border-bottom: 1px solid #e5e7eb;
    position: relative;
    background: rgba(255, 255, 255, .85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dark header,
[data-theme="dark"] header {
    background: rgba(11, 18, 32, .85) !important;
    border-bottom-color: #1e293b;
}

header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #16a34a, #2563eb);
    background-size: 200% auto;
    opacity: .9;
    animation: shimmer 6s linear infinite;
}

/* =====================================================
   TARJETAS / PANELES
===================================================== */

.bg-white:not(#page):not(#main) {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 14px rgba(0, 0, 0, .05);
    border-top: 3px solid rgba(37, 99, 235, .5) !important;
    transition: box-shadow .2s ease, transform .2s ease;
}

.dark .bg-white:not(#page):not(#main),
[data-theme="dark"] .bg-white:not(#page):not(#main) {
    border-top: 3px solid rgba(59, 130, 246, .4) !important;
}

/* =====================================================
   TABLAS: encabezado y hover con tinte del esquema
===================================================== */

thead th {
    background: rgba(37, 99, 235, .06) !important;
}

.dark thead th,
[data-theme="dark"] thead th {
    background: rgba(59, 130, 246, .08) !important;
}

table tbody tr:hover {
    background-color: rgba(37, 99, 235, .06);
}

.dark table tbody tr:hover,
[data-theme="dark"] table tbody tr:hover {
    background-color: rgba(59, 130, 246, .1);
}

/* =====================================================
   BOTONES
===================================================== */

a[class*="bg-primary"],
button[class*="bg-primary"] {
    background-image: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    box-shadow: 0 6px 16px -4px rgba(37, 99, 235, .3);
}

a[class*="bg-primary"]:hover,
button[class*="bg-primary"]:hover {
    box-shadow: 0 10px 22px -6px rgba(37, 99, 235, .45);
}

.btn-recalcular {
    background: linear-gradient(90deg, #2563eb, #1d4ed8) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
}

/* =====================================================
   QUICK STATS: tinte del esquema en la primera tarjeta
===================================================== */

.qs-blue  { background: linear-gradient(135deg, rgba(37,99,235,.09), rgba(37,99,235,.02)); }
.qs-blue .qs-icon  { background: #dbeafe; color: #1d4ed8; }

.qs-amber { background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(22,163,74,.02)); }
.qs-amber .qs-icon { background: #dcfce7; color: #15803d; }

.qs-card {
    border: 1px solid rgba(37, 99, 235, .12);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px rgba(0, 0, 0, .05);
}

.qs-card:hover {
    box-shadow: 0 10px 24px -8px rgba(15, 23, 42, .2);
}

.dark .qs-card,
[data-theme="dark"] .qs-card {
    background: #111c33;
    border-color: #1e293b;
}

/* =====================================================
   HERO DE BIENVENIDA
===================================================== */

.home-hero {
    background: linear-gradient(120deg, #1e3a8a 0%, #2563eb 55%, #60a5fa 100%);
    color: #eff6ff;
    box-shadow: 0 16px 40px -18px rgba(37, 99, 235, .45);
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 20%, rgba(255,255,255,.16) 0%, transparent 40%),
        radial-gradient(circle at 15% 110%, rgba(22,163,74,.25) 0%, transparent 45%);
    pointer-events: none;
}

.home-hero-cta {
    background: rgba(255, 255, 255, .16) !important;
}

.home-hero-cta:hover {
    background: rgba(255, 255, 255, .26) !important;
}

/* =====================================================
   LOGIN
===================================================== */

#page.bg-white {
    background: radial-gradient(circle at 15% 15%, #dbeafe 0%, #f5f8ff 45%, #eef1f7 100%) !important;
}

.dark #page.bg-white,
[data-theme="dark"] #page.bg-white {
    background: radial-gradient(circle at 15% 15%, #0c2a4d 0%, #0b1220 55%, #0b1220 100%) !important;
}

#page.bg-white::before {
    background: radial-gradient(circle, rgba(37,99,235,.2), transparent 70%);
}

#page.bg-white::after {
    background: radial-gradient(circle, rgba(22,163,74,.16), transparent 70%);
}

#page.bg-white .rounded-default.w-md {
    box-shadow: 0 20px 45px -15px rgba(37, 99, 235, .45) !important;
    border: 1px solid rgba(37, 99, 235, .15);
}

#page.bg-white .rounded-default.w-md:hover {
    box-shadow: 0 24px 55px -14px rgba(37, 99, 235, .45) !important;
}

#page.bg-white input:focus {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .18) !important;
}

#page.bg-white button[type="submit"] {
    background-image: linear-gradient(90deg, #2563eb 0%, #16a34a 50%, #2563eb 100%) !important;
}