/* Pixel Mesero — lo propio de la pantalla de inicio (mesa/inicio.php) sobre bot/css/inicio.css:
 * sin el bot de la esquina, se puede desplazar en teléfonos bajos, mesas de prueba y enlace a "para llevar". */
body.inicio-mesero { overflow-y: auto; }
.inicio-mesero { --rincon: 0px; }
.inicio-mesero .pantalla { min-height: 100dvh; height: auto; }

.enlace-llevar {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  color: var(--gris);
  font-weight: 500;
  text-decoration: none;
}
.enlace-llevar .mdi { font-size: 1.15rem; }
@media (hover: hover) { .enlace-llevar:hover { color: var(--acento); } }

.mesas-demo { display: grid; gap: 8px; }
.mesas-demo p { margin: 0; font-weight: 600; }
.mesas-demo small { color: var(--gris); font-weight: 400; }
.mesas-demo__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.mesas-demo__lista a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 16px;
  border-radius: 999px;
  background: var(--acento-suave);
  color: var(--acento-fuerte);
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease;
}
.mesas-demo__lista a:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .mesas-demo__lista a { transition: none; } }
.inicio-mesero a.boton { text-decoration: none; }