/* =====================================================================
   BITNA NETWORKS - Piel del panel
   =====================================================================

   Esta hoja NO define colores: los toma de las variables que inyecta
   App\Support\Marca a traves del render hook del panel. Si manana cambia
   un tono de la marca se cambia en la clase PHP y aqui no se toca nada.

   Se apoya solo en las clases publicas de Filament (las que empiezan por
   fi-). No se cuelga de nombres generados por Tailwind, que cambian entre
   versiones sin aviso.

   El proyecto no tiene node en el servidor, asi que no hay compilacion de
   tema: es un archivo estatico que se sirve tal cual.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. FONDO Y TIPOGRAFIA
   Un fondo apenas azulado en vez del gris neutro: hace que las tarjetas
   blancas se despeguen sin necesidad de sombras fuertes.
   --------------------------------------------------------------------- */
.fi-body {
    background-color: var(--bitna-fondo);
    -webkit-font-smoothing: antialiased;
}

.dark .fi-body {
    background-color: rgb(var(--bitna-azul-950));
}

.fi-main {
    max-width: 100%;
}

/* Los titulos de pagina, en el azul de la marca y no en negro. */
.fi-header-heading {
    color: rgb(var(--bitna-azul-900));
    letter-spacing: -0.02em;
}

.dark .fi-header-heading {
    color: rgb(var(--bitna-azul-100));
}

/* ---------------------------------------------------------------------
   2. BARRA LATERAL
   Es la superficie mas grande del panel y la que hace que se reconozca
   la marca de un vistazo. Va en el azul noche del logotipo, el mismo con
   el que esta escrito "BITNA NETWORKS".
   --------------------------------------------------------------------- */
/* En pantallas grandes Filament deja la barra transparente a proposito
   (lg:bg-transparent) y el fondo lo pone el body. Aqui se pinta de verdad:
   el degradado va SOLO en el contenedor, no tambien en la lista, o se
   dibujaria dos veces y quedaria una costura debajo del logotipo. */
.fi-sidebar {
    background: linear-gradient(
        180deg,
        rgb(var(--bitna-azul-900)) 0%,
        rgb(var(--bitna-azul-950)) 100%
    );
    border-right: 1px solid rgba(var(--bitna-azul-300), 0.14);
}

.fi-sidebar-nav {
    background: transparent;
}

/* Se respeta la altura de fabrica (4rem): es la misma de la barra
   superior, y cambiarla parte la linea del encabezado en dos. */
.fi-sidebar-header {
    background: transparent;
    border-bottom: 1px solid rgba(var(--bitna-azul-300), 0.16);
    box-shadow: none;
}

/* El logotipo cambia de version segun el fondo. Se imprimen los dos y
   aqui se decide cual se ve: es determinista, sin trucos de CSS que
   dependan del navegador. */
.bitna-logo {
    height: 100%;
    width: auto;
    display: none;
}

.bitna-logo--oscuro {
    display: block;
}

.fi-sidebar .bitna-logo--oscuro,
.dark .bitna-logo--oscuro {
    display: none;
}

.fi-sidebar .bitna-logo--claro,
.dark .bitna-logo--claro {
    display: block;
}

/* Filament fija el color del texto y del icono en el PROPIO elemento, con
   sus clases de utilidad (text-gray-700, text-primary-600...). Pintar solo
   el contenedor no alcanza: hay que apuntar a cada pieza, o el menu queda
   gris oscuro sobre azul oscuro. */

.fi-sidebar-group-label,
.fi-sidebar-group-icon {
    color: rgba(var(--bitna-azul-200), 0.62);
}

.fi-sidebar-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.fi-sidebar-item-button {
    border-radius: 0.5rem;
    position: relative;
    transition: background-color 0.15s ease;
}

.fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.74);
}

.fi-sidebar-item-icon {
    color: rgba(var(--bitna-azul-300), 0.8);
}

/* El fondo gris claro del hover de fabrica se ve como una mancha sobre el
   azul. Se reemplaza por un velo blanco muy tenue. */
.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
}

.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item-button:focus-visible .fi-sidebar-item-label {
    color: #fff;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: rgb(var(--bitna-azul-200));
}

/* El modulo activo se marca con la franja roja del logotipo. Es el unico
   rojo permanente del panel: en todo lo demas el rojo significa error. */
.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: rgba(var(--bitna-azul-400), 0.24);
}

.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #fff;
}

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

.fi-sidebar-item-active .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    inset-inline-start: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.35rem;
    border-radius: 0 3px 3px 0;
    background-color: rgb(var(--bitna-rojo));
}

/* Las lineas guia de los submenus y el boton de plegar, atenuados. */
.fi-sidebar-group-collapse-button,
.fi-sidebar-item-grouped-border > div {
    color: rgba(255, 255, 255, 0.55);
    background-color: rgba(255, 255, 255, 0.18);
}

.fi-sidebar-group-collapse-button {
    background-color: transparent;
}

.fi-sidebar-header .fi-icon-btn {
    color: rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------------------
   3. BARRA SUPERIOR
   --------------------------------------------------------------------- */
.fi-topbar > nav {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--bitna-borde);
    box-shadow: none;
}

.dark .fi-topbar > nav {
    background-color: rgba(var(--bitna-azul-900), 0.88);
    border-bottom-color: rgba(var(--bitna-azul-300), 0.16);
}

