/* ==========================================
   ESTILOS SELECT2 - APARIENCIA BOOTSTRAP 5 NATIVO
   ========================================== */

   .select2-container--open {
    z-index: 1060 !important;
}

/* 1. Igualar la caja cerrada al form-select de Bootstrap 5 */
.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + .75rem + 2px) !important;
    padding: .375rem 2.25rem .375rem .75rem !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--bs-body-color) !important;
    background-color: var(--bs-tertiary-bg) !important;
    border: 1px solid var(--bs-border-color-translucent) !important;
    border-radius: var(--bs-border-radius) !important;
    box-shadow: none !important;
}

/* 2. Centrar texto verticalmente */
.select2-container--bootstrap-5 .select2-selection .select2-selection__rendered {
    padding: 0 !important;
    line-height: 1.5 !important;
    color: var(--bs-body-color) !important;
}

/* 3. Flecha nativa de Bootstrap 5 (reemplaza el triángulo de Select2) */
.select2-container--bootstrap-5 .select2-selection__arrow {
    position: absolute !important;
    top: 50% !important;
    right: .75rem !important;
    width: 16px !important;
    height: 16px !important;
    transform: translateY(-50%) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-size: 16px 12px !important;
}
.select2-container--bootstrap-5 .select2-selection__arrow b {
    display: none !important; /* Oculta la flecha por defecto */
}

/* 4. Efecto Focus azul de Bootstrap */
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
}

/* ==========================================
   ESTILOS DE SELECCIÓN MÚLTIPLE SELECT2 (TAGS Y "X")
   ========================================== */
.select2-container--bootstrap-5 .select2-selection--multiple {
    min-height: calc(1.5em + .75rem + 2px) !important;
    padding: .125rem .25rem !important;
    background-color: var(--bs-tertiary-bg) !important;
    border: 1px solid var(--bs-border-color-translucent) !important;
    border-radius: var(--bs-border-radius) !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
}

/* El tag / opción seleccionada */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(57, 169, 0, 0.1) !important;
    color: #39A900 !important;
    border: 1px solid rgba(57, 169, 0, 0.3) !important;
    border-radius: 50px !important; /* Rounded pill style */
    padding: 0.15rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(57, 169, 0, 0.2) !important;
    color: #4cd113 !important;
    border-color: rgba(57, 169, 0, 0.4) !important;
}

/* Hover en el tag */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice:hover {
    background-color: rgba(57, 169, 0, 0.15) !important;
    transform: translateY(-1px);
}

/* El botón de eliminar (la "X") */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: #dc3545 !important; /* Rojo para destacar eliminar */
    background: transparent !important;
    border: none !important;
    margin-right: 6px !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
    display: inline-block !important;
    order: -1; /* Pone la X al principio */
}

/* Hover en el botón de eliminar */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #a71d2a !important; /* Rojo más oscuro */
    background-color: transparent !important;
}




/* ==========================================
   SOPORTE PARA MODO OSCURO (DARK THEME)
   ========================================== */

/* Caja cerrada en modo oscuro */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

