/* Pixel Mesero — el asistente de pedidos a pantalla completa en la mesa
 * Usa las variables y componentes de bot/css/chat.css (mismo violeta, mismas burbujas y chips);
 * aquí solo va lo propio: pantalla completa, barra del total acumulado, órdenes y estados.
 */

html, body { height: 100%; }
body.mesa-pixel {
  margin: 0;
  overflow: hidden;
  background: linear-gradient(175deg, #0d0d2b 0%, #14143f 55%, #1e1260 100%);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.mesa-sinjs { color: #fff; padding: 24px 16px; font-size: 1rem; }

/* El asistente ocupa la pantalla y no se cierra */
#fb-container.fb-modo-mesa { padding: 0; align-items: center; justify-content: center; }
#fb-container.fb-modo-mesa #fb-window {
  width: min(960px, 100vw);
  height: min(100dvh, 920px);
  max-height: 100dvh;
}
@media (max-width: 1000px) {
  #fb-container.fb-modo-mesa #fb-window { width: 100vw; height: 100dvh; border-radius: 0; }
}
/* Muchas opciones no se comen la conversación: la lista de botones tiene su propio límite */
@media (min-width: 501px) {
  #fb-container.fb-modo-mesa #fb-chips { max-height: 30vh; overflow-y: auto; }
}

/* Barra fija: mesa, código y total acumulado (siempre a la vista) */
.fb-barra-cuenta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: #f1ecfd;
  border-bottom: 1px solid var(--fb-border);
  flex-shrink: 0;
}
.fb-barra-cuenta[hidden] { display: none; }
.fb-barra-cuenta__info { display: flex; flex-direction: column; flex: 1; min-width: 0; font-family: var(--fb-font-b); }
.fb-barra-cuenta__info strong { font: 700 .92rem/1.2 var(--fb-font-h); color: var(--fb-text); }
/* Código y estado de la cuenta: se leen completos. Si no caben en una línea, el estado pasa a la siguiente
   (antes una sola línea con "…" cortaba "Por confirmar en la mesa"). */
