/*!
 * Custom DataTienda Improvements v1.0
 * Mejoras visuales modernas sobre AdminLTE 2.4.8
 * Compatible con Bootstrap 3.3.7
 * Fecha: 2025-11-23
 *
 * SEGURIDAD: Solo modifica estilos visuales, NO afecta funcionalidad
 * REVERSIBLE: Quitar link del HTML para desactivar
 */

/* ============================================
   VARIABLES Y COLORES MODERNOS
   ============================================ */
:root {
  --primary-color: #3c8dbc;
  --success-color: #00a65a;
  --info-color: #00c0ef;
  --warning-color: #f39c12;
  --danger-color: #dd4b39;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.12);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.2);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
}

/* ============================================
   MEJORAS GLOBALES
   ============================================ */

/* Suavizar fuentes */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Transiciones suaves globales - excluye date pickers y otros elementos que necesitan respuesta inmediata */
*:not(.datepicker):not(.datepicker *):not(.bootstrap-datetimepicker-widget):not(.bootstrap-datetimepicker-widget *):not(.daterangepicker):not(.daterangepicker *) {
  transition: box-shadow var(--transition-normal),
              transform var(--transition-fast),
              background-color var(--transition-normal),
              border-color var(--transition-normal),
              color var(--transition-fast);
}

/* ============================================
   BOXES / CARDS - Diseño más moderno
   ============================================ */
.box {
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid #e8e8e8 !important;
  overflow: hidden;
  transition: all var(--transition-normal) !important;
}

.box:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

.box-header {
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0 !important;
  padding: 15px 20px !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(250,250,250,0.95) 100%);
}

.box-body {
  padding: 20px !important;
}

.box-footer {
  background-color: #fafafa !important;
  border-top: 1px solid #e8e8e8 !important;
  padding: 15px 20px !important;
}

/* Colores de boxes */
.box-primary { border-top-color: var(--primary-color) !important; border-top-width: 3px !important; }
.box-success { border-top-color: var(--success-color) !important; border-top-width: 3px !important; }
.box-info { border-top-color: var(--info-color) !important; border-top-width: 3px !important; }
.box-warning { border-top-color: var(--warning-color) !important; border-top-width: 3px !important; }
.box-danger { border-top-color: var(--danger-color) !important; border-top-width: 3px !important; }

/* ============================================
   BOTONES - Más modernos y con efectos
   ============================================ */
.btn {
  border-radius: var(--border-radius-sm) !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
  transition: all var(--transition-fast) !important;
}

