/*
 * La identidad de Biotec sobre Filament.
 *
 * No es un tema compilado: es una hoja que se registra con FilamentAsset y se
 * publica con `filament:assets`. Se eligió así a propósito — un tema propio de
 * Filament obliga a tener Node y a recompilar en cada despliegue, y lo que
 * queremos cambiar (color, tipografía, densidad, aire) se resuelve entero con
 * variables CSS. El día que haga falta cambiar la estructura de un componente,
 * ahí sí se justifica el tema compilado.
 *
 * La paleta sale del logo, y el sistema y la landing la comparten. Que se vean
 * distintos es la forma más rápida de que el producto parezca dos cosas
 * separadas: quien entra desde la web y hace login siente que cambió de
 * software.
 *
 * Las variables se llaman por su función y no por su color —`--biotec-marca` y
 * no `--biotec-azul`— justamente porque esto ya cambió una vez: nació verde,
 * tomado de la landing cuando no había logo. Una variable llamada "verde" que
 * hoy contiene azul es una trampa puesta para el próximo que lea el archivo.
 */

:root {
    /* Leídos del archivo del logo con scripts/leer-paleta-del-logo.php:
       el 96,8% de sus píxeles con tinta son exactamente este azul. */
    --biotec-marca: #064271;
    --biotec-marca-clara: #3d82b8;   /* para el modo oscuro y los acentos suaves */

    /* El logotipo en oscuro necesita un azul mas claro que el de los acentos.
       Medido: #3d82b8 sobre el fondo oscuro de la barra superior da 4,32 de
       contraste, apenas por debajo del 4,5 que pide AA para un texto de este
       tamano. Es la palabra "Biotec", asi que no es un detalle: es la marca. */
    --biotec-marca-logotipo: #5ea3d6;
    --biotec-pizarra: #3b4a52;       /* el gris del "Gestión" del logotipo */

    --biotec-tinta: #12212c;

    /* Fondo casi neutro, apenas frío para acompañar al azul. Deja que el color
       de marca aparezca solo donde significa algo. */
    --biotec-papel: #f5f7f9;
    --biotec-linea: #e2e8ed;
    --biotec-linea-fuerte: #cdd6de;
    --biotec-texto-suave: #5c6b76;
    --biotec-ambar: #a97318;

    /* El serif queda SOLO para la marca.
       Los titulares vuelven a la sans: en un panel de datos, donde el ojo salta
       de un título a una tabla de números veinte veces por minuto, dos familias
       tipográficas mezcladas cansan. El serif distingue a la marca; en el resto
       estorba. */
    --biotec-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

    /* Escala de aire. Una sola variable para poder respirar más o menos sin
       tocar treinta reglas. */
    --biotec-aire: 1.5rem;
}

/* ---------------------------------------------------------------------------
   Fondo y superficies
   --------------------------------------------------------------------------- */

.fi-body {
    background-color: var(--biotec-papel);
}

/* El blanco puro contra el papel verdoso es lo que hace que las tarjetas se
   despeguen del fondo sin necesidad de sombras marcadas. */
.fi-main-ctn {
    background-color: transparent;
}

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

.fi-header-heading {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--biotec-tinta);
}

.fi-section-header-heading,
.fi-modal-heading {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--biotec-tinta);
}

.fi-header-subheading {
    color: var(--biotec-texto-suave);
    font-size: 0.9rem;
    margin-top: 0.15rem;
}

/* Aire entre el encabezado de la página y su contenido. Pegados, el título
   parece parte de la primera tarjeta. */
.fi-page-header {
    margin-bottom: 0.5rem;
}

/* Los números de una ficha clínica se leen mejor alineados en columna: la
   variante tabular hace que un peso de 4,250 y otro de 32,800 tengan los dígitos
   en la misma posición. */
