/*
 * Tema institucional del sistema CPM (se carga después del CSS de Filament).
 * Azul marino #142a39 (menú y fondos oscuros) · Azul petróleo #0b4d65 (primario: botones y enlaces)
 * Coral #e5543b (acento: opción activa, líneas). Los grises del panel tienen tinte azul marino
 * (AdminPanelProvider), por eso el modo oscuro no es negro.
 */
:root {
    --cpm-marino: #142a39;
    --cpm-marino-oscuro: #0e202d;
    --cpm-petroleo: #0b4d65;
    --cpm-vivo: #e5543b;
    --cpm-vivo-texto: #f58a74; /* coral más claro: legible sobre el azul marino */
    --cpm-vivo-suave: rgba(229, 84, 59, 0.18);
    --cpm-menu-texto: rgba(255, 255, 255, 0.86);
    --cpm-menu-icono: rgba(255, 255, 255, 0.55);
    --cpm-menu-grupo: #8fb4c6;
}

/* ---------- Grises más oscuros solo en modo claro ----------
 * Textos secundarios, ayudas, iconos y placeholders con más contraste.
 * El modo oscuro conserva la paleta de AdminPanelProvider. */
html:not(.dark) {
    --gray-300: 150, 166, 177; /* #96a6b1 */
    --gray-400: 107, 124, 137; /* #6b7c89 */
    --gray-500: 74, 91, 104;   /* #4a5b68 */
    --gray-600: 55, 70, 82;    /* #374652 */
    --gray-700: 40, 53, 63;    /* #28353f */
}

/* Bordes de campos, casillas, botones grises y contenedores (solo modo claro;
 * el foco y el estado de error conservan sus colores). */
html:not(.dark) .fi-input-wrp:not(.fi-invalid):not(:focus-within),
html:not(.dark) .fi-checkbox-input:not(.fi-invalid):not(:checked):not(:focus),
html:not(.dark) .fi-radio-input:not(.fi-invalid):not(:checked):not(:focus),
html:not(.dark) .fi-btn.fi-btn-color-gray:not(:focus-visible) {
    --tw-ring-color: rgba(20, 42, 57, 0.38) !important;
}
/* Foco de los campos: 1px (Filament usa 2px) en el color primario */
html:not(.dark) .fi-input-wrp:not(.fi-invalid):focus-within {
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
}
html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn {
    --tw-ring-color: rgba(20, 42, 57, 0.16) !important;
}

/* ---------- Fondo general ---------- */
body.fi-body {
    background: #e6ecf0;
}
.dark body.fi-body {
    background: rgb(var(--gray-950));
}

/* ---------- Menú lateral ---------- */
aside.fi-sidebar {
    background: linear-gradient(180deg, var(--cpm-marino) 0%, var(--cpm-marino) 35%, var(--cpm-petroleo) 100%) !important;
}
.dark aside.fi-sidebar {
    background: linear-gradient(180deg, var(--cpm-marino) 0%, var(--cpm-marino-oscuro) 100%) !important;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
}
.fi-sidebar-header {
    background: var(--cpm-marino-oscuro) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    --tw-ring-color: transparent !important;
}
.fi-sidebar-header .fi-logo {
    color: #ffffff !important;
    letter-spacing: 0.01em;
}
.fi-sidebar-header .fi-icon-btn,
.fi-sidebar-nav .fi-icon-btn {
    color: var(--cpm-menu-texto) !important;
}
.fi-sidebar-group-label {
    color: var(--cpm-menu-grupo) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem !important;
}
.fi-sidebar-group-icon,
.fi-sidebar-group-collapse-button {
    color: var(--cpm-menu-grupo) !important;
}
.fi-sidebar-item-label {
    color: var(--cpm-menu-texto) !important;
}
.fi-sidebar-item-icon {
    color: var(--cpm-menu-icono) !important;
}
.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: rgba(255, 130, 0, 0.18) !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #ff8200 !important;
}
.fi-sidebar-item-grouped-border div {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* ---------- Barra superior ---------- */
.fi-topbar > nav {
    border-bottom: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* ---------- Títulos, tablas y tarjetas ---------- */
.fi-header-heading {
    color: var(--cpm-marino);
}
.dark .fi-header-heading {
    color: #ffffff;
}
.fi-ta-header-cell {
    background: #edf2f5;
}
.dark .fi-ta-header-cell {
    background: rgb(var(--gray-800));
}
/* Tarjetas del escritorio: fondo suave distinto por caja (se repite cada 4) */
.fi-wi-stats-overview-stat {
    --cpm-caja-fondo: #e1f1f4;
    --cpm-caja-fondo-oscuro: rgba(63, 162, 181, 0.14);
    --cpm-caja-icono: #1a6f80;
    --cpm-caja-borde: #9fcfd9;
    background: var(--cpm-caja-fondo) !important;
    border: 1px solid var(--cpm-caja-borde);
    --tw-ring-color: transparent !important;
}
.fi-wi-stats-overview-stat:nth-child(4n + 2) {
    --cpm-caja-fondo: #fdf0d8;
    --cpm-caja-fondo-oscuro: rgba(246, 165, 34, 0.14);
    --cpm-caja-icono: #b7740a;
    --cpm-caja-borde: #f2c97f;
}
.fi-wi-stats-overview-stat:nth-child(4n + 3) {
    --cpm-caja-fondo: #e3f3e8;
    --cpm-caja-fondo-oscuro: rgba(74, 170, 110, 0.14);
    --cpm-caja-icono: #2f7d4c;
    --cpm-caja-borde: #a6d6b5;
}
.fi-wi-stats-overview-stat:nth-child(4n + 4) {
    --cpm-caja-fondo: #fbe7e6;
    --cpm-caja-fondo-oscuro: rgba(224, 92, 84, 0.14);
    --cpm-caja-icono: #b4433b;
    --cpm-caja-borde: #efb2ad;
}
.dark .fi-wi-stats-overview-stat {
    background: var(--cpm-caja-fondo-oscuro) !important;
    border-color: transparent;
    --cpm-caja-icono: #ffffffb3;
}
.fi-wi-stats-overview-stat-icon {
    color: var(--cpm-caja-icono) !important;
}

/* ---------- Pantalla de ingreso ---------- */
.fi-simple-layout {
    background: radial-gradient(circle at 20% 10%, var(--cpm-petroleo) 0%, var(--cpm-marino) 60%, #0a1822 100%);
}
.fi-simple-main {
    border-top: 4px solid var(--cpm-vivo);
}