/* Campo Vivo · consola de rituales: los recorridos guiados (consola-recorrido.js).
   Un velo oscuro con un hueco sobre la parte que se explica, el aro cálido que la marca y una tarjeta con su dibujo al lado. Es la misma forma
   que el recorrido de la app (recorrido.css) y todo sale de los tokens de linea.css: el aro es la luz dorada, nunca el morado (ese es de lo
   que suena, de lo activo y del foco, y el foco de los botones ya lo trae linea.css).
   - consola-recorrido.js escribe la posición (left, top, width, height) directo en el hueco, el aro y la tarjeta.
   - El hueco es la sombra enorme de un cuadro del tamaño de la parte: así sigue sus esquinas redondas y el velo cubre toda la pantalla.
   - Capa: z-index 40, sobre el transporte de celular (35), la hoja de la etapa (30) y la barra (20), y bajo la puerta (60) y el aviso breve
     (50). Las hojas (<dialog>) van en la capa superior del navegador, por encima de todo. Nada es negativo.
   - Movimiento: nada de esto se anima por CSS (ni transiciones ni @keyframes): consola-recorrido.js solo anima con Linea.mov, que esta
     página no carga. Con "reducir movimiento" todo aparece y se va de golpe. */

/* Mientras está abierto la página de abajo no se desplaza. La reserva del borde evita que, al quitarse la barra de desplazamiento de un
   navegador de escritorio, todo se corra a un lado. */
html.con-recorrido { overflow: hidden; scrollbar-gutter: stable; }

.consola-recorrido {
  position: fixed;
  inset: 0;
  z-index: 40;
  overscroll-behavior: contain;
  touch-action: pinch-zoom;   /* ni arrastres ni desplazamientos por debajo; acercar con los dedos, sí */
}

.consola-recorrido__foco,
.consola-recorrido__anillo {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 14px;
  pointer-events: none;
  transition: none;
}
.consola-recorrido__foco { box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.78); }
.consola-recorrido__anillo {
  border: 2px solid var(--oro);
  box-shadow: 0 0 0 1px rgba(var(--oro-canto-rgb), 0.16), 0 0 26px rgba(var(--oro-rgb), 0.3);
}
/* Mientras la página se desplaza para traer la parte, el aro y la tarjeta se esconden (siguen en el árbol de accesibilidad: el texto nuevo
   se anuncia igual) y vuelven cuando la parte se detiene. */
.consola-recorrido[data-desplazando] .consola-recorrido__anillo,
.consola-recorrido[data-desplazando] .consola-recorrido__tarjeta { opacity: 0; }

/* La tarjeta se ancla por el borde que mira a la parte marcada (consola-recorrido.js decide el lado y pone su left, top o bottom). */
.consola-recorrido .consola-recorrido__tarjeta {
  position: absolute;
  left: 16px;
  width: 380px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 14px;
  border-radius: 20px;
  background: var(--oro-ambiente) 50% 0 / 100% 160px no-repeat, var(--grafito);
  box-shadow: 0 0 0 1px var(--linea-tenue), 0 24px 64px rgba(0, 0, 0, 0.6);
  text-align: left;
  transition: none;
}

.consola-recorrido__dibujo { margin-bottom: 12px; }
.consola-recorrido__tarjeta[data-compacta] .consola-recorrido__dibujo { display: none; }

.consola-recorrido__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.consola-recorrido__titulo { min-width: 0; color: var(--blanco); font-size: var(--t-1); line-height: var(--l-1); font-weight: 500; text-wrap: balance; }
.consola-recorrido__paso { flex: none; color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); }
.consola-recorrido__frase { margin-top: 6px; color: var(--niebla); font-size: var(--t-3); line-height: var(--l-3); text-wrap: pretty; }