/* ---------------------------------------------------------------------
   4. TARJETAS Y SECCIONES
   Menos sombra y mas borde: en una pantalla llena de formularios, las
   sombras apiladas ensucian y los bordes ordenan.
   --------------------------------------------------------------------- */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-fo-component-ctn > .fi-section {
    border: 1px solid var(--bitna-borde);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(var(--bitna-azul-900), 0.04);
}

.dark .fi-section,
.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-ctn {
    border-color: rgba(var(--bitna-azul-300), 0.14);
    box-shadow: none;
}

.fi-section-header-heading {
    color: rgb(var(--bitna-azul-900));
    font-weight: 600;
    letter-spacing: -0.01em;
}

.dark .fi-section-header-heading {
    color: rgb(var(--bitna-azul-100));
}

/* El icono de cada seccion, en el azul de la marca. */
.fi-section-header .fi-icon {
    color: rgb(var(--bitna-azul-600));
}

.dark .fi-section-header .fi-icon {
    color: rgb(var(--bitna-azul-300));
}

/* ---------------------------------------------------------------------
   5. TABLAS
   Es donde el usuario pasa el dia: se busca que la fila se lea de
   corrido y que el encabezado no compita con los datos.
   --------------------------------------------------------------------- */
.fi-ta-header-cell {
    background-color: var(--bitna-fondo);
    color: rgb(var(--bitna-azul-700));
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.dark .fi-ta-header-cell {
    background-color: rgba(var(--bitna-azul-800), 0.5);
    color: rgb(var(--bitna-azul-200));
}

.fi-ta-row:hover {
    background-color: rgba(var(--bitna-azul-600), 0.045);
}

.dark .fi-ta-row:hover {
    background-color: rgba(var(--bitna-azul-300), 0.06);
}

/* La fila seleccionada, en el azul de la marca y no en el gris de fabrica. */
.fi-ta-record-checkbox:checked ~ * .fi-ta-cell,
.fi-ta-row:has(.fi-checkbox-input:checked) {
    background-color: rgba(var(--bitna-azul-600), 0.07);
}

/* Los totales en dinero piden cifras que se puedan comparar de un vistazo. */
.fi-ta-text-item-label {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   6. BOTONES Y ENFOQUE
   --------------------------------------------------------------------- */
.fi-btn {
    font-weight: 600;
    letter-spacing: -0.005em;
}

.fi-btn.fi-color-primary,
.fi-ac-btn-action .fi-btn {
    box-shadow: 0 1px 2px rgba(var(--bitna-azul-900), 0.18);
}

/* El anillo de foco, en azul de marca: se ve en todo el teclado. */
.fi-input:focus,
.fi-select-input:focus,
.fi-fo-textarea textarea:focus {
    --tw-ring-color: rgb(var(--bitna-azul-600));
}

/* ---------------------------------------------------------------------
   7. PANTALLA DE ENTRADA
   Es lo primero que ve el usuario cada manana y estaba en blanco sobre
   blanco. Se le pone el azul de la marca de fondo y el logotipo grande.
   --------------------------------------------------------------------- */
.fi-simple-layout {
    background:
        radial-gradient(
            1100px 520px at 50% -12%,
            rgba(var(--bitna-azul-600), 0.55) 0%,
            transparent 62%
        ),
        linear-gradient(
            165deg,
            rgb(var(--bitna-azul-900)) 0%,
            rgb(var(--bitna-azul-950)) 100%
        );
    min-height: 100vh;
}

/* La franja roja del logotipo, cruzando el fondo. Un solo gesto grafico:
   la misma diagonal de la marca, muy tenue, para que la pantalla no sea
   un rectangulo azul plano. */
.fi-simple-layout::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 46%,
        rgba(var(--bitna-rojo), 0.16) 46%,
        rgba(var(--bitna-rojo), 0.16) 48.4%,
        transparent 48.4%,
        transparent 52%,
        rgba(var(--bitna-azul-300), 0.1) 52%,
        rgba(var(--bitna-azul-300), 0.1) 54.4%,
        transparent 54.4%
    );
}

.fi-simple-main {
    background-color: #fff;
    border: 1px solid rgba(var(--bitna-azul-300), 0.25);
    border-radius: 1rem;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45);
    position: relative;
    z-index: 1;
}

.dark .fi-simple-main {
    background-color: rgb(var(--bitna-azul-900));
    border-color: rgba(var(--bitna-azul-300), 0.18);
}

/* OJO: en la pantalla de entrada el logotipo va DENTRO de la tarjeta
   blanca, no sobre el fondo azul. Va la version oscura (la de por
   defecto) y solo se cambia a la clara cuando la tarjeta se pone oscura
   en modo noche. Al reves quedaria blanco sobre blanco. */
.fi-simple-main .fi-logo {
    height: 3.25rem !important;
    justify-content: center;
    margin-inline: auto;
}

.dark .fi-simple-main .bitna-logo--oscuro {
    display: none;
}

.dark .fi-simple-main .bitna-logo--claro {
    display: block;
}

.fi-simple-header-heading {
    color: rgb(var(--bitna-azul-900));
}

.dark .fi-simple-header-heading {
    color: #fff;
}

/* ---------------------------------------------------------------------
   8. DETALLES
   --------------------------------------------------------------------- */

/* Las etiquetas de estado, un poco mas compactas. */
.fi-badge {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Las notificaciones, con el borde de color a la izquierda. */
.fi-no-notification {
    border-inline-start: 3px solid rgb(var(--bitna-azul-600));
}

/* La barra de desplazamiento, discreta y del color de la marca. */
.fi-sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}

.fi-sidebar-nav::-webkit-scrollbar-track {
    background-color: transparent;
}