.btn:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-primary { background: linear-gradient(135deg, #3c8dbc 0%, #2c7aaa 100%) !important; }
.btn-success { background: linear-gradient(135deg, #00a65a 0%, #008d4c 100%) !important; }
.btn-info { background: linear-gradient(135deg, #00c0ef 0%, #00acd6 100%) !important; }
.btn-warning { background: linear-gradient(135deg, #f39c12 0%, #e08e0b 100%) !important; }
.btn-danger { background: linear-gradient(135deg, #dd4b39 0%, #d33724 100%) !important; }

/* ============================================
   TABLAS - Diseño más limpio
   ============================================ */
.table {
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.table > thead > tr > th {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border-bottom: 2px solid #dee2e6 !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #495057 !important;
  padding: 15px 12px !important;
}

.table > tbody > tr {
  transition: background-color var(--transition-fast) !important;
}

.table > tbody > tr:hover {
  background-color: #f8f9fa !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(0,0,0,0.02) !important;
}

/* ============================================
   FORMULARIOS - Inputs mejorados
   ============================================ */
.form-control {
  border: 2px solid #e0e0e0 !important;
  border-radius: var(--border-radius-sm) !important;
  padding: 10px 15px !important;
  transition: all var(--transition-normal) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
  height: auto !important;
  min-height: 38px !important;
  line-height: 1.6 !important;
}

.form-control:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.1) !important;
  outline: none !important;
}

/* Select nativo - asegurar visibilidad completa del texto */
select.form-control {
  height: auto !important;
  min-height: 42px !important;
  padding: 10px 15px !important;
  line-height: 1.6 !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
}

select.form-control option {
  padding: 8px 12px !important;
  line-height: 1.6 !important;
  min-height: 30px !important;
}

.form-group label {
  font-weight: 600 !important;
  color: #555 !important;
  margin-bottom: 8px !important;
}

/* ============================================
   SIDEBAR - Menú lateral mejorado
   ============================================ */
.sidebar-menu > li > a {
  border-radius: var(--border-radius-sm);
  margin: 2px 8px;
  padding: 12px 15px !important;
  transition: all var(--transition-fast) !important;
}

.sidebar-menu > li > a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateX(3px);
}

.sidebar-menu > li.active > a {
  border-left: 3px solid var(--primary-color) !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.sidebar-menu .treeview-menu > li > a {
  padding: 8px 15px 8px 35px !important;
  transition: all var(--transition-fast) !important;
}

.sidebar-menu .treeview-menu > li > a:hover {
  transform: translateX(3px);
}

/* ============================================
   BADGES Y LABELS - Más visibles
   ============================================ */
.badge, .label {
  border-radius: 12px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  box-shadow: var(--shadow-sm);
}

/* ============================================
   SMALL BOX - Info boxes del dashboard
   ============================================ */
.small-box {
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  transition: all var(--transition-normal) !important;
}

.small-box:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) scale(1.02);
}

.small-box > .inner {
  padding: 15px 20px !important;
}

.small-box h3 {
  font-weight: 700 !important;
  font-size: 38px !important;
}

.small-box .icon {
  font-size: 80px !important;
  opacity: 0.15 !important;
}

.small-box-footer {
  padding: 8px 15px !important;
  font-weight: 500 !important;
  transition: all var(--transition-fast) !important;
}

.small-box-footer:hover {
  background-color: rgba(0,0,0,0.15) !important;
}

/* ============================================
   MODALES - Diseño mejorado
   ============================================ */
.modal-content {
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  border: none !important;
}

.modal-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 2px solid #dee2e6 !important;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
  padding: 20px 25px !important;
}

.modal-title {
  font-weight: 700 !important;
  color: #333 !important;
}

.modal-body {
  padding: 25px !important;
}

.modal-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6 !important;
  padding: 15px 25px !important;
}

/* ============================================
   ALERTS - Alertas mejoradas
   ============================================ */
.alert {
  border-radius: var(--border-radius-md) !important;
  border-left-width: 4px !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 15px 20px !important;
}

.alert-success {
  background-color: #d4edda !important;
  border-left-color: var(--success-color) !important;
  color: #155724 !important;
}

.alert-info {
  background-color: #d1ecf1 !important;
  border-left-color: var(--info-color) !important;
  color: #0c5460 !important;
}

.alert-warning {
  background-color: #fff3cd !important;
  border-left-color: var(--warning-color) !important;
  color: #856404 !important;
}

.alert-danger {
  background-color: #f8d7da !important;
  border-left-color: var(--danger-color) !important;
  color: #721c24 !important;
}

/* ============================================
   NAVBAR - Header mejorado
   ============================================ */
.main-header .navbar {
  box-shadow: var(--shadow-md) !important;
}

.main-header .logo {
  font-weight: 700 !important;
  transition: all var(--transition-normal) !important;
}

.main-header .logo:hover {
  transform: scale(1.05);
}

/* ============================================
   BREADCRUMBS - Navegación mejorada
   ============================================ */
.breadcrumb {
  background-color: #f8f9fa !important;
  border-radius: var(--border-radius-sm) !important;
  padding: 10px 15px !important;
  box-shadow: var(--shadow-sm);
}

.breadcrumb > li + li:before {
  color: #999 !important;
  padding: 0 8px !important;
}

/* ============================================
   PAGINATION - Paginación mejorada
   ============================================ */
.pagination > li > a,
.pagination > li > span {
  border-radius: var(--border-radius-sm) !important;
  margin: 0 3px;
  border: 2px solid #dee2e6 !important;
  transition: all var(--transition-fast) !important;
}

.pagination > li > a:hover {
  background-color: #e9ecef !important;
  border-color: var(--primary-color) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ============================================
   SCROLLBAR - Scrollbar personalizado (Chrome/Edge)
   ============================================ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
  transition: background var(--transition-normal);
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* ============================================
   GRÁFICOS - Mejoras visuales
   ============================================ */
.chart-responsive {
  padding: 15px !important;
  background-color: #fafafa;
  border-radius: var(--border-radius-sm);
}

/* Morris.js tooltips mejorados */
.morris-hover {
  border-radius: var(--border-radius-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid #ddd !important;
  padding: 10px !important;
}

/* ============================================
   ANIMACIONES PERSONALIZADAS
   ============================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.box, .small-box, .alert {
  animation: fadeIn 0.3s ease;
}

/* ============================================
   RESPONSIVE - Mejoras para móviles
   ============================================ */
@media (max-width: 767px) {
  .box {
    margin-bottom: 15px;
  }

  .box-header {
    padding: 12px 15px !important;
  }

  .box-body {
    padding: 15px !important;
  }

  .small-box h3 {
    font-size: 28px !important;
  }

  .btn {
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
}

/* ============================================
   UTILIDADES ADICIONALES
   ============================================ */

/* Sombras helpers */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Bordes redondeados helpers */
.rounded-sm { border-radius: var(--border-radius-sm) !important; }
.rounded-md { border-radius: var(--border-radius-md) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }

/* Hover effect helpers */
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ============================================
   VISTA DE MESAS - Diseño moderno y responsive
   ============================================ */

/* Contenedor principal del salón */
#df-salon {
  padding: 1rem;
}

/* NUEVA ESTRUCTURA DE MESAS - Card moderna */
.mesa-card {
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--transition-normal) !important;
  cursor: pointer;
  border: none !important;
  overflow: hidden;
  position: relative !important;
  padding: 0 !important;
  min-height: 120px;
  display: flex;
  flex-direction: column;
}

.mesa-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) scale(1.02);
}

/* Header de la mesa - nombre y timer */
.mesa-header {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid rgba(255,255,255,0.2);
  min-height: 60px;
}

.mesa-nombre {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mesa-timer-badge {
  background: rgba(255,255,255,0.3) !important;
  color: #fff !important;
  padding: 0.4rem 0.8rem !important;
  border-radius: 1rem !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  white-space: nowrap !important;
  margin-left: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Cuerpo de la mesa - información */
.mesa-body {
  padding: 0.8rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mesa-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
}

.mesa-label {
  font-weight: 700;
  font-size: 1.4rem;
}

.mesa-value {
  font-weight: 700;
}

.mesa-total {
  font-size: 1.2rem;
}

/* Barra de progreso en la parte inferior */
.mesa-progress {
  height: 6px !important;
  background-color: rgba(0,0,0,0.2) !important;
  overflow: hidden;
  width: 100%;
  margin-top: auto;
}

.mesa-progress-bar {
  height: 100%;
  transition: width var(--transition-normal) !important;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 100%) !important;
}

/* Contenedor principal del salón */
#df-salon {
  padding: 15px;
}

/* Contenedor de mesas con display flex para evitar espacios irregulares */
#mesas_loader {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Asegurar que las mesas tengan el mismo alto y ancho */
#mesas_loader > .lasmesas,
#mesas_loader > div[class*="col-"] {
  float: none !important;
  padding-left: 7.5px !important;
  padding-right: 7.5px !important;
  margin-bottom: 15px !important;
}

/* Solo mostrar flex cuando están visibles (no ocultas por filtro) */
#mesas_loader > .lasmesas:not([style*="display: none"]),
#mesas_loader > div[class*="col-"]:not([style*="display: none"]) {
  display: flex !important;
}

/* Cuando jQuery oculta con .hide(), respetar el display:none */
#mesas_loader > .lasmesas[style*="display: none"],
#mesas_loader > div[class*="col-"][style*="display: none"] {
  display: none !important;
}

/* Desktop: 4 columnas */
@media (min-width: 992px) {
  #mesas_loader > .lasmesas,
  #mesas_loader > div[class*="col-"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
  }
}

