/**
 * Dark Mode Custom Styles
 * Estilos adicionales para páginas que no usan Material Dashboard nativamente
 * Se aplica cuando body tiene clase .dark-version
 */

/* Evitar scroll horizontal global */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Fondo general dark: elimina el gris de bg-gray-200 de Material Dashboard */
body.dark-version,
body.dark-version.bg-gray-200 {
    background-color: #1a2035 !important;
}

body.dark-version .main-content,
body.dark-version main.main-content {
    background-color: #1a2035 !important;
}

body.dark-version .main-content > div,
body.dark-version .main-content .container-fluid {
    background-color: transparent !important;
}

/* ============================================
   EXÁMENES - Padding derecho uniforme
   Corrige el margin-right: -5px de los .row
   internos que eliminaba el padding del layout
   ============================================ */
.main-content .container-fluid.py-4 {
    padding-right: 0px !important;
    padding-left: 0px!important;
}

/* ============================================
   OPOSICIONES - Modo Oscuro
   ============================================ */

/* Fondo principal */
body.dark-version .oposiciones-page,
body.dark-version #oposiciones-content,
body.dark-version .vista-content {
    background-color: #1a2035 !important;
    color: #e5e7eb !important;
}

/* Cards de oposiciones */
body.dark-version .roadmap-card,
body.dark-version .fase-card,
body.dark-version .timeline-item {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-version .roadmap-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Header de secciones */
body.dark-version .roadmap-header,
body.dark-version .fav-header,
body.dark-version .calendario-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e5a9e 100%) !important;
}

body.dark-version .roadmap-header h1,
body.dark-version .fav-header h1,
body.dark-version .calendario-header h1,
body.dark-version .roadmap-header p,
body.dark-version .fav-header p {
    color: #fff !important;
}

/* Títulos y textos */
body.dark-version .roadmap-title,
body.dark-version .timeline-title,
body.dark-version h1, 
body.dark-version h2, 
body.dark-version h3,
body.dark-version h4,
body.dark-version h5,
body.dark-version h6 {
    color: #fff !important;
}

body.dark-version p,
body.dark-version .roadmap-plazas,
body.dark-version .timeline-description {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Tabs de navegación */
body.dark-version .nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .nav-tabs .nav-link {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .nav-tabs .nav-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: transparent !important;
}

body.dark-version .nav-tabs .nav-link.active {
    color: #fff !important;
    background-color: #202940 !important;
    border-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.2) #202940 !important;
}

