/*
 * Estilos propios del backend.
 *
 * Toda clase nueva va aqui: esta PROHIBIDO el `style=""` inline, los bloques
 * <style> y registerCss() dentro de vistas, controladores o layouts.
 * Antes de crear una clase, verificar que no exista ya una equivalente.
 */

/* Miniatura del avatar en el formulario y el detalle del usuario. */
.user-photo-preview {
    margin-top: .5rem;
    max-height: 120px;
}

/* ==========================================================================
 * Marca — IA Brain
 *
 * Paleta heredada de la base del proyecto: pendiente de definir la propia.
 *
 * El color corporativo es #891700 y en este tema entra por `primary`.
 * `success` se queda con el verde original de Mazer.
 *
 * El tema trae sus colores cableados como literales en `theme/compiled/css/`
 * (33 bloques con el azul #435ebe), asi que NO basta con redefinir
 * `--bs-primary`: hay que repisar tambien las variables de cada componente.
 * Se hace aqui, nunca editando el CSS compilado, para que una actualizacion
 * del tema no borre la marca. Este archivo se carga DESPUES de app.css en
 * AppAsset, asi que gana por orden y no necesita `!important`.
 *
 * Paleta derivada de #891700 con las proporciones que usa Bootstrap:
 *   hover  = shade 15%   #741400      subtle = tint 80%   #E7D1CC
 *   active = shade 20%   #6E1200      fondo  = tint 95%   #F9F3F2
 * ========================================================================== */

:root,
[data-bs-theme="light"] {
    /* Fondo del contenido: el tema traia un azul muy sutil (#f2f7ff). */
    --bs-body-bg: #F9F3F2;
    --bs-body-bg-rgb: 249, 243, 242;

    /* El tema tiñe de azul el color de TODOS los encabezados (#25396f): es lo
     * que pinta el "Ingresar" del login, el titulo de la pagina de error y los
     * titulos de tarjeta. Mismo matiz de marca y misma luminosidad, asi que el
     * contraste no cambia: 10.88:1 sobre blanco. */
    --bs-heading-color: #6B2719;

    --bs-blue: #891700;
    --bs-primary: #891700;
    --bs-primary-rgb: 137, 23, 0;
    --bs-primary-text-emphasis: #370900;
    --bs-primary-bg-subtle: #E7D1CC;
    --bs-primary-border-subtle: #D0A299;
    --bs-link-color: #891700;
    --bs-link-color-rgb: 137, 23, 0;
    --bs-link-hover-color: #6E1200;
    --bs-link-hover-color-rgb: 110, 18, 0;
}

html[data-bs-theme="dark"] {
    /* OJO: el tema declara sus variables oscuras con `[data-bs-theme="dark"]`,
     * que tiene la MISMA especificidad que el `:root` de arriba (0,1,0). Como
     * este archivo carga despues, el `:root` le ganaria tambien en modo oscuro
     * y se colarian los valores claros. Por eso TODA variable que se toque
     * arriba tiene que repetirse aqui con su valor oscuro: este selector si
     * lleva `html` delante y gana por especificidad (0,1,1). */
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-heading-color: inherit;

    --bs-blue: #891700;
    --bs-primary: #891700;
    --bs-primary-rgb: 137, 23, 0;
    --bs-primary-text-emphasis: #B87466;
    --bs-primary-bg-subtle: #2A0800;
    --bs-primary-border-subtle: #72261A;
    --bs-link-color: #B87466;
    --bs-link-color-rgb: 184, 116, 102;
    --bs-link-hover-color: #D0A299;
    --bs-link-hover-color-rgb: 208, 162, 153;
}

/* --- Botones --- */
.btn-primary,
html[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #891700;
    --bs-btn-border-color: #891700;
    --bs-btn-hover-bg: #741400;
    --bs-btn-hover-border-color: #6E1200;
    --bs-btn-active-bg: #6E1200;
    --bs-btn-active-border-color: #671100;
    --bs-btn-disabled-bg: #891700;
    --bs-btn-disabled-border-color: #891700;
}

.btn-outline-primary,
html[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #891700;
    --bs-btn-border-color: #891700;
    --bs-btn-hover-bg: #891700;
    --bs-btn-hover-border-color: #891700;
    --bs-btn-active-bg: #891700;
    --bs-btn-active-border-color: #891700;
    --bs-btn-disabled-color: #891700;
    --bs-btn-disabled-border-color: #891700;
}

.btn-link,
html[data-bs-theme="dark"] .btn-link {
    --bs-btn-color: #891700;
    --bs-btn-hover-color: #6E1200;
    --bs-btn-active-color: #6E1200;
}

/* --- Formularios --- */
/* El halo de foco de los checkbox y radios lo declara el tema igual en claro y
 * en oscuro (#a1afdf + rgba del azul), asi que lleva las dos contrapartes. */