/* Tablet: 2 columnas */
@media (min-width: 768px) and (max-width: 991px) {
  #mesas_loader > .lasmesas,
  #mesas_loader > div[class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

/* Móvil: 1 columna */
@media (max-width: 767px) {
  #mesas_loader > .lasmesas,
  #mesas_loader > div[class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Las mesas deben ocupar todo el espacio disponible */
#mesas_loader .mesa-card {
  width: 100% !important;
}

/* Botones de filtro de grupos de mesas */
.btnfiltershome {
  margin: 5px;
  border-radius: var(--border-radius-sm) !important;
  font-weight: 600 !important;
  transition: all var(--transition-fast) !important;
  box-shadow: var(--shadow-sm) !important;
}

.btnfiltershome:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

/* Info-box de las mesas - Diseño mejorado */
.info-box {
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--transition-normal) !important;
  cursor: pointer;
  border: none !important;
  overflow: visible !important;
  position: relative !important;
}

.info-box:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) scale(1.02);
}

/* Efecto de pulso para mesas con pedidos no enviados */
.info-box.bg-red {
  animation: pulseRed 2s infinite;
}

@keyframes pulseRed {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(221, 75, 57, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(221, 75, 57, 0);
  }
}

/* Efecto de brillo para pre-cuentas */
.info-box.bg-aqua {
  animation: glowAqua 3s ease-in-out infinite;
}