.fb-barra-cuenta__sub {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 3px;
  margin-top: 2px;
  font-size: .76rem; line-height: 1.3; color: var(--fb-muted);
}
.fb-barra-cuenta__sub > span { white-space: nowrap; }
.fb-barra-cuenta__codigo b { font-weight: 600; color: var(--fb-text); letter-spacing: .02em; }
.fb-barra-cuenta__estado {
  padding: 1px 8px; border-radius: 999px;
  background: #e4dbfa; color: #4c1d95; font-weight: 600; font-size: .7rem;
}
@media (max-width: 360px) { .fb-barra-cuenta__sub > span { white-space: normal; } }
.fb-barra-cuenta__total {
  display: grid;
  justify-items: end;
  gap: 1px;
  min-height: 48px;
  padding: 6px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--fb-acento);
  color: #fff;
  cursor: pointer;
  font-family: var(--fb-font-b);
  flex-shrink: 0;
  transition: transform .15s ease, background .15s ease;
  touch-action: manipulation;
}
.fb-barra-cuenta__total small { font-size: .68rem; opacity: .85; line-height: 1.1; }
.fb-barra-cuenta__total strong { font: 700 1.05rem/1.1 var(--fb-font-h); font-variant-numeric: tabular-nums; }
.fb-barra-cuenta__total:active { transform: scale(.97); }
@media (hover: hover) { .fb-barra-cuenta__total:hover { background: #6d28d9; } }
.fb-barra-cuenta__total:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }

/* Plegar la barra (solo en el teléfono): queda una línea con la mesa y el total */
.fb-barra-cuenta__plegar { display: none; }
@media (max-width: 640px) {
  .fb-barra-cuenta { gap: 8px; padding: 8px 8px 8px 16px; }
  .fb-barra-cuenta__plegar {
    display: grid; place-items: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border: 0; border-radius: 50%;
    background: transparent; cursor: pointer;
    touch-action: manipulation;
  }
  .fb-barra-cuenta__plegar::before {
    content: ''; width: 9px; height: 9px;
    border: solid var(--fb-muted); border-width: 0 2px 2px 0;
    transform: translateY(2px) rotate(-135deg);   /* flecha hacia arriba: ocultar */
    transition: transform .2s ease;
  }
  .fb-barra-cuenta--plegada .fb-barra-cuenta__plegar::before { transform: translateY(-2px) rotate(45deg); }  /* hacia abajo: mostrar */
  .fb-barra-cuenta__plegar:active { background: #e4dbfa; }
  .fb-barra-cuenta__plegar:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 0; }

  .fb-barra-cuenta--plegada { padding-top: 2px; padding-bottom: 2px; }
  .fb-barra-cuenta--plegada .fb-barra-cuenta__info { flex-direction: row; align-items: baseline; gap: 8px; }
  .fb-barra-cuenta--plegada .fb-barra-cuenta__sub { display: none; }
  .fb-barra-cuenta--plegada .fb-barra-cuenta__total {
    display: flex; align-items: center;
    min-height: 32px; padding: 2px 12px; border-radius: 999px;
  }
  .fb-barra-cuenta--plegada .fb-barra-cuenta__total small { display: none; }
  .fb-barra-cuenta--plegada .fb-barra-cuenta__total strong { font-size: .95rem; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .fb-barra-cuenta__plegar::before { transition: none; } }

/* Código de la cuenta: fácil de leer y dictar */
.fbm-codigo {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 1.12em;
  letter-spacing: .08em;
  background: #ede6fc;
  color: #4c1d95;
  padding: 1px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

/* Mi cuenta: órdenes de la visita */
.fbm-cuenta__datos {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: .8rem; color: var(--fb-muted);
  margin-bottom: 10px;
}
.fbm-cuenta__datos strong { color: var(--fb-text); }
.fbm-orden { border-top: 1px solid var(--fb-border); padding-top: 8px; margin-top: 8px; }
.fbm-orden__cab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; font-size: .86rem; }
.fbm-orden__cab small { color: var(--fb-muted); }
.fbm-orden__cab .fbm-estado:last-child { margin-left: auto; }
.fbm-orden--cancelada .fb-summary-row { text-decoration: line-through; color: var(--fb-muted); }
.fbm-orden--nueva { background: #f6f2fe; border-radius: 10px; padding: 8px; }
.fbm-orden__subtotal { font-size: .82rem; color: var(--fb-muted); }
/* Qué pasa con la cuenta y qué falta para pagar (arriba de los pedidos) */
.fbm-cuenta__estado {
  margin: 0 0 10px; padding: 8px 12px;
  border-radius: 10px; font-size: .84rem; line-height: 1.45;
  background: #eef0f6; color: #34385a;
}
.fbm-cuenta__estado--espera { background: #fff4d6; color: #6b4800; }
.fbm-cuenta__estado--curso  { background: #e0ecff; color: #1e40af; }
.fbm-cuenta__estado--ok     { background: #dcfce7; color: #14532d; }
.fbm-cuenta__estado--marca  { background: #ede6fc; color: #4c1d95; }
.fbm-actualizada { display: block; margin-top: 6px; }
.fbm-recien { animation: fbm-recien .5s ease; }
@keyframes fbm-recien { from { opacity: .55; transform: scale(.99); } to { opacity: 1; transform: none; } }

/* Total acumulado separado de los pedidos */
.fbm-cuenta__totales {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px solid var(--fb-acento);
}

.fbm-estado {
  display: inline-block;
  font-size: .7rem; font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef0f6; color: #4b4f6b;
  white-space: nowrap;
}
.fbm-estado--espera   { background: #fff4d6; color: #7a5200; }
.fbm-estado--curso    { background: #e0ecff; color: #1d4ed8; }
.fbm-estado--ok       { background: #dcfce7; color: #166534; }
.fbm-estado--marca    { background: #ede6fc; color: #5b21b6; }
.fbm-estado--problema { background: #fde2e2; color: #991b1b; }

/* Enlace al proveedor de pagos con forma de botón */
.fbm-boton-enlace {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--fb-acento);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
}
.fbm-boton-enlace:active { transform: scale(.97); }

/* Despedida al finalizar la visita: ventana sobre el chat (una sola vez por cuenta) */
.fbm-despedida {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(13, 13, 43, .55);
  animation: fbm-fondo .2s ease;
}
.fbm-despedida__caja {
  width: min(420px, 100%);
  max-height: 100%; overflow-y: auto;
  padding: 24px 22px 20px;
  border-radius: 22px;
  background: #fff;
  text-align: center;
  font-family: var(--fb-font-b);
  color: var(--fb-text);
  box-shadow: 0 24px 60px rgba(13, 13, 43, .35);
  animation: fbm-caja .24s cubic-bezier(.2, .9, .3, 1.1);
}
.fbm-despedida__pixel { width: 110px; height: auto; margin: -4px auto 6px; display: block; filter: drop-shadow(0 8px 18px rgba(124, 58, 237, .35)); }
.fbm-despedida h2 { margin: 0 0 6px; font: 800 1.35rem/1.2 var(--fb-font-h); }
.fbm-despedida p { margin: 0 0 8px; font-size: .92rem; line-height: 1.5; color: #4b4f6b; }
.fbm-despedida__estado { padding: 8px 10px; border-radius: 10px; background: #f1ecfd; color: #4c1d95 !important; font-size: .84rem !important; }
.fbm-despedida__acciones { display: grid; gap: 8px; margin-top: 14px; }
.fbm-despedida__principal, .fbm-despedida__secundario {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 18px;
  border-radius: 999px; font: 600 .95rem/1 var(--fb-font-b);
  cursor: pointer; text-decoration: none; touch-action: manipulation;
  transition: transform .15s ease, background .15s ease;
}
.fbm-despedida__principal { background: var(--fb-acento); color: #fff; border: 0; }
.fbm-despedida__secundario { background: #fff; color: var(--fb-text); border: 1.5px solid var(--fb-border); }
.fbm-despedida__principal:active, .fbm-despedida__secundario:active { transform: scale(.97); }
@media (hover: hover) {
  .fbm-despedida__principal:hover { background: #6d28d9; }
  .fbm-despedida__secundario:hover { border-color: var(--fb-acento); }
}
.fbm-despedida__principal:focus-visible, .fbm-despedida__secundario:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
/* Pantallas bajas (teléfono acostado): sin la imagen, los botones se ven sin desplazar */
@media (max-height: 520px) {
  .fbm-despedida__pixel { display: none; }
  .fbm-despedida__caja { padding: 16px 18px; }
  .fbm-despedida__acciones { grid-template-columns: 1fr 1fr; }
}
@keyframes fbm-fondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes fbm-caja { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fb-barra-cuenta__total, .fbm-boton-enlace, .fbm-despedida__principal, .fbm-despedida__secundario { transition: none; }
  .fbm-despedida, .fbm-despedida__caja, .fbm-recien { animation: none; }
}