/* ═══════════════════════════════════════════════════════════════════════════
   POSventas · Escena de entrada · maquetación
   ═══════════════════════════════════════════════════════════════════════════

   Aquí NO hay ni un color. Todos los tonos salen de los tokens `--esc-*` que
   declara login.css, que es el archivo que las tres vistas cargan justo antes
   que este. Si algo hay que recolorear, se recolorea allí; si aquí aparece una
   almohadilla seguida de seis cifras, es un descuido y rompe uno de los seis
   aspectos (tres skins × claro y oscuro) sin que nadie se entere hasta que un
   usuario de Winnet abre la caja de noche.

   ─── Qué cambió y por qué ────────────────────────────────────────────────

   Antes la pantalla era una tarjeta centrada con el dibujo detrás al 13 % de
   opacidad. El dueño dijo que se veía «muy sencilla», y tenía razón por una
   causa concreta: a esa opacidad la ilustración deja de ser un dibujo y pasa a
   ser textura de fondo, así que la pantalla era, de hecho, una tarjeta sola
   sobre un color plano.

   Ahora son DOS columnas: la ilustración a su tamaño en la izquierda y la
   tarjeta de acceso a la derecha. El dibujo ya no compite con el formulario
   porque ya no está debajo de él; está al lado.

   La tarjeta no cambió de anchura ni de tipografía. Quien entra veinte veces al
   día no tiene que volver a buscar dónde estaba el campo de usuario.
   ═══════════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--esc-texto);
  background: var(--esc-fondo);
  -webkit-font-smoothing: antialiased;
}

/* ═══ Lienzo ═══ */
.escena {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 32px 24px;
  background:
    radial-gradient(1100px 620px at 8% -12%,
      color-mix(in srgb, var(--esc-tinta) 13%, transparent), transparent 68%),
    radial-gradient(900px 560px at 106% 108%,
      color-mix(in srgb, var(--esc-chispa) 11%, transparent), transparent 66%),
    var(--esc-fondo);
}

/* ═══ Las dos columnas ═══
   404 px es exactamente lo que medía la tarjeta antes; se fija en píxeles y no
   en fracciones para que la columna del dibujo se lleve TODO el ensanche de la
   ventana y el formulario no se estire. Un campo de usuario de 600 px de ancho
   en una pantalla de escritorio se ve descuidado. */
.escena-panel {
  width: 100%; max-width: 1080px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 404px;
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}

.escena-arte { min-width: 0; }
.escena-arte svg {
  display: block; width: 100%; height: auto;
  max-width: 580px; margin: 0 auto;
}

/* Un renglón bajo el dibujo que dice a qué se entra. La marca del negocio NO va
   aquí, va en la tarjeta: por debajo de 700 px el dibujo se esconde entero, y
   si la marca viviera en esta columna desaparecería justo en el teléfono, que
   es donde más falta hace saber en qué tienda se está entrando. */
.escena-pie-arte {
  margin: 20px auto 0; max-width: 470px; text-align: center;
  font-size: 14px; line-height: 1.6; color: var(--esc-suave);
}
.escena-pie-arte b { color: var(--esc-brillo); font-weight: 700; }

/* ═══ La tarjeta ═══ */
.escena-caja {
  width: 100%;
  background: var(--esc-papel);
  border: 1px solid color-mix(in srgb, var(--esc-tinta) 18%, transparent);
  border-radius: 20px;
  padding: 36px 32px 28px;
  box-shadow:
    0 28px 64px -24px color-mix(in srgb, var(--esc-texto) 42%, transparent),
    0 2px 8px color-mix(in srgb, var(--esc-texto) 8%, transparent);
  animation: escEntra .45s cubic-bezier(.2, .8, .3, 1) both;
}

