/* ════════════════════════════════════════════════════════════════════
   Pantalla de entrada.

   La animación cuenta algo, no adorna: el globo del logo gira una vuelta
   —como el planeta— y las piezas entran en el orden en que se leen. Nada
   se mueve después de que la pantalla se asentó; un login que sigue
   moviéndose distrae de lo único que hay que hacer ahí.

   Todo respeta `prefers-reduced-motion`.
   ════════════════════════════════════════════════════════════════════ */

.entrada {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--fondo);
  overflow: hidden;
}
body.dentro .entrada {
  animation: salir .5s cubic-bezier(.4, 0, .2, 1) forwards;
  pointer-events: none;
}
@keyframes salir {
  to { opacity: 0; transform: scale(1.03); visibility: hidden; }
}

/* Fondo: dos halos muy suaves que respiran. Es lo único que sigue vivo,
   y a 18 s por ciclo se percibe como profundidad, no como movimiento. */
.entrada::before,
.entrada::after {
  content: "";
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
}
.entrada::before {
  background: radial-gradient(circle, rgba(27, 92, 99, .16), transparent 70%);
  top: -14vmax; left: -10vmax;
  animation: respirar 18s ease-in-out infinite;
}
.entrada::after {
  background: radial-gradient(circle, rgba(11, 122, 61, .13), transparent 70%);
  bottom: -16vmax; right: -12vmax;
  animation: respirar 22s ease-in-out infinite reverse;
}
@keyframes respirar {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(3vmax, 2vmax) scale(1.08); }
}

.tarjeta-entrada {
  position: relative;
  width: min(400px, 100%);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 38px 32px 30px;
  box-shadow: 0 22px 60px rgba(22, 25, 26, .10), 0 2px 6px rgba(22, 25, 26, .05);
  text-align: center;
}
:root[data-theme="dark"] .tarjeta-entrada,
:root:not([data-theme="light"]) .tarjeta-entrada {
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
}

/* Cada pieza entra un poco después que la anterior: el ojo sigue el orden
   en que hay que leerlas. */
.aparece { animation: subir .55s cubic-bezier(.2, .8, .25, 1) backwards; }
@keyframes subir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.d1 { animation-delay: .05s } .d2 { animation-delay: .14s }
.d3 { animation-delay: .23s } .d4 { animation-delay: .32s }
.d5 { animation-delay: .41s } .d6 { animation-delay: .50s }

/* El globo da UNA vuelta al entrar. Una sola: si girara siempre, sería un
   spinner y la pantalla parecería estar cargando algo. */
.marca-entrada { margin-bottom: 22px; }
.marca-entrada img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: var(--logo-filtro);
  animation: girar 1.1s cubic-bezier(.34, 1.2, .38, 1) .1s backwards;
}
@keyframes girar {
  from { opacity: 0; transform: rotate(-190deg) scale(.7); }
  to   { opacity: 1; transform: none; }
}
.marca-entrada b {
  display: block;
  margin-top: 12px;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: .04em;
}
.marca-entrada small {
  display: block;
  margin-top: 3px;
  font-size: 9.5px;
  letter-spacing: .22em;
  color: var(--texto-3);
  font-weight: 600;
}

.entrada h1 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.entrada .bajada {
  font-size: 12.5px;
  color: var(--texto-2);
  margin: 0 0 22px;
}

/* Lista de personas: se entra tocando la cara, sin escribir nada. Son
   cinco personas conocidas en un negocio chico — pedir usuario y clave
   sería fricción sin seguridad real, porque la seguridad de verdad está
   en el servidor. */
.gente { display: flex; flex-direction: column; gap: 8px; }
.persona-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--borde);
  border-radius: 13px;
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  transition: transform .16s cubic-bezier(.2, .8, .25, 1),
              border-color .16s ease, background .16s ease;
}
.persona-btn:hover {
  background: var(--panel-2);
  border-color: var(--texto-3);
  transform: translateY(-1px);
}
.persona-btn:active { transform: translateY(0) scale(.99); }
.persona-btn:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.persona-btn .ini {
  width: 40px; height: 40px; border-radius: 12px; font-size: 13px;
}
.persona-btn .quien { flex: 1; min-width: 0; }
.persona-btn .quien b { display: block; font-size: 14px; font-weight: 600; }
.persona-btn .quien small { font-size: 11.5px; color: var(--texto-2); }
.persona-btn .flecha { color: var(--texto-3); transition: transform .16s ease; }
.persona-btn:hover .flecha { transform: translateX(3px); }

/* Al elegir: la tarjeta confirma antes de irse. Un cambio instantáneo se
   siente como que no pasó nada. */
.persona-btn.elegida {
  border-color: var(--ok-tx);
  background: var(--ok-bg);
}
.persona-btn.elegida .ini { background: var(--ok-tx); }

.pie-entrada {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--borde-suave);
  font-size: 11px;
  color: var(--texto-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pie-entrada .punto-vivo {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok-tx);
  animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.pie-entrada.sin-base .punto-vivo { background: var(--warn-tx); }

/* La aplicación entra detrás, apenas escalada, cuando el login se va. */
.app, .lienzo { animation: none; }
body.dentro .app { animation: entrar .5s cubic-bezier(.2, .8, .25, 1) backwards; }
@keyframes entrar {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .entrada::before, .entrada::after,
  .aparece, .marca-entrada img, .pie-entrada .punto-vivo,
  body.dentro .entrada, body.dentro .app {
    animation: none !important;
  }
  body.dentro .entrada { display: none; }
}

/* ── Segundo paso: la clave ── */
.elegido-fila{display:flex;align-items:center;gap:12px;padding:11px 13px;
  border:1px solid var(--borde);border-radius:13px;background:var(--panel-2);margin-bottom:12px}
.elegido-fila .ini{width:40px;height:40px;border-radius:12px;font-size:13px}
.elegido-fila .quien{flex:1;min-width:0;text-align:left}
.elegido-fila .quien b{display:block;font-size:14px;font-weight:600}
.elegido-fila .quien small{font-size:11.5px;color:var(--texto-2)}
.elegido-fila .cambiar{border:0;background:none;font-size:12px;color:var(--texto-2);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:4px}
.elegido-fila .cambiar:hover{color:var(--texto)}

.campo-clave{position:relative;display:flex;align-items:center}
.campo-clave input{width:100%;padding:13px 44px 13px 14px;border:1px solid var(--borde);
  border-radius:13px;background:var(--panel);color:var(--texto);font:inherit;font-size:15px;
  outline:none;letter-spacing:.02em;transition:border-color .15s ease,box-shadow .15s ease}
.campo-clave input:focus{border-color:var(--texto);box-shadow:0 0 0 3px var(--activo)}
.campo-clave input::placeholder{color:var(--texto-3);letter-spacing:normal}
.campo-clave input.mal{border-color:var(--mal-tx);animation:sacudir .38s ease}
@keyframes sacudir{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)} 40%,60%{transform:translateX(6px)}
}
.campo-clave .ojo{position:absolute;right:6px;width:34px;height:34px;display:grid;
  place-items:center;border:0;background:none;color:var(--texto-3);cursor:pointer;border-radius:9px}
.campo-clave .ojo:hover{color:var(--texto);background:var(--hover)}

.error-clave{margin:9px 0 0;font-size:12.5px;color:var(--mal-tx);min-height:17px;text-align:left}
.entrar-btn{width:100%;justify-content:center;margin-top:12px;padding:13px;font-size:14px;
  border-radius:13px}
.entrar-btn:disabled{opacity:.6;cursor:default}