/* Global dark theme hardening (except Rider Room / player-dark flows). */
:root{
  --dt-bg:#0E131A;
  --dt-surface:#161D27;
  --dt-surface-2:#10161F;
  --dt-border:#2A3442;
  --dt-text:#EAF0F8;
  --dt-muted:#AAB6C7;
  --dt-accent:#76B7FF;
}

body.dark-theme:not(.rider-room-active):not(.player-dark){
  background:var(--dt-bg) !important;
  color:var(--dt-text) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) #app,
body.dark-theme:not(.rider-room-active):not(.player-dark) .home-web-layout,
body.dark-theme:not(.rider-room-active):not(.player-dark) .home-mobile-layout,
body.dark-theme:not(.rider-room-active):not(.player-dark) .sections-page,
body.dark-theme:not(.rider-room-active):not(.player-dark) .section-detail-page,
body.dark-theme:not(.rider-room-active):not(.player-dark) .profile-page,
body.dark-theme:not(.rider-room-active):not(.player-dark) .account-settings-page,
body.dark-theme:not(.rider-room-active):not(.player-dark) .advisors-page,
body.dark-theme:not(.rider-room-active):not(.player-dark) .weekly-newsletter-page,
body.dark-theme:not(.rider-room-active):not(.player-dark) .help-redesign-page,
body.dark-theme:not(.rider-room-active):not(.player-dark) .legal-page,
body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2,
body.dark-theme:not(.rider-room-active):not(.player-dark) .founders-page,
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-page,
body.dark-theme:not(.rider-room-active):not(.player-dark) #home-focus-band{
  background:var(--dt-bg) !important;
  color:var(--dt-text) !important;
  box-shadow:none !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) :is(
  .card,
  .profile-card,
  .profile-menu-card,
  .profile-subscription-card,
  .profile-streak-card,
  .profile-sections-card,
  .profile-saved-card,
  .profile-sections-item,
  .advisor-card,
  .explore-section-card,
  .explore-section-card-content,
  .explore-search-popup,
  .help-faq-item,
  .help-contact-card,
  .help-contact-cta-card,
  .weekly-newsletter-featured,
  .weekly-newsletter-note-card,
  .weekly-newsletter-archive-row,
  .plan-card,
  .account-settings-card,
  .account-settings-danger-card,
  .home-section-card,
  .home-recommended-card,
  .cyx-new-card,
  .quick-five-card,
  .player-info-mobile,
  .player-desc-panel,
  #section-search-suggestions,
  #explore-search-popup,
  .desktop-search-results,
  .notification-dropdown,
  .legal-webview-dialog,
  .legal-content
){
  background:var(--dt-surface) !important;
  border-color:var(--dt-border) !important;
  color:var(--dt-text) !important;
}

/* Hector, 2026-09-12: "en secciones la descripción y los recomendados
   tienen como un recuadro de fondo más claro... en rider room no tiene ese
   fondo, quítaselo a secciones" — .player-info-below (título+descripción)
   y .player-sidebar (Siguiente/recomendados) estaban en la lista de arriba,
   así que sí recibían el fondo "de tarjeta". body.player-dark (entrevistas)
   ya los pone transparentes desde antes — mismo tratamiento aquí. */
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-info-below,
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-sidebar{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  color:var(--dt-text) !important;
}

/* .hero-feature-card / .hero-secondary-card llevan la miniatura del video
   como background-image INLINE (leído por su ::before vía background-image:
   inherit) — nunca tocar su `background` (shorthand) en modo oscuro, la
   pisa entera y deja la tarjeta en negro sin imagen. Solo el borde. */
body.dark-theme:not(.rider-room-active):not(.player-dark) .hero-feature-card,
body.dark-theme:not(.rider-room-active):not(.player-dark) .hero-secondary-card {
  border-color:var(--dt-border) !important;
}

/* .home-carousel-card (carrusel "Recomendado para ti" en mobile) — mismo caso:
   background-image inline con la miniatura, nunca usar `background` shorthand. */
body.dark-theme:not(.rider-room-active):not(.player-dark) .home-carousel-card {
  border-color:var(--dt-border) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) :is(
  h1,h2,h3,h4,h5,
  .profile-title,
  .sections-page-title,
  .section-detail-title,
  .advisors-title,
  .player-sidebar-item-title,
  .weekly-newsletter-title,
  .help-redesign-title,
  .legal-title,
  .legal-webview-title,
  .premium-title,
  .included-title,
  .account-settings-title,
  .account-settings-theme-title,
  .help-redesign-section-title span:last-child
){
  color:var(--dt-text) !important;
}
/* Sacado del :is() de arriba: tenía un ID (`#player-title`) que inflaba la
   especificidad de TODO el bloque a (1,4,1) — imposible de sobrescribir para
   cosas como el título de SweetAlert2. Ahora va aparte, mismo efecto. */
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-info-below #player-title{
  color:var(--dt-text) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) :is(
  p,
  .small-muted,
  .profile-meta,
  .profile-list-text,
  .profile-saved-video-duration,
  .sections-page-subtitle,
  .section-detail-intro,
  .section-video-author,
  .advisor-role,
  .advisors-subtitle,
  .weekly-newsletter-subtitle,
  .weekly-newsletter-note-excerpt,
  .weekly-newsletter-archive-meta,
  .help-redesign-subtitle,
  .help-faq-answer,
  .legal-content p,
  .legal-content li,
  .premium-subtitle,
  .plan-description,
  .plan-note,
  .included-desc,
  .player-desc-inline,
  .account-settings-label,
  .account-settings-theme-desc,
  .account-settings-danger-desc
){
  color:var(--dt-muted) !important;
}
/* .section-video-time (nombre de sección en las cards de una página de
   sección) salió de la lista de arriba a propósito: ese bloque la pintaba
   del mismo gris "muted" que el resto, pero el nombre de sección debe ir
   SIEMPRE en azul (#0056A3), igual en claro y oscuro (Hector, 2026-09-08 —
   mismo bug que .hero-cat-sm más abajo en este archivo). El azul lo pone
   `.section-video-time` en style.css; aquí solo faltaba dejar de pisarlo. */

body.dark-theme:not(.rider-room-active):not(.player-dark) .header-sticky,
body.dark-theme:not(.rider-room-active):not(.player-dark) .bottom-nav,
body.dark-theme:not(.rider-room-active):not(.player-dark) #site-header > header{
  background:#121925 !important;
  border-color:var(--dt-border) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .header-sticky .desktop-nav a,
body.dark-theme:not(.rider-room-active):not(.player-dark) .header-sticky .desktop-profile-link,
body.dark-theme:not(.rider-room-active):not(.player-dark) .bottom-nav a,
body.dark-theme:not(.rider-room-active):not(.player-dark) .bottom-nav .small-muted,
body.dark-theme:not(.rider-room-active):not(.player-dark) .header-sticky .logo-link .h2{
  color:var(--dt-text) !important;
}
/* El ícono de cuenta en escritorio trae el trazo fijo por dentro del SVG
   (stroke="#2c2c2c", en partials/header.html) — cambiar el `color` de arriba
   no le hace nada porque no usa currentColor. Mismo patrón que ya existe
   para Rider Room/reproductor (ver más abajo, .desktop-profile-link svg{
   stroke:#ffffff }), pero a este caso general se le había quedado sin esa
   regla — Hector: "el ícono de cuenta se ve oscuro en desktop". */
