/* ============================================================================
   usuarioActivo.css — selector "¿Quién está en la caja?" y chip del encabezado
   ----------------------------------------------------------------------------
   Lo cargan todas las pantallas de la caja que usan usuarioActivo.js. Usa los
   tokens de caja-tokens.css.
   ========================================================================== */


.usr-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: var(--s8) var(--s5);
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--pos-ink);
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(124, 95, 208, .30), transparent 62%),
    radial-gradient(700px 420px at 100% 110%, rgba(63, 143, 230, .10), transparent 60%),
    rgba(17, 18, 22, .86);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  opacity: 0;
  transition: opacity 240ms cubic-bezier(.2, 0, .2, 1);
}
.usr-overlay[hidden] { display: none; }
.usr-overlay.usr-visible { opacity: 1; }
.usr-overlay.usr-saliendo { opacity: 0; transition-duration: 300ms; }

/* Grano muy leve: le saca el aspecto de degradado plano de pantalla. */
.usr-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html.usr-abierto, html.usr-abierto body { overflow: hidden; }

.usr-panel {
  position: relative;
  width: min(960px, 100%);
  text-align: center;
  transform: translateY(14px) scale(.985);
  filter: blur(6px);
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1), filter 320ms cubic-bezier(.2, 0, .2, 1);
}
.usr-visible .usr-panel { transform: none; filter: none; }
.usr-saliendo .usr-panel {
  transform: scale(1.015);
  filter: blur(8px);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(.4, 0, 1, 1);
}

.usr-head { margin-bottom: var(--s7); }

.usr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 28px;
  padding: 0 var(--s3);
  margin-bottom: var(--s5);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--pos-ink-3);
}
.usr-eyebrow-punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34c37a;
  box-shadow: 0 0 0 3px rgba(52, 195, 122, .18);
}

.usr-titulo {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: #fff;
}

.usr-sub {
  max-width: 470px;
  margin: var(--s3) auto 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--pos-ink-4);
}

.usr-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, 176px);
  justify-content: center;
  gap: 14px;
}

.usr-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 184px;
  padding: var(--s4) var(--s3);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 30px -20px rgba(0, 0, 0, .9);
  color: #fff;
  font: inherit;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  /* backwards y no both: con both la animación terminada pisaría el
     transform del hover y del press. */
  animation: usrTileIn 420ms cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 35ms + 90ms);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), background 160ms, border-color 160ms,
              box-shadow 200ms, opacity 240ms;
}
@keyframes usrTileIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@media (hover: hover) {
  .usr-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .18);
    background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045));
  }
}
/* Respuesta en el press, no en el click. */
.usr-tile:active:not(.usr-tile-fantasma) {
  transform: scale(.965);
  transition-duration: 90ms;
}
.usr-tile:focus-visible {
  border-color: rgba(139, 111, 214, .7);
  box-shadow: 0 0 0 4px rgba(139, 111, 214, .35), 0 14px 30px -20px rgba(0, 0, 0, .9);
}

