/* =============================================================================
   LA PUERTA · la pantalla de ingreso, igual en todas las apps de Plus

   Todas las apps de Plus se entran por la misma puerta: a la izquierda la marca
   y qué es esto, a la derecha la tarjeta donde se pone la clave. Cambia el
   contenido —el título, los tres puntos, si pide PIN o mail— pero no la forma.

   Por qué importa que sean iguales: son CINCO direcciones distintas
   (backoffice, tablero, comanda, rider, secretaria) y la misma persona entra a
   más de una. Que cada puerta se viera diferente hacía dudar de si el link era
   el correcto, y un cliente que duda de un link no lo abre: escribe para
   preguntar.

   Y por eso también, en todas, la izquierda DICE QUÉ ES esto. El que llega a
   comanda.plus-agencia.com puede estar llegando por primera vez, desde un
   WhatsApp reenviado.

   Las clases son las mismas que ya usaba `tablero.html` (.acceso, .acceso-left,
   .gate-card…): este archivo es esa pantalla sacada afuera para que la usen
   también comandas, rider y secretaria. El tablero y el backoffice conservan su
   copia adentro por ahora — funcionan, son la puerta de los clientes y del
   equipo, y cambiarlas de lugar es riesgo sin nada nuevo a cambio; el día que
   se toquen, las clases ya coinciden.

   Cada app define sus colores en :root (--navy, --brand, --bg, --text,
   --text-2, --text-3, --border) antes de cargar esto.
   ============================================================================= */

.acceso{
  min-height:100vh; min-height:100dvh;
  display:grid; grid-template-columns:1.05fr .95fr;
  background:var(--navy);
}

/* ---- La izquierda: la marca y qué es esto ---- */
.acceso-left{
  position:relative; overflow:hidden; color:#fff;
  padding:48px; display:flex; flex-direction:column; justify-content:center; gap:26px;
}
/* Los dos resplandores del fondo. Es lo que hace que se reconozca como Plus de
   lejos, antes de leer una palabra. */
.acceso-left::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 10% 6%, rgba(255,145,77,.30) 0%, transparent 48%),
    radial-gradient(circle at 94% 98%, rgba(255,122,37,.20) 0%, transparent 52%);
}
.acceso-brand{
  position:relative; z-index:1; display:flex; align-items:center; gap:10px;
  font-size:19px; font-weight:800; letter-spacing:-.02em;
}
.acceso-mark{
  width:38px; height:38px; border-radius:11px; background:var(--brand); color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:23px; font-weight:800; line-height:1;
}
.acceso-brand i{font-style:normal; color:var(--brand)}
.acceso-hero{position:relative; z-index:1}
.acceso-hero h1{font-size:40px; line-height:1.08; letter-spacing:-1.4px; font-weight:800; margin:0 0 14px}
.acceso-hero h1 span{color:var(--brand)}
.acceso-hero p{font-size:15.5px; line-height:1.65; opacity:.78; max-width:430px; margin:0}
.acceso-puntos{
  position:relative; z-index:1; display:flex; flex-direction:column; gap:10px;
  margin:0; padding:0; list-style:none;
}
.acceso-puntos li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; opacity:.9; line-height:1.45}
.acceso-puntos li b{color:var(--brand); flex:none}

/* ---- La derecha: la tarjeta donde se entra ---- */
.acceso-right{
  display:flex; align-items:center; justify-content:center;
  padding:32px; background:var(--bg);
}
.gate-card{
  background:#fff; border-radius:20px; box-shadow:0 18px 44px rgba(31,33,61,.16);
  padding:32px; max-width:380px; width:100%; text-align:center;
}
.gate-card .logo{
  width:64px; height:64px; border-radius:16px; margin:0 auto 14px;
  background:rgba(255,122,37,.12); display:flex; align-items:center; justify-content:center;
  font-size:30px; object-fit:cover;
}
.gate-card h1{font-size:20px; margin:0 0 4px; color:var(--text)}
.gate-card p{color:var(--text-2); font-size:13.5px; margin:0 0 20px; line-height:1.55}
.gate-card input{
  width:100%; font-size:16px; padding:12px 13px; border:1px solid var(--border);
  border-radius:11px; margin-bottom:10px; font-family:inherit; color:var(--text); background:#fff;
}
.gate-card input:focus{outline:none; border-color:var(--brand)}
/* El PIN se escribe grande y separado: se dicta por teléfono y se tipea con una
   mano, muchas veces de parado. */
.gate-card input.pin{text-align:center; font-size:24px; letter-spacing:.3em; font-weight:700}
.gate-card .btn{
  appearance:none; border:none; background:var(--brand); color:#fff; font-family:inherit;
  font-weight:800; font-size:15px; padding:13px 16px; border-radius:11px; cursor:pointer; width:100%;
}
.gate-card .btn:disabled{opacity:.55; cursor:default}
.gate-err{
  background:#fef2f2; color:#b91c1c; border-radius:11px; padding:11px; font-size:13.5px;
  font-weight:600; line-height:1.5; margin-bottom:14px; text-align:left;
}
/* "Entrar de la otra forma". Las apps del local y del rider tienen dos puertas
   —link + PIN, o mail + contraseña— y se muestra una sola: las dos juntas es
   una pantalla que nadie lee. Esto es el pasaje de una a la otra. */
.gate-otra{
  appearance:none; border:0; background:none; color:var(--text-2); font-family:inherit;
  font-size:12.5px; font-weight:700; cursor:pointer; padding:10px 4px 0; width:100%;
  text-decoration:underline; text-underline-offset:3px;
}
.gate-otra:hover{color:var(--brand)}
.gate-pie{font-size:11.5px; color:var(--text-3); margin-top:14px; line-height:1.6}
.gate-pie a{color:var(--brand); font-weight:700; text-decoration:none; border-bottom:1px solid rgba(255,122,37,.4)}

/* ---- En el teléfono ----
   El que llega acá viene a entrar, no a leer: la presentación se comprime para
   que la tarjeta entre en la primera pantalla. Los tres puntos se ocultan — el
   párrafo de arriba ya dice lo mismo y son los ~200px que empujaban el
   formulario fuera de la vista. */
@media(max-width:880px){
  .acceso{grid-template-columns:1fr}
  .acceso-left{padding:24px 22px 20px; gap:13px}
  .acceso-brand{font-size:17px}
  .acceso-mark{width:33px; height:33px; border-radius:10px; font-size:20px}
  .acceso-hero h1{font-size:25px; letter-spacing:-.8px; margin-bottom:9px}
  .acceso-hero p{font-size:13.5px; line-height:1.5}
  .acceso-puntos{display:none}
  .acceso-right{padding:18px 18px 34px}
  .gate-card{padding:24px 22px}
  .gate-card .logo{width:52px; height:52px; font-size:25px; margin-bottom:10px}
}