/* =====================================================================
   /medios/turing: rediseño del 8 nov 2026 (pedido de Daniel).
   1. La ventana del análisis (#az-modal): riel con todos los pasos y, debajo, solo el paso en curso
      (y el que sigue, en tenue). El paso que termina se pone en verde y se va. js/turing-pasos.js.
   2. «Cómo funciona Turing» (#como-funciona): el camino de arriba abajo, en vez de tres columnas
      con huecos: 1 y 2 → Turing analiza (sus tres capas lado a lado) → 4 y 5.
   Va después de analizador.css y turing-azul.css. Solo aplica en las páginas de Turing.
   ===================================================================== */

/* ---------- 1. Ventana del análisis ---------- */
.az-etapas { --az-tp-azul: var(--tu-azul, #1d4ed8); --az-tp-verde: var(--az-muy-buena, #1f7a5a); --az-tp-verde-c: #e6f6ee; text-align: left; }
.az-riel, .az-riel-cuenta, .az-etapas-fin { display: none; }
.az-etapas.con-riel .az-riel { position: relative; display: flex; justify-content: space-between; align-items: center; gap: .25rem; margin: 0 0 .7rem; padding: .35rem 0; }
.az-riel-linea { position: absolute; left: 1.05rem; right: 1.05rem; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--mr-linea, #dbe3ef); overflow: hidden; }
.az-riel-relleno { display: block; height: 100%; width: calc(var(--az-riel-avance, 0) * 100%); border-radius: inherit;
  background: linear-gradient(90deg, var(--az-tp-verde), #22a06b 70%, var(--az-tp-azul)); transition: width .6s cubic-bezier(.3, .7, .2, 1); }
.az-riel-punto { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: #fff; border: 2px solid var(--mr-linea-2, #c8d3e4); color: var(--mr-piedra-2, #8a96ab); font-size: .78rem;
  transition: background .3s, border-color .3s, color .3s, transform .3s; }
.az-riel-punto[hidden] { display: none; }
.az-riel-punto.siguiente { border-color: #9db5ea; color: var(--az-tp-azul); }
.az-riel-punto.activo { background: var(--az-tp-azul); border-color: var(--az-tp-azul); color: #fff; transform: scale(1.18); animation: az-tp-pulso 1.4s ease-out infinite; }
.az-riel-punto.hecho { background: var(--az-tp-verde); border-color: var(--az-tp-verde); color: #fff; animation: az-tp-pop .45s ease-out; }
.az-riel-punto.omitido { background: #f3f5f9; border-style: dashed; color: #b3bccb; }
/* La palomita, también en los íconos de marca (el de X): con la familia de los íconos sólidos de Font Awesome. */
.az-riel-punto.hecho > i, .az-etapas .az-pasos li.hecho > i { --fa: "\f00c"; --fa-family: var(--fa-family-classic, "Font Awesome 7 Free"); --fa-style: 900; font-weight: 900; }
.az-riel-punto.hecho > i::before { content: "\f00c"; }
@keyframes az-tp-pulso { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); } 100% { box-shadow: 0 0 0 .55rem rgba(37, 99, 235, 0); } }
@keyframes az-tp-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

.az-etapas.con-riel .az-riel-cuenta { display: block; margin: 0 0 .55rem; font-size: .76rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--az-tp-azul); }
.az-etapas.con-riel.terminado .az-riel-cuenta { color: var(--az-tp-verde); }

/* Solo el paso en curso, el que sigue y el que se está yendo. */
.az-etapas.con-riel .az-pasos { display: flex; flex-direction: column; gap: 0; min-height: 0; }
.az-etapas.con-riel .az-pasos li { display: none; margin: 0 0 .6rem; }
.az-etapas.con-riel .az-pasos li.activo,
.az-etapas.con-riel .az-pasos li.siguiente,
.az-etapas.con-riel .az-pasos li.saliendo { display: flex; }
.az-etapas.con-riel .az-pasos li.activo {
  padding: 1rem 1.1rem; border: 2px solid var(--az-tp-azul); background: linear-gradient(135deg, #eef4ff, #f4f9ff 60%, #eefcff);
  box-shadow: 0 14px 34px -18px rgba(29, 78, 216, .55); color: var(--mr-tinta, #0f1a30); animation: az-tp-entra .45s cubic-bezier(.2, .8, .2, 1) both;
}
.az-etapas.con-riel .az-pasos li.activo > i { width: 2.4rem; height: 2.4rem; border-radius: 12px; font-size: 1rem; background: var(--az-tp-azul); color: #fff; }
.az-etapas.con-riel .az-pasos li.activo strong { font-size: 1.06rem; }
.az-etapas.con-riel .az-pasos li.activo small { display: block; font-size: .86rem; color: var(--mr-piedra, #56617a); }
.az-etapas.con-riel .az-pasos li.siguiente { padding: .55rem .85rem; border-style: dashed; background: transparent; opacity: .6; align-items: center; animation: az-tp-entra .45s .1s cubic-bezier(.2, .8, .2, 1) both; }
.az-etapas.con-riel .az-pasos li.siguiente small { display: none; }
.az-etapas.con-riel .az-pasos li.siguiente strong { font-size: .9rem; font-weight: 600; }
.az-etapas.con-riel .az-pasos li.siguiente > i { margin-top: 0; }
/* El que acaba de terminar: verde un momento y se va hacia arriba. */
.az-etapas.con-riel .az-pasos li.saliendo {
  max-height: 14rem; overflow: hidden; padding: 1rem 1.1rem; border: 2px solid var(--az-tp-verde); background: var(--az-tp-verde-c); color: var(--mr-tinta, #0f1a30);
  animation: az-tp-sale 1.25s ease-in forwards;
}
.az-etapas.con-riel .az-pasos li.saliendo.omitido { border-color: var(--mr-linea-2, #c8d3e4); background: #f6f8fb; opacity: 1; }
.az-etapas.con-riel .az-pasos li.saliendo > i { width: 2.4rem; height: 2.4rem; border-radius: 12px; font-size: 1rem; animation: az-tp-pop .45s ease-out; }
.az-etapas.con-riel .az-pasos li.saliendo strong { font-size: 1.06rem; }
.az-etapas.con-riel .az-pasos li.saliendo small { display: block; font-size: .86rem; }
@keyframes az-tp-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes az-tp-sale {
  0%, 55% { opacity: 1; transform: none; max-height: 14rem; }
  100% { opacity: 0; transform: translateY(-14px) scale(.97); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-width: 0; }
}
.az-etapas.con-riel.terminado .az-etapas-fin {
  display: flex; align-items: center; gap: .6rem; margin: 0; padding: .95rem 1.1rem; border-radius: var(--mr-radio, .75rem);
  background: var(--az-tp-verde-c); border: 2px solid var(--az-tp-verde); color: #145a41; font-weight: 700; animation: az-tp-entra .45s .3s cubic-bezier(.2, .8, .2, 1) both;
}
.az-etapas.con-riel.terminado .az-etapas-fin i { font-size: 1.35rem; color: var(--az-tp-verde); }

/* Dónde va en la ventana. */
.az-modal.con-pregunta .az-etapas { display: none; }
@media (min-width: 992px) {
  .az-modal { width: min(58rem, calc(100vw - 4rem)); }
  .az-modal-cuerpo > .az-etapas { grid-column: 2; grid-row: 1 / span 7; align-self: center; }
  .az-modal.con-error .az-modal-cuerpo > .az-etapas { grid-column: 1; grid-row: auto; min-height: 0; margin-top: 1rem; }
}
/* Para que la ventana no brinque cuando un paso se va: guarda el alto de dos tarjetas mientras trabaja. */
.az-etapas.con-riel.empezado:not(.terminado) { min-height: 20rem; }
@media (max-width: 991.98px) {
  .az-etapas { margin-top: .25rem; }
  .az-etapas.con-riel.empezado:not(.terminado) { min-height: 19rem; }
}
@media (max-width: 575.98px) {
  .az-modal .az-ilustracion img, .az-modal .az-ilustracion picture { max-height: 80px; width: auto; }
  .az-modal .tu-estado { margin-top: .35rem; }
  .az-etapas.con-riel.empezado:not(.terminado) { min-height: 17.5rem; }
  .az-riel-punto { width: 1.8rem; height: 1.8rem; font-size: .68rem; }
  .az-riel-linea { left: .9rem; right: .9rem; }
  .az-etapas.con-riel .az-pasos li.activo, .az-etapas.con-riel .az-pasos li.saliendo { padding: .75rem .85rem; }
  .az-etapas.con-riel .az-pasos li.activo > i, .az-etapas.con-riel .az-pasos li.saliendo > i { width: 2rem; height: 2rem; font-size: .85rem; }
  .az-etapas.con-riel .az-pasos li.activo strong, .az-etapas.con-riel .az-pasos li.saliendo strong { font-size: .98rem; }
  .az-etapas.con-riel .az-pasos li.activo small { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .az-riel-punto, .az-riel-relleno { transition: none; }
  .az-riel-punto.activo, .az-riel-punto.hecho, .az-etapas.con-riel .az-pasos li, .az-etapas.con-riel .az-etapas-fin { animation: none !important; }
}
.az-modal.con-error .az-etapas.con-riel { min-height: 0; }

/* ---------- 2. «Cómo funciona Turing»: el camino de arriba abajo ---------- */
.az-motor-seccion .az-flujo { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; max-width: 64rem; margin-inline: auto; }
.az-motor-seccion .az-flujo-entrada,
.az-motor-seccion .az-flujo-final { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; align-items: stretch; }
.az-motor-seccion .az-flujo-paso { height: 100%; align-self: stretch; transition: transform .25s, box-shadow .25s; }
.az-motor-seccion .az-flujo-paso:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(11, 28, 66, .45); }
/* Flecha de un paso al siguiente (de lado) */
.az-motor-seccion .az-flujo-paso + .az-flujo-paso::before {
  content: ""; position: absolute; left: -1.85rem; top: 50%; width: 1.2rem; height: 1.2rem; margin-top: -.6rem;
  border-top: 3px solid #b5c6ed; border-right: 3px solid #b5c6ed; transform: rotate(45deg);
}
/* Flecha hacia abajo entre los tres bloques */
.az-motor-seccion .az-flujo-entrada::after, .az-motor-seccion .az-flujo-motor::after {
  top: auto; right: auto; left: 50%; bottom: -1.95rem; width: 1.15rem; height: 1.15rem; transform: translateX(-50%) rotate(135deg);
  border-top: 3px solid #b5c6ed; border-right: 3px solid #b5c6ed;
}
.az-motor-seccion .az-flujo-motor { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.25rem; }
.az-motor-seccion .az-flujo.sin-ia .az-flujo-motor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.az-motor-seccion .az-flujo-motor-cab { grid-column: 1 / -1; max-width: none; font-size: 1.08rem; }
.az-motor-seccion .az-flujo-capa { flex-direction: column; gap: .7rem; height: 100%; }
.az-motor-seccion .az-flujo-capa > div { display: flex; flex-direction: column; flex: 1; }
.az-motor-seccion .az-flujo-capa .az-flujo-pastilla { align-self: flex-start; margin-top: auto; }
.az-motor-seccion .az-flujo-capa > div > p:last-of-type { margin-bottom: .6rem; }
.az-motor-seccion .az-flujo-salida { align-self: stretch; }
@media (max-width: 991.98px) {
  .az-motor-seccion .az-flujo-motor { grid-template-columns: minmax(0, 1fr); }
  .az-motor-seccion .az-flujo.sin-ia .az-flujo-motor { grid-template-columns: minmax(0, 1fr); }
  .az-motor-seccion .az-flujo-capa { flex-direction: row; }
}
@media (max-width: 575.98px) {
  .az-motor-seccion .az-flujo { gap: 2.2rem; }
  .az-motor-seccion .az-flujo-entrada, .az-motor-seccion .az-flujo-final { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .az-motor-seccion .az-flujo-paso + .az-flujo-paso::before { left: 50%; top: -1.75rem; margin-top: 0; width: 1rem; height: 1rem; transform: translateX(-50%) rotate(135deg); }
  .az-motor-seccion .az-flujo-entrada::after, .az-motor-seccion .az-flujo-motor::after { bottom: -1.75rem; width: 1rem; height: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .az-motor-seccion .az-flujo-paso { transition: none; } .az-motor-seccion .az-flujo-paso:hover { transform: none; } }

/* 8 nov 2026 (paquete 83, Daniel: «no me gusta que se modifique el tamaño del modal cada que sale una actualización,
   marea un poco»). turing-pasos.js mide el alto que necesita la lista (--az-tp-alto) y la ventana ya no cambia:
   el paso que termina pasa por encima del nuevo mientras se va, al terminar el aviso «Listo» ocupa el mismo lugar,
   y los textos que cambian (qué está haciendo, la IA) guardan sus dos renglones. */
.az-etapas.con-riel.alto-fijo, .az-etapas.con-riel.alto-fijo.empezado:not(.terminado) { min-height: 0; }
.az-etapas.con-riel.alto-fijo .az-pasos { position: relative; height: var(--az-tp-alto); }
.az-etapas.con-riel.alto-fijo .az-pasos li.saliendo { position: absolute; top: 0; left: 0; right: 0; z-index: 2; margin: 0; }
.az-etapas.con-riel.alto-fijo.terminado .az-pasos { display: none; }
.az-etapas.con-riel.alto-fijo.terminado .az-etapas-fin { min-height: var(--az-tp-alto); justify-content: center; }
.az-modal .az-modal-paso { min-height: 3.1em; line-height: 1.55; }
.az-modal .az-modal-ias-nota { min-height: 2.8em; }