/* ============================================================
   ENHANCEMENTS — Dark mode, microinteractions, scroll progress
   Overlay sobre styles.css + style2.css. No modifica la base.
   ============================================================ */

/* ---------- 1. SCROLL PROGRESS BAR ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #4C1C7F, #A78BFA, #06b6d4);
  z-index: 9999;
  transition: width 0.05s linear;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
}

/* ---------- 2. THEME TOGGLE BUTTON ---------- */
.theme-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: inherit;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  margin-left: 0.75rem;
  font-size: 1rem;
}
.theme-toggle:hover {
  transform: rotate(20deg) scale(1.1);
  background: rgba(139, 92, 246, 0.15);
  border-color: #A78BFA;
}
.theme-toggle .icon-moon { display: inline-block; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }

/* ---------- 3. STICKY FLOATING CTA ---------- */
/* Se ubica ENCIMA del boton WhatsApp existente (.botonWPP: bottom 25px, height 65px) */
.sticky-cta {
  position: fixed;
  bottom: 105px;
  right: 25px;
  z-index: 9998;
  background: linear-gradient(135deg, #4C1C7F, #A78BFA);
  color: #fff !important;
  padding: 12px 20px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(76, 28, 127, 0.45);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s ease;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 50px);
}
.sticky-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-cta:hover {
  box-shadow: 0 14px 40px rgba(139, 92, 246, 0.6);
  transform: translateY(-3px);
  color: #fff !important;
}
.sticky-cta i { font-size: 1rem; }
@media (max-width: 576px) {
  .sticky-cta {
    bottom: 100px;
    right: 16px;
    padding: 10px 16px;
    font-size: 0.8rem;
  }
}

/* ---------- 4. CARD HOVER MICROINTERACTIONS ---------- */
.card,
.curso-card,
.feature-card,
.perfil-card,
.tp-resultado,
[class*="proyecto-card"],
[class*="rol-card"] {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.35s ease,
              border-color 0.3s ease !important;
  will-change: transform;
}
.card:hover,
.curso-card:hover,
.feature-card:hover,
.perfil-card:hover,
.tp-resultado:hover,
[class*="proyecto-card"]:hover,
[class*="rol-card"]:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 40px rgba(76, 28, 127, 0.18),
              0 8px 16px rgba(0, 0, 0, 0.08);
}

/* Buttons: smoother hover */
.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(76, 28, 127, 0.25);
}
.btn:active { transform: translateY(0); }

/* Link underline animado */
a.link-animated {
  position: relative;
  text-decoration: none;
}
a.link-animated::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}
a.link-animated:hover::after { width: 100%; }

/* ---------- 5. DARK MODE ---------- */
[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] body {
  background-color: #0d1117 !important;
  color: #c9d1d9 !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #f0f6fc !important;
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span:not(.badge):not(.btn span),
[data-theme="dark"] td,
[data-theme="dark"] dd,
[data-theme="dark"] dt {
  color: #c9d1d9 !important;
}

/* Cards y contenedores */
[data-theme="dark"] .card,
[data-theme="dark"] .curso-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .perfil-card,
[data-theme="dark"] .tp-resultado,
[data-theme="dark"] [class*="proyecto-card"],
[data-theme="dark"] [class*="rol-card"],
[data-theme="dark"] .cohorte-proof {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}

[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: transparent !important;
  color: #c9d1d9 !important;
}

/* Secciones con fondos claros */
[data-theme="dark"] section,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
  background-color: #0d1117 !important;
}

[data-theme="dark"] .bg-secondary,
[data-theme="dark"] .bg-tertiary {
  background-color: #161b22 !important;
}

