/*
 * Estilos propios del frontend.
 *
 * 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.
 */

/* ==========================================================================
 * Marca — Zonas Azules Facatativá
 *
 * 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 .sidebar-link,
.sidebar-wrapper .menu .submenu .submenu-item a {
    color: #6B2719;
}

/* 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,
html[data-bs-theme="dark"] .sidebar-wrapper .menu .sidebar-link {
    color: #AD9C99;
}

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;
}


/* --- Barra inferior fija y menu superior del frontend ---
 * Venian en un bloque <style> dentro del layout, con el azul del tema cableado.
 * Los estilos propios van SIEMPRE aqui (regla transversal de @context/claude.md). */
.fixed-bottom {
    background-color: #891700;
    border-top: 1px solid #ddd;
    bottom: 0;
    left: 0;
    padding: 10px 0;
    position: fixed;
    width: 100%;
}

.menu-top a {
    color: #dee2e6b5;
}

.menu-top.active a {
    color: #fff;
}

/* 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;
}

/* --- 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 (1588x809, casi 2:1), asi que a esa altura
 * el texto de "FACATATIVA" 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%;
}

/* ==========================================================================
 * Reglas que venian de `css/site.css` — ver la nota del backend.
 * ========================================================================== */

.img-size {
    height: 160px;
    object-fit: cover;
}