/*
 * Lista de espera del Atlas — estilos compartidos.
 *
 * Se usa en la home (fondo noche), en el muro de acceso y al pie de las fichas.
 * Toma el color del contexto en lugar de imponerlo: las variables tienen
 * fallback, asi que funciona en tema claro y oscuro sin duplicar reglas.
 *
 * Para ajustarlo en un sitio concreto, redefinir estas variables en su
 * contenedor:
 *   --le-tinta   texto principal
 *   --le-suave   texto secundario
 *   --le-acento  color de foco y del boton
 *   --le-linea   bordes
 *   --le-fondo   fondo del campo
 */
.lista-espera {
  --le-tinta: var(--paper, currentColor);
  --le-suave: var(--muted, #9c9e90);
  --le-acento: var(--gold, #cfb487);
  --le-linea: var(--line, #e7ddbb24);
  --le-fondo: transparent;

  display: grid;
  gap: 14px;
  max-width: 460px;
  color: var(--le-tinta);
  font-family: var(--sans, inherit);
}

.lista-espera[data-hecho="si"] .lista-espera-titulo { color: var(--le-acento); }

.lista-espera-titulo {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
}

.lista-espera-nota {
  font-size: 13px;
  line-height: 1.65;
  color: var(--le-suave);
  margin: 0;
}

.lista-espera-campos {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.lista-espera input[type="email"] {
  flex: 1 1 210px;
  min-width: 0;
  padding: 13px 15px;
  font: inherit;
  font-size: 14px;
  color: var(--le-tinta);
  background: var(--le-fondo);
  border: 1px solid var(--le-linea);
  border-radius: 2px;
  transition: border-color .2s ease;
}

.lista-espera input[type="email"]::placeholder { color: var(--le-suave); opacity: .75; }
.lista-espera input[type="email"]:hover { border-color: var(--le-acento); }
.lista-espera input[type="email"]:focus-visible {
  outline: 2px solid var(--le-acento);
  outline-offset: 2px;
  border-color: transparent;
}

.lista-espera button[type="submit"] {
  flex: 0 0 auto;
  padding: 13px 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--le-acento);
  background: transparent;
  border: 1px solid var(--le-acento);
  border-radius: 2px;
  transition: background .2s ease, color .2s ease;
}

.lista-espera button[type="submit"]:hover:not(:disabled) {
  background: var(--le-acento);
  color: var(--night, #0b0e0c);
}

.lista-espera[data-enviando="si"] button[type="submit"] { opacity: .55; cursor: progress; }
.lista-espera :disabled { cursor: not-allowed; }

.lista-espera-estado {
  min-height: 1.2em;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--le-suave);
}

.lista-espera-estado[data-tipo="ok"] { color: var(--le-acento); }
.lista-espera-estado[data-tipo="error"] { color: #e0a08a; }

/* Pregunta de perfil, mostrada solo tras guardar el email. */
.lista-espera-gracias { display: grid; gap: 11px; }

.lista-espera-perfiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lista-espera-perfiles button {
  padding: 9px 15px;
  font-size: 12px;
  color: var(--le-tinta);
  background: transparent;
  border: 1px solid var(--le-linea);
  border-radius: 999px;
  transition: border-color .2s ease, color .2s ease;
}

.lista-espera-perfiles button:hover {
  border-color: var(--le-acento);
  color: var(--le-acento);
}

.lista-espera-cierre {
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-size: 17px;
  color: var(--le-acento);
}

.lista-espera [hidden] { display: none !important; }

@media (max-width: 760px) {
  .lista-espera { max-width: 100%; }
  .lista-espera-campos { flex-direction: column; }
  .lista-espera button[type="submit"] { width: 100%; }
}

/* Etiqueta solo para lectores de pantalla. Vive aqui para que el componente
   sea autonomo y no dependa de la hoja de cada pagina. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Muro de acceso del Atlas: encaja bajo el bloque de precio, separado por una
   linea, para que se lea como una tercera via y no como parte del formulario
   de login. */
.listaEsperaMuro {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--le-linea);
  max-width: 100%;
  gap: 11px;
}

.listaEsperaMuro .lista-espera-nota { font-size: 12.5px; }
.listaEsperaMuro input[type="email"] { padding: 11px 13px; font-size: 13px; }
.listaEsperaMuro button[type="submit"] { padding: 11px 18px; font-size: 10px; }