/* ════════════════════════════════════════════════════════════════════════════
   tour.css — el recorrido guiado  (14-09-2026)

   El fondo oscurece toda la pantalla MENOS el control que se está explicando. El
   recorte no se hace con una máscara ni con cuatro rectángulos: se hace con una
   SOMBRA gigante sobre un recuadro transparente, que es lo único que un navegador
   resuelve sin repintar medio documento en cada paso.
   ════════════════════════════════════════════════════════════════════════════ */

.mxtour-fondo {
  position: fixed; inset: 0;
  z-index: 10060;              /* encima de los modales (10050): explica lo que hay debajo */
  background: transparent;     /* el oscurecido lo pone la sombra del hueco */
}

/* ⚠ El hueco NO tiene fondo: lo que oscurece la pantalla es su `box-shadow` de 9999px,
     que pinta todo lo de afuera y deja lo de adentro intacto. Con un fondo propio
     —aunque fuera transparente al 1%— el control quedaría detrás de un velo y el
     recorte perdería el sentido.
   ⚠ Y `pointer-events: none` en el hueco es lo que permite que el clic en el fondo
     cierre el tour: sin eso, el recuadro se come los clics de toda su área. */
.mxtour-hueco {
  position: fixed;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62);
  outline: 2px solid var(--blue-light-txt, var(--blue-light));
  outline-offset: 0;
  pointer-events: none;
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}

.mxtour-globo {
  position: fixed; z-index: 10061;
  width: min(360px, calc(100vw - 24px));
  background: var(--navy-2);
  border: 1px solid var(--blue);
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
  padding: 14px 16px 12px;
  color: var(--text);
  font-size: 13px; line-height: 1.55;
}

.mxtour-paso {
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-3); font-weight: 600; margin-bottom: 4px;
}
.mxtour-tit { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.mxtour-txt { color: var(--text-2); }
.mxtour-txt b { color: var(--text); }

.mxtour-pie { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.mxtour-espacio { flex: 1; }

.mxtour-btn {
  padding: 5px 12px; font-size: 12px; font-family: var(--font);
  color: var(--text); background: var(--navy-3);
  border: 1px solid var(--border-2); border-radius: 6px; cursor: pointer;
}
/* ⚠ `:hover` NO exime al deshabilitado por su cuenta: sin el `:not(:disabled)` el botón
     «Anterior» del primer paso se aclara al pasar el mouse y promete un clic que no hace
     nada. Es el defecto que el usuario reportó en el botón de carga el 11-09-2026. */
.mxtour-btn:hover:not(:disabled) { background: var(--navy-4); border-color: var(--blue); }
.mxtour-btn:disabled { opacity: .45; cursor: not-allowed; }
.mxtour-pri {
  /* El acento va en la LETRA y en el BORDE, con fondo neutro: un tinte del propio
     acento debajo de su propio texto es el patrón de bajo contraste que este proyecto
     ya corrigió en cuatro lugares. */
  color: var(--blue-light-txt, var(--blue-light));
  border-color: var(--blue);
}
.mxtour-saltar { color: var(--text-3); background: transparent; border-color: transparent; }
.mxtour-saltar:hover:not(:disabled) { color: var(--text-2); background: var(--navy-3); }

/* ⚠ La transición se anula, NO la propiedad: `transition: none` acá es seguro porque
     nada termina en un estado intermedio —el hueco solo se mueve— pero se declara para
     que el salto entre pasos sea instantáneo en vez de un desplazamiento que marea. */
@media (prefers-reduced-motion: reduce) {
  .mxtour-hueco { transition: none; }
}

/* ── El ejemplo trabajado dentro del globo ────────────────────────────────
   Un bloque con una factura REAL de las que están cargadas: emisión + días = fecha de
   cobro, y en qué semana cae. Va separado del texto porque es de otra naturaleza — el
   texto explica la regla y esto la muestra ocurriendo sobre un dato que la persona
   puede ir a verificar en su propia tabla. */
.mxtour-ej {
  margin-top: 10px; padding: 9px 11px;
  background: var(--navy-3); border: 1px solid var(--border);
  border-left: 3px solid var(--blue); border-radius: 7px;
  font-size: 12px; line-height: 1.55; color: var(--text-2);
}
.mxtour-ej > div + div { margin-top: 4px; }
.mxtour-ej b { color: var(--text); }
.mxtour-ej-tit {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-3); font-weight: 600; margin-bottom: 4px;
}
/* El «¿y si…?» se separa con una línea: es una hipótesis, no lo que está pasando, y
   mezclarlo con el dato real hace que se lea como si ya hubiera ocurrido. */
.mxtour-ej-si {
  margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--border-2);
  color: var(--amber);
}
.mxtour-ej-si b { color: var(--amber); }