/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Asistente de alta de empresas — una pregunta por pantalla
   ═══════════════════════════════════════════════════════════════════════════════════════════
   Mario pasó una plantilla (STEPS de ThemeForest) porque le gustaba cómo se ve, y yo argumenté
   en contra **sin haberla mirado**: la juzgué por su peso y sus archivos. Al abrirla resultó que
   no era una cuestión de gusto sino de PARADIGMA: STEPS hace una pregunta por pantalla, a lo
   ancho, con título grande y tarjetas; no una barra de pestañas.

   ⚠ Y esa diferencia es también la causa del defecto que él reportó. Medido a 390 px, la barra
     de siete pestañas quedaba en **52 px de ancho por 443 de alto**, desbordando en horizontal y
     con el texto a una palabra por renglón. Una pregunta por pantalla no tiene nada que apretar:
     adoptar el estilo que pidió arregla el móvil de paso.

   Lo que se toma de STEPS es el LENGUAJE —pregunta grande, ayuda debajo, tarjetas, un botón—;
   los colores, radios y tipografía salen de los tokens del tema, así que hereda el modo oscuro y
   la piel. No se importó un solo archivo de la plantilla.

   ⚠ La mecánica sigue siendo `form-wizard.js` del tema. Las pestañas se mantienen en el DOM
     —Bootstrap las necesita para cambiar de panel— y solo se esconden. Quitarlas rompería el
     avance.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Las pestañas del tema desaparecen: su trabajo lo hace la barra de progreso y el contador. */
.ae-asistente .wizard-tabs { display: none; }

.ae-asistente .progress { max-width: 720px; margin-inline: auto; }

.ae-paso-num {
    display: block;
    text-align: center;
    margin-top: .75rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ins-secondary-color);
}

/* ── La pregunta ──────────────────────────────────────────────────────────────────────────── */

.ae-pregunta {
    max-width: 24ch;
    margin: 1.75rem auto .5rem;
    text-align: center;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.02em;
    /* ⚠ Reparte las palabras entre renglones en vez de llenar el primero y dejar una huérfana
       abajo. Se combina con el tope en `ch`, que es el que garantiza el corte donde no haya
       soporte: `balance` mejora, no sostiene. */
    text-wrap: balance;
}

/* ⚠ `max-width` en CARACTERES y no en píxeles: lo que hace ilegible un título grande no es el
   ancho de la pantalla sino cuántas letras entran por renglón. Con `ch` el corte es el mismo en
   el teléfono y en el escritorio. */
.ae-ayuda {
    max-width: 62ch;
    margin: 0 auto 2rem;
    text-align: center;
    color: var(--ins-secondary-color);
    font-size: .9375rem;
}

/* ── La lista de opciones: UNA ficha con las filas adentro ────────────────────────────────────
   Mario, 2026-09-28: «debería estar la lista dentro de una ficha, no una ficha cada una». Con
   diez tipos de negocio, diez tarjetas sueltas son diez cajas compitiendo; una sola ficha con
   filas separadas por una línea se lee de corrido.

   ⚠ La ficha NO puede compartir color con la `.card` que la envuelve —es lo que dejó las tarjetas
   sin límite visible—, así que el relleno sube un peldaño y el borde va al contraste que pide el
   contorno de un control. */
.ae-lista {
    max-width: 720px;
    margin-inline: auto;
    border: 1px solid var(--ins-light-border-subtle, #6c757d);
    border-radius: var(--ins-border-radius-lg, .5rem);
    background: var(--ins-tertiary-bg);
    overflow: hidden;
}

.ae-fila {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    margin: 0;
    padding: .875rem 1.125rem;
    cursor: pointer;
    text-align: left;
    transition: background-color .12s;
}
.ae-fila + .ae-fila { border-top: 1px solid var(--ins-border-color); }
.ae-fila:hover { background: rgba(255, 255, 255, .04); }

/* ⚠ La casilla se VE, a diferencia de las tarjetas: en una lista es la señal principal de qué
   está marcado, y esconderla obligaría a deducirlo del fondo. */
.ae-fila input { margin-top: .2rem; flex: none; }
.ae-fila:focus-within { outline: 2px solid var(--ins-primary); outline-offset: -2px; }

.ae-fila strong { display: block; font-size: .9375rem; font-weight: 600; }
.ae-fila span   { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--ins-secondary-color); }

/* Marcada: fondo teñido MÁS la casilla, que son dos señales; el color no va solo. */
.ae-fila.elegida { background: var(--ins-primary-bg-subtle); }
.ae-fila.elegida strong { color: var(--ins-primary-text-emphasis, var(--ins-body-color)); }
/* ⚠ La descripción se aclara SOLO en la fila marcada. El gris secundario da 4,55:1 sobre la fila
   normal pero cae a **3,78:1** sobre el tinte morado: el mismo color no sirve en los dos fondos.
   Con el color del cuerpo sube a 5,99:1. */
.ae-fila.elegida span { color: var(--ins-body-color); }

/* ⚠ El bloque de TARJETAS —una ficha por opción— se quitó el 2026-09-28: Mario las pidió como
   lista en los dos pasos que las usaban. Se borró en vez de dejarlo «por si acaso», que es como
   una hoja junta reglas que nadie puede saber si siguen vivas. Queda `.ae-opciones` porque es el
   contenedor que el JS llena; su rejilla ya no hace falta, así que solo centra. */
.ae-opciones { max-width: 720px; margin-inline: auto; }

/* ── Los campos ───────────────────────────────────────────────────────────────────────────── */

/* Se limita el ancho para que un formulario no se estire a 1600 px en un monitor grande: el ojo
   pierde la línea entre la etiqueta y su campo. */
.ae-campos { max-width: 860px; margin-inline: auto; }

/* ⚠ La barra superior es pegajosa y tapa lo que recibe el foco al recorrer con el tabulador:
   el campo queda debajo de ella y quien navega por teclado no ve dónde está. `scroll-padding`
   reserva ese alto cuando el navegador desplaza para mostrarlo. */
html:has(.ae-asistente) { scroll-padding-top: calc(var(--ins-topbar-height, 70px) + 1rem); }

/* ── El pie ───────────────────────────────────────────────────────────────────────────────── */

.ae-pie {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin-top: 2.25rem;
}
.ae-pie .btn { min-width: 150px; border-radius: var(--ins-border-radius-pill, 999px); }

/* ⚠ «Atrás» va en `btn-light`, NO en `btn-secondary`: en Ubold `secondary` es un AZUL, no un
   gris, así que el botón de volver salía tan cantado como el de avanzar y los dos competían.
   Una pantalla con dos acciones del mismo peso no tiene acción principal. */
.ae-pie [data-wizard-prev] { --ins-btn-border-color: var(--ins-border-color); }

.ae-error { max-width: 720px; margin: 1rem auto 0; text-align: center; }

/* ── Teléfono ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .ae-pregunta { max-width: 18ch; margin-top: 1.25rem; }
    .ae-ayuda    { margin-bottom: 1.5rem; }
    /* ⚠ Los botones del pie en columna INVERTIDA: la acción principal queda arriba, al alcance
       del pulgar, y «Atrás» debajo. En fila quedaban dos botones de 150 px en 390 px de ancho. */
    .ae-pie { flex-direction: column-reverse; }
    .ae-pie .btn { width: 100%; }
}