/* BRIDGE · la pantalla de entrar. Vive sola: no carga nada de la aplicación,
   porque sin haber entrado no se sirve ni un archivo de dentro.
   Mismas variables que el resto (puente.css): un solo sitio para los colores. */

.cuerpo-entrada{
  min-height:100dvh;
  margin:0;
  background:
    radial-gradient(1100px 620px at 50% -10%, var(--accent-soft) 0%, transparent 62%),
    var(--bg);
}

/* T-0101 · Juan, 25-09: «La pantalla de loggin de puente desde el iPhone se
   queda abajo escondida tras el teclado.» La página no se desplaza (puente.css
   la cierra para la aplicación) y el iPhone no encoge la pantalla al sacar el
   teclado: la tarjeta seguía centrada en el alto entero, debajo de él.
   Ahora la entrada ocupa SOLO lo que se ve (`--alto-visible` y `--arriba-visible`
   los pone entrada.js con lo que mide el navegador); la tarjeta se centra ahí y,
   si no cabe, esa caja se desliza por dentro sin cortar nada por arriba. Sin esas
   medidas, el alto entero, como antes. */
.entrada{
  position:fixed; left:0; right:0;
  top:var(--arriba-visible, 0px);
  height:var(--alto-visible, 100dvh);
  overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; align-items:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
}
/* Con el teclado fuera, el borde de abajo lo pone él: sobra el margen del iPhone. */
.entrada.con-teclado{ padding-top:12px; padding-bottom:12px; }

.entrada .tarjeta{
  margin:auto 0; flex:none;
  width:100%; max-width:380px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:calc(var(--radio) * 1.6);
  box-shadow:var(--sombra);
  padding:28px 24px 22px;
  text-align:center;
}

.entrada .marca{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font:600 20px/1.2 var(--tipo); letter-spacing:.04em; color:var(--ink);
}
.entrada .punto{
  width:13px; height:13px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
  flex:none;
}
.entrada .lema{
  margin:6px 0 22px; color:var(--ink-soft);
  font:400 13px/1.4 var(--tipo);
}

.entrada .campo{ text-align:left; margin:0 0 14px; }
.entrada .campo label{
  display:block; margin:0 0 6px;
  font:500 13px/1.3 var(--tipo); color:var(--ink-muted);
}
.entrada input{
  width:100%; padding:12px 14px;
  font:500 17px/1.3 var(--mono); letter-spacing:.18em;
  color:var(--ink); background:var(--surface-3);
  border:1px solid var(--line-fuerte); border-radius:var(--radio-chico);
  -webkit-appearance:none; appearance:none;
}
.entrada input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
  background:var(--surface);
}

.entrada .btn.ancho{ width:100%; justify-content:center; margin-top:4px; padding:12px 16px; }
.entrada .btn[disabled]{ opacity:.55; pointer-events:none; }

.entrada .recado{
  margin:0 0 12px; padding:10px 12px; text-align:left;
  border-radius:var(--radio-chico);
  background:var(--mal-soft); border:1px solid var(--mal);
  color:var(--ink); font:400 13px/1.45 var(--tipo);
}
.entrada .recado.bien{ background:var(--ok-soft); border-color:var(--ok); }
/* Cuando no hay nada que decir, no hay recuadro. (puente.css da display a todo
   lo que lleva clase, y eso le ganaba al «hidden» del propio navegador.) */
.entrada .recado[hidden], .entrada .btn[hidden]{ display:none; }
.entrada .recado.aviso{ background:var(--avi-soft); border-color:var(--avi); }

.entrada .pie{
  margin:18px 0 0; color:var(--ink-soft);
  font:400 12px/1.5 var(--tipo);
}
.entrada .reglas{
  margin:-6px 0 14px; text-align:left;
  color:var(--ink-soft); font:400 12px/1.5 var(--tipo);
}

/* En el teléfono ocupa lo suyo y nada se sale ni obliga a mover la pantalla. */
@media (max-width:420px){
  .entrada .tarjeta{ padding:24px 18px 20px; border-radius:var(--radio); }
}

/* El logo de BRIDGE también al entrar: la primera pantalla tiene cara (22-09). */
.marca .logo{width:22px; height:22px; border-radius:6px; display:block}