/* ============================================================================================
   opfar-oscuro.css — el modo oscuro del Kit de interfaz OPFAR (el mismo de Ontime)
   --------------------------------------------------------------------------------------------
   El oscuro de Ontime (UNIFICACION/piloto-nueva/oscuro.css, revisión de Guille del 14/10/2026) llevado a las piezas
   del kit: la misma paleta y el mismo lenguaje. La sala en verde profundo; la cabecera, los paneles y las ventanas en
   verde; lo que se abre encima (desplegables, calendario, avisos, Mi cuenta) un punto más claro; el texto claro; lo
   elegido y el botón principal en blanco, con el texto en verde oscuro.

   Cómo funciona
   - Se carga SIEMPRE, después de opfar-interfaz.css. Solo hace algo con <html data-tema="oscuro"> (lo pone
     js/opfar-tema.js): todas las reglas van bajo :root[data-tema="oscuro"]. Sin el atributo, nada cambia.
   - Solo pisa colores, fondos, bordes y sombras (y la opacidad de lo desactivado, como Ontime). No cambia ni una
     medida, ni un tamaño, ni un radio, ni la disposición de nada.
   - Todo el oscuro va dentro de @media screen: al imprimir sale siempre el claro (el papel es blanco, y el texto
     claro de la pantalla no se leería). Quitar ese @media lo imprimiría en oscuro.
   - El logotipo de la cabecera: en oscuro, el oficial en negativo (assets/logos/OPFAR-logotipo-negativo.png). La
     cabecera pinta las dos imágenes (.op-logo-claro y .op-logo-oscuro, la negativa con loading="lazy") y aquí se
     enseña la que toca: cambiar el src con content: url() no funciona en todos los navegadores.

   Las variables para el contenido de cada web (--op-…): lo que muestra cada página (sus tarjetas, sus gráficos, su
   texto) lo pinta la web. Para que se vea bien en claro y en oscuro, que use estas en lugar de colores fijos:
   cambian solas con el tema. Claro (los colores del kit) → oscuro (los de Ontime):
     --op-fondo              el fondo de la página ............................ #F1F8F8 → #0B2A31
     --op-superficie         tarjetas, paneles, ventanas, cabecera ............. #FFFFFF → #123B44
     --op-superficie-2       lo que se abre encima: desplegables, menús, calendario  #FFFFFF → #18464F
     --op-superficie-suave   un tono sobre la superficie: pasar el ratón, la cabecera de una tabla, una fila
                             resaltada ...................................... #F1F8F8 → rgba(234, 246, 247, .06)
     --op-campo              el fondo de un campo ............................. #FFFFFF → rgba(11, 42, 49, .6)
     --op-texto              el texto ......................................... #123B44 → #EAF6F7
     --op-texto-2            el texto secundario: explicaciones, notas, cabeceras de tabla  #627A80 → #A9C3C7
     --op-texto-3            el más apagado: iconos, lo desactivado, marcas ....... #6B838A → #7F9EA3
                             (en oscuro da 5,3:1 sobre --op-fondo, pero 4,2 sobre --op-superficie y 3,6 sobre
                             --op-superficie-2: un texto pequeño encima de una tarjeta, mejor en --op-texto-2)
     --op-linea              bordes y separadores ............................. #DFEBEC → rgba(234, 246, 247, .12)
     --op-linea-2            el borde de los campos y de lo que se abre encima ... #D6E4E6 → rgba(234, 246, 247, .22)
     --op-turquesa           la marca: rellenos, bordes, el anillo del foco, barras (no para texto pequeño)
                             ................................................. #0FA3B4 → #0FA3B4
     --op-turquesa-suave     el fondo de algo informativo o elegido ............ #DFF2F4 → rgba(15, 163, 180, .16)
     --op-enlace             enlaces y texto en turquesa (antetítulos, botones de texto)  #0C7B88 → #5BD0D6
     --op-activo-fondo       lo elegido en un menú o en unas pestañas propias .... #DCEFF1 → #FFFFFF
     --op-activo-texto       su texto ......................................... #21616C → #0C2A31
     --op-aviso              texto de aviso (ámbar) ........................... #825B21 → #ECB664
     --op-aviso-suave        su fondo ......................................... #FFF2D6 → rgba(217, 138, 31, .16)
     --op-exito              texto de algo bien (verde) ....................... #14694A → #62D4A6
     --op-exito-suave        su fondo ......................................... #E3F4EC → rgba(31, 157, 107, .18)
     --op-error              texto de un error (rojo) ......................... #B3261E → #F7A79F
     --op-error-suave        su fondo ......................................... #FBE5E3 → rgba(208, 69, 59, .18)
     --op-sombra             la sombra de lo que flota ......................... 0 18px 40px rgba(18, 59, 68, .15)
                                                                                → 0 18px 50px rgba(0, 0, 0, .35)
   Además, en oscuro, los tokens semánticos de opfar-tokens.css (--text-strong, --surface-card, --border-default…)
   cambian como en Ontime: una web que ya los use se ve oscura sin tocar nada.

   Contraste (AA, 4,5:1 los textos normales; calculado con los colores compuestos sobre su fondo): texto 13,7 sobre
   el fondo, 11,0 sobre la superficie y 9,4 sobre lo que se abre encima; secundario 8,1, 6,5 y 5,6; aviso, éxito y
   error, al menos 4,6 sobre cualquier fondo oscuro del kit y sobre su propio fondo suave. Por eso tres cambios pequeños frente a Ontime, que
   ahí no llega a 4,5: los textos de aviso, éxito y error son un punto más claros (#ECB664, #62D4A6, #F7A79F en vez de
   #E2A345, #3FBF8C, #E5675E); lo que Ontime pone en blanco sobre turquesa (contadores, iniciales, «Ahora») va en
   blanco sobre el turquesa del botón del kit (#087D89, 4,9:1; sobre #0FA3B4 daba 3,0); y el rojo de la campana y del
   botón «peligro» es el oficial (--opfar-danger #D0453B, 4,6:1 con el blanco; el de Ontime daba 3,3). Los textos
   pequeños que Ontime pone en --texto-3 encima de una tarjeta van aquí en --texto-2.

   Índice (el mismo de opfar-interfaz.css): 0 variables · 1 página · 2 cabecera · 3 aplicaciones y farmacias ·
   4 avisos · 5 cuenta · 6 menú superior · 7 menú lateral · 8 menú del móvil · 9 apartados · 10 botones · 11 campos ·
   12 desplegables · 13 calendario · 14 etiquetas, paneles, tablas, avisos · 15 diálogos y mensaje ·
   16 barras de desplazamiento · 17 pantallas pequeñas · 18 el interruptor claro / oscuro · 19 la guía ·
   20 las pantallas de privacidad · 21 Mi cuenta: avisos por correo y privacidad · 22 versión nueva
   ============================================================================================ */

