/* ========================================================
   THEME COMPLETO PARA FILAMENT
   Color principal: #B8230F
   Fondo con imagen + tarjetas de vidrio (glassmorphism)
   ======================================================== */

   /* ============================================
   LOGIN PAGE — FONDO NEGRO + GLASS + ACENTO ROJO
   ============================================ */

   .fi-simple-main,
   .fi-card {
        background: rgba(184, 35, 15, 0.95) !important; /* rojo con glass */
        border-radius: 0.9rem;
        padding: 1.4rem;
        border: 1px solid rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(8px);
        box-shadow: 0 12px 20px rgba(0,0,0,0.22);
   }



/* 1️⃣ FONDO GENERAL */

.fi-body {
    position: relative;
    min-height: 100vh;
    background: #D8D7D5; /* respaldo si no carga imagen */
    color: #ffffff;      /* texto base más legible */
}

/* Color del título principal en cada página */
.fi-page-header .fi-page-heading,
.fi-header-heading,
.fi-title  {
    color: #B8230F !important; /* rojo corporativo */
    font-weight: 700 !important;
}

/* 2️⃣ TOPBAR / NAVBAR (barra superior) + SIDEBAR HEADER */
.fi .fi-sidebar-header,
.fi .fi-topbar,
.fi .fi-topbar nav {
    background-color: #B8230F !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

/* Texto e íconos del topbar en blanco */
.fi .fi-topbar ,
.fi .fi-topbar svg {
    color: #D8D7D5 !important;
    fill: #B8230F !important;
}



/* SIDEBAR CUERPO */
.fi .fi-sidebar {
    background-color: #B8230F !important;
}

/* Textos importantes del sidebar en blanco (más específico) */
.fi .fi-sidebar-item-label,
.fi .fi-sidebar-item svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Botón interno de cada item del menú */
.fi .fi-sidebar-item-button {
    background-color: transparent !important;
    border-radius: 8px;
}

/* HOVER del item (aplicado al botón) */
.fi .fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ITEM ACTIVO (seleccionado) */
.fi .fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* 3️⃣ FONDO CON IMAGEN SOLO PARA EL CONTENIDO */
.fi-main,
.fi-content {
    position: relative;
    z-index: 1;
}

.fi-main::before,
.fi-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/img/bg.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0.30; /* un poco más suave */
    z-index: -1;
    pointer-events: none;
}

/* 4️⃣ CARDS, SECCIONES, PANELS (glass) */
.fi-card,
.fi-section,
.fi-wi-stats-overview-stat,
.fi-wi-stats-overview-card  {
    background: rgba(255, 255, 255, 0.25) !important; /* vidrio claro */
    border-radius: 0.9rem !important;
    border: 1px solid rgba(160, 177, 201, 0.35) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(14px);
}

/* TEXTO BLANCO DENTRO DE CARDS, SECTIONS Y PANELS */

.fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat-value,
.fi-section-header h3 {
    color: #B8230F !important;
    fill: #B8230F !important;
}


/* ========================================================
   SCROLLBAR (opcional)
   ======================================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.8);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 1);
}