.fi-ta-text,
.fi-in-text {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   La marca
   --------------------------------------------------------------------------- */

.biotec-marca {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.biotec-marca-simbolo {
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
    color: var(--biotec-marca);
}

/* El símbolo recortado, que es lo único del logo que sobrevive a este tamaño.
   Cuadrado, así que no hace falta limitar el ancho. */
.biotec-marca-simbolo-img {
    height: 2rem;
    width: 2rem;
    flex: none;
    object-fit: contain;
    display: block;
}

/* En la sans del sistema, no en el serif: el logotipo original es una
   geométrica sans, y ponerle serif al lado del símbolo lo haría ver como otra
   marca pegada. */
.biotec-marca-texto {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    line-height: 1;
}

/* Los mismos dos colores del logotipo: "Biotec" en el azul de marca y
   "Gestión" en pizarra. Es lo que hace que el bloque armado a mano se lea como
   el logo y no como una imitación. */
.biotec-marca-nombre {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--biotec-marca);
}

.biotec-marca-producto {
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--biotec-pizarra);
}

.dark .biotec-marca-nombre {
    color: var(--biotec-marca-logotipo);
}

.dark .biotec-marca-producto {
    color: var(--biotec-texto-suave);
}

/* ---------------------------------------------------------------------------
   Avatares con iniciales
   --------------------------------------------------------------------------- */

/* El tono lo pone la vista a partir del nombre, así que la misma familia tiene
   siempre el mismo color. La saturación y la luminosidad son fijas y bajas: con
   valores libres, una lista de veinte filas se convierte en un arcoíris y deja
   de servir para reconocer nada. */
.biotec-avatar {
    width: 2rem;
    height: 2rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: hsl(var(--tono) 30% 92%);
    color: hsl(var(--tono) 45% 28%);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    user-select: none;
}

.dark .biotec-avatar {
    background: hsl(var(--tono) 25% 20%);
    color: hsl(var(--tono) 40% 78%);
}

/* ---------------------------------------------------------------------------
   Barra lateral
   --------------------------------------------------------------------------- */

.fi-sidebar,
.fi-topbar > nav {
    background-color: #ffffff;
    border-color: var(--biotec-linea);
}

.fi-sidebar-item-btn {
    border-radius: 0.5rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

/* Aire entre ítems: apretados, el menú se lee como un bloque de texto. */
.fi-sidebar-item + .fi-sidebar-item {
    margin-top: 0.15rem;
}

/* El título del grupo, chico y en versalita, deja de competir con los ítems. */
.fi-sidebar-group-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--biotec-texto-suave);
    font-weight: 600;
}

.fi-sidebar-group + .fi-sidebar-group {
    margin-top: 1.5rem;
}

/* Iconos más finos, como pide el rediseño. Heroicons ya viene en trazo
   delgado; lo que sobraba era el peso visual del color. */
.fi-sidebar-item-icon {
    color: var(--biotec-texto-suave);
}

/* El ítem activo se marca con una barra a la izquierda y no sólo con el fondo:
   sobre un verde claro, el relleno solo no llega a distinguirse de un hover. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: color-mix(in oklab, var(--biotec-marca) 10%, transparent);
    box-shadow: inset 3px 0 0 0 var(--biotec-marca);
    font-weight: 600;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--biotec-marca);
}

/* ---------------------------------------------------------------------------
   Tablas y secciones
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Tarjetas
   --------------------------------------------------------------------------- */

/* El borde se aclara y la sombra hace el trabajo de separar del fondo. Un borde
   marcado sobre fondo claro dibuja una reja: se ven las líneas antes que el
   contenido. */
/* La sombra lleva el azul de la marca en vez de negro. Es la diferencia entre
   una tarjeta que parece recortada y una que parece apoyada: una sombra neutra
   sobre un papel apenas frío se lee como suciedad, y la misma sombra teñida del
   color del fondo se lee como profundidad. Es el cambio que más hace por que el
   panel deje de verse plano, y no cuesta nada. */
.fi-section,
.fi-ta-ctn {
    border-color: var(--biotec-linea);
    border-radius: 0.85rem;
    box-shadow: 0 2px 15px -3px color-mix(in oklab, var(--biotec-marca) 10%, transparent);
}