/* ═══ Marca ═══ */
.escena-marca { text-align: center; margin-bottom: 24px; }
.escena-sello {
  width: 58px; height: 58px; border-radius: 17px; margin: 0 auto 14px;
  background: var(--esc-tinta); display: grid; place-items: center;
  color: var(--esc-sello-txt);
  box-shadow: 0 10px 24px -8px var(--esc-tinta);
}
/* El sello hereda el color por `currentColor`, así que el mismo trazado sirve
   en los seis aspectos sin repetir el SVG en cada vista. */
.escena-sello svg { width: 31px; height: 31px; stroke: currentColor; }
/* Un logo subido ocupa la MISMA caja que el sello: cambiar de marca no puede
   mover ni un píxel del formulario. */
.escena-logo {
  width: 58px; height: 58px; border-radius: 17px; margin: 0 auto 14px;
  display: block; object-fit: contain; background: var(--esc-papel); padding: 5px;
  border: 1px solid color-mix(in srgb, var(--esc-tinta) 18%, transparent);
}
.escena-marca h1 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 23px; font-weight: 600; letter-spacing: -.02em;
  color: var(--esc-texto); margin: 0; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.escena-marca p {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--esc-suave); margin: 6px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La cabecera de «elegir sucursal» pone el nombre y el conteo en dos renglones
   dentro del mismo bloque de marca. */
.escena-marca b {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  display: block; font-size: 20px; font-weight: 600; color: var(--esc-texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.escena-marca small {
  display: block; margin-top: 5px; font-size: 12px; color: var(--esc-suave);
}

.escena-saludo {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 17px; font-weight: 600; color: var(--esc-texto);
  margin: 0 0 3px; text-align: center;
}
.escena-sub {
  font-size: 13px; color: var(--esc-suave); margin: 0 0 22px; text-align: center;
}

/* ═══ Campos ═══ */
.escena-campo { display: block; margin-bottom: 14px; }
.escena-campo span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--esc-suave); display: block; margin-bottom: 6px;
}
.escena-campo input {
  width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit;
  color: var(--esc-texto);
  background: color-mix(in srgb, var(--esc-fondo) 55%, var(--esc-papel));
  border: 1.5px solid color-mix(in srgb, var(--esc-texto) 15%, transparent);
  border-radius: 11px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.escena-campo input::placeholder { color: var(--esc-suave); opacity: .55; }
.escena-campo input:focus {
  outline: none; background: var(--esc-papel);
  border-color: var(--esc-tinta);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--esc-tinta) 18%, transparent);
}

/* Pista de formato de usuario. Se pone porque el nombre lleva punto y sin un
   ejemplo delante la gente escribe su correo, y ese intento gasta uno de los
   cinco que bloquean la cuenta. */
.escena-pista {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--esc-suave); margin: -8px 0 14px;
  text-align: center;
}
.escena-pista b { color: var(--esc-brillo); }

.escena-btn {
  width: 100%; padding: 13px; margin-top: 6px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px; font-weight: 600; color: var(--esc-sello-txt);
  background: var(--esc-tinta); border: 0; border-radius: 11px; cursor: pointer;
  transition: filter .15s, transform .08s;
}
.escena-btn:hover:not(:disabled) { filter: brightness(1.07); }
.escena-btn:active:not(:disabled) { transform: translateY(1px); }
.escena-btn:disabled { opacity: .6; cursor: progress; }
.escena-btn:focus-visible { outline: 3px solid var(--esc-chispa); outline-offset: 3px; }

.escena-error {
  margin-top: 14px; padding: 11px 13px; border-radius: 10px;
  font-size: 13px; line-height: 1.45;
  background: var(--esc-mal-fondo);
  border: 1px solid var(--esc-mal-borde);
  color: var(--esc-mal-tinta);
}

.escena-aviso {
  margin-top: 18px; padding: 10px 13px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.5;
  background: color-mix(in srgb, var(--esc-chispa) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--esc-chispa) 34%, transparent);
  color: var(--esc-chispa);
}

