/* ==========================================================================
   TEMA NOCHE — premium y oscuro de alto impacto (prompt 1)
   Azul noche extremo, cristal, tipografía blanca y degradados neón.
   Se activa con <html data-tema="noche">.
   ========================================================================== */

html[data-tema="noche"]{
  --bg:#0b0f19;
  --bg2:#0e1421;
  --card:#161b26;
  --card2:#1b2130;
  --line:rgba(255,255,255,.09);
  --txt:#ffffff;
  --mut:#9aa6b8;
  --cian:#00f2fe;
  --neon:#4facfe;
  --cristal:rgba(255,255,255,.03);
}
html[data-tema="noche"] body{background:var(--bg);color:#fff}

/* ---------- cabecera ---------- */
html[data-tema="noche"] header.top{
  background:rgba(11,15,25,.75);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
html[data-tema="noche"] header .logo,
html[data-tema="noche"] header .brand{color:#fff}
html[data-tema="noche"] header .logo span,
html[data-tema="noche"] header .brand .cn{
  background:linear-gradient(135deg,#00f2fe,#4facfe);color:#06121f;
}
html[data-tema="noche"] header.top nav.main a,
html[data-tema="noche"] header.top nav.main button.btn.lang,
html[data-tema="noche"] header a.volver,
html[data-tema="noche"] header.top nav:not(.main) a{
  background:var(--cristal);
  color:#eaf2ff;-webkit-text-fill-color:#eaf2ff;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  box-shadow:none;
  transform:none;
}
html[data-tema="noche"] header.top nav.main a:hover,
html[data-tema="noche"] header a.volver:hover,
html[data-tema="noche"] header.top nav:not(.main) a:hover{
  background:rgba(79,172,254,.16);
  border-color:rgba(79,172,254,.55);
  transform:translateY(-1px);
}
html[data-tema="noche"] header.top nav.main a .gratis,
html[data-tema="noche"] header .gratis{
  background:linear-gradient(135deg,#ff416c,#ff4b2b) !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;
}

/* ---------- caja de idioma: cristal ---------- */
html[data-tema="noche"] .elige{
  background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:none;
}
html[data-tema="noche"] .elige-titulo{color:#fff}
html[data-tema="noche"] .elige-titulo span{color:#9aa6b8}
html[data-tema="noche"] .elige-botones button{
  background:rgba(255,255,255,.06);color:#eaf2ff;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:none;
}
html[data-tema="noche"] .elige-botones button:hover{
  background:linear-gradient(135deg,rgba(0,242,254,.2),rgba(79,172,254,.2));
  border-color:rgba(79,172,254,.6);color:#fff;
}

/* ---------- héroe ---------- */
html[data-tema="noche"] .hero{
  background:
    radial-gradient(60% 50% at 75% 45%, rgba(79,172,254,.13) 0%, transparent 70%),
    radial-gradient(45% 40% at 20% 15%, rgba(0,242,254,.08) 0%, transparent 70%),
    var(--bg);
}
html[data-tema="noche"] .hero .wrap{
  /* cristal ahumado: el robot se intuye difuminado detras, como en amarillo */
  background:rgba(19,24,34,.54);
  -webkit-backdrop-filter:blur(11px) saturate(1.15);
          backdrop-filter:blur(11px) saturate(1.15);
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
html[data-tema="noche"] .hero h1{color:#fff;text-shadow:none}
html[data-tema="noche"] .hero h1 .grad{
  background:linear-gradient(135deg,#00f2fe 0%,#4facfe 100%) !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-background-clip:text !important;
          background-clip:text !important;
  padding:0 .06em;
  border-radius:0;
}
html[data-tema="noche"] .hero .lead{color:#b9c4d4;text-shadow:none;font-size:18px}
html[data-tema="noche"] .kicker{
  background:rgba(255,255,255,.05);color:#93a4bd;
  border:1px solid rgba(255,255,255,.1);border-radius:999px;
}

/* botón principal: degradado rojo-naranja con brillo */
html[data-tema="noche"] .hero .cta .btn{
  background:linear-gradient(to right,#ff416c,#ff4b2b);
  color:#fff;-webkit-text-fill-color:#fff;
  border:0;border-radius:14px;
  box-shadow:0 10px 30px rgba(255,75,43,.35);
  transform:none;
}
html[data-tema="noche"] .hero .cta .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(255,75,43,.5);
  filter:brightness(1.06);
}
html[data-tema="noche"] .hero .cta .btn + .btn{
  background:rgba(255,255,255,.06) !important;
  color:#eaf2ff !important;-webkit-text-fill-color:#eaf2ff !important;
  border:1px solid rgba(255,255,255,.14);box-shadow:none;
}
html[data-tema="noche"] .hero .cta .btn + .btn:hover{
  background:rgba(79,172,254,.16) !important;border-color:rgba(79,172,254,.6);
}
html[data-tema="noche"] .hero .trust span{
  background:rgba(255,255,255,.04);color:#c8d3e2;-webkit-text-fill-color:#c8d3e2;
  border:1px solid rgba(255,255,255,.09);border-radius:999px;box-shadow:none;
  transform:none;
}
html[data-tema="noche"] .hero-fondo img{filter:drop-shadow(0 30px 60px rgba(0,0,0,.75))}

/* ---------- tarjetas ---------- */
html[data-tema="noche"] .door,
html[data-tema="noche"] .card,
html[data-tema="noche"] .caracter-caja,
html[data-tema="noche"] .price-item{
  background:#161b26;border:1px solid rgba(255,255,255,.07);border-radius:24px;
  box-shadow:0 20px 50px rgba(0,0,0,.4);color:#e8eef7;
}
html[data-tema="noche"] .door h3,
html[data-tema="noche"] .card h3,
html[data-tema="noche"] .sec-head h2{color:#fff}
html[data-tema="noche"] .door p,
html[data-tema="noche"] .card p{color:#aab6c8}
html[data-tema="noche"] .sec-head p{color:#8b98ac}
html[data-tema="noche"] .door ul li,
html[data-tema="noche"] .card ul li{color:#c2cddd}
html[data-tema="noche"] .door .bi,
html[data-tema="noche"] .card .bi{color:#4facfe;opacity:.9}
html[data-tema="noche"] .ico-img{
  filter:grayscale(1) brightness(1.6) sepia(.4) hue-rotate(170deg) saturate(2);
}

/* carácter del día */
html[data-tema="noche"] .caracter-hz{
  background:linear-gradient(135deg,#00f2fe,#4facfe);color:#06121f;border-radius:16px;
}
html[data-tema="noche"] .caracter-py{color:#4facfe}
html[data-tema="noche"] .caracter-es{color:#fff}
html[data-tema="noche"] .caracter-ej{color:#9aa6b8}

html[data-tema="noche"] .door .btn,
html[data-tema="noche"] .card .btn,
html[data-tema="noche"] .caracter-acc .btn{
  background:rgba(255,255,255,.07) !important;color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:1px solid rgba(255,255,255,.14);box-shadow:none;border-radius:12px;
}
html[data-tema="noche"] .door .btn:hover,
html[data-tema="noche"] .card .btn:hover{
  background:rgba(79,172,254,.2) !important;border-color:rgba(79,172,254,.6);
}

/* ---------- pie ---------- */
html[data-tema="noche"] footer{background:#070a11;color:#8b98ac;border-top:1px solid rgba(255,255,255,.07)}
html[data-tema="noche"] footer nav a{background:transparent;color:#c2cddd;border:1px solid rgba(255,255,255,.14);border-radius:999px}
html[data-tema="noche"] footer nav a:hover{background:rgba(79,172,254,.16);border-color:rgba(79,172,254,.6);color:#fff}

/* ---------- cursos ---------- */
html[data-tema="noche"] .caja,
html[data-tema="noche"] .leccion,
html[data-tema="noche"] .tono,
html[data-tema="noche"] .palabra{
  background:#161b26;border:1px solid rgba(255,255,255,.07);border-radius:24px;
  color:#e8eef7;box-shadow:0 18px 40px rgba(0,0,0,.35);
}
html[data-tema="noche"] .leccion h3,
html[data-tema="noche"] .caja h2{color:#fff}
html[data-tema="noche"] .leccion p{color:#aab6c8}
html[data-tema="noche"] .leccion .num{background:linear-gradient(135deg,#00f2fe,#4facfe);color:#06121f}
html[data-tema="noche"] .barra{background:#0e1421;border:1px solid rgba(255,255,255,.1)}
html[data-tema="noche"] .barra i{background:linear-gradient(to right,#00f2fe,#4facfe)}
html[data-tema="noche"] .aviso{background:rgba(79,172,254,.14);color:#cfe6ff;border-radius:12px}
html[data-tema="noche"] .opcion{
  background:#1b2130;color:#e8eef7;border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:none;
}
html[data-tema="noche"] .opcion:hover{border-color:rgba(79,172,254,.6)}
html[data-tema="noche"] .opcion.ok{background:#0c5a4b;border-color:#12a08a;color:#fff}
html[data-tema="noche"] .opcion.mal{background:#7f1d1d;border-color:#ef4444;color:#fff}
html[data-tema="noche"] .tono .py,
html[data-tema="noche"] .palabra .py{color:#4facfe}
html[data-tema="noche"] .pregunta,
html[data-tema="noche"] .progreso-txt{color:#fff}
html[data-tema="noche"] input#nombre{background:#0e1421;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:12px}

html[data-tema="noche"] .leccion button,
html[data-tema="noche"] button.principal,
html[data-tema="noche"] .pie-nav button:not(.chico),
html[data-tema="noche"] #btnBajar,
html[data-tema="noche"] #btnVer,
html[data-tema="noche"] button.chico{
  background:linear-gradient(to right,#ff416c,#ff4b2b);color:#fff;-webkit-text-fill-color:#fff;
  border:0;border-radius:12px;box-shadow:0 8px 22px rgba(255,75,43,.3);
}
html[data-tema="noche"] #btnTema{
  background:rgba(255,255,255,.05) !important;color:#eaf2ff !important;
  -webkit-text-fill-color:#eaf2ff !important;border:1px solid rgba(255,255,255,.12);
}

/* guías */
html[data-tema="noche"] .zone-head h1{color:#fff}
html[data-tema="noche"] .art,
html[data-tema="noche"] .tip,
html[data-tema="noche"] .trampa,
html[data-tema="noche"] .aviso-medico{
  background:#161b26;border:1px solid rgba(255,255,255,.07);color:#dbe4f0;border-radius:20px;
}

/* aquí nada va torcido */
html[data-tema="noche"] header.top nav.main > *,
html[data-tema="noche"] .hero .cta .btn,
html[data-tema="noche"] .hero .trust span{transform:none !important}


/* =====================================================================
   Botón principal unificado con la paleta (antes rojo-naranja)
   ===================================================================== */
html[data-tema="noche"] .hero .cta .btn{
  background:linear-gradient(to right,#00f2fe 0%,#4facfe 100%);
  color:#06121f;
  -webkit-text-fill-color:#06121f;
  border:0;border-radius:14px;
  box-shadow:0 12px 34px rgba(79,172,254,.35);
}
html[data-tema="noche"] .hero .cta .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 44px rgba(79,172,254,.5);
  filter:brightness(1.07);
}
/* el secundario, cristal con borde cian */
html[data-tema="noche"] .hero .cta .btn + .btn{
  background:rgba(255,255,255,.05) !important;
  color:#d8ecff !important;-webkit-text-fill-color:#d8ecff !important;
  border:1px solid rgba(79,172,254,.45) !important;
  box-shadow:none;
}
/* botones de los cursos, también en cian */
html[data-tema="noche"] .leccion button,
html[data-tema="noche"] button.principal,
html[data-tema="noche"] .pie-nav button:not(.chico),
html[data-tema="noche"] #btnBajar,
html[data-tema="noche"] #btnVer,
html[data-tema="noche"] button.chico{
  background:linear-gradient(to right,#00f2fe,#4facfe);
  color:#06121f;-webkit-text-fill-color:#06121f;
  border:0;border-radius:12px;box-shadow:0 8px 22px rgba(79,172,254,.3);
}
/* la etiqueta GRATIS deja de ser roja: cian sobre fondo oscuro */
html[data-tema="noche"] header.top nav.main a .gratis,
html[data-tema="noche"] header .gratis{
  background:linear-gradient(135deg,#00f2fe,#4facfe) !important;
  color:#06121f !important;-webkit-text-fill-color:#06121f !important;
}


/* =====================================================================
   GUÍAS dentro del tema oscuro (salud y programación)
   ===================================================================== */
html[data-tema="noche"] .top,
html[data-tema="noche"] header.top{background:#0b0f19;border-bottom:1px solid rgba(255,255,255,.07)}
html[data-tema="noche"] body{background:#0b0f19 !important}
html[data-tema="noche"] .brand,
html[data-tema="noche"] .brand .cn{color:#fff}
html[data-tema="noche"] .crumbs,
html[data-tema="noche"] .crumbs a{color:#93a4bd}
html[data-tema="noche"] .zone-head h1{color:#fff}
html[data-tema="noche"] .zone-head p{color:#b9c4d4}
html[data-tema="noche"] .kicker{background:rgba(255,255,255,.05);color:#93a4bd;border:1px solid rgba(255,255,255,.1)}

/* tarjetas de las guías */
html[data-tema="noche"] .art,
html[data-tema="noche"] .caja,
html[data-tema="noche"] .tip,
html[data-tema="noche"] .trampa,
html[data-tema="noche"] .nota,
html[data-tema="noche"] .lista,
html[data-tema="noche"] .aviso-medico{
  background:#161b26 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#e8eef7 !important;
  border-radius:20px;
}
html[data-tema="noche"] .art h2,
html[data-tema="noche"] .art h3,
html[data-tema="noche"] .caja h2,
html[data-tema="noche"] .caja h3{color:#fff}
html[data-tema="noche"] .art p,
html[data-tema="noche"] .art li,
html[data-tema="noche"] .caja p,
html[data-tema="noche"] .caja li{color:#c2cddd}
html[data-tema="noche"] .ej{background:#0e1421;border-left-color:#4facfe;color:#cfe6ff}
html[data-tema="noche"] .aviso-medico{border-left:6px solid #ff4b2b}

/* botones de las guías y del listado de apartados */
html[data-tema="noche"] .card .btn,
html[data-tema="noche"] .door .btn,
html[data-tema="noche"] .art .btn,
html[data-tema="noche"] .caja .btn{
  background:linear-gradient(to right,#00f2fe,#4facfe) !important;
  color:#06121f !important;
  -webkit-text-fill-color:#06121f !important;
  border:0;border-radius:12px;
  box-shadow:0 8px 22px rgba(79,172,254,.28);
}
html[data-tema="noche"] footer{background:#070a11;color:#93a4bd}
html[data-tema="noche"] footer a{color:#cfe6ff}

html[data-tema="noche"] .kicker,
html[data-tema="noche"] .zone-head .kicker{
  background:rgba(255,255,255,.07) !important;
  color:#cfe6ff !important;
  border:1px solid rgba(255,255,255,.12) !important;
}


/* el bloque de seguridad tenía fondo crema con letra clara: invisible */
html[data-tema="noche"] .seguridad,
html[data-tema="noche"] .seguridad *{
  background:transparent !important;
  color:#dbe4f0 !important;
}
html[data-tema="noche"] .seguridad{
  background:#161b26 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px;
  padding:22px 24px;
}
html[data-tema="noche"] .seguridad b,
html[data-tema="noche"] .seguridad strong{color:#fff !important}
html[data-tema="noche"] .seguridad li{color:#c2cddd !important}


/* =====================================================================
   Cuerpo de los artículos en oscuro: el texto salía gris oscuro sobre negro
   ===================================================================== */
html[data-tema="noche"] .post,
html[data-tema="noche"] .post p,
html[data-tema="noche"] .post li,
html[data-tema="noche"] .narrow p,
html[data-tema="noche"] .narrow li{color:#c8d3e2 !important}
html[data-tema="noche"] .post h1,
html[data-tema="noche"] .post h2,
html[data-tema="noche"] .post h3,
html[data-tema="noche"] .post h4{color:#ffffff !important}
html[data-tema="noche"] .post strong,
html[data-tema="noche"] .post b{color:#ffffff !important}
html[data-tema="noche"] .post a{color:#7fc9ff}
html[data-tema="noche"] .post-meta{color:#8b98ac !important}
html[data-tema="noche"] .cat,
html[data-tema="noche"] .post .tag{
  background:rgba(255,255,255,.07) !important;
  color:#cfe6ff !important;
  border:1px solid rgba(255,255,255,.14) !important;
}
html[data-tema="noche"] .post .hero,
html[data-tema="noche"] .post .big{
  background:#161b26 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#c8d3e2 !important;
}
html[data-tema="noche"] .post .ej,
html[data-tema="noche"] .post .tip,
html[data-tema="noche"] .post .trampa{
  background:#161b26 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#c8d3e2 !important;
}
html[data-tema="noche"] .post .ej{border-left:5px solid #4facfe !important}
html[data-tema="noche"] .post .num{
  background:linear-gradient(to right,#00f2fe,#4facfe) !important;
  color:#06121f !important;
}
html[data-tema="noche"] .seguridad{
  background:#161b26 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#c8d3e2 !important;
  border-radius:18px;
  padding:22px 24px;
}
html[data-tema="noche"] .seguridad li,
html[data-tema="noche"] .seguridad p{color:#c8d3e2 !important}
html[data-tema="noche"] .seguridad strong,
html[data-tema="noche"] .seguridad b{color:#fff !important}