/* =====================================================
   ESQUEMA: Azul claro y blanco
===================================================== */

html,
body {
    background: #f4f9ff;
}

main,
#main {
    background:
        radial-gradient(circle at 100% 0%, rgba(14, 165, 233, .06) 0%, transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(56, 189, 248, .05) 0%, transparent 40%),
        #f4f9ff !important;
}

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

/* =====================================================
   MENÚ LATERAL CON COLOR (Azul claro y blanco)
===================================================== */

#nav-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #dbeafe;
}

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

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

#nav-sidebar a:hover {
    background-color: #eff6ff !important;
    color: #0369a1 !important;
}

#nav-sidebar .active {
    background: linear-gradient(90deg, #0ea5e9, #38bdf8) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, .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 #e0f2fe;
    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, #0ea5e9, #0284c7, #0ea5e9);
    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(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .05);
    border-top: 3px solid rgba(14, 165, 233, .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(56, 189, 248, .4) !important;
}

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

thead th {
    background: rgba(14, 165, 233, .06) !important;
}

.dark thead th,
[data-theme="dark"] thead th {
    background: rgba(56, 189, 248, .08) !important;
}

table tbody tr:hover {
    background-color: rgba(14, 165, 233, .06);
}

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

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

a[class*="bg-primary"],
button[class*="bg-primary"] {
    background-image: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    box-shadow: 0 6px 16px -4px rgba(14, 165, 233, .3);
}

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

.btn-recalcular {
    background: linear-gradient(90deg, #0ea5e9, #0284c7) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, .3);
}

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

.qs-blue  { background: linear-gradient(135deg, rgba(14,165,233,.09), rgba(14,165,233,.02)); }
.qs-blue .qs-icon  { background: #e0f2fe; color: #0284c7; }

.qs-amber { background: linear-gradient(135deg, rgba(2,132,199,.07), rgba(2,132,199,.02)); }
.qs-amber .qs-icon { background: #dbeafe; color: #1d4ed8; }

.qs-card {
    border: 1px solid rgba(14, 165, 233, .14);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 12px rgba(15, 23, 42, .05);
}

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

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

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

.home-hero {
    background: linear-gradient(120deg, #0369a1 0%, #0ea5e9 55%, #7dd3fc 100%);
    color: #f0f9ff;
    box-shadow: 0 16px 40px -18px rgba(14, 165, 233, .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(255,255,255,.14) 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%, #e0f2fe 0%, #f4f9ff 45%, #f4f9ff 100%) !important;
}

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

#page.bg-white::before {
    background: radial-gradient(circle, rgba(14,165,233,.2), transparent 70%);
}

#page.bg-white::after {
    background: radial-gradient(circle, rgba(56,189,248,.18), transparent 70%);
}

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

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

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

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