:root {
    /* Paleta Neutra y Elegante */
    --color-neutral-dark: #111111;     /* Negro tipográfico de lujo */
    --color-neutral-muted: #555555;    /* Gris para cuerpos de texto */
    --color-neutral-light: #F9F9F6;   /* Fondo crema/hueso ultra claro */
    --color-border-luxe: #E5E5E0;      /* Líneas de separación finas y sutiles */
    
    /* Toques de acento de la paleta original */
    --color-black-forest-700: #2C3A24;
    --color-black-forest-800: #1C2617;
    --color-black-forest-900: #0F160D;
    
    --color-olive-leaf-100: #EDF0E6;
    --color-olive-leaf-200: #DBE1D0;

    /* Color de marca destacado (Turquesa / Teal elegante) */
    --color-luxe-teal: #1F8A83;
    --color-luxe-teal-dark: #16645F;

    /* Semánticos del Sistema */
    --prince-font: 'Inter Variable', Inter, system-ui, -apple-system, sans-serif;
    --prince-radius-none: 0px; 
}


/* ==========================================
   FILAMENT OFICIAL NATIVO (PÁGINA DE LOGIN)
   CORRECCIÓN: Fondo con bg.jpg completo, panel 100% sólido blanco
   ========================================== */
html:not(.dark) .fi-simple-layout {
    background-color: var(--color-neutral-light) !important;
    background-image: url('/bg.jpg') !important; /* El fondo se aplica al layout contenedor global */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: relative;
}

/* Capa de tinta para mitigar el contraste de la foto de fondo del login nativo */
html:not(.dark) .fi-simple-layout::before {
    content: '';
    position: fixed;
    inset: 0;
    background-color: rgba(249, 249, 246, 0.85); /* Tintura clara idéntica al neutro light */
    pointer-events: none;
    z-index: 0;
}

/* Caja del formulario nativo del Login de Filament */
.fi-simple-main-ctn {
    position: relative;
    z-index: 1; /* Queda sobre el pseudo-elemento */ 
    border: 1px solid var(--color-border-luxe) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--prince-radius-none) !important;
    padding: 3rem 2.5rem !important;
}

/* Inputs y validaciones */
html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
    border-color: var(--color-luxe-teal) !important;
    box-shadow: 0 0 0 1px var(--color-luxe-teal) !important;
}

/* ==========================================
   FILAMENT OFICIAL (ADMINISTRACIÓN GENERAL)
   INSPIRADO EN LA ESTÉTICA DE image_5cdc10.png
   ========================================== */
html:not(.dark) .fi-layout,
html:not(.dark) .fi-main {
    background-color: #f7f9fc !important; /* Fondo del layout ligeramente azulado/grisáceo como en image_5cdc10.png */
}

/* Topbar: Blanca, limpia y con sombra sutil */
html:not(.dark) .fi-topbar,
html:not(.dark) .fi-topbar nav {
    background-color: #ff993f !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

/* Sidebar Oscura: Réplica del contraste lateral de image_5cdc10.png */
html:not(.dark) .fi-sidebar {
    background-color: #222e3c !important; /* Azul marino oscuro de AdminKit */
    border-right: none !important;
}

/* Textos e íconos de la barra lateral en modo pasivo */
html:not(.dark) .fi-sidebar nav a, 
html:not(.dark) .fi-sidebar nav span,
html:not(.dark) .fi-sidebar nav svg {
    
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Títulos de grupos en la barra lateral */
html:not(.dark) .fi-sidebar .fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgb(151, 85, 27);
  }
/* Elemento activo en la barra lateral (Dashboard / Página actual) */
html:not(.dark) .fi-sidebar-item-active a,
html:not(.dark) .fi-sidebar-item-active a svg {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border-left: 3px solid var(--color-luxe-teal) !important; /* Detalle de acento elegante */
}

/* Hover en elementos de la barra lateral */
html:not(.dark) .fi-sidebar-item a:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
}

/* Tarjetas, Tablas y Secciones: Esquinas suavizadas y sombras elegantes */
html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-modal-window,
html:not(.dark) .fi-ta-content,
html:not(.dark) .fi-g-card,
html:not(.dark) .fi-wi-widget {
    background-color: #ffffff !important;
    border: none !important; /* Eliminamos bordes duros para asemejar a image_5cdc10.png */
    box-shadow: 0 0 0.875rem 0 rgba(34, 46, 60, 0.05) !important; /* Sombra suave característica */
    border-radius: 0.35rem !important; /* Bordes ligeramente curvos */
}

/* Ajustes en las cabeceras de tablas y secciones */
html:not(.dark) .fi-ta-header-cell {
    background-color: #f7f9fc !important;
    font-weight: 600 !important;
    color: var(--color-neutral-muted) !important;
}

/* Botón Primario adaptado al estilo refinado */
.fi-btn.fi-color-primary {
    background-color: var(--color-luxe-teal) !important;
    border: none !important;
    color: #ffffff !important; 
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 2px 4px rgba(31, 138, 131, 0.2) !important;
}

.fi-btn.fi-color-primary:hover {
    background-color: var(--color-luxe-teal-dark) !important;
    box-shadow: none !important;
}