/* ============================================================================
   LOGIN — la puerta de ALMAGO
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de `landing.css` y de `agendar.css`, y solo agrega lo que
   aquí nace: centrar la caja en la pantalla y pintar el aviso de error. Los
   campos, los botones, la marca y la letra ya vienen de las otras dos — son
   los MISMOS campos de «Solicita una demo», y por eso no se escriben otra vez.

   Es la regla del repo (`CLAUDE.md` §El diseño): la app se ve igual que la
   página de internet. No se diseña de nuevo, se hereda.
   ========================================================================== */

/* ── LA HOJA ────────────────────────────────────────────────────────────────
   Una sola caja centrada en lo que queda de pantalla bajo la barra. El alto
   se descuenta igual que en `.seccion--entrada` de `landing.css`, con las dos
   unidades: `vh` para los navegadores viejos y `svh` justo después para que en
   el teléfono el cálculo use la ventana CHICA —la de la barra del navegador
   desplegada— y la caja no quede medio tapada al abrir. */
.entrar__hoja {
  --alto-barra: 104px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--alto-barra));
  min-height: calc(100svh - var(--alto-barra));
  padding: clamp(32px, 6vw, 72px) var(--margen);
}

/* El mismo ancho que `.forma` de `agendar.css` (460 px), puesto aquí para que
   el titular y el aviso corten donde cortan los campos y no más allá. */
.entrar__caja { width: 100%; max-width: 460px; }

.entrar__titulo {
  margin: 0 0 8px;
  font-size: clamp(28px, 3.4vw, 40px);
}

.entrar__bajada { margin: 0 0 clamp(24px, 3vw, 36px); }

/* `.forma` trae su propio `max-width`; aquí ya lo pone la caja, así que se
   suelta para que los campos ocupen el ancho completo de la columna. */
.entrar__forma { max-width: none; }

.entrar__pendiente {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  text-align: center;
}

/* ── EL AVISO DE ERROR ──────────────────────────────────────────────────────
   ⚠ AQUÍ ENTRA EL ÚNICO COLOR QUE LA PALETA NO TENÍA, y va con su razón. La
     dirección reduce la paleta a blanco, dos grises de letra, dos de línea y
     el azul de marca SOLO como acento. Ninguno de esos dice «esto falló»: el
     azul es la marca —usarlo para un error enseña la marca cada vez que algo
     sale mal— y el gris de apoyo se lee como una nota más, que es justo lo
     contrario de lo que este renglón tiene que hacer.

     Lo que la dirección prohíbe es la DECORACIÓN —gradientes, texturas,
     formas flotantes, sombras pesadas—, no el color de estado. Éste es
     funcional: aparece solo cuando algo falló y no pinta nada más en todo el
     sitio. Por eso vive en esta hoja y no en `landing.css`.

     #C2261B sobre blanco da ~6.4:1, por encima del 4.5:1 que pide texto
     normal. El rojo de sistema (#FF3B30) da 3.6:1 y no alcanza.

   SIN FONDO Y CON FILETE. Un bloque rojo relleno sería «color de fondo», que
   es lo que la dirección le prohíbe hasta al azul de marca. El filete a la
   izquierda marca el renglón sin pintar una caja. */
.entrar__problema {
  --alerta: #C2261B;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--alerta);
  color: var(--alerta);
  font-size: 15px;
  line-height: 1.5;
}

/* ── LA PISTA BAJO UN CAMPO ─────────────────────────────────────────────────
   «Al menos 10 caracteres» en el alta. Nace aquí y no en `agendar.css` porque
   allá ningún campo la necesitaba: los de «Solicita una demo» se explican con
   su etiqueta. Gris de apoyo y chica — es una nota, no una advertencia; el rojo
   está reservado para cuando algo ya falló. */
.campo__pista {
  margin: 6px 0 0;
  color: var(--tinta-suave);
  font-size: 13px;
  line-height: 1.4;
}