/* =====================================================================
   acceso.css — la pantalla de entrada al espacio privado.

   Es la única página del sitio que existe para que alguien HAGA algo, no
   para que lea: el formulario tiene que estar visible sin scrollear y
   ganarle en peso visual a todo lo demás. Por eso no lleva la franja de
   título de las páginas internas y por eso la tarjeta es blanca sobre el
   navy — el contraste más alto del sistema, puesto donde está la acción.

   Acá vive también el sistema de campos (.campo*), que ANTES NO EXISTÍA:
   el formulario de ingreso se estaba pintando con `div`, `label` e
   `input` pelados, sin una sola clase, así que el navegador lo dibujaba
   con sus valores por defecto. El candado de clases huérfanas no lo
   detecta —solo mira clases usadas sin regla, no elementos sin clase—,
   así que la pantalla más importante del sitio pasó sin estilo por
   varias fases sin que nada se quejara.
   ===================================================================== */

/* --- El bloque de entrada ------------------------------------------------ */
.acceso {
  background-color: var(--color-superficie-inversa);
  background-image: linear-gradient(
    135deg,
    var(--color-superficie-inversa) 0%,
    var(--color-superficie-inversa-suave) 100%
  );
  color: var(--color-texto-inverso);
  padding-block: var(--espacio-seccion);
}

.acceso__interior {
  display: grid;
  gap: var(--espacio-8);
  align-items: center;
}

/* La tarjeta primero en pantalla angosta: quien entra desde el celular viene
   a ingresar, no a leer el relato. En escritorio vuelve a la derecha, como en
   el mockup, porque ahí las dos cosas entran juntas. */
.acceso__relato {
  order: 2;
}

.acceso__tarjeta {
  order: 1;
}

@media (min-width: 900px) {
  .acceso__interior {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: var(--espacio-10);
  }

  .acceso__relato {
    order: 1;
  }

  .acceso__tarjeta {
    order: 2;
  }
}

.acceso__relato h1 {
  font-size: var(--titulo-hero);
  color: var(--color-texto-inverso);
  max-inline-size: 12ch;
}

/* El filete corto debajo del titular es del mockup, y hace trabajo: separa el
   titular de la bajada sin sumar espacio vertical en una pantalla que ya tiene
   poco. */
.acceso__relato h1::after {
  content: "";
  display: block;
  inline-size: 4rem;
  block-size: 3px;
  margin-block-start: var(--espacio-5);
  background-color: var(--color-foco-inverso);
}

.acceso__bajada {
  margin-block-start: var(--espacio-5);
  font-size: var(--texto-md);
  color: var(--color-texto-inverso-suave);
  max-inline-size: 44ch;
}

.acceso__sello {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  margin-block-start: var(--espacio-7);
  font-weight: var(--peso-medio);
  color: var(--color-texto-inverso);
}

/* --- La tarjeta de ingreso ----------------------------------------------- */
.acceso__tarjeta {
  /* Los enlaces de adentro vuelven al azul del sitio: la tarjeta es blanca,
     aunque esté sobre el navy. Sin esto heredarían el color inverso de la
     franja y quedarían casi blancos sobre blanco. */
  --color-enlace-local: var(--color-enlace);
  --enfoque-color: var(--color-foco);

  padding: var(--espacio-7);
  background-color: var(--color-superficie);
  border-radius: var(--radio-sutil);
  box-shadow: 0 24px 48px -24px rgb(var(--color-sombra) / 0.55);
  color: var(--color-texto);
}

.acceso__emblema {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--espacio-10);
  block-size: var(--espacio-10);
  margin-inline: auto;
  border-radius: var(--radio-pill);
  background-color: var(--color-acento-tenue);
  color: var(--color-acento);
}

.acceso__titulo {
  margin-block-start: var(--espacio-5);
  font-size: var(--titulo-sm);
  text-align: center;
}

.acceso__ayuda {
  margin-block-start: var(--espacio-2);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  text-align: center;
  max-inline-size: none;
}

.acceso__form {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
  margin-block-start: var(--espacio-6);
}

.acceso__enviar {
  /* De ancho completo: es la única acción de la tarjeta y no compite con nada,
     así que no hay motivo para que sea más chica que el campo de arriba. */
  inline-size: 100%;
  margin-block-start: var(--espacio-2);
}