.fi-section-content {
    padding: var(--biotec-aire);
}

.fi-section-header {
    padding: var(--biotec-aire) var(--biotec-aire) 0;
}

/* ---------------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------------- */

/* Encabezado en versalita: separa la cabecera del contenido sin agregarle otra
   línea ni otro color a la pantalla. */
.fi-ta-header-cell {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--biotec-texto-suave);
    font-weight: 600;
}

/* Filas más altas. Es de lo que más se nota: con las filas apretadas, encontrar
   un paciente en una lista de cuarenta obliga a seguir con el dedo en la
   pantalla. */
.fi-ta-cell {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.fi-ta-row:hover {
    background-color: color-mix(in oklab, var(--biotec-marca) 4%, transparent);
}

/* La línea entre filas apenas se insinúa: separa sin dibujar una grilla. */
.fi-ta-row:not(:last-child) {
    border-bottom-color: var(--biotec-linea);
}

/* ---------------------------------------------------------------------------
   Cifras destacadas
   --------------------------------------------------------------------------- */

/* Tres tarjetas separadas en vez de tres columnas dentro de una sola sección.
   La diferencia no es estética: tres números pegados dentro de un mismo marco
   se leen como una fila de una tabla, y hay que compararlos para entender cuál
   importa. Separados, cada uno es una respuesta. */
.biotec-cifras {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.biotec-cifra {
    background-color: #ffffff;
    border: 1px solid var(--biotec-linea);
    border-radius: 0.85rem;
    padding: 1.35rem;
    box-shadow: 0 2px 15px -3px color-mix(in oklab, var(--biotec-marca) 10%, transparent);
}

/* Versalita chica y gris: dice qué es el número sin competir con él. */
.biotec-cifra-etiqueta {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--biotec-texto-suave);
}

/* Tabular y apretado. Esta pantalla se lee de pie y de lejos: el tamaño es
   funcional, no decorativo. */
.biotec-cifra-valor {
    margin-top: 0.4rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--biotec-tinta);
}

.biotec-cifra-valor--marca {
    color: var(--biotec-marca);
}

.biotec-cifra-valor--atencion {
    color: var(--biotec-ambar);
}

.biotec-cifra-nota {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--biotec-texto-suave);
}

/* La barra al costado, y no un fondo de color: un fondo ámbar sobre una tarjeta
   blanca la convierte en una alarma, y esto no es una alarma — es plata que
   todavía se puede cobrar. */
.biotec-cifra--atencion {
    border-left: 3px solid var(--biotec-ambar);
}

/* ---------------------------------------------------------------------------
   El cockpit
   --------------------------------------------------------------------------- */

.biotec-cockpit {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* El veredicto no va dentro de una tarjeta. Es lo unico de la pantalla que se
   lee como una persona hablando, y meterlo en un marco lo convierte en un
   widget mas. */
.biotec-veredicto {
    padding: 0.25rem 0.25rem 0.5rem;
}

.biotec-veredicto-saludo {
    font-size: 0.9rem;
    color: var(--biotec-texto-suave);
}

.biotec-veredicto-texto {
    margin-top: 0.15rem;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--biotec-tinta);
}

/* "Funciona normalmente" en verde y no en gris: el dia sin nada que hacer es
   una buena noticia, y en gris se lee como que la pantalla no cargo. */
.biotec-veredicto-texto--bien {
    color: color-mix(in oklab, var(--biotec-marca) 55%, #1b7f5a);
}

.biotec-excepcion {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background-color: #ffffff;
    border: 1px solid var(--biotec-linea);
    border-radius: 0.85rem;
    padding: 1.25rem 1.35rem;
    box-shadow: 0 2px 15px -3px color-mix(in oklab, var(--biotec-marca) 10%, transparent);
}

/* La severidad se marca con una barra al costado y no con el fondo. Un fondo de
   color convierte cada tarjeta en una alarma, y cinco alarmas juntas no son
   cinco prioridades: son ruido. */
.biotec-excepcion--riesgo {
    border-left: 3px solid #b4342b;
}

.biotec-excepcion--atencion {
    border-left: 3px solid var(--biotec-ambar);
}

.biotec-excepcion--oportunidad {
    border-left: 3px solid var(--biotec-marca);
}

.biotec-excepcion-cuerpo {
    flex: 1 1 22rem;
}

.biotec-excepcion-titulo {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--biotec-tinta);
}