.form-check-input:focus,
html[data-bs-theme="dark"] .form-check-input:focus {
    border-color: #DEAAA0;
    box-shadow: 0 0 0 .25rem rgba(137, 23, 0, .25);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate,
.form-check .form-check-input.form-check-primary,
.form-check.form-check-primary .form-check-input,
html[data-bs-theme="dark"] .form-check-input:checked,
html[data-bs-theme="dark"] .form-check-input[type="checkbox"]:indeterminate,
html[data-bs-theme="dark"] .form-check .form-check-input.form-check-primary,
html[data-bs-theme="dark"] .form-check.form-check-primary .form-check-input {
    background-color: #891700;
    border-color: #891700;
}

.form-range::-webkit-slider-thumb,
html[data-bs-theme="dark"] .form-range::-webkit-slider-thumb {
    background-color: #891700;
}

.form-range::-moz-range-thumb,
html[data-bs-theme="dark"] .form-range::-moz-range-thumb {
    background-color: #891700;
}

.form-control:focus,
.form-select:focus {
    border-color: #D0A299;
    box-shadow: 0 0 0 .25rem rgba(137, 23, 0, .25);
}

/* Variante de campo con label flotante del tema. */
.form-group.with-title .form-control:focus ~ label,
.form-group.with-title dataTable-input:focus ~ label,
html[data-bs-theme="dark"] .form-group.with-title .form-control:focus ~ label,
html[data-bs-theme="dark"] .form-group.with-title dataTable-input:focus ~ label {
    border-color: #891700;
}

/* --- Navegacion y listados --- */
.dropdown-menu,
.dropdown-menu-dark,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .dropdown-menu-dark {
    --bs-dropdown-link-active-bg: #891700;
}

.nav-pills,
html[data-bs-theme="dark"] .nav-pills {
    --bs-nav-pills-link-active-bg: #891700;
}

.pagination,
html[data-bs-theme="dark"] .pagination {
    --bs-pagination-color: #891700;
    --bs-pagination-hover-color: #6E1200;
    --bs-pagination-focus-color: #6E1200;
    --bs-pagination-active-bg: #891700;
    --bs-pagination-active-border-color: #891700;
}

.pagination.pagination-primary .page-item.active .page-link,
html[data-bs-theme="dark"] .pagination.pagination-primary .page-item.active .page-link {
    background-color: #891700;
    border-color: #891700;
}

.list-group,
html[data-bs-theme="dark"] .list-group {
    --bs-list-group-active-bg: #891700;
    --bs-list-group-active-border-color: #891700;
}

.nav-tabs .nav-link.active,
html[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: #891700;
}

.nav-tabs .nav-link.active:after,
html[data-bs-theme="dark"] .nav-tabs .nav-link.active:after {
    background-color: #891700;
}

/* --- Sidebar --- */
.sidebar-wrapper .menu .sidebar-item.active > .sidebar-link,
html[data-bs-theme="dark"] .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link {
    background-color: #891700;
}

.sidebar-wrapper .menu .submenu .submenu-item.active > a,
.sidebar-wrapper .menu .submenu .submenu-item a:hover,
html[data-bs-theme="dark"] .sidebar-wrapper .menu .submenu .submenu-item.active > a {
    color: #891700;
}

.layout-horizontal .main-navbar {
    background-color: #891700;
}

/* --- Progreso y avisos --- */
.progress,
.progress-stacked,
html[data-bs-theme="dark"] .progress,
html[data-bs-theme="dark"] .progress-stacked {
    --bs-progress-bar-bg: #891700;
}

.progress.progress-primary .progress-bar,
html[data-bs-theme="dark"] .progress.progress-primary .progress-bar {
    background-color: #891700;
}

.alert-primary,
html[data-bs-theme="dark"] .alert-primary {
    background-color: #891700;
}

.badge.bg-primary,
.bg-primary {
    background-color: #891700 !important;
}

.text-primary {
    color: #891700 !important;
}

/* --- Textos y fondos frios que el tema cablea aparte de `primary` ---
 * Tres colores mas del tema son azules independientes de `--bs-primary`, asi
 * que hay que repisarlos uno a uno:
 *   #25396f  color de los encabezados y del texto del menu lateral
 *   #ebf3ff  fondo de las variantes "light-primary" y de la pagina de error
 *   #f2f7ff  fondo del contenido, de .img-thumbnail y de la pestana activa
 * Cada equivalente conserva la luminosidad del original y solo cambia el
 * matiz, asi que los contrastes no empeoran. */
.sidebar-wrapper .menu .sidebar-title,
.sidebar-wrapper .menu .submenu .submenu-item a {
    color: #6B2719;
}

/* El `padding` venia de `css/site.css`, que se consolido en este archivo. */
.sidebar-wrapper .menu .sidebar-link {
    color: #6B2719;
    padding: 0.4rem 1rem;
}

/* Los iconos del menu, los pies de campo y los `caption` de tabla usan otro
 * azul del tema (#7c8db5). Mismo tratamiento: matiz de marca, misma
 * luminosidad. */
.sidebar-wrapper .menu .sidebar-link svg,
.sidebar-wrapper .menu .sidebar-link i,
.form-text,
caption {
    color: #B6867C;
}

.img-thumbnail {
    background-color: #F9F3F2;
}

.nav-tabs {
    --bs-nav-tabs-link-active-bg: #F9F3F2;
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #F9F3F2, 0 0 0 0.25rem rgba(137, 23, 0, 0.25);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #F9F3F2, 0 0 0 0.25rem rgba(137, 23, 0, 0.25);
}

.alert-light-primary {
    background-color: #F4EDEB;
    border-color: #FAE5E1;
    color: #8C4436;
}

.btn.btn-light-primary {
    background-color: #F4EDEB;
    color: #45160C;
}

.bg-light-primary {
    background-color: #F4EDEB;
}

/* --- Modo oscuro: los mismos ajustes, con los tonos del tema oscuro ---
 * El tema repite cada regla bajo `html[data-bs-theme="dark"]`, asi que sin
 * estas contrapartes el modo oscuro se quedaba con los azules originales. */
html[data-bs-theme="dark"] .sidebar-wrapper .menu .sidebar-title {
    color: #AD9C99;
}

html[data-bs-theme="dark"] .sidebar-wrapper .menu .sidebar-link {
    color: #AD9C99;
    padding: 0.4rem 1rem;
}

html[data-bs-theme="dark"] .sidebar-wrapper .menu .sidebar-link svg,
html[data-bs-theme="dark"] .sidebar-wrapper .menu .sidebar-link i,
html[data-bs-theme="dark"] .form-text,
html[data-bs-theme="dark"] caption {
    color: #B6867C;
}

html[data-bs-theme="dark"] .sidebar-wrapper .menu .submenu .submenu-item a {
    color: #AD9C99;
}

html[data-bs-theme="dark"] .img-thumbnail {
    background-color: #2B3035;
}

html[data-bs-theme="dark"] .nav-tabs {
    --bs-nav-tabs-link-active-bg: #2B3035;
}

html[data-bs-theme="dark"] .form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #2B3035, 0 0 0 0.25rem rgba(137, 23, 0, 0.25);
}

