/* ============================================================
   Tema Xolo — panel /admin. Filament 3.3.54.
   Carga DESPUES del CSS de Filament, por eso gana sin pelear.
   Todos los hooks fi-* de aquí están verificados contra vendor/filament.
   Gramática angular: la X de marca es un polígono de 12 vértices sin una
   sola curva. Cero píldoras, cero círculos; radios de 3 a 6 px en componentes
   y 10 px en el contenedor de contenido, que es la única superficie grande.
   ============================================================ */

/* --- EL GESTO PRINCIPAL: el contenido tiene su propio suelo ---
   La esquina redondeada solo existe cuando hay sidebar del que despegarse:
   .fi-main-ctn-sidebar-open está atada a $store.sidebar.isOpen, o sea que se
   pone cuando el sidebar está ABIERTO. Colapsado —y en móvil, donde isOpen es
   falso— el contenido pega contra el borde de la ventana y ahí un radio deja
   una esquina recortada con el borde asomando. Por eso el default es 0. */
.fi-main-ctn {
    background: #F1F5F9;                    /* slate-100 */
    border-left: 1px solid #E2E8F0;
    border-top: 1px solid #E2E8F0;
    border-top-left-radius: 0;
}
.fi-main-ctn-sidebar-open { border-top-left-radius: 10px; }

/* En escritorio el riel del menú NO es blanco: .fi-sidebar es `lg:bg-transparent`
   y deja ver el slate-50 del body; el único blanco real es .fi-sidebar-header.
   La topbar se funde con el suelo del contenido: mismo slate, sin sombra, para
   que no se lea como una barra aparte. Opaca a propósito — .fi-topbar es
   sticky y el documento scrollea POR DEBAJO; en transparente las filas de la
   tabla se verían pasando a través del conmutador de empresa.
   OJO: el hook .fi-topbar es el <div> exterior y NO pinta nada. El blanco y la
   sombra los pone un <nav> hijo directo que no tiene hook propio, así que hay
   que bajar a él o la regla no toca nada. */
.fi-topbar > nav { background: #F1F5F9; box-shadow: none !important; }

/* --- Sidebar --- */
.fi-sidebar-item-button { border-radius: 4px !important; }

/* El ítem activo es una cuña chaflanada a 45° que muerde el borde del sidebar
   y apunta al contenido: hace de pestaña entre el menú y la página abierta. */
.fi-sidebar-item-active { margin-right: -.75rem; }
.fi-sidebar-item-active > .fi-sidebar-item-button {
    background: #141358 !important;         /* 900: identidad y anclaje */
    padding-right: 1.5rem;
    border-radius: 3px 0 0 3px !important;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
}
.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon { color: #fff !important; }

.fi-sidebar-group-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748B;                          /* slate-500: 4.8:1 sobre blanco, pasa AA */
}

.fi-tenant-menu-trigger { border-radius: 4px !important; background: #F1F5F9; }

/* --- Tarjetas: borde en vez de sombra. Sobre el slate se leen solas. --- */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    box-shadow: none !important;
}

/* El tic de una hoja de especificación sobre cada título de sección. */
.fi-section-header-heading { position: relative; padding-top: 11px; }
.fi-section-header-heading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 2px;
    background: #141358;
}

/* --- Estadísticas: la cifra manda, la etiqueta rotula --- */
.fi-wi-stats-overview-stat-label {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748B;                          /* slate-500: 4.8:1 sobre blanco, pasa AA */
    padding-bottom: 9px;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 11px;
}
.fi-wi-stats-overview-stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
}

/* --- Tabla: forma controlada, no hoja de cálculo ---
   Tanto el tamaño del encabezado como el relleno de la celda bajan al hijo
   que de verdad los lleva, que no es el <th> ni el <td>.
   El encabezado escribe en un <span class="fi-ta-header-cell-label text-sm">, y
   font-size NO atraviesa un hijo que declara el suyo: puesto en el <th> el
   texto se quedaba en 14 px. Lo que sí hereda (familia, tracking, versalitas)
   se queda arriba, en el <th>, junto al fondo y la regla púrpura. */
.fi-ta-header-cell {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #fff !important;
    border-bottom: 2px solid #141358;
}
.fi-ta-header-cell .fi-ta-header-cell-label { font-size: .6875rem; }

/* El <td> es `p-0`: el relleno real es el `px-3 py-4` que va DENTRO. Un
   padding-block sobre la celda SUMA en vez de reemplazar y la fila crece
   ~22 px — lo contrario de la tabla densa que promete esta sección.
   Van dos reglas porque la altura de la fila es el máximo de sus celdas: con
   la de texto sola, la celda de acciones se queda en py-4 y manda ella (todos
   los Resources de /admin declaran ->actions([...])), o sea que la tabla no
   adelgazaría ni un píxel. Descendiente y no hijo directo a propósito: entre
   el <td> y el <div class="fi-ta-text"> hay un .fi-ta-col-wrp y un
   <a>/<button>/<div> de alineación, ninguno con relleno. Por especificidad
   (0,2,0 y 0,1,1 contra la utilidad 0,1,0) no hace falta !important. */
.fi-ta-cell { font-variant-numeric: tabular-nums; }
.fi-ta-cell .fi-ta-text { padding-block: .6875rem; }
.fi-ta-actions-cell > div { padding-block: .6875rem; }

/* --- Insignias: placas con barra, no cápsulas --- */
.fi-badge { border-radius: 3px !important; border-left: 3px solid currentColor; }

/* --- Superficies cuadradas: si la marca no tiene curvas, la UI tampoco --- */
.fi-btn { border-radius: 4px !important; }
.fi-input-wrp { border-radius: 4px !important; }

/* --- Barra de carga, con los selectores CORREGIDOS.
       Las cuatro reglas que venían del <style> del provider apuntaban a la nada:
       el hook del topbar no existe en Filament 3.3.54 (cero apariciones en
       todo el paquete), y un selector de clase apuntaba a nada porque el
       NProgress que trae Livewire crea su contenedor con id="nprogress".
       O sea que el naranja original tampoco pintó nunca. Quedan tres reglas
       reales en púrpura 700. --- */
#nprogress .bar { background: #23227C !important; height: 2px !important; }
#nprogress .peg { box-shadow: 0 0 10px #23227C, 0 0 5px #23227C !important; }
#nprogress .spinner-icon { border-top-color: #23227C !important; border-left-color: #23227C !important; }