/* Regla de lectura — marcador de lectura que sigue el puntero (componente propio).
   Dos variantes: "barra" (resalta el renglon) y "foco" (atenua el resto).
   Capas FIJAS al viewport y con pointer-events:none, para que NO rompan la
   seleccion de texto (de la que depende el "escuchar en voz alta") ni el clic.
   Los controles (botones data-guide) usan los estilos .reader-btn de la pagina;
   este fichero solo define las capas del marcador. */

.regla-layer{
  position:fixed; left:0; top:0;
  pointer-events:none;      /* deja pasar el raton al texto (seleccion + TTS) */
  z-index:9998;
  display:none;
  will-change:top,height;
}

/* Borde fino que enmarca la banda en el modo "foco" */
#regla-edge{
  z-index:9999;
  border-top:1.5px solid rgba(236,129,24,.7);
  border-bottom:1.5px solid rgba(236,129,24,.7);
}

/* Seguimiento suave (se desactiva con prefers-reduced-motion: el JS no anade
   la clase .regla-anim, asi que la banda sigue al raton sin transicion) */
.regla-anim .regla-layer{ transition:top .05s linear, height .05s linear; }

/* --- Ajustes del marcador: sub-panel desplegable dentro de "Ajustes de lectura" --- */
.reader-btn--gear{ min-width:2.2rem; line-height:1; }
.regla-config{
  flex-basis:100%; width:100%;
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem;
  padding-top:.75rem; margin-top:.1rem;
  border-top:1px solid rgba(255,255,255,.25);
}
.regla-config[hidden]{ display:none; }
.regla-sw{
  width:1.7rem; height:1.7rem; padding:0; cursor:pointer;
  border-radius:6px; border:2px solid rgba(255,255,255,.5);
  transition:transform .12s;
}
.regla-sw:hover{ transform:translateY(-1px); }
.regla-sw[aria-pressed="true"]{
  border-color:#fff;
  box-shadow:0 0 0 2px var(--color-accent,#7d3443), 0 0 0 4px #fff;
}
/* Barras deslizantes (Alto y Foco): control continuo, sobre fondo granate */
.reader-ctrl--slider{ gap:.7rem; }
.regla-range{
  width:132px; max-width:42vw; height:20px; cursor:pointer; vertical-align:middle;
  accent-color:#fff;                 /* pista y pulsador blancos sobre el granate */
}
.regla-range:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
/* Al abrir los ajustes del marcador, dar aire para que el panel no se recorte
   (la barra colapsa con max-height; el sub-panel anade una fila mas). */
.reader-bar.is-open.guide-cfg-open{ max-height:520px; }
@media (max-width:640px){ .reader-bar.is-open.guide-cfg-open{ max-height:820px; } }

/* Nunca en impresion / PDF */
@media print{ .regla-layer{ display:none !important; } }