.consola-recorrido__acciones { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.consola-recorrido__navegar { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.consola-recorrido__saltar {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--niebla);
  font-size: var(--t-4);
  text-decoration: underline;
  text-decoration-color: rgba(238, 230, 216, 0.3);
  text-underline-offset: 4px;
}
.consola-recorrido__saltar:hover { color: var(--blanco); text-decoration-color: var(--blanco); }
.consola-recorrido__siguiente { min-width: 116px; }   /* "Siguiente", "Empezar" y "Listo" miden lo mismo: el botón no se mueve de un paso a otro */

/* ── Los dibujos ─────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Arena para lo que ya existe en la consola y oro (los tokens de linea.css) para lo que se explica; ni morado ni blanco puro. */
.dib { display: block; width: 100%; height: auto; }
.dib-l, .dib-lf, .dib-lt, .dib-o { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dib-l { stroke: var(--niebla); }
.dib-lf { stroke: var(--blanco); }
.dib-lt { stroke: rgba(238, 230, 216, 0.3); }
.dib-o { stroke: var(--oro); }
.dib-r { fill: rgba(238, 230, 216, 0.08); }
.dib-ro { fill: rgba(var(--oro-rgb), 0.1); }
.dib-p { stroke-dasharray: 4 3; }
.dib-w2 { stroke-width: 2.2; }
.dib-t, .dib-tb, .dib-to { font-family: inherit; font-size: 13px; stroke: none; }
.dib-t { fill: var(--niebla); }
.dib-tb { fill: var(--blanco); }
.dib-to { fill: var(--oro); }
.dib-g { font-size: 16px; }

/* ── Celular: la tarjeta es una hoja abajo (o arriba, si la parte está abajo) ───────────────────────────────────────── */
@media (max-width: 767px) {
  .consola-recorrido .consola-recorrido__tarjeta { padding: 16px 18px 12px; border-radius: 18px; }
  .consola-recorrido__titulo { font-size: var(--t-2); line-height: var(--l-2); }
}

/* ── La ayuda y el enlace de la mesa vacía ───────────────────────────────────────────────────────────────────────── */
.ayuda__lista { display: grid; gap: 10px; }
.ayuda-item { display: grid; gap: 4px; width: 100%; min-height: 44px; padding: 14px 16px; border: 1px solid var(--linea-tenue); border-radius: 14px; background: rgba(0, 0, 0, 0.3); text-align: left; transition: none; }
.ayuda-item:hover { border-color: var(--gris); background: rgba(238, 230, 216, 0.04); }
.ayuda-item:focus-visible { outline-offset: 2px; }
.ayuda-item__fila { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ayuda-item__titulo { color: var(--blanco); font-size: var(--t-2); line-height: var(--l-2); font-weight: 500; }
.ayuda-item__datos { display: inline-flex; align-items: center; gap: 8px; color: var(--gris); font-size: var(--t-5); line-height: var(--l-5); }
.ayuda-item__visto { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid rgba(238, 230, 216, 0.4); border-radius: var(--radio-pildora); color: var(--blanco); font-size: var(--t-5); line-height: 1; }
.ayuda-item__para { color: var(--niebla); font-size: var(--t-4); line-height: var(--l-4); }

.vacio__guia { margin-top: -4px; }
.enlace-guia {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: -4px;   /* el texto queda alineado con los párrafos de la mesa vacía */
  padding: 0 4px;
  color: var(--blanco);
  font-size: var(--t-3);
  text-decoration: underline;
  text-decoration-color: rgba(238, 230, 216, 0.3);
  text-underline-offset: 4px;
}
.enlace-guia:hover { text-decoration-color: var(--blanco); }

/* Modo de contraste forzado: las sombras desaparecen, así que el aro y la tarjeta se dibujan con bordes del sistema. */
@media (forced-colors: active) {
  .consola-recorrido__anillo { border-color: Highlight; }
  .consola-recorrido .consola-recorrido__tarjeta { border: 1px solid CanvasText; }
  .dib-l, .dib-lf, .dib-lt, .dib-o { stroke: CanvasText; }
  .dib-t, .dib-tb, .dib-to { fill: CanvasText; }
}