/* El resumen solo ocupa lugar cuando tiene algo que decir. `:empty` NO alcanza: el tag helper
   deja adentro un <ul> vacío aunque no haya errores, así que el div nunca está vacío y se pintaba
   como una barra gris arriba del formulario. Lo que sí distingue los dos estados es la clase que
   ASP.NET Core agrega solo: `validation-summary-valid` cuando no hay nada que informar. */
.validation-summary-valid {
  display: none;
}

.acceso__errores {
  margin-block-start: var(--espacio-5);
  padding: var(--espacio-4);
  border-inline-start: 3px solid var(--color-acento);
  background-color: var(--color-acento-tenue);
  color: var(--color-texto);
  font-size: var(--texto-sm);
}

.acceso__errores ul {
  margin: 0;
  padding: 0;
}

.acceso__pie {
  margin-block-start: var(--espacio-4);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  text-align: center;
  max-inline-size: none;
}

/* --- Sistema de campos, compartido con el resto de los formularios -------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

.campo__etiqueta {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto);
}

/* La caja envuelve al ícono y al control para que el foco se dibuje sobre el
   conjunto: un anillo alrededor del input solo, con el ícono afuera, se lee
   como si el ícono no fuera parte del campo. */
.campo__caja {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding-inline: var(--espacio-4);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-boton);
  background-color: var(--color-superficie);
  transition:
    border-color var(--duracion-rapida) var(--curva-salida),
    box-shadow var(--duracion-rapida) var(--curva-salida);
}

.campo__caja:focus-within {
  border-color: var(--color-acento);
  box-shadow: 0 0 0 3px var(--color-acento-tenue);
}

.campo__icono {
  inline-size: var(--espacio-5);
  block-size: var(--espacio-5);
  flex-shrink: 0;
  fill: currentColor;
  color: var(--color-texto-tenue);
}

.campo__control {
  flex: 1;
  min-inline-size: 0;
  padding-block: var(--espacio-3);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--texto-base);
  color: var(--color-texto);
}

/* El anillo va en la caja, no en el control: dos anillos concéntricos es lo
   que se ve si se dejan los dos. */
.campo__control:focus,
.campo__control:focus-visible {
  outline: none;
}

.campo__control::placeholder {
  color: var(--color-texto-tenue);
}

.campo__error:not(:empty) {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto);
  padding-inline-start: var(--espacio-3);
  border-inline-start: 2px solid var(--color-acento);
}

/* --- Los beneficios ------------------------------------------------------ */
.acceso__beneficios {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-6);
  margin-block-start: var(--espacio-7);
}

@media (min-width: 700px) {
  .acceso__beneficios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .acceso__beneficios {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.acceso__beneficio {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-5);
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sutil);
}

/* El h3 de estas tarjetas NO corre en --titulo-sm como el resto de los h3 del
   sitio: son cuatro columnas en una fila, así que a 1440px cada título tiene
   unos 220px de caja y "Documentación siempre disponible" partía en TRES
   líneas. Un escalón más abajo entra en dos, y de paso el h2 de la sección
   deja de competir con cuatro títulos casi de su tamaño. */
.acceso__beneficio h3 {
  font-size: var(--texto-lg);
  line-height: var(--interlinea-titulo-corta);
}

.acceso__beneficio p {
  color: var(--color-texto-suave);
}

.acceso__beneficio-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--espacio-8);
  block-size: var(--espacio-8);
  border-radius: var(--radio-pill);
  background-color: var(--color-acento-tenue);
  color: var(--color-acento);
}

/* --- Los tres pasos ------------------------------------------------------ */
.acceso__pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-5);
  margin-block-start: var(--espacio-7);
  counter-reset: paso;
}

@media (min-width: 900px) {
  .acceso__pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.acceso__paso {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-4);
}

.acceso__paso p {
  color: var(--color-texto-suave);
}

.acceso__paso-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--espacio-7);
  block-size: var(--espacio-7);
  flex-shrink: 0;
  border-radius: var(--radio-pill);
  background-color: var(--color-acento);
  color: var(--color-texto-inverso);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}

/* --- Las dos pantallas de aviso ------------------------------------------ */
.acceso__aviso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-5);
}