@keyframes glowAqua {
  0%, 100% {
    box-shadow: var(--shadow-md);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 192, 239, 0.6);
  }
}

/* Iconos de las mesas - optimizado para 4 columnas */
.info-box-icon {
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  min-width: 80px !important;
  max-width: 80px !important;
  padding: 0.5rem 0.3rem !important;
  font-size: 0.85rem !important;
  line-height: 1.3 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
}

.info-box-icon i {
  font-size: 1.8em !important;
  margin-bottom: 0.3rem !important;
}

/* Contenido de las mesas - optimizado */
.info-box-content {
  padding: 8px 10px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.info-box-text {
  font-weight: 600 !important;
  font-size: 12px !important;
  margin-bottom: 5px !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.info-box-number {
  font-size: 14px !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Barra de progreso mejorada - visible y más gruesa */
.info-box .progress {
  height: 8px !important;
  margin-bottom: 6px !important;
  border-radius: 4px !important;
  background-color: rgba(0,0,0,0.2) !important;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.info-box .progress-bar {
  transition: width var(--transition-normal) !important;
  border-radius: 4px !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
  background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%) !important;
}

/* Descripción del progreso - visible */
.progress-description {
  font-size: 10px !important;
  opacity: 0.9;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Timer de las mesas - posicionado en esquina superior derecha - DOBLE TAMAÑO */
.mesa-timer {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  background: rgba(0,0,0,0.7) !important;
  color: #fff !important;
  padding: 0.8em 1.6em !important;
  border-radius: 1.5rem !important;
  font-weight: 700 !important;
  font-size: 1.8rem !important;
  display: inline-block !important;
  box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.4) !important;
  line-height: 1.2 !important;
  z-index: 10 !important;
  white-space: nowrap !important;
  min-width: 6rem !important;
  text-align: center !important;
}

/* Timer genérico (para otros usos) */
.tdr {
  background: rgba(0,0,0,0.25) !important;
  padding: 0.3em 0.6em !important;
  border-radius: 0.8em !important;
  font-weight: 600 !important;
  font-size: 0.85em !important;
  display: inline-block !important;
  line-height: 1.4 !important;
}

/* Overlay "MESA POR PAGAR" - oculto por defecto */
.mesa-pagar-overlay {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 0.8rem 0.5rem;
  backdrop-filter: blur(3px);
  pointer-events: none;
}

.mesa-pagar-texto {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  animation: bounceInfinite 1.5s ease-in-out infinite;
  letter-spacing: 1px;
}

.mesa-pagar-texto i {
  font-size: 1.5rem;
  animation: moneyShake 0.8s ease-in-out infinite;
}

.mesa-pagar-texto i:first-child {
  animation-delay: 0s;
}

.mesa-pagar-texto i:last-child {
  animation-delay: 0.4s;
}

/* Mostrar overlay solo en mesas bg-aqua o bg-yellow (pre-cuenta/caja) */
.mesa-card.bg-aqua .mesa-pagar-overlay,
.info-box.bg-aqua .mesa-pagar-overlay,
.mesa-card.bg-yellow .mesa-pagar-overlay,
.info-box.bg-yellow .mesa-pagar-overlay {
  display: flex !important;
}

/* Estados de color para las nuevas mesas */
.mesa-card.bg-grey {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
  color: #333 !important;
  border: 2px solid #e0e0e0 !important;
}

.mesa-card.bg-red {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
  color: #fff !important;
  animation: pulseRed 2s infinite;
}

.mesa-card.bg-orange {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
  color: #fff !important;
}

.mesa-card.bg-aqua {
  background: linear-gradient(135deg, #00c0ef 0%, #00a0c6 100%) !important;
  color: #fff !important;
  animation: glowAqua 1.5s ease-in-out infinite, shake 3s ease-in-out infinite;
}

/* Animaciones para estados especiales */
@keyframes pulseRed {
  0%, 100% {
    box-shadow: 0 4px 6px rgba(0,0,0,0.12), 0 0 0 0 rgba(231, 76, 60, 0.7);
  }
  50% {
    box-shadow: 0 4px 6px rgba(0,0,0,0.12), 0 0 0 15px rgba(231, 76, 60, 0);
  }
}

@keyframes glowAqua {
  0%, 100% {
    box-shadow: 0 4px 6px rgba(0,0,0,0.12), 0 0 0 0 rgba(0, 192, 239, 0.7);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 192, 239, 0.9), 0 0 0 10px rgba(0, 192, 239, 0);
  }
}

@keyframes bounceInfinite {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.1) translateY(-10px);
  }
}

@keyframes moneyShake {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-15deg) scale(1.2);
  }
  75% {
    transform: rotate(15deg) scale(1.2);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-3px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(3px);
  }
}

