/*
 * Los pocos estilos propios del portal.
 *
 * ⚠️ **Filament v5 NO trae las utilidades de Tailwind.** Su hoja de estilos
 * publica sólo clases `fi-*`: un `class="flex items-center gap-2"` en un Blade
 * propio no hace absolutamente nada, y el elemento queda sin estilo sin que nada
 * lo delate. Por eso lo propio se escribe acá, con nombre propio.
 *
 * Todo usa las **variables de Filament** (`--gray-500`, `--danger-500`…) y su
 * misma forma de marcar el modo oscuro, `:where(.dark, .dark *)`, para que el
 * portal se vea igual en los dos temas sin mantener dos paletas.
 */

/* --- El contrato de frescura del §10 --------------------------------------- */

.bi-freshness {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem 0.5rem;
    /*
     * ⚠️ El respiro de arriba tiene que ponerlo el banner.
     *
     * Va montado en el render hook `CONTENT_START`, o sea **fuera** de
     * `.fi-page-header-main-ctn`, que es de donde sale el aire superior de
     * todas las páginas de Filament (`padding-block: 2rem`). Sin este margen el
     * banner queda pegado al topbar, a cero píxeles.
     *
     * Se usa la misma medida que Filament para que el ritmo vertical no se note
     * distinto, y el margen de abajo queda en cero porque ese espacio ya lo pone
     * el padding del encabezado de la página.
     */
    margin-top: calc(var(--spacing, 0.25rem) * 8);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background-color: var(--gray-50);
    color: var(--gray-600);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gray-950) 10%, transparent);
}

.bi-freshness:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--gray-400) 10%, transparent);
    color: var(--gray-400);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gray-50) 10%, transparent);
}

/* Una bodega que faltó: el total que se está mirando no está completo. */
.bi-freshness--warning {
    background-color: var(--warning-50);
    color: var(--warning-700);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-600) 20%, transparent);
}

.bi-freshness--warning:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--warning-400) 10%, transparent);
    color: var(--warning-400);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-400) 30%, transparent);
}

/* Sin datos, o datos más viejos de lo tolerable. */
.bi-freshness--danger {
    background-color: var(--danger-50);
    color: var(--danger-700);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-600) 20%, transparent);
}

.bi-freshness--danger:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--danger-400) 10%, transparent);
    color: var(--danger-400);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-400) 30%, transparent);
}

.bi-freshness-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.bi-freshness-label {
    font-weight: 500;
}

.bi-freshness-warning {
    opacity: 0.9;
}

/* --- Notas al pie de un reporte -------------------------------------------- */

.bi-note {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-500);
}

.bi-note:where(.dark, .dark *) {
    color: var(--gray-400);
}

.bi-note--warning {
    font-weight: 500;
    color: var(--warning-600);
}

.bi-note--warning:where(.dark, .dark *) {
    color: var(--warning-400);
}

.bi-note + .bi-note {
    margin-top: 0.25rem;
}

/* --- El gráfico del constructor -------------------------------------------- */

/*
 * ⚠️ El contenedor **tiene que llevar `fi-wi-chart`**. Todas las reglas de color
 * del gráfico —incluidas las del tooltip— están scopeadas a esa clase
 * (`.fi-wi-chart .fi-wi-chart-tooltip-bg-color{…}`). Sin ella, el fondo y el
 * texto del tooltip heredan el color del texto de la sección: en modo oscuro eso
 * es blanco sobre blanco, y el tooltip se ve vacío.
 */
.bi-chart {
    height: 20rem;
}

.bi-chart canvas {
    width: 100%;
    height: 100%;
    max-height: 100%;
}