.biotec-excepcion-causa {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--biotec-texto-suave);
}

/* La evidencia va chica y al pie: hace falta que este, no que compita con el
   titulo. Es lo que se mira recien cuando alguien duda del numero. */
.biotec-excepcion-evidencia {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    font-size: 0.78rem;
    color: var(--biotec-texto-suave);
    list-style: none;
}

.biotec-excepcion-evidencia li::before {
    content: "·";
    margin-right: 0.4rem;
}

.biotec-excepcion-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.biotec-excepcion-monto {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--biotec-tinta);
}

/* Discreto a proposito. Tiene que estar siempre disponible —una excepcion sin
   salida se vuelve un reproche— pero no competir con la accion que si resuelve
   el problema. */
.biotec-excepcion-descartar {
    font-size: 0.82rem;
    color: var(--biotec-texto-suave);
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: 0;
    cursor: pointer;
}

.biotec-excepcion-descartar:hover {
    color: var(--biotec-tinta);
}

/* Sin marco ni sombra: es un pie de pagina, no una tarjeta. Si pesara lo mismo
   que una excepcion competiria con ella, y lo que el sistema ya resolvio no
   necesita a nadie. */
.biotec-resuelto {
    padding: 0.85rem 0.25rem 0.25rem;
    font-size: 0.85rem;
    color: var(--biotec-texto-suave);
}

.biotec-resuelto-titulo {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.biotec-resuelto ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.biotec-resuelto li::before {
    content: "✓";
    margin-right: 0.5rem;
    color: color-mix(in oklab, var(--biotec-marca) 55%, #1b7f5a);
}

.dark .biotec-excepcion {
    background-color: #131e27;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Las tarjetas del escritorio
   --------------------------------------------------------------------------- */

/* Filament dibuja las estadísticas con el mismo peso tipográfico que cualquier
   texto, así que el número —que es lo único que se viene a mirar— no gana
   nada sobre su etiqueta. Acá se invierte esa relación: etiqueta chica en
   versalita, número grande y tabular. Es la misma jerarquía que las cifras de
   Caja del día, y a propósito: dos formas distintas de mostrar un número
   importante enseñan a leer la pantalla dos veces. */
.fi-wi-stats-overview-stat {
    border-radius: 0.85rem;
    border-color: var(--biotec-linea);
    padding: 1.35rem;
    box-shadow: 0 2px 15px -3px color-mix(in oklab, var(--biotec-marca) 10%, transparent);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--biotec-texto-suave);
}

.fi-wi-stats-overview-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--biotec-tinta);
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.8rem;
    line-height: 1.35;
}

/* Las que llevan enlace se dibujan como `<a>`. Que se levanten al pasar el
   mouse es la única señal de que se puede hacer clic: sin eso, "Avisos por
   enviar" parece un cartel y la cola no se vacía nunca. */
a.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -6px color-mix(in oklab, var(--biotec-marca) 18%, transparent);
}

.dark .fi-wi-stats-overview-stat {
    box-shadow: none;
}

.dark a.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: none;
    border-color: var(--biotec-linea-fuerte);
}

/* El vacío como buena noticia y no como error. Estas tablas se esconden solas
   cuando no tienen nada, así que el estado vacío casi no se ve — pero cuando
   aparece dice "todo el padrón está al día", y en gris plomo eso se lee como
   una falla. */
.fi-ta-empty-state-icon {
    color: color-mix(in oklab, var(--biotec-marca) 45%, var(--biotec-texto-suave));
}

/* El anillo al lado de la tabla, no en lugar de ella. En pantalla angosta se
   apilan y el anillo queda arriba: es el que se entiende de un vistazo. */