/* Efecto ripple mejorado */
.material-ripple {
  position: relative;
  overflow: hidden;
}

.material-ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.material-ripple:active::after {
  width: 300px;
  height: 300px;
}

/* Responsividad para mesas */
@media (max-width: 767px) {
  .info-box-icon {
    font-size: 0.9em !important;
    padding: 10px !important;
  }

  .info-box-number {
    font-size: 16px !important;
  }

  #df-salon {
    padding: 10px;
  }
}

/* Contenedor flexbox para botones de filtro */
.flexbox {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
}

/* ============================================
   DATE PICKERS - Asegurar funcionamiento correcto
   ============================================ */

/* Asegurar que los calendarios aparezcan sobre todos los elementos */
.datepicker,
.bootstrap-datetimepicker-widget,
.daterangepicker {
  z-index: 9999 !important;
  transition: none !important;
  font-size: 14px !important;
}

/* Elementos internos de los calendarios sin transiciones */
.datepicker *,
.bootstrap-datetimepicker-widget *,
.daterangepicker * {
  transition: none !important;
}

/* Mejorar visibilidad de los calendarios */
.datepicker,
.bootstrap-datetimepicker-widget {
  box-shadow: var(--shadow-xl) !important;
  border-radius: var(--border-radius-md) !important;
  border: 2px solid #ddd !important;
  background-color: #fff !important;
}

.daterangepicker {
  box-shadow: var(--shadow-xl) !important;
  border-radius: var(--border-radius-md) !important;
  border: 2px solid #ddd !important;
  background-color: #fff !important;
}