html[data-bs-theme="dark"] .form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #2B3035, 0 0 0 0.25rem rgba(137, 23, 0, 0.25);
}

html[data-bs-theme="dark"] .alert-light-primary {
    background-color: #2A0800;
    border-color: #4A1409;
    color: #D0A299;
}

html[data-bs-theme="dark"] .btn.btn-light-primary {
    background-color: #2A0800;
    color: #D0A299;
}

html[data-bs-theme="dark"] .bg-light-primary {
    background-color: #2A0800;
}

/* El tema repite el alto del logo y el foco de los campos bajo
 * `html[data-bs-theme="dark"]`, asi que sin estas contrapartes el modo oscuro
 * volvia al logo de 19px y al halo de foco azul. */
html[data-bs-theme="dark"] .sidebar-wrapper .sidebar-header img,
html[data-bs-theme="dark"] .layout-horizontal .header-top .logo img {
    height: auto;
    max-height: 64px;
    max-width: 100%;
}

html[data-bs-theme="dark"] .form-control:focus {
    border-color: #68504B;
    box-shadow: 0 0 0 .25rem rgba(137, 23, 0, .25);
}

html[data-bs-theme="dark"] .form-select:focus {
    border-color: #DEAAA0;
    box-shadow: 0 0 0 .25rem rgba(137, 23, 0, .25);
}

html[data-bs-theme="dark"] .layout-horizontal .main-navbar {
    background-color: #3B2521;
}

/* Unica regla que a proposito NO se pasa al color de marca: sobre el sidebar
 * oscuro, #891700 da 1.77:1 de contraste (ilegible) frente a 17:1 del blanco
 * que usa el tema. Se declara explicita para dejar constancia de que es una
 * decision, no un olvido. */
html[data-bs-theme="dark"] .sidebar-wrapper .menu .submenu .submenu-item a:hover {
    color: #fff;
}

/* --- Piezas sueltas que el tema colorea aparte ---
 * El boton de confirmacion de SweetAlert2 (azul #3699ff con `!important` en el
 * tema oscuro, morado #7066e0 por defecto de la libreria), el enlace en hover
 * del navbar horizontal y el selector de tema del sidebar. */
.swal2-styled.swal2-confirm,
html[data-bs-theme="dark"] .swal2-styled.swal2-confirm {
    background-color: #891700 !important;
}

.swal2-styled.swal2-confirm:hover,
html[data-bs-theme="dark"] .swal2-styled.swal2-confirm:hover {
    background-color: #741400 !important;
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(137, 23, 0, .5);
}

.layout-horizontal .main-navbar .submenu .submenu-group .submenu-item a:hover {
    color: #891700;
}

html[data-bs-theme="dark"] .layout-horizontal .main-navbar .submenu .submenu-group .submenu-item a {
    color: #AD9C99;
}

html[data-bs-theme="dark"] .layout-horizontal .main-navbar .submenu .submenu-group .submenu-item a:hover {
    color: #C84B32;
}

