/*
 * Tema ScaleGrid Tech del panel (doc 08 §1–§3, ADR-012).
 * CSS plano, sin build: sobrescribe las variables y clases `fi-*` de Filament. Los colores salen de
 * `App\Support\PanelColors` (--primary-*, --gray-*); aquí sólo se fijan fuentes y superficies.
 */

/* ---------- Fuentes (OFL, servidas localmente: el CSP sólo admite font-src 'self') ---------- */

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-latin-wght.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
}

:root {
    --crm-obsidian: #12181f;
    --crm-caribbean: #00e699;
    --crm-grid-line: rgb(0 230 153 / 0.06);
    --crm-active-bg: rgb(0 230 153 / 0.1);
}

/* ---------- Tipografía ---------- */

.fi-header-heading,
.fi-simple-header-heading,
.fi-section-header-heading {
    letter-spacing: -0.015em;
}

/* Cifras como datos de terminal: valores de stats, folios y columnas numéricas (alineadas a la derecha, doc 08 §3). */
.fi-wi-stats-overview-stat-value,
.fi-ta-text.fi-numeric,
.fi-ta-cell-folio .fi-ta-text,
.fi-ta-text.fi-align-end,
.fi-ta-text.fi-align-right,
.fi-ta-cell.fi-align-end .fi-ta-text,
.fi-ta-cell.fi-align-right .fi-ta-text,
.fi-ta-summary-row .fi-ta-text {
    font-family: var(--mono-font-family), ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.fi-wi-stats-overview-stat-value {
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* ---------- Firma de texto (brandLogo) ---------- */

.crm-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--gray-950);
}

.crm-wordmark-node {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 2px;
    background: var(--crm-caribbean);
}

.crm-wordmark-suffix {
    font-family: var(--mono-font-family), ui-monospace, monospace;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--gray-500);
}

:where(.dark, .dark *) .crm-wordmark {
    color: #fff;
}

:where(.dark, .dark *) .crm-wordmark-suffix {
    color: var(--gray-400);
}

/* ---------- Barra superior ---------- */

.fi-topbar:where(.dark, .dark *) {
    background-color: var(--gray-950);
}

/*
 * En modo claro la barra superior también es Obsidian: junto con la barra lateral forma un marco oscuro
 * continuo, como en modo oscuro; blanca dejaba el logotipo en una franja suelta sobre la barra lateral.
 * Los grises se redefinen sólo en los controles de la barra, no en sus menús desplegables (usuario y
 * resultados de búsqueda), que siguen claros.
 */
:root:not(.dark) .fi-topbar {
    background-color: var(--crm-obsidian);
    box-shadow: none;
    border-bottom: 1px solid #222b35;
}

:root:not(.dark) :is(
    .fi-topbar-start,
    .fi-topbar-open-sidebar-btn,
    .fi-topbar-close-sidebar-btn,
    .fi-global-search-field,
    .fi-topbar-end .fi-modal-trigger,
    .fi-user-menu-trigger
) {
    --gray-100: #222b35;
    --gray-300: #46525f;
    --gray-400: #8b98a8;
    --gray-500: #8b98a8;
    --gray-700: #d3dae2;
    --gray-950: #ffffff;
    --primary-600: var(--crm-caribbean);
    --primary-700: var(--crm-caribbean);
    color-scheme: dark;
}

:root:not(.dark) .fi-global-search-field .fi-input-wrp {
    background-color: rgb(255 255 255 / 0.05);
    --tw-ring-color: rgb(255 255 255 / 0.12);
}

/* Marcadores de posición legibles sobre blanco (gray-500, 5.4:1; el 400 de Filament da 2.9:1). */
:root:not(.dark) .fi-main .fi-input::placeholder,
:root:not(.dark) .fi-main .fi-select-input-placeholder {
    color: var(--gray-500);
}

/* ---------- Barra lateral: Obsidian en ambos modos ---------- */

