/* ===== BASE (aplicada a con clase light-mode o dark-mode) ===== */
.light-mode body {
background-color: #ffffff;
color: #000000;
}
.dark-mode body {
background-color: #000000;
color: #ffffff;
}
/* ===== BLOQUES PERSONALIZADOS ===== */
.light-mode .cuadro-info,
.light-mode .curso-descripcion,
.light-mode .curso-menu {
background-color: #f8f9fa;
color: #000000;
}
.dark-mode .cuadro-info,
.dark-mode .curso-descripcion,
.dark-mode .curso-menu {
background-color: #1a1a1a;
color: #ffffff;
}
/* ===== MODAL ===== */
.modal-content {
transition: background-color 0.2s ease, color 0.2s ease;
}
.light-mode .modal-content {
background-color: #f8f9fa;
color: #212529;
}
.dark-mode .modal-content {
background-color: #1f2937;
color: #e5e7eb;
}
/* Botón cerrar visible en oscuro */
.dark-mode .btn-close {
filter: invert(1) grayscale(100%);
}
/* ===== INPUTS / SELECTS ===== */
.form-control,
.form-select {
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.light-mode .form-control,
.light-mode .form-select {
background-color: #ffffff;
color: #212529;
border-color: #ced4da;
}
.dark-mode .form-control,
.dark-mode .form-select {
background-color: #2d3748;
color: #e5e7eb;
border-color: #4b5563;
}
.dark-mode .form-control::placeholder {
color: #9ca3af;
}
/* ===== DROPDOWN ===== */
.dropdown-menu {
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.light-mode .dropdown-menu {
background-color: #ffffff;
color: #212529;
border-color: #dee2e6;
}
.dark-mode .dropdown-menu {
background-color: #111827;
color: #e5e7eb;
border-color: #374151;
}
.dark-mode .dropdown-item {
color: #e5e7eb;
}
.dark-mode .dropdown-item:hover {
background-color: #374151;
}
/* ===== NAVBAR ===== */
.light-mode .navbar {
background-color: #ffffff !important;
color: black;
}
.light-mode .navbar .nav-link,
.light-mode .navbar .btn {
color: black !important;
border-color: black !important;
}
.light-mode .navbar .btn:hover {
background-color: black !important;
color: white !important;
}
.dark-mode .navbar {
background-color: #000 !important;
color: white;
}
.dark-mode .navbar .nav-link,
.dark-mode .navbar .btn {
color: white !important;
border-color: white !important;
}
.dark-mode #toggleTheme:hover {
background-color: white !important;
color: black !important;
}
/* Icono del toggler visible en oscuro */
.dark-mode .navbar-toggler-icon {
filter: invert(1);
}
/* ===== FOOTER ===== */
.light-mode footer {
background-color: #f1f1f1 !important;
color: black !important;
}
.light-mode footer a {
color: #dc3545 !important;
text-decoration: none;
}
.light-mode footer a:hover {
text-decoration: underline;
}
.dark-mode footer {
background-color: #111 !important;
color: white !important;
}
.dark-mode footer a {
color: #dc3545 !important;
text-decoration: none;
}
.dark-mode footer a:hover {
text-decoration: underline;
}
/* ===== HR ===== */
.light-mode hr {
border-top: 1px solid #dee2e6;
}
.dark-mode hr {
border-top: 1px solid #374151;
}
/* Modo oscuro para modales */
.dark-mode .modal-content {
background-color: #1e1e1e; /* Fondo oscuro */
color: #f1f1f1; /* Texto claro */
}
/* Ajusta los encabezados, cuerpo y footer */
.dark-mode .modal-header,
.dark-mode .modal-body,
.dark-mode .modal-footer {
border-color: #444; /* Bordes oscuros */
}
.dark-mode .form-control {
background-color: #2c2c2c;
color: #f1f1f1;
border-color: #555;
}
.dark-mode .form-control::placeholder {
color: #aaa;
}
/* ===== TARJETAS INSCRIBIRSE ===== */
.light-mode .bg-tema {
background-color: #f8f9fa; /* Claro */
color: #000000;
border: 1px solid #dee2e6;
}
.dark-mode .bg-tema {
background-color: #1a1a1a; /* Oscuro */
color: #ffffff;
border: 1px solid #333333;
}
.light-mode .cuadro-info,
.light-mode .bg-tema {
background-color: #f8f9fa;
color: #000000;
border: 1px solid #dee2e6;
}
.dark-mode .cuadro-info,
.dark-mode .bg-tema {
background-color: #1a1a1a;
color: #ffffff;
border: 1px solid #333333;
}