/* Estilos del panel Restobot — complementan Tailwind con componentes específicos */
/* Relevante: diferenciación visual transferencia vs efectivo (KPI F1A) vive aquí */

/* ── Columna izquierda (chat panel) ─────────────────────────────────────────── */

/* Ancho fijo de la columna de chats — lo suficiente para mostrar nombre + preview */
.chat-panel {
  width: 280px;
  flex-shrink: 0;
}

/* Tarjeta de conversación en el chat panel — una fila por cliente */
.conv-card {
  padding: 12px 16px;
  border-bottom: 1px solid #F3F4F6;
  cursor: pointer;
  transition: background 0.1s;
}
.conv-card:hover {
  background: #F9FAFB;
  cursor: pointer;
}
.conv-card.conv-active {
  background: #EFF6FF; /* Resalta la conversación seleccionada */
}

/* Indicador de mensaje nuevo — punto azul sobre la card */
.conv-unread-dot {
  width: 8px;
  height: 8px;
  background: #3B82F6;
  border-radius: 9999px;
  flex-shrink: 0;
}

/* ── Columnas Kanban del tablero de pedidos ─────────────────────────────────── */

.kanban-col {
  width: 290px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  height: 100%;       /* hereda del contenedor padre con altura fija */
  overflow: hidden;   /* evita que el contenido escape del contenedor antes de llegar al cards-container */
}

/* Encabezado de columna no debe encogerse aunque haya muchas cards */
.col-header { flex-shrink: 0; }

/* Contenedor de tarjetas — patrón estándar para flex child scrollable:
   flex:1 1 0 + min-height:0 obliga a que la altura sea calculada por el flex layout
   y no por el contenido, permitiendo que overflow-y:auto haga scroll real */
.cards-container {
  flex: 1 1 0;              /* basis 0 + grow + shrink — altura controlada por flex */
  min-height: 0;            /* libera al hijo de su altura intrínseca de contenido */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 4px 24px 4px;
}

/* Scrollbar siempre visible — Chrome en Windows lo oculta por defecto y el operador no
   se daba cuenta que podía hacer scroll dentro de cada columna */
.cards-container::-webkit-scrollbar {
  width: 8px;
}
.cards-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}
.cards-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
.cards-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* Encabezados de columna — el color identifica el estado del flujo */
.col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.count-badge {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 9999px;
  padding: 1px 8px;
  font-size: 0.75rem;
}