/* Tablas */
[data-theme="dark"] table {
  background-color: #161b22 !important;
  color: #c9d1d9 !important;
}
[data-theme="dark"] table th {
  background-color: #21262d !important;
  color: #f0f6fc !important;
  border-color: #30363d !important;
}
[data-theme="dark"] table td {
  border-color: #30363d !important;
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Navbar */
[data-theme="dark"] .navbar,
[data-theme="dark"] nav.navbar {
  background-color: rgba(13, 17, 23, 0.95) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #30363d;
}
[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
[data-theme="dark"] .navbar .nav-link {
  color: #c9d1d9 !important;
}
[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
[data-theme="dark"] .navbar .nav-link:hover {
  color: #A78BFA !important;
}
[data-theme="dark"] .navbar-brand {
  color: #f0f6fc !important;
}

/* Inputs y forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #0d1117 !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  background-color: #161b22 !important;
  border-color: #A78BFA !important;
  box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25) !important;
  color: #f0f6fc !important;
}
[data-theme="dark"] .form-label,
[data-theme="dark"] label {
  color: #c9d1d9 !important;
}
[data-theme="dark"] ::placeholder {
  color: #6e7681 !important;
}

/* Footer */
[data-theme="dark"] footer {
  background-color: #010409 !important;
  color: #8b949e !important;
  border-top: 1px solid #30363d;
}
[data-theme="dark"] footer a {
  color: #c9d1d9 !important;
}

/* btn-outline-dark queda invisible en dark (texto negro sobre fondo oscuro) */
[data-theme="dark"] .btn-outline-dark {
  color: #c9d1d9 !important;
  border-color: #A78BFA !important;
}
[data-theme="dark"] .btn-outline-dark:hover {
  background: #A78BFA !important;
  border-color: #A78BFA !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-outline-dark i {
  color: inherit !important;
}

/* Otras variantes dark de Bootstrap */
[data-theme="dark"] .btn-dark {
  background: #21262d !important;
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}
[data-theme="dark"] .btn-dark:hover {
  background: #30363d !important;
  color: #fff !important;
}

/* Botones primarios mantienen color de marca, ajustan contraste */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-purple {
  background-color: #A78BFA !important;
  border-color: #A78BFA !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-purple:hover {
  background-color: #8B5CF6 !important;
  border-color: #8B5CF6 !important;
}
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-light {
  color: #c9d1d9 !important;
  border-color: #A78BFA !important;
}
[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-light:hover {
  background-color: #A78BFA !important;
  color: #fff !important;
}

/* Links genéricos */
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.sticky-cta) {
  color: #58a6ff;
}
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.sticky-cta):hover {
  color: #A78BFA;
}

/* Badges */
[data-theme="dark"] .badge.bg-light {
  background-color: #21262d !important;
  color: #c9d1d9 !important;
}

/* Hero / secciones con imagen de fondo: oscurece overlay */
[data-theme="dark"] header.masthead::before,
[data-theme="dark"] .hero-section::before {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Accordion / FAQ */
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-button {
  background-color: #161b22 !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: #21262d !important;
  color: #f0f6fc !important;
}
[data-theme="dark"] .accordion-body {
  background-color: #161b22 !important;
  color: #c9d1d9 !important;
}

/* HR */
[data-theme="dark"] hr {
  border-color: #30363d !important;
  opacity: 0.5;
}

/* Code blocks */
[data-theme="dark"] code,
[data-theme="dark"] pre {
  background-color: #161b22 !important;
  color: #f0f6fc !important;
  border: 1px solid #30363d;
}

/* Imagenes con fondo blanco: leve atenuación para no encandilar */
[data-theme="dark"] img:not(.no-dim) {
  opacity: 0.92;
  transition: opacity 0.3s ease;
}
[data-theme="dark"] img:not(.no-dim):hover {
  opacity: 1;
}

/* Smooth theme transition global */
body, .card, .navbar, footer, section, table, .accordion-item, .form-control {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ---------- 6. BLOG-SPECIFIC DARK MODE OVERRIDES ---------- */
[data-theme="dark"] .blog-hero,
[data-theme="dark"] .post-header {
  background: linear-gradient(180deg, #1a1530 0%, #0d1117 100%) !important;
}
[data-theme="dark"] .blog-hero h1,
[data-theme="dark"] .post-header h1 {
  color: #f0f6fc !important;
}
[data-theme="dark"] .blog-hero p,
[data-theme="dark"] .post-header .subtitle {
  color: #8b949e !important;
}
[data-theme="dark"] .post-header .meta {
  color: #6e7681 !important;
}

[data-theme="dark"] .post-card {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}
[data-theme="dark"] .post-card h2 {
  color: #f0f6fc !important;
}
[data-theme="dark"] .post-card p {
  color: #8b949e !important;
}
[data-theme="dark"] .post-card .meta {
  color: #6e7681 !important;
  border-color: #30363d !important;
}
[data-theme="dark"] .post-card .read-more {
  color: #a78bfa !important;
}

[data-theme="dark"] .tag-bc {
  background: #422006 !important;
  color: #fb923c !important;
}
[data-theme="dark"] .tag-ia {
  background: #1e3a5f !important;
  color: #60a5fa !important;
}

[data-theme="dark"] .post-content {
  color: #c9d1d9;
}
[data-theme="dark"] .post-content h2,
[data-theme="dark"] .post-content h3 {
  color: #f0f6fc !important;
}
[data-theme="dark"] .post-content p,
[data-theme="dark"] .post-content li {
  color: #c9d1d9 !important;
}
[data-theme="dark"] .post-content code {
  background: #21262d !important;
  color: #f472b6 !important;
}
[data-theme="dark"] .post-content pre {
  background: #010409 !important;
  border: 1px solid #30363d;
}
[data-theme="dark"] .post-content table {
  background-color: #161b22 !important;
}
[data-theme="dark"] .post-content th {
  background: #21262d !important;
  color: #f0f6fc !important;
  border-color: #30363d !important;
}
[data-theme="dark"] .post-content td {
  border-color: #30363d !important;
}
[data-theme="dark"] .post-content blockquote {
  color: #8b949e !important;
  border-left-color: #a78bfa !important;
}
[data-theme="dark"] .post-content em {
  color: #8b949e !important;
}
[data-theme="dark"] .post-content hr {
  border-color: #30363d !important;
}

/* ---------- 7. PLAN-DE-ESTUDIOS DARK OVERRIDES ---------- */
/* Cajas con bg claro que rompen en dark: .lente-estrategica, .estrategia-block, .tp-resultado, .curso-card */

[data-theme="dark"] .lente-estrategica {
  background: rgba(139, 92, 246, 0.12) !important;
  border-left-color: #a78bfa !important;
  color: #c9d1d9 !important;
}
[data-theme="dark"] .lente-estrategica strong {
  color: #c4b5fd !important;
}
[data-theme="dark"] .lente-estrategica em {
  color: #e0e7ff !important;
}

[data-theme="dark"] .estrategia-block {
  background: #161b22 !important;
  border-left-color: #a78bfa !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .estrategia-block h5 {
  color: #f0f6fc !important;
}
[data-theme="dark"] .estrategia-block p {
  color: #c9d1d9 !important;
}
[data-theme="dark"] .estrategia-block strong {
  color: #c4b5fd !important;
}

[data-theme="dark"] .tp-resultado {
  background: rgba(46, 125, 50, 0.18) !important;
  border-left-color: #4ade80 !important;
  color: #c9d1d9 !important;
}
[data-theme="dark"] .tp-resultado strong {
  color: #86efac !important;
}

[data-theme="dark"] .curso-card {
  background: #161b22 !important;
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}
[data-theme="dark"] .curso-card h4,
[data-theme="dark"] .curso-card h5,
[data-theme="dark"] .curso-card .curso-titulo {
  color: #f0f6fc !important;
}

/* Botones "Ver cronograma" y "Accede al programa" */
[data-theme="dark"] a[href*="#cronograma"],
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-cronograma {
  color: #c4b5fd !important;
  border-color: #A78BFA !important;
}
[data-theme="dark"] a[href*="#cronograma"]:hover,
[data-theme="dark"] .btn-cronograma:hover {
  background: #A78BFA !important;
  color: #fff !important;
}

/* Acordeon de plan (cada modulo) */
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-button,
[data-theme="dark"] .plan-card {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}
[data-theme="dark"] .accordion-button {
  color: #f0f6fc !important;
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: #21262d !important;
  color: #c4b5fd !important;
}
[data-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(1.5);
}

/* Camino-card y camino-alumno (Pokemon) */
[data-theme="dark"] .camino-card {
  background: #161b22 !important;
  border-color: #30363d !important;
}
[data-theme="dark"] .camino-tagline,
[data-theme="dark"] .camino-badge {
  color: #c4b5fd !important;
}

/* ---------- 8. WIDE NET: cualquier card/box/wrap/item con bg claro ---------- */
/* Audit detecto ~50 clases con bg #fff/light en homes y subpages.
   Estos selectores las cubren todas de un saque. */
[data-theme="dark"] [class$="-card"],
[data-theme="dark"] [class*="-card "],
[data-theme="dark"] [class$="-box"],
[data-theme="dark"] [class*="-box "],
[data-theme="dark"] [class$="-wrap"],
[data-theme="dark"] [class$="-item"],
[data-theme="dark"] .bc-card,
[data-theme="dark"] .ia-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .curso-card,
[data-theme="dark"] .arancel-card,
[data-theme="dark"] .pago-card,
[data-theme="dark"] .bank-box,
[data-theme="dark"] .factura-box,
[data-theme="dark"] .destinatario-card,
[data-theme="dark"] .enfoque-card,
[data-theme="dark"] .requisito-card,
[data-theme="dark"] .requisito-card--highlight,
[data-theme="dark"] .hook-card,
[data-theme="dark"] .licdia-card,
[data-theme="dark"] .qa-card,
[data-theme="dark"] .quote-card,
[data-theme="dark"] .quiz-card,
[data-theme="dark"] .quiz-wrapper,
[data-theme="dark"] .prereq-item,
[data-theme="dark"] .prereq-cta-box,
[data-theme="dark"] .estrategia-block,
[data-theme="dark"] .compare-table {
  background: #161b22 !important;
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}

[data-theme="dark"] [class$="-card"] h1,
[data-theme="dark"] [class$="-card"] h2,
[data-theme="dark"] [class$="-card"] h3,
[data-theme="dark"] [class$="-card"] h4,
[data-theme="dark"] [class$="-card"] h5,
[data-theme="dark"] [class$="-card"] h6,
[data-theme="dark"] [class$="-box"] h1,
[data-theme="dark"] [class$="-box"] h2,
[data-theme="dark"] [class$="-box"] h3,
[data-theme="dark"] [class$="-box"] h4,
[data-theme="dark"] .estrategia-block h5,
[data-theme="dark"] .quote-card h4,
[data-theme="dark"] .hook-card h4 {
  color: #f0f6fc !important;
}

[data-theme="dark"] [class$="-card"] p,
[data-theme="dark"] [class$="-card"] li,
[data-theme="dark"] [class$="-card"] span:not(.badge),
[data-theme="dark"] [class$="-box"] p,
[data-theme="dark"] [class$="-box"] li,
[data-theme="dark"] [class$="-item"] p,
[data-theme="dark"] [class$="-item"] li {
  color: #c9d1d9 !important;
}

/* Beneficios checklist (icon-wrap morados se mantienen, texto al lado se ve) */
[data-theme="dark"] [class$="-icon-wrap"] {
  background: rgba(139, 92, 246, 0.2) !important;
}

/* Pills y badges con bg claro */
[data-theme="dark"] .stack-pill,
[data-theme="dark"] .section-label {
  background: #21262d !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}

/* Bloques de resultado (quiz / por-que-elegirnos) */
[data-theme="dark"] .result-grey {
  background: #1c2128 !important;
  color: #c9d1d9 !important;
}
[data-theme="dark"] .result-purple {
  background: rgba(139, 92, 246, 0.18) !important;
  color: #e0e7ff !important;
}
[data-theme="dark"] .result-yellow {
  background: rgba(249, 115, 22, 0.18) !important;
  color: #ffedd5 !important;
}
[data-theme="dark"] .result-blue {
  background: rgba(59, 130, 246, 0.18) !important;
  color: #bfdbfe !important;
}

/* Botones quiz y CTA */
[data-theme="dark"] .quiz-btn,
[data-theme="dark"] .btn-cta {
  background: #21262d !important;
  color: #c9d1d9 !important;
  border-color: #30363d !important;
}
[data-theme="dark"] .quiz-btn:hover,
[data-theme="dark"] .btn-cta:hover {
  background: #A78BFA !important;
  color: #fff !important;
  border-color: #A78BFA !important;
}

/* O grande (preposiciones decorativas) */
[data-theme="dark"] .o-grande {
  background: transparent !important;
  color: #6e7681 !important;
}

/* Lineas separadoras claras */
[data-theme="dark"] .line {
  background: #30363d !important;
}

/* ---------- 9. FIX TEXTOS GENERICOS EN HOMES (sin clase de card) ---------- */
/* La seccion de iconos "Inicio/Cursado/Dias/Duracion" en BC home y similar en IA
   usa <h3> + <p> dentro de col-md-3 sin clase contenedora. */
[data-theme="dark"] .icons h3,
[data-theme="dark"] .icons p,
[data-theme="dark"] section h3,
[data-theme="dark"] section h4,
[data-theme="dark"] section h5,
[data-theme="dark"] section h6,
[data-theme="dark"] section p,
[data-theme="dark"] section li {
  color: #c9d1d9;
}
[data-theme="dark"] section h1,
[data-theme="dark"] section h2,
[data-theme="dark"] .section-heading {
  color: #f0f6fc !important;
}

/* Cuerpo docente (cards de docentes en home: img + h3 + p sin clase) */
[data-theme="dark"] .team-member h4,
[data-theme="dark"] .team-member h5,
[data-theme="dark"] .team-member p,
[data-theme="dark"] [class*="docente"] h3,
[data-theme="dark"] [class*="docente"] h4,
[data-theme="dark"] [class*="docente"] p {
  color: #c9d1d9 !important;
}

/* IA "Para quien va dirigido" usa col-md-4 sin clase de card.
   Targetea contenedores directos de iconos+texto */
[data-theme="dark"] .col-md-4 h3,
[data-theme="dark"] .col-md-4 h4,
[data-theme="dark"] .col-md-4 h5,
[data-theme="dark"] .col-md-6 h3,
[data-theme="dark"] .col-md-6 h4,
[data-theme="dark"] .col-md-6 h5,
[data-theme="dark"] .col-md-3 h3,
[data-theme="dark"] .col-md-3 h4 {
  color: #f0f6fc !important;
}
[data-theme="dark"] .col-md-4 p,
[data-theme="dark"] .col-md-6 p,
[data-theme="dark"] .col-md-3 p {
  color: #c9d1d9 !important;
}

/* Banner "Inscripcion 2026 abierta" usa style inline + .text-white + <a>.
   Mi regla global de "a" pisaba el text-white. Restituyo. */
[data-theme="dark"] .alert .text-white,
[data-theme="dark"] .alert a.text-white {
  color: #fff !important;
}

/* No atenuar fotos de docentes en dark (la regla img:not(.no-dim) las baja a 0.92) */
[data-theme="dark"] img.rounded-circle,
[data-theme="dark"] .team-member img,
[data-theme="dark"] [class*="docente"] img,
[data-theme="dark"] .docente-foto {
  opacity: 1 !important;
}

/* Texto blanco/light que Bootstrap pone en bg morados oscuros del sitio (.bg-purple, hero) */
[data-theme="dark"] .bg-purple,
[data-theme="dark"] [class*="bg-blockchain"],
[data-theme="dark"] [class*="bg-ia"] {
  color: #fff;
}
[data-theme="dark"] .bg-purple *,
[data-theme="dark"] [class*="bg-blockchain"] *,
[data-theme="dark"] [class*="bg-ia"] * {
  color: inherit;
}

/* ---------- 10. FIX BRUTAL: banner alert + iconos .icons ---------- */
/* El banner usa <div class="alert"> con bg inline. La regla generica de "a"
   pisaba a.text-white. Override con maxima especificidad. */
html[data-theme="dark"] .alert *,
html[data-theme="dark"] .alert .text-white,
html[data-theme="dark"] .alert a,
html[data-theme="dark"] div[class="alert text-center py-3"] *,
html[data-theme="dark"] div[class*="alert"] .fw-bold,
html[data-theme="dark"] div[class*="alert"] a {
  color: #ffffff !important;
}

/* Bootstrap alert variants: oscurecer el fondo manteniendo el matiz */
html[data-theme="dark"] .alert-warning {
  background: rgba(249, 115, 22, 0.12) !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
  color: #fdba74 !important;
}
html[data-theme="dark"] .alert-warning *,
html[data-theme="dark"] .alert-warning strong,
html[data-theme="dark"] .alert-warning em,
html[data-theme="dark"] .alert-warning i {
  color: #fdba74 !important;
}
html[data-theme="dark"] .alert-warning a {
  color: #ffedd5 !important;
  text-decoration: underline;
}

html[data-theme="dark"] .alert-info {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] .alert-info *,
html[data-theme="dark"] .alert-info a {
  color: #93c5fd !important;
}

html[data-theme="dark"] .alert-success {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #86efac !important;
}
html[data-theme="dark"] .alert-success *,
html[data-theme="dark"] .alert-success a {
  color: #86efac !important;
}

html[data-theme="dark"] .alert-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
}
html[data-theme="dark"] .alert-danger *,
html[data-theme="dark"] .alert-danger a {
  color: #fca5a5 !important;
}

html[data-theme="dark"] .alert-primary {
  background: rgba(167, 139, 250, 0.15) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #c4b5fd !important;
}
html[data-theme="dark"] .alert-primary *,
html[data-theme="dark"] .alert-primary a {
  color: #c4b5fd !important;
}

html[data-theme="dark"] .alert-secondary {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .alert-secondary *,
html[data-theme="dark"] .alert-secondary a {
  color: #cbd5e1 !important;
}

/* =====================================================================
   IN-PAGE <style> CLASSES: cards/boxes con fondo claro defindio dentro
   de cada HTML. Una sola regla las cubre todas (mas especifica con html[]).
   ===================================================================== */
html[data-theme="dark"] .arancel-card,
html[data-theme="dark"] .bank-box,
html[data-theme="dark"] .bc-card,
html[data-theme="dark"] .camino-alumno,
html[data-theme="dark"] .compare-table,
html[data-theme="dark"] .curso-card,
html[data-theme="dark"] .destinatario-card,
html[data-theme="dark"] .docente-card,
html[data-theme="dark"] .enfoque-card,
html[data-theme="dark"] .estrategia-block,
html[data-theme="dark"] .factura-box,
html[data-theme="dark"] .inscripcion-card,
html[data-theme="dark"] .licdia-card,
html[data-theme="dark"] .pago-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .prereq-item,
html[data-theme="dark"] .qa-card,
html[data-theme="dark"] .quiz-card,
html[data-theme="dark"] .quiz-wrapper,
html[data-theme="dark"] .quote-card,
html[data-theme="dark"] .requisito-card,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .total-hero,
html[data-theme="dark"] .lente-estrategica,
html[data-theme="dark"] .tip,
html[data-theme="dark"] .warn {
  background: #161b22 !important;
  background-color: #161b22 !important;
  border-color: rgba(167, 139, 250, 0.25) !important;
  color: #f0f6fc !important;
}

html[data-theme="dark"] .arancel-card *,
html[data-theme="dark"] .bank-box *,
html[data-theme="dark"] .bc-card *,
html[data-theme="dark"] .camino-alumno *,
html[data-theme="dark"] .compare-table *,
html[data-theme="dark"] .curso-card *,
html[data-theme="dark"] .destinatario-card *,
html[data-theme="dark"] .docente-card *,
html[data-theme="dark"] .enfoque-card *,
html[data-theme="dark"] .estrategia-block *,
html[data-theme="dark"] .factura-box *,
html[data-theme="dark"] .inscripcion-card *,
html[data-theme="dark"] .licdia-card *,
html[data-theme="dark"] .pago-card *,
html[data-theme="dark"] .plan-card *,
html[data-theme="dark"] .prereq-item *,
html[data-theme="dark"] .qa-card *,
html[data-theme="dark"] .quiz-card *,
html[data-theme="dark"] .quiz-wrapper *,
html[data-theme="dark"] .quote-card *,
html[data-theme="dark"] .requisito-card *,
html[data-theme="dark"] .stat-box *,
html[data-theme="dark"] .total-hero *,
html[data-theme="dark"] .lente-estrategica * {
  color: #f0f6fc !important;
}
/* Texto muted / small dentro de cards: gris claro pero distinto del titulo */
html[data-theme="dark"] .arancel-card .text-muted,
html[data-theme="dark"] .bank-box .text-muted,
html[data-theme="dark"] .bc-card .text-muted,
html[data-theme="dark"] .curso-card .text-muted,
html[data-theme="dark"] .destinatario-card .text-muted,
html[data-theme="dark"] .docente-card .text-muted,
html[data-theme="dark"] .enfoque-card .text-muted,
html[data-theme="dark"] .pago-card .text-muted,
html[data-theme="dark"] .plan-card .text-muted,
html[data-theme="dark"] .qa-card .text-muted,
html[data-theme="dark"] .quote-card .text-muted,
html[data-theme="dark"] .requisito-card .text-muted,
html[data-theme="dark"] .arancel-card small,
html[data-theme="dark"] .bank-box small,
html[data-theme="dark"] .pago-card small,
html[data-theme="dark"] .requisito-card small {
  color: #94a3b8 !important;
}

/* Tables hover en dark */
html[data-theme="dark"] table tr:hover td,
html[data-theme="dark"] .compare-table tr:hover td {
  background: rgba(167, 139, 250, 0.08) !important;
}

/* Pills semantic colors */
html[data-theme="dark"] .pill.green,
html[data-theme="dark"] .green {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #86efac !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}
html[data-theme="dark"] .pill.red,
html[data-theme="dark"] .red {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}
html[data-theme="dark"] .tip {
  background: rgba(59, 130, 246, 0.10) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}
html[data-theme="dark"] .tip * {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .warn {
  background: rgba(249, 115, 22, 0.10) !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
}
html[data-theme="dark"] .warn * {
  color: #fdba74 !important;
}

/* result-grey/yellow estaban antes, ampliamos por si quedaron sueltas */
html[data-theme="dark"] .result-grey {
  background: rgba(148, 163, 184, 0.10) !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .result-yellow {
  background: rgba(249, 115, 22, 0.10) !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
  color: #fdba74 !important;
}

/* Quiz button bg #fff (clase quiz-btn ya esta cubierta arriba pero refuerzo) */
html[data-theme="dark"] .quiz-btn {
  background: #161b22 !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
  color: #f0f6fc !important;
}

/* Btn CTA del home/inscripcion */
html[data-theme="dark"] .btn-cta {
  color: #ffffff !important;
}

/* Camino bolita (steps numericos circulares) */
html[data-theme="dark"] .camino-bolita {
  background: #a78bfa !important;
  color: #1a0a2e !important;
  border-color: #a78bfa !important;
}

/* o-grande / guion: numeros decorativos en blockchain */
html[data-theme="dark"] .o-grande {
  color: #a78bfa !important;
}
html[data-theme="dark"] .guion {
  color: #a78bfa !important;
}

/* =====================================================================
   BOOTSTRAP .list-group / .list-group-item — usados en seccion "Beneficios"
   Bootstrap por default les pone bg:#fff. En dark queda invisible.
   ===================================================================== */
html[data-theme="dark"] .list-group,
html[data-theme="dark"] .list-group-flush {
  background-color: transparent !important;
}
html[data-theme="dark"] .list-group-item {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #c9d1d9 !important;
}
html[data-theme="dark"] .list-group-item * {
  color: #c9d1d9 !important;
}
html[data-theme="dark"] .list-group-item span,
html[data-theme="dark"] .list-group-item p {
  color: #f0f6fc !important;
}
/* iconos check con color inline #1354A0 (IA) o #4C1C7F (BC) ya cubiertos arriba
   pero refuerzo aca por contexto */
html[data-theme="dark"] .list-group-item i.fa-check-circle,
html[data-theme="dark"] .list-group-item i.fas {
  /* IA: azul claro; el sweep general ya cambia los inline pero si llega "naked": */
  filter: brightness(1.4);
}

/* =====================================================================
   SECTIONS con bg inline claro (gradient o color solido)
   Cubrir todos los hex claros conocidos en el atributo style
   ===================================================================== */
/* Quiz-fit en IA: style="background: linear-gradient(135deg, #EBF1FB 0%, #ffffff 100%);" */
html[data-theme="dark"] section[style*="#EBF1FB"],
html[data-theme="dark"] section[style*="#ebf1fb"],
html[data-theme="dark"] section[style*="#FAFAFC"],
html[data-theme="dark"] section[style*="#fafafc"],
html[data-theme="dark"] section[style*="#f7f1fc"],
html[data-theme="dark"] section[style*="#F7F1FC"],
html[data-theme="dark"] section[style*="#f0f5ff"],
html[data-theme="dark"] section[style*="#F0F5FF"],
html[data-theme="dark"] section[style*="#ECE7F3"],
html[data-theme="dark"] section[style*="#ece7f3"],
html[data-theme="dark"] section[style*="#F3EBFB"],
html[data-theme="dark"] section[style*="#f3ebfb"],
html[data-theme="dark"] section[style*="0%, #ffffff"],
html[data-theme="dark"] section[style*="0%, #FFFFFF"],
html[data-theme="dark"] section[style*="0%, #fff "],
html[data-theme="dark"] section[style*=", #ffffff"],
html[data-theme="dark"] section[style*=", #FFFFFF"] {
  background: #0d1117 !important;
}

/* Mismo patron para divs con bg gradient claro inline */
html[data-theme="dark"] div[style*="linear-gradient"][style*="#EBF1FB"],
html[data-theme="dark"] div[style*="linear-gradient"][style*="#FAFAFC"],
html[data-theme="dark"] div[style*="linear-gradient"][style*="#f7f1fc"],
html[data-theme="dark"] div[style*="linear-gradient"][style*="#f0f5ff"],
html[data-theme="dark"] div[style*="linear-gradient"][style*="#ECE7F3"],
html[data-theme="dark"] div[style*="linear-gradient"][style*="#F3EBFB"] {
  background: #0d1117 !important;
}

/* Textos DENTRO de esas secciones que ahora son dark deben ser claros */
html[data-theme="dark"] section[style*="#EBF1FB"] h1,
html[data-theme="dark"] section[style*="#EBF1FB"] h2,
html[data-theme="dark"] section[style*="#EBF1FB"] h3,
html[data-theme="dark"] section[style*="#EBF1FB"] h4,
html[data-theme="dark"] section[style*="#EBF1FB"] .section-heading,
html[data-theme="dark"] section[style*="#ebf1fb"] h1,
html[data-theme="dark"] section[style*="#ebf1fb"] h2,
html[data-theme="dark"] section[style*="#ebf1fb"] h3,
html[data-theme="dark"] section[style*="#ebf1fb"] .section-heading,
html[data-theme="dark"] section[style*="#FAFAFC"] .section-heading,
html[data-theme="dark"] section[style*="#f7f1fc"] .section-heading,
html[data-theme="dark"] section[style*="#f0f5ff"] .section-heading,
html[data-theme="dark"] section[style*="#ECE7F3"] .section-heading,
html[data-theme="dark"] section[style*="#F3EBFB"] .section-heading {
  color: #f0f6fc !important;
}
html[data-theme="dark"] section[style*="#EBF1FB"] p,
html[data-theme="dark"] section[style*="#EBF1FB"] .text-muted,
html[data-theme="dark"] section[style*="#ebf1fb"] p,
html[data-theme="dark"] section[style*="#ebf1fb"] .text-muted {
  color: #c9d1d9 !important;
}

/* =====================================================================
   OVERRIDES de style2.css que tenian !important para light theme.
   style2.css carga ANTES de enhancements.css pero usa .blockchain-theme
   .ia-theme (clase del body) con especificidad alta + !important.
   Igualamos especificidad prefijando con html[data-theme="dark"].
   ===================================================================== */

/* Bordes con morado oscuro de marca → violet-400 en dark */
html[data-theme="dark"] .blockchain-theme #containerInfo {
  border-color: #a78bfa !important;
  background-color: rgba(167, 139, 250, 0.12) !important;
  color: #f0f6fc !important;
}

html[data-theme="dark"] .blockchain-theme .accordion-button:not(.collapsed) {
  color: #c4b5fd !important;
  background-color: rgba(167, 139, 250, 0.10) !important;
}

html[data-theme="dark"] .blockchain-theme .accordion-button:focus {
  border-color: #a78bfa !important;
  box-shadow: 0 0 0 0.25rem rgba(167, 139, 250, 0.25) !important;
}

html[data-theme="dark"] .blockchain-theme .alert-link {
  color: #c4b5fd !important;
}

html[data-theme="dark"] .blockchain-theme .breadcrumb-item a {
  color: #c4b5fd !important;
}

/* Anchor color rule: el selector original tiene 9 :not(), super especifico.
   Lo igualamos con el mismo + html[data-theme="dark"] adelante */
html[data-theme="dark"] .blockchain-theme a:not(.nav-link):not(.navbar-brand):not(.btn):not(.botonWPP):not(.text-info):not(.text-white) {
  color: #c4b5fd !important;
}
html[data-theme="dark"] .blockchain-theme a:not(.nav-link):not(.navbar-brand):not(.btn):not(.botonWPP):not(.text-info):not(.text-white):hover {
  color: #a78bfa !important;
}
html[data-theme="dark"] .blockchain-theme .container a:not(.nav-link):not(.navbar-brand):not(.btn):not(.botonWPP):not(.text-white) {
  color: #c4b5fd !important;
}

html[data-theme="dark"] .blockchain-theme #lic-ia a {
  color: #c4b5fd !important;
}

html[data-theme="dark"] .blockchain-theme .timeline > li .timeline-image {
  background-color: #2d1b69 !important;
  border-color: #a78bfa !important;
}

html[data-theme="dark"] .blockchain-theme .text-info,
html[data-theme="dark"] .blockchain-theme .text-primary,
html[data-theme="dark"] .blockchain-theme .link-primary {
  color: #c4b5fd !important;
}

/* btn-primary del blockchain-theme: mejorar contraste en dark */
html[data-theme="dark"] .blockchain-theme .btn-primary {
  background-color: #8B5CF6 !important;
  border-color: #a78bfa !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .blockchain-theme .btn-primary:hover,
html[data-theme="dark"] .blockchain-theme .btn-primary:focus {
  background-color: #a78bfa !important;
  border-color: #c4b5fd !important;
}

/* IA: equivalentes para azul oscuro #1C2E54 / #1354A0 → claros en dark */
html[data-theme="dark"] .ia-theme a:not(.nav-link):not(.navbar-brand):not(.btn):not(.botonWPP):not(.text-info):not(.text-white),
html[data-theme="dark"] .ia-theme .container a:not(.nav-link):not(.navbar-brand):not(.btn):not(.botonWPP):not(.text-white),
html[data-theme="dark"] .ia-theme .breadcrumb-item a,
html[data-theme="dark"] .ia-theme .text-info,
html[data-theme="dark"] .ia-theme .text-primary,
html[data-theme="dark"] .ia-theme .link-primary,
html[data-theme="dark"] .ia-theme .alert-link {
  color: #93c5fd !important;
}
html[data-theme="dark"] .ia-theme a:not(.nav-link):not(.navbar-brand):not(.btn):not(.botonWPP):not(.text-info):not(.text-white):hover {
  color: #bfdbfe !important;
}

html[data-theme="dark"] .ia-theme .accordion-button:not(.collapsed) {
  color: #93c5fd !important;
  background-color: rgba(59, 130, 246, 0.10) !important;
}
html[data-theme="dark"] .ia-theme .accordion-button:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
}

html[data-theme="dark"] .ia-theme .btn-primary {
  background-color: #1e3a8a !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .ia-theme .btn-primary:hover,
html[data-theme="dark"] .ia-theme .btn-primary:focus {
  background-color: #2563eb !important;
  border-color: #93c5fd !important;
}

/* Iconos del home: <i class="fa..."> con color inline #4C1C7F, dificil de ver sobre dark */
html[data-theme="dark"] .icons i.fa,
html[data-theme="dark"] .icons i.fas,
html[data-theme="dark"] .icons i.far,
html[data-theme="dark"] .icons i.fa-3x {
  color: #a78bfa !important;
  filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.4));
}

/* GLOBAL: cualquier icono Font Awesome con color inline morado oscuro de marca */
/* Selector por atributo pisa los style="color:#4C1C7F" inline */
html[data-theme="dark"] i[style*="#4C1C7F"],
html[data-theme="dark"] i[style*="#4c1c7f"],
html[data-theme="dark"] i[style*="color: #4C1C7F"],
html[data-theme="dark"] i[style*="color:#4C1C7F"],
html[data-theme="dark"] span[style*="#4C1C7F"],
html[data-theme="dark"] span[style*="#4c1c7f"] {
  color: #a78bfa !important;
}

/* SVGs con fill/stroke morado oscuro inline */
html[data-theme="dark"] svg[fill="#4C1C7F"],
html[data-theme="dark"] svg[fill="#4c1c7f"],
html[data-theme="dark"] svg path[fill="#4C1C7F"],
html[data-theme="dark"] svg path[fill="#4c1c7f"],
html[data-theme="dark"] svg [fill="#4C1C7F"],
html[data-theme="dark"] svg [fill="#4c1c7f"] {
  fill: #a78bfa !important;
}
html[data-theme="dark"] svg[stroke="#4C1C7F"],
html[data-theme="dark"] svg [stroke="#4C1C7F"],
html[data-theme="dark"] svg [stroke="#4c1c7f"] {
  stroke: #a78bfa !important;
}

/* =====================================================================
   SWEEP MASIVO: inline colors oscuros sobre dark background
   ===================================================================== */

/* TEXTO inline: morados oscuros de marca → violet-400 (#a78bfa) */
html[data-theme="dark"] [style*="color:#4C1C7F"],
html[data-theme="dark"] [style*="color: #4C1C7F"],
html[data-theme="dark"] [style*="color:#4c1c7f"],
html[data-theme="dark"] [style*="color: #4c1c7f"] {
  color: #a78bfa !important;
}

/* TEXTO inline: azules oscuros → sky/blue claro (#93c5fd) */
html[data-theme="dark"] [style*="color: #1C2E54"],
html[data-theme="dark"] [style*="color:#1C2E54"],
html[data-theme="dark"] [style*="color: #1a4aad"],
html[data-theme="dark"] [style*="color:#1a4aad"],
html[data-theme="dark"] [style*="color: #1354A0"],
html[data-theme="dark"] [style*="color:#1354A0"] {
  color: #93c5fd !important;
}

/* TEXTO inline: grises oscuros (#4a4a4a #3a3a3a #6a6a6a) → gris claro legible */
html[data-theme="dark"] [style*="color:#4a4a4a"],
html[data-theme="dark"] [style*="color: #4a4a4a"],
html[data-theme="dark"] [style*="color:#3a3a3a"],
html[data-theme="dark"] [style*="color: #3a3a3a"],
html[data-theme="dark"] [style*="color:#6a6a6a"],
html[data-theme="dark"] [style*="color: #6a6a6a"],
html[data-theme="dark"] [style*="color:#6c757d"],
html[data-theme="dark"] [style*="color: #6c757d"] {
  color: #c9d1d9 !important;
}

/* TEXTO inline: azul claro #a8c5e0 ya tiene buen contraste, solo lo levantamos un toque */
html[data-theme="dark"] [style*="color:#a8c5e0"],
html[data-theme="dark"] [style*="color: #a8c5e0"] {
  color: #cbd5e1 !important;
}

/* FONDOS inline claros (#FAFAFC, #f7f1fc, #EBF1FB, #fff, #ffffff) → fondo oscuro
   ENORME: estos crean bloques blancos en medio del dark mode */
html[data-theme="dark"] [style*="background:#FAFAFC"],
html[data-theme="dark"] [style*="background: #FAFAFC"],
html[data-theme="dark"] [style*="background-color:#FAFAFC"],
html[data-theme="dark"] [style*="background-color: #FAFAFC"],
html[data-theme="dark"] [style*="background:#fafafc"],
html[data-theme="dark"] [style*="background:#f7f1fc"],
html[data-theme="dark"] [style*="background: #f7f1fc"],
html[data-theme="dark"] [style*="background-color:#f7f1fc"],
html[data-theme="dark"] [style*="background-color: #f7f1fc"],
html[data-theme="dark"] [style*="background:#EBF1FB"],
html[data-theme="dark"] [style*="background: #EBF1FB"],
html[data-theme="dark"] [style*="background-color:#EBF1FB"],
html[data-theme="dark"] [style*="background-color: #EBF1FB"],
html[data-theme="dark"] [style*="background:#ebf1fb"],
html[data-theme="dark"] [style*="background:#fff;"],
html[data-theme="dark"] [style*="background: #fff;"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background-color:#fff;"],
html[data-theme="dark"] [style*="background-color: #fff;"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"] {
  background: #161b22 !important;
  background-color: #161b22 !important;
  border-color: rgba(167, 139, 250, 0.2) !important;
}

/* Y los textos DENTRO de esos bloques que ahora son dark, fuerzan claros */
html[data-theme="dark"] [style*="background:#FAFAFC"] *,
html[data-theme="dark"] [style*="background: #FAFAFC"] *,
html[data-theme="dark"] [style*="background-color:#FAFAFC"] *,
html[data-theme="dark"] [style*="background-color: #FAFAFC"] *,
html[data-theme="dark"] [style*="background:#f7f1fc"] *,
html[data-theme="dark"] [style*="background-color:#f7f1fc"] *,
html[data-theme="dark"] [style*="background:#EBF1FB"] *,
html[data-theme="dark"] [style*="background-color:#EBF1FB"] *,
html[data-theme="dark"] [style*="background:#fff;"] *,
html[data-theme="dark"] [style*="background:#ffffff"] *,
html[data-theme="dark"] [style*="background-color:#fff;"] *,
html[data-theme="dark"] [style*="background-color:#ffffff"] * {
  color: #f0f6fc !important;
}
html[data-theme="dark"] [style*="background:#FAFAFC"] p,
html[data-theme="dark"] [style*="background:#f7f1fc"] p,
html[data-theme="dark"] [style*="background:#EBF1FB"] p,
html[data-theme="dark"] [style*="background:#fff;"] p,
html[data-theme="dark"] [style*="background:#ffffff"] p,
html[data-theme="dark"] [style*="background-color:#FAFAFC"] p,
html[data-theme="dark"] [style*="background-color:#f7f1fc"] p,
html[data-theme="dark"] [style*="background-color:#EBF1FB"] p,
html[data-theme="dark"] [style*="background-color:#fff;"] p,
html[data-theme="dark"] [style*="background-color:#ffffff"] p {
  color: #c9d1d9 !important;
}

/* FONDOS azules/morados oscuros inline → mantener pero ajustar a violet/blue dark */
html[data-theme="dark"] [style*="background:#1C2E54"],
html[data-theme="dark"] [style*="background-color:#1C2E54"],
html[data-theme="dark"] [style*="background:#193d76"],
html[data-theme="dark"] [style*="background-color:#193d76"],
html[data-theme="dark"] [style*="background:#1a63c0"],
html[data-theme="dark"] [style*="background-color:#1a63c0"] {
  background: #1e3a8a !important;
  background-color: #1e3a8a !important;
}
html[data-theme="dark"] [style*="background:#4C1C7F"],
html[data-theme="dark"] [style*="background-color:#4C1C7F"],
html[data-theme="dark"] [style*="background:#261951"],
html[data-theme="dark"] [style*="background-color:#261951"] {
  background: #2d1b69 !important;
  background-color: #2d1b69 !important;
}

html[data-theme="dark"] .icons h3,
html[data-theme="dark"] .icons p {
  color: #f0f6fc !important;
}
html[data-theme="dark"] .icons p {
  color: #c9d1d9 !important;
}

/* Cuerpo docente: cards con foto + nombre + descripcion + link "Ver perfil" */
html[data-theme="dark"] section img.rounded-circle,
html[data-theme="dark"] .team-member img,
html[data-theme="dark"] img[class*="docente"],
html[data-theme="dark"] img[alt*="Petrocelli"],
html[data-theme="dark"] img[alt*="Fernández"],
html[data-theme="dark"] img[alt*="Olivares"],
html[data-theme="dark"] img[alt*="Prados"],
html[data-theme="dark"] img[alt*="Guevara"],
html[data-theme="dark"] img[alt*="Ciro"],
html[data-theme="dark"] img[alt*="Matuk"],
html[data-theme="dark"] img[alt*="Gasch"] {
  opacity: 1 !important;
  filter: brightness(0.95);
}

/* Para cards de docentes que son col-md-X con h4/h3 + p sin clase */
html[data-theme="dark"] .team-member h3,
html[data-theme="dark"] .team-member h4,
html[data-theme="dark"] .team-member h5,
html[data-theme="dark"] .team-member p,
html[data-theme="dark"] .team-member a {
  color: #f0f6fc !important;
}
html[data-theme="dark"] .team-member p {
  color: #c9d1d9 !important;
}

/* Asegura legibilidad en cualquier texto dentro de col-* */
html[data-theme="dark"] [class*="col-"] h3,
html[data-theme="dark"] [class*="col-"] h4,
html[data-theme="dark"] [class*="col-"] h5 {
  color: #f0f6fc !important;
}
html[data-theme="dark"] [class*="col-"] p,
html[data-theme="dark"] [class*="col-"] small,
html[data-theme="dark"] [class*="col-"] span:not(.badge):not(.pin):not([class*="text-"]) {
  color: #c9d1d9 !important;
}

/* Navbar del blog (no es el mismo que las diplomaturas) */
[data-theme="dark"] .navbar.navbar-expand-lg {
  background: #0d1117 !important;
  border-bottom-color: #30363d !important;
}

/* Respeta usuarios con reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .card:hover,
  .curso-card:hover,
  .feature-card:hover {
    transform: none !important;
  }
}

/* ---------- 11. SAFETY NET: si JS de AOS no carga, no escondas todo ----------
   AOS por defecto pone opacity 0 a todos los [data-aos]. Si AOS-JS falla o tarda,
   los headers/cards quedan invisibles. Garantizamos legibilidad despues de 2s
   (suficiente para que AOS-JS termine de inicializar) via JS en enhancements.js. */

/* =====================================================================
   VIDEO CHARLA INFORMATIVA — wrapper con marco morado de marca
   ===================================================================== */
.video-charla-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(76, 28, 127, 0.18),
              0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(76, 28, 127, 0.15);
  background: #000;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s ease;
  position: relative;
}
.video-charla-wrap:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(76, 28, 127, 0.28),
              0 6px 18px rgba(0, 0, 0, 0.12);
}
.video-charla-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Dark mode: marco con violeta-300 más claro para mejor contraste */
html[data-theme="dark"] .video-charla-wrap {
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 10px 30px rgba(167, 139, 250, 0.15),
              0 4px 12px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .video-charla-wrap:hover {
  box-shadow: 0 18px 45px rgba(167, 139, 250, 0.30),
              0 6px 18px rgba(0, 0, 0, 0.6);
}

/* Section heading del bloque video sigue paleta general */
#video-charla .section-heading {
  letter-spacing: 0.5px;
}

/* =====================================================================
   ALIAS dev-ia-theme = ia-theme (algunas paginas usan una, otras otra)
   ===================================================================== */
html[data-theme="dark"] .dev-ia-theme .btn-primary {
  background-color: #1e3a8a !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .dev-ia-theme .btn-primary:hover,
html[data-theme="dark"] .dev-ia-theme .btn-primary:focus {
  background-color: #2563eb !important;
  border-color: #93c5fd !important;
}

/* Tambien en LIGHT, queremos el btn-primary del header IA en azul de marca,
   no en lo que sea default de Bootstrap */
.ia-theme .masthead .btn-primary,
.dev-ia-theme .masthead .btn-primary,
.ia-theme header.masthead .btn-primary,
.dev-ia-theme header.masthead .btn-primary {
  background-color: #1354A0 !important;
  border-color: #1354A0 !important;
  color: #ffffff !important;
}
.ia-theme .masthead .btn-primary:hover,
.dev-ia-theme .masthead .btn-primary:hover,
.ia-theme header.masthead .btn-primary:hover,
.dev-ia-theme header.masthead .btn-primary:hover {
  background-color: #1a63c0 !important;
  border-color: #1a63c0 !important;
  color: #ffffff !important;
}

/* En dark: el btn del header IA usa el azul brillante de la paleta */
html[data-theme="dark"] .ia-theme .masthead .btn-primary,
html[data-theme="dark"] .dev-ia-theme .masthead .btn-primary,
html[data-theme="dark"] .ia-theme header.masthead .btn-primary,
html[data-theme="dark"] .dev-ia-theme header.masthead .btn-primary {
  background-color: #1a63c0 !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .ia-theme .masthead .btn-primary:hover,
html[data-theme="dark"] .dev-ia-theme .masthead .btn-primary:hover {
  background-color: #2563eb !important;
  border-color: #93c5fd !important;
}

/* Tambien duplicar otros overrides claves para dev-ia-theme */
html[data-theme="dark"] .dev-ia-theme a:not(.nav-link):not(.navbar-brand):not(.btn):not(.botonWPP):not(.text-info):not(.text-white),
html[data-theme="dark"] .dev-ia-theme .container a:not(.nav-link):not(.navbar-brand):not(.btn):not(.botonWPP):not(.text-white),
html[data-theme="dark"] .dev-ia-theme .breadcrumb-item a,
html[data-theme="dark"] .dev-ia-theme .text-info,
html[data-theme="dark"] .dev-ia-theme .text-primary,
html[data-theme="dark"] .dev-ia-theme .link-primary,
html[data-theme="dark"] .dev-ia-theme .alert-link {
  color: #93c5fd !important;
}