/* ══════════════════════════════════════════════════════════════════════════
   entrando.css · la pantalla que se ve mientras la app carga (js/entrando.js)

   Tapa todo (`fixed`, arriba del acceso o de la app escondida) y dice quién
   está entrando a dónde: el logo de KFB con el nombre, el local con su logo
   y su chapa, la persona con su rol, y una barra fina que se mueve para que
   se note que algo pasa. Ningún color escrito acá: todo sale de tokens.css.
   Es corta y no tapa un error: si la sesión se cae, `js/volver-a-la-puerta`
   reemplaza el cuerpo entero y ésta se va con él.
   ══════════════════════════════════════════════════════════════════════════ */
.entrando {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  padding: var(--e-6) var(--e-4);
  background: var(--fondo);
  color: var(--texto);
  text-align: center;
  /* SIN FUNDIDO. Tenía `animation: opacity 0 → 1 en .25s`, y Canu (19/09
     02:xx, captura) vio la puerta y esta pantalla SUPERPUESTAS después del
     PIN: `puerta.js` navega en el mismo instante en que esto se pinta, y
     el navegador congela lo que está dibujando hasta que llega la página
     nueva --con la animación a mitad de camino, el fondo queda a medio
     transparentar y se ve la marca de la puerta a través--. Medido en el
     panel: con la animación frenada, la caja informa opacity 0. Una
     pantalla que tapa tiene que tapar desde el primer cuadro. */
}

/* KFB arriba: el logo grande y el nombre entero debajo. */
.entrando-kfb { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); }
.entrando-logo-kfb { --logo-kfb-lado: 96px; }
.entrando-kfb .marca-kfb { font-size: clamp(1.3rem, 4vw, 1.7rem); display: inline-flex; }

/* El local: logo, nombre y chapa en un renglón. */
.entrando-local {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-3);
  max-width: 100%;
}
.entrando-logo-local { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.entrando-nombre-local {
  font-family: var(--letra-titulo);
  font-size: var(--txt-lg);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entrando-plan {
  padding: 3px 10px;
  border: 1px solid var(--borde-acento);
  border-radius: var(--radio-full);
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acento-texto);
  flex: none;
}
/* (307) Los colores salen de la pieza común js/lib/paleta-de-planes.css:
   un nombre, un color, igual en los tres productos (Canu, 24/10). */
.entrando-plan.plan-full { background: var(--plan-full-fondo); border-color: var(--plan-full-borde); color: var(--plan-full-texto); }
.entrando-plan.plan-pro { background: var(--plan-pro-fondo); border-color: var(--plan-pro-borde); color: var(--plan-pro-texto); }
.entrando-plan.plan-salon { background: var(--plan-salon-fondo); border-color: var(--plan-salon-borde); color: var(--plan-salon-texto); }
.entrando-plan.plan-caja { background: var(--plan-caja-fondo); border-color: var(--plan-caja-borde); color: var(--plan-caja-texto); }

/* La persona: nombre en negrita, el rol al lado en dorado. */
.entrando-quien { margin: 0; font-size: var(--txt-sm); color: var(--texto-2); }
.entrando-quien b { color: var(--texto); font-weight: var(--peso-medio); }
.entrando-rol { color: var(--acento-texto); text-transform: uppercase; letter-spacing: .06em; font-size: var(--txt-xs); }

.entrando-pie { margin: var(--e-2) 0 0; font-size: var(--txt-xs); color: var(--texto-3); letter-spacing: .04em; }

/* La barra que se mueve: un trazo dorado que va y viene sobre una línea
   apagada. Anima `transform`, que no pide re-acomodar nada. */
.entrando-barra {
  position: relative;
  width: min(220px, 60vw);
  height: 3px;
  border-radius: 2px;
  background: var(--borde);
  overflow: hidden;
}
.entrando-barra::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: var(--acento);
  animation: entrando-va-y-viene 1.1s ease-in-out infinite alternate;
}
@keyframes entrando-va-y-viene { from { transform: translateX(-10%); } to { transform: translateX(160%); } }
@media (prefers-reduced-motion: reduce) { .entrando-barra::after { animation: none; width: 100%; } }

/* En la puerta, el logo de KFB arriba del nombre (captura 16). */
.marca .marca-logo { --logo-kfb-lado: 84px; display: block; margin: 0 auto var(--e-3); }