/* ────────────────────────────────────────────────────────── Dark mode overrides — Compañía Ventura Aplica cuando Cargado DESPUÉS de CourseHubClient.styles.css para ganar en empate de especificidad. Selector raíz: html[data-bs-theme="dark"] (specificity más alta) ────────────────────────────────────────────────────────── */ html[data-bs-theme="dark"] { /* Vars custom para dark mode (definiciones source-of-truth) */ --cv-page-bg: #1a1d21; --cv-card-bg: #242830; --cv-input-bg: #2c3138; --cv-card-border: #3a3f47; --cv-text-primary: #e9ecef; --cv-text-secondary: #c0c5cb; --cv-text-muted: #adb5bd; --cv-text-disabled: #6c7480; --cv-text-on-color: #fff; /* Tintes para badges *-subtle en dark mode (versiones claras de los brand colors) */ --cv-text-primary-subtle: #6ea8fe; --cv-text-success-subtle: #75b798; --cv-text-info-subtle: #6edff6; --cv-text-warning-subtle: #ffda6a; --cv-text-danger-subtle: #ea868f; --cv-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.4); --cv-shadow-medium: 0 6px 18px rgba(0, 0, 0, 0.5); /* Override de vars semánticas seguras del proyecto (base.css) */ --light-bg: #1f2228; --auth-card-bg: #242830; --auth-border-accent: rgba(15, 112, 183, 0.35); /* Chat widget vars */ --chat-bot-bg: #2c3138; --chat-text-dark: #e9ecef; --chat-text-muted: #9aa0a8; --chat-border: #3a3f47; --chat-disabled: #5a5f67; --chat-input-border: #3a3f47; --chat-divider: #3a3f47; /* Shadows más fuertes */ --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4); --shadow: 0 4px 10px rgba(0, 0, 0, 0.45); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.55); /* Hovers */ --primary-hover-bg: rgba(15, 112, 183, 0.2); } /* ── Body / page background ── */ html[data-bs-theme="dark"] body { background-color: var(--cv-page-bg); color: var(--cv-text-primary); } /* ────────────────────────────────────────────────────────── Bootstrap utility classes overrides ────────────────────────────────────────────────────────── */ /* Bg-white forzado a card-bg en dark (excepto badges) */ html[data-bs-theme="dark"] .bg-white:not(.badge) { background-color: var(--cv-card-bg) !important; color: var(--cv-text-primary); } /* Section py-5 bg-white (patrón muy común en landings) */ html[data-bs-theme="dark"] section.bg-white, html[data-bs-theme="dark"] .py-5.bg-white { background-color: var(--cv-page-bg) !important; } /* Bg-light se oscurece (excepto badges) */ html[data-bs-theme="dark"] .bg-light:not(.badge) { background-color: var(--cv-input-bg) !important; color: var(--cv-text-primary); } /* Cards genéricos */ html[data-bs-theme="dark"] .card { background-color: var(--cv-card-bg); border-color: var(--cv-card-border); color: var(--cv-text-primary); } /* Texts */ html[data-bs-theme="dark"] .text-secondary { color: var(--cv-text-secondary) !important; } html[data-bs-theme="dark"] .text-muted { color: var(--cv-text-muted) !important; } /* .text-dark NO se sobreescribe — es semánticamente "siempre oscuro" (se usa en badges sobre fondos claros, hero overlays, etc.) */ /* Tables */ html[data-bs-theme="dark"] .table { --bs-table-color: var(--cv-text-primary); --bs-table-bg: var(--cv-card-bg); } html[data-bs-theme="dark"] .table-light { --bs-table-color: var(--cv-text-primary); --bs-table-bg: var(--cv-input-bg); --bs-table-border-color: var(--cv-card-border); } html[data-bs-theme="dark"] .table-hover > tbody > tr:hover { --bs-table-hover-bg: rgba(255, 255, 255, 0.05); } /* Form controls */ html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select { background-color: var(--cv-input-bg); border-color: var(--cv-card-border); color: var(--cv-text-primary); } html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .form-select:focus { background-color: var(--cv-input-bg); color: var(--cv-text-primary); } html[data-bs-theme="dark"] .form-control::placeholder { color: var(--cv-text-disabled); } /* Modals */ html[data-bs-theme="dark"] .modal-content { background-color: var(--cv-card-bg); color: var(--cv-text-primary); } html[data-bs-theme="dark"] .modal-header, html[data-bs-theme="dark"] .modal-footer { border-color: var(--cv-card-border); } /* Dropdowns */ html[data-bs-theme="dark"] .dropdown-menu { background-color: var(--cv-card-bg); border-color: var(--cv-card-border); } html[data-bs-theme="dark"] .dropdown-item { color: var(--cv-text-primary); } html[data-bs-theme="dark"] .dropdown-item:hover, html[data-bs-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.08); color: var(--cv-text-primary); } html[data-bs-theme="dark"] .dropdown-divider { border-color: var(--cv-card-border); } /* Navbar público (Navbar.razor con bg-white hardcoded) */ html[data-bs-theme="dark"] nav.navbar.bg-white { background-color: var(--cv-card-bg) !important; border-bottom: 1px solid var(--cv-card-border); } /* Override de las CSS vars de Bootstrap del navbar */ html[data-bs-theme="dark"] nav.navbar.navbar-light { --bs-navbar-color: var(--bs-emphasis-color); --bs-navbar-hover-color: var(--bs-emphasis-color); --bs-navbar-active-color: var(--bs-emphasis-color); --bs-navbar-disabled-color: var(--bs-tertiary-color); --bs-navbar-brand-color: var(--bs-emphasis-color); --bs-navbar-brand-hover-color: var(--bs-emphasis-color); } /* Override directo del color de los nav-links + brand (con !important para ganar sobre cualquier specificity que aplique Bootstrap dinámicamente) */ html[data-bs-theme="dark"] nav.navbar.navbar-light .navbar-nav .nav-link, html[data-bs-theme="dark"] nav.navbar.navbar-light .navbar-brand, html[data-bs-theme="dark"] nav.navbar.navbar-light .nav-link { color: var(--bs-emphasis-color) !important; } html[data-bs-theme="dark"] nav.navbar.navbar-light .nav-link:hover, html[data-bs-theme="dark"] nav.navbar.navbar-light .navbar-brand:hover { color: var(--bs-emphasis-color) !important; opacity: 0.8; } /* Footer */ html[data-bs-theme="dark"] footer.bg-white, html[data-bs-theme="dark"] footer.bg-light { background-color: var(--cv-card-bg) !important; color: var(--cv-text-primary); } /* ── Badges con .bg-light .text-dark — garantizar legibilidad en dark (se usan sobre heros con imagen oscura, deben quedarse claros con texto oscuro independientemente del modo) ── */ /* Badges con .bg-light + .text-dark — siempre legibles (sin importar el modo del wrapper o del global). Se usan sobre heros con fondos oscuros y deben mantener contraste alto. */ .badge.bg-light, .badge.bg-light.text-dark, span.badge.bg-light { background-color: rgb(var(--bs-light-rgb)) !important; color: rgb(var(--bs-dark-rgb)) !important; } .badge.bg-light .bi, .badge.bg-light i { color: rgb(var(--bs-dark-rgb)) !important; } /* Sub-fondos suaves (badges con tinte) */ html[data-bs-theme="dark"] .bg-primary-subtle { background-color: rgba(13, 110, 253, 0.18) !important; color: var(--cv-text-primary-subtle) !important; } html[data-bs-theme="dark"] .bg-success-subtle { background-color: rgba(25, 135, 84, 0.20) !important; color: var(--cv-text-success-subtle) !important; } html[data-bs-theme="dark"] .bg-info-subtle { background-color: rgba(13, 202, 240, 0.20) !important; color: var(--cv-text-info-subtle) !important; } html[data-bs-theme="dark"] .bg-warning-subtle { background-color: rgba(255, 193, 7, 0.20) !important; color: var(--cv-text-warning-subtle) !important; } html[data-bs-theme="dark"] .bg-danger-subtle { background-color: rgba(220, 53, 69, 0.20) !important; color: var(--cv-text-danger-subtle) !important; } html[data-bs-theme="dark"] .bg-secondary-subtle { background-color: rgba(108, 117, 125, 0.30) !important; color: var(--cv-text-secondary) !important; } /* Alerts */ html[data-bs-theme="dark"] .alert-info { background-color: rgba(13, 202, 240, 0.15); border-color: rgba(13, 202, 240, 0.30); color: var(--cv-text-info-subtle); } html[data-bs-theme="dark"] .alert-warning { background-color: rgba(255, 193, 7, 0.15); border-color: rgba(255, 193, 7, 0.30); color: var(--cv-text-warning-subtle); } html[data-bs-theme="dark"] .alert-light { background-color: var(--cv-card-bg); border-color: var(--cv-card-border); color: var(--cv-text-primary); } /* Borders */ html[data-bs-theme="dark"] .border, html[data-bs-theme="dark"] .border-top, html[data-bs-theme="dark"] .border-bottom, html[data-bs-theme="dark"] .border-start, html[data-bs-theme="dark"] .border-end { border-color: var(--cv-card-border) !important; } html[data-bs-theme="dark"] hr { border-color: var(--cv-card-border) !important; } /* Shadows */ html[data-bs-theme="dark"] .shadow-sm { box-shadow: var(--cv-shadow-soft) !important; } html[data-bs-theme="dark"] .shadow, html[data-bs-theme="dark"] .shadow-lg { box-shadow: var(--cv-shadow-medium) !important; } /* Hero overlays / images leve oscurecimiento */ html[data-bs-theme="dark"] .hero-slide-content, html[data-bs-theme="dark"] .curso-detalle-hero, html[data-bs-theme="dark"] .course-card-img, html[data-bs-theme="dark"] .course-banner-img { filter: brightness(0.92); } /* Inputs con shadow-sm rounded-pill (buscadores con bg-white interno) */ html[data-bs-theme="dark"] .input-group .input-group-text.bg-white { background-color: var(--cv-input-bg) !important; color: var(--cv-text-muted); } /* Pagination */ html[data-bs-theme="dark"] .page-item .page-link { background-color: var(--cv-card-bg); border-color: var(--cv-card-border); color: var(--cv-text-primary); } html[data-bs-theme="dark"] .page-item.active .page-link { background-color: var(--bs-primary); border-color: var(--bs-primary); color: var(--cv-text-on-color); } html[data-bs-theme="dark"] .page-item.disabled .page-link { background-color: var(--cv-card-bg); color: var(--cv-text-disabled); } /* List groups — override CSS vars de Bootstrap */ html[data-bs-theme="dark"] .list-group { --bs-list-group-bg: var(--bs-tertiary-bg); --bs-list-group-color: var(--bs-body-color); --bs-list-group-border-color: var(--bs-border-color); --bs-list-group-action-color: var(--bs-body-color); --bs-list-group-action-hover-bg: var(--bs-secondary-bg); --bs-list-group-action-hover-color: var(--bs-emphasis-color); --bs-list-group-action-active-bg: var(--bs-primary); --bs-list-group-action-active-color: var(--cv-text-on-color); } /* Override directo de cada list-group-item + variante action (con !important para garantizar el bg oscuro y texto claro aún si Bootstrap aplica reglas más específicas en futuras versiones) */ html[data-bs-theme="dark"] .list-group-item, html[data-bs-theme="dark"] .list-group-item-action { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } html[data-bs-theme="dark"] .list-group-item-action:hover, html[data-bs-theme="dark"] .list-group-item-action:focus { background-color: var(--bs-secondary-bg) !important; color: var(--bs-emphasis-color) !important; } html[data-bs-theme="dark"] .list-group-item.active, html[data-bs-theme="dark"] .list-group-item-action.active { background-color: var(--bs-primary) !important; color: var(--cv-text-on-color) !important; border-color: var(--bs-primary) !important; } html[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--cv-text-muted); } /* ────────────────────────────────────────────────────────── Landings de marketing con toggle local independiente (CursoLandingPublicidad y PromoLandingPublicidad) Estas landings tienen su propio storage key. Cuando su wrapper tiene data-bs-theme="dark", redefinir las vars que usan internamente (--white, --gray-X) para que toda su CSS se adapte al modo oscuro. ────────────────────────────────────────────────────────── */ /* Color base del wrapper independiente del global. Usar var(--bs-body-color) que se resuelve según el data-bs-theme del wrapper (no del global). */ .landing-page, .promo-landing-page { color: var(--bs-body-color); background-color: var(--bs-body-bg); } .landing-page[data-bs-theme="dark"], .promo-landing-page[data-bs-theme="dark"] { /* NO flipear --white aquí porque se usa como text-on-dark (hero) y se rompería. En su lugar, override explícito de las secciones que lo usan como bg abajo. */ --gray-100: var(--bs-secondary-bg); --gray-200: var(--bs-border-color); --gray-300: var(--bs-border-color); --gray-600: var(--bs-secondary-color); --gray-700: var(--bs-tertiary-color); --gray-800: var(--bs-body-color); --gray-900: var(--bs-emphasis-color); --light-bg: var(--bs-body-bg); } /* Secciones y cards con background:var(--white) hardcoded → flipear */ .landing-page[data-bs-theme="dark"] .syllabus-section, .landing-page[data-bs-theme="dark"] .speaker-section, .landing-page[data-bs-theme="dark"] .transmission-section, .landing-page[data-bs-theme="dark"] .payment-section, .landing-page[data-bs-theme="dark"] .convenios-section, .landing-page[data-bs-theme="dark"] .entries-section, .landing-page[data-bs-theme="dark"] .footer, .promo-landing-page[data-bs-theme="dark"] [class*="-section"]:not(.promo-hero) { background-color: var(--bs-body-bg) !important; } /* Cards interiores que usan --white como bg (excluyendo .entry-vip porque la VIP usa --service-color/brand para destacar como recomendada) */ .landing-page[data-bs-theme="dark"] .speaker-card, .landing-page[data-bs-theme="dark"] .transmission-card, .landing-page[data-bs-theme="dark"] .entry-card:not(.entry-vip), .landing-page[data-bs-theme="dark"] .bank-card, .landing-page[data-bs-theme="dark"] .payment-card { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color); } /* Campos de número de cuenta / CCI / titular dentro de bank-card (usan --gray-100 como bg "input-like" → muy bajo contraste con texto) */ .landing-page[data-bs-theme="dark"] .bank-account, .promo-landing-page[data-bs-theme="dark"] .promo-bank-account { background-color: var(--cv-input-bg) !important; color: var(--cv-text-primary) !important; } .landing-page[data-bs-theme="dark"] .bank-name, .promo-landing-page[data-bs-theme="dark"] .promo-bank-name { color: var(--cv-text-primary) !important; } .landing-page[data-bs-theme="dark"] .bank-cci, .landing-page[data-bs-theme="dark"] .bank-titular, .promo-landing-page[data-bs-theme="dark"] .promo-bank-cci, .promo-landing-page[data-bs-theme="dark"] .promo-bank-titular, .promo-landing-page[data-bs-theme="dark"] .promo-yape-titular { color: var(--cv-text-muted) !important; } /* Bank/Yape cards — fondo blanco hardcoded, flipear a dark coherente */ .promo-landing-page[data-bs-theme="dark"] .promo-bank-card, .promo-landing-page[data-bs-theme="dark"] .promo-yape-card { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color); } /* ────────────────────────────────────────────────────────── Overrides específicos de las landings (clases scoped) El selector html[data-bs-theme="dark"] tiene specificity alta para vencer al scoped CSS aún siendo selector global. ────────────────────────────────────────────────────────── */ /* Landing.razor — Convenios section (var --white hardcoded) */ html[data-bs-theme="dark"] .convenios-section { background-color: var(--cv-page-bg) !important; } html[data-bs-theme="dark"] .convenio-name { color: var(--cv-text-muted) !important; } /* Logos circulares de convenios y product-img mantienen fondo blanco (logos institucionales se ven mejor con fondo blanco circular). No las override. */ /* Testimonials dark section (var --gray-100) */ html[data-bs-theme="dark"] .testimonials-dark-section { background-color: var(--cv-card-bg) !important; } /* Empty state container */ html[data-bs-theme="dark"] .empty-state-container { background-color: var(--cv-card-bg) !important; } /* Skeleton loaders */ html[data-bs-theme="dark"] .skeleton { background-color: var(--cv-card-border) !important; } /* Carousel item secondary */ html[data-bs-theme="dark"] .carousel-item-secondary { background-color: var(--cv-card-bg) !important; }