/* Botones y elementos del datepicker */
.datepicker table tr td,
.datepicker table tr th {
  padding: 8px !important;
  line-height: 1.6 !important;
  min-height: 36px !important;
  text-align: center !important;
  border-radius: var(--border-radius-sm) !important;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
  background-color: #e9ecef !important;
  cursor: pointer !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.selected {
  background-color: var(--primary-color) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.datepicker table tr td.today {
  background-color: #fff3cd !important;
  border: 2px solid var(--warning-color) !important;
}

/* Bootstrap DateTime Picker mejorado */
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
  padding: 8px !important;
  line-height: 1.6 !important;
  min-height: 36px !important;
  border-radius: var(--border-radius-sm) !important;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background-color: var(--primary-color) !important;
  color: #fff !important;
  text-shadow: none !important;
}

.bootstrap-datetimepicker-widget table td.today::before {
  border-bottom-color: var(--warning-color) !important;
}

/* ============================================
   DATERANGE PICKER - Mejoras Extensivas
   ============================================ */

/* Contenedor principal */
.daterangepicker {
  min-width: 650px !important;
  padding: 15px !important;
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Rango de fechas seleccionadas */
.daterangepicker .ranges {
  float: left !important;
  width: 180px !important;
  text-align: left !important;
  margin: 4px !important;
  padding-right: 10px !important;
}

.daterangepicker .ranges ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.daterangepicker .ranges li {
  font-size: 13px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  border-radius: var(--border-radius-sm) !important;
  margin-bottom: 3px !important;
  transition: all var(--transition-fast) !important;
  font-weight: 500 !important;
}

.daterangepicker .ranges li:hover {
  background-color: #e9ecef !important;
  color: #333 !important;
}

.daterangepicker .ranges li.active {
  background-color: var(--primary-color) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Calendarios */
.daterangepicker .calendar {
  float: left !important;
  margin: 4px !important;
}

.daterangepicker .calendar-table {
  background-color: #fff !important;
  padding: 10px !important;
  border: 1px solid #e9ecef !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Headers del calendario */
.daterangepicker .calendar-table thead tr {
  background-color: #f8f9fa !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  padding: 8px !important;
  line-height: 1.5 !important;
  min-height: 36px !important;
  min-width: 36px !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  border-radius: var(--border-radius-sm) !important;
}

.daterangepicker .calendar-table th {
  font-weight: 700 !important;
  color: #555 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Días del mes */
.daterangepicker td.available {
  transition: all var(--transition-fast) !important;
}

.daterangepicker td.available:hover {
  background-color: #e9ecef !important;
  cursor: pointer !important;
  font-weight: 600 !important;
}

/* Día activo/seleccionado */
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--primary-color) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Días en el rango */
.daterangepicker td.in-range {
  background-color: #d6ebf5 !important;
  color: #333 !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
}

.daterangepicker td.start-date {
  border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm) !important;
  background-color: var(--primary-color) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.daterangepicker td.end-date {
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0 !important;
  background-color: var(--primary-color) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.daterangepicker td.start-date.end-date {
  border-radius: var(--border-radius-sm) !important;
}

/* Días deshabilitados */
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: transparent !important;
  color: #ddd !important;
  cursor: not-allowed !important;
}

.daterangepicker td.disabled {
  color: #ccc !important;
  cursor: not-allowed !important;
}

/* Selectores de mes/año */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  font-size: 13px !important;
  padding: 5px 8px !important;
  border: 1px solid #ddd !important;
  border-radius: var(--border-radius-sm) !important;
  background-color: #fff !important;
  font-weight: 600 !important;
  margin: 0 3px !important;
}

.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus {
  border-color: var(--primary-color) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(60, 141, 188, 0.1) !important;
}

/* Botones de navegación (prev/next) */
.daterangepicker th.prev,
.daterangepicker th.next {
  cursor: pointer !important;
  font-size: 16px !important;
  padding: 8px !important;
  transition: all var(--transition-fast) !important;
}

.daterangepicker th.prev:hover,
.daterangepicker th.next:hover {
  background-color: #e9ecef !important;
  border-radius: var(--border-radius-sm) !important;
}

.daterangepicker th.month {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #333 !important;
}

/* Botones de acción (Aplicar/Cancelar) */
.daterangepicker .drp-buttons {
  clear: both !important;
  text-align: right !important;
  padding: 8px !important;
  border-top: 1px solid #e9ecef !important;
  margin-top: 10px !important;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--border-radius-sm) !important;
  transition: all var(--transition-fast) !important;
}

.daterangepicker .drp-buttons .btn-primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, #2c7aaa 100%) !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
}

.daterangepicker .drp-buttons .btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.daterangepicker .drp-buttons .btn-default {
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  color: #666 !important;
}

.daterangepicker .drp-buttons .btn-default:hover {
  background-color: #f8f9fa !important;
  border-color: #999 !important;
}

/* Input de rango seleccionado */
.daterangepicker .drp-selected {
  display: inline-block !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  font-weight: 600 !important;
  color: #555 !important;
  background-color: #f8f9fa !important;
  border-radius: var(--border-radius-sm) !important;
  margin-right: 10px !important;
}

/* Hoy */
.daterangepicker td.today {
  position: relative !important;
  font-weight: 600 !important;
}

.daterangepicker td.today:not(.active):before {
  content: '' !important;
  display: inline-block !important;
  border: solid transparent !important;
  border-width: 0 0 7px 7px !important;
  border-bottom-color: var(--warning-color) !important;
  position: absolute !important;
  bottom: 4px !important;
  right: 4px !important;
}

/* Responsive para DateRangePicker */
@media (max-width: 768px) {
  .daterangepicker {
    min-width: 100% !important;
  }

  .daterangepicker .ranges {
    width: 100% !important;
    float: none !important;
    margin-bottom: 10px !important;
  }

  .daterangepicker .calendar {
    float: none !important;
    width: 100% !important;
  }
}

/* Botones del calendario */
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
  font-weight: 700 !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
  background-color: #e9ecef !important;
  border-radius: var(--border-radius-sm) !important;
}

