/* Pixel Mesero — Pixel flotante del inicio: pide nombre y cédula y muestra las mesas (libres y ocupadas)
 * Usa los tokens de bot/css/inicio.css (--acento, --papel, --tinta…), así sigue el tema claro u oscuro.
 * Lanzador: Pixel de cuerpo entero (imagen sin fondo). Chat: pantalla completa en el teléfono, ventana
 * amplia en computadora. Capas: lanzador 40, ventana 50. */
.inicio-mesero { --rincon: 150px; }   /* lo que ocupa Pixel en la esquina: el contenido no queda debajo */
@media (max-width: 500px) {
  .inicio-mesero { --rincon: 0px; }
  .inicio-mesero .pantalla { padding-bottom: 150px; }   /* en el teléfono se desplaza: nada queda tapado por Pixel */
}
html.pixel-flota-abierta, html.pixel-flota-abierta body { overflow: hidden; }
.pixel-flota {
  --fondo-ventana: #ffffff;
  --borde: #e6e3ef;
  --libre: #166534; --libre-fondo: #dcfce7;
  --ocupada: #7a5200; --ocupada-fondo: #fff4d6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pixel-flota {
    --fondo-ventana: #17171f; --borde: #2c2b3a;
    --libre: #86efac; --libre-fondo: #12301d; --ocupada: #fcd34d; --ocupada-fondo: #33270b;
  }
}
:root[data-theme="dark"] .pixel-flota {
  --fondo-ventana: #17171f; --borde: #2c2b3a;
  --libre: #86efac; --libre-fondo: #12301d; --ocupada: #fcd34d; --ocupada-fondo: #33270b;
}

/* Lanzador: Pixel de cuerpo entero con su globo */
.pixel-flota__lanzador {
  position: fixed;
  right: 20px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 .92rem/1.2 var(--fuente);
  color: var(--tinta);
  touch-action: manipulation;
}
.pixel-flota__globo {
  margin-bottom: 34px;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: var(--fondo-ventana);
  border: 1px solid var(--borde);
  box-shadow: 0 8px 24px rgb(40 20 90 / .14);
  white-space: nowrap;
}
.pixel-flota__cuerpo-img {
  width: 110px; height: auto;
  filter: drop-shadow(0 10px 24px rgb(91 33 182 / .45));
  transition: transform .2s ease;
  animation: pixel-flota-flotar 4s ease-in-out infinite;
}
@media (max-width: 500px) { .pixel-flota__cuerpo-img { width: 92px; } .pixel-flota__globo { margin-bottom: 26px; } }
@media (min-width: 1024px) { .pixel-flota__cuerpo-img { width: 130px; } .pixel-flota__globo { margin-bottom: 42px; } }
.pixel-flota__lanzador:active .pixel-flota__cuerpo-img { transform: scale(.95); }
@media (hover: hover) { .pixel-flota__lanzador:hover .pixel-flota__cuerpo-img { transform: translateY(-4px) scale(1.04); } }
@keyframes pixel-flota-flotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.pixel-flota__lanzador[hidden] { display: none; }

/* Ventana de la conversación: pantalla completa en el teléfono, ventana amplia en la esquina en computadora */
.pixel-flota__ventana {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex; flex-direction: column;
  height: 100dvh;
  background: var(--fondo-ventana);
  color: var(--tinta);
  padding-bottom: env(safe-area-inset-bottom);
  animation: pixel-sube .22s ease-out;
}
.pixel-flota__ventana[hidden] { display: none; }
@media (min-width: 640px) {
  .pixel-flota__ventana {
    inset: auto 24px 24px auto;
    width: min(520px, calc(100vw - 48px));
    height: min(760px, calc(100dvh - 48px));
    padding-bottom: 0;
    border-radius: 24px;
    border: 1px solid var(--borde);
    box-shadow: 0 24px 60px rgb(20 10 50 / .28);
  }
  .pixel-flota__ventana .pixel-flota__mesas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@keyframes pixel-sube { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

.pixel-flota__cab {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borde);
}
.pixel-flota__cab img { width: 44px; height: 44px; border-radius: 50%; background: var(--acento); }
.pixel-flota__cab div { flex: 1; min-width: 0; }
.pixel-flota__cab strong { display: block; font: 700 1rem/1.2 var(--fuente-titulo); }
.pixel-flota__cab span { font-size: .8rem; color: var(--gris); }
.pixel-flota__cerrar {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--gris); cursor: pointer;
  font-size: 1.4rem;
}
@media (hover: hover) { .pixel-flota__cerrar:hover { background: var(--acento-suave); color: var(--tinta); } }

.pixel-flota__cuerpo {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px;
  display: grid; gap: 12px; align-content: start;
}
.pixel-flota__msg {
  max-width: 92%;
  padding: 10px 14px;
  border-radius: 4px 16px 16px 16px;
  background: var(--acento-suave);
  font-size: .95rem;
}
.pixel-flota__msg--yo { justify-self: end; border-radius: 16px 4px 16px 16px; background: var(--acento); color: var(--acento-texto); }
.pixel-flota__nota { font-size: .8rem; color: var(--gris); margin: 0; }

.pixel-flota__form { display: grid; gap: 12px; }
.pixel-flota__campo { display: grid; gap: 6px; }
.pixel-flota__campo label { font-weight: 600; font-size: .88rem; }
.pixel-flota__campo input {
  min-height: 48px; padding: 0 14px;
  border: 1px solid var(--borde); border-radius: 12px;
  background: var(--papel); color: var(--tinta);
  font: 400 1rem var(--fuente);
}
.pixel-flota__campo input:focus { outline: 3px solid var(--acento-suave); border-color: var(--acento); }
.pixel-flota__error { color: #b42318; font-size: .85rem; margin: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pixel-flota__error { color: #fca5a5; } }

.pixel-flota__boton {
  min-height: 48px; padding: 0 20px;
  border: 0; border-radius: 999px;
  background: var(--acento); color: var(--acento-texto);
  font: 600 1rem var(--fuente);
  cursor: pointer;
  transition: transform .15s ease;
}
.pixel-flota__boton:active { transform: scale(.97); }
.pixel-flota__boton[disabled] { opacity: .6; cursor: progress; }
.pixel-flota__boton--suave { background: transparent; color: var(--acento-fuerte); border: 1px solid var(--borde); }

/* Mesas: libres y ocupadas */
.pixel-flota__mesas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pixel-mesa {
  display: grid; gap: 4px; justify-items: start;
  min-height: 76px; padding: 12px;
  border: 1px solid var(--borde); border-radius: 16px;
  background: var(--papel); color: var(--tinta);
  text-align: left; cursor: pointer;
  font: 400 .85rem/1.3 var(--fuente);
  transition: transform .15s ease, border-color .15s ease;
}
.pixel-mesa strong { font: 700 1rem/1.2 var(--fuente-titulo); }
.pixel-mesa small { color: var(--gris); }
.pixel-mesa__estado { padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.pixel-mesa--libre .pixel-mesa__estado { background: var(--libre-fondo); color: var(--libre); }
.pixel-mesa--ocupada .pixel-mesa__estado { background: var(--ocupada-fondo); color: var(--ocupada); }
.pixel-mesa:active { transform: scale(.97); }
@media (hover: hover) { .pixel-mesa:hover { border-color: var(--acento); } }
.pixel-mesa[disabled] { opacity: .6; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .pixel-flota__ventana, .pixel-flota__cuerpo-img { animation: none; }
  .pixel-flota__cuerpo-img, .pixel-flota__boton, .pixel-mesa { transition: none; }
}