/* Botones de favoritos */
body.dark-version .btn-favorito {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .btn-favorito:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-version .btn-favorito.active {
    background: rgba(251, 191, 36, 0.2) !important;
    border-color: #fbbf24 !important;
    color: #fbbf24 !important;
}

/* Botón silenciar */
body.dark-version .btn-silenciar {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .btn-silenciar:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Badges de alertas */
body.dark-version .alerta-badge {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff !important;
}

/* Timeline */
body.dark-version .timeline::before {
    background: rgba(255, 255, 255, 0.2) !important;
}

body.dark-version .timeline-marker {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-version .timeline-marker.completado {
    background: #10b981 !important;
    border-color: #10b981 !important;
}

/* Fases y estados */
body.dark-version .fase-activa {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: #10b981 !important;
}

body.dark-version .fase-pendiente {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: #fbbf24 !important;
}

body.dark-version .fase-completada {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: #3b82f6 !important;
}

/* Filtros y búsqueda */
body.dark-version .filtros-container,
body.dark-version .search-box {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .filtros-container input,
body.dark-version .search-box input,
body.dark-version .filtros-container select {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

body.dark-version .filtros-container input::placeholder,
body.dark-version .search-box input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================
   CALENDARIO - Modo Oscuro
   ============================================ */

body.dark-version .calendar-container {
    background: #202940 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

body.dark-version .calendar-header {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .calendar-header h2 {
    color: #fff !important;
}

body.dark-version .month-wrapper {
    background: #1a2035 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .month-wrapper h3 {
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .calendar-weekday {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .calendar-day {
    background: #202940;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-version .calendar-day:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

body.dark-version .calendar-day.other-month {
    color: rgba(255, 255, 255, 0.3) !important;
    background: #151929 !important;
}

/* Preserve event colors in dark mode */
body.dark-version .calendar-day.cal-rojo {
    background: #fc1330 !important;
    border-color: #fc1330 !important;
}

body.dark-version .calendar-day.cal-verde {
    background: #40ac01 !important;
    border-color: #40ac01 !important;
}

body.dark-version .calendar-day.cal-naranja {
    background: #fec400 !important;
    border-color: #fec400 !important;
}

body.dark-version .calendar-day.cal-azul {
    background: #029fe4 !important;
    border-color: #029fe4 !important;
}

body.dark-version .calendar-day.today {
    border-color: #3b82f6 !important;
}

body.dark-version .calendar-empty {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-version .calendar-empty i {
    color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-version .calendar-modal {
    background: #202940 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}

body.dark-version .calendar-modal-body {
    background: #202940 !important;
}

body.dark-version .calendar-event-item h4 {
    color: #fff !important;
}

body.dark-version .calendar-event-item p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================
   UPGRADE PAGE - Modo Oscuro
   ============================================ */

body.dark-version .upgrade-page {
    background: #1a2035 !important;
}

body.dark-version .upgrade-title {
    color: #fff !important;
}

body.dark-version .upgrade-subtitle {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .pricing-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .pricing-card.pro {
    background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%) !important;
}

body.dark-version .feature-list li {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-version .feature-icon {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   CALENDARIO - Modo Oscuro
   ============================================ */

body.dark-version .fc-theme-standard .fc-scrollgrid,
body.dark-version .fc-theme-standard td,
body.dark-version .fc-theme-standard th {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .fc .fc-daygrid-day-number,
body.dark-version .fc .fc-col-header-cell-cushion {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-version .fc .fc-daygrid-day.fc-day-today {
    background: rgba(251, 191, 36, 0.1) !important;
}

body.dark-version .fc-event {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* ============================================
   QUIZ / EXAMEN - Modo Oscuro
   ============================================ */

body.dark-version .quiz-container,
body.dark-version .examen-container {
    background: #1a2035 !important;
}

/* Justificación en modo oscuro (pre.prepe tiene fondo blanco por defecto del navegador) */
body.dark-version pre.prepe,
body.dark-version .prepe,
body.dark-version #consola pre,
body.dark-version #consola .prepe,
body.dark-version #consola2 pre,
body.dark-version #consola2 .prepe {
    background: transparent !important;
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-version #consola,
body.dark-version #consola2 {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-version #consola {
    background: #1e293b !important;
    border-radius: 12px !important;
    padding: 1.2rem !important;
    margin-top: 1rem !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important;
}

body.dark-version #consola strong,
body.dark-version #consola2 strong {
    color: #fff !important;
}

/* Elementos internos de la justificación en #consola */
body.dark-version #consola ul,
body.dark-version #consola ol {
    margin: 10px 0 !important;
    padding-left: 20px !important;
}
body.dark-version #consola li {
    margin-bottom: 8px !important;
    color: #e2e8f0 !important;
}
body.dark-version #consola p {
    margin: 0 0 10px 0 !important;
    color: #e2e8f0 !important;
}
body.dark-version #consola span[style*="background-color: yellow"],
body.dark-version #consola span[style*="background-color:yellow"],
body.dark-version #consola span[style*="background-color: #ffff00"],
body.dark-version #consola span[style*="background-color:#ffff00"],
body.dark-version #consola span[style*="background-color: rgb(255, 255, 0)"],
body.dark-version #consola span[style*="background-color:rgb(255,255,0)"],
body.dark-version #consola mark {
    background-color: #f59e0b !important;
    color: #1a1a1a !important;
}

body.dark-version .pregunta-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .pregunta-texto {
    color: #fff !important;
}

body.dark-version .opcion-respuesta {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-version .opcion-respuesta:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .opcion-respuesta.seleccionada {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: #3b82f6 !important;
}

body.dark-version .opcion-respuesta.correcta {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
}

body.dark-version .opcion-respuesta.incorrecta {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
}

/* ============================================
   RESULTADOS / ESTADÍSTICAS - Modo Oscuro
   ============================================ */

body.dark-version .resultados-container,
body.dark-version .estadisticas-container {
    background: #1a2035 !important;
}

body.dark-version .resultado-card,
body.dark-version .stats-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .progress-bar-bg {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   CHAT / TUTOR - Modo Oscuro
   ============================================ */

body.dark-version .chat-container,
body.dark-version .tutor-widget {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .chat-messages {
    background: #1a2035 !important;
}

body.dark-version .chat-message.user {
    background: #3b82f6 !important;
    color: #fff !important;
}

body.dark-version .chat-message.bot {
    background: #374151 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .chat-input {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* ============================================
   TABLAS - Modo Oscuro
   ============================================ */

body.dark-version .table-custom,
body.dark-version .data-table,
body.dark-version table.dataTable {
    background: #202940 !important;
}

body.dark-version .table-custom th,
body.dark-version .data-table th,
body.dark-version table.dataTable thead th {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    font-weight: 600 !important;
}

body.dark-version .table-custom td,
body.dark-version .data-table td,
body.dark-version table.dataTable tbody td {
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: #202940 !important;
}

body.dark-version table.dataTable tbody tr {
    background-color: #202940 !important;
}

body.dark-version table.dataTable tbody tr:nth-child(even) {
    background-color: #252d45 !important;
}

body.dark-version table.dataTable tbody tr:hover,
body.dark-version .table-custom tr:hover,
body.dark-version .data-table tr:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

body.dark-version table.dataTable.no-footer {
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

/* DataTables Info (showing X of Y entries) */
body.dark-version .dataTables_info,
body.dark-version .dataTables_length label,
body.dark-version .dataTables_filter label {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .dataTables_wrapper .dataTables_length select,
body.dark-version .dataTables_wrapper .dataTables_filter input {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

body.dark-version .dataTables_wrapper .dataTables_filter input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* DataTables Pagination */
body.dark-version .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-version .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

body.dark-version .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-version .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

body.dark-version .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.dark-version .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

/* DataTables Sorting Icons */
body.dark-version table.dataTable thead .sorting,
body.dark-version table.dataTable thead .sorting_asc,
body.dark-version table.dataTable thead .sorting_desc,
body.dark-version table.dataTable thead .sorting_asc_disabled,
body.dark-version table.dataTable thead .sorting_desc_disabled {
    background-color: transparent !important;
}

/* Specific for examen/resultados pages */
body.dark-version .examen-card,
body.dark-version .examen-finalizado,
body.dark-version .examen-sin-finalizar {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .examen-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e5a9e 100%) !important;
}

body.dark-version .examen-header h3,
body.dark-version .examen-header h4 {
    color: #fff !important;
}

/* Buttons in tables (Revisar, Continuar) */
body.dark-version table.dataTable td .btn,
body.dark-version .table-custom td .btn {
    text-shadow: none !important;
}

body.dark-version table.dataTable td .btn-success,
body.dark-version .table-custom td .btn-success {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
}

body.dark-version table.dataTable td .btn-primary,
body.dark-version .table-custom td .btn-primary {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

body.dark-version table.dataTable td .btn-danger,
body.dark-version .table-custom td .btn-danger {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

/* Striped tables */
body.dark-version .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

body.dark-version .table-striped tbody tr:nth-of-type(even) {
    background-color: #202940 !important;
}

/* Table hover */
body.dark-version .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Table bordered */
body.dark-version .table-bordered,
body.dark-version .table-bordered th,
body.dark-version .table-bordered td {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Resultados page specific */
body.dark-version .resultados-table,
body.dark-version .examenes-table {
    background: #202940 !important;
}

body.dark-version .resultados-table th,
body.dark-version .examenes-table th {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

body.dark-version .resultados-table td,
body.dark-version .examenes-table td {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-version .resultados-table tr:hover,
body.dark-version .examenes-table tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Header cards for exam status */
body.dark-version .header-card-finalizado,
body.dark-version .header-card-completado {
    background: linear-gradient(135deg, #166534 0%, #22c55e 100%) !important;
}

body.dark-version .header-card-pendiente,
body.dark-version .header-card-sin-finalizar {
    background: linear-gradient(135deg, #991b1b 0%, #ef4444 100%) !important;
}

body.dark-version .header-card-finalizado h3,
body.dark-version .header-card-completado h3,
body.dark-version .header-card-pendiente h3,
body.dark-version .header-card-sin-finalizar h3,
body.dark-version .header-card-finalizado h4,
body.dark-version .header-card-completado h4,
body.dark-version .header-card-pendiente h4,
body.dark-version .header-card-sin-finalizar h4 {
    color: #fff !important;
}

/* ============================================
   OVERLAYS Y MODALES - Modo Oscuro
   ============================================ */

body.dark-version .pro-blur-container {
    background: #1a2035 !important;
}

body.dark-version .pro-blur-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* ============================================
   MENÚ LATERAL - Modo Oscuro (override)
   ============================================ */

body.dark-version .sidenav,
body.dark-version #sidenav-main {
    background: #1f283e !important;
    background-color: #1f283e !important;
    background-image: linear-gradient(195deg, #323a54, #1a2035) !important;
}

body.dark-version .sidenav .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .sidenav .nav-link:hover,
body.dark-version .sidenav .nav-link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .sidenav .nav-link i {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .sidenav .nav-link:hover i,
body.dark-version .sidenav .nav-link.active i {
    color: #fff !important;
}

/* ============================================
   FORMULARIOS - Modo Oscuro
   ============================================ */

body.dark-version input,
body.dark-version textarea,
body.dark-version select {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

body.dark-version select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a0b0cc' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 8px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 36px !important;
}

body.dark-version select option {
    background: #202940 !important;
    color: #fff !important;
}

body.dark-version input:focus,
body.dark-version textarea:focus,
body.dark-version select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

body.dark-version input::placeholder,
body.dark-version textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.dark-version label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================
   BOTONES - Modo Oscuro
   ============================================ */

body.dark-version .btn-outline-primary {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

body.dark-version .btn-outline-primary:hover {
    background: #3b82f6 !important;
    color: #fff !important;
}

body.dark-version .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-version .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   SCROLLBAR - Modo Oscuro
   ============================================ */

body.dark-version ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-version ::-webkit-scrollbar-track {
    background: #1a2035 !important;
}

body.dark-version ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px;
}

body.dark-version ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================
   BADGES Y ETIQUETAS - Modo Oscuro
   ============================================ */

body.dark-version .badge {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-version .badge-primary {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #3b82f6 !important;
}

body.dark-version .badge-success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
}

body.dark-version .badge-warning {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
}

body.dark-version .badge-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

/* ============================================
   PRO-BLUR OVERLAY ESPECÍFICO
   ============================================ */

body.dark-version .pro-blur-content {
    background: linear-gradient(135deg, rgba(20, 70, 132, 0.98) 0%, rgba(30, 90, 158, 0.98) 100%) !important;
}

/* ============================================
   RESULTADOS.PHP - Elementos Específicos
   ============================================ */

body.dark-version .mini-card,
body.dark-version .chart-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

body.dark-version .mini-card h3,
body.dark-version .chart-card h3,
body.dark-version .chart-card .chart-title {
    color: #fff !important;
}

body.dark-version .chart-card .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-version .chart-card .form-select {
    background-color: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .page-header-blue {
    background: linear-gradient(135deg, #1e3a8a 0%, #2d4a6f 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

body.dark-version .page-header-blue h2,
body.dark-version .page-header-blue h3,
body.dark-version .page-header-blue h4 {
    color: #fff !important;
}

body.dark-version .results-header h3 {
    color: #fff !important;
}

/* Botones personalizados de resultados.php */
body.dark-version .btn-info {
    background: #5eb101 !important;
    border-color: #5eb101 !important;
    color: #fff !important;
}

body.dark-version .btn-info:hover {
    background: #4a9001 !important;
    border-color: #4a9001 !important;
}

body.dark-version .btn-secondary {
    background: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #fff !important;
}

body.dark-version .btn-secondary:hover {
    background: #4b5563 !important;
    border-color: #4b5563 !important;
}

body.dark-version .btn-danger {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

body.dark-version .btn-danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

body.dark-version .btn-success {
    background: #fbbf24 !important;
    border-color: #fbbf24 !important;
    color: #1f2937 !important;
}

body.dark-version .btn-success:hover {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
}

body.dark-version .btn-primary {
    background: #06b6d4 !important;
    border-color: #06b6d4 !important;
    color: #fff !important;
}

body.dark-version .btn-primary:hover {
    background: #0891b2 !important;
    border-color: #0891b2 !important;
}

body.dark-version .btn-warning {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #fff !important;
}

body.dark-version .btn-warning:hover {
    background: #ea580c !important;
    border-color: #ea580c !important;
}

/* ============================================
   ALUMNO_DETALLE.PHP - Modo Oscuro
   ============================================ */

/* Modales inline con fondo blanco */
body.dark-version #modalExplicacionAlerta > div,
body.dark-version #modalRetoCode > div,
body.dark-version #normativa-tooltip {
    background: #202940 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Headers de modales inline */
body.dark-version #modalExplicacionAlerta h5,
body.dark-version #modalRetoCode h3,
body.dark-version #normativa-tooltip div {
    color: #fff !important;
}

/* Inputs en modales inline */
body.dark-version #modalRetoCode input[type="text"] {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version #modalRetoCode input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Botones de modales inline */
body.dark-version #modalRetoCode button[type="button"] {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Separadores en modales */
body.dark-version #modalExplicacionAlerta [style*="border-bottom"],
body.dark-version #modalExplicacionAlerta [style*="border-top"] {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Mini KPI Cards y tarjeta de período */
body.dark-version .mini-kpi-card,
body.dark-version .periodo-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
}

body.dark-version .mini-kpi-card .mini-kpi-title,
body.dark-version .mini-kpi-card .mini-kpi-label,
body.dark-version .periodo-card .periodo-title {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .mini-kpi-card .mini-kpi-value,
body.dark-version .periodo-card .periodo-value {
    color: #fff !important;
}

body.dark-version .mini-kpi-card .mini-kpi-icon {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Page filter (Período de análisis) */
body.dark-version .page-filter {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .page-filter-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .page-filter select {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .page-filter select option {
    background: #202940 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Rendimiento por Temas - lista de normativas */
body.dark-version .normativa-name {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-version .normativa-row:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-version .normativa-bar {
    background: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .normativa-pct {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .normativa-select {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .normativa-select option {
    background: #202940 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Header datatable controls */
body.dark-version .header-datatable-length label,
body.dark-version .header-datatable-filter label {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .header-datatable-length select,
body.dark-version .header-datatable-filter input {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

body.dark-version .header-datatable-filter input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Tabla básica de Bootstrap */
body.dark-version .table {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-version .table thead th {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .table tbody td {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Paginación personalizada */
body.dark-version .dataTables_paginate .paginate_button {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .dataTables_paginate .paginate_button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

body.dark-version .dataTables_paginate .paginate_button.current {
    background: #4a6fa5 !important;
    border-color: #4a6fa5 !important;
    color: #fff !important;
}

/* ============================================
   DASHBOARD.PHP - Tablas Específicas
   ============================================ */

/* Card Headers con colores específicos */
body.dark-version .card-header.bg-primary {
    background: linear-gradient(135deg, #166534 0%, #22c55e 100%) !important;
}

body.dark-version .card-header.bg-secondary {
    background: linear-gradient(135deg, #991b1b 0%, #ef4444 100%) !important;
}

body.dark-version .card-header.bg-terciary {
    background: linear-gradient(135deg, #92400e 0%, #f59e0b 100%) !important;
}

body.dark-version .card-header.bg-info {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
}

body.dark-version .card-header h6,
body.dark-version .card-header h5,
body.dark-version .card-header h4 {
    color: #fff !important;
}

/* Tablas específicas de dashboard - thead-light-primary/secondary */
body.dark-version .thead-light-primary th {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
    border-bottom-color: rgba(34, 197, 94, 0.3) !important;
}

body.dark-version .thead-light-secondary th {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-bottom-color: rgba(239, 68, 68, 0.3) !important;
}

/* Filas de tabla en dashboard */
body.dark-version .card .table tbody tr {
    background-color: #202940 !important;
}

body.dark-version .card .table tbody tr:nth-child(even) {
    background-color: #252d45 !important;
}

body.dark-version .card .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Celdas de tabla en dashboard */
body.dark-version .card .table td,
body.dark-version .card .table th {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .card .table tbody td {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-version .card .table thead th {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
}

/* Texto en tablas */
body.dark-version .table .text-secondary {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .table .text-xs {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Timeline en dashboard */
body.dark-version .timeline-content h6 {
    color: #fff !important;
}

body.dark-version .timeline-content .text-secondary {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Badges en tablas de dashboard */
body.dark-version .table .badge.bg-info {
    background: #3b82f6 !important;
    color: #fff !important;
}

body.dark-version .table .badge.bg-secondary {
    background: #6b7280 !important;
    color: #fff !important;
}

/* Mensaje "No hay exámenes" */
body.dark-version .table .text-center.text-secondary {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================
   RETOS / CARDS DE ESTADÍSTICAS - Modo Oscuro
   ============================================ */

/* Cards de retos (Mis Retos Realizados) */
body.dark-version .reto-card,
body.dark-version .reto-stat-card,
body.dark-version .stats-card-mini,
body.dark-version [class*="reto"] .card,
body.dark-version .card-retos {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Celdas de estadísticas dentro de las cards de retos */
body.dark-version .reto-card .info .reto-row,
body.dark-version .reto-card .stat-row,
body.dark-version .reto-card .stats-row,
body.dark-version .reto-stat-card .stat-row,
body.dark-version .stats-card-mini .stat-row {
    background: transparent !important;
}

/* Celdas individuales de estadísticas (PUNTOS, TIEMPO, ACIERTOS, FALLOS, BLANCOS) */
body.dark-version .reto-card .info .reto-row > div,
body.dark-version .reto-card .info .reto-row > span:not(.reto-ico):not(.reto-sep),
body.dark-version .reto-card .stat-box,
body.dark-version .reto-card .stat-cell,
body.dark-version .reto-card .stat-item,
body.dark-version .reto-card [class*="stat"] > div {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #fff !important;
}

/* Valores de estadísticas */
body.dark-version .reto-card .stat-value,
body.dark-version .reto-card .stat-number,
body.dark-version .reto-card .info strong,
body.dark-version .reto-card .info .value {
    color: #fff !important;
    font-weight: 600 !important;
}

/* Labels de estadísticas */
body.dark-version .reto-card .stat-label,
body.dark-version .reto-card .label,
body.dark-version .reto-card .info small,
body.dark-version .reto-card .info .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
    text-transform: uppercase !important;
    font-size: 0.7rem !important;
}

/* Colores específicos para valores */
body.dark-version .reto-card .puntos-value,
body.dark-version .reto-card .score-positive {
    color: #22c55e !important;
}

body.dark-version .reto-card .puntos-negative,
body.dark-version .reto-card .score-negative {
    color: #ef4444 !important;
}

body.dark-version .reto-card .tiempo-value {
    color: #3b82f6 !important;
}

body.dark-version .reto-card .aciertos-value {
    color: #22c55e !important;
}

body.dark-version .reto-card .fallos-value {
    color: #ef4444 !important;
}

body.dark-version .reto-card .blancos-value {
    color: #9ca3af !important;
}

/* Iconos en las celdas */
body.dark-version .reto-card .reto-ico,
body.dark-version .reto-card .stat-icon {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Separadores */
body.dark-version .reto-card .reto-sep {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.dark-version .reto-card:hover,
body.dark-version .reto-stat-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Headers de cards de retos */
body.dark-version .reto-card .card-header,
body.dark-version .card-retos .card-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #2d4a6f 100%) !important;
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .reto-card .card-header h5,
body.dark-version .reto-card .card-header h6,
body.dark-version .card-retos .card-header h5,
body.dark-version .card-retos .card-header h6 {
    color: #fff !important;
}

/* Celdas de estadísticas dentro de cards */
body.dark-version .stat-box,
body.dark-version .stat-cell,
body.dark-version .stat-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .stat-box .stat-value,
body.dark-version .stat-cell .stat-number,
body.dark-version .stat-item .stat-value {
    color: #fff !important;
    font-weight: 600 !important;
}

body.dark-version .stat-box .stat-label,
body.dark-version .stat-cell .stat-label,
body.dark-version .stat-item .stat-label {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
}

/* Colores específicos para estadísticas */
body.dark-version .stat-puntos .stat-value,
body.dark-version .stat-puntos.positive {
    color: #22c55e !important;
}

body.dark-version .stat-puntos.negative {
    color: #ef4444 !important;
}

body.dark-version .stat-tiempo .stat-value {
    color: #3b82f6 !important;
}

body.dark-version .stat-aciertos .stat-value {
    color: #22c55e !important;
}

body.dark-version .stat-fallos .stat-value {
    color: #ef4444 !important;
}

body.dark-version .stat-blancos .stat-value {
    color: #9ca3af !important;
}

/* Botones de retos */
body.dark-version .btn-ranking {
    background: #06b6d4 !important;
    border-color: #06b6d4 !important;
    color: #fff !important;
}

body.dark-version .btn-ranking:hover {
    background: #0891b2 !important;
    border-color: #0891b2 !important;
}

body.dark-version .btn-resultados {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #fff !important;
}

body.dark-version .btn-resultados:hover {
    background: #ea580c !important;
    border-color: #ea580c !important;
}

/* Grid de retos */
body.dark-version .retos-grid,
body.dark-version .retos-container {
    background: transparent !important;
}

/* Título de sección */
body.dark-version .section-title,
body.dark-version .retos-title,
body.dark-version h2.section-title,
body.dark-version h3.section-title {
    color: #fff !important;
}

/* Paginación de retos */
body.dark-version .retos-pagination .page-item .page-link,
body.dark-version .pagination-retos .page-link {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .retos-pagination .page-item.active .page-link,
body.dark-version .pagination-retos .page-item.active .page-link {
    background: #4a6fa5 !important;
    border-color: #4a6fa5 !important;
    color: #fff !important;
}

body.dark-version .retos-pagination .page-item .page-link:hover,
body.dark-version .pagination-retos .page-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

/* ============================================
   CONFIGURADOR / MODALES - Modo Oscuro
   ============================================ */

/* Modal background y contenido */
body.dark-version .modal-content {
    background-color: #202940 !important;
    color: rgba(255, 255, 255, 0.87) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .modal-header {
    background-color: #1a2035 !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

body.dark-version .modal-header .modal-title {
    color: #fff !important;
}

body.dark-version .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

body.dark-version .modal-body {
    background-color: #202940 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-version .modal-footer {
    background-color: #1a2035 !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Caja de descripción del tema */
body.dark-version #descripcion-caja {
    background-color: #252d45 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-version #descripcion-caja h6 {
    color: #fff !important;
}

body.dark-version #descripcion-texto {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Árbol de temas/módulos en el modal */
body.dark-version .tree-label {
    color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-version .tree-root ul {
    border-left-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-version #modalModulos .tree-item > ul::before,
body.dark-version #modalNormativas .tree-root ul::before {
    border-left-color: rgba(255, 255, 255, 0.2) !important;
}

/* Chips de temas seleccionados */
body.dark-version .chip {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.87) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Texto resaltado en búsquedas */
body.dark-version .hl {
    background: rgba(251, 191, 36, 0.25) !important;
    color: #fbbf24 !important;
}

/* Checkbox en árbol de módulos */
body.dark-version #modalModulos .tree-item > .chk-modulo,
body.dark-version #modalNormativas .tree-item > .chk-normativa {
    accent-color: #3b82f6 !important;
}

/* Separador hr dentro del modal */
body.dark-version .modal-body hr {
    border-color: rgba(255, 255, 255, 0.15) !important;
    opacity: 1 !important;
}

/* form-check labels dentro del modal */
body.dark-version .modal-body .form-check-label {
    color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-version .modal-body p {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Área blanca en el configurador (caja derecha de descripción con fondo hardcodeado) */
body.dark-version #descripcion-caja[style*="background-color"] {
    background-color: #252d45 !important;
}

/* Fondo del área superior del configurador */
body.dark-version .card #descripcion-caja {
    background: #252d45 !important;
}

/* Toolbar de búsqueda en modales */
body.dark-version .tree-toolbar .form-control {
    background-color: #1a2035 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-version .tree-toolbar .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Botones del footer del modal */
body.dark-version .modal-footer .btn-outline-secondary {
    color: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-version .modal-footer .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* ============================================
   CONFIGURADOR EXAMEN OFICIAL - Modo Oscuro
   ============================================ */

/* Fila de examen: hover con fondo blanco → oscuro */
body.dark-version .exam-item:hover label {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

body.dark-version .exam-item label {
    color: rgba(255, 255, 255, 0.87) !important;
}

/* Cabecera de año (acordeón) */
body.dark-version .year-header-btn {
    background: #252d45 !important;
    color: #fff !important;
}

body.dark-version .year-header-btn:hover {
    background: #2d3a5a !important;
    color: #fff !important;
}

/* Item hover/seleccionado activo */
body.dark-version .exam-item {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-version .exam-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Radio buttons en el modal de examen oficial */
body.dark-version .exam-radio {
    accent-color: #3b82f6 !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Buscar por examen (input de búsqueda en el modal) */
body.dark-version .modal-body .form-control {
    background-color: #1a2035 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-version .modal-body .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================
   SUPUESTOS PDF - Modo Oscuro
   ============================================ */

/* Tarjetas de supuestos */
body.dark-version .list-item-pdf {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-version .list-item-pdf:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
}

/* Título y texto */
body.dark-version .list-item-content h5 {
    color: #fff !important;
}

body.dark-version .list-item-content .text-muted,
body.dark-version .list-item-content small {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Icono PDF */
body.dark-version .pdf-icon {
    color: #f87171 !important;
}

/* Input de búsqueda */
body.dark-version .search-input {
    background-color: #202940 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-version .search-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.dark-version .search-input:focus {
    background-color: #252d45 !important;
    border-color: #FF4081 !important;
    color: #fff !important;
}

/* Select de año */
body.dark-version .filter-form .form-select {
    background-color: #202940 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

/* Label "Año:" */
body.dark-version .filter-form label {
    color: rgba(255, 255, 255, 0.87) !important;
}

/* ============================================
   DESAFIOS - MODAL CÁLCULO PUNTUACIÓN - Modo Oscuro
   ============================================ */

body.dark-version .calculo-modal-content {
    background: #202940 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

body.dark-version .calculo-modal-header {
    background: #202940 !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .calculo-modal-header h3 {
    color: #fff !important;
}

body.dark-version .calculo-close {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .calculo-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

body.dark-version .calculo-modal-body {
    background: #1a2035 !important;
}

body.dark-version .calculo-desglose {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .calculo-desglose strong {
    color: rgba(255, 255, 255, 0.87) !important;
}

/* Cajas de resultado */
body.dark-version .calculo-box {
    background: #202940 !important;
}

body.dark-version .calculo-box-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border-left-color: #10b981 !important;
}

body.dark-version .calculo-box-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-left-color: #ef4444 !important;
}

body.dark-version .calculo-box-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-left-color: #f59e0b !important;
}

body.dark-version .calculo-box-final {
    background: rgba(6, 182, 212, 0.1) !important;
    border-left-color: #06b6d4 !important;
}

/* Contenido de las cajas */
body.dark-version .calculo-box-content {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

body.dark-version .calculo-box-success .calculo-box-content strong {
    color: #34d399 !important;
}

body.dark-version .calculo-box-danger .calculo-box-content strong {
    color: #f87171 !important;
}

body.dark-version .calculo-box-warning .calculo-box-content strong {
    color: #fbbf24 !important;
}

body.dark-version .calculo-box-final .calculo-box-content {
    color: #22d3ee !important;
}

/* ============================================
   TABLAS BOOTSTRAP 5 - Modo Oscuro (máxima especificidad)
   ============================================ */

/* Anular variables CSS de BS5 en la raíz de la tabla */
html body.dark-version .table {
    --bs-table-bg: #202940 !important;
    --bs-table-color: rgba(255, 255, 255, 0.87) !important;
    --bs-table-border-color: rgba(255, 255, 255, 0.1) !important;
    --bs-table-striped-bg: #1e2742 !important;
    --bs-table-striped-color: rgba(255, 255, 255, 0.87) !important;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.12) !important;
    --bs-table-hover-color: #ffffff !important;
    --bs-table-active-bg: rgba(255, 255, 255, 0.12) !important;
    --bs-table-active-color: #ffffff !important;
    color: rgba(255, 255, 255, 0.87) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Todas las celdas */
html body.dark-version .table td,
html body.dark-version .table th,
html body.dark-version .table > :not(caption) > * > * {
    background-color: var(--bs-table-bg) !important;
    color: var(--bs-table-color) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Filas impares (striped) */
html body.dark-version .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg: #1e2742 !important;
    background-color: #1e2742 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

/* Filas pares (striped) */
html body.dark-version .table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-bg: #202940 !important;
    background-color: #202940 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

/* HOVER - máxima especificidad */
html body.dark-version .table > tbody > tr:hover > td,
html body.dark-version .table > tbody > tr:hover > th,
html body.dark-version .table-hover > tbody > tr:hover > td,
html body.dark-version .table-hover > tbody > tr:hover > th,
html body.dark-version .table-striped > tbody > tr:hover > td,
html body.dark-version .table-striped > tbody > tr:hover > th,
html body.dark-version .table-bordered > tbody > tr:hover > td,
html body.dark-version .table-bordered > tbody > tr:hover > th {
    --bs-table-bg: rgba(255, 255, 255, 0.12) !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* thead oscuro */
html body.dark-version .table > thead > tr > th,
html body.dark-version .table > thead > tr > td {
    background-color: #1a2035 !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

html body.dark-version .thead-dark > tr > th {
    background-color: #111827 !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Número de posición */
html body.dark-version .numero-posicion {
    color: #fff !important;
}

/* ============================================
   DESAFIOS.PHP / TABLAS - Modo Oscuro
   Solución via variables CSS de Bootstrap 5
   ============================================ */

/* Sobreescribir variables CSS de Bootstrap 5 en todas las tablas en modo oscuro */
body.dark-version .table,
body.dark-version .table-striped,
body.dark-version .table-bordered,
body.dark-version .table-hover {
    --bs-table-bg: #202940;
    --bs-table-color: rgba(255, 255, 255, 0.9);
    --bs-table-border-color: rgba(255, 255, 255, 0.1);
    --bs-table-striped-bg: #252d45;
    --bs-table-striped-color: rgba(255, 255, 255, 0.9);
    --bs-table-active-bg: rgba(255, 255, 255, 0.1);
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.15);
    --bs-table-hover-color: #fff;
    --bs-table-accent-bg: transparent;
    color: rgba(255, 255, 255, 0.9) !important;
    background-color: #202940 !important;
}

/* Asegurar que las celdas hereden el color correcto */
body.dark-version .table td,
body.dark-version .table th {
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Hover de filas */
body.dark-version .table tbody tr:hover td,
body.dark-version .table tbody tr:hover th {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ============================================
   DESAFIOPORMODULOS.PHP - Modo Oscuro
   ============================================ */

/* Caja de descripción del módulo (fondo #f8f9fa en línea) */
body.dark-version #desc_modulo,
body.dark-version div[style*="background-color:#f8f9fa"],
body.dark-version div[style*="background-color: #f8f9fa"] {
    background-color: #202940 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Chips de módulos seleccionados */
body.dark-version .chip {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Modal de selección de módulos - checkboxes visibles */
body.dark-version #modalSelectModulos .form-check-input {
    background-color: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-version #modalSelectModulos .form-check-input:checked {
    background-color: #00B8E6 !important;
    border-color: #00B8E6 !important;
}

body.dark-version #modalSelectModulos .list-group-item {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version #modalSelectModulos .list-group-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Texto de los módulos en el modal */
body.dark-version #modalSelectModulos .fw-semibold {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Input de búsqueda en modal */
body.dark-version #buscarModulos {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version #buscarModulos::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================
   DESAFIOPORTEMAS.PHP - Modo Oscuro
   ============================================ */

/* Caja de descripción del tema */
body.dark-version #desc_tema {
    background-color: #202940 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Modal de selección de temas */
body.dark-version #modalSelectTemas .form-check-input {
    background-color: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-version #modalSelectTemas .form-check-input:checked {
    background-color: #00B8E6 !important;
    border-color: #00B8E6 !important;
}

body.dark-version #modalSelectTemas .list-group-item {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version #modalSelectTemas .list-group-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-version #modalSelectTemas .fw-semibold {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #buscarTemas {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version #buscarTemas::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================
   DESAFIOPORNORMATIVA.PHP - Modo Oscuro
   ============================================ */

/* Caja de descripción de la normativa */
body.dark-version #desc_normativa {
    background-color: #202940 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Modal de selección de normativas */
body.dark-version #modalSelectNormativas .form-check-input {
    background-color: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-version #modalSelectNormativas .form-check-input:checked {
    background-color: #00B8E6 !important;
    border-color: #00B8E6 !important;
}

body.dark-version #modalSelectNormativas .list-group-item {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version #modalSelectNormativas .list-group-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-version #modalSelectNormativas .fw-semibold {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #buscarNormas {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version #buscarNormas::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================
   NUEVO_DESAFIO.PHP - Modo Oscuro
   ============================================ */

/* CKEditor - fondo blanco hardcodeado */
body.dark-version .ck-editor__editable {
    background: #202940 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .ck.ck-editor__main {
    background: #202940 !important;
}

body.dark-version .ck.ck-toolbar {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .ck.ck-toolbar .ck-toolbar__items .ck-button {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-version .ck.ck-toolbar .ck-button.ck-on {
    background: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .ck.ck-toolbar .ck-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Cards de Desafío 1-4 */
body.dark-version #formulario_desafio .card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version #formulario_desafio .card h5 {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #formulario_desafio label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Selects y inputs */
body.dark-version #formulario_desafio .form-control {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version #formulario_desafio .form-control:focus {
    border-color: #00B8E6 !important;
}

/* Paginación */
body.dark-version .pagination a {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .pagination a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .pagination .active a {
    background: #00B8E6 !important;
    border-color: #00B8E6 !important;
    color: #fff !important;
}

body.dark-version .pagination .disabled a {
    background: #1a1f2e !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================
   RANKING_COMPETITIVO.PHP - Popover Modo Oscuro
   ============================================ */

/* Popover principal */
body.dark-version .popover {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Cabecera del popover */
body.dark-version .popover-header {
    background: #2d3a55 !important;
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Cuerpo del popover */
body.dark-version .popover-body {
    background: #202940 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Flecha del popover */
body.dark-version .popover .popover-arrow::before {
    border-color: transparent !important;
}

body.dark-version .popover .popover-arrow::after {
    border-left-color: #202940 !important;
}

/* Tabla dentro del popover */
body.dark-version .popover-body table {
    background: #202940 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .popover-body table thead th {
    background: #2d3a55 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .popover-body table td {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Resumen del popover (textos de cálculos) */
body.dark-version .popover-body div[style*="font-size:12px"] {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Scroll del popover si es necesario */
body.dark-version .popover-body div[style*="max-height"] {
    scrollbar-color: rgba(255, 255, 255, 0.2) #202940 !important;
}

/* Anular estilos inline hardcodeados en el popover de ranking */
body.dark-version .popover-body div[style*="background:#f8f9fa"],
body.dark-version .popover-body div[style*="background: #f8f9fa"] {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .popover-body div[style*="border-top:1px dashed #ddd"] {
    border-top-color: rgba(255, 255, 255, 0.2) !important;
}

/* Tabla del popover - anular estilos inline */
body.dark-version .popover-body table[style*="border-collapse:collapse"] {
    background: #202940 !important;
}

body.dark-version .popover-body table thead th[style*="border-bottom:1px solid #ddd"] {
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
    background: #2d3a55 !important;
}

body.dark-version .popover-body table tbody tr td {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Colores de los números en el resumen */
body.dark-version .popover-body strong[style*="color:#c00"] {
    color: #ff6b6b !important;
}

body.dark-version .popover-body strong[style*="color:#090"] {
    color: #51cf66 !important;
}

/* ============================================
   VER_RESPUESTAS.PHP - Modo Oscuro
   ============================================ */

/* Cards de Precisión, Tiempo, Puntos */
body.dark-version .ver_respuestas .card,
body.dark-version .container .row .col-4 .card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .ver_respuestas .card-header,
body.dark-version .container .row .col-4 .card-header {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .ver_respuestas .card-header p,
body.dark-version .container .row .col-4 .card-header p {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .ver_respuestas .card-header h4,
body.dark-version .container .row .col-4 .card-header h4 {
    color: #fff !important;
}

/* Progress bar - ajustar colores para dark mode */
body.dark-version .progress {
    background-color: #1a1f2e !important;
}

body.dark-version .progress-bar.bg-success {
    background-color: #51cf66 !important;
}

body.dark-version .progress-bar.bg-danger {
    background-color: #ff6b6b !important;
}

body.dark-version .progress-bar.bg-warning {
    background-color: #fcc419 !important;
}

/* Badges de aciertos/errores/en blanco debajo de la barra */
body.dark-version .progress-text.bg-success {
    background-color: #2b8a3e !important;
}

body.dark-version .progress-text.bg-danger {
    background-color: #c92a2a !important;
}

body.dark-version .progress-text.bg-secondarys,
body.dark-version .progress-text.bg-secondary {
    background-color: #495057 !important;
}

/* Cards de preguntas individuales */
body.dark-version .card-body .card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .card-body .card .card-body {
    background: #202940 !important;
}

body.dark-version .card-body .card h5 {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .card-body .card p {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-version .card-body .card strong {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Badge de tiempo */
body.dark-version .badge.bg-secondary {
    background-color: #495057 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Títulos de sección */
body.dark-version .card-header h6 {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Eliminar barra blanca debajo de la progress bar en ver_respuestas */
body.dark-version .progreso_barra .progress {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Ajustar espaciado entre progress bar y badges */
body.dark-version .progreso_barra .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.dark-version .progreso_barra .row {
    margin-top: 0 !important;
}

/* ============================================
   HISTORICO_DESAFIOS.PHP - Modo Oscuro
   ============================================ */

/* Filter card - eliminar fondo blanco */
body.dark-version .filter-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-version .filter-card h6 {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Labels del filtro */
body.dark-version .filter-card .form-group label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Labels generales del filtro */
body.dark-version .filter-card .form-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Inputs de fecha y text en filtros */
body.dark-version .filter-card .form-control {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}
body.dark-version .filter-card .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Selects en filtros */
body.dark-version .filter-card .form-select {
    background-color: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}
body.dark-version .filter-card .form-select option {
    background: #2d3a55 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Card principal de la tabla */
body.dark-version .card .card-header {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .card .card-header h4 {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Card body de la tabla */
body.dark-version .card .card-body {
    background: #202940 !important;
}

/* Tabla - thead ya tiene gradiente, ajustar tbody */
body.dark-version .table tbody tr {
    background: #202940 !important;
}

body.dark-version .table tbody tr td {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .table tbody tr td p {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-version .table tbody tr td .text-secondary {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .table tbody tr td h6 {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Alert de info cuando no hay desafíos */
body.dark-version .alert.alert-info {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Stats cards - asegurar que se ven bien (ya tienen gradientes) */
body.dark-version .stats-card h3,
body.dark-version .stats-card p {
    color: #fff !important;
}

/* Modales de historico_desafios.php */
body.dark-version .usuarios-modal-content {
    background-color: #202940 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark-version .usuarios-modal-header {
    background: #202940 !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .usuarios-modal-header h5 {
    color: #fff !important;
}

body.dark-version .usuarios-modal-body {
    background: #202940 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Botón cerrar del modal */
body.dark-version .puntuacion-modal-close {
    background: #2d3a55 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

body.dark-version .puntuacion-modal-close i,
body.dark-version .puntuacion-modal-close .bi-x-lg,
body.dark-version .puntuacion-modal-close .bi,
body.dark-version .puntuacion-modal-close::before {
    color: #fff !important;
}

body.dark-version .puntuacion-modal-close:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

/* ============================================
   MIACADEMIA.PHP - Modo Oscuro
   ============================================ */

/* Card de selección de academia - fondo blanco hardcodeado */
body.dark-version .select-academia {
    background: #202940 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-version .select-academia h5 {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Select de academias */
body.dark-version .select-academia .form-select {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .select-academia .form-select option {
    background: #2d3a55 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Hero academia section */
body.dark-version .hero-academia {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .hero-academia .hero-text h2 {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .hero-academia .hero-text p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Botón editar academia */
body.dark-version .hero-academia .edit-btn {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .hero-academia .edit-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Filtros filter-pill */
body.dark-version .filter-pill {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .filter-pill .filter-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .filter-pill .form-select {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Métricas cards */
body.dark-version .metric-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .metric-card .metric-title {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .metric-card .metric-value {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .metric-card .metric-sub {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Mini KPIs */
body.dark-version .mini-kpi {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .mini-kpi .mini-kpi-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .mini-kpi .mini-kpi-value {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .mini-kpi .mini-kpi-value span {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Chart cards */
body.dark-version .chart-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .chart-card .chart-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .chart-card .chart-box {
    background: #202940 !important;
}

/* Rendimiento cards (heatmap) */
body.dark-version .rendimiento-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .rendimiento-card h5 {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .rendimiento-card .rendimiento-subtitle {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .rendimiento-card .no-data-msg {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Heatmap items */
body.dark-version .heatmap-item .heatmap-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-version .heatmap-bar {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Mini cards (Alumnos Destacados, Alertas, Grupos, Últimos exámenes) */
body.dark-version .mini-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .mini-card h5 {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .mini-card .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Alertas inteligentes */
body.dark-version .mini-card .alerts-list li span {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-version .alert-number-clickable {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Badges en mini-card */
body.dark-version .mini-card .badge.bg-primary-subtle {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

body.dark-version .mini-card .badge.bg-success-subtle {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}

/* Tabla últimos exámenes */
body.dark-version .table-ultimos thead th {
    background: #2d3a55 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .table-ultimos tbody tr {
    background: #202940 !important;
}

body.dark-version .table-ultimos tbody tr td {
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Top students */
body.dark-version .top-student-row .top-student-name {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .top-student-row .top-student-pct {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ============================================
   GRUPO_DETALLE.PHP - Modo Oscuro
   ============================================ */

/* KPI Cards */
body.dark-version .kpi-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .kpi-card .kpi-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .kpi-card .kpi-value {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Los iconos de KPI mantienen sus fondos coloridos */

/* Content Cards */
body.dark-version .content-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .content-card h6 {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Chart Card en grupo_detalle */
body.dark-version .grupo-detalle .chart-card,
body.dark-version .grupo-detalle-chart .chart-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .chart-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Tablas en content-card */
body.dark-version .content-card thead th {
    color: rgba(255, 255, 255, 0.8) !important;
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .content-card tbody td {
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .content-card tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Ranking items */
body.dark-version .ranking-item {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .ranking-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Número de ranking */
body.dark-version .ranking-num {
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Nombre del alumno en ranking */
body.dark-version .ranking-name {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Porcentaje en ranking */
body.dark-version .ranking-pct {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Círculo de progreso - fondo */
body.dark-version .circular-progress-bg {
    stroke: rgba(255, 255, 255, 0.15) !important;
}

/* Texto del porcentaje en círculo */
body.dark-version .circular-progress-text {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Botones de añadir (mantener colores amarillos, ajustar texto) */
body.dark-version .btn-add-alumno,
body.dark-version .btn-add-prof {
    color: #000 !important;
}

/* Texto muted en grupos */
body.dark-version .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================
   MODAL ESTADÍSTICAS DE ALUMNOS DEL GRUPO
   (grupo_detalle.php - modalStatsGrupo)
   ============================================ */

/* Fondo del modal */
body.dark-version #modalStatsGrupo .modal-content {
    background: #202940 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Header del modal */
body.dark-version #modalStatsGrupo .modal-header {
    background: linear-gradient(135deg, #144684 0%, #1e5a9e 100%) !important;
}

body.dark-version #modalStatsGrupo .modal-header small {
    color: #c7d9f5 !important;
}

/* Body del modal */
body.dark-version #modalStatsGrupo .modal-body {
    background: #202940 !important;
}

/* Filtro de fechas - texto */
body.dark-version #modalStatsGrupo .modal-body span {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Inputs de fecha */
body.dark-version #modalStatsGrupo .form-control {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Botón Filtrar */
body.dark-version #modalStatsGrupo button[onclick="cargarStatsGrupo()"] {
    background: #144684 !important;
    color: #fff !important;
}

/* Botón Limpiar */
body.dark-version #modalStatsGrupo button[onclick="limpiarFiltroStats()"] {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Tabla - encabezado */
body.dark-version #modalStatsGrupo thead {
    background: #202940 !important;
}

body.dark-version #modalStatsGrupo thead tr {
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version #modalStatsGrupo .stats-th {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Tabla - cuerpo */
body.dark-version #modalStatsGrupo tbody td {
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version #modalStatsGrupo tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Mensaje vacío */
body.dark-version #modalStatsGrupo #statsGrupoVacio {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Footer del modal */
body.dark-version #modalStatsGrupo .modal-footer {
    background: #1a2340 !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version #modalStatsGrupo .modal-footer .btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   ALUMNO_DETALLE.PHP - Modales Rendimiento y Normativas
   ============================================ */

/* Modal de Todos los Temas / Todas las Normativas */
body.dark-version #modalRendimientoCompleto .modal-content,
body.dark-version #modalNormativasCompleto .modal-content {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version #modalRendimientoCompleto .modal-header,
body.dark-version #modalNormativasCompleto .modal-header {
    background: #202940 !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version #modalRendimientoCompleto .modal-title,
body.dark-version #modalNormativasCompleto .modal-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #modalRendimientoCompleto .modal-body,
body.dark-version #modalNormativasCompleto .modal-body {
    background: #202940 !important;
}

body.dark-version #modalRendimientoCompleto .modal-footer,
body.dark-version #modalNormativasCompleto .modal-footer {
    background: #202940 !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Header de la tabla (tabla-rendimiento-header) */
body.dark-version .tabla-rendimiento-header {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .tabla-rendimiento-header .row {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-version .tabla-rendimiento-header .row > div {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Items de rendimiento */
body.dark-version .rendimiento-item {
    background: #202940 !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .rendimiento-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Nombre del tema/normativa */
body.dark-version .rendimiento-item .col-3 {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Totales column */
body.dark-version .rendimiento-item .col-1 span {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Aciertos - verde */
body.dark-version .rendimiento-item .col-2 span {
    color: #4ade80 !important;
}

/* Fallos - rojo */
body.dark-version .rendimiento-item .col-1 span[style*="color:#ef4444"],
body.dark-version .rendimiento-item .col-1 span.text-danger {
    color: #f87171 !important;
}

/* Blancas - gris */
body.dark-version .rendimiento-item .col-2 span[style*="color:#94a3b8"] {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Porcentaje texto */
body.dark-version .rendimiento-item .col-3 span {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Barra de progreso fondo */
body.dark-version .rendimiento-item .col-3 div[style*="background:#e2e8f0"] {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Barra de progreso azul */
body.dark-version .rendimiento-item .col-3 div[style*="background:#3b82f6"],
body.dark-version .rendimiento-item .col-3 div[style*="background:linear-gradient(90deg, #3b82f6"] {
    background: #3b82f6 !important;
}

/* Fila TOTAL */
body.dark-version .rendimiento-item-total {
    background: #2d3a55 !important;
    border-top: 2px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark-version .rendimiento-item-total .col-3,
body.dark-version .rendimiento-item-total .col-1 span,
body.dark-version .rendimiento-item-total .col-2 span {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Barra de filtro de fechas en modales */
body.dark-version #rendimientoFiltroBar,
body.dark-version #normativaFiltroBar {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
body.dark-version #rendimientoFiltroBar span,
body.dark-version #normativaFiltroBar span {
    color: rgba(255, 255, 255, 0.7) !important;
}
body.dark-version #rendimientoFiltroBar .btn-outline-primary,
body.dark-version #normativaFiltroBar .btn-outline-primary {
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}
body.dark-version #rendimientoFiltroBar .btn-outline-secondary,
body.dark-version #normativaFiltroBar .btn-outline-secondary {
    color: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}
body.dark-version #rendimientoFiltroBar .btn-outline-secondary:hover,
body.dark-version #normativaFiltroBar .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}
body.dark-version #rendimientoFiltroBar input[type="date"],
body.dark-version #normativaFiltroBar input[type="date"] {
    background: #334155 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #e2e8f0 !important;
}
body.dark-version #rendimientoFiltroBar .btn-outline-danger,
body.dark-version #normativaFiltroBar .btn-outline-danger {
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
}

/* Mensaje no hay datos */
body.dark-version #modalRendimientoLista .text-muted,
body.dark-version #modalNormativasLista .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Alertas Inteligentes en alumno_detalle.php */
body.dark-version .alertas-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .alertas-card h5 {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .alert-item-smart {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .alert-item-smart:hover,
body.dark-version .alert-item-smart[style*="background:#f8fafc"] {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Título de alerta (Normativa crítica, etc) */
body.dark-version .alert-item-smart div[style*="color:#0f172a"],
body.dark-version .alert-item-smart div div:first-child {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Mensaje de alerta (M7 - TRAFICO...) */
body.dark-version .alert-item-smart div[style*="color:#64748b"],
body.dark-version .alert-item-smart div div:last-child {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Icono chevron derecho */
body.dark-version .alert-item-smart i.bi-chevron-right {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Sin alertas detectadas */
body.dark-version .alertas-card div[style*="text-align:center"] p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Modal Explicación Alerta - dark mode */
body.dark-version #modalExplicacionAlerta > div {
    background: #202940 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.dark-version #modalExplicacionAlerta #modalAlertaHeader {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version #modalExplicacionAlerta #modalAlertaTitulo {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #modalExplicacionAlerta #modalAlertaMensaje {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #modalExplicacionAlerta #modalAlertaExplicacion {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-version #modalExplicacionAlerta button[onclick="cerrarModalAlerta()"] {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-version #modalExplicacionAlerta div[style*="border-top:1px solid #e2e8f0"] {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Iconos de ordenamiento */
body.dark-version .tabla-rendimiento-header i.bi-chevron-expand,
body.dark-version .tabla-rendimiento-header i.bi-chevron-up,
body.dark-version .tabla-rendimiento-header i.bi-chevron-down {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================
   VER_TEST.PHP - Modo Oscuro
   ============================================ */

/* Fondo principal de la fila de preguntas */
body.dark-version .fondo_pregunta {
    background: #202940 !important;
    border-radius: 10px !important;
    padding: 20px 0 !important;
}

/* Contenedor de la pregunta cargada */
body.dark-version #phpextget,
body.dark-version .recargar {
    background: #202940 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Título RESULTADOS PREGUNTAS */
body.dark-version .fondo_pregunta h3 {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Botones de navegación de preguntas (1, 2, 3...) */
body.dark-version .fondo_pregunta button[class^="claseb"] {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* El contenedor general del examen */
body.dark-version .ver_test .container-fluid,
body.dark-version .ver_test .row.fondo_pregunta {
    background: #202940 !important;
}

/* Título RESULTADOS EXAMEN */
body.dark-version .ver_test h1 {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ============================================
   MODAL REPORTAR ERROR - Modo Oscuro
   (cargar_pregunta.php - reportModalCP)
   ============================================ */

/* Fondo del modal overlay */
body.dark-version #reportModalCP {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Contenedor principal del modal */
body.dark-version #reportModalCP > div {
    background: #202940 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* Header del modal (mantener gradiente rojo) */
body.dark-version #reportModalCP > div > div:first-child {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    border-bottom: none !important;
}

/* Botón cerrar (X) en header */
body.dark-version #reportModalCP > div > div:first-child button {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

body.dark-version #reportModalCP > div > div:first-child button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Body del modal */
body.dark-version #reportModalCP > div > div:last-child {
    background: #202940 !important;
}

/* Texto descriptivo "Ayúdanos a mejorar..." */
body.dark-version #reportModalCP p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Labels (Tipo de error, Descripción) */
body.dark-version #reportModalCP label {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Select de tipo de error */
body.dark-version #reportTypeCP {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #reportTypeCP option {
    background: #2d3a55 !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Textarea de descripción */
body.dark-version #reportMsgCP {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #reportMsgCP::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Botón Cancelar */
body.dark-version #reportModalCP button[onclick="closeReportModalCP()"] {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-version #reportModalCP button[onclick="closeReportModalCP()"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
}

/* ============================================
   VER_RESPUESTAS_ACADEMIA.PHP - Modo Oscuro
   ============================================ */

/* Fondo body - más específico para sobreescribir inline styles */
body.dark-version[class] .ver-respuestas,
body.dark-version main[class*="bg-gray-200"] {
    background: #1a2340 !important;
}

/* Page Header - más específico */
body.dark-version div.page-header,
body.dark-version .page-header {
    background: linear-gradient(135deg, #144684 0%, #1e5a9e 100%) !important;
}

body.dark-version .page-header h4,
body.dark-version .page-header h4[class] {
    color: white !important;
}

body.dark-version .page-header .subtitle,
body.dark-version .page-header p.subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Botón volver */
body.dark-version a.btn-back,
body.dark-version .btn-back {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-version .btn-back:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Progress bar card */
body.dark-version .progress-card,
body.dark-version div.progress-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .progress,
body.dark-version div.progress {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Stats cards (Precisión, Tiempo, Puntuación) */
body.dark-version .stats-card,
body.dark-version div.stats-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .stats-card .label,
body.dark-version .stats-card div.label {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .stats-card .value,
body.dark-version .stats-card div.value {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Icons en stats cards */
body.dark-version .stats-card .icon.success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
}

body.dark-version .stats-card .icon.danger {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

body.dark-version .stats-card .icon.warning {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
}

/* Question Card - selector muy específico para sobrescribir inline */
body.dark-version div.question-card,
body.dark-version .question-card,
body.dark-version .container div.question-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Question status */
body.dark-version .question-status.correct,
body.dark-version div.question-status.correct {
    color: #10b981 !important;
}

body.dark-version .question-status.incorrect,
body.dark-version div.question-status.incorrect {
    color: #ef4444 !important;
}

body.dark-version .question-status.blank,
body.dark-version div.question-status.blank {
    color: #f59e0b !important;
}

/* Time badge */
body.dark-version .time-badge,
body.dark-version span.time-badge {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Question title */
body.dark-version .question-title,
body.dark-version div.question-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .question-number,
body.dark-version span.question-number {
    color: #3b82f6 !important;
}

/* Answer options - muy específico */
body.dark-version div.answer-option,
body.dark-version .answer-option {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-version .answer-option.correct,
body.dark-version div.answer-option.correct {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
}

body.dark-version .answer-option.incorrect,
body.dark-version div.answer-option.incorrect {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
}

body.dark-version .answer-option .option-letter,
body.dark-version .answer-option div.option-letter {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .answer-option.correct .option-letter {
    background: #10b981 !important;
    color: white !important;
}

body.dark-version .answer-option.incorrect .option-letter {
    background: #ef4444 !important;
    color: white !important;
}

body.dark-version .answer-option .option-text,
body.dark-version .answer-option div.option-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Justification Toggle */
body.dark-version .justification-toggle,
body.dark-version div.justification-toggle {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .justification-toggle:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .justification-toggle .toggle-label,
body.dark-version .justification-toggle div.toggle-label {
    color: #60a5fa !important;
}

body.dark-version .justification-toggle .toggle-icon,
body.dark-version .justification-toggle i.toggle-icon {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Justification Content */
body.dark-version .justification-content,
body.dark-version div.justification-content {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .justification-content .justification-text,
body.dark-version .justification-content div.justification-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   RANKING_ACADEMIA.PHP - Modo Oscuro
   (Estadísticas del Reto)
   ============================================ */

/* Body background */
body.dark-version .ranking-academia,
body.dark-version main[style*="background: #f8f9fa"] {
    background: #1a2340 !important;
}

/* Page Header */
body.dark-version .page-header {
    background: linear-gradient(135deg, #144684 0%, #1e5a9e 100%) !important;
}

body.dark-version .page-header h4 {
    color: white !important;
}

body.dark-version .page-header .subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .btn-back {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Stat Cards */
body.dark-version .stat-card {
    background: #202940 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .stat-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .stat-value {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Tabs */
body.dark-version .nav-tabs-custom {
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .nav-tabs-custom .nav-link {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .nav-tabs-custom .nav-link:hover {
    color: #3b82f6 !important;
}

body.dark-version .nav-tabs-custom .nav-link.active {
    color: #3b82f6 !important;
    border-bottom-color: #3b82f6 !important;
}

/* Table Card */
body.dark-version .table-card {
    background: #202940 !important;
}

body.dark-version .table thead {
    background: linear-gradient(135deg, #144684 0%, #1e5a9e 100%) !important;
}

body.dark-version .table tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-version .table tbody td {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Position badges */
body.dark-version .primer-puesto { background-color: rgba(254, 243, 199, 0.2) !important; color: #fbbf24 !important; }
body.dark-version .segundo-puesto { background-color: rgba(224, 231, 255, 0.2) !important; color: #93c5fd !important; }
body.dark-version .tercer-puesto { background-color: rgba(254, 215, 170, 0.2) !important; color: #fb923c !important; }
body.dark-version .otros-puestos { background-color: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.7) !important; }

body.dark-version .numero-posicion {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== WAYGROUND GRID ===== */
body.dark-version .wg-card {
    background: #202940 !important;
}

body.dark-version .wg-toolbar {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-version .wg-toolbar label {
    color: rgba(255, 255, 255, 0.85) !important;
}
body.dark-version .wg-toolbar .form-select {
    background-color: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}
body.dark-version .wg-toolbar .form-select option {
    background: #2d3a55 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Modal usuarios acertaron/fallaron */
body.dark-version .usuarios-modal-content {
    background-color: #1e293b !important;
}
body.dark-version .usuarios-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-version .usuarios-modal-header h5 {
    color: #e2e8f0 !important;
}
body.dark-version .usuarios-modal-close {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}
body.dark-version .usuario-item {
    background-color: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}
body.dark-version .usuario-item:hover {
    background-color: #334155 !important;
}

body.dark-version .wg-table thead th {
    background: #1a2340 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

/* Sticky columns dark */
body.dark-version .wg-table th:nth-child(1),
body.dark-version .wg-table th:nth-child(2),
body.dark-version .wg-table td:nth-child(1),
body.dark-version .wg-table td:nth-child(2) {
    background: #202940 !important;
}

body.dark-version .wg-table thead th:nth-child(1),
body.dark-version .wg-table thead th:nth-child(2) {
    background: #1a2340 !important;
}

body.dark-version .wg-q-label {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body.dark-version .wg-table tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .wg-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-version .wg-name {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .wg-email {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .wg-pts {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .wg-pts small {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Cell colors - mantener colores pero ajustar para dark */
body.dark-version .wg-none {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ===== PARTICIPANTES LIST ===== */
body.dark-version .part-item {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .part-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-version .part-avatar {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-version .part-name {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .part-points-label,
body.dark-version .part-score-label {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .part-points-value,
body.dark-version .part-score-value {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .part-points-value small {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .part-btn-menu {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .part-btn-menu:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Custom Dropdown */
body.dark-version .custom-dropdown-menu {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

body.dark-version .custom-dropdown-item {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .custom-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

body.dark-version .custom-dropdown-divider {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* ===== QUESTION MODAL ===== */
body.dark-version .question-modal {
    background: #202940 !important;
}

body.dark-version .question-modal-header {
    background: linear-gradient(135deg, #144684 0%, #1e5a9e 100%) !important;
}

body.dark-version .question-modal-body {
    background: #202940 !important;
}

body.dark-version .question-enunciado {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .question-answer-item {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: #2d3a55 !important;
}

body.dark-version .question-answer-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .question-answer-label {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Respuesta correcta destacada */
body.dark-version .question-answer-item.correct {
    background: rgba(16, 185, 129, 0.18) !important;
    border-color: #10b981 !important;
}
body.dark-version .question-answer-item.correct .question-answer-label {
    background: #10b981 !important;
    color: #fff !important;
}
body.dark-version .question-answer-item.correct .question-answer-text {
    color: #6ee7b7 !important;
    font-weight: 600 !important;
}

body.dark-version .question-justificacion {
    background: rgba(251, 191, 36, 0.15) !important;
    border-left-color: #f59e0b !important;
}

body.dark-version .question-justificacion strong {
    color: #fbbf24 !important;
}

body.dark-version .question-justificacion .justif-content {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .question-justificacion .justif-content h3,
body.dark-version .question-justificacion .justif-content h4,
body.dark-version .question-justificacion .justif-content h5,
body.dark-version .question-justificacion .justif-content strong {
    color: #fbbf24 !important;
}

body.dark-version .question-loading {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================
   RETOS_ACADEMIA.PHP - Modo Oscuro
   ============================================ */

/* Modal Crear Reto (modalTipoReto) */
body.dark-version #modalTipoReto .modal-content {
    background: #202940 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.dark-version #modalTipoReto .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version #modalTipoReto .modal-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #modalTipoReto .modal-header p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Cards de opciones (Por Módulos, Por Temas, Por Normativa) */
body.dark-version #modalTipoReto a[style*="background: #fff"] {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-version #modalTipoReto a[style*="background: #fff"]:hover {
    background: #364668 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Títulos de las opciones */
body.dark-version #modalTipoReto a div[style*="color: #0f172a"] {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Descripciones de las opciones */
body.dark-version #modalTipoReto a div[style*="color: #64748b"] {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Modal eliminar reto (deleteRetoModal) */
body.dark-version #deleteRetoModal.delete-modal-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

body.dark-version #deleteRetoModal .delete-modal {
    background: #202940 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.dark-version #deleteRetoModal .delete-modal h5 {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #deleteRetoModal .delete-modal p {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version #deleteRetoModal .delete-btn-cancel {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Action buttons en tabla de retos */
body.dark-version .btn-action.primary {
    background: #3b82f6 !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-version .btn-action.primary:hover {
    background: #60a5fa !important;
}

body.dark-version .btn-action.secondary {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

body.dark-version .btn-action.secondary:hover {
    background: rgba(59, 130, 246, 0.3) !important;
}

body.dark-version .btn-action.warning {
    background: #fbbf24 !important;
    color: #1f2937 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-version .btn-action.warning:hover {
    background: #fcd34d !important;
}

body.dark-version .btn-action.danger {
    background: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-version .btn-action.danger:hover {
    background: #f87171 !important;
}

/* ============================================
   MODAL CAMBIAR DE GRUPO - Modo Oscuro
   (grupo_detalle.php - modalCambiarGrupo)
   ============================================ */

/* Fondo del modal */
body.dark-version #modalCambiarGrupo .modal-content {
    background: #202940 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Alert info box (usuario seleccionado) */
body.dark-version #modalCambiarGrupo .alert.alert-info {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version #modalCambiarGrupo .alert.alert-info small.text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version #modalCambiarGrupo .alert.alert-info strong {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #modalCambiarGrupo .alert.alert-info i.bi-person-circle {
    color: #3b82f6 !important;
}

/* Label */
body.dark-version #modalCambiarGrupo .form-label {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Select de grupo */
body.dark-version #modalCambiarGrupo .form-select {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #modalCambiarGrupo .form-select option {
    background: #2d3a55 !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Texto info debajo del select */
body.dark-version #modalCambiarGrupo small.text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Footer */
body.dark-version #modalCambiarGrupo .modal-footer {
    background: #1a2340 !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version #modalCambiarGrupo .modal-footer .btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   MODAL EDITAR GRUPO - Modo Oscuro
   (grupos_academia.php - editarGrupoModal)
   ============================================ */

/* Fondo del modal */
body.dark-version #editarGrupoModal .qp-modal-content {
    background: #202940 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Labels del formulario */
body.dark-version #editarGrupoModal .form-label {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Inputs de texto */
body.dark-version #editarGrupoModal .form-control {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Selects (Modalidad, Nivel) */
body.dark-version #editarGrupoModal .form-select {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #editarGrupoModal .form-select option {
    background: #2d3a55 !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Caja de estado del grupo */
body.dark-version #editarGrupoModal div[style*="background: #f9fafb"] {
    background: #1a2340 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Switch de grupo activo */
body.dark-version #editarGrupoModal .form-check-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version #editarGrupoModal #edit_estado_texto {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Footer del modal */
body.dark-version #editarGrupoModal .modal-footer {
    background: #1a2340 !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version #editarGrupoModal .modal-footer button[data-bs-dismiss="modal"] {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   MODAL CREAR NUEVO GRUPO - Modo Oscuro
   (grupos_academia.php - nuevoGrupoModal)
   ============================================ */

/* Fondo del modal */
body.dark-version #nuevoGrupoModal .qp-modal-content {
    background: #202940 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Header del modal */
body.dark-version #nuevoGrupoModal .qp-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version #nuevoGrupoModal .qp-modal-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #nuevoGrupoModal .qp-modal-subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Labels del formulario */
body.dark-version #nuevoGrupoModal .form-label {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Inputs de texto */
body.dark-version #nuevoGrupoModal .form-control {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #nuevoGrupoModal .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Selects (Modalidad, Nivel) */
body.dark-version #nuevoGrupoModal .form-select {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version #nuevoGrupoModal .form-select option {
    background: #2d3a55 !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Footer del modal */
body.dark-version #nuevoGrupoModal .qp-modal-footer {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   FEEDBACK MODAL - Modo Oscuro
   (alumno_detalle.php y miacademia.php)
   ============================================ */

/* Contenedor principal del modal */
body.dark-version .feedback-modal-content {
    background: #202940 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* Header del modal */
body.dark-version .feedback-modal-header {
    background: #202940 !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .feedback-modal-header h3 {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Botón cerrar (X) */
body.dark-version .feedback-modal-close {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-version .feedback-modal-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Tabs de Nuevo Mensaje / Historial */
body.dark-version .feedback-tabs {
    background: #1a1f2e !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .feedback-tab {
    color: rgba(255, 255, 255, 0.6) !important;
    background: transparent !important;
    border-bottom-color: transparent !important;
}

body.dark-version .feedback-tab.active {
    color: #e91e63 !important;
    border-bottom-color: #e91e63 !important;
    background: rgba(233, 30, 99, 0.1) !important;
}

body.dark-version .feedback-tab:hover {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Contenido de los tabs */
body.dark-version .feedback-tab-content {
    background: #202940 !important;
}

/* Formulario y labels */
body.dark-version .feedback-form-group label {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-version .feedback-form-group .char-count {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Textarea en feedback */
body.dark-version .feedback-modal textarea.form-control {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .feedback-modal textarea.form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.dark-version .feedback-modal textarea.form-control:focus {
    border-color: #e91e63 !important;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.2) !important;
}

/* Botón Cancelar */
body.dark-version .feedback-btn-cancel {
    background: #2d3a55 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .feedback-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Botón Enviar (rosa/magenta) - mantener color pero ajustar si es necesario */
body.dark-version .feedback-btn-submit {
    background: #e91e63 !important;
    color: #fff !important;
    border-color: #e91e63 !important;
}

body.dark-version .feedback-btn-submit:hover {
    background: #c2185b !important;
    border-color: #c2185b !important;
}

/* Historial de mensajes */
body.dark-version .feedback-historial-empty {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.dark-version .feedback-historial-item {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .feedback-historial-item .feedback-date {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-version .feedback-historial-item .feedback-message {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-version .feedback-loading {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================================
   SIDEBAR TOGGLE BUTTON
   ============================================================ */

/* Ocultar scrollbar visible del sidebar */
#sidenav-main,
body.dark-version #sidenav-main {
    scrollbar-width: none !important;
    overflow-y: auto;
}
#sidenav-main::-webkit-scrollbar,
body.dark-version #sidenav-main::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Ocultar completamente PerfectScrollbar en .main-content */
.main-content > .ps__rail-y,
.main-content > .ps__rail-x,
.main-content.ps > .ps__rail-y,
.main-content.ps > .ps__rail-x,
.main-content.ps--active-y > .ps__rail-y,
.main-content.ps--active-x > .ps__rail-x,
.main-content:hover > .ps__rail-y,
.main-content:hover > .ps__rail-x {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   ESTÁNDAR DE CONFIGURADORES — Las reglas autoritativas están
   ahora en css/configurador-comun.css. Se mantienen aquí solo
   como compatibilidad temporal para páginas no migradas.
   ============================================================ */

.sidebar-toggle-wrapper {
    display: flex;
    justify-content: center;
    padding: 6px 0;
}

.sidebar-toggle-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.2s;
    padding: 0;
}

.sidebar-toggle-btn .material-icons {
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

.sidebar-toggle-btn:hover {
    background: rgba(255,255,255,0.28);
}

/* ============================================================
   SIDEBAR COLAPSADO
   ============================================================ */

@media (min-width: 1200px) {

    /* Sidebar reducido a ancho de solo iconos */
    body.sidebar-collapsed #sidenav-main {
        width: 5rem !important;
        min-width: 0 !important;
        max-width: 5rem !important;
        overflow: visible !important;
        transition: width 0.3s ease !important;
    }

    /* Ocultar textos (tooltips gestionados por JS) */
    body.sidebar-collapsed #sidenav-main .nav-link-text {
        display: none !important;
    }

    /* Centrar los iconos del menú */
    body.sidebar-collapsed #sidenav-main .nav-link {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ocultar submenús */
    body.sidebar-collapsed #sidenav-main .collapse.show,
    body.sidebar-collapsed #sidenav-main .collapsing {
        display: none !important;
    }

    /* Ocultar flecha de submenú */
    body.sidebar-collapsed #sidenav-main .nav-link[data-bs-toggle="collapse"]::after {
        display: none !important;
    }

    /* Ocultar footer */
    body.sidebar-collapsed #sidenav-main .sidebar-footer-text {
        display: none !important;
    }

    /* Bajar el botón toggle cuando el sidebar está colapsado (header pasa de 16rem a 4rem) */
    body.sidebar-collapsed #sidenav-main .sidebar-toggle-btn {
        top: calc(4rem + 8px) !important;
    }

    /* Reducir altura del header colapsado (framework usa 16rem) */
    body.sidebar-collapsed #sidenav-main .sidenav-header {
        height: 4rem !important;
        min-height: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Centrar y reducir navbar-brand */
    body.sidebar-collapsed #sidenav-main .navbar-brand {
        justify-content: center !important;
        padding: 4px 0 !important;
        margin: 0 auto !important;
    }

    /* Logo original reducido cuando colapsado */
    body.sidebar-collapsed #sidenav-main .sidebar-logo-full {
        width: 40px !important;
        height: 40px !important;
        object-fit: contain !important;
        object-position: center top !important;
    }

    /* Reducir separador hr */
    body.sidebar-collapsed #sidenav-main hr.horizontal {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }

    /* Botón toggle también centrado cuando colapsado */
    body.sidebar-collapsed #sidenav-main .sidebar-toggle-wrapper {
        padding: 4px 0 !important;
    }
}

/* ============================================================
   TABLET / MÓVIL - Sidebar oculto, contenido a ancho completo
   ============================================================ */

@media (max-width: 1199px) {
    /* El sidebar está oculto en tablet/móvil: eliminar cualquier margen izquierdo */
    .main-content {
        margin-left: 0 !important;
    }

    /* El sidebar no ocupa espacio en el flujo */
    #sidenav-main {
        position: fixed !important;
        z-index: 9999;
    }

    /* Fondo oscuro del sidebar en dark mode en tablet/móvil */
    body.dark-version #sidenav-main,
    body.dark-version .sidenav,
    body.dark-version aside.sidenav {
        background: #1f283e !important;
        background-image: linear-gradient(195deg, #323a54, #1a2035) !important;
    }

    /* Textos e iconos siempre blancos en sidebar dark mode */
    body.dark-version #sidenav-main .nav-link,
    body.dark-version #sidenav-main .nav-link i,
    body.dark-version #sidenav-main .nav-link-text,
    body.dark-version #sidenav-main .material-icons {
        color: rgba(255, 255, 255, 0.8) !important;
    }
}

/* ============================================================
   USUARIOS_GESTION.PHP - Modo Oscuro
   ============================================================ */

/* Fondo general de la página */
body.dark-version .main-content,
body.dark-version body {
    background: #1a2035 !important;
}

/* Tarjeta de filtros */
body.dark-version .filters-card {
    background: #202940 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}

body.dark-version .filters-title {
    color: rgba(255,255,255,0.9) !important;
}

body.dark-version .form-group label {
    color: rgba(255,255,255,0.7) !important;
}

body.dark-version .form-group input,
body.dark-version .form-group select {
    background: #2d3a55 !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.9) !important;
}

body.dark-version .form-group input::placeholder {
    color: rgba(255,255,255,0.4) !important;
}

body.dark-version .form-group input:focus,
body.dark-version .form-group select:focus {
    background: #35435f !important;
    border-color: #00B8E6 !important;
}

body.dark-version .form-group select option {
    background: #202940 !important;
    color: rgba(255,255,255,0.9) !important;
}

body.dark-version .filter-actions {
    border-top-color: rgba(255,255,255,0.1) !important;
}

/* Botón toggle de filtros */
body.dark-version .btn-filter-toggle {
    background: #2d3a55 !important;
    border-color: #00B8E6 !important;
    color: #00B8E6 !important;
}

body.dark-version .btn-filter-toggle:hover,
body.dark-version .btn-filter-toggle.active {
    background: #00B8E6 !important;
    color: #fff !important;
}

/* Botón limpiar filtros */
body.dark-version .btn-clean {
    background: #2d3a55 !important;
    border-color: #00B8E6 !important;
    color: #00B8E6 !important;
}

body.dark-version .btn-clean:hover {
    background: #00B8E6 !important;
    color: #fff !important;
}

/* Tarjeta de tabla */
body.dark-version .table-card {
    background: #202940 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}

body.dark-version .table-card .table thead {
    background: #2d3a55 !important;
}

body.dark-version .table-card .table th {
    color: rgba(255,255,255,0.8) !important;
    border-bottom-color: rgba(255,255,255,0.1) !important;
}

body.dark-version .table-card .table td {
    color: rgba(255,255,255,0.85) !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

body.dark-version .table-card .table tbody tr:hover {
    background: rgba(255,255,255,0.07) !important;
}

body.dark-version .table-card .table tbody tr:hover td {
    background: transparent !important;
}

/* Paginación */
body.dark-version .paginacion a {
    background: #202940 !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.8) !important;
}

body.dark-version .paginacion a:hover {
    background: #00B8E6 !important;
    border-color: #00B8E6 !important;
    color: #fff !important;
}

body.dark-version .paginacion a.pagina-actual {
    background: linear-gradient(310deg, #00B8E6 0%, #00D4FF 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}

body.dark-version .paginacion .dots {
    color: rgba(255,255,255,0.4) !important;
}

/* Texto muted en la tabla */
body.dark-version .table-card .badge-na {
    color: rgba(255,255,255,0.4) !important;
}

/* ============================================
   MODAL EDITAR PERFIL - Modo Oscuro
   ============================================ */
body.dark-version #modalEditarPerfil > div {
    background: #1e293b !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
body.dark-version #modalEditarPerfil h3 {
    color: #e2e8f0 !important;
}
body.dark-version #modalEditarPerfil label {
    color: #cbd5e1 !important;
}
body.dark-version #modalEditarPerfil input[type="text"],
body.dark-version #modalEditarPerfil input[type="tel"],
body.dark-version #modalEditarPerfil input[type="password"] {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
body.dark-version #modalEditarPerfil input:disabled {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}
body.dark-version #modalEditarPerfil input::placeholder {
    color: #64748b !important;
}
body.dark-version #modalEditarPerfil > div > div:first-child {
    border-bottom-color: #334155 !important;
}
body.dark-version #modalEditarPerfil > div > div:last-child {
    background: #1a2332 !important;
    border-top-color: #334155 !important;
}
body.dark-version #modalEditarPerfil #previewFotoPerfil {
    border-color: #475569 !important;
    background: #334155 !important;
}
body.dark-version #modalEditarPerfil #previewFotoPerfil span {
    color: #94a3b8 !important;
}
body.dark-version #modalEditarPerfil #fotosPredeterminadas {
    color: #94a3b8 !important;
}
body.dark-version #modalEditarPerfil #fotosPredeterminadas > div:last-child > div {
    border-color: #475569 !important;
}
body.dark-version #modalEditarPerfil .btn-outline-primary {
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}
body.dark-version #modalEditarPerfil .btn-outline-secondary {
    color: #94a3b8 !important;
    border-color: #64748b !important;
}

/* ============================================
   SOLICITAR ACADEMIA - Modo Oscuro
   ============================================ */
body.dark-version .form-card {
    background: #1e293b !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
body.dark-version .form-card h2 {
    color: #e2e8f0 !important;
}
body.dark-version .form-card label {
    color: #cbd5e1 !important;
}
body.dark-version .form-card input,
body.dark-version .form-card select,
body.dark-version .form-card textarea {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
body.dark-version .info-box {
    background: #1e293b !important;
    border-left-color: #60a5fa !important;
    border-top-color: #334155 !important;
    border-right-color: #334155 !important;
    border-bottom-color: #334155 !important;
}
body.dark-version .info-box h3 {
    color: #e2e8f0 !important;
}
body.dark-version .info-box p {
    color: #94a3b8 !important;
}
body.dark-version .form-label {
    color: #cbd5e1 !important;
}
body.dark-version .form-text {
    color: #94a3b8 !important;
}
/* Select2 dark mode */
body.dark-version .select2-container--default .select2-selection--single {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
body.dark-version .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e2e8f0 !important;
}
body.dark-version .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8 !important;
}
body.dark-version .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #e2e8f0 transparent transparent transparent !important;
}
body.dark-version .select2-dropdown {
    background: #1e293b !important;
    border-color: #475569 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
body.dark-version .select2-container--default .select2-results__option {
    color: #fff !important;
}
body.dark-version .select2-container--default .select2-results__option .select2-result-academia__title {
    color: #fff !important;
}
body.dark-version .select2-container--default .select2-results__option .select2-result-academia__description {
    color: #cbd5e1 !important;
}
body.dark-version .select2-container--default .select2-results__option[aria-selected="true"] {
    background: #2563eb !important;
}
body.dark-version .select2-container--default .select2-results__option[aria-selected="true"] .select2-result-academia__title,
body.dark-version .select2-container--default .select2-results__option[aria-selected="true"] .select2-result-academia__description {
    color: #fff !important;
}
body.dark-version .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #144684 !important;
}
body.dark-version .select2-container--default .select2-search--dropdown .select2-search__field {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
body.dark-version .status-card {
    background: #1e293b !important;
    border-color: #475569 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
body.dark-version .status-card.aprobada {
    border-color: #10b981 !important;
    background: linear-gradient(135deg, #1e293b 0%, #0f2922 100%) !important;
}
body.dark-version .status-card.rechazada {
    border-color: #ef4444 !important;
    background: linear-gradient(135deg, #1e293b 0%, #2a1215 100%) !important;
}
body.dark-version .status-card.pendiente {
    border-color: #f59e0b !important;
    background: linear-gradient(135deg, #1e293b 0%, #2a2210 100%) !important;
}
body.dark-version .status-title,
body.dark-version .status-header h2 {
    color: #e2e8f0 !important;
}
body.dark-version .status-detail-label {
    color: #94a3b8 !important;
}
body.dark-version .status-detail-value {
    color: #e2e8f0 !important;
}
body.dark-version .status-detail-item i {
    color: #64748b !important;
}
body.dark-version .motivo-rechazo {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}
body.dark-version .motivo-rechazo-label {
    color: #fca5a5 !important;
}
body.dark-version .motivo-rechazo-text {
    color: #e2e8f0 !important;
}
body.dark-version .status-card .alert.alert-success {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}
body.dark-version .status-card .alert.alert-success strong {
    color: #34d399 !important;
}
body.dark-version .status-card .alert.alert-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}
body.dark-version .status-card .alert.alert-warning strong {
    color: #fbbf24 !important;
}
body.dark-version .status-badge.aprobada {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}
body.dark-version .status-badge.rechazada {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}
body.dark-version .status-badge.pendiente {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

/* ============================================
   FINALIZAR EXAMEN - Modo Oscuro
   ============================================ */
/* question-nav: título siempre alineado a la izquierda (evita text-align:justify del tema) */
.question-nav h3 {
    text-align: left !important;
}
body.dark-version .question-nav {
    background: #1e293b !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important;
}
body.dark-version .question-nav-title {
    color: #e2e8f0 !important;
}
body.dark-version #phpextget.recargar {
    background: #1e293b !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important;
    color: #e2e8f0 !important;
}

/* ============================================
   MODAL MODERNO DE REPORTES - Modo Oscuro
   ============================================ */
body.dark-version .modern-modal-content {
    background: #1e293b !important;
}
body.dark-version .modern-modal-header {
    background: #1e293b !important;
    border-bottom-color: rgba(255,255,255,0.1) !important;
}
body.dark-version .modern-modal-body {
    background: #1e293b !important;
}
body.dark-version .modern-modal-body label {
    color: #cbd5e1 !important;
}
body.dark-version .modern-modal-body .modern-select,
body.dark-version .modern-modal-body .modern-textarea,
body.dark-version .modern-modal-body .form-control {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
body.dark-version .modern-modal-body .modern-select option {
    background: #334155 !important;
    color: #e2e8f0 !important;
}
body.dark-version .modern-modal-footer {
    background: #1e293b !important;
}
body.dark-version .modern-modal-footer .btn-cancel {
    background: #334155 !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}
body.dark-version .modern-modal-close {
    color: #94a3b8 !important;
}

/* ============================================
   MODAL NO-BACK (Advertencia salir examen)
   ============================================ */
body.dark-version #qpNoBackOverlay .qp-nb-modal {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.1) !important;
}
body.dark-version #qpNoBackOverlay .qp-nb-body {
    background: #1e293b !important;
}
body.dark-version #qpNoBackOverlay .qp-nb-msg {
    color: #cbd5e1 !important;
}
body.dark-version #qpNoBackOverlay .qp-nb-footer {
    background: #1e293b !important;
}
body.dark-version #qpNoBackOverlay .qp-nb-ok {
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%) !important;
    color: #1e293b !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.3) !important;
}

/* ============================================
   MODAL ELIMINAR ALUMNO - Modo Oscuro
   ============================================ */
body.dark-version #modalEliminarAlumno .modal-content {
    background: #1e293b !important;
}
body.dark-version #modalEliminarAlumno .modal-body {
    background: #1e293b !important;
}
body.dark-version #modalEliminarAlumno .modal-body h6 {
    color: #e2e8f0 !important;
}
body.dark-version #modalEliminarAlumno .modal-body p {
    color: #cbd5e1 !important;
}
body.dark-version #modalEliminarAlumno #modalEliminarNombre {
    color: #60a5fa !important;
}
body.dark-version #modalEliminarAlumno .modal-body > div:last-of-type > div[style*="background: #fef3c7"],
body.dark-version #modalEliminarAlumno .modal-body div[style*="fef3c7"] {
    background: rgba(245, 158, 11, 0.15) !important;
    border-left-color: #f59e0b !important;
}
body.dark-version #modalEliminarAlumno .modal-body div[style*="fef3c7"] p {
    color: #fcd34d !important;
}
body.dark-version #modalEliminarAlumno .modal-footer {
    background: #1e293b !important;
}

/* ============================================
   GESTIONAR PREGUNTAS RETO - Modo Oscuro
   ============================================ */
/* Alerta personalizada */
body.dark-version .custom-alert-box {
    background: #1e293b !important;
}
body.dark-version .custom-alert-header {
    border-bottom-color: rgba(255,255,255,0.1) !important;
}
body.dark-version .custom-alert-title {
    color: #e2e8f0 !important;
}
body.dark-version .custom-alert-body {
    color: #cbd5e1 !important;
}
body.dark-version .custom-alert-footer {
    background: #1a2332 !important;
}
body.dark-version .custom-alert-btn-secondary {
    background: #334155 !important;
    color: #cbd5e1 !important;
}

/* Modal de búsqueda de preguntas */
body.dark-version .modal-busqueda-content {
    background: #1e293b !important;
}
body.dark-version .modal-busqueda-header {
    border-bottom-color: rgba(255,255,255,0.1) !important;
}
body.dark-version .modal-busqueda-header h5 {
    color: #e2e8f0 !important;
}
body.dark-version .modal-busqueda-header button {
    color: #94a3b8 !important;
}
body.dark-version .modal-busqueda-body {
    background: #1e293b !important;
}
body.dark-version .filtros-busqueda label {
    color: #cbd5e1 !important;
}
body.dark-version .filtros-busqueda .form-control,
body.dark-version .filtros-busqueda .form-select {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
body.dark-version .filtros-busqueda .form-control::placeholder {
    color: rgba(255,255,255,0.4) !important;
}
body.dark-version .filtros-busqueda .form-select option {
    background: #334155 !important;
    color: #e2e8f0 !important;
}

/* Resultados de búsqueda */
body.dark-version .resultado-item {
    border-color: rgba(255,255,255,0.1) !important;
    background: #2d3a55 !important;
}
body.dark-version .resultado-item:hover {
    border-color: #3b82f6 !important;
    background: #334155 !important;
}
body.dark-version .resultado-titulo {
    color: #e2e8f0 !important;
}
body.dark-version .resultado-categorias {
    color: #94a3b8 !important;
}

/* Detalle de pregunta expandida */
body.dark-version .pregunta-expandida {
    background: #1a2332 !important;
    border-top-color: rgba(255,255,255,0.1) !important;
}
body.dark-version .pregunta-expandida h6 {
    color: #e2e8f0 !important;
}
body.dark-version .respuestas-container {
    border-top-color: rgba(255,255,255,0.1) !important;
    border-bottom-color: rgba(255,255,255,0.1) !important;
}
body.dark-version .respuestas-container h6 {
    color: #94a3b8 !important;
}
body.dark-version .respuesta-item {
    background: #2d3a55 !important;
    border-left-color: #475569 !important;
    color: #e2e8f0 !important;
}
body.dark-version .respuesta-correcta {
    background: rgba(16, 185, 129, 0.15) !important;
    border-left-color: #22c55e !important;
    color: #6ee7b7 !important;
}
body.dark-version .justificacion-container h6 {
    color: #94a3b8 !important;
}
body.dark-version .justificacion-container .content {
    color: #cbd5e1 !important;
}

/* ============================================
   EDITAR EXAMEN COMPETITIVO - Modo Oscuro
   ============================================ */
body.dark-version .celda1 {
    background: #2d3a55 !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.9) !important;
}
body.dark-version select.celda1 option {
    background: #2d3a55 !important;
    color: rgba(255,255,255,0.9) !important;
}
body.dark-version input[type="date"],
body.dark-version input[type="datetime-local"],
body.dark-version input[type="time"] {
    color-scheme: dark !important;
}

/* ============================================
   MODAL CREAR RETO (retos_academia) - Modo Oscuro
   ============================================ */
body.dark-version #modalTipoReto .modal-content {
    background: #1e293b !important;
}
body.dark-version #modalTipoReto .modal-title {
    color: #e2e8f0 !important;
}
body.dark-version #modalTipoReto .modal-header p {
    color: #94a3b8 !important;
}
body.dark-version #modalTipoReto .modal-body a {
    background: #2d3a55 !important;
    border-color: rgba(255,255,255,0.1) !important;
}
body.dark-version #modalTipoReto .modal-body a:hover {
    background: #334155 !important;
    border-color: #fbbf24 !important;
}
body.dark-version #modalTipoReto .modal-body a div[style*="color: #0f172a"] {
    color: #e2e8f0 !important;
}
body.dark-version #modalTipoReto .modal-body a div[style*="color: #64748b"] {
    color: #94a3b8 !important;
}

/* ============================================
   ADMIN SOLICITUDES - Modo Oscuro
   ============================================ */
body.dark-version .solicitud-card {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}
body.dark-version .solicitud-name {
    color: #60a5fa !important;
}
body.dark-version .solicitud-email {
    color: #94a3b8 !important;
}
body.dark-version .solicitud-info-item {
    color: #94a3b8 !important;
}
body.dark-version .solicitud-info-item i {
    color: #60a5fa !important;
}
body.dark-version .solicitud-mensaje {
    background: #2d3a55 !important;
    border-left-color: #3b82f6 !important;
}
body.dark-version .solicitud-mensaje-label {
    color: #cbd5e1 !important;
}
body.dark-version .solicitud-mensaje-text {
    color: #94a3b8 !important;
}
body.dark-version .respuesta-info {
    background: #2d3a55 !important;
}
body.dark-version .respuesta-info-label {
    color: #cbd5e1 !important;
}
body.dark-version .respuesta-info-text {
    color: #94a3b8 !important;
}
body.dark-version .tabs {
    border-bottom-color: rgba(255,255,255,0.1) !important;
}
body.dark-version .tab {
    color: #94a3b8 !important;
}
body.dark-version .tab:hover,
body.dark-version .tab.active {
    color: #60a5fa !important;
}
body.dark-version .tab.active {
    border-bottom-color: #60a5fa !important;
}
body.dark-version .empty-state {
    background: #1e293b !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
    color: #94a3b8 !important;
}
body.dark-version .empty-state h3 {
    color: #e2e8f0 !important;
}
body.dark-version .empty-state p {
    color: #94a3b8 !important;
}
/* Modal rechazo/aprobación */
body.dark-version .modal-container {
    background: #1e293b !important;
}
body.dark-version .modal-header {
    border-bottom-color: rgba(255,255,255,0.1) !important;
}
body.dark-version .modal-header-text h3 {
    color: #e2e8f0 !important;
}
body.dark-version .modal-header-text p {
    color: #94a3b8 !important;
}
body.dark-version .modal-label {
    color: #cbd5e1 !important;
}
body.dark-version .modal-textarea {
    background: #2d3a55 !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #e2e8f0 !important;
}
body.dark-version .modal-textarea:focus {
    border-color: #dc2626 !important;
}
body.dark-version .modal-footer {
    border-top-color: rgba(255,255,255,0.1) !important;
}
body.dark-version .modal-btn-cancel {
    background: #334155 !important;
    color: #cbd5e1 !important;
}

/* ============================================
   PLANTILLAS CONFIGURADOR - Modo Oscuro
   ============================================ */
body.dark-version .dropdown-menu {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
body.dark-version .dropdown-item {
    color: #e2e8f0 !important;
}
body.dark-version .dropdown-item:hover,
body.dark-version .dropdown-item:focus {
    background: #334155 !important;
    color: #fff !important;
}
body.dark-version .dropdown-item.text-muted {
    color: #64748b !important;
}
body.dark-version .btn-outline-secondary {
    border-color: rgba(255,255,255,0.3) !important;
    color: #cbd5e1 !important;
}
body.dark-version .btn-outline-secondary:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}
body.dark-version .btn-outline-info {
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
}
body.dark-version .btn-outline-info:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #7dd3fc !important;
}

/* ============================================
   REVISAR / RESULTADOS - Justificación modo oscuro
   ============================================ */
body.dark-version .justificacion-content {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155;
}
body.dark-version .justificacion-content *:not(strong):not(b):not(em):not(i):not(mark):not(a) {
    color: #e2e8f0 !important;
}
body.dark-version .justificacion-content strong,
body.dark-version .justificacion-content b {
    color: #f1f5f9 !important;
}
body.dark-version .justificacion-content a {
    color: #60a5fa !important;
}
body.dark-version #consola2 {
    color: #e2e8f0 !important;
}
body.dark-version #consola2 strong {
    color: #f1f5f9 !important;
}

/* ============================================
   DROPDOWN TOGGLE CARET - Modo Oscuro
   ============================================ */

/* El caret nativo de Bootstrap aparece como cuadrado en algunos navegadores.
   Se oculta y se sustituye por un triángulo CSS puro en todos los modos. */
.dropdown-toggle::after {
    display: inline-block !important;
    content: '' !important;
    width: 0 !important;
    height: 0 !important;
    border-top: .35em solid currentColor !important;
    border-right: .35em solid transparent !important;
    border-bottom: 0 !important;
    border-left: .35em solid transparent !important;
    vertical-align: .2em !important;
    margin-left: .35em !important;
    background: transparent !important;
    font-family: inherit !important;
}

/* ============================================
   RADIO BUTTONS Y CHECKBOXES - Modo Oscuro
   ============================================ */

/* accent-color global para radios y checkboxes */
body.dark-version input[type="radio"],
body.dark-version input[type="checkbox"] {
    accent-color: #7eb3f5 !important;
}

/* Checkbox personalizado en dark mode */
body.dark-version input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    border: 2px solid rgba(255,255,255,0.55) !important;
    background: rgba(255,255,255,0.07) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    transition: border-color .15s ease, background .15s ease !important;
    outline: none !important;
    position: relative !important;
}

body.dark-version input[type="checkbox"]:checked {
    border: 2px solid #7eb3f5 !important;
    background: #7eb3f5 !important;
    box-shadow: none !important;
}

body.dark-version input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    width: 6px !important;
    height: 10px !important;
    border: 2px solid #1a2035 !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) !important;
    display: block !important;
}

body.dark-version input[type="checkbox"]:hover {
    border-color: rgba(255,255,255,0.85) !important;
    background: rgba(255,255,255,0.12) !important;
}

/* Radio: apariencia personalizada para mayor visibilidad */
body.dark-version input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,0.55) !important;
    background: rgba(255,255,255,0.07) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
    outline: none !important;
}

/* Radio marcado: círculo interior azul claro brillante */
body.dark-version input[type="radio"]:checked {
    border: 2px solid #7eb3f5 !important;
    background: radial-gradient(circle, #7eb3f5 45%, transparent 46%) !important;
    box-shadow: 0 0 0 1px rgba(126,179,245,0.4) !important;
}

/* Hover */
body.dark-version input[type="radio"]:hover {
    border-color: rgba(255,255,255,0.85) !important;
    background: rgba(255,255,255,0.12) !important;
}

/* Focus ring sutil */
body.dark-version input[type="radio"]:focus,
body.dark-version input[type="checkbox"]:focus {
    outline: 2px solid rgba(126,179,245,0.5) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Label junto al radio: texto blanco */
body.dark-version .exam-radio + label,
body.dark-version input[type="radio"] + label {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Subrayado amarillo / highlight legible en modo oscuro */
body.dark-version mark,
body.dark-version [style*="background-color: yellow"],
body.dark-version [style*="background-color:yellow"],
body.dark-version [style*="background: yellow"],
body.dark-version [style*="background:yellow"] {
    background: rgba(250, 204, 21, 0.2) !important;
    background-color: rgba(250, 204, 21, 0.2) !important;
    color: #fff !important;
}

/* ============================================
   ALUMNO_NOTAS SIDEBAR - Modo Oscuro
   ============================================ */
body.dark-version .info-card {
    background: #1e293b !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
body.dark-version .sidebar-tabs {
    background: #0f172a !important;
    border-bottom-color: #334155 !important;
}
body.dark-version .sidebar-tab {
    color: #94a3b8 !important;
    border-bottom-color: transparent !important;
}
body.dark-version .sidebar-tab:hover {
    color: #e2e8f0 !important;
    background: rgba(255,255,255,0.05) !important;
}
body.dark-version .sidebar-tab.active {
    color: #60a5fa !important;
    border-bottom-color: #60a5fa !important;
    background: #1e293b !important;
}
body.dark-version .perfil-label {
    color: #94a3b8 !important;
}
body.dark-version .perfil-value {
    color: #e2e8f0 !important;
}
body.dark-version .perfil-row {
    border-bottom-color: #334155 !important;
}
body.dark-version .kpi-pill {
    background: #0f172a !important;
}
body.dark-version .kpi-pill .kpi-label {
    color: #94a3b8 !important;
}
body.dark-version .kpi-pill.aciertos  { background: rgba(22,163,74,0.12) !important; }
body.dark-version .kpi-pill.fallos    { background: rgba(220,38,38,0.12) !important; }
body.dark-version .kpi-pill.blancas   { background: #0f172a !important; }
body.dark-version .pregunta-config {
    background: #0f172a !important;
}
body.dark-version .pregunta-config .pregunta-label {
    color: #94a3b8 !important;
}
body.dark-version .pregunta-config .pregunta-val {
    color: #e2e8f0 !important;
}

/* Acordeón cuestionario */
body.dark-version .cuestionario-bloque {
    background: #0f172a !important;
    border-color: #334155 !important;
}
body.dark-version .cuestionario-bloque-header {
    color: #e2e8f0 !important;
}
body.dark-version .cuestionario-bloque-header:hover {
    background: rgba(255,255,255,0.05) !important;
}
body.dark-version .cuestionario-bloque-header .bloque-arrow {
    color: #64748b !important;
}
body.dark-version .cuestionario-item {
    border-bottom-color: #334155 !important;
}
body.dark-version .cuestionario-item .item-label {
    color: #94a3b8 !important;
}
body.dark-version .cuestionario-item .item-val {
    color: #e2e8f0 !important;
}
body.dark-version .cuestionario-item .item-val.empty {
    color: #64748b !important;
}
body.dark-version .cuestionario-empty {
    color: #64748b !important;
}

/* Botones sidebar */
body.dark-version .btn-informe {
    background: #0f172a !important;
    color: #60a5fa !important;
    border: 1.5px solid #334155 !important;
}
body.dark-version .btn-informe:hover {
    background: rgba(96,165,250,0.1) !important;
    color: #93c5fd !important;
}
body.dark-version .btn-cuestionario {
    box-shadow: 0 2px 8px rgba(139,92,246,0.25) !important;
}

/* Tareas e informes */
body.dark-version .tarea-item {
    border-bottom-color: #334155 !important;
}
body.dark-version .tarea-text {
    color: #e2e8f0 !important;
}
body.dark-version .tarea-fecha {
    color: #94a3b8 !important;
}
body.dark-version .informe-item {
    border-bottom-color: #334155 !important;
}
body.dark-version .informe-title {
    color: #e2e8f0 !important;
}
body.dark-version .informe-date {
    color: #94a3b8 !important;
}
body.dark-version .informe-icon {
    background: #0f172a !important;
    color: #94a3b8 !important;
}

/* Avatar fallback en dark */
body.dark-version .perfil-avatar[style*="background:#fff"] {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

/* ============================================
   ALUMNO_NOTAS CHAT - Modo Oscuro
   ============================================ */
body.dark-version .chat-card {
    background: #1e293b !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
body.dark-version .chat-message.alumno {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
body.dark-version .chat-message .msg-meta {
    color: rgba(255,255,255,0.6) !important;
}
body.dark-version .chat-message.alumno strong {
    color: #f1f5f9 !important;
}
body.dark-version .chat-message.alumno .md-h2,
body.dark-version .chat-message.alumno .md-h3,
body.dark-version .chat-message.alumno .md-h4 {
    color: #e2e8f0 !important;
    background: linear-gradient(90deg, rgba(96,165,250,0.18) 0%, rgba(96,165,250,0.04) 100%) !important;
    border-left-color: #60a5fa !important;
}
body.dark-version .chat-message.alumno .md-bq {
    color: #94a3b8 !important;
    border-left-color: #60a5fa !important;
}
body.dark-version .chat-message.alumno .md-li-num,
body.dark-version .chat-message.alumno .md-li-bullet {
    color: #60a5fa !important;
}
body.dark-version .typing-text {
    color: #94a3b8 !important;
}
body.dark-version .info-card div[style*="color:#1f2937"],
body.dark-version .info-card div[style*="color: #1f2937"] {
    color: #e2e8f0 !important;
}
body.dark-version .info-card div[style*="color:#6b7280"],
body.dark-version .info-card div[style*="color: #6b7280"],
body.dark-version .info-card label[style*="color:#475569"],
body.dark-version .info-card div[style*="color:#64748b"],
body.dark-version .info-card button[style*="color:#6b7280"] {
    color: #94a3b8 !important;
}
body.dark-version .info-card div[style*="background:#f8fafc"],
body.dark-version .info-card div[style*="background: #f8fafc"] {
    background: #0f172a !important;
}

/* Modales Plan de Estudio e Informe del Alumno */
body.dark-version #modalPlanEstudio .section-card,
body.dark-version #modalInformeAlumno .section-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-version #modalPlanEstudio .section-title,
body.dark-version #modalInformeAlumno .section-title {
    color: #93c5fd !important;
}
body.dark-version #modalPlanEstudio .modal-footer,
body.dark-version #modalInformeAlumno .modal-footer,
body.dark-version #modalNotificacion .modal-footer,
body.dark-version #modalConfirmacion .modal-footer {
    background: #1e293b !important;
    border-top-color: #334155 !important;
}
body.dark-version #modalPlanEstudio .info-badge,
body.dark-version #modalInformeAlumno .info-badge {
    background: #1e3a5a !important;
    color: #93c5fd !important;
}
body.dark-version #modalPlanEstudio .form-check-label,
body.dark-version #modalInformeAlumno .form-check-label {
    color: #cbd5e1 !important;
}
body.dark-version #modalPlanEstudio .form-check-input,
body.dark-version #modalInformeAlumno .form-check-input {
    background-color: #0f172a !important;
    border-color: #475569 !important;
}
body.dark-version #modalPlanEstudio .objetivo-counter {
    color: #93c5fd !important;
}
body.dark-version #modalPlanEstudio .intensidad-descripcion {
    background: rgba(96,165,250,0.1) !important;
    border-left-color: #60a5fa !important;
    color: #cbd5e1 !important;
}
body.dark-version #modalPlanEstudio .intensidad-descripcion strong {
    color: #93c5fd !important;
}
body.dark-version #modalPlanEstudio .btn-group .btn-outline-primary {
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}
body.dark-version #modalPlanEstudio .plan-error,
body.dark-version #modalInformeAlumno .informe-error {
    background: rgba(220,38,38,0.12) !important;
    border-color: rgba(248,113,113,0.4) !important;
    color: #f87171 !important;
}

/* Tarjeta de informe IA dentro del info-card */
body.dark-version .informe-ia-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-version .informe-ia-header h4 {
    color: #e2e8f0 !important;
}
body.dark-version .informe-ia-stat {
    background: #0f172a !important;
    border-color: #334155 !important;
}
body.dark-version .informe-ia-stat-value {
    color: #e2e8f0 !important;
}
body.dark-version .informe-ia-section-title {
    color: #93c5fd !important;
}
body.dark-version .informe-ia-list li {
    color: #cbd5e1 !important;
}
body.dark-version .informe-ia-conclusion {
    background: rgba(96,165,250,0.1) !important;
    border-left-color: #60a5fa !important;
    color: #cbd5e1 !important;
}
body.dark-version .btn-ia-outline {
    background: transparent !important;
    border-color: #60a5fa !important;
    color: #60a5fa !important;
}
body.dark-version .historico-ia-item {
    border-bottom-color: #334155 !important;
}
body.dark-version .historico-ia-item:hover {
    background: #0f172a !important;
}
body.dark-version .historico-ia-title {
    color: #e2e8f0 !important;
}
body.dark-version .historico-ia-pct {
    color: #60a5fa !important;
}

/* Tareas del plan de estudio */
body.dark-version .tarea-principal {
    background: rgba(96,165,250,0.12) !important;
    border-color: #3b82f6 !important;
}
body.dark-version .tarea-principal .tarea-text {
    color: #93c5fd !important;
}
body.dark-version .tarea-descripcion {
    color: #94a3b8 !important;
}
body.dark-version .tarea-motivo {
    background: #0f172a !important;
    border-left-color: #475569 !important;
    color: #94a3b8 !important;
}
body.dark-version .tarea-motivo i {
    color: #64748b !important;
}
body.dark-version .tarea-meta {
    color: #94a3b8 !important;
}
body.dark-version .tarea-pct {
    color: #93c5fd !important;
}
body.dark-version .tarea-progress {
    background: #334155 !important;
}
body.dark-version .tareas-bulk-actions {
    border-bottom-color: #334155 !important;
}
body.dark-version .tareas-bulk-actions .select-all {
    color: #cbd5e1 !important;
}
body.dark-version .btn-eliminar-tarea,
body.dark-version .btn-eliminar-seleccionadas {
    background: rgba(220,38,38,0.15) !important;
    border-color: rgba(248,113,113,0.4) !important;
    color: #f87171 !important;
}
body.dark-version .btn-eliminar-tarea:hover,
body.dark-version .btn-eliminar-seleccionadas:hover {
    background: rgba(220,38,38,0.25) !important;
}
body.dark-version .tarea-icon.pendiente {
    background: rgba(245,158,11,0.15) !important;
    color: #fbbf24 !important;
}
body.dark-version .tarea-icon.completada {
    background: rgba(22,163,74,0.15) !important;
    color: #4ade80 !important;
}
body.dark-version .chat-input-area {
    background: #1e293b !important;
    border-top-color: #334155 !important;
}
body.dark-version .chat-input {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
body.dark-version .chat-input::placeholder {
    color: #64748b !important;
}
body.dark-version .chat-input:focus {
    border-color: #60a5fa !important;
}
body.dark-version .chat-empty {
    color: #94a3b8 !important;
}
body.dark-version .chat-empty i {
    color: #475569 !important;
}
body.dark-version .chat-messages::-webkit-scrollbar-thumb {
    background: #475569 !important;
}

/* resultados_examen.php - Justificación box dark mode */
body.dark-version #consola2-ext > div {
    background: #1e293b !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
}
body.dark-version #consola2-ext strong {
    color: #e2e8f0 !important;
}
body.dark-version #consola2-ext .prepe {
    color: #cbd5e1 !important;
}

/* Admin toast notification dark mode */
body.dark-version .toast-notification {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
body.dark-version .toast-notification i.bi-check-circle-fill {
    color: #34d399 !important;
}
body.dark-version .toast-notification i.bi-exclamation-triangle-fill {
    color: #f87171 !important;
}

/* Abandonar Academia modal dark mode */
body.dark-version #modalAbandonarAcademia > div {
    background: #1e293b !important;
}
body.dark-version #modalAbandonarAcademia h3 {
    color: #e2e8f0 !important;
}
body.dark-version #modalAbandonarAcademia p {
    color: #94a3b8 !important;
}
body.dark-version #modalAbandonarAcademia p strong {
    color: #e2e8f0 !important;
}
body.dark-version #modalAbandonarAcademia button[onclick="closeAbandonarModal()"] {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

/* alumno_detalle.php - Normativa select toggle dark mode */
body.dark-version .normativa-select {
    background: #334155 !important;
    border-color: #475569 !important;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%23e2e8f0"%3E%3Cpath d="M6 10.117V14l4-2.222v-1.661l4-4.444V2H2v3.673L6 10.117z"/%3E%3C/svg%3E') !important;
}
body.dark-version .normativa-select option {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

/* alumno_detalle.php - Bootstrap form-check dark mode */

/* Base unchecked state for all checkboxes/radios/switches */
body.dark-version .form-check-input {
    background-color: #334155 !important;
    border-color: #475569 !important;
}

/* Checkbox checked - blue track with white checkmark */
body.dark-version .form-check-input:checked[type="checkbox"] {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

/* Switch unchecked - dark track with white thumb */
body.dark-version .form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* Switch checked - blue track with white thumb */
body.dark-version .form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* Focus state adapted for dark mode */
body.dark-version .form-check-input:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
}

/* ============================================
   CARGAR_PREGUNTA - Caja blanca de pregunta
   ============================================ */

/* Caja envolvente de la pregunta */
body.dark-version .qp-pregunta-card {
    background: #1e293b !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important;
}

/* Título de la pregunta */
body.dark-version .titulopregunta,
body.dark-version .titulopregunta strong {
    color: #e2e8f0 !important;
}

/* Encabezado PREGUNTA N */
body.dark-version .bloque1 h4 {
    color: #e2e8f0 !important;
}

/* Texto de las opciones sin fondo (C y D en la foto) */
body.dark-version .form-check-label {
    color: #e2e8f0 !important;
}
body.dark-version .option-text {
    color: #e2e8f0 !important;
}

/* Caja de justificación */
body.dark-version #consola2 {
    background: #1e293b !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important;
    color: #e2e8f0 !important;
}
body.dark-version #consola2 strong {
    color: #e2e8f0 !important;
}
body.dark-version #consola2 .prepe,
body.dark-version #consola2 pre {
    background: transparent !important;
    /* No sobreescribir color: los spans con background-color heredan el color del padre */
}
/* Texto subrayado/marcado en amarillo: adaptar fondo para contraste en modo oscuro */
body.dark-version #consola2 span[style*="background-color: yellow"],
body.dark-version #consola2 span[style*="background-color:yellow"],
body.dark-version #consola2 span[style*="background-color: #ffff00"],
body.dark-version #consola2 span[style*="background-color:#ffff00"],
body.dark-version #consola2 span[style*="background-color: rgb(255, 255, 0)"],
body.dark-version #consola2 span[style*="background-color:rgb(255,255,0)"],
body.dark-version #consola2 mark {
    background-color: #f59e0b !important;
    color: #1a1a1a !important;
}

/* También aplicar a .prepe en caso de que el pre sea directo padre del span */
body.dark-version .prepe span[style*="background-color: yellow"],
body.dark-version .prepe span[style*="background-color:yellow"],
body.dark-version .prepe span[style*="background-color: #ffff00"],
body.dark-version .prepe span[style*="background-color:#ffff00"],
body.dark-version .prepe mark {
    background-color: #f59e0b !important;
    color: #1a1a1a !important;
}

/* ============================================
   VER ACADEMIA - Modo Oscuro
   ============================================ */

/* Cards de información (info-card) */
body.dark-version .info-card {
    background: #202940 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-version .info-card h5 {
    color: #93c5fd !important;
}

body.dark-version .info-card p,
body.dark-version .info-card .info-row {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .info-card .info-row i {
    color: #38bdf8 !important;
}

/* Stats bar */
body.dark-version .stats-bar {
    background: #1a2035 !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.dark-version .stat-item {
    border-right-color: rgba(255, 255, 255, 0.06) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

body.dark-version .stat-item .stat-value {
    color: #60a5fa !important;
}

body.dark-version .stat-item .stat-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* PDF cards */
body.dark-version .pdf-card {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .pdf-card-footer {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    background: #2d3a55 !important;
}

body.dark-version .pdf-card-footer .pdf-name {
    color: #e2e8f0 !important;
}

body.dark-version .pdf-card-footer .pdf-date {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* ============================================
   IMPORTAR USUARIOS - Modo Oscuro
   ============================================ */

body.dark-version .card-upload {
    background: #202940 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-version .card-upload .form-control,
body.dark-version .card-upload input[type="file"] {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
}

body.dark-version .card-upload .form-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-version .hint-box {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

body.dark-version .hint-box strong {
    color: #93c5fd !important;
}

body.dark-version .kpi-grid .kpi-card {
    background: #202940 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-version .kpi-card .kpi-lbl {
    color: rgba(255, 255, 255, 0.55) !important;
}

body.dark-version .kpi-card.kpi-info .kpi-val { color: #60a5fa !important; }
body.dark-version .kpi-card.kpi-ok   .kpi-val { color: #34d399 !important; }
body.dark-version .kpi-card.kpi-warn .kpi-val { color: #fbbf24 !important; }
body.dark-version .kpi-card.kpi-err  .kpi-val { color: #f87171 !important; }

/* ============================================
   GESTIÓN (academias, profesores, alumnos) - Modo Oscuro
   ============================================ */

/* Fondo general de las páginas de gestión */
body.dark-version .form-card,
body.dark-version .table-card {
    background: #202940 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Labels modernos */
body.dark-version .form-label-modern {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Inputs y selects en formularios modernos */
body.dark-version .form-card .form-control,
body.dark-version .form-card select.form-control,
body.dark-version .form-card select.celda1,
body.dark-version .form-card textarea.form-control {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
}

body.dark-version .form-card .form-control:focus,
body.dark-version .form-card select.celda1:focus,
body.dark-version .form-card textarea.form-control:focus {
    background: #334466 !important;
    border-color: #4a80c4 !important;
    box-shadow: 0 0 0 3px rgba(74, 128, 196, 0.2) !important;
}

body.dark-version .form-card .form-control::placeholder,
body.dark-version .form-card textarea.form-control::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Opciones de select */
body.dark-version .form-card select.form-control option,
body.dark-version .form-card select.celda1 option {
    background: #202940 !important;
    color: #e2e8f0 !important;
}

/* Botón guardar (ya tiene gradiente, se mantiene igual) */
body.dark-version .btn-save {
    background: linear-gradient(135deg, #1e4fa0, #2563b8) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Botón volver / cancelar */
body.dark-version .btn-back {
    background: #2d3a55 !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .btn-back:hover {
    background: #364560 !important;
    color: #e2e8f0 !important;
}

/* Separador hr dentro de form-card */
body.dark-version .form-card hr {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Documentos existentes (modificar_academia) */
body.dark-version .doc-item-edit {
    background: #2d3a55 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .doc-item-edit a {
    color: #93c5fd !important;
}

body.dark-version .doc-item-edit a:hover {
    color: #60a5fa !important;
}

body.dark-version .doc-item-edit .btn-del {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

body.dark-version .doc-item-edit .btn-del:hover {
    background: rgba(239, 68, 68, 0.35) !important;
}

/* Tabla dentro de table-card */
body.dark-version .table-card .table {
    color: #e2e8f0 !important;
}

body.dark-version .table-card .table tbody tr {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

body.dark-version .table-card .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-version .table-card .table td {
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Texto muted en dark */
body.dark-version .form-card .text-muted,
body.dark-version .table-card .text-muted {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Alert de error */
body.dark-version .alert-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

/* ============================================
   GRID DE PREGUNTAS - Tablet/iPad full-width (768px-1399px)
   Botones compactos centrados
   ============================================ */
@media (min-width: 768px) and (max-width: 1399px) {
    #question-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    .question-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
        margin: 2px !important;
        border-radius: 8px !important;
    }
}