/* «Entrar» y «Mis invitaciones» (fase 10): una hoja de papel sobre el mantel de la portada. Usa las fichas de
   portada/css (colores, letras, radios y sombras), enlazadas sin tocarlas; aquí solo lo propio de estas páginas, todo
   bajo .listachan. Contraste AA con las fichas medidas en portada/css/colores.css: la tinta sobre el papel y sobre el
   papel-2 (14,7:1), la tinta suave (7,8:1 y 7,1:1), el texto del botón sobre el acento (5,2:1) y la tinta del acento
   sobre el papel (5,9:1). Dianas de 44 px o más. */

.listachan .acceso { min-height: 100svh; display: grid; place-items: start center; padding: 32px var(--margen) 48px; }
.listachan .acceso-hoja {
  width: 100%; max-width: 560px; display: grid; gap: 20px;
  padding: 28px clamp(20px, 5vw, 36px) 32px;
  background: var(--papel); border-radius: var(--radio-carton); box-shadow: var(--sombra-mesa);
}
.listachan .acceso-hoja h1 { font-size: clamp(34px, 2vw + 26px, 44px); }
.listachan .acceso-marca {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--tinta); font: 400 22px/1 var(--letra-caja); text-decoration: none;
}
.listachan .acceso-entradilla { color: var(--tinta-suave); }

/* Los dos caminos de la puerta: cartulinas grandes, todo el bloque es la diana. */
.listachan .acceso-opciones { display: grid; gap: 14px; }
.listachan .acceso-opcion {
  display: grid; gap: 4px; min-height: 88px; padding: 16px 20px;
  border: 2px solid var(--tinta); border-radius: var(--radio-carton);
  background: var(--papel-2); color: var(--tinta); text-decoration: none;
  transition: transform 160ms var(--ease-out);
}
.listachan .acceso-opcion-titulo { font: 400 26px/1.1 var(--letra-caja); }
.listachan .acceso-opcion-ayuda { color: var(--tinta-suave); font-size: 16px; line-height: 1.4; }
.listachan .acceso-opcion:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .listachan .acceso-opcion:hover { background: var(--papel); }
}
@media (prefers-reduced-motion: reduce) {
  .listachan .acceso-opcion { transition: none; }
}

/* El formulario del correo. */
.listachan .acceso-form { display: grid; gap: 16px; }
.listachan .acceso-campo { display: grid; gap: 6px; }
.listachan .acceso-campo label { font-weight: 700; }
.listachan .acceso-campo input, .listachan .enlace-cuadro {
  width: 100%; min-height: 52px; padding: 10px 14px;
  border: 2px solid var(--tinta-suave); border-radius: var(--radio-papel);
  background: var(--papel); color: var(--tinta); font: 400 18px/1.3 var(--letra);
}
.listachan .enlace-cuadro { font: 500 15px/1.3 var(--letra-mono); }
.listachan .acceso .boton { justify-self: start; justify-content: center; padding-inline: 24px; }
.listachan .acceso .boton[aria-disabled="true"] { cursor: progress; }
/* En el móvil la píldora toma el ancho de la hoja, como las cartulinas de la puerta, y su texto no se parte: a 320 px
   la hoja deja unos 240 px y «Enviadme el enlace» en Coiny a 22 px mide 216, así que baja a 20 px con menos relleno. */
@media (max-width: 479px) {
  .listachan .acceso .boton { justify-self: stretch; padding-inline: 12px; font-size: 20px; white-space: nowrap; }
}
/* La línea del estado: vacía, sin relleno ni fondo, pero en la página (una región viva oculta no se anuncia). */
.listachan .acceso-estado { padding: 12px 14px; border-radius: var(--radio-papel); background: var(--papel-2); color: var(--tinta); }
.listachan .acceso-estado:empty { padding: 0; background: none; }
.listachan .acceso-estado[data-tono="error"] { border: 2px solid var(--acento-tinta); }

/* Los botones de papel (Copiar, Abrir, Salir, Probar con otro correo) y la vuelta atrás. */
.listachan .acceso-secundario {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  padding: 8px 18px; border: 2px solid var(--tinta); border-radius: 999px;
  background: var(--papel); color: var(--tinta); font: 700 16px/1.2 var(--letra); text-decoration: none; cursor: pointer;
}
.listachan .acceso-volver {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--acento-tinta); font-weight: 700;
}

/* La línea de privacidad bajo el formulario: texto suave, con su enlace de 44 px de alto. */
.listachan .acceso-legal { color: var(--tinta-suave); font-size: 15px; overflow-wrap: anywhere; }
.listachan .acceso-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--acento-tinta); font-weight: 700; }

/* «Mis invitaciones»: una tarjeta por invitación, con sus dos enlaces; cartulina como las de la puerta, para que el borde
   se vea sobre la hoja blanca. */
.listachan .acceso-tarjetas { display: grid; gap: 18px; }
.listachan .acceso-tarjeta {
  display: grid; gap: 10px; padding: 18px;
  border: 2px solid var(--tinta); border-radius: var(--radio-carton); background: var(--papel-2);
}
.listachan .acceso-tarjeta h2 { font-size: clamp(24px, 1vw + 20px, 30px); }
.listachan .acceso-dato { color: var(--tinta-suave); }
.listachan .acceso-aviso { color: var(--tinta); font-weight: 700; }
.listachan .acceso-enlace { display: grid; gap: 6px; }
.listachan .acceso-enlace h3 { font-size: 16px; }
.listachan .acceso-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.listachan .copiar-estado { flex-basis: 100%; color: var(--tinta-suave); font-size: 15px; }
.listachan .acceso-salir { justify-self: start; }