/* ══════════════════════════════════════════════════════════════════════════
   HOUZAPP v2 · PAGINAS DE ENTRADA
   Acceso, registro y unirme a una propiedad horizontal.
   ══════════════════════════════════════════════════════════════════════════ */

.acceso {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 100svh;
}

/* ── Panel de marca ─────────────────────────────────────────────────────── */

.acceso__marca {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--e-10);
  background: linear-gradient(155deg, var(--grafito-900) 0%, var(--grafito-800) 45%, var(--azul-900) 100%);
  color: #fff;
  isolation: isolate;
}

.acceso__marca::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/patron-nodos.svg");
  background-size: 230px 230px;
  opacity: .15;
  z-index: -1;
  mask-image: linear-gradient(to bottom, #000 10%, transparent 92%);
}

.acceso__marca .marca__texto { color: #fff; }
.acceso__marca .marca__texto span { color: var(--azul-300); }

.acceso__mensaje h2 {
  color: #fff;
  font-size: var(--t-2xl);
  max-width: 18ch;
  margin-bottom: var(--e-4);
}

.acceso__mensaje p {
  color: rgba(255, 255, 255, .68);
  font-size: var(--t-md);
  max-width: 36ch;
}

.acceso__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-8);
  list-style: none;
  padding: 0;
}

.acceso__lista li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-base);
  color: rgba(255, 255, 255, .82);
  max-width: none;
}

.acceso__lista svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--azul-300);
}

.acceso__pie {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .42);
}

/* ── Panel del formulario ───────────────────────────────────────────────── */

.acceso__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--e-10) var(--e-8);
  background: var(--fondo);
}

.acceso__forma {
  width: 100%;
  max-width: 27rem;
  margin-inline: auto;
}

.acceso__titulo {
  font-size: var(--t-2xl);
  margin-bottom: var(--e-2);
}

.acceso__bajada {
  color: var(--texto-suave);
  margin-bottom: var(--e-8);
}

/* .acceso__campos y .acceso__fila se definen en componentes.css: tambien las
   usan los modales de los paneles, que no cargan este archivo. */

.acceso__acciones {
  margin-top: var(--e-8);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.acceso__nota {
  text-align: center;
  font-size: var(--t-base);
  color: var(--texto-suave);
}

.acceso__separador {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin: var(--e-6) 0;
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

.acceso__separador::before,
.acceso__separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borde);
}

/* Logo visible solo cuando el panel de marca se oculta en móvil. */
.acceso__marca-movil {
  display: none;
  justify-content: center;
  margin-bottom: var(--e-8);
}

@media (max-width: 900px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso__marca { display: none; }
  .acceso__marca-movil { display: flex; }
  .acceso__panel { padding: var(--e-8) var(--e-5); }
}



/* ══════════════════════════════════════════════════════════════════════════
   ASISTENTE DE REGISTRO
   ══════════════════════════════════════════════════════════════════════════ */

.pasos-barra {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-8);
  list-style: none;
  padding: 0;
}

.pasos-barra li {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  max-width: none;
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  color: var(--texto-tenue);
}

.pasos-barra li::before {
  content: "";
  height: 4px;
  border-radius: var(--radio-pilula);
  background: var(--borde);
  transition: background var(--transicion);
}

.pasos-barra li[data-estado="activo"] { color: var(--marca-fuerte); }
.pasos-barra li[data-estado="activo"]::before { background: var(--marca); }

.pasos-barra li[data-estado="hecho"] { color: var(--exito-fuerte); }
.pasos-barra li[data-estado="hecho"]::before { background: var(--exito); }

.paso-forma[hidden] { display: none; }

/* ── Código de verificación ─────────────────────────────────────────────── */

.codigo-entrada {
  width: 100%;
  padding: var(--e-4);
  border: 2px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  font-family: var(--fuente-titulo);
  font-size: var(--t-3xl);
  font-weight: var(--peso-negro);
  text-align: center;
  letter-spacing: 0.5em;
  text-indent: 0.5em;   /* compensa el espaciado del último dígito */
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.codigo-entrada:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: var(--anillo-foco);
}

.codigo-ayuda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-3);
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

.codigo-ayuda button {
  color: var(--marca-fuerte);
  font-weight: var(--peso-fuerte);
  font-size: var(--t-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.codigo-ayuda button:disabled {
  color: var(--texto-tenue);
  text-decoration: none;
}

/* ── Resumen de precio dentro del asistente ─────────────────────────────── */

.resumen-precio {
  padding: var(--e-4) var(--e-5);
  border-radius: var(--radio);
  background: var(--marca-suave);
  border: 1px solid var(--borde-marca);
  font-size: var(--t-base);
}

.resumen-precio strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: var(--t-xl);
  color: var(--marca-fuerte);
  line-height: 1.2;
}

.resumen-precio span { color: var(--texto-suave); }

/* La casilla de términos vivía aquí, pero acceso.css solo lo cargan las
   pantallas de entrada. Los formularios del panel también la usan, así que
   se movió a componentes.css. */

/* text-transform tambien afecta al placeholder: sin esto, "Opcional" se leia
   "OPCIONAL" y parecia un valor escrito, no una pista. */
.entrada::placeholder,
.codigo-entrada::placeholder {
  text-transform: none;
  letter-spacing: normal;
}


/* ══════════════════════════════════════════════════════════════════════════
   PANTALLA FINAL: la propiedad horizontal quedó creada
   ══════════════════════════════════════════════════════════════════════════ */

.listo {
  text-align: center;
}

.listo__marca {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--e-6);
  border-radius: var(--radio-arco);
  background: var(--exito-suave);
  color: var(--exito-fuerte);
}

.listo__marca svg { width: 34px; height: 34px; }

.listo__enlace {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: var(--e-6) 0 var(--e-2);
  padding: var(--e-3) var(--e-4);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  font-family: var(--fuente-mono);
  font-size: var(--t-sm);
  overflow-x: auto;
  white-space: nowrap;
}

.listo__enlace code { flex: 1; text-align: left; color: var(--texto); }


/* ══════════════════════════════════════════════════════════════════════════
   GIRADOR  (botones en estado de carga)
   ══════════════════════════════════════════════════════════════════════════ */

.girador {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: var(--e-2);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: girar .6s linear infinite;
}

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

.aviso-flotante { transition: opacity .2s ease; }