/* Versión guiada (js/guia.js) — utilidades/guia.py.
   Como en el escritorio, el globo usa siempre la paleta clara (PALETAS["claro"]). */
.guia-raiz { position: fixed; inset: 0; z-index: 1000; pointer-events: none; font-family: var(--fuente); color-scheme: light; }
.guia-raiz > * { pointer-events: auto; }

/* Capas oscuras (OSCURIDAD = 0.55, COLOR_CAPA = #0F0F14) alrededor de lo que se ilumina */
.guia-oscuro { position: fixed; display: none; background: rgba(15, 15, 20, 0.55); }
.guia-oscuro-total { display: block; inset: 0; }
/* Recuadro azul (estilo.ACENTO) alrededor de lo que se explica */
.guia-marco { position: fixed; display: none; border: 3px solid #0063D1; pointer-events: none !important; box-sizing: border-box; }

/* Globo */
.guia-globo { position: fixed; left: 0; top: 0; visibility: hidden; background: #FFFFFF; color: #1D1D1F;
  border: 1px solid #D1D1D6; box-shadow: 0 10px 34px rgba(0, 0, 0, .28); overflow: auto; outline: none;
  font-size: 13.3px; line-height: 1.38; text-align: left; overscroll-behavior: contain; }
.guia-cuerpo { padding: 18px 22px; width: calc(var(--guia-ancho, 400px) + 44px); max-width: 100%; box-sizing: border-box; }
.guia-paso, .guia-peq, .guia-completado { font-size: 10.7px; font-weight: 700; color: #62626A; letter-spacing: .02em; }
.guia-titulo { font-size: 17.3px; font-weight: 700; margin: 2px 0 8px; line-height: 1.25; }
.guia-texto { margin: 0; text-align: justify; hyphens: manual; }
.guia-suave { color: #62626A; }
.guia-pie-texto { margin-top: 10px; }
.guia-globo.bienvenida .guia-titulo { font-size: 21.3px; }
.guia-globo.bienvenida .guia-texto, .guia-globo.bienvenida .guia-lista { font-size: 14.7px; }
.guia-lista { list-style: none; margin: 0; padding: 0; }
.guia-lista li { position: relative; padding-left: 30px; margin-top: 4px; text-align: justify; }
.guia-lista li::before { content: "•"; color: #0063D1; position: absolute; left: 10px; }
.guia-accion { background: #E6F0FB; color: #0063D1; font-size: 10.7px; font-weight: 700; padding: 6px 10px; margin-top: 10px; }
.guia-separador { height: 1px; background: #E4E4E8; margin: 14px 0 10px; }

.guia-botones, .guia-info { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.guia-info { margin-bottom: 8px; }
.guia-hueco { flex: 1 1 auto; }
.guia-boton { font: inherit; font-size: 13px; min-height: 34px; padding: 5px 18px; border-radius: 6px; border: 1px solid #B4B4BA;
  background: #FFFFFF; color: #1D1D1F; cursor: pointer; min-width: 96px; white-space: nowrap; }
.guia-boton:hover:not(:disabled) { background: #F4F4F6; }
.guia-boton.primario { background: #0063D1; border-color: #0063D1; color: #FFFFFF; font-weight: 700; }
.guia-boton.primario:hover:not(:disabled) { background: #004A9F; }
.guia-boton:disabled { opacity: .55; cursor: default; }
.guia-boton:focus-visible, .guia-enlace:focus-visible, .guia-cap:focus-visible, .guia-seccion:focus-visible, .guia-conmutador:focus-visible { outline: 2px solid #0063D1; outline-offset: 2px; }
.guia-enlace { font: inherit; border: 0; background: none; padding: 2px 0; cursor: pointer; }
.guia-enlace-indice { color: #0063D1; font-size: 10.7px; font-weight: 700; margin-right: 12px; }
.guia-enlace-salir { color: #62626A; }
.guia-enlace:hover { text-decoration: underline; }
.guia-cuenta { font-size: 10.7px; font-weight: 700; color: #62626A; margin: 0 16px; }
.guia-puntos { display: inline-flex; gap: 4px; margin: 0 12px; }
.guia-puntos i { width: 6px; height: 6px; border-radius: 50%; background: #CDCDD4; }
.guia-puntos i.activo { background: #0063D1; }
.guia-info .derecha { margin: 0 0 0 auto; }
.guia-teclas { font-size: 10.7px; color: #8E8E93; text-align: right; margin-top: 6px; }

/* Animación de la bienvenida: ← → o «Siguiente» */
.guia-navegar { background: #F6F6F8; padding: 10px 14px; margin-top: 14px; }
.guia-navegar-fila { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.guia-tecla { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
  border: 1px solid #B4B4BA; background: #FFFFFF; font-weight: 700; font-size: 16px; color: #1D1D1F; box-sizing: border-box; }
.guia-tecla.activa { background: #E6F0FB; border: 2px solid #0063D1; color: #0063D1; }
.guia-tecla-boton { min-width: 110px; font-size: 12px; margin-left: 6px; }
.guia-tecla-boton.activa { background: #0063D1; border: 1px solid #0063D1; color: #FFFFFF; }
.guia-o { color: #62626A; margin: 0 4px; }
.guia-puntero { position: absolute; left: 80px; top: 23px; display: none; }
.guia-tecla-boton.activa .guia-puntero { display: block; }

/* Flechas que señalan el menú (parpadean: 600 ms encendidas, 400 ms tenues) */
.guia-flecha { position: fixed; pointer-events: none !important; line-height: 0; animation: guia-parpadeo 1s steps(1, end) infinite; }
@keyframes guia-parpadeo { 0% { opacity: 1; } 60% { opacity: .3; } }

/* Réplica del menú desplegado */
.guia-desplegable { position: fixed; background: #FFFFFF; border: 1px solid #B4B4BA; padding: 4px; color: #1D1D1F;
  pointer-events: none !important; min-width: 200px; box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.guia-desplegable .fila { display: flex; align-items: center; white-space: nowrap; padding: 3px 26px 3px 0; }
.guia-desplegable .fila .marca { width: 22px; text-align: center; flex: 0 0 auto; }
.guia-desplegable .fila.desactivada { color: #62626A; }
.guia-desplegable .fila.activa { background: #0063D1; color: #FFFFFF; }
.guia-desplegable .sep { height: 1px; background: #E4E4E8; margin: 4px 0; }

/* Lista de un desplegable que la demostración «abre» */
.guia-lista-select { position: fixed; background: #FFFFFF; border: 1px solid #B4B4BA; color: #1D1D1F; padding: 2px 0;
  pointer-events: none !important; box-shadow: 0 6px 18px rgba(0,0,0,.18); max-height: 50vh; overflow: hidden; font-size: 13px; }
.guia-lista-select .op { padding: 3px 10px; white-space: nowrap; }
.guia-lista-select .op.activa { background: #0063D1; color: #FFFFFF; }

/* Tarjeta de fin de capítulo */
.guia-tarjeta .guia-cuerpo { padding: 24px 28px; width: auto; max-width: 520px; min-width: min(420px, 100%); }
.guia-cab-tarjeta { display: flex; align-items: center; gap: 14px; }
.guia-circulo-visto { line-height: 0; flex: 0 0 auto; }
.guia-completado { color: #2E9E5B; }
.guia-titulo-tarjeta { font-size: 20px; font-weight: 700; }
.guia-aprendido { margin-top: 14px; max-width: 420px; }
.guia-siguiente-cap { background: #F6F6F8; padding: 10px 16px; margin-top: 14px; }
.guia-fila-cap { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.guia-nombre-cap { font-weight: 700; font-size: 14.7px; }
.guia-fin { margin-top: 14px; }
.guia-pie-tarjeta { justify-content: flex-end; margin-top: 20px; }

/* Índice */
.guia-indice .guia-cuerpo { padding: 24px 30px; width: 700px; max-width: 100%; }
.guia-titulo-indice { font-size: 22.7px; font-weight: 700; }
.guia-elige { font-size: 12px; color: #62626A; margin: 2px 0 12px; }
.guia-cap { display: flex; align-items: center; gap: 14px; padding: 8px 10px; margin: 1px 0; cursor: pointer; }
.guia-cap:hover { background: #F6F6F8; }
.guia-cap.en-curso { background: #ECF3FC; }
.guia-circulo { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #CDCDD4; color: #62626A; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 14.7px; box-sizing: border-box; flex: 0 0 auto; }
.guia-circulo.en-curso { background: #0063D1; border-color: #0063D1; color: #FFFFFF; }
.guia-cap-textos { flex: 1 1 auto; min-width: 0; }
.guia-cap-titulo { font-weight: 700; font-size: 14.7px; }
.guia-cap-sub { font-size: 12px; color: #62626A; }
.guia-cap-der { text-align: right; font-size: 12px; color: #62626A; flex: 0 0 auto; }
.guia-cap-visto { color: #2E9E5B; font-size: 10.7px; font-weight: 700; }
.guia-cap-seguir { color: #0063D1; font-size: 10.7px; font-weight: 700; }
.guia-conmutador { display: block; font: inherit; font-size: 12px; border: 0; background: none; color: #0063D1; cursor: pointer;
  padding: 0 0 4px 54px; text-align: left; }
.guia-secciones { padding-bottom: 4px; }
.guia-seccion { display: flex; align-items: center; width: 100%; font: inherit; font-size: 12px; border: 0; background: none;
  color: #1D1D1F; cursor: pointer; padding: 3px 0 3px 64px; text-align: left; }
.guia-seccion:hover .guia-seccion-nombre { color: #0063D1; }
.guia-marca { width: 22px; color: #62626A; text-align: center; flex: 0 0 auto; }
.guia-marca.visto { color: #2E9E5B; }
.guia-linea { height: 1px; background: #EEEEF2; }
.guia-pie-indice { margin-top: 18px; }
.guia-casilla { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.guia-casilla input { width: 15px; height: 15px; accent-color: #0063D1; margin: 0; }

/* Avisos que aparecen con la guía abierta: por encima de lo oscuro */
.modal-fondo.guia-encima { z-index: 1100; }

/* Ventanas auxiliares abiertas por la guía: arriba a la izquierda (el globo, a su derecha) */
.modal-fondo.guia-ventana { justify-content: flex-start; align-items: flex-start; padding: 10px 20px; background: transparent; }
@media (min-width: 900px) { .modal-fondo.guia-ventana > .modal { max-width: min(980px, calc(100vw - 420px)); } }

/* Pantallas bajas o zoom alto: el globo se desplaza, pero los botones siempre se ven */
.guia-globo .guia-botones { position: sticky; bottom: 0; background: #FFFFFF; padding: 4px 0; }
@media (max-height: 560px) {
  .guia-cuerpo { padding-top: 12px; padding-bottom: 12px; }
  .guia-globo.bienvenida .guia-titulo { font-size: 18px; }
  .guia-globo.bienvenida .guia-texto, .guia-globo.bienvenida .guia-lista { font-size: 13px; }
  .guia-navegar { margin-top: 8px; padding: 6px 10px; }
  .guia-separador { margin: 8px 0 6px; }
}

@media (max-width: 560px) {
  .guia-botones, .guia-info { flex-wrap: wrap; }
  .guia-cuerpo, .guia-tarjeta .guia-cuerpo, .guia-indice .guia-cuerpo { padding: 14px 14px; }
  .guia-boton { min-width: 0; padding: 5px 12px; }
  .guia-conmutador { padding-left: 12px; }
  .guia-seccion { padding-left: 22px; }
}