/*
 * Ajustes de UI sobre Bootstrap 5 + Bootswatch — AGNÓSTICO AL TEMA.
 * Archivo: yeti-theme-enhancements.css
 * Historia: nació como parche específico para el tema Yeti (color fijo
 * #008cba). Reescrito 2026-10-16 para usar las variables CSS que el propio
 * Bootstrap 5.3 expone en :root (--bs-primary, --bs-primary-rgb), de modo
 * que funcione igual de bien con CUALQUIER tema Bootswatch que se instale
 * por tenant (ver wiki/patrones/tema-bootswatch-por-tenant.md). El nombre
 * del archivo se mantiene por compatibilidad (está referenciado en todos
 * los css.php ya desplegados); el contenido ya no es específico de Yeti.
 */

/* ===================================================================
 * FORMVALIDATION: iconos junto a cada input (sin tocar grid)
 * ===================================================================
 * Login funciona porque tiene 1 col por fila (col-12). En formularios con
 * varias columnas (col-md-6), el icono se inserta tras el input; si no hay
 * un contenedor con position:relative en ese "campo", el icono se ancla al
 * .row (ancho completo) y se ve todo a la derecha.
 * Solución: en formularios de varias columnas, envolver cada label+input en
 * .fv-field-wrapper. Solo este wrapper tiene position:relative. No se
 * modifica .row ni .col-* ni el posicionamiento del icono (lo define FV).
 */

/* Única regla de posicionamiento: el wrapper es el contenedor del icono */
.fv-field-wrapper {
    position: relative;
}

/* Ajuste sutil: iconos unos px a la derecha para alineación con el input */
.fv-plugins-bootstrap5 .fv-plugins-icon {
    right: -4px !important;
}

/* Solo colores para estados (semánticos: rojo/verde/gris, no de marca) */
.fv-plugins-bootstrap5 .fv-plugins-bootstrap5-row-invalid .fv-plugins-icon {
    color: #dc3545 !important;
}
.fv-plugins-bootstrap5 .fv-plugins-bootstrap5-row-valid .fv-plugins-icon {
    color: #198754 !important;
}
.fv-plugins-bootstrap5 .fv-plugins-icon.fa-check { color: #198754 !important; }
.fv-plugins-bootstrap5 .fv-plugins-icon.fa-times { color: #dc3545 !important; }
.fv-plugins-bootstrap5 .fv-plugins-icon.fa-refresh { color: #6c757d !important; }

/* Logo principal (cargado por AJAX): anclado al fondo de la pantalla, centrado */
#contenido_datos.contenido-es-logo .logo-principal-container {
    position: fixed;
    bottom: 2rem;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 0;
}
#contenido_datos.contenido-es-logo .logo-principal-img {
    display: inline-block;
    max-width: 20%;
    height: auto;
}

/* Mejoras para el navbar (altura/espaciado, independiente del color) */
.navbar {
    font-weight: 300;
    min-height: 54px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-brand {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
}

.navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-expand-lg {
    min-height: 54px !important;
}

.navbar > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Mejoras mínimas para los dropdowns */
.dropdown-item {
    font-weight: 300;
    transition: all 0.3s ease;
}

/* Mejoras para los botones primarios: usa el $primary REAL del tema
   instalado (var(--bs-primary)), no un color fijo. */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    font-weight: 300;
}

.btn-primary:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.85) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.85) !important;
}

/* Mejoras para las tablas */
.table {
    font-size: 0.875rem;
}

.table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid var(--bs-primary);
    font-weight: 400;
}

/* Mejoras para los modales */
.modal-header {
    background-color: var(--bs-primary);
    color: white;
    border-bottom: none;
}

.modal-header .btn-close {
    filter: invert(1);
}

/* Mejoras para los formularios */
.form-control:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Alertas informativas: tono neutro, no depende de la marca */
.alert-info {
    background-color: #def2f8;
    border-color: #bde6f2;
    color: #244d59;
}

/* Loading/spinner: usa el color de marca real */
#fondo {
    background: rgba(var(--bs-primary-rgb), 0.1);
    backdrop-filter: blur(2px);
}

@media (max-width: 768px) {
    .navbar-nav {
        background-color: rgba(var(--bs-primary-rgb), 0.95);
        border-radius: 8px;
        margin-top: 10px;
        padding: 10px;
    }
}

.nav-link, .btn, .form-control, .dropdown-item {
    transition: all 0.3s ease;
}

.container:not(.navbar .container) {
    padding-top: 20px;
}

body {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
}

.fa {
    margin-right: 8px;
}

.switch input:checked + .slider {
    background-color: var(--bs-primary);
}

.switch input:focus + .slider {
    box-shadow: 0 0 1px var(--bs-primary);
}

/* SweetAlert2: coherencia con el color primary REAL del tema instalado */
.swal2-confirm.btn,
.swal2-styled.swal2-confirm {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.swal2-styled.swal2-confirm:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.85) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.85) !important;
}
.swal2-success [class^='swal2-success-line'] {
    background-color: var(--bs-primary) !important;
}
.swal2-success .swal2-success-ring {
    border-color: rgba(var(--bs-primary-rgb), 0.3) !important;
}

/* NOTA sobre contraste del navbar cuando el color de marca es CLARO:
 * el navbar de la plantilla usa data-bs-theme="dark" (fuerza texto blanco)
 * combinado con bg-primary. Esto se ve bien con colores oscuros/medios
 * (Yeti #008cba, Flatly #2c3e50, Cosmo #2780e3), pero con un color de marca
 * CLARO (ej. un naranja brillante) el texto blanco pierde contraste.
 * Ese ajuste NO va acá (este archivo es compartido por todos los tenants):
 * build-tema.js calcula el brillo (YIQ) del $primary real de CADA tenant y,
 * solo si hace falta, agrega una regla ".navbar.bg-primary {...}" al final
 * del bootstrap-<tenant>.min.css de ESE tenant (ver build-tema.js). */