.usr-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--tono, var(--violeta));
  background: radial-gradient(circle at 30% 25%,
                color-mix(in srgb, var(--tono, #7c5fd0) 62%, #fff) 0%,
                var(--tono, #7c5fd0) 52%,
                color-mix(in srgb, var(--tono, #7c5fd0) 72%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
              0 10px 22px -10px var(--tono, #7c5fd0);
  color: #fff;
}
/* Ícono de animal (usuarioActivo.js). Una sombra mínima lo despega del
   degradado sin ensuciar el trazo. */
.usr-avatar svg {
  width: 38px; height: 38px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
}

.usr-tile-nombre {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.012em;
}


/* Confirmación sobre el botón tocado: se rellena de violeta y aparece el
   tilde; el resto se apaga. Dura lo justo antes de que el selector se vaya. */
.usr-tile-check {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% + 18px);
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--violeta);
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: scale(.4);
  transition: opacity 160ms, transform 300ms cubic-bezier(.2, .9, .3, 1.2);
}
.usr-tile.es-elegido {
  background: linear-gradient(180deg, var(--violeta-claro), var(--violeta));
  border-color: transparent;
  box-shadow: 0 18px 40px -16px rgba(108, 78, 182, .9);
}
.usr-tile.es-elegido .usr-tile-check { opacity: 1; transform: none; }
.usr-eligiendo .usr-tile:not(.es-elegido) { opacity: .28; }
.usr-eligiendo .usr-tile { pointer-events: none; }

/* Esqueleto mientras responde la planilla */
.usr-tile-fantasma { cursor: default; pointer-events: none; }
.usr-tile-fantasma .usr-avatar,
.usr-tile-fantasma .usr-tile-nombre {
  background: linear-gradient(90deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, .06) 100%);
  background-size: 200% 100%;
  box-shadow: none;
  animation: usrBrillo 1.3s linear infinite;
}
.usr-tile-fantasma .usr-tile-nombre { width: 84px; height: 14px; border-radius: 7px; }
@keyframes usrBrillo { to { background-position: -200% 0; } }

.usr-estado {
  min-height: 22px;
  margin-top: var(--s5);
  font-size: 14px;
  color: var(--pos-ink-4);
}
.usr-estado:empty { min-height: 0; margin-top: 0; }
.usr-reintentar {
  margin-left: var(--s2);
  height: 34px;
  padding: 0 var(--s4);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.usr-reintentar:hover { background: rgba(255, 255, 255, .14); }

.usr-pie {
  margin-top: var(--s7);
  font-size: 12.5px;
  color: var(--pos-ink-5);
}
.usr-pie-tecla {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  margin: 0 2px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-bottom-width: 2px;
  background: rgba(255, 255, 255, .04);
  color: var(--pos-ink-3);
  font-size: 11px;
  font-weight: 600;
}

/* Versión de la app: esquina inferior derecha, apenas visible. */
.usr-version {
  position: absolute;
  right: var(--s5);
  bottom: var(--s4);
  font-size: 11px;
  color: var(--pos-ink-6);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  pointer-events: none;
  user-select: none;
}

/* Pantalla de elección del punto de venta: son pocas tarjetas, así que van
   centradas (auto-fit) en vez de llenar la fila desde la izquierda. */
.pv-eleccion .usr-grilla { grid-template-columns: repeat(auto-fit, 176px); }

/* --- punto de venta (puntoVenta.js) ---
   Al pie del selector, más tenue que la ayuda de teclado: se usa muy poco. */
.usr-pv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s3);
  font-size: 12px;
  color: var(--pos-ink-6);
}
.usr-pv[hidden] { display: none; }
.usr-pv-nombre { color: var(--pos-ink-5); font-weight: 600; }
.usr-pv-cambiar {
  padding: 2px 4px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--pos-ink-6);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .18);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 160ms;
}
.usr-pv-cambiar:hover { color: var(--pos-ink-3); text-decoration-color: currentColor; }
.usr-pv-cambiar:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(139, 111, 214, .45); color: var(--pos-ink-3); }

/* Tarjeta de cambio: la misma de la contraseña de WhatsApp, en violeta. */
.pv-card .usr-clave-sub strong { color: var(--pos-ink-2); font-weight: 600; }
.pv-card .usr-clave-input:focus {
  border-color: rgba(139, 111, 214, .7);
  box-shadow: 0 0 0 4px rgba(139, 111, 214, .25);
}
.pv-card .pv-ok {
  background: linear-gradient(180deg, var(--violeta-claro), var(--violeta));
  box-shadow: 0 10px 22px -10px rgba(108, 78, 182, .9);
}
.pv-card .pv-acciones { grid-template-columns: 1fr; }