/* ============================================
   MEJORAS ADICIONALES PARA DATETIMEPICKER
   ============================================ */

/* Contenedor principal del widget */
.bootstrap-datetimepicker-widget.dropdown-menu {
  min-width: 280px !important;
  padding: 12px !important;
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Tabla del calendario - celdas más grandes y legibles */
.bootstrap-datetimepicker-widget table td.day {
  height: 36px !important;
  line-height: 36px !important;
  width: 36px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.bootstrap-datetimepicker-widget table th {
  height: 32px !important;
  line-height: 32px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #555 !important;
}

/* Hover mejorado en días */
.bootstrap-datetimepicker-widget table td.day:hover {
  background-color: #e9ecef !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Día activo/seleccionado */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
  background-color: var(--primary-color) !important;
  border-radius: var(--border-radius-sm) !important;
  font-weight: 700 !important;
}

/* Día de hoy - triángulo más visible */
.bootstrap-datetimepicker-widget table td.today:before {
  border-bottom-color: var(--warning-color) !important;
  border-width: 0 0 8px 8px !important;
}

/* Mes y año seleccionados */
.bootstrap-datetimepicker-widget table td span {
  width: 56px !important;
  height: 56px !important;
  line-height: 56px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.bootstrap-datetimepicker-widget table td span:hover {
  background-color: #e9ecef !important;
  border-radius: var(--border-radius-sm) !important;
}

.bootstrap-datetimepicker-widget table td span.active {
  background-color: var(--primary-color) !important;
  border-radius: var(--border-radius-sm) !important;
  font-weight: 700 !important;
}

/* Botones de navegación del calendario */
.bootstrap-datetimepicker-widget table thead tr:first-child th {
  padding: 10px !important;
  font-size: 16px !important;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
  background-color: #e9ecef !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Picker switch (selector de mes/año) */
.bootstrap-datetimepicker-widget .picker-switch td {
  padding: 10px !important;
}

.bootstrap-datetimepicker-widget .picker-switch td span {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #333 !important;
}

/* Días deshabilitados */
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
  color: #ccc !important;
  background-color: transparent !important;
}

/* Días del mes anterior/siguiente */
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
  color: #bbb !important;
}

/* Time picker (horas/minutos) */
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
  font-size: 1.4em !important;
  font-weight: 700 !important;
  color: #333 !important;
}

/* Botones de incremento/decremento */
.bootstrap-datetimepicker-widget button[data-action] {
  padding: 10px !important;
  font-size: 18px !important;
  color: var(--primary-color) !important;
}

.bootstrap-datetimepicker-widget button[data-action]:hover {
  background-color: #e9ecef !important;
  border-radius: var(--border-radius-sm) !important;
}

/* ============================================
   FIN DE MEJORAS CUSTOM DATATIENDA
   ============================================ */