.escena-fila {
  display: flex; align-items: center; gap: 10px; margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--esc-texto) 12%, transparent);
}
.escena-tema {
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--esc-texto) 16%, transparent);
  color: var(--esc-suave); font-size: 14px; line-height: 1;
}
.escena-tema:hover {
  background: color-mix(in srgb, var(--esc-tinta) 10%, transparent);
  color: var(--esc-brillo);
}
.escena-tema:focus-visible { outline: 3px solid var(--esc-chispa); outline-offset: 2px; }
.escena-vinculo {
  font-size: 12.5px; font-weight: 600; color: var(--esc-brillo); text-decoration: none;
}
.escena-vinculo:hover { text-decoration: underline; }
.escena-nota {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .07em; color: var(--esc-suave);
  opacity: .7; margin-left: auto;
}

/* ═══ Selector de sucursal ═══ */
.escena-sucursales { display: grid; gap: 9px; }
.escena-sucursal {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px; text-align: left; cursor: pointer; font-family: inherit;
  background: color-mix(in srgb, var(--esc-fondo) 55%, var(--esc-papel));
  border: 1.5px solid color-mix(in srgb, var(--esc-texto) 13%, transparent);
  border-radius: 13px; color: var(--esc-texto);
  transition: border-color .15s, background .15s, transform .08s;
}
.escena-sucursal:hover {
  border-color: var(--esc-tinta);
  background: color-mix(in srgb, var(--esc-tinta) 8%, var(--esc-papel));
}
.escena-sucursal:active { transform: translateY(1px); }
.escena-sucursal:disabled { opacity: .55; cursor: progress; }
.escena-sucursal:focus-visible { outline: 3px solid var(--esc-chispa); outline-offset: 2px; }
.escena-sucursal .clave {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--esc-tinta) 16%, transparent);
  color: var(--esc-brillo);
}
.escena-sucursal .nom { flex: 1; min-width: 0; }
.escena-sucursal .nom b {
  display: block; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.escena-sucursal .nom small {
  display: block; font-size: 11.5px; color: var(--esc-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.escena-sucursal .flecha { color: var(--esc-suave); font-size: 16px; }

/* ═══ Variante sobria ═══
   La usan «elegir sucursal» y la puerta del proveedor. Es el mismo dibujo con
   menos presencia: en el segundo paso ya no hay nada que presentar y lo único
   que importa es la lista, y en el panel del proveedor un escaparate alegre
   desentona con lo que se administra desde ahí. Se baja la ilustración en vez
   de dibujar otra porque dos dibujos son dos dibujos que mantener. */
.escena--sobria .escena-arte { opacity: .62; }
.escena--sobria .escena-arte svg { max-width: 480px; }
.escena--sobria .escena-pie-arte { opacity: .85; }

/* ═══ Movimiento ═══ */
@keyframes escEntra { from { opacity: 0; transform: translateY(12px); } }

/* El haz del lector late despacio, como el de un lector de verdad en reposo.
   Dos segundos y medio: más rápido parpadea y distrae de lo único que hay que
   hacer en esta pantalla, que es teclear la contraseña. */
@keyframes escLatido { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.escena-haz { animation: escLatido 2.6s ease-in-out infinite; }

/* La etiqueta de precio flota. Se anima un grupo ENVOLTORIO, no la etiqueta:
   una `transform` de CSS reemplaza a la del atributo `transform` del SVG en vez
   de componerse con ella, así que animar el mismo elemento que lleva la
   colocación lo manda de golpe a la esquina del lienzo. */
@keyframes escFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.escena-flota { animation: escFlota 5.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .escena-caja, .escena-haz, .escena-flota { animation: none; }
}

/* ═══ Anchos ═══ */

/* Por debajo de 1000 px las dos columnas no caben sin estrangular el dibujo:
   pasa a ser una franja sobre la tarjeta. */
@media (max-width: 1000px) {
  .escena-panel {
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px; gap: 24px;
  }
  .escena-arte svg { max-width: 360px; }
  .escena-pie-arte { margin-top: 12px; font-size: 13px; }
}

/* En teléfono la ilustración SE VA. No se encoge: se va. Una franja de dibujo
   sobre un teclado abierto deja el campo de contraseña fuera de la pantalla, y
   el cajero acaba haciendo scroll a ciegas con el turno empezado. La tarjeta se
   queda con la pantalla entera. */
@media (max-width: 700px) {
  .escena { padding: 16px 14px; align-items: start; }
  .escena-panel { max-width: 100%; }
  .escena-arte, .escena-pie-arte { display: none; }
  .escena-caja { padding: 30px 22px 24px; border-radius: 18px; }
}

@media (max-width: 380px) {
  .escena { padding: 12px 10px; }
  .escena-caja { padding: 26px 18px 20px; }
  .escena-marca { margin-bottom: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA CALLE: tarjeta EN MEDIO, escena detrás y a los lados
   ═══════════════════════════════════════════════════════════════════════════

   La maqueta anterior era de dos columnas —dibujo a la izquierda, tarjeta a la
   derecha—. Esta pone la tarjeta en el centro y el dibujo POR DETRÁS, ocupando
   todo el ancho, que es como está la de ClinicPro que el dueño quiere.

   La ventaja no es solo estética: con dos columnas, en una pantalla de 1366 px
   —la de casi cualquier equipo de mostrador— el dibujo se comía la mitad y la
   tarjeta quedaba estrecha. Centrada, la tarjeta manda siempre y el dibujo es
   lo que sobra alrededor.

   Todo el color sale de los tokens --esc-*: los tres aspectos y el claro/oscuro
   siguen funcionando sin una segunda copia de nada.
   ═══════════════════════════════════════════════════════════════════════════ */

.escena--calle {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 32px 20px;
  overflow: hidden;
}

/* El dibujo va anclado ABAJO y a todo el ancho. `slice` lo recorta por los
   lados en pantallas estrechas en vez de encogerlo: los locales conservan su
   tamaño y lo que se pierde son los de los extremos, que es lo que sobra. */
.escena--calle .calle {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  /* Poco alta a propósito: la calle es el FONDO, no el asunto. Con más alto los
     locales suben hasta la tarjeta y compiten con el formulario, que es lo único
     que alguien viene a hacer aquí. */
  height: min(44vh, 360px);
  pointer-events: none;
}

/* La tarjeta, encima de todo y con su propio fondo: sobre el dibujo, un panel
   translúcido dejaría el texto ilegible justo donde pasa un local. */
.escena--calle .escena-caja {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 432px;
  margin: 0 auto;
}

/* Un velo suave detrás de la tarjeta: separa sin tapar. */
.escena--calle .escena-caja::before {
  content: '';
  position: absolute;
  inset: -34px -30px;
  border-radius: 34px;
  background: radial-gradient(closest-side,
              var(--esc-fondo) 62%, transparent 100%);
  opacity: .82;
  z-index: -1;
}

/* El pie va con su propio velo: sin él cae justo encima de los locales y las
   dos cosas se leen mal a la vez. */
.escena--calle .escena-pie-arte {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 20px auto 0;
  padding: 10px 18px;
  text-align: center;
  border-radius: 999px;
  background: var(--esc-fondo);
  box-shadow: 0 0 22px 18px var(--esc-fondo);
}

/* ── El movimiento ────────────────────────────────────────────────────────
   Lento y corto: una pantalla de entrada que se mueve mucho cansa al tercer
   inicio de sesión del día. Los locales respiran, el camino avanza, y las
   cosas del oficio flotan con desfases distintos para que no vayan a la vez. */

.cal-local { animation: calRespira 7s ease-in-out infinite; }
.cal-local--2 { animation-delay: -1.4s; }
.cal-local--3 { animation-delay: -2.8s; }
.cal-local--4 { animation-delay: -4.2s; }
.cal-local--5 { animation-delay: -5.6s; }

@keyframes calRespira {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* El camino avanza recorriendo su propio guion: da la sensación de que algo
   viaja entre los locales, que es justo lo que hace un traspaso. */
.cal-ruta { animation: calAvanza 3.2s linear infinite; }
@keyframes calAvanza { to { stroke-dashoffset: -20; } }

.cal-flota { animation: calFlota 9s ease-in-out infinite; }
.cal-flota--b { animation-duration: 11s; animation-delay: -2s; }
.cal-flota--c { animation-duration: 8s;  animation-delay: -4s; }
.cal-flota--d { animation-duration: 12s; animation-delay: -6s; }

@keyframes calFlota {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(3deg); }
}

.cal-tira { animation: calLatido 4.5s ease-in-out infinite; }
@keyframes calLatido {
  0%, 100% { opacity: .5; }
  50%      { opacity: .78; }
}

/* Quien pide menos movimiento no lo pide a medias: se apaga TODO, no se
   ralentiza. Una animación lenta sigue siendo una animación. */
@media (prefers-reduced-motion: reduce) {
  .cal-local, .cal-ruta, .cal-flota, .cal-tira { animation: none; }
}

/* En pantalla estrecha el dibujo baja a una banda de pie: la tarjeta necesita
   el alto, y una calle de 60 vh en un teléfono deja el formulario fuera. */
@media (max-width: 720px) {
  .escena--calle .calle { height: 28vh; opacity: .75; }
  .escena--calle .escena-caja::before { inset: -22px -18px; }
}

/* ═══ Elegir usuario con un clic ═══
   Solo aparece con el interruptor del proveedor encendido, que es para probar.
   Ver la nota del guion 17: en producción se apaga. */
.login-quien { margin: 6px 0 14px; }
.login-quien-cab {
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--esc-suave); margin-bottom: 8px;
}
.login-quien-lista {
  display: grid; gap: 6px;
  /* Con muchos usuarios la lista no puede empujar el bot\u00f3n de entrar fuera de la
     pantalla: a partir de cinco se desplaza dentro de su propia caja. */
  max-height: 188px; overflow-y: auto; padding-right: 4px;
}
.login-quien-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border-radius: 11px; cursor: pointer; font: inherit;
  border: 1px solid var(--esc-borde, rgba(20, 52, 42, .14));
  background: var(--esc-papel); color: var(--esc-texto); text-align: left;
}
.login-quien-btn:hover { border-color: var(--esc-tinta); }
.login-quien-btn.on {
  border-color: var(--esc-tinta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--esc-tinta) 22%, transparent);
}
.login-quien-btn img,
.login-quien-ini {
  width: 30px; height: 30px; border-radius: 50%; flex: none; object-fit: cover;
}
.login-quien-ini {
  display: grid; place-items: center; font-size: 11.5px; font-weight: 800;
  background: var(--esc-tinta); color: #fff;
}
.login-quien-txt { min-width: 0; line-height: 1.25; }
.login-quien-txt b { display: block; font-size: 13px; }
.login-quien-txt small { font-size: 11px; color: var(--esc-suave); }

/* ═══ El botón, con respuesta al ratón ═══
   Un botón que no responde al pasar por encima se siente muerto, y en una
   pantalla de entrada esa es la primera impresión del programa entero.
   Se levanta un pelo, se oscurece y deja sombra; al pulsarlo se hunde. */
.escena-btn {
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease;
}
.escena-btn:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.06);
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--esc-tinta) 55%, transparent);
}
.escena-btn:active {
  transform: translateY(0);
  filter: brightness(.96);
  box-shadow: none;
}
.escena-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--esc-tinta) 45%, transparent);
  outline-offset: 2px;
}

/* Quien pide menos movimiento conserva el cambio de color, que es la señal, y
   pierde el desplazamiento, que es el adorno. */
@media (prefers-reduced-motion: reduce) {
  .escena-btn, .escena-btn:hover, .escena-btn:active { transform: none; }
}