/* static/css/tema-oscuro.css — ajustes del tema oscuro para las páginas que ya tenían
   colores claros fijos. Bootstrap (data-bs-theme="dark") resuelve formularios, modales y alertas. */

html[data-tema="oscuro"] {
  --bs-body-bg: #050a1c;
  --bs-body-color: #f4f4ff;
  --bs-secondary-color: #a3a3c2;
  --bs-tertiary-bg: #0b1633;
  --bs-border-color: rgba(255, 255, 255, 0.1);
  --bs-card-bg: #0b1633;
  --bs-modal-bg: #0b1633;
}

html[data-tema="oscuro"] .card,
html[data-tema="oscuro"] .modal-content {
  --bs-card-bg: #0b1633;
  background-color: #0b1633;
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-tema="oscuro"] .form-control,
html[data-tema="oscuro"] .form-select {
  background-color: #0a1430;
  border-color: rgba(255, 255, 255, 0.08);
  color: #f4f4ff;
}

html[data-tema="oscuro"] .form-control:focus,
html[data-tema="oscuro"] .form-select:focus {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.12);
}

html[data-tema="oscuro"] .btn-exten,
html[data-tema="oscuro"] .btn-vino { background: #1d6bff; border-color: rgba(255, 255, 255, 0.08); box-shadow: none; }
html[data-tema="oscuro"] .btn-exten:hover,
html[data-tema="oscuro"] .btn-vino:hover { background: #1556d6; border-color: transparent; }

html[data-tema="oscuro"] .btn-volver { background: #11214a; border-color: rgba(255, 255, 255, 0.08); }
html[data-tema="oscuro"] .btn-volver:hover { background: #1d6bff; border-color: rgba(255, 255, 255, 0.16); }

/* ---------- Footer ---------- */
/* Negro puro: se separa claramente del azul marino de la página */
html[data-tema="oscuro"] .footer-app {
  background: #000;
  border-image: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-tema="oscuro"] .footer-base { border-top-color: rgba(255, 255, 255, 0.06); }

/* ---------- Página de cada programa ---------- */
html[data-tema="oscuro"] .vp-card,
html[data-tema="oscuro"] .vp-pub {
  background: #0b1633;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

html[data-tema="oscuro"] .vp-titulo,
html[data-tema="oscuro"] .vp-card h2,
html[data-tema="oscuro"] .vp-galeria-titulo,
html[data-tema="oscuro"] .vp-presentador-nombre,
html[data-tema="oscuro"] .vp-contacto-linea,
html[data-tema="oscuro"] .vp-pub-autor strong { color: #f4f4ff; }

html[data-tema="oscuro"] .vp-titulo::after { background: linear-gradient(90deg, #1d6bff, #7cc4ff); }
html[data-tema="oscuro"] .vp-volver { background: #1d6bff; box-shadow: none; }
html[data-tema="oscuro"] .vp-descripcion,
html[data-tema="oscuro"] .vp-pub-texto { color: #c9c9e3; }
html[data-tema="oscuro"] .vp-pildora-horario { background: rgba(29, 107, 255, 0.16); color: #bfe0ff; }
html[data-tema="oscuro"] .vp-icono-circulo { background: #1d6bff; }
html[data-tema="oscuro"] .vp-icono-circulo.azul { background: #2563eb; }
html[data-tema="oscuro"] .vp-presentador { background: linear-gradient(90deg, rgba(29, 107, 255, 0.18), transparent); }
html[data-tema="oscuro"] .vp-presentador-etiqueta { color: #9fd0ff; }
html[data-tema="oscuro"] .vp-presentador-foto { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); border-color: #0b1633; }
html[data-tema="oscuro"] .vp-red-card { background: #11214a; border-color: rgba(255, 255, 255, 0.08); color: #f4f4ff; }
html[data-tema="oscuro"] .vp-red-datos span { color: #a3a3c2; }
html[data-tema="oscuro"] .vp-publicar { background: #11214a; border-color: rgba(255, 255, 255, 0.08); }
html[data-tema="oscuro"] .vp-publicar textarea { background: #0a1430; border-color: rgba(255, 255, 255, 0.08); color: #f4f4ff; }
html[data-tema="oscuro"] .vp-me-gusta { background: #11214a; border-color: rgba(255, 255, 255, 0.08); color: #c9c9e3; }
html[data-tema="oscuro"] .vp-me-gusta.activo { background: rgba(225, 29, 72, 0.18); color: #fb7185; }
html[data-tema="oscuro"] .vp-galeria-vacia { border-color: rgba(255, 255, 255, 0.08); color: #a3a3c2; }
html[data-tema="oscuro"] .vp-galeria-vacia .icono { color: #38bdf8; }
html[data-tema="oscuro"] .vp-galeria-cuenta { background: rgba(29, 107, 255, 0.2); color: #bfe0ff; }
html[data-tema="oscuro"] .vp-pub-mensaje .vp-pub-texto { background: linear-gradient(135deg, #0b2a6b, #1d6bff); color: #fff; }

/* ---------- Deportes, Noticias, Periodismo ---------- */
html[data-tema="oscuro"] .feed-barra { background: rgba(11, 22, 51, 0.92); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
html[data-tema="oscuro"] .feed-filtro { background: #11214a; border-color: rgba(255, 255, 255, 0.08); color: #c9c9e3; }
html[data-tema="oscuro"] .feed-buscar { background: #0a1430; border-color: rgba(255, 255, 255, 0.08); }
html[data-tema="oscuro"] .feed-buscar input { color: #f4f4ff; }

html[data-tema="oscuro"] .feed-portada,
html[data-tema="oscuro"] .pub-card,
html[data-tema="oscuro"] .feed-vacio,
html[data-tema="oscuro"] .feed-sin-resultados,
html[data-tema="oscuro"] .exten-cabecera,
html[data-tema="oscuro"] .feed-dia span,
html[data-tema="oscuro"] .lector .modal-content {
  background: #0b1633;
  color: #f4f4ff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

html[data-tema="oscuro"] .portada-texto h2,
html[data-tema="oscuro"] .pub-cuerpo h3,
html[data-tema="oscuro"] .lector-cuerpo h2,
html[data-tema="oscuro"] .feed-dia,
html[data-tema="oscuro"] .feed-vacio h3 { color: #f4f4ff; }

html[data-tema="oscuro"] .portada-texto p,
html[data-tema="oscuro"] .pub-cuerpo p,
html[data-tema="oscuro"] .lector-cuerpo p { color: #c9c9e3; }

html[data-tema="oscuro"] .feed-dia::after { background: linear-gradient(90deg, rgba(56, 140, 255, 0.35), transparent); }

/* ---------- Acerca de ---------- */
html[data-tema="oscuro"] .card-header { background-color: #11214a; }

/* ---------- Bordes sutiles en el resto de las páginas ---------- */
html[data-tema="oscuro"] .sidebar {
  background: linear-gradient(180deg, #0c1d48 0%, #081331 45%, #050b1f 100%);
  border-right-color: rgba(255, 255, 255, 0.08);
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.35);
}

html[data-tema="oscuro"] .vp-card,
html[data-tema="oscuro"] .vp-pub,
html[data-tema="oscuro"] .feed-portada,
html[data-tema="oscuro"] .pub-card,
html[data-tema="oscuro"] .exten-cabecera,
html[data-tema="oscuro"] .card {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}