/* Entrar, crear cuenta, enlace mágico y verificación */

.pagina-cuenta { display: flex; flex-direction: column; min-height: 100dvh; }
.cuenta-cabecera { display: flex; justify-content: space-between; align-items: center; padding: 14px clamp(16px, 4vw, 32px); }
.cuenta-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 16px 40px; }
.cuenta-caja {
  width: min(100%, 440px);
  padding: clamp(24px, 6vw, 40px);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-3);
  animation: entrar-caja 500ms var(--ease-out) both;
}
@keyframes entrar-caja { from { opacity: 0; transform: translateY(12px) scale(0.99); } }
.cuenta-titulo { font-size: clamp(1.7rem, 5vw, 2rem); letter-spacing: -0.03em; }
.cuenta-sub { margin-top: 6px; color: var(--texto-2); text-wrap: balance; }
.cuenta-legal { margin-top: var(--e-5); font-size: 0.9rem; color: var(--texto-3); text-align: center; }

/* Pestañas segmentadas con marcador que se desliza */
.segmentos {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  margin: var(--e-5) 0 var(--e-5); padding: 4px;
  border-radius: var(--r-m); background: var(--primario-suave);
}
.segmentos button {
  position: relative; z-index: 1;
  min-height: 42px; border: 0; background: none; border-radius: 11px;
  font-weight: 600; color: var(--texto-2);
  transition: color 200ms ease;
}
.segmentos button[aria-selected='true'] { color: var(--texto); }
.segmentos-marcador {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 11px; background: var(--solido); box-shadow: var(--sombra-1);
  transition: transform 260ms var(--ease-out);
}
.segmentos[data-activa='crear'] .segmentos-marcador { transform: translateX(100%); }
.segmentos.sin-pestanas { display: none; }

.formulario { display: grid; gap: var(--e-4); }
.campo-cabeza { display: flex; justify-content: space-between; align-items: baseline; }
.campo-cabeza label { font-weight: 600; font-size: 0.93rem; }
.enlace-boton { border: 0; background: none; padding: 4px 0; color: var(--primario-texto); font-weight: 600; font-size: 0.88rem; }
.enlace-boton:hover { text-decoration: underline; }
.error-formulario {
  padding: 10px 14px; border-radius: var(--r-s);
  background: var(--peligro-suave); color: var(--peligro);
  font-size: 0.93rem; font-weight: 500;
}

/* Fuerza de la contraseña: 4 tramos */
.fuerza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.fuerza i { height: 4px; border-radius: 4px; background: var(--borde-fuerte); transition: background-color 200ms ease; }
.fuerza[data-nivel='1'] i:nth-child(-n + 1) { background: var(--peligro); }
.fuerza[data-nivel='2'] i:nth-child(-n + 2) { background: var(--acento); }
.fuerza[data-nivel='3'] i:nth-child(-n + 3) { background: var(--primario); }
.fuerza[data-nivel='4'] i { background: var(--exito); }

.separador { display: flex; align-items: center; gap: var(--e-3); margin: var(--e-5) 0; color: var(--texto-3); font-size: 0.88rem; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--borde-fuerte); }
.telegram-zona { display: grid; gap: var(--e-3); justify-items: center; text-align: center; }
.telegram-widget { min-height: 44px; display: flex; justify-content: center; }
.telegram-zona .ayuda { font-size: 0.82rem; color: var(--texto-3); }

.cuenta-icono-grande {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--e-5);
  border-radius: 20px; background: var(--primario-suave); color: var(--primario-texto);
}
.cuenta-icono-grande .icono { width: 30px; height: 30px; }
.cuenta-icono-grande.ok { background: var(--exito-suave); color: var(--exito); }
.cuenta-icono-grande.mal { background: var(--peligro-suave); color: var(--peligro); }
.consejos { margin: var(--e-5) 0; padding-left: 1.2em; color: var(--texto-2); font-size: 0.94rem; display: grid; gap: 4px; }
[data-vista='enviado'] .boton, .cuenta-caja .acciones-final { margin-top: var(--e-4); }
[data-vista] { animation: aparecer-vista 280ms var(--ease-out); }
@keyframes aparecer-vista { from { opacity: 0; transform: translateY(6px); } }
[data-vista]:focus { outline: none; }

/* ───── Estilo «Cercana» ───── */
.cuenta-cabecera { width: min(100% - 2 * var(--e-5), var(--ancho)); margin-inline: auto; padding: 14px 0; }
@media (max-width: 480px) { .cuenta-cabecera { width: calc(100% - 2 * var(--e-4)); } }
.cuenta-caja { min-width: 0; box-shadow: 0 5px 0 var(--borde-fuerte), 0 30px 60px -30px rgba(10, 20, 50, 0.35); border-color: var(--borde-fuerte); border-radius: 30px; }
.cuenta-caja .formulario { grid-template-columns: minmax(0, 1fr); }
.cuenta-caja .boton { white-space: normal; text-align: center; }
.cuenta-titulo { font-weight: 800; letter-spacing: -0.025em; }
.cuenta-caja-icono { width: 58px; height: auto; margin-bottom: var(--e-4); }
.segmentos { background: var(--fondo-2); border-radius: 18px; padding: 5px; }
.segmentos button { font-family: var(--f-titulo); font-weight: 700; }
.segmentos-marcador { top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 13px; box-shadow: 0 3px 0 var(--borde-fuerte); }
.separador::before, .separador::after { height: 2px; background: var(--borde); }
/* 404 */
.perdido { text-align: center; }
.perdido .cuenta-sub { margin-inline: auto; max-width: 34ch; }
.perdido-escena { position: relative; display: grid; place-items: center; width: 140px; height: 140px; margin: 0 auto var(--e-4); border-radius: 50%; background: var(--primario-suave); }
.perdido-escena .caja-personaje { width: 84px; height: auto; }
.perdido-escena span { position: absolute; right: 8px; top: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--acento); color: #fff; font-family: var(--f-titulo); font-weight: 800; font-size: 1.4rem; box-shadow: 0 3px 0 #c75415; }
.perdido .seguir { margin: var(--e-5) auto 0; text-align: left; }
.perdido .seguir-caja .boton { min-height: 50px; }
.perdido-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: var(--e-5); font-family: var(--f-titulo); font-weight: 700; }
.perdido-enlaces a { text-decoration: none; }
.perdido { width: min(100%, 500px); }
.perdido .seguir-caja { flex-wrap: wrap; padding: 8px; }
.perdido .seguir-lupa { margin-left: 8px; }
.perdido .seguir-entrada { flex: 1 1 200px; }
.perdido .seguir-caja .boton { flex: 1 1 100%; }

.personaje-pequeno { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: var(--e-4); border-radius: 50%; background: var(--primario-suave); }
.personaje-pequeno .caja-personaje { width: 50px; height: auto; }
.perdido .cuenta-sub { max-width: 40ch; }
.perdido-pregunta { margin-top: var(--e-5); font-family: var(--f-titulo); font-weight: 700; }
.perdido .seguir { margin-top: var(--e-3); }
.perdido-enlaces { gap: 6px 0; }
.perdido-enlaces a + a::before { content: '·'; margin: 0 12px; color: var(--texto-3); }
/* El widget de Telegram es un iframe: algunos navegadores pintan de negro su fondo fuera de las esquinas redondeadas.
   Se recorta con el mismo radio que el botón (data-radius = 16). */
.telegram-widget iframe { border-radius: 16px; overflow: hidden; }