/* ============================================================== */
/* Estilos para la vista de mesas moderna */
/* ============================================================== */

/* Tabs horizontales para salones */
.salon-tabs {
  background: #fff;
  border-bottom: 2px solid #e0e0e0;
  padding: 0 20px;
  margin-bottom: 0;
}

.salon-tabs .nav-item {
  margin-right: 30px;
}

.salon-tabs .salon-tab-link {
  color: #9e9e9e;
  font-weight: 500;
  padding: 15px 0;
  border: none;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  background: transparent;
}

.salon-tabs .salon-tab-link:hover {
  color: #e7444c;
  border-bottom-color: transparent;
}

.salon-tabs .salon-tab-link.active {
  color: #e7444c;
  border-bottom: 3px solid #e7444c;
  background: transparent;
}

/* Contenedor de mesas */
.list-mesas {
  padding: 10px 8px;
  /* min-height: 400px; */
  position: relative;
}

.list-mesas.scroll_mesas {
  padding: 20px;
}

/* Cards de mesas - Tamaño uniforme */
.mesa-card {
  background: #fff;
  border: 2px solid #e3f2fd;
  border-radius: 12px;
  padding: 12px 10px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  height: 160px; /* Altura fija para todas las mesas */
  min-height: 160px;
  max-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.mesa-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Mesa libre */
.mesa-card.mesa-libre {
  background: #fff;
  border: 2px solid #90caf9;
}

.mesa-card.mesa-libre .mesa-numero {
  color: #42a5f5;
  font-size: 32px;
  font-weight: bold;
}

/* Mesa ocupada */
.mesa-card.mesa-ocupada {
  background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
  border: 2px solid #ff6b9d;
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
}

.mesa-card.mesa-ocupada .mesa-numero {
  color: #fff;
  font-size: 32px; /* Mismo tamaño que las otras mesas */
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  line-height: 1.2;
}

.mesa-card.mesa-ocupada .mesa-info {
  color: #fff;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
}

.mesa-card.mesa-ocupada .mesa-mozo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
}

.mesa-card.mesa-ocupada .mesa-mozo i {
  font-size: 14px;
}

.mesa-card.mesa-ocupada .mesa-tiempo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  opacity: 0.95;
}

.mesa-card.mesa-ocupada .mesa-tiempo i {
  font-size: 12px;
}

/* Mesa por pagar */
.mesa-card.mesa-por-pagar {
  background: #e3f2fd;
  border: 2px solid #90caf9;
}

.mesa-card.mesa-por-pagar .mesa-numero {
  color: #1976d2;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}

.mesa-card.mesa-por-pagar .mesa-info {
  color: #1976d2;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.mesa-card.mesa-por-pagar .mesa-mozo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 5px;
}

.mesa-card.mesa-por-pagar .mesa-tiempo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 12px;
}

/* Número de mesa */
.mesa-numero {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 0;
}

/* Información adicional de la mesa */
.mesa-info {
  font-size: 14px;
  margin-top: 8px;
}

.mesa-mozo {
  display: flex;
  align-items: center;
  gap: 5px;
}

.mesa-tiempo {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  margin-top: 5px;
}

