/* ========================================================================== TEMA GENERAL — diseño limpio y moderno (Tarea 11.4) Reemplaza el anterior tema "Matrix". Paleta índigo/slate, tarjetas suaves, buena legibilidad y modo oscuro funcional. Se carga al final para afinar los componentes de Bootstrap sin reescribirlos. ========================================================================== */ :root { --c-primary: #4f46e5; /* índigo */ --c-primary-dark: #4338ca; --c-primary-soft: #eef2ff; --c-bg: #f1f5f9; /* slate-100 */ --c-surface: #ffffff; /* Fondo de las tarjetas sueltas (los paquetes de la mochila, los tableros del dominó). Se usaba en esas vistas sin haberla declarado nunca: `background: var(--c-card)` sin valor de reserva es una regla inválida y el fondo quedaba transparente. Va un color literal, NO var(--c-surface): una variable que apunta a otra se resuelve donde se DEFINE, no donde se usa. Como el modo oscuro redefine --c-surface en el y esto es :root, se habría quedado con el blanco del tema claro y la tarjeta habría salido blanca de noche. Su pareja oscura está en el bloque body.dark-mode. */ --c-card: #ffffff; --c-text: #1e293b; /* slate-800 */ --c-muted: #5b6979; /* slate-500 oscurecido: 5.1:1 sobre el fondo (AA) */ --c-border: #e2e8f0; /* slate-200 */ --c-radius: 0.75rem; --c-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); --c-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); } body { background-color: var(--c-bg); color: var(--c-text); font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--c-text); } a { color: var(--c-primary); } a:hover { color: var(--c-primary-dark); } /* ----------- Color primario (navbar, sidebar, footer, encabezados) ----------- */ .bg-primary { background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark)) !important; } .navbar.bg-primary { box-shadow: var(--c-shadow-sm); } .navbar-brand { font-weight: 700; letter-spacing: 0.3px; } /*============================================= MARCA "BIRRETÓN": el birrete siempre va arriba, centrado sobre el nombre. Mismo patrón dondequiera que aparezcan juntos: el cabezote, el menú lateral, el login y el pie de la landing. Cada sitio pone su propio tamaño de letra; esta clase solo fija la disposición (icono encima, centrado). =============================================*/ .marca-birreton { display: flex; flex-direction: column; align-items: center; line-height: 1.15; gap: 0.15rem; } /* Sin relleno propio: a diferencia del login/menú lateral/pie (que apilan icono + texto y necesitan aire alrededor), aquí el único hijo es la imagen del logo, que ya trae su propio relleno (.logo-cabezote, abajo). Un segundo relleno aquí encima solo le restaba alto disponible al logo sin ganar nada a cambio. */ .navbar-brand.marca-birreton { padding: 0; } /* El PNG no trae fondo sólido detrás de "Birretón": es un blanco semitransparente (pensado para ir sobre una página clara, como la landing), así que sobre el azul del cabezote esas zonas se veían como manchas grisáceas desiguales en vez de un bloque limpio. El fondo propio de aquí hace que esa transparencia compare contra un color sólido (queda limpia) y de paso le da contraste en forma de tarjeta contra el cabezote. Literal y NO var(--c-bg): esa variable se oscurece en modo oscuro (pensada para el fondo de toda la página) y aquí se quiere ese mismo tono de modo claro siempre, sin importar el tema. Es a propósito el mismo color que el fondo del sistema en modo claro (--c-bg): el blanco puro, junto al blanco casi total del propio PNG, deslumbraba de más. El alto es a propósito el máximo que cabe SIN engordar el cabezote: junto con su propio relleno vertical (0.1rem arriba y abajo) suma exactamente lo mismo que antes ocupaban el alto del logo viejo (2.5rem) más el relleno que tenía .navbar-brand.marca-birreton (ya quitado arriba) — el cabezote no crece ni un píxel, pero el logo sí. El ancho se deja en "auto": la proporción del PNG manda, nunca se estira. El contorno usa el mismo dorado del propio logo (los lentes y "Es tu día"): es el --gold de vistas/css/landing.css, pero ese variable solo existe dentro de .landing-page, que no envuelve al cabezote, así que va literal aquí. Con box-sizing:border-box (Bootstrap), el borde se descuenta del alto de 3rem igual que el relleno: sigue sin engordar el cabezote. */ .logo-cabezote { height: 3rem; width: auto; background: #f1f5f9; border: 2px solid #e6ab1e; border-radius: 0.5rem; padding: 0.1rem 0.6rem; } .encabezado-seccion { color: var(--c-primary-dark); font-weight: 700; } /* ----------- Tarjetas ----------- */ .card { background-color: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--c-radius); box-shadow: var(--c-shadow-sm); } .card-header { background-color: var(--c-surface); border-bottom: 1px solid var(--c-border); font-weight: 600; border-top-left-radius: var(--c-radius) !important; border-top-right-radius: var(--c-radius) !important; } .card-header.bg-primary, .modal-header.bg-primary { color: #fff; } /* Secciones colapsables de una tarjeta (p.ej. "Mi cuenta"): un círculo translúcido que toma el color del encabezado donde vaya (currentColor), para que se lea igual sobre un encabezado normal que sobre uno de color sólido como .modal-header-premium. Una sola flecha gira 180° al abrir en vez de alternar fa-plus/fa-minus: el estado lo lleva Bootstrap solo (aria-expanded, que alterna en el encabezado disparador) sin JS propio para el icono. */ .cuenta-toggle-seccion.btn { width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(127, 127, 127, 0.14); border: 1px solid rgba(127, 127, 127, 0.3); color: inherit; } .cuenta-toggle-seccion.btn:hover, .cuenta-toggle-seccion.btn:focus { background: rgba(127, 127, 127, 0.24); color: inherit; } .cuenta-toggle-seccion i { transition: transform 0.25s ease; } .cuenta-seccion-header[aria-expanded="true"] .cuenta-toggle-seccion i { transform: rotate(180deg); } /* ----------- Botones ----------- */ /* Botones del sistema: delgados (menos alto, mismo ancho) y con el icono siempre a la derecha, pegado al margen. El icono se escribe primero en el HTML de casi todas las vistas, así que en vez de reordenar decenas de plantillas se le manda al final con `order`. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding-top: 0.3rem; padding-bottom: 0.3rem; border-radius: 0.5rem; font-weight: 500; line-height: 1.4; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } /* El icono va al final aunque en el HTML esté escrito antes del texto. */ .btn > i:first-child { order: 1; } /* En los botones que ocupan todo el ancho, el icono se va hasta el margen derecho. Se hace con el margen (y no con space-between) para que un botón ancho SIN icono siga con su texto centrado. */ .btn.w-100 > i { margin-left: auto; } /* Los botones que piden texto a la izquierda (las opciones del examen) lo conservan: el flex no debe centrárselo. */ .btn.text-start { justify-content: flex-start; } /* Los botones redondos son solo el icono: ahí no hay nada que separar. */ .btn.rounded-circle { justify-content: center; gap: 0; } .btn.rounded-circle > i { margin-left: 0; } .btn-lg { padding-top: 0.42rem; padding-bottom: 0.42rem; } .btn:hover { transform: translateY(-1px); } .btn-primary { background-color: var(--c-primary); border-color: var(--c-primary); } /* El color real lo pone vistas/plantilla.php desde "Colores del sistema" (--c-boton); aquí solo queda el realce, en gris neutro para que combine con cualquier color que elija el administrador. */ .btn-primary:hover, .btn-primary:focus { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25); } .btn-outline-light:hover { color: var(--c-primary-dark); } /* Botón verde: acciones que AÑADEN algo (agregar un paquete de libros a la mochila). El verde se lee como "sumar" sin tener que leer el texto, igual que el rojo de "Eliminar cuenta" se lee como "quitar". No usa --c-boton a propósito: ese color lo cambia el administrador desde "Colores del sistema", y aquí el verde es parte del significado del botón, no de la paleta. El tono (#047857) da 5,48:1 de contraste con el texto blanco, por encima del 4,5:1 que pide la norma; sirve igual en modo claro y oscuro, así que no necesita variante nocturna. El realce del hover es el mismo gris neutro de .btn-primary, para que todos los botones se comporten igual al pasar por encima. */ .btn-verde { background-color: #047857; border-color: #047857; color: #ffffff; } .btn-verde:hover, .btn-verde:focus { background-color: #036249; border-color: #036249; color: #ffffff; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25); } /* ----------- Formularios ----------- */ .form-control, .form-select { border-radius: 0.5rem; border-color: var(--c-border); } .form-control:focus, .form-select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15); } /* Icono nativo de "ver contraseña" / "limpiar" que Edge dibuja dentro de los : es un glifo oscuro fijo que se pierde contra el fondo casi negro del campo en modo oscuro (#0f172a). Se oculta y en su lugar el sistema pone su propio botón ".toggle-password" (login y alta/edición de usuario), que sí adapta el color al tema. */ input::-ms-reveal, input::-ms-clear { display: none; } .input-group-text { background-color: var(--c-primary-soft); border-color: var(--c-border); color: var(--c-primary-dark); } /* Casillas de verificación: mismo color de marcado que los botones del sistema y, en modo oscuro, un fondo y un borde que se distingan del papel. Va ANTES del bloque de interruptores: los dos juegos de reglas tienen la misma especificidad, así que el de los interruptores debe quedar después para poder afinar su riel. */ .form-check-input:checked { background-color: var(--c-boton, var(--c-primary)); border-color: var(--c-boton, var(--c-primary)); } body.dark-mode .form-check-input:not(:checked) { background-color: #1e293b; border-color: #64748b; } /* ----------- Interruptores (form-switch) ----------- Todos los interruptores del sistema comparten este diseño: el del temporizador del examen y del repaso, el de aprobar una reseña, y cualquiera que se añada después. Se hacen más grandes que los de Bootstrap para que se puedan tocar con el pulgar, la palanca es siempre blanca (se ve igual sobre fondo claro que oscuro) y encendidos toman el color de los botones del sistema, el que se edita en "Colores del sistema". */ /* El hueco reservado a la izquierda (padding-left) es el ancho del riel más el aire que lo separa de su etiqueta: 2.85rem + 1.2rem. */ .form-switch { padding-left: 4.05rem; min-height: 1.75rem; } .form-switch .form-check-input { width: 2.85rem; height: 1.55rem; margin-left: -4.05rem; margin-top: 0.1rem; background-color: #cbd5e1; /* apagado: riel gris claro */ border: 1px solid #b6c2d2; /* Palanca blanca fija: la de Bootstrap es gris translúcida y se pierde contra el riel oscuro del modo nocturno. */ 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='%23ffffff'/%3e%3c/svg%3e"); box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.2); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, background-position 0.2s ease; } .form-switch .form-check-input:checked { background-color: var(--c-boton, var(--c-primary)); border-color: var(--c-boton, var(--c-primary)); 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='%23ffffff'/%3e%3c/svg%3e"); box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.25); } .form-switch .form-check-input:focus { border-color: var(--c-boton, var(--c-primary)); box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.2); 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='%23ffffff'/%3e%3c/svg%3e"); } .form-switch .form-check-input:disabled { opacity: 0.55; cursor: not-allowed; } .form-switch .form-check-label { cursor: pointer; padding-top: 0.12rem; font-weight: 500; } /* Modo oscuro: el riel apagado se oscurece (antes quedaba un bloque blanco sobre el fondo nocturno) y conserva un borde visible. */ body.dark-mode .form-switch .form-check-input { background-color: #475569; border-color: #64748b; } body.dark-mode .form-switch .form-check-input:checked { background-color: var(--c-boton, var(--c-primary)); border-color: var(--c-boton, var(--c-primary)); } body.dark-mode .form-switch .form-check-label { color: #e2e8f0; } /* Caja del interruptor: le da cuerpo al control (borde, fondo y aire) para que se lea como un paso más del formulario, y para que el destello de la luz intermitente tenga un borde donde encenderse. */ /* Dentro de la caja el riel y su etiqueta son dos elementos de una fila flex: ahí quien los separa es el `gap`, no el hueco reservado con padding que usa Bootstrap (y que aquí se anula, o el riel quedaría descolgado). */ .interruptor-caja { display: flex; align-items: center; gap: 0.9rem; background-color: var(--c-surface); border: 1px solid var(--c-border); border-radius: 0.65rem; padding: 0.55rem 0.9rem; box-shadow: var(--c-shadow-sm); transition: border-color 0.2s ease, background-color 0.2s ease; } .interruptor-caja .form-check-input { margin-left: 0; flex: 0 0 auto; /* el riel no se encoge con etiquetas largas */ } .interruptor-caja:hover { border-color: var(--c-boton, var(--c-primary)); } body.dark-mode .interruptor-caja { background-color: #1e293b; border-color: #334155; } /* ----------- Tablas ----------- */ .table { --bs-table-hover-bg: var(--c-primary-soft); } .table thead th { color: var(--c-muted); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.4px; } /* Encabezados ordenables de las tablas ".tabla-paginada" (vistas/js/ordenarTabla.js). La flechita se ve tenue en reposo y se enciende con el color de los botones del sistema en la columna por la que está ordenada. */ .table thead th.orden-th { cursor: pointer; user-select: none; white-space: nowrap; } .table thead th.orden-th:hover { color: var(--c-text); } .orden-icono { margin-left: 0.35rem; font-size: 0.85em; opacity: 0.35; } .table thead th.orden-th:hover .orden-icono { opacity: 0.7; } .table thead th.orden-activa { color: var(--c-text); } .table thead th.orden-activa .orden-icono { opacity: 1; color: var(--c-boton, var(--c-primary)); } /* ----------- Login ----------- */ .login-wrapper { height: 100vh; overflow-y: auto; /* el propio contenedor gestiona el scroll */ display: flex; padding: 1rem; background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #f1f5f9 100%); } /* margin:auto centra cuando cabe y permite ver todo (scroll) cuando no cabe */ .login-wrapper .login-card { margin: auto; } /* Formulario de registro compacto para que quepa sin scroll */ .login-card .card-body { padding: 1.25rem 1.5rem; } #bloqueRegistro .mb-3 { margin-bottom: 0.6rem !important; } #bloqueRegistro .mb-4 { margin-bottom: 0.8rem !important; } #bloqueRegistro .form-label { margin-bottom: 0.15rem; } #bloqueRegistro p.text-muted { margin-bottom: 0.8rem !important; } #bloqueRegistro .invalid-feedback, #bloqueRegistro .valid-feedback { font-size: 0.78rem; } .login-card .card-header { background: linear-gradient(90deg, var(--c-primary), var(--c-primary-dark)) !important; color: #fff; } /* ----------- Contexto de la pregunta en el examen ----------- "De qué trata esta pregunta" (materia · tema · subtema · microtema · nanotema), arriba del "Pregunta N". Plegable: el estudiante lo oculta si no lo quiere ver (se recuerda en localStorage — ver PasarelaExamen.js). */ .examen-contexto { background-color: var(--c-surface); border: 1px solid var(--c-border); border-radius: 0.5rem; margin-bottom: 0.5rem; overflow: hidden; } .examen-contexto-toggle { display: flex; align-items: center; gap: 0.4rem; width: 100%; border: 0; background: transparent; color: var(--c-muted); font-size: 0.8rem; font-weight: 600; padding: 0.45rem 0.8rem; cursor: pointer; } .examen-contexto-toggle:hover { color: var(--c-text); } .examen-contexto-flecha { margin-left: auto; font-size: 0.75rem; } .examen-contexto-cuerpo { padding: 0 0.8rem 0.5rem; font-size: 0.82rem; font-weight: 600; color: var(--c-muted); } /* ----------- Preguntas pendientes por responder (examen) ----------- Bajo "Anterior/Siguiente": un botón con el número de cada pregunta sin contestar. La lista se pagina (5 en celular, 10 de tablet en adelante) —lo gobierna vistas/js/PasarelaExamen.js—. */ .preguntas-pendientes-titulo { color: var(--c-muted); } .pendientes-num { min-width: 2.5rem; padding: 0.25rem 0.5rem; font-weight: 700; background-color: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); } .pendientes-num:hover { border-color: var(--c-boton); color: var(--c-boton); } .pendientes-num.activa { background-color: var(--c-boton); border-color: var(--c-boton); color: var(--c-boton-texto); } /* ----------- Opciones del examen ----------- Compactas a propósito: en el examen, el repaso y los exámenes propios interesa que la pregunta y sus tres opciones quepan juntas en pantalla, sin tener que hacer scroll para ver la última. */ .opcion { padding: 0.55rem 0.9rem; font-size: 0.95rem; line-height: 1.35; white-space: normal; /* los enunciados largos parten en varias líneas */ } .opcion.btn-primary { background-color: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); box-shadow: var(--c-shadow-sm); text-align: left; } .opcion.btn-primary:hover { background-color: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary-dark); } /* Al responder se bloquean las tres opciones. La que no se coloreó tiene que seguir viéndose exactamente igual que antes: ni con el color de los botones del sistema ni con el "apagado" (opacity) que Bootstrap da a los botones deshabilitados. Solo la correcta y la fallada cambian de color. */ .opcion.btn-primary:disabled, .opcion.btn-primary.disabled { background-color: var(--c-surface); color: var(--c-text); border-color: var(--c-border); } .opcion:disabled, .opcion.disabled { opacity: 1; } /* Correcta / fallada: fondo suave y translúcido (no un relleno sólido) para que el verde y el rojo no "griten" — mismo criterio que las alertas .alert-success/.alert-danger de aquí abajo, aplicado a las opciones. */ .opcion.btn-success { background-color: rgba(22, 163, 74, 0.15) !important; border-color: #16a34a !important; color: #14532d !important; } .opcion.btn-danger { background-color: rgba(220, 38, 38, 0.15) !important; border-color: #dc2626 !important; color: #7f1d1d !important; } /* ----------- Alertas Bootstrap — modo claro ----------- */ /* Borde izquierdo de acento + fondo suave + texto de alta legibilidad */ .alert { border: none; border-left: 4px solid transparent; border-radius: 0.5rem; font-weight: 500; } .alert-success { background-color: #f0fdf4; border-left-color: #16a34a; color: #14532d; } .alert-danger { background-color: #fff1f2; border-left-color: #dc2626; color: #7f1d1d; } .alert-warning { background-color: #fffbeb; border-left-color: #d97706; color: #78350f; } .alert-info { background-color: #eff6ff; border-left-color: #3b82f6; color: #1e3a5f; } /* ----------- Animación de entrada ----------- */ .fade-in { animation: aparecer 0.4s ease; } @keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== MODO OSCURO ========================================================================== */ body.dark-mode { --c-bg: #0f172a; /* slate-900 */ --c-surface: #1e293b; /* slate-800 */ --c-text: #e2e8f0; /* slate-200 */ --c-muted: #94a3b8; /* slate-400 */ --c-border: #334155; /* slate-700 */ --c-primary-soft: #1e1b4b; /* Un punto más claro que --c-surface a propósito: así la tarjeta del paquete se despega del panel que la contiene en vez de fundirse con él. Con el texto del tema (#e2e8f0) da 10,06:1. */ --c-card: #273549; background-color: var(--c-bg); color: var(--c-text); } body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: var(--c-text); } /* ----------- El índigo oscuro, aclarado para el modo nocturno ----------- --c-primary-dark (#4338ca) se pensó para escribir sobre fondo blanco. En modo oscuro se quedaba sobre el slate-800 de las tarjetas dando 2,07:1 de contraste (la norma pide 4,5:1): el título de la sección casi no se leía. Pasa a indigo-300, que sobre ese mismo fondo da 7,34:1 y conserva el acento de color en vez de convertir el título en texto corriente. Se cambian los sitios donde ese color es LETRA, no la variable entera: el cabezote y la cabecera del login la usan como final de un degradado de fondo, y aclararla ahí les cambiaría el aspecto. */ body.dark-mode .encabezado-seccion, body.dark-mode .input-group-text { color: #a5b4fc; } /* Enlaces SUELTOS de contenido nada más (un "" a secas, sin ningún componente propio): el color de reposo sin esto es --c-primary (2,33:1, ilegible) y solo el hover tenía uno decente (el mismo indigo-300 de arriba). Se excluyen a propósito los que YA fijan su propio color con una sola clase (misma especificidad que "a" con etiqueta+clase, así que sin el :not() este selector se las ganaba y los dejaba en índigo en vez de blanco): botones, accesos de menú ("ma-btn"), accesos del pie ("footer-acceso"), enlaces del menú lateral y la marca "Birretón". */ body.dark-mode a:not(.btn):not(.ma-btn):not(.footer-acceso):not(.nav-link):not(.navbar-brand):not(.marca-birreton) { color: #818cf8; } body.dark-mode a:hover:not(.btn):not(.ma-btn):not(.footer-acceso):not(.nav-link):not(.navbar-brand):not(.marca-birreton) { color: #a5b4fc; } body.dark-mode .card, body.dark-mode .modal-content, body.dark-mode .card-header { background-color: var(--c-surface); border-color: var(--c-border); color: var(--c-text); } body.dark-mode .form-control, body.dark-mode .form-select { background-color: #0f172a; border-color: var(--c-border); color: var(--c-text); } body.dark-mode .form-select option { background-color: #0f172a; } /* El texto de sugerencia (placeholder) de los buscadores y demás campos no tenía color propio: dependía del gris por defecto del navegador, pensado para un fondo claro, sobre el input casi negro (#0f172a) del modo oscuro. */ body.dark-mode .form-control::placeholder { color: var(--c-muted); opacity: 1; } /* Listas (list-group): resultados de búsqueda de ranking/mochila en modo oscuro */ body.dark-mode .list-group-item { background-color: var(--c-surface); color: var(--c-text); border-color: var(--c-border); } body.dark-mode .list-group-item-action:hover, body.dark-mode .list-group-item-action:focus, body.dark-mode .list-group-item.active { background-color: rgba(79, 70, 229, 0.20); color: var(--c-text); } /* El .text-muted de Bootstrap se alinea con la paleta del sistema en ambos modos: en claro garantiza el contraste AA (el gris translúcido por defecto se quedaba corto sobre el fondo slate). */ .text-muted { color: var(--c-muted) !important; } body.dark-mode .text-muted { color: var(--c-muted) !important; } /* .text-warning de Bootstrap (#ffc107) da 1,63:1 sobre una tarjeta blanca en modo claro (falla grave) y de rebote queda perfecto en oscuro (8,97:1): es el caso opuesto a los demás colores de esta sección. Un tono por modo, igual que --c-muted. Usados hoy en KPIs de "pendientes" (estadisticas.php, pagos_suscripciones.php) además de varios iconos. */ .text-warning { color: #b45309 !important; } body.dark-mode .text-warning { color: #fbbf24 !important; } /* .text-danger/.text-success (#dc3545/#198754) están bien en claro (4,53:1) pero rozan la falla en oscuro (3,23:1, por debajo del 4,5:1 de texto) — mismos tonos ya usados para ".btn-outline-danger"/".btn-outline-success". */ body.dark-mode .text-danger { color: #f87171 !important; } body.dark-mode .text-success { color: #34d399 !important; } /* .btn-outline-secondary de Bootstrap usa un gris fijo (#6c757d) pensado para fondo claro: sobre el panel oscuro de las tarjetas/modales se ve deslavado y casi ilegible (p. ej. "Marcar todas"/"Ninguna"/"Capítulos" del modal "Crear paquete"). Bootstrap 5 arma el botón con variables propias (--bs-btn-color, --bs-btn-border-color...), así que hay que redefinir esas mismas variables, no "color" a secas. */ body.dark-mode .btn-outline-secondary { --bs-btn-color: var(--c-muted); --bs-btn-border-color: var(--c-muted); --bs-btn-hover-color: #0f172a; --bs-btn-hover-bg: var(--c-muted); --bs-btn-hover-border-color: var(--c-muted); --bs-btn-active-color: #0f172a; --bs-btn-active-bg: var(--c-muted); --bs-btn-active-border-color: var(--c-muted); } /* Mismo caso que ".btn-outline-secondary" arriba, para las otras variantes que sí se usan sobre tarjetas/modales oscuros (primary: 2,33:1; success y danger: 3,23:1 — los tres por debajo del 4,5:1 de texto). Colores más claros que ya usa el proyecto en otros sitios de modo oscuro (indigo-400, emerald-400, red-400), para no inventar una paleta nueva. */ body.dark-mode .btn-outline-primary { --bs-btn-color: #818cf8; --bs-btn-border-color: #818cf8; --bs-btn-hover-color: #0f172a; --bs-btn-hover-bg: #818cf8; --bs-btn-hover-border-color: #818cf8; --bs-btn-active-color: #0f172a; --bs-btn-active-bg: #818cf8; --bs-btn-active-border-color: #818cf8; } body.dark-mode .btn-outline-success { --bs-btn-color: #34d399; --bs-btn-border-color: #34d399; --bs-btn-hover-color: #0f172a; --bs-btn-hover-bg: #34d399; --bs-btn-hover-border-color: #34d399; --bs-btn-active-color: #0f172a; --bs-btn-active-bg: #34d399; --bs-btn-active-border-color: #34d399; } body.dark-mode .btn-outline-danger { --bs-btn-color: #f87171; --bs-btn-border-color: #f87171; --bs-btn-hover-color: #0f172a; --bs-btn-hover-bg: #f87171; --bs-btn-hover-border-color: #f87171; --bs-btn-active-color: #0f172a; --bs-btn-active-bg: #f87171; --bs-btn-active-border-color: #f87171; } body.dark-mode .opcion.btn-primary { background-color: #0f172a; color: var(--c-text); border-color: var(--c-border); } body.dark-mode .opcion.btn-primary:hover { background-color: #312e81; border-color: var(--c-primary); color: #fff; } body.dark-mode .table { --bs-table-color: var(--c-text); --bs-table-bg: var(--c-surface); --bs-table-border-color: var(--c-border); /* Filas rayadas (table-striped) */ --bs-table-striped-color: var(--c-text); --bs-table-striped-bg: rgba(255, 255, 255, 0.05); /* Hover */ --bs-table-hover-color: var(--c-text); --bs-table-hover-bg: rgba(79, 70, 229, 0.15); /* Activa */ --bs-table-active-color: var(--c-text); --bs-table-active-bg: rgba(255, 255, 255, 0.1); color: var(--c-text); } /* Celdas: forzar color de texto para que ninguna herencia de Bootstrap lo pise */ body.dark-mode .table td, body.dark-mode .table th { color: var(--c-text) !important; border-color: var(--c-border); } /* Resaltado de fila tras edición asíncrona (table-warning) en modo oscuro */ body.dark-mode .table-warning, body.dark-mode .table-warning > td, body.dark-mode .table-warning > th { --bs-table-warning-color: var(--c-text); background-color: rgba(202, 138, 4, 0.25) !important; color: var(--c-text) !important; } body.dark-mode .login-wrapper { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%); } /* ----------- Alertas Bootstrap — modo oscuro ----------- */ /* Fondo oscuro con tinte de color + borde izquierdo brillante + texto claro */ body.dark-mode .alert-success { background-color: rgba(22, 163, 74, 0.15); border-left-color: #4ade80; color: #86efac; } body.dark-mode .alert-danger { background-color: rgba(220, 38, 38, 0.15); border-left-color: #f87171; color: #fca5a5; } /* Correcta / fallada en modo oscuro: mismo criterio translúcido que en claro, con los tonos claros de verde/rojo que ya usan las alertas oscuras. */ body.dark-mode .opcion.btn-success { background-color: rgba(22, 163, 74, 0.2) !important; border-color: #4ade80 !important; color: #86efac !important; } body.dark-mode .opcion.btn-danger { background-color: rgba(220, 38, 38, 0.2) !important; border-color: #f87171 !important; color: #fca5a5 !important; } body.dark-mode .alert-warning { background-color: rgba(217, 119, 6, 0.15); border-left-color: #fbbf24; color: #fde68a; } body.dark-mode .alert-info { background-color: rgba(59, 130, 246, 0.15); border-left-color: #60a5fa; color: #93c5fd; } /* ----------- SweetAlert 2 — modo oscuro ----------- */ /* El popup se inyecta fuera del árbol de la app, así que se sobreescribe */ /* usando los selectores de SweetAlert2 condicionados a body.dark-mode */ body.dark-mode .swal2-popup { background-color: #1e293b; color: #e2e8f0; border: 1px solid #334155; } body.dark-mode .swal2-title { color: #f1f5f9; } body.dark-mode .swal2-html-container { color: #cbd5e1; } body.dark-mode .swal2-close { color: #94a3b8; } body.dark-mode .swal2-close:hover { color: #e2e8f0; } /* Icono de éxito */ body.dark-mode .swal2-icon.swal2-success { border-color: rgba(74, 222, 128, 0.3); color: #4ade80; } body.dark-mode .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: #4ade80; } body.dark-mode .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(74, 222, 128, 0.3); } body.dark-mode .swal2-icon.swal2-success .swal2-success-fix { background-color: #1e293b; } /* Icono de error */ body.dark-mode .swal2-icon.swal2-error { border-color: rgba(248, 113, 113, 0.3); color: #f87171; } body.dark-mode .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: #f87171; } /* Icono de advertencia */ body.dark-mode .swal2-icon.swal2-warning { border-color: rgba(251, 191, 36, 0.3); color: #fbbf24; } /* Icono de info */ body.dark-mode .swal2-icon.swal2-info { border-color: rgba(96, 165, 250, 0.3); color: #60a5fa; } /* Fondo del overlay más oscuro */ body.dark-mode .swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, 0.75) !important; } /* Toast en modo oscuro */ body.dark-mode .swal2-popup.swal2-toast { background-color: #1e293b !important; color: #e2e8f0 !important; border: 1px solid #334155; } body.dark-mode .swal2-popup.swal2-toast .swal2-title { color: #e2e8f0 !important; } body.dark-mode .swal2-timer-progress-bar { background: var(--c-primary) !important; } /* ===== Destello intermitente en selects de materia/capítulo ===== */ @keyframes destello-borde { 0%, 100% { border-color: #dee2e6; box-shadow: 0 0 0 0 rgba(245, 124, 0, 0); } 50% { border-color: #f57c00; box-shadow: 0 0 0 4px rgba(245, 124, 0, 0.45); } } .select-destello { animation: destello-borde 1.1s ease-in-out infinite; outline: none; } /* Destello para botones: solo halo, sin alterar el color del borde propio */ @keyframes destello-btn { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 124, 0, 0); } 50% { box-shadow: 0 0 0 5px rgba(245, 124, 0, 0.6); } } .btn-destello { animation: destello-btn 1.1s ease-in-out infinite; } /* Destello que se apaga solo tras 3 parpadeos: el JS escucha animationend para pasarle la luz al siguiente campo del formulario. */ .destello-limitado { animation-iteration-count: 3 !important; } body.dark-mode .select-destello { animation: destello-borde-dark 1.1s ease-in-out infinite; } body.dark-mode .btn-destello { animation: destello-btn-dark 1.1s ease-in-out infinite; } @keyframes destello-btn-dark { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0); } 50% { box-shadow: 0 0 0 5px rgba(251, 146, 60, 0.55); } } /* Destello para botones btn-warning (amarillo) — halo ámbar oscuro para contraste */ @keyframes destello-btn-amarillo { 0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0); } 50% { box-shadow: 0 0 0 6px rgba(180, 83, 9, 0.65); } } .btn-destello-amarillo { animation: destello-btn-amarillo 1.1s ease-in-out infinite; } @keyframes destello-btn-amarillo-dark { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); } 50% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.6); } } body.dark-mode .btn-destello-amarillo { animation: destello-btn-amarillo-dark 1.1s ease-in-out infinite; } /* Layout principal: contenido scrollable, footer siempre visible. La altura la fija Bootstrap con .vh-100 (100vh), pero en el navegador de un celular 100vh incluye la barra de direcciones y deja el pie por debajo del área visible. Con 100dvh (dynamic viewport height) el alto es el realmente visible en cada momento, así que el pie siempre queda a la vista. */ body.vh-100 { height: 100dvh !important; } /* SweetAlert2 le agrega a su propia clase "swal2-height-auto" (height: auto !important) mientras hay una alerta abierta -no un toast, esas no la agregan-, para un ajuste suyo de scroll. Su regla es "body.swal2-height-auto" (misma especificidad que la de arriba, "body.vh-100"): como su