html[data-bs-theme="dark"] .theme-toggle {
    color: #AD9C99;
}

/* --- Pagina de error ---
 * `error.css` se registra desde la propia vista, antes que este archivo, asi
 * que basta el orden: no necesita `!important`. El fondo era otro azul muy
 * sutil (#ebf3ff), como el del contenido. */
#error {
    background-color: #F4EDEB;
}

html[data-bs-theme="dark"] #error {
    background-color: #1B1413;
}

/* --- Login: el panel lateral y el logo ---
 * `auth.css` se registra con POS_END desde la propia vista del login, es decir
 * DESPUES de este archivo, y ademas usa selectores de ID. Por eso estas dos
 * reglas necesitan `!important`: es el unico sitio del proyecto donde hace
 * falta y el motivo queda documentado aqui.
 *
 * La textura del tema se re-apunta de paso: `auth.css` la pide en
 * `./png/4853433.png`, ruta que no existe (el archivo esta un nivel arriba),
 * asi que hoy el panel sale sin ella. */
#auth #auth-right,
html[data-bs-theme="dark"] #auth-right {
    background: url(../theme/compiled/png/4853433.png), linear-gradient(90deg, #6E1200, #A14533) !important;
}

#auth #auth-left .auth-logo img {
    height: auto !important;
    max-height: 84px;
}

/* El subtitulo del login es un gris frio del tema (#a8aebb); se pasa al gris
 * calido equivalente para que acompane a la marca. Lleva `!important` por el
 * mismo motivo que el panel: `auth.css` usa selectores de ID. */
#auth #auth-left .auth-subtitle {
    color: #BDABA8 !important;
}


/* Variante de marca para las tarjetas de indicadores. El tema trae cuatro
 * pasteles decorativos (blue/green/red/purple) que no comunican nada; el
 * indicador principal de una pantalla lleva esta. */
.stats-icon.brand,
html[data-bs-theme="dark"] .stats-icon.brand {
    background-color: #891700;
}

/* Variante ambar para el indicador de "pendiente". El tema solo trae cuatro
 * pasteles decorativos y ninguno significa espera; `warning` si, y es un color
 * semantico que no se repisa con la marca (ver @context/marca-colores.md
 * seccion 1). El icono va en negro porque blanco sobre #ffc107 da 1.9:1. */
.stats-icon.warning,
html[data-bs-theme="dark"] .stats-icon.warning {
    background-color: #ffc107;
}

.stats-icon.warning i,
html[data-bs-theme="dark"] .stats-icon.warning i {
    color: #000;
}

/* Centrado del glifo dentro del cuadro de color de `.stats-icon`.
 *
 * El tema fuerza dos cosas sobre los iconos de Bootstrap Icons que se pelean
 * entre si dentro de un contenedor flex:
 *   .bi                { width: 1rem; height: 1rem }   <- caja de 16px
 *   body .bi:before    { vertical-align: sub }         <- baja el glifo
 * El glifo se pinta a 1.7rem, asi que desborda esa caja de 16px, y `sub` lo
 * desplaza ademas hacia abajo. El cuadro de color queda centrado —lo centra el
 * flex— pero el dibujo de dentro no. Aqui se deja que el <i> se ajuste al
 * glifo y se anula el desplazamiento, para que `justify-content: center` y
 * `align-items: center` actuen sobre lo que realmente se ve.
 *
 * Lleva contraparte oscura porque el tema repite `.bi { width; height }` bajo
 * `html[data-bs-theme="dark"]`, que gana por especificidad. */
.stats-icon i,
html[data-bs-theme="dark"] .stats-icon i {
    width: auto;
    height: auto;
    line-height: 1;
}

.stats-icon i::before,
html[data-bs-theme="dark"] .stats-icon i::before {
    display: block;
    vertical-align: baseline;
}

/* --- Boton que solo lleva icono ---
 * Los Bootstrap Icons fijan `line-height: 1` y `vertical-align: -0.125em` en su
 * `::before`, mientras que el `.btn` calcula su alto con `line-height: 1.5`.
 * Sin esto un boton de solo icono queda ~8px mas bajo que uno con texto y los
 * dos no comparten linea. Se acota a `.btn-icon` para no alterar el resto de
 * iconos de la aplicacion.
 *
 * Alto resultante, identico al de un boton con texto:
 *   0.375rem de padding x2 + 1.5 x 1rem de linea = 36px + borde. */
.btn-icon > .bi::before {
    line-height: 1.5;
    vertical-align: 0;
}

