/*
 * Mejoras específicas para el tema Yeti de Bootswatch
 * Archivo: yeti-theme-enhancements.css
 * Fecha: Marzo 2026
 */

/* ===================================================================
 * FORMVALIDATION + YETI: 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 */
.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 siguiendo el diseño original de v2 */
.navbar {
    font-weight: 300;
    min-height: 54px; /* Altura específica del template Yeti */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Ajustar altura de los elementos del navbar */
.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;
}

/* Forzar altura específica del navbar para coincidir con Yeti */
.navbar-expand-lg {
    min-height: 54px !important;
}

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

/* Navbar oscuro para mantener consistencia con v2 */
.navbar-dark {
    background-color: #343a40 !important;
}

.navbar-dark .navbar-brand {
    color: #fff !important;
    font-weight: 300;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.75) !important;
    transition: color 0.3s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff !important;
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #fff !important;
}

/* Mejoras mínimas para los dropdowns - respetando colores de Yeti */
.dropdown-item {
    font-weight: 300; /* Mantener peso de fuente del tema */
    transition: all 0.3s ease; /* Solo agregar transición suave */
}

/* Mejoras para los botones */
.btn-primary {
    background-color: #008cba;
    border-color: #007ea7;
    font-weight: 300;
}

.btn-primary:hover {
    background-color: #007ea7;
    border-color: #00769c;
}

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

.table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #008cba;
    font-weight: 400;
}

/* Mejoras para los modales */
.modal-header {
    background-color: #008cba;
    color: white;
    border-bottom: none;
}

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

/* Mejoras para los formularios */
.form-control:focus {
    border-color: #80c6dd;
    box-shadow: 0 0 0 0.25rem rgba(0, 140, 186, 0.25);
}

/* Mejoras para las alertas */
.alert-info {
    background-color: #def2f8;
    border-color: #bde6f2;
    color: #244d59;
}

/* Mejoras para el loading/spinner */
#fondo {
    background: rgba(0, 140, 186, 0.1);
    backdrop-filter: blur(2px);
}

/* Mejoras responsivas */
@media (max-width: 768px) {
    .navbar-nav {
        background-color: rgba(0, 140, 186, 0.95);
        border-radius: 8px;
        margin-top: 10px;
        padding: 10px;
    }
}

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

/* Mejoras para el contenedor principal */
.container:not(.navbar .container) {
    padding-top: 20px;
}

/* Estilos para mejorar la legibilidad */
body {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
}

/* Mejoras para los iconos de Font Awesome */
.fa {
    margin-right: 8px;
}

/* Mejoras para los switches personalizados */
.switch input:checked + .slider {
    background-color: #008cba;
}

.switch input:focus + .slider {
    box-shadow: 0 0 1px #008cba;
}

/* SweetAlert2: coherencia con color primary del template Yeti */
.swal2-confirm.btn,
.swal2-styled.swal2-confirm {
    background-color: #008cba !important;
    border-color: #007ea7 !important;
}
.swal2-styled.swal2-confirm:hover {
    background-color: #007ea7 !important;
    border-color: #00769c !important;
}
.swal2-success [class^='swal2-success-line'] {
    background-color: #008cba !important;
}
.swal2-success .swal2-success-ring {
    border-color: rgba(0, 140, 186, 0.3) !important;
}