/* Leyenda de estados */
.mesas-leyenda {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leyenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.leyenda-color {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  display: inline-block;
}

.leyenda-color.ocupado {
  background: #e7444c;
}

.leyenda-color.por-pagar {
  background: #5a9bf3;
}

.leyenda-color.libre {
  background: #90caf9;
}

.leyenda-texto {
  font-size: 13px;
  color: #424242;
  font-weight: 500;
}

/* Grid responsivo - Asegurar tamaños uniformes */
/* Desktop grande (1200px+) - 4 columnas */
@media (min-width: 1200px) {
  .list-mesas .col-xl-3,
  .list-mesas .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  
  .mesa-card {
    height: 160px;
    min-height: 160px;
    max-height: 160px;
  }
}

/* Desktop pequeño / Tablet grande (992px - 1199px) - 3 columnas */
@media (min-width: 992px) and (max-width: 1199px) {
  .list-mesas .col-lg-3,
  .list-mesas .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  
  .mesa-card {
    height: 160px;
    min-height: 160px;
    max-height: 160px;
    padding: 18px;
  }
  
  .mesa-numero {
    font-size: 30px;
  }
  
  .mesa-card.mesa-ocupada .mesa-numero {
    font-size: 30px;
  }
  
  .mesa-card.mesa-por-pagar .mesa-numero {
    font-size: 30px;
  }
}

/* Tablet (768px - 991px) - ENFOQUE ESPECIAL - 2 columnas */
@media (min-width: 768px) and (max-width: 991px) {
  .list-mesas {
    padding: 12px 8px;
  }
  
  /* Forzar 2 columnas en tablets */
  .list-mesas [class*="col-md"],
  .list-mesas [class*="col-sm"],
  .list-mesas [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 8px;
  }
  
  .mesa-card {
    height: 150px;
    min-height: 150px;
    max-height: 150px;
    padding: 14px 10px;
    margin-bottom: 12px;
  }
  
  .mesa-numero {
    font-size: 28px;
  }
  
  .mesa-card.mesa-ocupada .mesa-numero {
    font-size: 28px;
    margin-bottom: 8px;
  }
  
  .mesa-card.mesa-ocupada .mesa-info {
    font-size: 12px;
    gap: 5px;
    margin-top: 6px;
  }
  
  .mesa-card.mesa-ocupada .mesa-mozo {
    font-size: 12px;
  }
  
  .mesa-card.mesa-ocupada .mesa-tiempo {
    font-size: 10px;
  }
  
  .mesa-card.mesa-por-pagar .mesa-numero {
    font-size: 28px;
  }
  
  .mesa-card.mesa-por-pagar .mesa-info {
    font-size: 12px;
  }
  
  .mesas-leyenda {
    bottom: 15px;
    right: 15px;
    padding: 10px 14px;
    font-size: 12px;
  }
  
  .leyenda-texto {
    font-size: 12px;
  }
  
  .leyenda-color {
    width: 18px;
    height: 18px;
  }
}

/* Mobile (hasta 767px) */
@media (max-width: 767px) {
  .list-mesas {
    padding: 10px 6px;
  }
  
  .list-mesas .col-6,
  .list-mesas .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 6px;
  }
  
  .mesa-card {
    height: 130px;
    min-height: 130px;
    max-height: 130px;
    padding: 10px 8px;
    margin-bottom: 10px;
  }
  
  .mesa-numero {
    font-size: 24px;
  }
  
  .mesa-card.mesa-ocupada .mesa-numero {
    font-size: 24px;
    margin-bottom: 6px;
  }
  
  .mesa-card.mesa-ocupada .mesa-info {
    font-size: 11px;
    gap: 4px;
    margin-top: 4px;
  }
  
  .mesa-card.mesa-ocupada .mesa-mozo {
    font-size: 11px;
  }
  
  .mesa-card.mesa-ocupada .mesa-tiempo {
    font-size: 9px;
  }
  
  .mesa-card.mesa-por-pagar .mesa-numero {
    font-size: 24px;
  }
  
  .mesa-card.mesa-por-pagar .mesa-info {
    font-size: 11px;
  }
  
  .mesas-leyenda {
    bottom: 10px;
    right: 10px;
    padding: 8px 10px;
    font-size: 11px;
  }
  
  .leyenda-texto {
    font-size: 11px;
  }
  
  .leyenda-color {
    width: 16px;
    height: 16px;
  }
}

/* ============================================================== */
/* Estilos para el modal de confirmación de mesa */
/* ============================================================== */

#modal-pedido-mesa .modal-dialog {
  max-width: 400px;
}

#modal-pedido-mesa .modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

#modal-pedido-mesa .swal2-icon.swal2-warning {
  border-color: #ff9800;
  color: #ff9800;
  background: #fff3e0;
}

#modal-pedido-mesa .swal2-icon-content {
  color: #ff9800 !important;
  font-weight: bold;
}

#modal-pedido-mesa .btn-dark {
  background-color: #424242;
  border-color: #424242;
  color: #fff;
}

#modal-pedido-mesa .btn-dark:hover {
  background-color: #616161;
  border-color: #616161;
}

#modal-pedido-mesa .btn-success {
  background-color: #4caf50;
  border-color: #4caf50;
  color: #fff;
  font-weight: 500;
}

#modal-pedido-mesa .btn-success:hover {
  background-color: #45a049;
  border-color: #45a049;
}

#modal-pedido-mesa .btn-secondary {
  background-color: #9e9e9e;
  border-color: #9e9e9e;
  color: #fff;
  font-weight: 500;
}

#modal-pedido-mesa .btn-secondary:hover {
  background-color: #757575;
  border-color: #757575;
}

#modal-pedido-mesa #nro_personas_modal {
  border: 1px solid #d9d9d9;
  font-weight: 500;
}

#modal-pedido-mesa #nro_personas_modal:focus {
  border-color: #4caf50;
  box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
}