/*
 * Tema «anaglifo» de Maldeojo Gestor (ADR-0009).
 *
 * CSS plano que se registra como asset de Filament (AppServiceProvider) y se
 * publica con `php artisan filament:assets`; no necesita Node ni Tailwind.
 * Se apoya en las clases estables `fi-*` de Filament 3.
 *
 * Idea: el logo son unas gafas 3D (rojo + cian desplazados). Ese desplazamiento
 * es el único gesto llamativo: marca el elemento activo del menú, el foco del
 * teclado y las cifras grandes. Todo lo demás es sobrio.
 */

:root {
    --mdo-tinta: #13212e;
    --mdo-tinta-2: #1b2d3d;
    --mdo-cian: #03a1e2;
    --mdo-cian-accion: #0274ad;
    --mdo-rojo: #e5021e;
    --mdo-fondo: #f3f6f8;
    --mdo-linea: #dce4ea;
    --mdo-linea-suave: #eef2f5;
    --mdo-texto-2: #5b6b79;
    --mdo-menu-texto: #c9d6e1;
    --mdo-menu-grupo: #7f93a4;
    --mdo-display: 'Outfit', 'Public Sans', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Base ---------- */

.fi-body {
    font-variant-numeric: tabular-nums;
}

html:not(.dark) .fi-body,
html:not(.dark) .fi-simple-layout {
    background-color: var(--mdo-fondo);
}

/* Títulos y cifras grandes con la geométrica fina, como el logotipo. */
.fi-header-heading,
.fi-simple-header-heading,
.fi-wi-stats-overview-stat-value {
    font-family: var(--mdo-display);
    font-weight: 400;
    letter-spacing: -0.01em;
}

.fi-section-header-heading,
.fi-modal-heading {
    font-family: var(--mdo-display);
    font-weight: 500;
}

/* ---------- Logotipo ---------- */

.mdo-marca {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.mdo-marca img {
    height: 100%;
    width: auto;
}

.mdo-marca-blanca {
    display: none;
}

.fi-sidebar .mdo-marca-tinta,
.dark .mdo-marca-tinta {
    display: none;
}

.fi-sidebar .mdo-marca-blanca,
.dark .mdo-marca-blanca {
    display: block;
}

/* ---------- Barra lateral de tinta ---------- */

.fi-sidebar,
.fi-sidebar-header {
    background-color: var(--mdo-tinta) !important;
}

.fi-sidebar-header {
    box-shadow: none !important;
    --tw-ring-color: rgba(201, 214, 225, 0.12) !important;
}

.fi-sidebar .fi-sidebar-group-label {
    color: var(--mdo-menu-grupo);
    font-weight: 500;
}

.fi-sidebar .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-group-icon,
.fi-sidebar .fi-sidebar-group-collapse-button,
.fi-sidebar-header .fi-icon-btn {
    color: var(--mdo-menu-texto) !important;
}

.fi-sidebar .fi-sidebar-item-button {
    position: relative;
}

.fi-sidebar .fi-sidebar-item-button:hover,
.fi-sidebar .fi-sidebar-item-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.fi-sidebar .fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: rgba(3, 161, 226, 0.16) !important;
}

.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #ffffff !important;
    font-weight: 600;
}

/* El gesto anaglifo: barra cian con su «fantasma» rojo desplazado. */
.fi-sidebar .fi-sidebar-item-active > .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    border-radius: 2px;
    background: var(--mdo-cian);
    box-shadow: 3px 0 0 var(--mdo-rojo);
}

.fi-sidebar .fi-sidebar-item-grouped-border > * {
    background-color: rgba(201, 214, 225, 0.25) !important;
}

/* ---------- Superficies: líneas finas en vez de sombras ---------- */

html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi-stats-overview-stat,
html:not(.dark) .fi-simple-main {
    box-shadow: 0 0 0 1px var(--mdo-linea) !important;
}

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: 14px !important;
}

html:not(.dark) .fi-ta-header-cell {
    background-color: #f7fafc;
}

.fi-ta-header-cell-label {
    font-weight: 500;
    color: var(--mdo-texto-2);
}

html:not(.dark) .fi-ta-row:hover {
    background-color: #f7fbfd;
}

/* ---------- Foco de teclado anaglifo ---------- */

.fi-body :is(a, button, [role='tab'], [role='button']):focus-visible {
    outline: 2px solid var(--mdo-cian);
    outline-offset: 2px;
    box-shadow: 3px 3px 0 0 rgba(229, 2, 30, 0.5);
}

/* ---------- Escritorio ---------- */

.fi-wi-stats-overview-stat-value {
    font-size: 2.125rem;
    line-height: 1.1;
}

@media (prefers-reduced-motion: reduce) {
    .fi-body * {
        transition: none !important;
    }
}