/* Colores por estado — semáforo visual de la operación */
.col-pending_payment { background: #FEF9C3; color: #854D0E; }
.col-in_kitchen      { background: #FEE2E2; color: #991B1B; }
.col-in_delivery     { background: #DBEAFE; color: #1E40AF; }
.col-delivered       { background: #DCFCE7; color: #166534; }

/* ── Tarjeta de pedido ──────────────────────────────────────────────────────── */

.card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  /* Borde izquierdo de color — identifica el método de pago (KPI F1A) */
  border-left: 4px solid #E5E7EB;
  overflow: hidden;
  transition: box-shadow 0.15s;
  /* KEY: sin esto los cards se comprimen como flex children del container y el botón queda clipeado.
     Con flex-shrink:0 mantienen su altura natural y el cards-container hace scroll real */
  flex-shrink: 0;
}
.card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* KPI F1A — diferenciación visual: transferencia (índigo) vs efectivo (verde) */
.card-transfer { border-left-color: #6366F1; }
.card-cash     { border-left-color: #22C55E; }

/* Divisiones internas de la tarjeta */
.card-section {
  padding: 9px 14px;
  border-bottom: 1px solid #F3F4F6;
}
.card-section:last-child { border-bottom: none; }

/* ── Banda de método de pago — ocupa el ancho completo de la card ──────────── */
/* Más visible que un badge pequeño — el operador la ve desde lejos en la cocina */

.pay-band {
  padding: 6px 14px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.pay-band-sub {
  font-weight: 400;
  font-size: 0.75rem;
  opacity: 0.7;
}

.pay-band-transfer {
  background: #EEF2FF;
  color: #3730A3;
}
.pay-band-cash {
  background: #F0FDF4;
  color: #166534;
}
.pay-band-card {
  background: #FAF5FF;
  color: #7E22CE;
}

/* ── Comprobante de pago (KPI F1A) ──────────────────────────────────────────── */

/* Miniatura del comprobante — clickeable para pantalla completa */
.proof-img {
  width: 100%;
  max-height: 130px;
  object-fit: cover;
  border-radius: 6px;
  cursor: zoom-in;
  margin-top: 5px;
  border: 1px solid #E5E7EB;
  display: block;
  transition: opacity 0.15s;
}
.proof-img:hover { opacity: 0.85; }

/* Indicador cuando la transferencia aún no tiene comprobante */
.no-proof-badge {
  font-size: 0.72rem;
  color: #92400E;
  background: #FFFBEB;
  border: 1px dashed #FCD34D;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-block;
}

/* ── Botones de ícono pequeños (retroceder y cancelar) en el header de la card ──── */

.btn-icon {
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  color: #6B7280;
  transition: all 0.12s ease;
  padding: 0;
}
.btn-icon:hover {
  background: #F3F4F6;
  color: #111827;
}

/* Botón retroceder estado — gris claro, hover gris */
.btn-back:hover {
  background: #FEF3C7;
  border-color: #FCD34D;
  color: #92400E;
}

/* Botón cancelar pedido — rojo en hover para indicar acción destructiva */
.btn-cancel:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #991B1B;
}

/* ── Botón de avance de estado (KPI F1A: un click) ─────────────────────────── */

.btn-advance {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: #111827;
  color: white;
  font-weight: 600;
  font-size: 0.82rem;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background 0.12s;
  border-radius: 0 0 7px 7px;
}
.btn-advance:hover  { background: #374151; }
.btn-advance:active { background: #6B7280; }

/* ── Badges de estado WebSocket ─────────────────────────────────────────────── */

.ws-connected    { background: #DCFCE7; color: #166534; }
.ws-connecting   { background: #FEF9C3; color: #854D0E; }
.ws-disconnected { background: #FEE2E2; color: #991B1B; }

/* ── Tarjetas colapsables (columna Entregado) ───────────────────────────────── */

/* El cuerpo de la tarjeta se oculta cuando está colapsada */
.card-collapsed .card-body { display: none; }

/* El resumen compacto se muestra solo cuando está colapsada */
.collapsed-summary {
  display: none;
  padding: 4px 14px 10px;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.82rem;
}
.card-collapsed .collapsed-summary { display: flex; }

/* Las tarjetas entregadas muestran cursor de puntero — son expandibles */
.card-collapsed { cursor: pointer; }

/* Botones de acción se ocultan en la columna entregado (no hay nada que hacer) */
.card-collapsed .btn-icon { display: none; }

/* ── Animación de entrada para nuevos elementos en tiempo real ──────────────── */

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.item-new { animation: slideIn 0.28s ease-out; }

@keyframes pulseQueja {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  50%       { box-shadow: 0 0 0 7px rgba(239,68,68,0.5); }
}
.card-pulse-queja { animation: pulseQueja 1.0s ease-in-out infinite; }

@keyframes pulseAtencion {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234,179,8,0); }
  50%       { box-shadow: 0 0 0 6px rgba(234,179,8,0.55); }
}
.conv-pulse-atencion { animation: pulseAtencion 1.0s ease-in-out infinite; }

@keyframes pulseDelivery {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
  50%       { box-shadow: 0 0 0 7px rgba(16,185,129,0.6); }
}
.conv-pulse-delivery { animation: pulseDelivery 0.8s ease-in-out infinite; }

/* ── Toast notifications ─────────────────────────────────────────────────────── */

#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  animation: slideIn 0.2s ease-out;
  min-width: 200px;
  max-width: 320px;
  pointer-events: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast-success { background: #059669; }
.toast-error   { background: #DC2626; }
.toast-info    { background: #2563EB; }

/* ── Drag & drop Kanban ──────────────────────────────────────────────────────── */

/* Cursor grab en tarjetas arrastrables (no aplica a entregadas, que usan pointer) */
.card:not(.card-collapsed) {
  cursor: grab;
}

/* Tarjeta siendo arrastrada — se desvanece en su posición original */
.card.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* Columna destino resaltada durante el drag */
.cards-container.drag-over {
  border: 2px dashed #6366F1;
  background: #EEF2FF;
  border-radius: 8px;
}