body.dark-theme:not(.rider-room-active):not(.player-dark) .header-sticky .desktop-profile-link svg{
  stroke:var(--dt-text) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .desktop-nav a.active,
body.dark-theme:not(.rider-room-active):not(.player-dark) .desktop-profile-link.active,
body.dark-theme:not(.rider-room-active):not(.player-dark) .bottom-nav a.active,
body.dark-theme:not(.rider-room-active):not(.player-dark) .bottom-nav a.active .small-muted,
body.dark-theme:not(.rider-room-active):not(.player-dark) .profile-link,
body.dark-theme:not(.rider-room-active):not(.player-dark) .advisor-contact-link,
body.dark-theme:not(.rider-room-active):not(.player-dark) .account-settings-subscription-link{
  color:var(--dt-accent) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) :is(
  input,
  textarea,
  select,
  .form-control,
  .payment-input,
  .account-settings-input,
  #section-search,
  .desktop-search-bar input,
  .search-box input
){
  background:var(--dt-surface-2) !important;
  color:var(--dt-text) !important;
  border-color:var(--dt-border) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) :is(input,textarea,select)::placeholder{
  color:#91A0B5 !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2 .plan-card-highlight,
body.dark-theme:not(.rider-room-active):not(.player-dark) .profile-subscription-card,
body.dark-theme:not(.rider-room-active):not(.player-dark) .account-settings-subscription-card{
  background:#232012 !important;
  border-color:#9B7E00 !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2 .included-name,
body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2 .premium-title,
body.dark-theme:not(.rider-room-active):not(.player-dark) .profile-subscription-card #profile-subscription-name,
body.dark-theme:not(.rider-room-active):not(.player-dark) .account-settings-subscription-title{
  color:#F4DE8A !important;
}

/* Hector, 2026-09-11: "Mensual"/"Anual" y los precios en blanco (antes
   compartían el dorado de arriba con .premium-title/.included-name). */
body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2 .plan-name,
body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2 .plan-price{
  color:var(--dt-text) !important;
}

/* Hector, 2026-09-10: "estéticamente no me gusta" la página de Premium —
   el bug real era que esta página nunca tuvo tema oscuro propio, todo su
   CSS está escrito para fondo claro y lo demás se veía oscuro solo por el
   fondo general de página de arriba. Quedaban parches sueltos en claro:
   la franja final "Cancela cuando quieras..." (.premium-trustbar) y los
   íconos de "Todo lo que incluye". De paso, ya no se le pone caja/borde a
   .included-card (ver subscription.html, se sacó también del :is() de
   arriba) — el divisor entre items ahora es este color en oscuro. */
body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2 .premium-trustbar{
  background:var(--dt-surface-2) !important;
  color:var(--dt-muted) !important;
  border-top-color:var(--dt-border) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2 .included-card{
  border-color:var(--dt-border) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2 .included-icon{
  background:rgba(118,183,255,0.12) !important;
  color:var(--dt-accent) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2 .plan-badge-flex{
  background:var(--dt-surface-2) !important;
  color:var(--dt-muted) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2 .premium-hero-note,
body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2 .premium-trust-row,
body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2 .plan-currency{
  color:var(--dt-muted) !important;
}

/* Hector, 2026-09-13: pages/founders.html nunca tuvo tema oscuro propio
   (igual que le pasó a subscription.html antes, ver comentario de arriba) —
   su fondo (#F5F5F5) y varios textos se quedaban en sus colores de tema
   claro, ilegibles sobre el fondo oscuro general del sitio. Mismos valores
   que .subscription-page-v2 arriba, ya aprobados por Hector ahí. */
body.dark-theme:not(.rider-room-active):not(.player-dark) .founders-page .plan-card-highlight{
  background:#232012 !important;
  border-color:#9B7E00 !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .founders-page .premium-title{
  color:#F4DE8A !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .founders-page .plan-name,
body.dark-theme:not(.rider-room-active):not(.player-dark) .founders-page .plan-price{
  color:var(--dt-text) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .founders-page .plan-badge-flex{
  background:var(--dt-surface-2) !important;
  color:var(--dt-muted) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .founders-page .premium-hero-note,
body.dark-theme:not(.rider-room-active):not(.player-dark) .founders-page .premium-trust-row,
body.dark-theme:not(.rider-room-active):not(.player-dark) .founders-page .plan-term{
  color:var(--dt-muted) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .player-fullbleed,
body.dark-theme:not(.rider-room-active):not(.player-dark) #player-video,
body.dark-theme:not(.rider-room-active):not(.player-dark) .video-player-16x9,
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-ad-overlay,
body.dark-theme:not(.rider-room-active):not(.player-dark) .ad-video-player{
  background:#0C1119 !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .player-sidebar-item:hover,
body.dark-theme:not(.rider-room-active):not(.player-dark) .profile-list-item:hover,
body.dark-theme:not(.rider-room-active):not(.player-dark) #section-search-suggestions .section-search-row:hover,
body.dark-theme:not(.rider-room-active):not(.player-dark) .desktop-search-item:hover,
body.dark-theme:not(.rider-room-active):not(.player-dark) .weekly-newsletter-archive-row:hover{
  background:#1C2633 !important;
}

/* Hector, 2026-09-12: "en secciones no se alcanza a leer siguiente y
   recomendados... las líneas divisoras entre videos están muy brillosas" —
   comparó contra el sidebar de una entrevista (body.player-dark, ese ya se
   ve bien) y pidió que quedaran iguales. El título/meta de cada video del
   sidebar (.player-sidebar-item-title/-meta) ya estaban cubiertos; lo que
   faltaba era la etiqueta "SIGUIENTE"/"Más videos similares" (se quedaba en
   el #111111 casi negro de tema claro) y las 2 líneas divisoras (el borde
   entre cada video, #F0F0F0 sólido — de ahí lo "brillosa" sobre fondo
   oscuro — y la línea entre "Siguiente" y "Más videos similares"). */
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-sidebar-label-text{
  color:var(--dt-text) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-sidebar-divider{
  background:var(--dt-border) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-sidebar-item{
  border-bottom-color:var(--dt-border) !important;
}

/* Buscador del header (desktop): el contenedor .desktop-search-results ya
   toma fondo/texto oscuros arriba, pero .desktop-search-item-title tenía
   color:#111 fijo (invisible sobre el panel oscuro) y -meta #888 (bajo
   contraste). El separador entre filas era #F0F0F0 (línea clara sobre
   oscuro). Se corrigen aquí. */
body.dark-theme:not(.rider-room-active):not(.player-dark) .desktop-search-item{
  color:var(--dt-text) !important;
  border-bottom-color:var(--dt-border) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .desktop-search-item-title{
  color:var(--dt-text) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .desktop-search-item-meta{
  color:var(--dt-muted) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .desktop-search-empty{
  color:var(--dt-muted) !important;
}

/* Rider Room / Player quedan fuera del "hardening" global de arriba a
   propósito (ya tienen su propio header oscuro, ver comentario del inicio
   del archivo) — pero el buscador del header ahí se quedaba forzado a
   blanco fijo (definido en style.css) sin importar el tema del sitio
   (Hector, 2026-09-09: "el buscador desde el rider room sale blanco").
   Ronda 1: se corrigió el PANEL de resultados. Ronda 2 (mismo día,
   Hector: "también en desktop, está la barra blanca, checa como está en
   las demás páginas"): el PILL del input en sí también debe verse como en
   cualquier otra página en modo oscuro, no quedarse blanco — se corrige
   abajo también. Selectores con `.header-sticky` incluido para igualar o
   superar la especificidad de la regla que se está pisando en style.css
   (líneas ~119-124 y ~136-141). */
body.dark-theme.rider-room-active .header-sticky .desktop-search-bar input,
body.dark-theme.player-dark .header-sticky .desktop-search-bar input{
  background:var(--dt-surface-2) !important;
  color:var(--dt-text) !important;
  border:1px solid var(--dt-border) !important;
}
body.dark-theme.rider-room-active .header-sticky .desktop-search-bar input::placeholder,
body.dark-theme.player-dark .header-sticky .desktop-search-bar input::placeholder{
  color:#91A0B5 !important;
}
/* Ronda 3, mismo día: el ícono de lupa dentro del input se quedaba en el
   gris fijo de siempre (#888888, ver style.css ~123/140) — sobre el fondo
   oscuro nuevo del input se percibía casi negro. Se sube a var(--dt-muted)
   (el mismo tono ya usado para texto secundario en dark) para que se vea
   "acorde al color" tanto en dark como en light (en light no se toca, sigue
   #888888 sobre fondo blanco como en el resto del sitio). */
body.dark-theme.rider-room-active .header-sticky .desktop-search-icon,
body.dark-theme.player-dark .header-sticky .desktop-search-icon{
  color:var(--dt-muted) !important;
}
/* Esa era la lupita de la barra ANCHA (desktop). Hay otra distinta: el
   botón #home-search-icon (pantallas angostas, <1024px, el mismo que abre
   el modal completo #search-modal) — Hector lo vio negro también. Su SVG
   trae el color puesto directo en el atributo `stroke="#111111"` de cada
   <circle>/<path> (no usa currentColor), así que la regla ya existente en
   este archivo para Rider Room (`home-mobile.css` línea ~1627, le pone
   `stroke:#FFFFFF` al <svg> contenedor) NUNCA hacía nada — ese color no
   baja a los hijos porque cada uno ya trae su propio `stroke` puesto.
   Mismo patrón que ya se usa arriba en este archivo para las demás páginas
   (`:not(.rider-room-active):not(.player-dark) #home-search-icon svg
   circle/path`) — se replica aquí para Rider Room/Player en dark, apuntando
   directo a <circle>/<path>. */
body.dark-theme.rider-room-active #site-header #home-search-icon svg circle,
body.dark-theme.rider-room-active #site-header #home-search-icon svg path,
body.dark-theme.player-dark #site-header #home-search-icon svg circle,
body.dark-theme.player-dark #site-header #home-search-icon svg path{
  stroke:var(--dt-text) !important;
}
body.dark-theme.rider-room-active .header-sticky .desktop-search-results,
body.dark-theme.player-dark .header-sticky .desktop-search-results{
  background:var(--dt-surface) !important;
  border-color:var(--dt-border) !important;
  box-shadow:0 6px 22px rgba(0,0,0,0.4) !important;
  color:var(--dt-text) !important;
}
body.dark-theme.rider-room-active .desktop-search-item,
body.dark-theme.player-dark .desktop-search-item{
  color:var(--dt-text) !important;
  border-bottom-color:var(--dt-border) !important;
}
body.dark-theme.rider-room-active .desktop-search-item:hover,
body.dark-theme.player-dark .desktop-search-item:hover{
  background:#1C2633 !important;
}
body.dark-theme.rider-room-active .desktop-search-item-title,
body.dark-theme.player-dark .desktop-search-item-title{
  color:var(--dt-text) !important;
}
body.dark-theme.rider-room-active .desktop-search-item-meta,
body.dark-theme.player-dark .desktop-search-item-meta{
  color:var(--dt-muted) !important;
}
body.dark-theme.rider-room-active .desktop-search-empty,
body.dark-theme.player-dark .desktop-search-empty{
  color:var(--dt-muted) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .profile-list-item,
body.dark-theme:not(.rider-room-active):not(.player-dark) .profile-preferences-list .profile-list-item,
body.dark-theme:not(.rider-room-active):not(.player-dark) .advisor-divider,
body.dark-theme:not(.rider-room-active):not(.player-dark) .section-detail-divider,
body.dark-theme:not(.rider-room-active):not(.player-dark) .help-redesign-divider,
body.dark-theme:not(.rider-room-active):not(.player-dark) .weekly-newsletter-divider,
body.dark-theme:not(.rider-room-active):not(.player-dark) .legal-webview-header,
body.dark-theme:not(.rider-room-active):not(.player-dark) .section-search-row{
  border-color:var(--dt-border) !important;
}

/* Hector, 2026-09-12: "la línea blanca divisora... se ve muy brusca" —
   .player-inline-divider pinta la línea con `background` (es un div de 1px
   de alto), no con `border`; estaba metido en la lista de arriba junto a
   divisores que sí usan border, así que ese override no le hacía nada — se
   quedaba con el #E8E8E8 de tema claro, una línea clara y dura sobre fondo
   oscuro. Regla aparte, con la propiedad que de verdad pinta la línea. */
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-inline-divider{
  background:var(--dt-border) !important;
}

/* Barra de título del modal de documentos legales (Términos/Privacidad) —
   el body del modal (.legal-webview-dialog) ya se oscurece arriba, pero la
   barra de encabezado tiene su propio fondo claro que también hay que
   oscurecer, y su botón de cerrar (gris oscuro sobre gris claro) se vuelve
   invisible si no se aclara. */
body.dark-theme:not(.rider-room-active):not(.player-dark) .legal-webview-header{
  background:var(--dt-surface-2) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .legal-webview-close{
  color:var(--dt-muted) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .plan-cta,
body.dark-theme:not(.rider-room-active):not(.player-dark) .account-settings-primary-btn,
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-action-btn,
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-btn,
body.dark-theme:not(.rider-room-active):not(.player-dark) .profile-logout,
body.dark-theme:not(.rider-room-active):not(.player-dark) .account-settings-danger-btn{
  background:var(--dt-surface-2) !important;
  color:var(--dt-text) !important;
  border-color:var(--dt-border) !important;
}

/* Hector, 2026-09-12: "asegúrate que los botones de compartir y guardar...
   sean legibles" — el ícono (share.png/heart.png vía mask, coloreado con
   background-color) tenía #111111 fijo en style.css, casi invisible sobre
   el fondo oscuro del botón de arriba (mismo problema que ya se había
   corregido para el modo "player-dark" del reproductor — ver
   .player-action-btn .player-share-icon{background-color:#FFFFFF} en
   style.css — pero nunca se hizo el equivalente para tema oscuro normal). */
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-action-btn .player-share-icon,
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-action-btn .player-fav-icon{
  background-color:var(--dt-text) !important;
}

/* Hector, 2026-09-12: bloque "especialista" (foto+nombre+profesión) del
   reproductor — nuevo, se construye ya pensando en tema oscuro desde el
   principio (a diferencia de casi todo lo demás en esta página, que se hizo
   para tema claro y se fue arreglando después). El círculo de iniciales
   reutiliza el mismo combo azul-claro-sobre-oscuro que .included-icon. */
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-expert-name{
  color:var(--dt-text) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-expert-role{
  color:var(--dt-muted) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-expert-avatar{
  background:rgba(118,183,255,0.12) !important;
  color:var(--dt-accent) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-expert-desktop:hover .player-expert-name,
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-expert-mobile:hover .player-expert-name{
  color:var(--dt-accent) !important;
}

/* Hector, 2026-09-10: marco amarillo del CTA "Iniciar prueba gratis" del plan
   Mensual (ver subscription.html) — selector más específico que la regla
   genérica de arriba para ganarle en tema oscuro, escritorio Y móvil. */
body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2 .plan-card[data-plan="monthly"] .plan-cta{
  border-color:#F5C400 !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .plan-cta.plan-cta-highlight,
body.dark-theme:not(.rider-room-active):not(.player-dark) .premium-hero-cta,
body.dark-theme:not(.rider-room-active):not(.player-dark) .subscription-page-v2 .premium-hero .premium-hero-cta.plan-card,
body.dark-theme:not(.rider-room-active):not(.player-dark) .player-gate-btn{
  background:#F5C400 !important;
  color:#2C2200 !important;
  border-color:#F5C400 !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .bottom-nav a img,
body.dark-theme:not(.rider-room-active):not(.player-dark) .favorite-icon-img,
body.dark-theme:not(.rider-room-active):not(.player-dark) .notification-icon,
body.dark-theme:not(.rider-room-active):not(.player-dark) .profile-list-icon svg{
  filter:brightness(0) saturate(100%) invert(93%) sepia(6%) saturate(644%) hue-rotate(176deg) brightness(96%) contrast(92%) !important;
}

body.dark-theme.rider-room-active .bottom-nav {
  background: #121925 !important;
  border-color: var(--dt-border) !important;
}

body.dark-theme.rider-room-active .bottom-nav a,
body.dark-theme.rider-room-active .bottom-nav .small-muted {
  color: var(--dt-text) !important;
}

body.dark-theme.rider-room-active .bottom-nav a.active,
body.dark-theme.rider-room-active .bottom-nav a.active .small-muted {
  color: var(--dt-accent) !important;
}

body.dark-theme.rider-room-active .bottom-nav a img {
  filter: brightness(0) saturate(100%) invert(93%) sepia(6%) saturate(644%) hue-rotate(176deg) brightness(96%) contrast(92%) !important;
}

body.dark-theme.player-dark .bottom-nav {
  background: #121925 !important;
  border-color: var(--dt-border) !important;
}

body.dark-theme.player-dark .bottom-nav a,
body.dark-theme.player-dark .bottom-nav .small-muted {
  color: var(--dt-text) !important;
}

body.dark-theme.player-dark .bottom-nav a.active,
body.dark-theme.player-dark .bottom-nav a.active .small-muted {
  color: var(--dt-accent) !important;
}

body.dark-theme.player-dark .bottom-nav a img {
  filter: brightness(0) saturate(100%) invert(93%) sepia(6%) saturate(644%) hue-rotate(176deg) brightness(96%) contrast(92%) !important;
}

body.dark-theme.profile-active {
  background: var(--dt-bg) !important;
  color: var(--dt-text) !important;
}

body.dark-theme.profile-active .profile-name,
body.dark-theme.profile-active .profile-title,
body.dark-theme.profile-active .profile-section-title,
body.dark-theme.profile-active .profile-list-item,
body.dark-theme.profile-active .profile-list-text,
body.dark-theme.profile-active .profile-tag,
body.dark-theme.profile-active .profile-card-heading,
body.dark-theme.profile-active .profile-subscription-card #profile-subscription-name,
body.dark-theme.profile-active .profile-link {
  color: var(--dt-text) !important;
}

body.dark-theme.profile-active .profile-meta,
body.dark-theme.profile-active .profile-list-arrow,
body.dark-theme.profile-active .profile-subscription-card #profile-subscription-description,
body.dark-theme.profile-active .profile-card-heading {
  color: var(--dt-muted) !important;
}

body.dark-theme.profile-active .profile-tag {
  background: var(--dt-surface-2) !important;
  border-color: var(--dt-border) !important;
}

body.dark-theme.profile-active .profile-streak-title,
body.dark-theme.profile-active .profile-streak-message,
body.dark-theme.profile-active .profile-sections-title,
body.dark-theme.profile-active .profile-sections-name,
body.dark-theme.profile-active .profile-saved-title {
  color: var(--dt-text) !important;
}

body.dark-theme.profile-active .profile-streak-count {
  color: var(--dt-text) !important;
}

body.dark-theme.profile-active .profile-streak-count-label {
  color: var(--dt-muted) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .mah-search-btn svg,
body.dark-theme:not(.rider-room-active):not(.player-dark) #mobile-header-search-btn svg,
body.dark-theme:not(.rider-room-active):not(.player-dark) #home-search-icon svg {
  color: var(--dt-text) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .mah-search-btn svg circle,
body.dark-theme:not(.rider-room-active):not(.player-dark) .mah-search-btn svg path,
body.dark-theme:not(.rider-room-active):not(.player-dark) #mobile-header-search-btn svg circle,
body.dark-theme:not(.rider-room-active):not(.player-dark) #mobile-header-search-btn svg path,
body.dark-theme:not(.rider-room-active):not(.player-dark) #home-search-icon svg circle,
body.dark-theme:not(.rider-room-active):not(.player-dark) #home-search-icon svg path {
  stroke: var(--dt-text) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .home-riderroom-banner,
body.dark-theme:not(.rider-room-active):not(.player-dark) .rider-clips-panel,
body.dark-theme:not(.rider-room-active):not(.player-dark) .clip-card,
body.dark-theme:not(.rider-room-active):not(.player-dark) .sidebar-week,
body.dark-theme:not(.rider-room-active):not(.player-dark) .analysis-card,
body.dark-theme:not(.rider-room-active):not(.player-dark) .question-card,
body.dark-theme:not(.rider-room-active):not(.player-dark) .analysis-block{
  background:var(--dt-surface) !important;
  border-color:var(--dt-border) !important;
  color:var(--dt-text) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) #home-lower,
body.dark-theme:not(.rider-room-active):not(.player-dark) #home-lower .lower-band,
body.dark-theme:not(.rider-room-active):not(.player-dark) .cyx-sections-block,
body.dark-theme:not(.rider-room-active):not(.player-dark) .cyx-sections-block--compact,
body.dark-theme:not(.rider-room-active):not(.player-dark) .home-weekly-main-note,
body.dark-theme:not(.rider-room-active):not(.player-dark) .hero-secondary-content,
body.dark-theme:not(.rider-room-active):not(.player-dark) #mobileStreakBanner,
body.dark-theme:not(.rider-room-active):not(.player-dark) #site-header,
body.dark-theme:not(.rider-room-active):not(.player-dark) #site-header > header{
  background:var(--dt-surface) !important;
  border-color:var(--dt-border) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .cyx-section-card,
body.dark-theme:not(.rider-room-active):not(.player-dark) .cyx-section-card--compact,
body.dark-theme:not(.rider-room-active):not(.player-dark) .cyx-section-card.cyx-section-card--compact,
body.dark-theme:not(.rider-room-active):not(.player-dark) a.cyx-section-card{
  background:var(--dt-surface) !important;
  border-color:var(--dt-border) !important;
  color:var(--dt-text) !important;
}

/* Explora Cyclick (mobile): las cards compactas son solo foto + nombre, sin caja
   — anular el fondo/borde de surface también en oscuro. */
body.dark-theme:not(.rider-room-active):not(.player-dark) .cyx-section-card.cyx-section-card--compact{
  background:transparent !important;
  border:0 !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .cyx-section-compact-title{
  color:var(--dt-text) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .cyx-sections-block :is(h1,h2,h3,h4,p,span,.small-muted,.cyx-section-title,.cyx-section-subtitle,.cyx-section-name,.cyx-section-desc),
body.dark-theme:not(.rider-room-active):not(.player-dark) .home-weekly-main-note :is(h1,h2,h3,h4,p,span,.small-muted),
body.dark-theme:not(.rider-room-active):not(.player-dark) .hero-secondary-content :is(h1,h2,h3,h4,p,span):not(.hero-cat-sm):not(.hero-date-sm):not(.section-video-badge-premium),
body.dark-theme:not(.rider-room-active):not(.player-dark) #mobileStreakBanner :is(h1,h2,h3,h4,p,span){
  color:var(--dt-text) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) #mobileStreakBanner .msb-title {
  color: var(--dt-text) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .cyx-sections-block :is(.cyx-section-meta,.cyx-section-description,.small-muted),
body.dark-theme:not(.rider-room-active):not(.player-dark) .home-weekly-main-note :is(.home-weekly-main-desc,.small-muted),
body.dark-theme:not(.rider-room-active):not(.player-dark) #mobileStreakBanner :is(.small-muted){
  color:var(--dt-muted) !important;
}

/* Home-specific hard override to defeat light-system !important rules */
body.dark-theme.home-active #app,
body.dark-theme.home-active .home-web-layout,
body.dark-theme.home-active .home-mobile-layout,
body.dark-theme.home-active #home-lower,
body.dark-theme.home-active #home-lower .lower-band,
body.dark-theme.home-active .cyx-sections-block,
body.dark-theme.home-active .cyx-sections-block--compact,
body.dark-theme.home-active #site-header,
body.dark-theme.home-active #site-header > header,
body.dark-theme.home-active #mobileStreakBanner {
  background: var(--dt-bg) !important;
  background-color: var(--dt-bg) !important;
  color: var(--dt-text) !important;
}

body.dark-theme.home-active:not(.rider-room-active):not(.player-dark) #home-lower {
  background: var(--dt-bg) !important;
  background-color: var(--dt-bg) !important;
}

body.dark-theme.home-active .home-weekly-main-note,
body.dark-theme.home-active .home-weekly-list,
body.dark-theme.home-active .hero-secondary-content,
body.dark-theme.home-active .cyx-section-card,
body.dark-theme.home-active .cyx-section-list-item,
body.dark-theme.home-active .cyx-sections-arrow,
body.dark-theme.home-active .cyx-sections-toggle,
body.dark-theme.home-active .cyx-sections-toggle-btn {
  background: var(--dt-surface) !important;
  background-color: var(--dt-surface) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text) !important;
}

body.dark-theme.home-active .cyx-section-card-title,
body.dark-theme.home-active .cyx-section-expert-name,
body.dark-theme.home-active .cyx-section-list-title,
body.dark-theme.home-active .cyx-sections-title,
body.dark-theme.home-active .home-weekly-main-title,
body.dark-theme.home-active .home-weekly-item h4,
body.dark-theme.home-active .hero-title-sm,
body.dark-theme.home-active .hero-duration-sm {
  color: var(--dt-text) !important;
}
/* .hero-cat-sm (nombre de sección en las cards chicas de "Recomendado para
   ti") NO va en el bloque de arriba a propósito: ese bloque lo pintaba del
   mismo gris/blanco que el título, y el nombre de sección debe ir SIEMPRE en
   azul (#0056A3, mismo criterio que .cyx-new-section-tag/.hero-cat), tanto en
   claro como en oscuro (Hector, 2026-09-08 — era la inconsistencia real:
   la card grande de "Recomendado" sí se veía azul, las 3 chicas no). El azul
   ya lo pone `.hero-cat-sm` en style.css con !important — no hace falta
   repetirlo aquí, solo faltaba dejar de pisarlo. */

body.dark-theme.home-active .cyx-section-card-desc,
body.dark-theme.home-active .cyx-section-expert-role,
body.dark-theme.home-active .cyx-sections-subtitle,
body.dark-theme.home-active .home-weekly-main-desc,
body.dark-theme.home-active .home-weekly-main-meta,
body.dark-theme.home-active .home-weekly-item span,
body.dark-theme.home-active .small-muted {
  color: var(--dt-muted) !important;
}

/* Línea blanca en las cards de "Explora Cyclick" (Hector, 2026-09-10): el
   footer de especialista (.cyx-section-card-footer) tiene su propio
   border-top:#E3E3E3 fijo en style.css — .cyx-section-card de arriba solo
   pinta el border-color DEL CARD, no baja a este hijo (tiene su propio
   border declarado). Se corrige aparte. */
body.dark-theme.home-active .cyx-section-card-footer {
  border-top-color: var(--dt-border) !important;
}

/* Final, highly specific home lower fixes */
body.dark-theme.home-active section#home-lower .cyx-sections-cards .cyx-sections-track > a.cyx-section-card:not(.cyx-section-card--compact),
body.dark-theme.home-active section#home-lower .home-weekly-notes-grid > article.home-weekly-main-note,
body.dark-theme.home-active section#home-lower .home-weekly-notes-grid > aside.home-weekly-list,
body.dark-theme.home-active section#home-lower .home-weekly-notes-grid > aside.home-weekly-list .home-weekly-item,
body.dark-theme.home-active section#home-lower .hero-secondary-card .hero-secondary-content {
  background: var(--dt-surface) !important;
  background-color: var(--dt-surface) !important;
  border-color: var(--dt-border) !important;
}

body.dark-theme.home-active section#home-lower .cyx-sections-cards .cyx-sections-track > a.cyx-section-card :is(.cyx-section-card-title,.cyx-section-expert-name),
body.dark-theme.home-active section#home-lower .home-weekly-notes-grid > article.home-weekly-main-note :is(.home-weekly-main-title,.home-weekly-kicker,.home-weekly-main-cta),
body.dark-theme.home-active section#home-lower .home-weekly-notes-grid > aside.home-weekly-list .home-weekly-item h4 {
  color: var(--dt-text) !important;
}

body.dark-theme.home-active section#home-lower .cyx-sections-cards .cyx-sections-track > a.cyx-section-card :is(.cyx-section-card-desc,.cyx-section-expert-role),
body.dark-theme.home-active section#home-lower .home-weekly-notes-grid > article.home-weekly-main-note :is(.home-weekly-main-desc,.home-weekly-main-meta),
body.dark-theme.home-active section#home-lower .home-weekly-notes-grid > aside.home-weekly-list .home-weekly-item span {
  color: var(--dt-muted) !important;
}

/* Keep Explora/Preguntas section shells on the same page background in dark mode. */
body.dark-theme.home-active #home-lower .lower-band.home-weekly-notes,
body.dark-theme.home-active #home-lower .lower-band.home-weekly-notes .lower-container,
body.dark-theme.home-active #home-lower .lower-band.home-weekly-notes .home-weekly-notes-head,
body.dark-theme.home-active #home-lower .lower-band.home-weekly-notes .home-weekly-notes-grid {
  background: var(--dt-bg) !important;
  background-color: var(--dt-bg) !important;
}

/* Explora Cyclick: style cards/icons only, not the full block shell. */
body.dark-theme.home-active #home-lower .lower-band.desktop-home-sections-band,
body.dark-theme.home-active #home-lower .lower-band.desktop-home-sections-band .lower-container,
body.dark-theme.home-active #home-lower .lower-band.desktop-home-sections-band .cyx-sections-block,
body.dark-theme.home-active #home-lower .lower-band.desktop-home-sections-band .cyx-sections-head,
body.dark-theme.home-active #home-lower .lower-band.desktop-home-sections-band .cyx-sections-cards {
  background: var(--dt-bg) !important;
  background-color: var(--dt-bg) !important;
}

body.dark-theme.home-active #home-lower .desktop-home-sections-band .desktop-explore-item {
  background: var(--dt-surface) !important;
  border-color: var(--dt-border) !important;
}

body.dark-theme.home-active #home-lower .desktop-home-sections-band .desktop-explore-text,
body.dark-theme.home-active #home-lower .desktop-home-sections-band .cyx-section-compact-title,
body.dark-theme.home-active #home-lower .desktop-home-sections-band .cyx-sections-title {
  color: var(--dt-text) !important;
}

/* Mismo caso que arriba, en 3 títulos más de bloque que se quedaban en el
   azul/marino de tema claro (#0f1b2d) tanto en escritorio como en móvil:
   "Nuevo en Cyclick", "Notas del pelotón" y "Mejora en 5 minutos" — las
   reglas de tema claro en `home-mobile.css`/`style.css` usan `#home-lower`
   (un ID) sin contraparte en dark-theme-overrides.css, así que le ganaban
   a la regla genérica de h1-h5 (que no tiene ID). Reportado por Hector,
   2026-09-08 ("los títulos de los bloques... unos están en azul" — en
   realidad no es azul de acento, es el marino de texto claro sin adaptar). */
body.dark-theme.home-active #home-lower .cyx-new-title,
body.dark-theme.home-active #home-lower .home-weekly-notes-title,
body.dark-theme.home-active #home-lower .desktop-home-quick-band .desktop-home-quick-title,
body.dark-theme.home-active #home-lower .desktop-home-quick-title,
body.dark-theme.home-active #home-quick-section .h5.mb-0 {
  color: var(--dt-text) !important;
}

body.dark-theme.home-active #home-lower .desktop-home-sections-band .cyx-section-card.cyx-section-card--compact {
  background: transparent !important;
  border: 0 !important;
}

body.dark-theme.home-active #home-lower .home-riderroom-card {
  border: 0.5px solid var(--dt-border) !important;
}

/* Player page dark fixes. */
:is(body.dark-theme.player-standard) .player-info-mobile #player-title-mobile,
:is(body.dark-theme.player-standard) .player-info-mobile .h5,
:is(body.dark-theme.player-standard) .player-info-mobile #player-expert-mobile,
:is(body.dark-theme.player-standard) .player-info-mobile .player-expert-name,
:is(body.dark-theme.player-standard) .player-info-mobile #player-expert-mobile a,
:is(body.dark-theme.player-standard) .player-info-mobile a,
:is(body.dark-theme.player-standard) .player-info-mobile .player-desc-more-mobile {
  color: var(--dt-text) !important;
}

:is(body.dark-theme.player-standard) .player-ad-banner,
:is(body.dark-theme.player-standard) #player-ad-banner,
:is(body.dark-theme.player-standard) #playerAdBanner {
  background: var(--dt-surface) !important;
  border-color: var(--dt-border) !important;
}

:is(body.dark-theme.player-standard) .player-ad-banner-name,
:is(body.dark-theme.player-standard) .player-ad-banner-tagline,
:is(body.dark-theme.player-standard) .player-ad-banner-label,
:is(body.dark-theme.player-standard) .player-ad-name,
:is(body.dark-theme.player-standard) .player-ad-desc,
:is(body.dark-theme.player-standard) .player-ad-label {
  color: var(--dt-text) !important;
}

:is(body.dark-theme.player-standard) .player-sidebar-item-title,
:is(body.dark-theme.player-standard) .player-sim-guest,
:is(body.dark-theme.player-standard) .player-sim-title,
:is(body.dark-theme.player-standard) .player-sim-topic {
  color: var(--dt-text) !important;
}

:is(body.dark-theme.player-standard) .player-rec-title,
:is(body.dark-theme.player-standard) .fw-bold.player-rec-title {
  color: var(--dt-text) !important;
}

body.dark-theme.player-standard #app .player-rec-mobile .fw-bold.player-rec-title {
  color: var(--dt-text) !important;
}

:is(body.dark-theme.player-standard) .player-sidebar-item-meta,
:is(body.dark-theme.player-standard) .player-sim-section,
:is(body.dark-theme.player-standard) .player-sim-duration {
  color: var(--dt-muted) !important;
}

@media (max-width: 1023px) {
  body.dark-theme.home-active #home-lower .home-riderroom-banner .home-riderroom-card {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}

/* Home mobile tracks: keep video titles readable in dark mode */
body.dark-theme.home-active #home-lower .cyx-new-card-title,
body.dark-theme.home-active #home-quick-section .cyx-new-card-title,
body.dark-theme.home-active .home-mobile-layout .cyx-new-track .cyx-new-card-title,
body.dark-theme.home-active .home-mobile-layout .quick-cyx-track .cyx-new-card-title {
  color: var(--dt-text) !important;
}

body.dark-theme.home-active #home-lower .cyx-new-card-date,
body.dark-theme.home-active #home-quick-section .cyx-new-card-date,
body.dark-theme.home-active .home-mobile-layout .cyx-new-track .cyx-new-card-date,
body.dark-theme.home-active .home-mobile-layout .quick-cyx-track .cyx-new-card-date {
  color: var(--dt-muted) !important;
}

/* Home desktop dark polish: quick cards and hero panels must stay dark.
   OJO: .hero-secondary-card (la tarjeta, no el .hero-secondary-content) NO va
   aquí — lleva la miniatura como background-image inline y el shorthand
   `background` se la borraba. Su borde ya lo pone la regla general de arriba. */
body.dark-theme.home-active .home-web-layout .web-hero-full .hero-feature-content,
body.dark-theme.home-active .home-web-layout .web-hero-secondary-row .hero-secondary-content {
  background: var(--dt-surface) !important;
  border-color: var(--dt-border) !important;
}

body.dark-theme.home-active .home-web-layout .web-hero-full .hero-feature-content .hero-title,
body.dark-theme.home-active .home-web-layout .web-hero-full .hero-feature-content .hero-meta,
body.dark-theme.home-active .home-web-layout .web-hero-secondary-row .hero-secondary-content .hero-title-sm,
body.dark-theme.home-active .home-web-layout .web-hero-secondary-row .hero-secondary-content .hero-meta-sm {
  color: var(--dt-text) !important;
}

body.dark-theme.home-active #home-lower .desktop-home-video-card,
body.dark-theme.home-active #home-lower .video-card.desktop-home-video-card {
  background: var(--dt-surface) !important;
  border-color: var(--dt-border) !important;
  color: var(--dt-text) !important;
}

body.dark-theme.home-active #home-lower .desktop-home-video-card .title,
body.dark-theme.home-active #home-lower .video-card.desktop-home-video-card .title {
  color: var(--dt-text) !important;
}

body.dark-theme.home-active #home-lower .desktop-home-video-card .sub,
body.dark-theme.home-active #home-lower .video-card.desktop-home-video-card .sub {
  color: var(--dt-muted) !important;
}

body.dark-theme.home-active #home-lower .cyx-section-card-media {
  /* background-color, NUNCA `background` shorthand: este div lleva la miniatura
     de la sección como background-image inline, el shorthand la borraba. */
  background-color: var(--dt-surface-2) !important;
}

/* Home block separators: avoid bright divider masks in dark mode.
   :first-child cambiado a clases explícitas (Hector, 2026-09-09): dependía
   de que "Nuevo en Cyclick" fuera siempre el primer bloque — al mover "The
   Rider Room" a esa posición, "Nuevo en Cyclick" (2° lugar ahora) se quedó
   sin este arreglo y se veía con el fondo gris de "surface" en vez del
   fondo de la página. Con clases explícitas ya no importa el orden. */
body.dark-theme.home-active #home-lower .lower-band.desktop-home-new-band,
body.dark-theme.home-active #home-lower .lower-band.desktop-home-riderroom-band,
body.dark-theme.home-active #home-lower .lower-band.desktop-home-quick-band,
body.dark-theme.home-active #home-lower .lower-band.home-riderroom-banner {
  background: var(--dt-bg) !important;
  background-color: var(--dt-bg) !important;
}

body.dark-theme.home-active #home-lower .lower-band.desktop-home-new-band::after,
body.dark-theme.home-active #home-lower .lower-band.desktop-home-riderroom-band::after,
body.dark-theme.home-active #home-lower .lower-band.desktop-home-quick-band::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

/* Línea divisora arriba de "The Rider Room" (entre el hero "Destacados" y
   #home-lower) se veía más marcada que las demás (Hector, 2026-09-09) — no
   era de grosor, era de color: .home-web-container trae su borde fijo en
   #E8E8E8 (gris de tema claro) en style.css, sin contraparte en oscuro, a
   diferencia de las líneas de #home-lower que sí ya usan --dt-border. */
body.dark-theme.home-active .home-web-layout.home-desktop-theme .home-web-container {
  border-bottom-color: var(--dt-border) !important;
}

body.dark-theme.home-active #home-lower .home-riderroom-banner::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .sections-page .explore-section-card,
body.dark-theme:not(.rider-room-active):not(.player-dark) .sections-page .explore-section-card-content,
body.dark-theme:not(.rider-room-active):not(.player-dark) #explore-grid .explore-section-card,
body.dark-theme:not(.rider-room-active):not(.player-dark) #explore-grid .explore-section-card-content{
  background:var(--dt-surface) !important;
  border-color:var(--dt-border) !important;
}

body.dark-theme:not(.rider-room-active):not(.player-dark) .sections-page .explore-section-card-title,
body.dark-theme:not(.rider-room-active):not(.player-dark) .sections-page .explore-section-expert-name,
body.dark-theme:not(.rider-room-active):not(.player-dark) .sections-page .explore-section-count,
body.dark-theme:not(.rider-room-active):not(.player-dark) .sections-page .explore-section-expert-role{
  color:var(--dt-text) !important;
}

/* ── Modal de onboarding (intro) — versión DARK ──────────────────────────────
   El modal es siempre light por defecto. Sin esto, la regla global de
   h1-h5 / p de arriba pinta el título y el cuerpo casi blancos SOBRE el
   fondo blanco del modal y no se leen. Aquí se le da fondo oscuro y colores
   coherentes con el resto del tema. */
body.dark-theme .cyclick-onboarding-modal{
  background:var(--dt-surface, #161D27);
}

/* Aviso de cookies bloqueante (Hector, 2026-09-08) — mismo criterio que el
   modal de onboarding de arriba: fondo blanco fijo se veía fuera de lugar
   en dark theme. */
body.dark-theme .cookie-consent-banner{
  background:var(--dt-surface, #161D27);
}
/* Es texto de cuerpo (va en un <p>), no un título — por convención del
   sitio eso va en --dt-muted, no --dt-text (que es para títulos). De hecho
   ya caía ahí solo por el catch-all genérico de <p> más abajo en este
   archivo; se deja explícito con !important para que no dependa de eso. */
body.dark-theme .cookie-consent-text{
  color:var(--dt-muted, #AAB6C7) !important;
}
body.dark-theme .cookie-consent-btn-reject{
  background:var(--dt-surface-2, #10161F);
  border-color:var(--dt-border, #2A3442);
  color:var(--dt-text, #EAF0F8);
}
body.dark-theme .cyclick-onboarding-title,
body.dark-theme .cyclick-onboarding-tour-title{
  color:var(--dt-text, #EAF0F8) !important;
}
body.dark-theme .cyclick-onboarding-body,
body.dark-theme .cyclick-onboarding-tour-desc,
body.dark-theme .cyclick-onboarding-legal-copy{
  color:var(--dt-muted, #AAB6C7) !important;
}
body.dark-theme .cyclick-onboarding-eyebrow{
  color:var(--dt-accent, #76B7FF);
}
body.dark-theme .cyclick-onboarding-progress-bar{
  background:#2A3442;
}
body.dark-theme .cyclick-onboarding-btn-link{
  color:#8B97A8;
}
body.dark-theme .cyclick-onboarding-btn-secondary{
  background:var(--dt-surface-2, #10161F);
  border-color:var(--dt-border, #2A3442);
  color:var(--dt-text, #EAF0F8);
}
body.dark-theme .cyclick-onboarding-auth-input{
  background:var(--dt-surface-2, #10161F);
  border-color:var(--dt-border, #2A3442);
  color:var(--dt-text, #EAF0F8);
}
body.dark-theme .cyclick-onboarding-auth-label{
  color:var(--dt-muted, #AAB6C7);
}
body.dark-theme .cyclick-onboarding-auth-error{
  color:#FF8F8F;
}
body.dark-theme .cyclick-onboarding-legal-link{
  color:var(--dt-accent, #76B7FF);
}
body.dark-theme .cyclick-onboarding-legal-link:hover{
  color:#A7D0FF;
}
body.dark-theme .cyclick-onboarding-pill,
body.dark-theme .cyclick-onboarding-section-pill{
  background:var(--dt-surface-2, #10161F);
  border-color:var(--dt-border, #2A3442);
  color:var(--dt-muted, #AAB6C7);
}
body.dark-theme .cyclick-onboarding-pill.is-selected,
body.dark-theme .cyclick-onboarding-section-pill.is-selected{
  background:rgba(118,183,255,0.14);
  border-color:var(--dt-accent, #76B7FF);
  color:var(--dt-accent, #76B7FF);
}
body.dark-theme .cyclick-onboarding-tour-icon-wrap{
  background:rgba(118,183,255,0.14);
}
body.dark-theme .cyclick-onboarding-tour-icon-wrap.is-yellow{
  background:rgba(245,196,0,0.16);
}
body.dark-theme .cyclick-onboarding-section-pill img{
  filter:brightness(0) saturate(100%) invert(78%) sepia(30%) saturate(600%) hue-rotate(178deg) brightness(102%) contrast(95%);
}

/* ── Footer — versión DARK ──────────────────────────────────────────────────
   El footer es siempre light (#F5F5F7). Sin esto, en dark queda como un
   panel blanco al fondo de una página oscura, y encima la regla global de
   h1-h5 pinta los títulos "Legal"/"Soporte" casi blancos sobre ese blanco
   (ilegibles, como se veía en el reporte de Hector). */
body.dark-theme:not(.rider-room-active):not(.player-dark) .footer-container{
  background:var(--dt-surface, #161D27);
  border-top-color:var(--dt-border, #2A3442);
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .footer-column h4{
  color:var(--dt-text, #EAF0F8);
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .footer-column ul li a,
body.dark-theme:not(.rider-room-active):not(.player-dark) #footer-cookie-settings-link{
  color:var(--dt-muted, #AAB6C7);
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .footer-column ul li a:hover,
body.dark-theme:not(.rider-room-active):not(.player-dark) #footer-cookie-settings-link:hover{
  color:var(--dt-text, #EAF0F8);
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .footer-bottom{
  border-top-color:var(--dt-border, #2A3442);
}
body.dark-theme:not(.rider-room-active):not(.player-dark) .footer-bottom-copy{
  color:#8B97A8;
}

/* ── Modal de búsqueda global (#search-modal) ─────────────────────────────
   Era SIEMPRE light (backdrop casi blanco + panel #FFF + textos #111). En
   dark quedaba una pantalla blanca. Ahora respeta el tema. El backdrop
   necesita !important porque su fondo va inline en index.html. */
body.dark-theme:not(.rider-room-active):not(.player-dark) #search-modal-backdrop{
  background:rgba(14,19,26,0.96) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) #search-modal{
  color:var(--dt-text);
}
body.dark-theme:not(.rider-room-active):not(.player-dark) #search-modal .search-modal-panel{
  background:var(--dt-surface);
  border-color:var(--dt-border);
}
body.dark-theme:not(.rider-room-active):not(.player-dark) #search-modal .fw-bold{
  color:var(--dt-text);
}
body.dark-theme:not(.rider-room-active):not(.player-dark) #search-modal #global-search{
  background:var(--dt-surface-2);
  border-color:var(--dt-border);
  color:var(--dt-text);
}
body.dark-theme:not(.rider-room-active):not(.player-dark) #search-modal #global-search::placeholder{
  color:#91A0B5;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) #search-modal #global-search-close{
  color:var(--dt-muted);
}
body.dark-theme:not(.rider-room-active):not(.player-dark) #search-modal #global-search-close:hover{
  color:var(--dt-text);
}
body.dark-theme:not(.rider-room-active):not(.player-dark) #global-search-history .list-group-item,
body.dark-theme:not(.rider-room-active):not(.player-dark) #global-search-suggestions .list-group-item{
  background:transparent;
  color:var(--dt-text);
  /* home-mobile.css pone `border-bottom: ... #ECECEC !important` en @media
     ≤768px → hay que ganarle con !important */
  border-bottom-color:var(--dt-border) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) #global-search-history .list-group-item:hover,
body.dark-theme:not(.rider-room-active):not(.player-dark) #global-search-suggestions .list-group-item:hover{
  background:var(--dt-surface-2);
  color:var(--dt-text);
}
/* .result-title/-sub/-desc también llevan color !important en home-mobile.css */
body.dark-theme:not(.rider-room-active):not(.player-dark) #search-modal .result-title{
  color:var(--dt-text) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) #search-modal .result-sub,
body.dark-theme:not(.rider-room-active):not(.player-dark) #search-modal .result-desc,
body.dark-theme:not(.rider-room-active):not(.player-dark) #search-modal .small-muted{
  color:var(--dt-muted) !important;
}
body.dark-theme:not(.rider-room-active):not(.player-dark) #search-modal .badge.bg-dark{
  background:var(--dt-border) !important;
  color:var(--dt-text);
}

/* Mismo modal de búsqueda global, pero en Rider Room / Player: quedaba
   excluido del bloque de arriba (como el resto del "hardening global",
   a propósito — ver comentario al inicio del archivo) y por eso seguía
   TOTALMENTE blanco en modo oscuro ahí (Hector, 2026-09-09: "el buscador
   de the rider room sigue saliendo en blanco... al momento que le picas").
   Este es el modal de pantalla completa que se abre con el ícono de lupa
   #home-search-icon (visible en pantallas angostas, <1024px) — distinto
   del panel inline #desktop-search-results (ver bloque nuevo más arriba
   en este archivo, ese ya se había corregido). Mismos valores que el
   bloque de arriba, sin el :not(). */
body.dark-theme.rider-room-active #search-modal-backdrop,
body.dark-theme.player-dark #search-modal-backdrop{
  background:rgba(14,19,26,0.96) !important;
}
body.dark-theme.rider-room-active #search-modal,
body.dark-theme.player-dark #search-modal{
  color:var(--dt-text);
}
body.dark-theme.rider-room-active #search-modal .search-modal-panel,
body.dark-theme.player-dark #search-modal .search-modal-panel{
  background:var(--dt-surface);
  border-color:var(--dt-border);
}
body.dark-theme.rider-room-active #search-modal .fw-bold,
body.dark-theme.player-dark #search-modal .fw-bold{
  color:var(--dt-text);
}
body.dark-theme.rider-room-active #search-modal #global-search,
body.dark-theme.player-dark #search-modal #global-search{
  background:var(--dt-surface-2) !important;
  border-color:var(--dt-border) !important;
  color:var(--dt-text) !important;
}
body.dark-theme.rider-room-active #search-modal #global-search::placeholder,
body.dark-theme.player-dark #search-modal #global-search::placeholder{
  color:#91A0B5 !important;
}
body.dark-theme.rider-room-active #search-modal #global-search-close,
body.dark-theme.player-dark #search-modal #global-search-close{
  color:var(--dt-muted);
}
body.dark-theme.rider-room-active #search-modal #global-search-close:hover,
body.dark-theme.player-dark #search-modal #global-search-close:hover{
  color:var(--dt-text);
}
body.dark-theme.rider-room-active #global-search-history .list-group-item,
body.dark-theme.rider-room-active #global-search-suggestions .list-group-item,
body.dark-theme.player-dark #global-search-history .list-group-item,
body.dark-theme.player-dark #global-search-suggestions .list-group-item{
  background:transparent;
  color:var(--dt-text);
  border-bottom-color:var(--dt-border) !important;
}
body.dark-theme.rider-room-active #global-search-history .list-group-item:hover,
body.dark-theme.rider-room-active #global-search-suggestions .list-group-item:hover,
body.dark-theme.player-dark #global-search-history .list-group-item:hover,
body.dark-theme.player-dark #global-search-suggestions .list-group-item:hover{
  background:var(--dt-surface-2);
  color:var(--dt-text);
}
body.dark-theme.rider-room-active #search-modal .result-title,
body.dark-theme.player-dark #search-modal .result-title{
  color:var(--dt-text) !important;
}
body.dark-theme.rider-room-active #search-modal .result-sub,
body.dark-theme.rider-room-active #search-modal .result-desc,
body.dark-theme.rider-room-active #search-modal .small-muted,
body.dark-theme.player-dark #search-modal .result-sub,
body.dark-theme.player-dark #search-modal .result-desc,
body.dark-theme.player-dark #search-modal .small-muted{
  color:var(--dt-muted) !important;
}
body.dark-theme.rider-room-active #search-modal .badge.bg-dark,
body.dark-theme.player-dark #search-modal .badge.bg-dark{
  background:var(--dt-border) !important;
  color:var(--dt-text);
}

/* Campana: el anillo del badge amarillo debe ser del color del header en dark
   (no del #ebebeb claro). El dropdown de notificaciones ya es oscuro de base
   (fondo casi negro, texto claro) y funciona en ambos temas, no se toca. */
body.dark-theme:not(.rider-room-active):not(.player-dark) .notification-badge{
  box-shadow:0 0 0 2px var(--dt-surface);
}

/* SweetAlert2: el popup es blanco (dialog de sistema), pero la regla global
   de h1-h5 en dark pinta .swal2-title (un <h2>) con --dt-text casi blanco →
   invisible ("Tu tarjeta fue rechazada", "Cambio de plan", "¡Bienvenido!").
   El selector lleva html+body+div+h2 a propósito para out-especificar esa
   regla global (que es (0,5,2) por un `span:last-child` en su :is()).
   Pedido de Hector 2026-09-07. */
html body.dark-theme:not(.rider-room-active):not(.player-dark) div.swal2-popup h2.swal2-title{
  color:#0056A3 !important;
}
html body.dark-theme:not(.rider-room-active):not(.player-dark) div.swal2-popup div.swal2-html-container{
  color:#333333 !important;
}