/* --- Grosor de los iconos dentro de un boton ---
 * Bootstrap Icons es una fuente de UN SOLO peso y el tema ademas fija
 * `font-weight: 400 !important` en `.bi:before`, asi que el grosor no se puede
 * subir con `font-weight`: no hay un peso mas grueso que cargar.
 *
 * Lo unico que engrosa el glifo sin cambiar de icono es `-webkit-text-stroke`,
 * que dibuja un contorno del mismo color encima del trazo. Se usa
 * `currentColor` para que siga al color del boton (blanco en los solidos,
 * marca en los `outline`) tanto en claro como en oscuro.
 *
 * 0.3px es deliberadamente sutil: a 16px un trazo mayor emborrona el dibujo.
 * La propiedad es no estandar pero la soportan Chrome, Edge, Safari y Firefox;
 * donde no, el icono se ve como antes y no se rompe nada.
 *
 * La alternativa sin CSS es usar las variantes `-fill` del propio set
 * (`bi-trash-fill`, `bi-pencil-fill`...), que son solidas y pesan mas a la
 * vista. Existen para todos los iconos de los botones del CRUD. */
.btn > .bi {
    -webkit-text-stroke: 0.3px currentColor;
}

/* --- Logo ---
 * El tema fija `height: 1.2rem` (19px) en `.sidebar-wrapper .sidebar-header img`
 * y `height: 20px` en el logo del layout horizontal, pensando en un logotipo
 * cuadrado. El nuestro es apaisado, asi que a esa altura el texto del logo
 * queda ilegible. Se repisa con la MISMA
 * especificidad que el tema —basta el orden de carga, sin `!important`— y con
 * `height: auto` para respetar la proporcion.
 *
 * A 64px de alto el logo mide 126px de ancho: cabe de sobra en la cabecera del
 * sidebar (300px menos 2rem de padding a cada lado) junto al selector de tema. */
.sidebar-wrapper .sidebar-header img,
.layout-horizontal .header-top .logo img {
    height: auto;
    max-height: 64px;
    max-width: 100%;
}

.auth-logo img {
    height: auto;
    max-height: 84px;
    max-width: 100%;
}

/* ==========================================================================
 * GridView + Select2 — el doble scroll horizontal
 *
 * Todos los filtros del GridView son `kartik\select2\Select2`. En Bootstrap 5
 * Krajee les asigna `width: auto` si no se declara, y el contenedor se
 * dimensiona al ancho de su CONTENIDO en vez del de la celda, lo que ensancha
 * la columna y saca un segundo scroll horizontal en TODA la pagina.
 *
 * En PHP se declara `'width' => '100%'` en cada Select2; estas reglas son la
 * otra mitad, generalizadas para toda tabla responsive. Ver
 * @context/mejoras-ux-ui.md seccion 1.
 * ========================================================================== */

.table-responsive .select2-container {
    max-width: 100%;
    min-width: 0 !important;
    width: 100% !important;
}

