/* Autoevaluación IA — estilos del cuestionario y del resultado.
 *
 * Diseño: lectura trust-first (VARIANCE 3 · MOTION 2 · DENSITY 4). La marca
 * manda (Brand Assets/sistema-visual.md v1.1): Plein para titulares, Nunito
 * para cuerpo, navy #0F415C institucional, rosa #C1145C como ÚNICO acento,
 * azul claro #DFF1F6 de fondo suave. Verde/ámbar/rojo de los semáforos son
 * estado semántico, no acento, y llevan siempre etiqueta de texto.
 *
 * Reglas que no son de gusto:
 *   · Scoped bajo .iacta-ae; tipografía por familia de marca con fallback de
 *     sistema: en producción Plein/Nunito ya están auto-alojadas por el tema,
 *     aquí NO se carga ninguna fuente (cero peticiones a terceros).
 *   · El resultado NO usa <table>: filas flex (el tema colapsa tablas en
 *     móvil perdiendo cabeceras, R13).
 *   · Radios documentados: contenedores 12px · opciones y botones 10px ·
 *     chips píldora. Nada más.
 *   · Neutros de una sola familia, entintados a navy. Sombras, ninguna:
 *     la jerarquía la dan borde y espacio.
 *   · MOTION 2: solo estados hover/active/focus, transición corta. Nada
 *     que necesite prefers-reduced-motion.
 */

.iacta-ae {
  --ae-navy: #0F415C;
  --ae-rosa: #C1145C;
  --ae-agua: #95D1D0;
  --ae-claro: #DFF1F6;
  --ae-tinta: #21333e;        /* cuerpo: navy oscurecido, no negro puro */
  --ae-sutil: #51646f;        /* secundario, AA sobre blanco */
  --ae-borde: #d6e2e9;        /* neutro entintado a navy */
  --ae-fondo: #f4f9fb;
  --ae-titular: "Plein", "Plein Black", "Nunito", system-ui, sans-serif;
  --ae-cuerpo: "Nunito", system-ui, -apple-system, sans-serif;
  max-width: 46rem; margin: 0 auto;
  font-family: var(--ae-cuerpo); color: var(--ae-tinta); line-height: 1.55;
}

/* ── cabecera de bloque ── */
.iacta-ae .ae-progreso { height: 10px; border-radius: 999px; background: var(--ae-claro);
  background-image: linear-gradient(var(--ae-navy), var(--ae-navy));
  background-repeat: no-repeat; background-size: var(--ae-avance, 0%) 100%;
  transition: background-size .35s ease; margin: 0 0 1rem; }
.iacta-ae .ae-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.iacta-ae .ae-pregunta { position: relative; }
.iacta-ae .ae-pregunta.ae-ok::after { content: "✔"; position: absolute; top: .55rem;
  right: .8rem; color: #14602a; font-weight: 900; }
.iacta-ae .ae-pregunta.ae-ok legend { padding-right: 1.6rem; }
.iacta-ae .ae-cab-tabla { display: flex; justify-content: space-between; font-size: .72rem;
  font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ae-sutil);
  margin: .4rem .2rem -.2rem; }
.iacta-ae .ae-form { background: var(--ae-fondo); border: 1px solid var(--ae-borde);
  border-radius: 12px; padding: 1rem 1.1rem; margin: 1.4rem 0; }
.iacta-ae .ae-form-titulo { margin: 0 0 .8rem; }
.iacta-ae .ae-form label { display: block; font-weight: 700; font-size: .9rem;
  margin: .6rem 0; color: var(--ae-navy); }
