/* ERP Panadería — estilos complementarios (Tailwind maneja el resto) */

/* ---- Mesa map (posicionamiento absoluto dinámico) ---- */
.mesa-map { position: relative; overflow: hidden; }

.mesa-item {
  position: absolute;
  width: 92px; height: 82px;
  border-radius: 14px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; color: #fff; font-weight: 700;
  font-size: .8rem; cursor: pointer;
  transition: transform .15s, filter .15s, box-shadow .15s;
  user-select: none;
}
.mesa-item:hover { transform: scale(1.08); filter: brightness(1.12); }
.mesa-item.libre   { background: linear-gradient(145deg,#34d399,#059669); box-shadow: 0 6px 16px rgba(16,185,129,.4); }
.mesa-item.ocupada { background: linear-gradient(145deg,#f87171,#dc2626); box-shadow: 0 6px 16px rgba(239,68,68,.4); }
@keyframes pulseLista {
  0%, 100% { box-shadow: 0 6px 16px rgba(245,158,11,.5), 0 0 0 0 rgba(245,158,11,.7); }
  50%       { box-shadow: 0 6px 16px rgba(245,158,11,.5), 0 0 0 14px rgba(245,158,11,0); }
}
.mesa-item.lista {
  background: linear-gradient(145deg,#fbbf24,#d97706);
  animation: pulseLista 1.4s ease-in-out infinite;
}
.mesa-item.inactiva{ background: #94a3b8; cursor: not-allowed; box-shadow: none; }
.mesa-item .mesa-num    { font-size: 1.3rem; }
.mesa-item .mesa-estado { font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }

/* ---- Toasts ---- */
#toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  display: flex; flex-direction: column; gap: .5rem; z-index: 9999;
}
.toast {
  min-width: 280px; padding: .85rem 1.25rem;
  border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.25);
  color: #fff; font-weight: 600; font-size: .9rem;
  animation: slideIn .3s cubic-bezier(.16,1,.3,1);
}
.toast-success { background: linear-gradient(135deg,#10b981,#059669); }
.toast-error   { background: linear-gradient(135deg,#f87171,#ef4444); }
.toast-warning { background: linear-gradient(135deg,#fbbf24,#d97706); color: #1c1917; }

/* ---- Modal overlay ---- */
.modal-overlay { display: none; }
.modal-overlay.open { display: flex; }

/* ---- Admin sections ---- */
.section { display: none; }

@keyframes sectionEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.section.show {
  display: block;
  animation: sectionEnter .38s cubic-bezier(.16,1,.3,1) forwards;
}


/* ---- Reportes: canvas heights ---- */
#s-reportes canvas { max-height: 140px; }
#s-reportes #chart-horas { max-height: 180px; }
#s-reportes #chart-top-prods, #s-reportes #chart-top-units { max-height: 220px; }
#s-reportes #chart-metodos { max-height: 120px; }

/* ---- PIN dots ---- */
.pin-dot { transition: background .2s, border-color .2s; }
.pin-dot.filled { background: #f59e0b; border-color: #f59e0b; }

/* ---- Animations ---- */
@keyframes slideIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-10px); }
  75%      { transform: translateX(10px); }
}
.shake { animation: shake .35s ease; }

@keyframes pulseNew {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  50%      { box-shadow: 0 0 0 16px rgba(16,185,129,0); }
}
.comanda.nueva { animation: pulseNew 1.2s ease 3; }