.table-responsive .select2-selection__rendered {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El dropdown abierto se anexa al <body>: no se puede acotar a la vista. */
.select2-container--open {
    z-index: 1060;
}

/* ==========================================================================
 * Tablero de inicio — backend/views/site/index.php
 *
 * Es la primera pantalla despues de entrar, asi que carga con el trabajo de
 * dar identidad: una banda de bienvenida con el degradado de marca, los
 * indicadores del dia y una tarjeta por modulo.
 *
 * El tema no trae ninguna de estas piezas —Mazer resuelve su demo con tarjetas
 * de estadistica y tablas—, de modo que se construyen aqui reutilizando lo que
 * si trae: `.card`, `.stats-icon`, `.avatar` y la rejilla de Bootstrap.
 *
 * TODAS las reglas van colgadas de `.dashboard`, el envoltorio de la vista, y
 * no es por orden: es por especificidad. El tema repinta los tipos base en
 * oscuro con selectores como `html[data-bs-theme="dark"] a` y
 * `html[data-bs-theme="dark"] h6` —(0,1,2)—, que le ganan a una sola clase
 * —(0,1,0)—. Sin el envoltorio, los nombres de los accesos salian con el color
 * de enlace de la marca y los titulos de tarjeta perdian el color de su
 * modulo, solo en modo oscuro. Con el envoltorio cada regla suma (0,2,0) y
 * gana en los dos temas, sin duplicar bloques oscuros ni recurrir a
 * `!important`.
 *
 * El color de cada modulo entra por dos variables (`--dash-accent` y su
 * derivada `--dash-accent-on`), asi que anadir un modulo nuevo es declarar un
 * color, no escribir un bloque de reglas.
 * ========================================================================== */

/* --- Color de cada modulo ---
 * Doce matices desaturados a luminosidad pareja para que ninguno grite mas
 * que otro sobre el fondo calido del panel (#F9F3F2), con la marca reservada
 * para Operacion, que es el modulo que se usa a diario. Los tres ultimos se
 * eligieron en los huecos de tono que quedaban libres (verde oliva, violeta y
 * rosa): con nueve acentos ya puestos, un matiz vecino de otro haria que dos
 * tarjetas se confundieran a simple vista.
 *
 * `--dash-accent-on` es el color con el que REALMENTE se pinta texto e iconos.
 * En claro es el acento tal cual; en oscuro estos matices caen por debajo de
 * 3:1 sobre el gris del tema, asi que se aclaran mezclandolos con blanco. Al
 * derivarlo una sola vez, ninguna regla de mas abajo necesita contraparte
 * oscura. */
.dashboard .dash-card[data-accent="brand"] { --dash-accent: #891700; }
.dashboard .dash-card[data-accent="plum"] { --dash-accent: #6B3A63; }
.dashboard .dash-card[data-accent="teal"] { --dash-accent: #0F6F72; }
.dashboard .dash-card[data-accent="forest"] { --dash-accent: #2E6B45; }
.dashboard .dash-card[data-accent="steel"] { --dash-accent: #3A5578; }
.dashboard .dash-card[data-accent="crimson"] { --dash-accent: #9E2A2B; }
.dashboard .dash-card[data-accent="amber"] { --dash-accent: #8F5D00; }
.dashboard .dash-card[data-accent="slate"] { --dash-accent: #4E5866; }
.dashboard .dash-card[data-accent="indigo"] { --dash-accent: #43418F; }
.dashboard .dash-card[data-accent="olive"] { --dash-accent: #5F6B2A; }
.dashboard .dash-card[data-accent="violet"] { --dash-accent: #6A3D96; }
.dashboard .dash-card[data-accent="rose"] { --dash-accent: #9C2F5E; }
/* El decimotercero, para Tiempo Real. Con los doce anteriores repartidos, el
 * unico hueco de tono que quedaba sin vecino inmediato es el azul cian (~200):
 * queda entre teal (182, mas verde) y steel (213, mas gris y oscuro), y a esta
 * luminosidad los tres se distinguen a simple vista en la rejilla. */
.dashboard .dash-card[data-accent="ocean"] { --dash-accent: #15607F; }

.dashboard .dash-card {
    --dash-accent-on: var(--dash-accent);
    --dash-accent-soft: color-mix(in srgb, var(--dash-accent-on) 10%, transparent);
    --dash-accent-line: color-mix(in srgb, var(--dash-accent-on) 28%, transparent);
}

html[data-bs-theme="dark"] .dashboard .dash-card {
    --dash-accent-on: color-mix(in srgb, var(--dash-accent) 45%, white);
    --dash-accent-soft: color-mix(in srgb, var(--dash-accent-on) 16%, transparent);
}

/* --- Bienvenida ---
 * La unica superficie oscura de la pagina. El degradado va sobre el eje de la
 * marca (#891700 -> shade 20% -> shade 45%) para que lea como un solo color
 * con profundidad y no como dos colores distintos. El brillo radial de
 * `::after` rompe la planitud del bloque; queda detras del contenido porque el
 * `.card-body` sube con `position: relative`. */
.dashboard .dash-hero {
    position: relative;
    overflow: hidden;
    border: none;
    background: linear-gradient(135deg, #891700 0%, #6E1200 55%, #4B0C00 100%);
    box-shadow: 0 0.5rem 1.5rem rgba(137, 23, 0, 0.25);
}

.dashboard .dash-hero::after {
    content: "";
    position: absolute;
    top: -60%;
    right: -10%;
    width: 60%;
    height: 220%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 65%);
    pointer-events: none;
}

.dashboard .dash-hero .card-body {
    position: relative;
    padding: 2rem;
}

.dashboard .dash-hero-eyebrow {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}

/* La fecha llega en minusculas, como se escribe en castellano; solo se sube la
 * inicial de la linea. */
.dashboard .dash-hero-eyebrow::first-letter {
    text-transform: uppercase;
}

/* El tema tiñe TODOS los encabezados con `--bs-heading-color`, que sobre el
 * degradado seria ilegible: aqui manda el blanco. */
.dashboard .dash-hero-title {
    color: #fff;
    font-weight: 700;
}

.dashboard .dash-hero-text {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9375rem;
}

.dashboard .dash-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dashboard .dash-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
}

.dashboard .dash-chip i {
    font-size: 0.8125rem;
    opacity: 0.85;
}

/* El aro separa la foto del degradado sin recortarla. */
.dashboard .dash-hero-avatar img {
    border: 3px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.25);
}

/* --- Encabezado de seccion ---
 * Separa los indicadores del dia de los accesos por modulo. La linea se come
 * el ancho sobrante en vez de fijarse, para que acompane a titulos de
 * cualquier largo cuando se traduzcan. */
.dashboard .dash-section-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.dashboard .dash-section-title h6 {
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard .dash-section-rule {
    flex: 1;
    height: 1px;
    background-color: var(--bs-border-color);
}

/* --- Tarjetas ---
 * El realce al pasar por encima es el que avisa de que la tarjeta entera es
 * una zona navegable. Se anima solo `transform` y `box-shadow`, que el
 * navegador resuelve en el compositor sin recalcular la maqueta. */
.dashboard .dash-kpi,
.dashboard .dash-card {
    border: 1px solid var(--bs-border-color);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dashboard .dash-kpi:hover,
.dashboard .dash-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.09);
}

/* Cifras largas —el recaudo del dia en pesos— no pueden ensanchar la tarjeta
 * ni desbordarla. Mismo motivo que en `.dash-link-label` para preferir
 * `break-word`: con `anywhere` el flex encogia el bloque hasta un caracter y
 * "$ 19.500" salia partido en dos renglones. */
.dashboard .dash-kpi-text {
    min-width: 0;
}

.dashboard .dash-kpi-text h5 {
    overflow-wrap: break-word;
}

/* La franja superior identifica el modulo de un vistazo, incluso con la
 * tarjeta plegada en movil. Va en `::before` para no gastar un borde, que
 * desplazaria el contenido un pixel. */
.dashboard .dash-card {
    position: relative;
    overflow: hidden;
}

.dashboard .dash-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background-color: var(--dash-accent-on);
}

.dashboard .dash-card .card-body {
    padding: 1.5rem;
}

/* El icono va ENCIMA del titulo, no al lado. A un cuarto de ancho la tarjeta
 * deja unos 200px utiles: con el icono en linea, "5 pantallas · 530 registros"
 * no cabia y saltaba a dos renglones, y como no todos los modulos tienen
 * registros, unas cabeceras median dos lineas y otras una — dentro de la misma
 * fila las listas de accesos arrancaban a alturas distintas. Apilado, el
 * subtitulo se lleva el ancho completo y todas las cabeceras miden igual. */
.dashboard .dash-card-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* La tarjeta de Reportes ocupa el ancho completo y ahi no falta sitio: apilar
 * el icono solo dejaria una cabecera alta con la mitad derecha vacia, asi que
 * recupera la disposicion en linea. Se reconoce por sus accesos en rejilla
 * —`.dash-links-grid`, que ya declara el Service— en vez de anadir una tercera
 * clave de maqueta que diga lo mismo. */
.dashboard .dash-card:has(.dash-links-grid) .dash-card-head {
    flex-direction: row;
    align-items: center;
    gap: 0.875rem;
}

.dashboard .dash-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 0.75rem;
    background-color: var(--dash-accent-soft);
    color: var(--dash-accent-on);
    font-size: 1.25rem;
}

/* El tema fuerza `.bi { width: 1rem; height: 1rem }` y baja el glifo con
 * `vertical-align: sub`, asi que un icono a 1.25rem se sale de su caja y queda
 * descentrado. Mismo arreglo que ya lleva `.stats-icon` mas arriba. */
.dashboard .dash-card-icon i,
html[data-bs-theme="dark"] .dashboard .dash-card-icon i {
    width: auto;
    height: auto;
    line-height: 1;
}

.dashboard .dash-card-icon i::before,
html[data-bs-theme="dark"] .dashboard .dash-card-icon i::before {
    display: block;
    vertical-align: baseline;
}

/* El titulo lleva el color del modulo. Sin esto el tema lo pinta con
 * `--bs-heading-color` —el granate de marca— y la franja y el icono de color
 * quedan sueltos, como si el color no significara nada. */
.dashboard .dash-card-title {
    color: var(--dash-accent-on);
    font-size: 1rem;
    font-weight: 700;
}

.dashboard .dash-card-meta {
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}

/* --- Accesos ---
 * Una fila por pantalla. En vez de un boton por acceso —que a nueve accesos es
 * un muro de bordes— cada fila es transparente en reposo y solo se tiñe del
 * color del modulo al apuntarla. */
.dashboard .dash-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* La tarjeta de Reportes ocupa el ancho completo: sus accesos se reparten en
 * tantas columnas como quepan sin bajar de 260px —por debajo se cortan los
 * nombres largos de los informes—, en vez de dejar una lista de nueve filas en
 * una pagina de 1400px. */
.dashboard .dash-links.dash-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.25rem 0.75rem;
}

.dashboard .dash-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dashboard .dash-link:hover,
.dashboard .dash-link:focus-visible {
    background-color: var(--dash-accent-soft);
    border-color: var(--dash-accent-line);
    color: var(--dash-accent-on);
}

.dashboard .dash-link:focus-visible {
    outline: 2px solid var(--dash-accent-on);
    outline-offset: 1px;
}

/* El nombre se lleva el espacio sobrante; la cifra y la flecha no se encogen,
 * asi quedan alineadas en todas las filas.
 *
 * Parte en dos renglones en vez de recortarse: a un cuarto de ancho le quedan
 * ~110px y con puntos suspensivos un nombre largo de modulo se vuelve
 * ilegible. Un nombre en dos lineas se lee; uno cortado,
 * no.
 *
 * `break-word` y NO `anywhere`, que es la diferencia entre partir por los
 * espacios o por cualquier letra: `anywhere` tambien reduce el ancho minimo
 * intrinseco del elemento a un solo caracter, y entonces el flex lo encoge
 * hasta esa medida. En una tarjeta a un cuarto de ancho eso dejaba "Usuarios"
 * repartido en tres renglones ("Usu / ario / s"). */
.dashboard .dash-link-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
}

/* `tabular-nums` alinea las cifras en columna aunque tengan distinto numero de
 * digitos. */
.dashboard .dash-link-count {
    flex: 0 0 auto;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background-color: var(--dash-accent-soft);
    color: var(--dash-accent-on);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s ease;
}

.dashboard .dash-link:hover .dash-link-count,
.dashboard .dash-link:focus-visible .dash-link-count {
    background-color: color-mix(in srgb, var(--dash-accent-on) 20%, transparent);
}

/* Visible en reposo pero apagada: en pantalla tactil no hay hover que la
 * revele, y es la senal de que la fila lleva a otra pantalla. */
.dashboard .dash-link-arrow {
    flex: 0 0 auto;
    font-size: 0.75rem;
    opacity: 0.3;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.dashboard .dash-link:hover .dash-link-arrow,
.dashboard .dash-link:focus-visible .dash-link-arrow {
    opacity: 0.9;
    transform: translateX(2px);
}

@media (max-width: 575.98px) {
    .dashboard .dash-hero .card-body,
    .dashboard .dash-card .card-body {
        padding: 1.25rem;
    }
}

/* Quien pidio menos movimiento en el sistema operativo no recibe ni el realce
 * de la tarjeta ni el desplazamiento de la flecha. */
@media (prefers-reduced-motion: reduce) {
    .dashboard .dash-kpi,
    .dashboard .dash-card,
    .dashboard .dash-link,
    .dashboard .dash-link-count,
    .dashboard .dash-link-arrow {
        transition: none;
    }

    .dashboard .dash-kpi:hover,
    .dashboard .dash-card:hover {
        transform: none;
    }

    .dashboard .dash-link:hover .dash-link-arrow,
    .dashboard .dash-link:focus-visible .dash-link-arrow {
        transform: none;
    }
}

/* ==========================================================================
 * Reglas que venian de `css/site.css`
 *
 * `site.css` era el segundo CSS propio del proyecto (herencia de la plantilla
 * de Yii) y ahi vivia el azul del paginador, fuera del alcance de la marca.
 * Se consolida aqui para que TODO estilo propio este en un solo archivo, que
 * es lo que manda @context/claude.md y lo que revisa verificar-colores.sh.
 * ========================================================================== */

/* La pagina activa del paginador. Se declara explicita —y no solo via
 * `--bs-pagination-active-bg`— porque el `.page-item.active .page-link` de
 * hojas de terceros (las de DataTables) tiene mas especificidad que la regla
 * de Bootstrap que lee la variable. */
.page-item.active .page-link,
html[data-bs-theme="dark"] .page-item.active .page-link {
    background-color: #891700;
    border-color: #891700;
}

footer .nav-link.active i {
    color: #891700;
}

.main-footer {
    background-color: #fff;
    border-top: 1px solid #dee2e65e;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
    z-index: 1032;
}

html[data-bs-theme="dark"] .layout-navbar footer {
    background-color: #1e1e2d;
}

@media (max-width: 992px) {
    .main-footer {
        margin-left: 0px;
        transition: margin-left 0.6s ease-in-out;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .main-footer {
        margin-left: 0px;
        padding: 1rem;
    }
}

@media (min-width: 1200px) {
    .main-footer {
        margin-left: 300px;
        padding: 1rem;
        transition: margin-left 0.6s ease-in-out;
    }
}

/* El footer es `position: fixed`: queda fuera del flujo, asi que el
 * `margin-left` que el tema le da a `#main` no lo corre y necesita el suyo
 * propio —los 300px de arriba—. Pero ese margen esta escrito a mano y no sabe
 * nada del sidebar, asi que cuando una vista lo pliega (`collapsedSidebar`, o
 * la hamburguesa) hay que devolverlo a cero como se hace con `#main`; si no,
 * el footer queda corrido 300px debajo de un menu que ya no esta.
 *
 * Va fuera del media query a proposito: por debajo de 1200px el margen ya es
 * cero y la regla no molesta. Y gana por especificidad (dos ids), no por
 * orden, asi que no depende de donde quede en el archivo. */
#sidebar.inactive ~ #main .main-footer {
    margin-left: 0;
}

/* Por lo mismo —fixed, fuera del flujo— el footer no ocupa espacio y tapa el
 * final de cualquier vista larga. Se le reserva su alto al contenido: ~3.5rem
 * el de escritorio y algo mas la barra de iconos del movil. Van los dos ids
 * porque el tema ya fija `#main #main-content { padding: ... 1rem }` y con
 * uno solo esta regla perderia por especificidad. */
#main #main-content {
    padding-bottom: 4.5rem;
}

@media (max-width: 991.98px) {
    #main #main-content {
        padding-bottom: 5.5rem;
    }
}

/* ==========================================================================
 * Probar chat — conversation/chat-playground
 *
 * Solo tamano y desplazamiento: los colores de las burbujas salen de las
 * utilidades de Bootstrap (`bg-primary`, `bg-light`), que el tema ya repinta
 * en modo oscuro.
 * ========================================================================== */

.chat-playground-log {
    height: 55vh;
    overflow-y: auto;
}

.chat-bubble {
    max-width: 75%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}