/* ---------- 0. Las variables: en claro (siempre) ---------- */
:root {
  --op-fondo: #F1F8F8;
  --op-superficie: #FFFFFF;
  --op-superficie-2: #FFFFFF;
  --op-superficie-suave: #F1F8F8;
  --op-campo: #FFFFFF;
  --op-texto: #123B44;
  --op-texto-2: #627A80;
  --op-texto-3: #6B838A;
  --op-linea: #DFEBEC;
  --op-linea-2: #D6E4E6;
  --op-turquesa: #0FA3B4;
  --op-turquesa-suave: #DFF2F4;
  --op-enlace: #0C7B88;
  --op-activo-fondo: #DCEFF1;
  --op-activo-texto: #21616C;
  --op-aviso: #825B21;
  --op-aviso-suave: #FFF2D6;
  --op-exito: #14694A;
  --op-exito-suave: #E3F4EC;
  --op-error: #B3261E;
  --op-error-suave: #FBE5E3;
  --op-sombra: 0 18px 40px rgba(18, 59, 68, .15);
}

/* todo lo demás, solo en la pantalla (al imprimir, el claro) */
@media screen {

/* ---------- 0. Las variables: en oscuro ---------- */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --op-fondo: #0B2A31;
  --op-superficie: #123B44;
  --op-superficie-2: #18464F;
  --op-superficie-suave: rgba(234, 246, 247, .06);
  --op-campo: rgba(11, 42, 49, .6);
  --op-texto: #EAF6F7;
  --op-texto-2: #A9C3C7;
  --op-texto-3: #7F9EA3;
  --op-linea: rgba(234, 246, 247, .12);
  --op-linea-2: rgba(234, 246, 247, .22);
  --op-turquesa: #0FA3B4;
  --op-turquesa-suave: rgba(15, 163, 180, .16);
  --op-enlace: #5BD0D6;
  --op-activo-fondo: #FFFFFF;
  --op-activo-texto: #0C2A31;
  --op-aviso: #ECB664;
  --op-aviso-suave: rgba(217, 138, 31, .16);
  --op-exito: #62D4A6;
  --op-exito-suave: rgba(31, 157, 107, .18);
  --op-error: #F7A79F;
  --op-error-suave: rgba(208, 69, 59, .18);
  --op-sombra: 0 18px 50px rgba(0, 0, 0, .35);

  /* los tokens semánticos de opfar-tokens.css, como en Ontime */
  --text-strong: var(--op-texto);
  --text-body: var(--op-texto);
  --text-muted: var(--op-texto-2);
  --text-subtle: var(--op-texto-3);
  --text-link: #5BD0D6;
  --text-link-hover: #BFE6EA;
  --surface-page: var(--op-fondo);
  --surface-card: var(--op-superficie);
  --surface-sunken: rgba(11, 42, 49, .6);
  --border-default: var(--op-linea);
  --border-subtle: var(--op-linea);
  --border-strong: var(--op-linea-2);
  --color-primary-tint: rgba(15, 163, 180, .16);
  --opfar-info-soft: rgba(15, 163, 180, .16);
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-lg: var(--op-sombra);

  /* 16. las barras de desplazamiento (las variables de opfar-interfaz.css), en el gris claro de la sala */
  --sb-thumb: rgba(169, 195, 199, .35);
  --sb-thumb-hover: rgba(169, 195, 199, .6);
}