.fi-sidebar,
.fi-body-has-topbar .fi-sidebar-header {
    background-color: var(--crm-obsidian);
}

@media (min-width: 1024px) {
    .fi-sidebar {
        background-color: var(--crm-obsidian);
        border-inline-end: 1px solid #222b35;
    }
}

/*
 * En modo claro la barra lateral conserva el fondo Obsidian: dentro de ella se redefinen los grises y
 * verdes que usan las clases de Filament para que el texto y los íconos cumplan AA sobre #12181F.
 */
:root:not(.dark) .fi-sidebar {
    --gray-100: #222b35;
    --gray-300: #46525f;
    --gray-400: #8b98a8;
    --gray-500: #8b98a8;
    --gray-700: #d3dae2;
    --gray-950: #ffffff;
    --primary-600: var(--crm-caribbean);
    --primary-700: var(--crm-caribbean);
    color-scheme: dark;
}

.fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: #343e49 transparent;
}

.fi-sidebar-group-label {
    font-size: 0.8125rem;
}

.fi-sidebar-item-btn {
    border-radius: 0.375rem;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) {
    background-color: var(--crm-active-bg);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    font-weight: 600;
}

/* Marca del elemento activo: el nodo del logotipo convertido en barra. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: -0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--crm-caribbean);
}

/* ---------- Botón principal: Caribbean con texto Obsidian en ambos modos (10.86:1; hover 12.19:1) ---------- */

.fi-btn.fi-color-primary:not(.fi-outlined) {
    --bg: var(--primary-400);
    --text: var(--gray-950);
    --hover-bg: var(--primary-300);
    --hover-text: var(--gray-950);
    --dark-bg: var(--primary-400);
    --dark-text: var(--gray-950);
    --dark-hover-bg: var(--primary-300);
    --dark-hover-text: var(--gray-950);
}

/* ---------- Superficies ---------- */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: 0.5rem;
}

.fi-btn,
.fi-input-wrp,
.fi-badge {
    border-radius: 0.375rem;
}

/* ---------- Páginas simples: login, registro, contraseña y MFA ---------- */

.fi-simple-layout {
    background-color: var(--crm-obsidian);
    background-image:
        linear-gradient(var(--crm-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--crm-grid-line) 1px, transparent 1px);
    background-size: 32px 32px;
}

.crm-auth-brand {
    display: none;
}

.fi-simple-main:where(.dark, .dark *) {
    background-color: var(--gray-900);
}

@media (min-width: 1024px) {
    .fi-simple-layout {
        flex-direction: row;
        align-items: stretch;
    }

    .crm-auth-brand {
        display: flex;
        flex: 1 1 52%;
        flex-direction: column;
        justify-content: space-between;
        padding: 3rem;
        color: #fff;
    }

    .crm-auth-brand-mark {
        width: 160px;
        height: 160px;
    }

    .crm-auth-brand-name {
        margin: 0 0 0.5rem;
        font-size: 2.5rem;
        font-weight: 600;
        letter-spacing: -0.025em;
        line-height: 1.1;
    }

    .crm-auth-brand-quote {
        margin: 0;
        max-width: 34ch;
        font-family: var(--mono-font-family), ui-monospace, monospace;
        font-size: 1.0625rem;
        line-height: 1.55;
        color: #c9d3dd;
    }

    .fi-simple-main-ctn {
        flex: 1 1 48%;
        background-color: #fff;
    }

    .fi-simple-main-ctn:where(.dark, .dark *) {
        background-color: var(--gray-900);
    }

    .fi-simple-main {
        box-shadow: none;
        --tw-ring-shadow: 0 0 #0000;
        background-color: transparent;
    }

    .fi-simple-main:where(.dark, .dark *) {
        background-color: transparent;
    }

    /* La firma ya está en el panel de marca. */
    .fi-simple-main .fi-logo {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-sidebar-item-btn {
        transition: none;
    }
}