/**
 * **Las pantallas de alta e ingreso.** Sistema visual propio, claro, documentado en
 * `docs/diseno/README.md` — el que Mauro aprobó el 2026-09-02: superficie clara tipo panel de
 * Shopify, con la jerarquía y el aire de Apple HIG.
 *
 * ⚠️ **NO usa el tema oscuro del sitio, y es a propósito.** La portada vende y por eso es oscura y
 * con impacto; esto es un formulario que alguien completa para empezar a trabajar, y ahí manda la
 * claridad. Por eso estas pantallas no cargan las hojas del tema `lemoncode` y definen todo acá.
 *
 * ⚠️ **Y por eso mismo define su propio reset**: sin las hojas del sitio, no hay nada que normalice
 * márgenes ni tipografía.
 */

:root {
  --bg: #f1f1f1;
  --surface: #ffffff;
  --sunken: #fafafa;
  --border: #e0e0e0;
  --border-strong: #cdcdcd;
  --ink: #1a1a1a;
  --ink-2: #616161;
  --ink-3: #8a8a8a;
  /* El acento es el MISMO de la app: «tinta», el monocromo que trae por defecto el panel y con el
     que ya trabaja la web del cadete. Antes era un verde propio, y eso hacía que el alta pareciera
     de otro producto que el sistema al que se entra treinta segundos después.
     ⚠️ Consecuencia buscada: la pantalla queda monocroma. Lo que separa un elemento de otro pasa a
     ser el peso y la posición, no el color — que es exactamente el lenguaje de la app. */
  --accent: #111111;
  --accent-soft: #e8e8e9;
  --amber-bg: #fff1d6;
  --amber-line: #f0c67a;
  --amber-ink: #5c4200;
  --shadow: 0 1px 2px rgba(26, 26, 26, 0.07);
  --shadow-lift: 0 4px 16px rgba(26, 26, 26, 0.07);
  /* Inter, la misma del diseño. Va **self-host** (`assets/fonts.css`), como las otras tres del
     sitio: el proyecto no carga fuentes de un CDN. */
  --ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  --r-card: 14px;
  --r-control: 10px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.probar {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 40px 20px 64px;
}

.probar__volver {
  color: var(--ink-2);
  font-size: 14px;
  text-decoration: none;
}

.probar__volver:hover {
  color: var(--ink);
}

/* La tarjeta. Dos anchos: el angosto para un formulario solo, el ancho para el alta con su
   columna de «qué incluye» al costado. */
.probar__card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  padding: 34px 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.probar__card--ancha {
  max-width: 940px;
  padding: 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  overflow: hidden;
}

.probar__col {
  padding: 38px 42px 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* La columna de al lado, sobre un fondo un escalón más bajo: es apoyo, no la acción principal. */
.probar__col--aparte {
  background: var(--sunken);
  border-left: 1px solid var(--border);
}

/* **Los cuatro pasos del alta miden lo mismo y tienen la misma forma**, y no es un capricho: son
 * la MISMA persona en la MISMA sesión, y el marco no debería moverse bajo sus pies entre un paso y
 * el siguiente. Sin esto la tarjeta pasaba de 940 a 440 de ancho y se encogía a la mitad de alto,
 * que se lee como un salto a otra pantalla.
 *
 * La franja de al lado va en los cuatro por la misma razón, y además resuelve el problema que trajo
 * igualar el alto: el paso con menos que decir quedaba con un desierto abajo. Ahí va contenido que
 * sirve EN ESE momento —qué hacer mientras espera, por dónde empezar cuando entra—, no la misma
 * lista repetida cuatro veces, que sería relleno con otro nombre.
 *
 * El tamaño se fija acá, en la tarjeta: así el número es UNO y no depende del padding ni de cuánto
 * tenga que decir cada paso. */
.probar[data-flujo] .probar__card {
  max-width: 940px;
  min-height: 692px;
}

/* Las dos columnas se estiran a la altura de la tarjeta, y su contenido arranca arriba. */
.probar[data-flujo] .probar__col {
  justify-content: flex-start;
}

/* La nota al pie de cada columna sí se pega abajo: es donde se espera un pie. */
.probar[data-flujo] .probar__col > .probar__legal {
  margin-top: auto;
}

/* --- El logotipo de la aplicación, arriba de cada pantalla --- */
.probar__marca {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 2px;
}

.probar__marca img {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: block;
  flex: none;
}

.probar__marca span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.probar__marca b {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.probar__marca small {
  font-size: 11.5px;
  color: var(--ink-2);
}

/* --- Texto --- */
.probar__titulo {
  margin: 0;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.probar__bajada {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  max-width: 46ch;
}

.probar__legal {
  margin: auto 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 50ch;
}

.probar__legal a {
  color: var(--accent);
  font-weight: 500;
}

/* --- Formulario --- */
.probar__form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 400px;
}

.probar__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
}

.probar__campo input,
.probar__campo select {
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
}

.probar__campo input:focus-visible,
.probar__campo select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.probar__campo small {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-3);
}

/* El botón principal es negro sólido. **Ya no es «el único oscuro»** —desde que el acento es tinta,
   el tic y la barra también lo son—, así que lo que lo distingue es ser el único con FONDO lleno:
   todo lo demás usa el negro como trazo o como texto. Es la misma jerarquía que usa la app. */
.probar__submit {
  align-self: stretch;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--surface);
  font-family: var(--ui);
  font-weight: 500;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.probar__submit:hover {
  background: #000;
}

.probar__submit[disabled] {
  opacity: 0.55;
  cursor: default;
}

.probar__submit--secundario {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}

.probar__submit--secundario:hover {
  background: var(--sunken);
}

.probar__olvide {
  align-self: center;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
}

.probar__olvide:hover {
  color: var(--ink);
}

.probar__feedback {
  margin: 0;
  min-height: 18px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.probar__feedback.is-error {
  color: #b42318;
}

/* --- Qué incluye la prueba: una lista, no tarjetas --- */
.probar__aparte-titulo {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.probar__incluye {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.probar__incluye li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
}

.probar__incluye b {
  color: var(--ink);
  font-weight: 500;
}

.probar__tic {
  color: var(--accent);
  font-weight: 600;
}

/* --- El consejo que rota durante la espera --- */
/* Se le reserva la altura: sin eso, cada consejo de largo distinto mueve todo lo que tiene abajo, y
   la franja late en cada cambio. Es el defecto clásico de un texto que rota. */
.probar__consejo {
  min-height: 92px;
  display: flex;
  align-items: flex-start;
}

/* **El consejo va en itálica, y es lo único de la pantalla que la lleva.** No es adorno: el resto
   del texto le habla al dueño sobre SU alta —lo que pasó, lo que falta, qué hacer—, y esto es otra
   voz, que comenta al costado mientras espera. La itálica es la forma de decir «esto es un aparte»
   sin necesidad de anunciarlo con un rótulo. Un punto más grande, porque se lee de a uno. */
.probar__consejo-texto {
  margin: 0;
  font-size: 15.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-2);
  opacity: 1;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Sale hacia arriba y entra desde su lugar: el movimiento marca que cambió el contenido, no que se
   está cargando algo. */
.probar__consejo[data-saliendo] .probar__consejo-texto {
  opacity: 0;
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .probar__consejo-texto {
    transition: opacity 0.3s ease;
  }

  .probar__consejo[data-saliendo] .probar__consejo-texto {
    transform: none;
  }
}

/* --- Los datos para entrar --- */
/* Tres columnas iguales, no `auto-fit`: con `minmax(200px, …)` en una tarjeta de 440 entraban dos
 * y la tercera quedaba sola en una fila, desalineada con las de arriba. Son tres datos del mismo
 * rango; se leen como una fila o como tres renglones, nunca como dos y un huérfano. */
.probar__datos {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  overflow: hidden;
}

.probar__datos > div {
  padding: 12px 16px;
  background: var(--sunken);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
}

.probar__datos > div:last-child {
  border-bottom: 0;
}

.probar__datos dt {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

.probar__datos dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13.5px;
  text-align: right;
  word-break: break-all;
}

/* --- La espera: el único lugar con movimiento, porque es el único donde algo pasa --- */
.probar__progreso {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.probar__barra {
  height: 100%;
  width: 8%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.7s ease;
}

.probar__tareas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.probar__tareas li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--ink-3);
  transition: color 0.4s ease;
}

.probar__tareas b {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: inherit;
}

/* La marca cambia de FORMA según el estado, no sólo de color: con poca luz, o para quien no
   distingue bien los colores, el color solo no separa «haciendo» de «hecho». */
.probar__marca-paso {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: grid;
  place-items: center;
}

.probar__tareas li[data-estado='haciendo'] {
  color: var(--ink);
}

.probar__tareas li[data-estado='haciendo'] .probar__marca-paso {
  border-color: var(--accent);
  border-right-color: transparent;
  animation: probar-girar 0.9s linear infinite;
}

.probar__tareas li[data-estado='hecho'] {
  color: var(--ink-2);
}

.probar__tareas li[data-estado='hecho'] .probar__marca-paso {
  border-color: var(--accent);
  background: var(--accent);
}

.probar__tareas li[data-estado='hecho'] .probar__marca-paso::after {
  content: '✓';
  color: var(--surface);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

@keyframes probar-girar {
  to {
    transform: rotate(360deg);
  }
}

/* Quien pidió menos movimiento ve los mismos estados, sin la rueda girando. */
@media (prefers-reduced-motion: reduce) {
  .probar__tareas li[data-estado='haciendo'] .probar__marca-paso {
    animation: none;
    border-right-color: var(--accent);
  }

  .probar__barra {
    transition: none;
  }
}

/* El `[hidden]` pierde contra el `display` de una clase — ver
   `docs/feedback/hidden-no-gana-contra-una-clase.md`. */
.probar__legal[hidden],
.probar__submit[hidden],
.probar__card[hidden] {
  display: none;
}

@media (max-width: 880px) {
  .probar__card--ancha {
    grid-template-columns: 1fr;
  }

  .probar__col--aparte {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}