.pv-lista {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  width: 100%;
}
.pv-opcion {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: var(--h-lg);
  padding: var(--s2) var(--s3);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, transform 90ms;
}
.pv-opcion:hover:not(:disabled) { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); }
.pv-opcion:active:not(:disabled) { transform: scale(.98); }
.pv-opcion:focus-visible { outline: none; border-color: rgba(139, 111, 214, .7); box-shadow: 0 0 0 4px rgba(139, 111, 214, .3); }
.pv-opcion:disabled { cursor: default; }
.pv-opcion[aria-selected="true"] { opacity: .55; }
.pv-opcion.es-elegido {
  opacity: 1;
  border-color: transparent;
  background: linear-gradient(180deg, var(--violeta-claro), var(--violeta));
}
.pv-opcion-icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--tono, #7c5fd0);
  color: #fff;
}
.pv-opcion-icono svg { width: 19px; height: 19px; }
.pv-opcion-nombre { flex: 1; }
.pv-opcion-actual {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: var(--pos-ink-3);
  font-size: 11.5px;
  font-weight: 600;
}

/* --- contraseña del modo WhatsApp ---
   Una tarjeta del mismo material que el selector, flotando encima de él. Es
   un elemento aparte (no vive dentro de .usr-overlay) porque el selector
   descarta las teclas imprimibles para que la pistola no elija a nadie. */
.usr-clave {
  position: fixed;
  inset: 0;
  z-index: 10070;
  display: grid;
  place-items: center;
  padding: var(--s5);
  background: rgba(10, 11, 14, .5);
  animation: usrClaveVelo 200ms cubic-bezier(.2, 0, .2, 1);
}
.usr-clave[hidden] { display: none; }
@keyframes usrClaveVelo { from { opacity: 0; } }

