/* Pantalla de acceso de Celutimba. MOBILE-FIRST. Misma paleta que la portada:
   azul noche de fondo, azul electrico y naranja del logo del cliente.

   Vive en su propia pagina y no adentro del tragamonedas a proposito: la cuenta
   sirve para los tres juegos, asi que pedirla desde la ruleta y mandar al slot
   era mandar al jugador a un juego que no eligio. Al terminar vuelve a donde
   estaba (parametro `volver`), y si no venia de ningun lado, a la portada. */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('../fonts/oswald.woff2') format('woff2');
}

:root {
  --fondo:          #081226;
  --panel:          #0d1b38;
  --borde:          #1c3564;
  --azul:           #2f9df0;
  --azul-brillo:    #6cc4ff;
  --naranja:        #f7941d;
  --naranja-brillo: #ffb54d;
  --naranja-hondo:  #b86a10;
  --texto:          #eaf3ff;
  --texto-suave:    #9fb4d8;
  --titulo: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --transicion: 180ms cubic-bezier(.2, .7, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Mismos resplandores que la portada, para que las dos pantallas se sientan el
   mismo sitio y no dos productos distintos. */
.luces {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(420px 320px at 85% 8%,  rgba(247, 148, 29, .14), transparent 70%),
    radial-gradient(500px 380px at 8% 30%,  rgba(47, 157, 240, .16), transparent 70%),
    radial-gradient(380px 300px at 12% 95%, rgba(247, 148, 29, .10), transparent 70%);
}

/* --- Barra ---------------------------------------------------------------- */

.barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(8, 18, 38, .92);
  border-bottom: 1px solid rgba(47, 157, 240, .25);
}

.barra__volver {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--texto-suave);
  text-decoration: none;
}
.barra__volver:hover { color: var(--texto); }

.barra__nombre {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: .5px;
  color: var(--azul-brillo);
}
.barra__nombre em { font-style: normal; color: var(--naranja); }

/* --- Caja ----------------------------------------------------------------- */

.acceso {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 26px 16px 34px;
}

.acceso__caja {
  width: min(400px, 100%);
  padding: 28px 24px 24px;
  text-align: center;
  background: linear-gradient(180deg, var(--panel) 0%, #0a1730 100%);
  border: 1px solid var(--borde);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  animation: entrar 420ms cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes entrar {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.acceso__logo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(47, 157, 240, .35);
}

.acceso__titulo {
  margin: 0 0 8px;
  font-family: var(--titulo);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: .5px;
}

.acceso__bajada {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto-suave);
}

/* El bono de bienvenida se anuncia en naranja: es el motivo por el que alguien
   completa un formulario en vez de cerrar la pestana. */
.acceso__bajada strong { color: var(--naranja-brillo); font-weight: 700; }

/* --- Pestañas ------------------------------------------------------------- */

/* Dos pestanas y no dos pantallas: la mitad de la gente que entra por primera
   vez busca donde registrarse, y tenerlo a la vista evita el paso perdido de
   "no tengo cuenta, donde hago una". */
.acceso__pestanas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--borde);
  border-radius: 12px;
}

.acceso__pestana {
  padding: 10px 8px;
  font-family: var(--titulo);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--texto-suave);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: color var(--transicion), background var(--transicion);
}

.acceso__pestana:hover { color: var(--texto); }

.acceso__pestana.activa {
  color: #06101f;
  background: linear-gradient(180deg, var(--azul-brillo), var(--azul));
}

/* --- Campos --------------------------------------------------------------- */

.campo { display: block; text-align: left; margin-bottom: 15px; }

.campo__etiqueta {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.campo__input {
  width: 100%;
  padding: 13px 15px;
  font-size: 16px; /* 16px evita que iOS haga zoom al enfocar */
  font-family: inherit;
  color: var(--texto);
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--borde);
  border-radius: 11px;
  outline: none;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo__input:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(47, 157, 240, .18);
}

select.campo__input { color-scheme: dark; }

.campo__ayuda {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* --- Botón ---------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 22px;
  font-family: var(--titulo);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);
}

.boton--naranja {
  color: #2a1c05;
  background: linear-gradient(180deg, var(--naranja-brillo), var(--naranja));
  box-shadow: 0 5px 0 var(--naranja-hondo), 0 12px 26px rgba(0, 0, 0, .42);
}

.boton--naranja:hover:not(:disabled) { filter: brightness(1.06); }

.boton--naranja:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--naranja-hondo), 0 6px 14px rgba(0, 0, 0, .38);
}

.boton:disabled { opacity: .5; cursor: not-allowed; }

/* --- Error ---------------------------------------------------------------- */

.acceso__error {
  margin: 0 0 14px;
  padding: 10px 13px;
  font-size: 13.5px;
  text-align: left;
  color: #ffbdc8;
  background: rgba(212, 19, 58, .14);
  border: 1px solid rgba(212, 19, 58, .4);
  border-radius: 10px;
  animation: temblor 380ms ease;
}

@keyframes temblor {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* Nombre de usuario valido que se ofrece cuando el que escribieron no sirve.
   Tocarlo es mas rapido que corregir a mano, y el ejemplo ensena la regla
   mejor que cualquier explicacion. */
.acceso__sugerencia { margin-top: 8px; font-size: 13px; }

.acceso__sugerenciaBtn {
  font: inherit;
  font-weight: 800;
  color: var(--naranja-brillo);
  background: none;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.acceso__sugerenciaBtn:hover { color: #fff; }

.acceso__pie {
  font-size: 12px;
  color: var(--texto-suave);
  opacity: .8;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}