/* ---------- 1. La página (o solo las cajas del kit) ---------- */
:root[data-tema="oscuro"] .op-pagina { background: var(--op-fondo); color: var(--op-texto); }
:root[data-tema="oscuro"] .op-ui { color: var(--op-texto); }
/* los enlaces, con el mismo peso que en el kit (:where): las piezas (.op-btn, los menús…) y las clases de cada web
   siguen mandando sobre ellos */
:where(:root[data-tema="oscuro"]) :is(.op-pagina, .op-ui) :where(a) { color: var(--op-enlace); }
:root[data-tema="oscuro"] .op-saltar { background: var(--op-superficie); }
/* el foco (#5BD0D6, 3 px) es el mismo en claro y en oscuro: sobre el verde se ve a más de 6:1 */

/* ---------- 2. La cabecera ---------- */
:root[data-tema="oscuro"] .op-cabecera { background: var(--op-superficie); border-bottom-color: var(--op-linea); }
/* el logotipo oficial en negativo (regla del kit: solo logos oficiales); la ruta, relativa a este fichero. Con su
   proporción (la misma del positivo, 2999 × 840): sin ella, al pasar a oscuro, la imagen se queda a 0 de alto un
   instante mientras llega la nueva */
:root[data-tema="oscuro"] .op-marca-opfar img.op-logo-claro { display: none; }
:root[data-tema="oscuro"] .op-marca-opfar img.op-logo-oscuro { display: block; }
:root[data-tema="oscuro"] .op-marca-opfar, :root[data-tema="oscuro"] .op-marca-app { color: inherit; }
:root[data-tema="oscuro"] .op-marca-raya { background: var(--op-linea-2); }
:root[data-tema="oscuro"] .op-marca-app strong { color: var(--op-texto); }
:root[data-tema="oscuro"] .op-marca-app strong span { color: #5BD0D6; }
:root[data-tema="oscuro"] .op-marca-app svg { color: var(--op-texto-3); }
:root[data-tema="oscuro"] .op-zona { background: rgba(234, 246, 247, .06); }
:root[data-tema="oscuro"] .op-rol { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-boton-cab { background: rgba(234, 246, 247, .08); border-color: var(--op-linea-2); color: var(--op-texto); }
:root[data-tema="oscuro"] button.op-boton-cab:hover { background: rgba(234, 246, 247, .14); }
:root[data-tema="oscuro"] .op-boton-cab svg { color: var(--op-texto-3); }
/* las iniciales: blanco sobre el turquesa del botón del kit (Ontime: sobre #0FA3B4, que no llega a AA) */
:root[data-tema="oscuro"] .op-iniciales { background: #087D89; color: #FFFFFF; }

/* ---------- 2 bis. Las herramientas de cada web ---------- */
:root[data-tema="oscuro"] .op-boton-cab.solo-icono svg { color: var(--op-texto); }
:root[data-tema="oscuro"] :is(.op-herramientas, .op-movil-herr) select.op-campo { background-color: rgba(234, 246, 247, .08); border-color: var(--op-linea-2); color: var(--op-texto); }

/* ---------- 3. Las aplicaciones de OPFAR y las farmacias (en un diálogo) ---------- */
:root[data-tema="oscuro"] .op-app { background: var(--op-superficie); border-color: var(--op-linea); color: inherit; }
:root[data-tema="oscuro"] button.op-app:hover, :root[data-tema="oscuro"] a.op-app:hover { border-color: var(--op-turquesa); }
:root[data-tema="oscuro"] .op-app b { color: var(--op-texto); }
:root[data-tema="oscuro"] .op-app b span { color: #5BD0D6; }
:root[data-tema="oscuro"] .op-app small { color: var(--op-texto-2); }
:root[data-tema="oscuro"] button.op-app small, :root[data-tema="oscuro"] a.op-app small { color: #5BD0D6; }
:root[data-tema="oscuro"] .op-far { background: rgba(234, 246, 247, .04); border-color: var(--op-linea); }
:root[data-tema="oscuro"] .op-far:hover { border-color: var(--op-linea-2); background: rgba(234, 246, 247, .08); }
:root[data-tema="oscuro"] .op-far[aria-current="true"] { border-color: var(--op-turquesa); background: rgba(15, 163, 180, .14); }
/* las iniciales de la farmacia: en turquesa suave (con el turquesa claro de Ontime, sobre la farmacia elegida, que
   ya es turquesa, se quedaban en 4,2:1) */
:root[data-tema="oscuro"] .op-far-ini { background: rgba(15, 163, 180, .2); color: #BFE6EA; }
:root[data-tema="oscuro"] .op-far-txt b { color: var(--op-texto); }
:root[data-tema="oscuro"] .op-far em { background: #087D89; color: #FFFFFF; }
:root[data-tema="oscuro"] .op-far i { color: var(--op-texto-3); }
:root[data-tema="oscuro"] .op-far-grupo { color: var(--op-texto-2); }

/* ---------- 4. La campana de avisos ---------- */
:root[data-tema="oscuro"] .op-campana svg { color: var(--op-texto); }
/* el contador: el rojo oficial (--opfar-danger), con el borde del color de la cabecera */
:root[data-tema="oscuro"] .op-campana i { background: #D0453B; border-color: var(--op-superficie); color: #FFFFFF; }
:root[data-tema="oscuro"] .op-avisos-pop { background: var(--op-superficie-2); border-color: var(--op-linea-2); box-shadow: var(--op-sombra); }
:root[data-tema="oscuro"] .op-avisos-cab { border-bottom-color: var(--op-linea); }
:root[data-tema="oscuro"] .op-avisos-cab b { color: var(--op-texto); }
:root[data-tema="oscuro"] .op-avisos-pop li { color: var(--op-texto); }
:root[data-tema="oscuro"] .op-avisos-pop li.destacado { background: var(--op-aviso-suave); }
:root[data-tema="oscuro"] .op-avisos-pop li small { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-avisos-vacio { color: var(--op-texto-2); }

/* ---------- 5. Mi cuenta ---------- */
:root[data-tema="oscuro"] .op-cuenta-pop { background: var(--op-superficie-2); border-color: var(--op-linea-2); box-shadow: var(--op-sombra); }
:root[data-tema="oscuro"] .op-cuenta-cab { border-bottom-color: var(--op-linea); }
:root[data-tema="oscuro"] .op-cuenta-cab b { color: var(--op-texto); }
:root[data-tema="oscuro"] .op-cuenta-cab small { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-cuenta-pop button { color: var(--op-texto); }
:root[data-tema="oscuro"] .op-cuenta-pop button svg { color: #5BD0D6; }
:root[data-tema="oscuro"] .op-cuenta-pop button:hover, :root[data-tema="oscuro"] .op-cuenta-pop button:focus-visible { background: rgba(234, 246, 247, .08); }
:root[data-tema="oscuro"] .op-cuenta-pop button.peligro { color: var(--op-error); }
:root[data-tema="oscuro"] .op-cuenta-pop button.peligro svg { color: var(--op-error); }
:root[data-tema="oscuro"] .op-version { color: var(--op-texto-2); border-top-color: var(--op-linea); }

/* ---------- 6. El menú de arriba (como Ontime: sobre el fondo de la sala, el activo en blanco) ---------- */
:root[data-tema="oscuro"] .op-menu-arriba { background: var(--op-fondo); border-bottom-color: var(--op-linea); }
:root[data-tema="oscuro"] .op-menu-arriba button, :root[data-tema="oscuro"] .op-menu-arriba a, :root[data-tema="oscuro"] .op-menu-arriba .pronto { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-menu-arriba button:hover, :root[data-tema="oscuro"] .op-menu-arriba a:hover { background: rgba(234, 246, 247, .06); color: var(--op-texto); }
:root[data-tema="oscuro"] .op-menu-arriba .activo, :root[data-tema="oscuro"] .op-menu-arriba .activo:hover { background: #FFFFFF; color: #0C2A31; }
:root[data-tema="oscuro"] .op-menu-arriba i { background: #087D89; color: #FFFFFF; }

/* ---------- 7. El menú lateral (como el de Ontime en oscuro: verde, el activo en blanco) ---------- */
:root[data-tema="oscuro"] .op-menu-lateral { background: var(--op-superficie); color: var(--op-texto); border-right-color: var(--op-linea); }
:root[data-tema="oscuro"] .op-menu-lateral-titulo { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-menu-lateral button, :root[data-tema="oscuro"] .op-menu-lateral a, :root[data-tema="oscuro"] .op-menu-lateral .pronto { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-menu-lateral svg { color: inherit; }
:root[data-tema="oscuro"] .op-menu-lateral button:hover, :root[data-tema="oscuro"] .op-menu-lateral a:hover { background: rgba(234, 246, 247, .06); color: var(--op-texto); }
:root[data-tema="oscuro"] .op-menu-lateral .activo, :root[data-tema="oscuro"] .op-menu-lateral .activo:hover { background: #FFFFFF; color: #0C2A31; }
:root[data-tema="oscuro"] .op-menu-lateral .activo svg { color: var(--op-turquesa); }
:root[data-tema="oscuro"] .op-menu-lateral i { background: rgba(234, 246, 247, .1); color: var(--op-texto); }
/* el contador dentro del activo (blanco): el de la versión clara, que sobre blanco se lee */
:root[data-tema="oscuro"] .op-menu-lateral .activo i { background: #E4F2F3; color: #245B65; }
:root[data-tema="oscuro"] .op-menu-lateral .op-sub { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-menu-lateral .op-sub.activo, :root[data-tema="oscuro"] .op-menu-lateral .op-sub.activo:hover { background: rgba(15, 163, 180, .2); color: var(--op-texto); }
:root[data-tema="oscuro"] .op-firma { border-top-color: var(--op-linea); }
:root[data-tema="oscuro"] .op-firma span { color: var(--op-texto); }
:root[data-tema="oscuro"] .op-firma small { color: var(--op-texto-2); }

/* ---------- 7 bis. El menú lateral oscuro (data-menu-tono="oscuro") ----------
   En el tema oscuro todo es oscuro: el menú con data-menu-tono="oscuro" se ve igual que el de arriba (el de Ontime).
   Lo pisan las reglas de la sección 7, que pesan más; aquí no hace falta nada más. */

/* ---------- 8. El menú en el móvil ---------- */
:root[data-tema="oscuro"] .op-movil { background: var(--op-superficie); border-bottom-color: var(--op-linea); }
:root[data-tema="oscuro"] .op-movil-btn { background: var(--op-superficie); border-color: var(--op-linea-2); color: var(--op-texto); box-shadow: none; }
:root[data-tema="oscuro"] .op-movil-btn > svg:first-child { color: #5BD0D6; }
:root[data-tema="oscuro"] .op-movil-btn > svg:last-child { color: var(--op-texto-3); }
:root[data-tema="oscuro"] .op-movil-btn[aria-expanded="true"] { border-color: var(--op-turquesa); }
:root[data-tema="oscuro"] .op-movil-txt small, :root[data-tema="oscuro"] .op-movil-far small { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-movil-panel { background: var(--op-superficie); border-color: var(--op-linea-2); box-shadow: var(--op-sombra); }
:root[data-tema="oscuro"] .op-movil-item { color: var(--op-texto); }
:root[data-tema="oscuro"] .op-movil-item svg { color: #5BD0D6; }
:root[data-tema="oscuro"] .op-movil-item:hover { background: rgba(234, 246, 247, .08); }
:root[data-tema="oscuro"] .op-movil-item.activo { background: #FFFFFF; color: #0C2A31; }
:root[data-tema="oscuro"] .op-movil-item.activo svg { color: var(--op-turquesa); }
:root[data-tema="oscuro"] .op-movil-item i { background: #087D89; color: #FFFFFF; }
:root[data-tema="oscuro"] .op-movil-item.op-sub { color: var(--op-texto-2); }
/* un apartado elegido: su texto, el del activo (en el kit, el color del apartado pisa al del activo) */
:root[data-tema="oscuro"] .op-movil-item.op-sub.activo { color: #0C2A31; }
:root[data-tema="oscuro"] .op-movil-far { border-top-color: var(--op-linea); color: var(--op-texto); }
:root[data-tema="oscuro"] .op-movil-far svg { color: #5BD0D6; }
:root[data-tema="oscuro"] .op-movil-far em { color: #5BD0D6; }
:root[data-tema="oscuro"] .op-movil-herr { border-top-color: var(--op-linea); }

/* ---------- 9. Los apartados de una sección y las pastillas ---------- */
:root[data-tema="oscuro"] .op-apartados button, :root[data-tema="oscuro"] .op-apartados a { background: transparent; border-color: var(--op-linea-2); color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-apartados button:hover, :root[data-tema="oscuro"] .op-apartados a:hover { background: rgba(234, 246, 247, .08); color: var(--op-texto); }
:root[data-tema="oscuro"] .op-apartados .activo, :root[data-tema="oscuro"] .op-apartados .activo:hover { background: #FFFFFF; color: #0C2A31; border-color: #FFFFFF; }
:root[data-tema="oscuro"] .op-pastillas { background: rgba(234, 246, 247, .08); }
:root[data-tema="oscuro"] .op-pastillas button { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-pastillas button.activo { background: #FFFFFF; color: #0C2A31; box-shadow: none; }

/* ---------- 10. Botones (como Ontime: el principal en blanco) ---------- */
:root[data-tema="oscuro"] .op-btn { background: #FFFFFF; border-color: #FFFFFF; color: #0C2A31; }
:root[data-tema="oscuro"] .op-btn:hover { background: #BFE6EA; border-color: #BFE6EA; }
:root[data-tema="oscuro"] .op-btn.claro { background: rgba(234, 246, 247, .1); color: var(--op-texto); border-color: var(--op-linea-2); }
:root[data-tema="oscuro"] .op-btn.claro:hover { background: rgba(234, 246, 247, .18); }
/* «peligro»: el rojo oficial (--opfar-danger #D0453B), con el blanco a 4,6:1 */
:root[data-tema="oscuro"] .op-btn.peligro { background: #D0453B; border-color: #D0453B; color: #FFFFFF; }
:root[data-tema="oscuro"] .op-btn.peligro:hover { background: #B83A31; border-color: #B83A31; }
:root[data-tema="oscuro"] .op-btn.claro.peligro { background: rgba(234, 246, 247, .1); color: var(--op-error); border-color: var(--op-linea-2); }
:root[data-tema="oscuro"] .op-texto-btn { color: var(--op-enlace); }

/* ---------- 11. Campos (texto, desplegable, fecha) ---------- */
:root[data-tema="oscuro"] .op-etq { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-campo { background-color: var(--op-campo); border-color: var(--op-linea-2); color: var(--op-texto); }
:root[data-tema="oscuro"] .op-campo[readonly] { background-color: rgba(234, 246, 247, .06); color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-campo:focus { border-color: var(--op-turquesa); box-shadow: 0 0 0 3px rgba(15, 163, 180, .25); }
:root[data-tema="oscuro"] .op-campo::placeholder { color: var(--op-texto-3); }
/* las opciones de un <select data-nativo> (la lista del sistema): sobre el fondo del campo, que es transparente,
   el sistema las pintaría a su manera */
:root[data-tema="oscuro"] .op-campo option, :root[data-tema="oscuro"] .op-campo optgroup { background-color: var(--op-superficie); color: var(--op-texto); }
:root[data-tema="oscuro"] .op-nota { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-mensaje.bien { color: var(--op-exito); }
:root[data-tema="oscuro"] .op-mensaje.mal { color: var(--op-error); }

/* ---------- 12. Los desplegables de OPFAR (js/desplegables.js) ---------- */
:root[data-tema="oscuro"] .ot-lista { background: var(--op-superficie-2); border-color: var(--op-linea-2); box-shadow: var(--op-sombra); }
:root[data-tema="oscuro"] .ot-op { color: var(--op-texto); }
:root[data-tema="oscuro"] .ot-op:hover, :root[data-tema="oscuro"] .ot-op:focus-visible, :root[data-tema="oscuro"] .ot-op.activa { background: rgba(234, 246, 247, .08); }
/* la elegida: turquesa claro sobre turquesa (al 14 %: con el 20 % de Ontime se quedaba en 4,3:1) */
:root[data-tema="oscuro"] .ot-op.sel { background: rgba(15, 163, 180, .14); color: #5BD0D6; }
:root[data-tema="oscuro"] .ot-op i { color: #5BD0D6; }
:root[data-tema="oscuro"] .ot-op[disabled] { color: var(--op-texto-3); opacity: .6; background: none; }
:root[data-tema="oscuro"] .ot-grupo { color: var(--op-texto-2); }
/* el buscador de las listas largas: el campo como .op-campo; solo el color del fondo y la lupa (en el gris claro de
   la sala), para no tocar dónde va ni su tamaño */
:root[data-tema="oscuro"] .ot-buscar { border-bottom-color: var(--op-linea); }
:root[data-tema="oscuro"] .ot-buscar input { border-color: var(--op-linea-2); background-color: var(--op-campo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9C3C7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); color: var(--op-texto); }
:root[data-tema="oscuro"] .ot-buscar input::placeholder { color: var(--op-texto-3); }
:root[data-tema="oscuro"] .ot-buscar input:focus { border-color: var(--op-turquesa); box-shadow: 0 0 0 3px rgba(15, 163, 180, .25); }
:root[data-tema="oscuro"] .ot-vacio { color: var(--op-texto-2); }

/* ---------- 13. El calendario de OPFAR (js/fechas.js) ---------- */
:root[data-tema="oscuro"] .ot-cal { background: var(--op-superficie-2); }
:root[data-tema="oscuro"] .ot-cal-cab b { color: var(--op-texto); }
:root[data-tema="oscuro"] .ot-cal-flecha { background: transparent; border-color: var(--op-linea-2); color: var(--op-texto); }
:root[data-tema="oscuro"] .ot-cal-dias > span { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .ot-cal-d { color: var(--op-texto); }
:root[data-tema="oscuro"] .ot-cal-d:hover { background: rgba(234, 246, 247, .08); }
:root[data-tema="oscuro"] .ot-cal-d.fuera { color: var(--op-texto-3); opacity: .6; }
:root[data-tema="oscuro"] .ot-cal-d.hoy { box-shadow: inset 0 0 0 1.5px #5BD0D6; }
:root[data-tema="oscuro"] .ot-cal-d.sel { background: #FFFFFF; color: #0C2A31; opacity: 1; }
:root[data-tema="oscuro"] .ot-cal-d:disabled { color: var(--op-texto-3); opacity: .6; background: none; }
:root[data-tema="oscuro"] .ot-cal-pie { border-top-color: var(--op-linea); }
:root[data-tema="oscuro"] .ot-cal-d:focus-visible, :root[data-tema="oscuro"] .ot-cal-flecha:focus-visible, :root[data-tema="oscuro"] .ot-cal-txt:focus-visible { outline-color: #5BD0D6; }
:root[data-tema="oscuro"] .ot-cal-flota { border-color: var(--op-linea-2); box-shadow: var(--op-sombra); }
:root[data-tema="oscuro"] .ot-cal-txt { color: var(--op-texto); }
:root[data-tema="oscuro"] .ot-cal-txt:hover { background: rgba(234, 246, 247, .08); }
:root[data-tema="oscuro"] .ot-cal-txt:disabled { color: var(--op-texto-3); opacity: .6; background: none; }

/* ---------- 14. Etiquetas, paneles, tablas y avisos en la página ---------- */
:root[data-tema="oscuro"] .op-etiqueta { background: rgba(15, 163, 180, .18); color: #5BD0D6; }
:root[data-tema="oscuro"] .op-etiqueta.aviso { background: var(--op-aviso-suave); color: var(--op-aviso); }
:root[data-tema="oscuro"] .op-etiqueta.neutra { background: rgba(234, 246, 247, .1); color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-etiqueta.bien { background: var(--op-exito-suave); color: var(--op-exito); }
:root[data-tema="oscuro"] .op-etiqueta.mal { background: var(--op-error-suave); color: var(--op-error); }
:root[data-tema="oscuro"] .op-antetitulo { color: #5BD0D6; }
:root[data-tema="oscuro"] .op-cabeza p { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-panel { background: var(--op-superficie); border-color: var(--op-linea); box-shadow: none; }
:root[data-tema="oscuro"] .op-panel-cab { border-bottom-color: var(--op-linea); }
:root[data-tema="oscuro"] .op-panel-cab p { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-tabla th { background: rgba(234, 246, 247, .05); color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-tabla td { border-top-color: var(--op-linea); }
:root[data-tema="oscuro"] .op-nota-caja { background: rgba(15, 163, 180, .1); border-color: var(--op-linea-2); color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-nota-caja.aviso { background: var(--op-aviso-suave); border-color: rgba(226, 163, 69, .4); color: var(--op-aviso); }
:root[data-tema="oscuro"] .op-nota-caja.mal { background: var(--op-error-suave); border-color: rgba(229, 103, 94, .4); color: var(--op-error); }
:root[data-tema="oscuro"] .op-vacio { color: var(--op-texto-2); }

/* ---------- 15. Diálogos y el mensaje de abajo ---------- */
:root[data-tema="oscuro"] dialog.op-dialogo { background: var(--op-superficie); border-color: var(--op-linea-2); color: var(--op-texto); box-shadow: var(--op-sombra); }
:root[data-tema="oscuro"] dialog.op-dialogo::backdrop { background: rgba(5, 20, 24, .62); }
/* sin peso, como en el kit (:where): una nota, un mensaje o una clase de la web dentro de la ventana mandan */
:where(:root[data-tema="oscuro"] dialog.op-dialogo) p { color: var(--op-texto-2); }
/* el mensaje de abajo, como el de Ontime en oscuro: blanco, con el texto en verde oscuro */
:root[data-tema="oscuro"] .op-mensaje-flotante { background: #FFFFFF; color: #0C2A31; box-shadow: var(--op-sombra); }

/* ---------- 15 bis. «Pronto» en el menú ---------- */
:root[data-tema="oscuro"] .op-menu-arriba .pronto em, :root[data-tema="oscuro"] .op-menu-lateral .pronto em, :root[data-tema="oscuro"] .op-movil-item.pronto em { background: rgba(234, 246, 247, .1); color: var(--op-texto-2); }

/* ---------- 15 ter. Mi cuenta y Cambiar contraseña (js/opfar-cuenta.js) ---------- */
:root[data-tema="oscuro"] dialog.op-dialogo.op-cuenta-dlg h2 { color: #5BD0D6; }
:root[data-tema="oscuro"] .op-cuenta-avas small { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-cuenta-ava { background: transparent; border-color: var(--op-linea-2); }
:root[data-tema="oscuro"] .op-cuenta-ava:hover, :root[data-tema="oscuro"] .op-cuenta-ava:focus-visible { border-color: var(--op-turquesa); }
:root[data-tema="oscuro"] .op-cuenta-ava[aria-pressed="true"] { border-color: var(--op-turquesa); }
:root[data-tema="oscuro"] .op-ojo { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-ojo:hover { color: #5BD0D6; background: rgba(15, 163, 180, .16); }
:root[data-tema="oscuro"] .op-olvido { color: var(--op-texto-2); }

/* ---------- 15 quater. Instalar la app (js/opfar-instalar.js): la ventana y el aviso «Novedad» ----------
   La ventana es un dialog.op-dialogo con piezas del kit (op-btn, op-pastillas, op-etiqueta, op-nota, op-mensaje):
   ya están arriba. Solo queda la lista de pasos. */
:root[data-tema="oscuro"] .op-instalar-pasos { color: var(--op-texto); }

/* ---------- 16. Barras de desplazamiento ----------
   Las pintan --sb-thumb y --sb-thumb-hover, que cambian en la sección 0 (en Firefox, scrollbar-color, con las mismas
   variables). color-scheme: dark pone en oscuro las del sistema que no son del kit. */

/* ---------- 17. Pantallas más pequeñas ----------
   Los cortes de opfar-interfaz.css solo cambian medidas y qué se ve: ningún color. Nada que hacer aquí. */

/* ---------- 18. El interruptor del modo claro y oscuro (js/opfar-tema.js · OPFAR_TEMA.boton()) ----------
   Como el de Ontime en oscuro (nueva.css · .tema-btn): verde, el círculo blanco sobre la luna. Que el círculo se
   mueva a la luna ya lo dice opfar-interfaz.css. */
:root[data-tema="oscuro"] .op-tema-btn { background: var(--op-superficie-2); border-color: var(--op-linea-2); box-shadow: 0 6px 18px rgba(234, 246, 247, .16); color: var(--op-texto-3); }
:root[data-tema="oscuro"] .op-tema-btn:hover { border-color: var(--op-turquesa); box-shadow: 0 8px 22px rgba(234, 246, 247, .24); }
:root[data-tema="oscuro"] .op-tema-btn::before { background: #FFFFFF; }
:root[data-tema="oscuro"] .op-tema-btn svg:last-child { color: #0C2A31; }

/* ---------- 19. La guía de la primera vez (js/opfar-guia.js) ----------
   La de Ontime en oscuro (.ot-guia-…): la penumbra más honda, el marco en turquesa claro, la tarjeta en verde y los
   botones como los del kit en oscuro. «No volver a mostrar», en el secundario (en --texto-3 no llegaba a 4,5:1). */
:root[data-tema="oscuro"] .op-guia.sin-destino .op-guia-velo { background: rgba(5, 20, 24, .62); }
:root[data-tema="oscuro"] .op-guia-marco { box-shadow: 0 0 0 3px rgba(91, 208, 214, .9), 0 0 0 9999px rgba(5, 20, 24, .62); }
:root[data-tema="oscuro"] .op-guia-tarjeta { background: var(--op-superficie); border-color: var(--op-linea-2); box-shadow: var(--op-sombra); color: var(--op-texto); }
:root[data-tema="oscuro"] .op-guia-cuenta { color: #5BD0D6; }
:root[data-tema="oscuro"] .op-guia-x { color: var(--op-texto-3); }
:root[data-tema="oscuro"] .op-guia-x:hover { background: rgba(234, 246, 247, .08); color: var(--op-texto); }
:root[data-tema="oscuro"] .op-guia-tarjeta h2 { color: var(--op-texto); }
:root[data-tema="oscuro"] .op-guia-tarjeta p { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-guia-puntos i { background: var(--op-linea-2); }
:root[data-tema="oscuro"] .op-guia-puntos i.on { background: var(--op-turquesa); }
:root[data-tema="oscuro"] .op-guia-pie { border-top-color: var(--op-linea); }
:root[data-tema="oscuro"] .op-guia-no { color: var(--op-texto-2); }
:root[data-tema="oscuro"] .op-guia-btn { background: #FFFFFF; border-color: #FFFFFF; color: #0C2A31; }
:root[data-tema="oscuro"] .op-guia-btn:hover { background: #BFE6EA; border-color: #BFE6EA; }
:root[data-tema="oscuro"] .op-guia-btn.sec { background: rgba(234, 246, 247, .1); color: var(--op-texto); border-color: var(--op-linea-2); }
:root[data-tema="oscuro"] .op-guia-btn.sec:hover { background: rgba(234, 246, 247, .18); }

/* ---------- 20. Las pantallas de privacidad (js/opfar-privacidad.js) ----------
   Ya son oscuras (el fondo de la entrada de OPFAR) con la tarjeta blanca, y en Ontime se ven igual en los dos temas:
   no cambian. Solo los enlaces de la tarjeta, que la regla de los enlaces de la sección 1 pondría en turquesa claro
   (sobre blanco no se leería): el del kit, con el mismo peso (:where) para que .op-entrada-error a siga mandando. */
:where(:root[data-tema="oscuro"]) .op-entrada-tarjeta :where(a) { color: #0C7B88; }

/* ---------- 21. Mi cuenta: los avisos por correo y Privacidad (js/opfar-cuenta.js) ---------- */
:root[data-tema="oscuro"] .op-cuenta-avisos { color: var(--op-texto); }
:root[data-tema="oscuro"] .op-cuenta-avisos small { color: var(--op-texto-2); }

/* ---------- 22. «Hay una versión nueva» (js/opfar-version.js) ----------
   Como el de Ontime en oscuro (D-106): blanco, con el texto en verde oscuro. Su botón, el principal del kit en claro
   (el de oscuro es blanco y no se vería sobre la barra blanca). */
:root[data-tema="oscuro"] .op-version-nueva { background: #FFFFFF; color: #0C2A31; box-shadow: var(--op-sombra); }
:root[data-tema="oscuro"] .op-version-nueva .op-btn { background: #087D89; border-color: #0FA3B4; color: #FFFFFF; }
:root[data-tema="oscuro"] .op-version-nueva .op-btn:hover { background: #096671; }

}   /* fin de @media screen */