/* Flecha SVG en modo oscuro (se vuelve gris clarito para verse en el fondo negro) */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__arrow {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Lista desplegable abierta en modo oscuro */
[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
}

/* Texto de los aprendices en la lista */
[data-bs-theme="dark"] .select2-results__option {
    color: var(--bs-body-color) !important;
    background-color: transparent !important;
}

/* Hover al pasar el mouse por un aprendiz (Verde SENA) */
[data-bs-theme="dark"] .select2-results__option--highlighted[aria-selected] {
    background-color: #39A900 !important; 
    color: white !important;
}
.color-verde-sena-bg {
    background-color: #39A900 !important;
}

.color-negro-suave-bg {
    background-color: #212529 !important;
}

.color-gris-oscuro-bg {
    background-color: #333333 !important;
}

.color-gris-claro-bg {
    background-color: #f8f9fa !important;
}

.color-rojo-alerta-bg {
    background-color: #dc3545 !important;
}

/* Tus clases de texto (fn) se pueden quedar igual, o también ponerles !important por seguridad */
.color-verde-sena-fn { color: #39A900 !important; }
.color-negro-suave-fn { color: #212529 !important; }
.color-gris-oscuro-fn { color: #333333 !important; }
.color-gris-claro-fn { color: #f8f9fa !important; }
.color-rojo-alerta-fn { color: #dc3545 !important; }

@media (min-width: 768px) {
    .offcanvas-md.color-negro-suave-bg {
        background-color: #212529 !important;
    }
}

/* Filtro de Alto Contraste en el elemento raíz (HTML) para no romper position: fixed */
html.alto-contraste {
    filter: contrast(150%) saturate(120%) !important;
}

html.alto-contraste,
.alto-contraste body {
    background-color: #000 !important;
}

.alto-contraste .card {
    border: 2px solid #fff !important;
}

/* Corrección de color de texto personalizado para Modo Oscuro */
[data-bs-theme="dark"] .color-negro-suave-fn {
    color: #f8f9fa !important; /* Texto blanco suave */
}

/* Opcional: Si el Header principal sigue blanco, forzamos que sea oscuro */
[data-bs-theme="dark"] header.bg-white {
    background-color: #212529 !important;
    border-color: #373b3e !important;
}

/* ==========================================
   SIDEBAR LAYOUT — DESKTOP Y MÓVIL
   ========================================== */

/* Desktop (>= 768px): sidebar fijo y pegajoso */
@media (min-width: 768px) {
    aside#sidebarMenu {
        position: sticky !important;
        top: 0;
        width: 280px !important;
        min-width: 280px !important;
        height: 100vh !important;
        overflow-y: auto;
        z-index: 1030;
        flex-shrink: 0;
    }
}

/* Móvil (< 768px): el aside es un offcanvas flotante
   Bootstrap ya lo posiciona como fixed, pero garantizamos
   que NO ocupe espacio en el layout cuando está cerrado */
@media (max-width: 767.98px) {
    aside#sidebarMenu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        z-index: 1045 !important;
        /* Cerrado por defecto: fuera de la pantalla */
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }

    /* Cuando Bootstrap abre el offcanvas (.show) */
    aside#sidebarMenu.show {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    /* El contenido principal ocupa TODO el ancho en móvil */
    aside#sidebarMenu ~ div {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================
   NOTIFICACIONES FLOTANTES
   ========================================== */
.floating-notifications.dropdown {
    position: fixed !important;
    top: 15px;
    right: 15px;
    z-index: 1040;
}

/* Efecto hover/active en la campana flotante */
.floating-notifications button:hover {
    transform: scale(1.08);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

/* Animación de campana */
@keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(5deg); }
    60% { transform: rotate(-5deg); }
    70% { transform: rotate(0); }
}

.bell-animate {
    animation: bellRing 2.5s ease-in-out infinite;
    transform-origin: top center;
    display: inline-block;
}

/* Estilo del botón de accesibilidad flotante */
#btnAccessibilityFloat {
    box-shadow: 0 8px 30px rgba(57, 169, 0, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

#btnAccessibilityFloat:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 12px 40px rgba(57, 169, 0, 0.6) !important;
}

/* Sombras y bordes en los botones flotantes en modo normal */
.floating-notifications button {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Estilos específicos para alto contraste (WCAG) */
.alto-contraste .floating-notifications button,
.alto-contraste #btnAccessibilityFloat {
    border: 3px solid #fff !important;
    box-shadow: 0 0 15px #fff !important;
    background-color: #000 !important;
    color: #fff !important;
}

.alto-contraste .floating-notifications button i,
.alto-contraste #btnAccessibilityFloat i {
    color: #fff !important;
}

/* Custom back button with direction micro-animation */
.btn-back-custom {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--bs-body-color) !important;
    transition: all 0.25s ease !important;
}

.btn-back-custom:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
    transform: translateX(-4px) !important;
}

[data-bs-theme="dark"] .btn-back-custom {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f8f9fa !important;
}

[data-bs-theme="dark"] .btn-back-custom:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
}

/* Reajuste genérico para botones btn-light en modo oscuro */
[data-bs-theme="dark"] .btn-light {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f8f9fa !important;
}
[data-bs-theme="dark"] .btn-light:hover {
    background-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

/* ==========================================
   CORRECCIÓN DE ICONOS DE ORDENACIÓN DATATABLES
   ========================================== */
table.dataTable thead tr th div.dt-column-header,
table.dataTable thead tr td div.dt-column-header {
    flex-direction: row !important;
}

table.dataTable thead th.dt-type-numeric,
table.dataTable thead td.dt-type-numeric {
    text-align: left !important;
}

/* ==========================================
   MEJORAS VISUALES UI/UX PROFESIONALES
   ========================================== */

/* 1. Tarjetas con hover interactivo tridimensional (solo las marcadas con card-interactive) */
.card-interactive {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.card-interactive:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04) !important;
}

/* En modo oscuro, las sombras deben ser más sutiles pero definidas */
[data-bs-theme="dark"] .card-interactive:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(57, 169, 0, 0.3) !important; /* Borde verde SENA sutil */
}

/* 2. Suavizar botones y transiciones del menú lateral (Aside) */
aside#sidebarMenu .nav-link {
    border-left: 4px solid transparent;
    transition: all 0.2s ease-in-out !important;
}

aside#sidebarMenu .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    padding-left: 1.25rem !important; /* Micro-desplazamiento lateral al pasar el mouse */
}

aside#sidebarMenu .nav-link.color-verde-sena-bg {
    border-left: 4px solid #39A900 !important;
    background-color: rgba(57, 169, 0, 0.15) !important;
}

/* 3. Micro-interacción en Botones Primarios y de Éxito */
.btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
}

.btn:active {
    transform: translateY(1px) !important;
}

.btn.color-verde-sena-bg:hover {
    background-color: #2e8500 !important; /* Verde SENA más oscuro */
    box-shadow: 0 4px 12px rgba(57, 169, 0, 0.3) !important;
}

/* 4. Tablas elegantes con hover sutil */
.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table tbody tr {
    transition: background-color 0.15s ease-in-out !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(57, 169, 0, 0.04) !important;
}

[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(57, 169, 0, 0.08) !important;
}

/* 5. Inputs del sistema con bordes y enfoques estilizados */
.form-control, .form-select {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.form-control:focus, .form-select:focus {
    border-color: #39A900 !important;
    box-shadow: 0 0 0 0.25rem rgba(57, 169, 0, 0.25) !important;
}