.biotec-detalle {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
    .biotec-detalle {
        grid-template-columns: 20rem 1fr;
        align-items: start;
    }
}

/* ---------------------------------------------------------------------------
   Anillo de proporciones
   --------------------------------------------------------------------------- */

/* SVG y no una librería: son seis porciones que no cambian mientras se miran.
   Un gráfico dibujado por JavaScript dentro de un componente Livewire hay que
   destruirlo y volver a crearlo en cada renderizado, y el día que alguien
   cambie de día en esta pantalla el anillo se queda con los datos de ayer sin
   avisar. Este se redibuja solo porque es HTML. */
.biotec-anillo {
    position: relative;
    width: 11rem;
    height: 11rem;
    margin-inline: auto;
}

.biotec-anillo svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* que la primera porción arranque arriba */
}

.biotec-anillo-centro {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    pointer-events: none;
}

.biotec-anillo-cifra {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--biotec-tinta);
}

.biotec-anillo-pie {
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: var(--biotec-texto-suave);
}

/* Sólo los medios con movimiento. Los que están en cero siguen apareciendo en
   la tabla de abajo, que es donde importa no olvidarlos: un anillo no puede
   dibujar un cero, así que la tabla no se reemplaza — se acompaña. */
.biotec-anillo-referencias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin-top: 1.25rem;
    font-size: 0.8rem;
    color: var(--biotec-texto-suave);
}

.biotec-anillo-referencia {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.biotec-anillo-punto {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    flex: none;
}

/* ---------------------------------------------------------------------------
   Pantalla de acceso
   --------------------------------------------------------------------------- */

.fi-simple-layout {
    background:
        radial-gradient(60rem 40rem at 50% -10%, color-mix(in oklab, var(--biotec-marca) 8%, transparent), transparent),
        var(--biotec-papel);
}

.fi-simple-main {
    border: 1px solid var(--biotec-linea);
    box-shadow: 0 1px 2px rgb(16 32 28 / 0.04), 0 12px 32px -12px rgb(16 32 28 / 0.12);
}

/* ---------------------------------------------------------------------------
   Modo oscuro
   --------------------------------------------------------------------------- */

.dark {
    /* Azules muy oscuros y no grises neutros: un fondo neutro debajo de un
       acento azul lo hace ver morado. */
    --biotec-papel: #0e161d;
    --biotec-tinta: #e8eef3;
    --biotec-linea: #22303a;
    --biotec-linea-fuerte: #2e3f4b;
    --biotec-texto-suave: #93a6b3;

    /* El azul del logo sobre fondo oscuro queda casi negro y pierde toda
       presencia. En oscuro manda la variante clara. */
    --biotec-marca: var(--biotec-marca-clara);
}

/* La barra lateral y la superior comparten superficie con el bloque de la marca.
   Antes tenian un gris azulado propio (#131e27) mientras el contenedor del logo
   conservaba el de Filament (#0f172b): dos oscuros distintos pegados, que a
   simple vista se leen como una costura mal resuelta. Se adopta el de Filament
   en vez de imponer el nuestro — es el que usan los componentes que no
   controlamos, y pelearle significa perseguirlo en cada version. */
.dark .fi-sidebar,
.dark .fi-topbar,
.dark .fi-topbar > nav {
    background-color: #0f172b;
    border-color: var(--biotec-linea);
}

.dark .fi-body {
    background-color: var(--biotec-papel);
}

.dark .fi-section,
.dark .fi-ta-ctn {
    background-color: #131e27;
    border-color: var(--biotec-linea);
    box-shadow: none;
}

.dark .fi-simple-main {
    background-color: #131e27;
    border-color: var(--biotec-linea);
}

/* Las tarjetas de cifras comparten superficie con las secciones. En oscuro la
   sombra se saca: sobre un fondo casi negro no separa nada y sólo ensucia el
   borde, que ahí es lo que hace el trabajo. */
.dark .biotec-cifra {
    background-color: #131e27;
    border-color: var(--biotec-linea);
    box-shadow: none;
}