.usr-clave-card {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s7) var(--s6) var(--s6);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, #24262d, #1b1c21);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -20px rgba(0, 0, 0, .8);
  color: var(--pos-ink);
  text-align: center;
  animation: usrClaveIn 320ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes usrClaveIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
}
.usr-clave-card.usr-clave-mal { animation: usrClaveMal 360ms cubic-bezier(.36, .07, .19, .97); }
@keyframes usrClaveMal {
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

.usr-clave-avatar { width: 56px; height: 56px; margin-bottom: var(--s4); }
.usr-clave-avatar svg { width: 30px; height: 30px; }

.usr-clave-titulo {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  /* La caja pone todos los h2 en versalitas (rótulos de sección). */
  text-transform: none;
  color: #fff;
}
.usr-clave-sub {
  margin: var(--s2) 0 var(--s5);
  font-size: 14px;
  line-height: 1.5;
  color: var(--pos-ink-4);
}

.usr-clave-input {
  width: 100%;
  height: var(--h-lg);
  padding: 0 var(--s4);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font: inherit;
  font-size: 18px;
  letter-spacing: .3em;
  text-align: center;
  outline: none;
  transition: border-color 160ms, box-shadow 160ms;
}
.usr-clave-input:focus {
  border-color: rgba(37, 211, 102, .6);
  box-shadow: 0 0 0 4px rgba(37, 211, 102, .18);
}

.usr-clave-error {
  min-height: 20px;
  margin-top: var(--s2);
  font-size: 13px;
  font-weight: 600;
  color: #ff8a80;
}

.usr-clave-acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
  width: 100%;
  margin-top: var(--s3);
}
.usr-clave-btn {
  height: var(--h-md);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms, transform 90ms;
}
.usr-clave-btn:active { transform: scale(.97); }
.usr-clave-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(139, 111, 214, .35); }
.usr-clave-cancelar {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: var(--pos-ink-2);
}
.usr-clave-cancelar:hover { background: rgba(255, 255, 255, .1); }
.usr-clave-ok {
  border: none;
  background: linear-gradient(180deg, #34d97a, #1fae55);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(37, 211, 102, .8);
}
.usr-clave-ok:hover { filter: brightness(1.06); }

/* Confirmación de "Entrar igual": misma tarjeta; el botón va en ámbar porque
   la acción cierra la sesión de otro equipo. */
.usr-confirmar-sub { margin-bottom: var(--s4); }
.usr-confirmar-sub strong { color: var(--pos-ink-2); font-weight: 600; }
.usr-confirmar-ok {
  border: none;
  background: linear-gradient(180deg, #f0a43a, #d97706);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(217, 119, 6, .8);
}
.usr-confirmar-ok:hover { filter: brightness(1.06); }

/* WhatsApp en la grilla: mismo borde que el resto; sólo cambia el verde
   de la confirmación. */
.usr-tile-whatsapp.es-elegido {
  background: linear-gradient(180deg, #34d97a, #1fae55);
  box-shadow: 0 18px 40px -16px rgba(37, 211, 102, .8);
}
.usr-tile-whatsapp.es-elegido .usr-tile-check { color: #1fae55; }

/* Usuario conectado en otro equipo: queda a la vista pero apagado y no se
   puede elegir (usuarioActivo.js). */
.usr-tile.usr-tile-ocupado {
  /* Se puede tocar: ofrece "Entrar igual" (usuarioActivo.js). */
  cursor: pointer;
  border-color: rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .025);
  box-shadow: none;
}
.usr-tile-ocupado .usr-avatar { filter: grayscale(.85); opacity: .45; box-shadow: none; }
.usr-tile-ocupado .usr-tile-nombre { color: var(--pos-ink-4); }
@media (hover: hover) {
  .usr-tile.usr-tile-ocupado:hover { transform: none; background: rgba(255, 255, 255, .025); border-color: rgba(255, 255, 255, .06); }
}
.usr-tile.usr-tile-ocupado:active { transform: none; }
/* Debajo del nombre y centrado; el gap del botón se achica para que entre
   también en los botones bajos del celular. */
.usr-tile.usr-tile-ocupado { gap: 10px; }
.usr-tile-conectado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(52, 199, 89, .16);
  color: #7fe0a0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.usr-tile-conectado-punto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 3px rgba(52, 199, 89, .22);
}

/* --- chip del encabezado --- */
.usr-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  height: var(--h-md);
  padding: 0 var(--s3) 0 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.usr-chip[hidden] { display: none; }
.usr-chip:hover { background: var(--surface-2); border-color: #cdd1d8; }

.usr-chip-avatar {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--tono, var(--violeta));
  background: radial-gradient(circle at 30% 25%,
                color-mix(in srgb, var(--tono, #7c5fd0) 62%, #fff) 0%,
                var(--tono, #7c5fd0) 55%,
                color-mix(in srgb, var(--tono, #7c5fd0) 75%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  color: #fff;
}
.usr-chip-avatar svg { width: 21px; height: 21px; }

.usr-chip-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.usr-chip-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.usr-chip-nombre {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.usr-chip-flecha { color: var(--ink-4); flex-shrink: 0; }

.pos-nav-sep {
  width: 1px;
  height: 28px;
  margin: 0 var(--s1);
  flex-shrink: 0;
  background: var(--line);
}
.usr-chip[hidden] + .pos-nav-sep { display: none; }

@media (max-width: 1180px) {
  .usr-chip-nombre { max-width: 96px; }
}
@media (max-width: 760px) {
  .usr-grilla { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .usr-tile { height: 156px; border-radius: 18px; }
  .usr-avatar { width: 58px; height: 58px; }
  .usr-avatar svg { width: 32px; height: 32px; }
  .usr-tile-check { top: calc(50% - 44px); left: calc(50% + 14px); }
  .usr-pie { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .usr-panel, .usr-visible .usr-panel, .usr-saliendo .usr-panel { transform: none; filter: none; }
  .usr-clave, .usr-clave-card, .usr-clave-card.usr-clave-mal { animation: none; }
  .usr-tile:hover, .usr-tile:active:not(.usr-tile-fantasma) { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .usr-overlay { background: #141518; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .usr-overlay::before { display: none; }
}
@media (prefers-contrast: more) {
  .usr-tile { border: 2px solid rgba(255, 255, 255, .45); }
  .usr-sub, .usr-pie { color: var(--pos-ink-2); }
}