/* [CAPACITADOR] La hoja de la guía que enseña la pantalla desde la pantalla.
 *
 * Tokens del host, sin reservas — la regla de `paleta_declarada`. Con reserva, borrar un token no
 * rompe nada visible y esto se pinta con el color de otro sin que ninguna prueba lo note.
 *
 * Marca buscable: capacitador_wow
 */

/* ── EL FOCO VISUAL ─────────────────────────────────────────────────────────────────────
   Cuatro rectángulos ALREDEDOR del control, no un velo con un agujero. Un velo de pantalla
   completa con un recorte intercepta el clic sobre el control iluminado —el navegador entrega el
   evento al velo, no a lo que hay debajo—. Así el hueco queda libre: el control se ve, se aprieta
   y se usa. Que es el punto: la guía enseña haciendo, no mirando. */
.cap-foco { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.cap-sombra {
  position: fixed;
  background: rgba(0, 0, 0, .48);
  /* Los rectángulos SI atrapan el clic: apretar fuera de lo iluminado no debería hacer nada,
     porque ahí es donde está lo que la guía justamente pidió no mirar todavía. */
  pointer-events: auto;
}
/* El anillo es una marca, no una tapa: deja pasar el clic al control que rodea. */
.cap-anillo {
  position: fixed;
  border: 2px solid var(--granate);
  border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(140, 26, 45, .22);
  pointer-events: none;
}

/* ── EL GLOBO ───────────────────────────────────────────────────────────────────────────
   Va debajo del control si hay lugar, y arriba si no. Nunca encima: taparlo sería señalar algo
   y esconderlo en el mismo gesto. */
.cap-globo {
  position: fixed;
  z-index: 82;
  max-width: min(380px, calc(100vw - 24px));
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--linea);
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
  font-size: 13.5px;
  line-height: 1.55;
}
.cap-cuenta {
  margin: 0 0 6px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 600;
}
.cap-titulo { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.cap-texto { margin: 0 0 10px; }

/* ── EL PASO QUE NO SE PUEDE MOSTRAR ────────────────────────────────────────────────────
   Se ve DISTINTO, y no se salta. Una guía que dice «listo» sobre algo que la persona nunca vio
   es la manera más rápida de que no vuelva a confiar en ella. */
.cap-globo.cap-sin-ancla {
  border-left: 3px solid var(--error);
  /* Sin ancla no hay a qué pegarse: se centra arriba, donde se lee. */
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%);
}
.cap-sin-ancla .cap-titulo { color: var(--error); }
.cap-buscaba {
  margin: 0 0 10px;
  font-size: 11.5px;
  color: var(--gris);
  font-style: italic;
}

/* ── LOS CONTROLES ──────────────────────────────────────────────────────────────────────
   Todos son botones de verdad: entran en el orden de tabulación y responden a Enter. */
.cap-controles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--linea);
}
.cap-controles button,
.cap-hazlo,
.cap-reintentar {
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  width: auto;
  margin: 0;
  border: 1px solid var(--linea);
  background: transparent;
  color: var(--tinta);
}
.cap-siguiente {
  border-color: var(--granate);
  background: var(--granate);
  color: var(--papel);
}
/*  EL BOTON APAGADO SE TIENE QUE PODER LEER, y acá más que en ningún lado.
 *
 *  Medido: `opacity:.45` dejaba «Terminar» en 2,85:1 sobre el papel. La norma exime a los
 *  controles inactivos de exigir contraste, y en general está bien: un botón apagado no dice
 *  nada. Acá SÍ dice: en el paso que no se puede mostrar, «Terminar» apagado es toda la
 *  explicación de que la guía no te va a dejar seguir como si lo hubieras visto.
 *
 *  Sin opacidad, entonces: colores declarados. El texto en `--gris` sobre `--papel` da 4,89:1,
 *  y se distingue del activo por el fondo plano y por no responder al cursor.  */
.cap-siguiente:disabled {
  background: transparent;
  border-color: var(--linea);
  color: var(--gris);
  cursor: default;
}
.cap-atras:disabled { color: var(--gris); cursor: default; }
.cap-salir { margin-left: auto; color: var(--gris); }

/* «Hazlo por mí» se ve como lo que es: una oferta, no el camino principal. Quien aprende
   apretando aprende; quien mira cómo se lo hacen, no. */
.cap-hazlo {
  display: block;
  margin-bottom: 4px;
  border-style: dashed;
  border-color: var(--granate);
  color: var(--granate);
}

.cap-sin-voz { font-size: 11px; color: var(--gris); }

/* La región que anuncia el paso a quien no ve la pantalla. No se muestra, pero NO se esconde
   con `display:none`: eso la sacaría también del árbol de accesibilidad y no anunciaría nada. */
.cap-vivo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}