.iacta-ae .ae-form input[type=text], .iacta-ae .ae-form input[type=email] {
  display: block; width: 100%; box-sizing: border-box; margin-top: .25rem;
  padding: .55rem .7rem; border: 1px solid var(--ae-borde); border-radius: 10px;
  font: inherit; color: var(--ae-tinta); background: #fff; }
.iacta-ae .ae-form input:focus-visible { outline: 2px solid var(--ae-rosa); outline-offset: 1px; }
.iacta-ae .ae-form-check { display: flex; gap: .55rem; align-items: flex-start;
  font-weight: 400 !important; color: var(--ae-tinta) !important; }
.iacta-ae .ae-form-check input { margin-top: .25rem; accent-color: var(--ae-rosa); }
.iacta-ae .ae-form button { margin-top: .6rem; }

/* Enviado. La caja entera cambia de color para que se vea desde lejos que ha
   salido; el mensaje sobre el gris del formulario pasaba por texto de ayuda.
   Verde de acierto propio, no el agua de marca: aquí el color tiene que
   significar «hecho», y el agua se usa como decoración en el resto de la
   página. Contraste del texto sobre el fondo: 7,4:1. */
.iacta-ae .ae-form--ok { background: #EDF8F1; border-color: #A9DCC0; }
.iacta-ae .ae-form-ok { display: flex; gap: .7rem; align-items: flex-start;
  margin: 0; color: #17603A; line-height: 1.55; }
.iacta-ae .ae-form-ok strong { color: #114A2C; }
.iacta-ae .ae-form-ok-marca { flex: 0 0 1.5rem; height: 1.5rem; border-radius: 50%;
  background: #1E7A48; color: #fff; display: grid; place-items: center;
  font-size: .82rem; font-weight: 900; line-height: 1; margin-top: .1rem; }
.iacta-ae .ae-form-aviso { background: var(--ae-claro); color: var(--ae-navy);
  border-radius: 10px; padding: .6rem .8rem; font-size: .88rem; margin: .7rem 0 0; }
.iacta-ae .ae-pct { margin-left: auto; align-self: center; font-weight: 800;
  color: var(--ae-navy); white-space: nowrap; }
.iacta-ae .ae-titulo { margin: 0 0 .3rem; font-family: var(--ae-titular);
  font-weight: 900; color: var(--ae-navy); font-size: 1.45rem; line-height: 1.15; }
.iacta-ae .ae-desc { margin: 0 0 .6rem; color: var(--ae-sutil); }
.iacta-ae .ae-nota { font-size: .9rem; color: var(--ae-navy); margin: .2rem 0 0;
  background: var(--ae-claro); border-radius: 10px; padding: .45rem .7rem;
  display: inline-block; }

/* ── preguntas ── */
.iacta-ae .ae-pregunta { border: 1px solid var(--ae-borde); border-radius: 14px;
  background: #fff; padding: 1.05rem 1.1rem .85rem; margin: 1rem 0;
  box-shadow: 0 2px 4px rgba(15,65,92,.06), 0 5px 15px rgba(15,65,92,.05);
  transition: box-shadow .25s ease, transform .25s ease; }
.iacta-ae .ae-pregunta:hover { box-shadow: 0 4px 8px rgba(15,65,92,.08), 0 10px 24px rgba(15,65,92,.08); }
/* entrada suave en cascada al pintar un bloque (estilo Google, gated por reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .iacta-ae .ae-pregunta, .iacta-ae .ae-cabecera, .iacta-ae .ae-pie,
  .iacta-ae .ae-resultado > * {
    animation: ae-sube .45s cubic-bezier(.16,1,.3,1) both;
    animation-delay: calc(var(--i, 0) * 70ms); }
  @keyframes ae-sube { from { opacity: 0; transform: translateY(14px); } }
  .iacta-ae .ae-opcion input:checked { animation: ae-pop .25s ease; }
  @keyframes ae-pop { 50% { transform: scale(1.25); } }
}
.iacta-ae .ae-pregunta legend { float: left; width: 100%; font-weight: 700;
  padding: 0; margin: 0 0 .45rem; color: var(--ae-tinta); }
.iacta-ae .ae-pregunta > * { clear: both; }
.iacta-ae .ae-ayuda { font-size: .88rem; color: var(--ae-sutil); margin: .3rem 0 .6rem; }
.iacta-ae .ae-opciones { display: grid; gap: .45rem; }
.iacta-ae .ae-opcion { display: flex; gap: .55rem; align-items: flex-start;
  padding: .55rem .7rem; border: 1px solid var(--ae-borde); border-radius: 10px;
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.iacta-ae .ae-opcion:hover { border-color: var(--ae-navy); }
.iacta-ae .ae-opcion:has(input:checked) { border-color: var(--ae-rosa);
  background: #fdf3f7; }
.iacta-ae .ae-opcion:has(input:focus-visible) { outline: 2px solid var(--ae-rosa);
  outline-offset: 2px; }
.iacta-ae .ae-opcion input { margin-top: .25rem; accent-color: var(--ae-rosa); }
.iacta-ae .ae-cita { margin-top: .6rem; font-size: .85rem; }
.iacta-ae .ae-cita summary { cursor: pointer; color: var(--ae-sutil); }
.iacta-ae .ae-cita summary:hover { color: var(--ae-navy); }
.iacta-ae .ae-cita p { margin: .3rem 0 0; color: var(--ae-tinta);
  border-left: 3px solid var(--ae-agua); padding-left: .6rem; }
.iacta-ae .ae-falta { color: #b3261e; font-size: .88rem; font-weight: 700;
  margin: .5rem 0 0; }

/* ── botones ── */
.iacta-ae .ae-pie { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
  margin: 1.2rem 0 2rem; }
.iacta-ae .ae-btn { display: inline-block; background: var(--ae-rosa); color: #fff;
  border: 0; border-radius: 10px; padding: .7rem 1.4rem; font-size: 1rem;
  font-family: var(--ae-cuerpo); font-weight: 700; cursor: pointer;
  text-decoration: none; transition: transform .1s ease, background-color .15s ease; }
.iacta-ae .ae-btn { box-shadow: 0 3px 10px rgba(193,20,92,.25); }
.iacta-ae .ae-btn:hover { background: #a51150; transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(193,20,92,.3); }
.iacta-ae .ae-btn:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(193,20,92,.25); }
.iacta-ae .ae-btn:focus-visible { outline: 2px solid var(--ae-navy); outline-offset: 2px; }
.iacta-ae .ae-btn--sec { background: #fff; color: var(--ae-navy);
  border: 1px solid var(--ae-borde); }
.iacta-ae .ae-btn--sec:hover { background: var(--ae-fondo); border-color: var(--ae-navy); }
.iacta-ae .ae-reiniciar { margin-left: auto; background: none; border: 0;
  color: var(--ae-sutil); font-family: var(--ae-cuerpo); font-size: .82rem;
  text-decoration: underline; cursor: pointer; }
.iacta-ae .ae-reiniciar:hover { color: var(--ae-navy); }

/* ── resultado ── */
.iacta-ae .ae-rol { color: var(--ae-sutil); }
.iacta-ae .ae-rol strong { color: var(--ae-navy); }
.iacta-ae .ae-titular { font-family: var(--ae-titular); font-weight: 900;
  color: var(--ae-navy); font-size: 1.45rem; line-height: 1.25; margin: .8rem 0 1rem; }
.iacta-ae .ae-titular strong { color: var(--ae-rosa); }
.iacta-ae .ae-resultado--critico .ae-titular { border-left: 4px solid #b3261e;
  padding-left: .8rem; }
.iacta-ae .ae-resultado h3 { font-family: var(--ae-titular); font-weight: 900;
  color: var(--ae-navy); font-size: 1.1rem; margin: 1.4rem 0 .4rem; }
.iacta-ae .ae-revisar { background: #fff7e0; border-left: 4px solid #8a6d00;
  border-radius: 0 10px 10px 0; padding: .6rem .8rem; font-size: .92rem; }
.iacta-ae .ae-tabla { display: grid; gap: .5rem; margin: .6rem 0 1rem; }
.iacta-ae .ae-fila { display: flex; gap: .8rem; align-items: flex-start;
  border: 1px solid var(--ae-borde); border-radius: 12px; background: #fff;
  padding: .7rem .8rem; box-shadow: 0 2px 4px rgba(15,65,92,.05); }
.iacta-ae .ae-fila strong { color: var(--ae-navy); }
.iacta-ae .ae-chip { flex: 0 0 auto; min-width: 4.2rem; text-align: center;
  font-size: .78rem; font-weight: 800; border-radius: 999px; padding: .25rem .6rem;
  background: var(--ae-claro); color: var(--ae-navy); }
.iacta-ae .ae-fila--verde .ae-chip { background: #dff0e3; color: #14602a; }
.iacta-ae .ae-fila--ambar .ae-chip { background: #fdf0cf; color: #6d5600; }
.iacta-ae .ae-fila--rojo  .ae-chip { background: #fbe2e0; color: #9c1f17; }
.iacta-ae .ae-fila--na { color: var(--ae-sutil); background: var(--ae-fondo); }
.iacta-ae .ae-chip--fecha { min-width: 7.5rem; }
.iacta-ae .ae-bajo-tabla { font-size: .85rem; color: var(--ae-sutil);
  margin: -.4rem 0 1.2rem; }

/* El único momento de marca fuerte del resultado: panel navy, botón rosa.
 * Contraste AAA blanco/navy según la propia guía. */
/* El mismo degradado del hero de /compliance-ia/, sin la fotografía: las dos
   páginas se venden juntas y el azul plano se veía de otra casa. */
.iacta-ae .ae-cta { color: #fff; border-radius: 12px;
  padding: 1.15rem 1.2rem; margin: 1.5rem 0;
  background: linear-gradient(96deg, rgba(4,18,28,.55) 0%, rgba(7,42,61,.74) 45%, rgba(15,65,92,.72) 100%),
              radial-gradient(78% 120% at 80% 28%, rgba(30,110,140,.80) 0%, rgba(11,46,66,.80) 55%, rgba(4,18,28,.70) 100%),
              #04121C; }
.iacta-ae .ae-cta p { margin: 0 0 .85rem; font-weight: 700; font-size: 1.05rem; }
.iacta-ae .ae-descargo { font-size: .78rem; color: var(--ae-sutil);
  border-top: 1px solid var(--ae-borde); padding-top: .9rem; margin-top: 1.6rem; }
.iacta-ae .ae-pie-links { text-align: right; }

@media (min-width: 640px) {
  .iacta-ae .ae-titulo { font-size: 1.7rem; }
  .iacta-ae .ae-titular { font-size: 1.7rem; }
  .iacta-ae .ae-chip { min-width: 4.8rem; }
}


/* ─────────── Carril izquierdo (progreso + resumen vivo) ───────────
 * Onboarding de dos columnas: el carril acompaña, el formulario manda.
 * En móvil el carril se pliega arriba y solo deja barra + paso actual:
 * a 390 px una lista de 7 pasos empuja el formulario fuera de pantalla. */
.iacta-ae.ae-con-carril { max-width: 68rem; display: grid; gap: 1.6rem;
  grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .iacta-ae.ae-con-carril { grid-template-columns: 21.5rem 1fr; gap: 2.6rem; }
  /* Arranca a la altura del título de sección y, al hacer scroll, se queda
   * holgado bajo la barra azul (nav 85px + barra + aire). Sin scroll propio:
   * el acordeón mantiene un solo bloque abierto, así que siempre cabe. */
  .iacta-ae .ae-carril { position: sticky; top: 9.5rem; margin-top: -5.25rem; }
}
.iacta-ae .ae-carril-caja { background: #fff; border: 1px solid var(--ae-borde);
  border-radius: 16px; padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 2px 4px rgba(15,65,92,.06), 0 8px 24px rgba(15,65,92,.06); }
.iacta-ae .ae-carril-tit { font-family: var(--ae-titular); font-weight: 900;
  color: var(--ae-navy); margin: 0 0 .7rem; font-size: 1.2rem; }
.iacta-ae .ae-carril-pct { font-size: .8rem; font-weight: 800; color: var(--ae-sutil);
  margin: .45rem 0 0; font-variant-numeric: tabular-nums; }
.iacta-ae .ae-pasos { list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: .1rem; }
.iacta-ae .ae-paso { display: flex; gap: .6rem; align-items: flex-start;
  padding: .5rem .3rem; border-radius: 10px; transition: background-color .2s ease; }
.iacta-ae .ae-paso-marca { flex: 0 0 1.15rem; text-align: center; font-weight: 900;
  font-size: .85rem; line-height: 1.5; color: var(--ae-borde); }
.iacta-ae .ae-paso-txt { display: block; font-size: .86rem; line-height: 1.35; }
.iacta-ae .ae-paso-txt strong { display: block; color: var(--ae-sutil); font-weight: 700; }
.iacta-ae .ae-paso-txt em { display: block; font-style: normal; font-size: .78rem;
  color: var(--ae-sutil); opacity: .8; margin-top: .1rem; }
.iacta-ae .ae-paso--hecho .ae-paso-marca { color: #14602a; }
.iacta-ae .ae-paso--hecho .ae-paso-txt strong { color: var(--ae-tinta); }
.iacta-ae .ae-paso--actual { background: var(--ae-claro); }
.iacta-ae .ae-paso--actual .ae-paso-marca { color: var(--ae-rosa); }
.iacta-ae .ae-paso--actual .ae-paso-txt strong { color: var(--ae-navy); font-weight: 800; }
.iacta-ae .ae-paso--pendiente { opacity: .45; }
.iacta-ae .ae-paso-de { font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ae-sutil); margin: 0 0 .3rem; }
@media (max-width: 899px) {
  .iacta-ae .ae-carril-caja { padding: .8rem 1rem; }
  .iacta-ae .ae-pasos { display: none; }
  .iacta-ae .ae-carril-tit { display: none; }
  .iacta-ae .ae-carril-pct { margin-top: .5rem; text-align: right; }
}


/* ─────── Carril: grupos por bloque con sus preguntas dentro ─────── */
.iacta-ae .ae-grupo { padding: .55rem 0; border-top: 1px solid var(--ae-borde); }
.iacta-ae .ae-grupo:first-child { border-top: 0; }
.iacta-ae .ae-grupo-cab { display: flex; align-items: center; gap: .55rem; }
.iacta-ae .ae-grupo-marca { flex: 0 0 1.1rem; text-align: center; font-weight: 900;
  font-size: .82rem; color: var(--ae-borde); }
.iacta-ae .ae-grupo-tit { flex: 1; font-size: .92rem; font-weight: 800;
  color: var(--ae-sutil); line-height: 1.25; }
.iacta-ae .ae-grupo-cuenta { font-size: .74rem; font-weight: 800; color: var(--ae-sutil);
  font-variant-numeric: tabular-nums; opacity: .75; }
.iacta-ae .ae-grupo--hecho .ae-grupo-marca { color: #14602a; }
.iacta-ae .ae-grupo--hecho .ae-grupo-tit { color: var(--ae-tinta); }
.iacta-ae .ae-grupo--actual .ae-grupo-marca { color: var(--ae-rosa); }
.iacta-ae .ae-grupo--actual .ae-grupo-tit { color: var(--ae-navy); }
.iacta-ae .ae-grupo--pendiente { opacity: .5; }
.iacta-ae .ae-subs { list-style: none; margin: .4rem 0 .2rem; padding: 0 0 0 1.65rem;
  display: grid; gap: .3rem; }
.iacta-ae .ae-sub { display: flex; gap: .45rem; align-items: flex-start; }
.iacta-ae .ae-sub-marca { flex: 0 0 .8rem; font-size: .72rem; line-height: 1.5;
  font-weight: 900; }
.iacta-ae .ae-sub-txt { font-size: .8rem; line-height: 1.3; }
.iacta-ae .ae-sub-txt em { display: block; font-style: normal; font-size: .75rem;
  font-weight: 700; margin-top: .05rem; }
/* Respondida frente a pendiente: la diferencia se ve de un vistazo */
.iacta-ae .ae-sub--ok .ae-sub-marca { color: #14602a; }
.iacta-ae .ae-sub--ok .ae-sub-txt { color: var(--ae-tinta); }
.iacta-ae .ae-sub--ok .ae-sub-txt em { color: var(--ae-rosa); }
.iacta-ae .ae-sub--no .ae-sub-marca { color: #c3d2da; }
.iacta-ae .ae-sub--no .ae-sub-txt { color: var(--ae-sutil); opacity: .7; }
@media (max-width: 899px) { .iacta-ae .ae-subs { display: none; } }


/* ─────── Carril: acordeón con tirador, un solo bloque abierto ─────── */
.iacta-ae .ae-grupo-det { }
.iacta-ae .ae-grupo-cab { display: flex; align-items: center; gap: .55rem;
  cursor: pointer; list-style: none; padding: .15rem 0; border-radius: 8px; }
.iacta-ae .ae-grupo-cab::-webkit-details-marker { display: none; }
.iacta-ae .ae-grupo-cab:hover .ae-grupo-tit { color: var(--ae-navy); }
.iacta-ae .ae-grupo-cab:focus-visible { outline: 2px solid var(--ae-rosa);
  outline-offset: 2px; }
.iacta-ae .ae-grupo-flecha { flex: 0 0 auto; width: .55rem; height: .55rem;
  margin-left: .1rem; border-right: 2px solid var(--ae-sutil);
  border-bottom: 2px solid var(--ae-sutil); transform: rotate(45deg);
  transition: transform .25s ease; opacity: .75; }
.iacta-ae .ae-grupo-det[open] > .ae-grupo-cab .ae-grupo-flecha {
  transform: rotate(-135deg); }
.iacta-ae .ae-grupo-det[data-vacio] .ae-grupo-flecha { opacity: .3; }
.iacta-ae .ae-subs-vacio { margin: .4rem 0 .2rem 1.65rem; font-size: .78rem;
  color: var(--ae-sutil); opacity: .7; }

/* ───────── Diálogo de confirmación (empezar de nuevo) ───────── */
.ae-dialogo { border: 0; border-radius: 16px; padding: 1.75rem; background: #fff;
  max-width: min(30rem, calc(100vw - 2rem)); color: var(--ae-tinta);
  box-shadow: 0 24px 60px rgba(4, 20, 31, .28); }
.ae-dialogo::backdrop { background: rgba(4, 20, 31, .55);
  backdrop-filter: blur(2px); }
.iacta-ae .ae-dialogo h2 { font-family: var(--ae-titular); font-weight: 900;
  color: var(--ae-navy); font-size: 1.15rem; line-height: 1.2; margin: 0 0 .6rem;
  text-wrap: nowrap; }
.ae-dialogo p { margin: 0 0 1.5rem; font-size: .95rem; line-height: 1.55; }
.ae-dialogo-bts { display: flex; flex-wrap: wrap; gap: .7rem;
  justify-content: flex-end; }
.ae-dialogo-bts button { font: inherit; font-weight: 700; cursor: pointer;
  border-radius: 10px; padding: .7rem 1.15rem; border: 1px solid transparent;
  min-height: 44px; }
.ae-bt-sec { background: #fff; border-color: var(--ae-borde);
  color: var(--ae-navy); }
.ae-bt-sec:hover { background: var(--ae-fondo); }
/* El destructivo NO es el botón por defecto: el foco arranca en «seguir». */
.ae-bt-peligro { background: var(--ae-rosa); color: #fff; }
.ae-bt-peligro:hover { background: #a10f4d; }
.ae-dialogo-bts button:focus-visible { outline: 2px solid var(--ae-navy);
  outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ae-dialogo[open] { animation: aeDlg .18s cubic-bezier(.16,1,.3,1) both; }
  @keyframes aeDlg { from { opacity: 0; transform: translateY(8px) scale(.98); } }
}

/* ───────── Móvil: la barra de progreso no se va de pantalla ─────────
 * Se queda justo bajo el menú principal, que en móvil es sticky a top:0 con
 * 85 px de alto y z-index 99 (medido, lo fija `iacta-mobile-fixes`). El carril
 * es hijo directo de la rejilla del cuestionario, así que acompaña TODAS las
 * preguntas. La lista de bloques se oculta: el bloque en curso ya se lee en el
 * encabezado del contenido y una lista fija de 7 se comería la pantalla. */
@media (max-width: 899px) {
  .iacta-ae .ae-carril { position: sticky; top: 85px; z-index: 6;
    margin: 0 0 1.25rem; }
  .iacta-ae .ae-carril-caja { padding: .7rem .9rem;
    box-shadow: 0 6px 18px rgba(4, 20, 31, .1); }
  .iacta-ae .ae-carril .ae-pasos { display: none; }
  /* Dos columnas, no tres: el título ya lo oculta una regla anterior y, al salir
   * del grid, la barra heredaba la columna `auto` y se quedaba en 0 de ancho.
   * Se oculta aquí explícitamente para que la rejilla no dependa de eso. */
  .iacta-ae .ae-carril-cab { display: grid;
    grid-template-columns: 1fr auto; align-items: center; gap: .7rem; }
  .iacta-ae .ae-carril-tit { display: none; }
  .iacta-ae .ae-carril-cab .ae-progreso { margin: 0; }
  .iacta-ae .ae-carril-pct { margin: 0; font-size: .78rem; white-space: nowrap; }
}