/**
 * OpenRest - Override de Estilos Naranja
 * Basado en el diseño del landing page
 * Fecha: 2025-01-09 - v2.1
 * 
 * IMPORTANTE: Este archivo debe ser incluido DESPUÉS de style_all.css
 * Para activar: Agregar <link> en header.php o @import en style_all.css
 */

/* ========================================
   VARIABLES DE COLOR
   ======================================== */
:root {
  /* Colores principales del tema naranja */
  --openrest-primary: #FF6B35;      /* Naranja principal */
  --openrest-primary-hover: #ff5722; /* Naranja hover */
  --openrest-secondary: #FF8C42;    /* Naranja claro */
  --openrest-accent: #FFA500;       /* Naranja accent */
  
  /* Colores de marca específicos del logo */
  --openrest-icon-blue: #0074BA;    /* Azul del ícono chef */
  --openrest-text-open: #3A4752;    /* Gris oscuro del texto Open */
  --openrest-text-rest: #F8285A;    /* Rosa/Rojo del texto Rest */
  
  /* Colores de marca */
  --openrest-dark: #2D3436;         /* Gris oscuro moderno */
  --openrest-text: #4A5568;         /* Texto principal */
  --openrest-text-light: #718096;   /* Texto secundario */
  
  /* Colores funcionales */
  --openrest-success: #10B981;      /* Verde moderno */
  --openrest-success-hover: #059669;
  --openrest-danger: #EF4444;       /* Rojo moderno */
  --openrest-danger-hover: #DC2626;
  --openrest-warning: #F59E0B;      /* Amarillo/Naranja */
  --openrest-info: #06B6D4;         /* Cyan moderno */
  
  /* Fondos y bordes */
  --openrest-bg-light: #FFF5F0;     /* Fondo naranja muy claro */
  --openrest-bg-hover: #FFF0E6;
  --openrest-border: #FFE0D1;       /* Borde naranja claro */
}

/* ========================================
   TEXTOS DE MARCA
   ======================================== */
.text-open {
  color: var(--openrest-text-open) !important;
}

.text-rest {
  color: var(--openrest-text-rest) !important;
}

.icon-brand,
.text-brand {
  color: var(--openrest-icon-blue) !important;
}

/* Logo en navbar */
.navbar-header .navbar-brand b {
  color: var(--openrest-dark) !important;
}

.navbar-header .navbar-brand b:last-child {
  color: var(--openrest-primary) !important;
}

/* ========================================
   BOTONES PRINCIPALES
   ======================================== */
.btn-primary,
button.btn-primary {
  background-color: var(--openrest-primary) !important;
  border-color: var(--openrest-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
button.btn-primary:hover {
  background-color: var(--openrest-primary-hover) !important;
  border-color: var(--openrest-primary-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 6px rgba(255, 107, 53, 0.2) !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--openrest-primary) !important;
  border-color: var(--openrest-primary) !important;
  opacity: 0.65;
}

/* FIX: Asegurar que los iconos en botones primary sean blancos */
.btn-primary i,
.btn-primary svg,
.btn-primary [class*="ti-"],
.btn-primary [class*="icon"],
.btn-primary iconify-icon,
.btn-primary span[class*="icon"],
button.btn-primary i,
button.btn-primary svg,
button.btn-primary [class*="ti-"],
button.btn-primary [class*="icon"],
button.btn-primary iconify-icon {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Botones circulares específicos de Ajustes */
.btn-circle.btn-primary,
.btn-rounded-circle.btn-primary,
.rounded-circle.btn-primary {
  background-color: var(--openrest-primary) !important;
  border-color: var(--openrest-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-circle.btn-primary i,
.btn-rounded-circle.btn-primary i,
.rounded-circle.btn-primary i,
.btn-circle.btn-primary [class*="ti-"],
.btn-rounded-circle.btn-primary [class*="ti-"],
.rounded-circle.btn-primary [class*="ti-"] {
  color: #ffffff !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

/* Fix específico para módulo de Ajustes */
#ajuste .btn-primary i,
#ajuste .btn-primary [class*="ti-"],
#ajuste .bg-primary i,
#ajuste .bg-primary [class*="ti-"],
#ajuste .rounded-circle i,
#ajuste .rounded-circle [class*="ti-"],
.ajuste-module .btn-primary i,
.ajuste-module .btn-primary [class*="ti-"],
.ajuste-module .bg-primary i,
.ajuste-module .bg-primary [class*="ti-"] {
  color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Botones circulares con bg-primary en Ajustes */
.rounded-circle.bg-primary,
.btn.rounded-circle.bg-primary,
a.rounded-circle.bg-primary {
  background-color: var(--openrest-primary) !important;
  color: white !important;
}

.rounded-circle.bg-primary i,
.rounded-circle.bg-primary [class*="ti-"],
.rounded-circle.bg-primary [class*="icon"],
.btn.rounded-circle.bg-primary i,
.btn.rounded-circle.bg-primary [class*="ti-"],
a.rounded-circle.bg-primary i,
a.rounded-circle.bg-primary [class*="ti-"] {
  color: white !important;
  fill: white !important;
}

/* Botón outline */
.btn-outline-primary {
  color: var(--openrest-primary) !important;
  border-color: var(--openrest-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--openrest-primary) !important;
  border-color: var(--openrest-primary) !important;
  color: #ffffff !important;
}

/* ========================================
   BOTONES DE ESTADO (Success, Danger, etc)
   ======================================== */
.btn-success,
.btn-green {
  background-color: var(--openrest-success) !important;
  border-color: var(--openrest-success) !important;
}

.btn-success:hover,
.btn-green:hover {
  background-color: var(--openrest-success-hover) !important;
  border-color: var(--openrest-success-hover) !important;
}

.btn-danger,
.btn-red {
  background-color: var(--openrest-danger) !important;
  border-color: var(--openrest-danger) !important;
}

.btn-danger:hover,
.btn-red:hover {
  background-color: var(--openrest-danger-hover) !important;
  border-color: var(--openrest-danger-hover) !important;
}

.btn-warning {
  background-color: var(--openrest-warning) !important;
  border-color: var(--openrest-warning) !important;
}

.btn-info {
  background-color: var(--openrest-info) !important;
  border-color: var(--openrest-info) !important;
}

/* ========================================
   FONDOS DE COLOR
   ======================================== */
.bg-primary {
  background-color: var(--openrest-primary) !important;
  color: white !important; /* Texto blanco sobre fondo naranja */
}

/* FIX CRÍTICO: Iconos blancos sobre fondos naranjas */
.bg-primary i,
.bg-primary svg,
.bg-primary [class*="ti-"],
.bg-primary [class*="icon"],
.bg-primary iconify-icon,
.bg-primary span,
.bg-primary .text-primary,
.bg-primary .icon-primary,
[class*="bg-primary"] i,
[class*="bg-primary"] [class*="ti-"],
[class*="bg-primary"] [class*="icon"] {
  color: white !important;
  fill: white !important;
}

.bg-success {
  background-color: var(--openrest-success) !important;
  color: white !important;
}

.bg-danger {
  background-color: var(--openrest-danger) !important;
}

.bg-warning {
  background-color: var(--openrest-warning) !important;
}

.bg-info {
  background-color: var(--openrest-info) !important;
}

/* ========================================
   NAVEGACIÓN Y SIDEBAR
   ======================================== */
/* SIDEBAR MEJORADO - SIMPLE Y ELEGANTE */
.left-sidebar {
  background: #ffffff !important;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05) !important;
  border-right: 1px solid #f0f0f0 !important;
}

/* Perfil de usuario en sidebar */
.user-profile {
  background: linear-gradient(135deg, var(--openrest-primary) 0%, var(--openrest-primary-hover) 100%) !important;
  padding: 0.75rem !important; /* Reducido de 1.5rem */
  margin-bottom: 1rem !important;
  position: relative !important;
  overflow: hidden !important;
}

.user-profile::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  right: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%) !important;
  animation: pulse 3s ease-in-out infinite !important;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.3; }
}

.user-profile .profile-img {
  border: 3px solid rgba(255,255,255,0.3) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
  margin-bottom: 0.5rem !important;
  border-radius: 50% !important;
  overflow: hidden !important; /* Ocultar bordes cuadrados */
  background: transparent !important;
}

.user-profile .profile-img img {
  border-radius: 50% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Items del menú - Simple y limpio */
.sidebar-nav ul li a {
  color: #6c757d !important;
  padding: 0.75rem 1.25rem !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
}

.sidebar-nav ul li a:hover {
  background: rgba(255, 107, 53, 0.05) !important;
  color: var(--openrest-primary) !important;
  padding-left: 1.5rem !important;
}

/* Item activo - Destacado pero simple */
.sidebar-nav > ul > li.active > a {
  background: var(--openrest-primary) !important;
  color: white !important;
  border-radius: 0 !important;
}

.sidebar-nav > ul > li.active > a::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: var(--openrest-primary-hover) !important;
}

/* Iconos del sidebar - Simple */
.sidebar-nav .aside-icon,
.sidebar-nav iconify-icon {
  font-size: 1.1rem !important;
  margin-right: 0.75rem !important;
  color: #6c757d !important;
  transition: all 0.3s ease !important;
}

.sidebar-nav ul li a:hover .aside-icon,
.sidebar-nav ul li a:hover iconify-icon {
  color: var(--openrest-primary) !important;
  transform: translateX(2px) !important;
}

.sidebar-nav > ul > li.active > a .aside-icon,
.sidebar-nav > ul > li.active > a iconify-icon {
  color: white !important;
}

/* Submenús - Diseño colapsable elegante */
.sidebar-nav ul ul {
  background: transparent !important;
  border-left: none !important;
  margin-left: 1rem !important; /* Reducido de 2.5rem para mejor alineación */
  padding: 0.25rem 0 !important;
  position: relative !important;
}

/* Línea naranja ELIMINADA - causaba problemas de alineación */
.sidebar-nav ul ul::before {
  display: none !important;
  content: none !important;
}

/* OCULTAR la línea naranja cuando el sidebar está colapsado */
.mini-sidebar .sidebar-nav ul ul::before,
.mini-sidebar .sidebar-nav ul ul::after,
.mini-sidebar .sidebar-nav ul li ul::before,
.mini-sidebar .sidebar-nav ul li ul::after,
.mini-sidebar .sidebar-nav > ul > li ul::before,
.mini-sidebar .sidebar-nav > ul > li ul::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  background: none !important;
  border: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.sidebar-nav ul ul li a {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  color: #8b95a7 !important;
  border-radius: 8px !important;
  margin: 0.125rem 0 !important;
}

.sidebar-nav ul ul li a:hover {
  background: rgba(255, 107, 53, 0.05) !important;
  color: var(--openrest-primary) !important;
  transform: translateX(2px) !important;
}

.sidebar-nav ul ul li.active > a {
  background: rgba(255, 107, 53, 0.1) !important;
  color: var(--openrest-primary) !important;
  font-weight: 600 !important;
}

/* Separadores de sección */
.sidebar-nav .nav-small-cap {
  color: #8898aa !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 1.5rem 1.5rem 0.5rem !important;
  position: relative !important;
}

.sidebar-nav .nav-small-cap::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 1.5rem !important;
  right: 1.5rem !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--openrest-primary), transparent) !important;
}

/* Botón de sonido mejorado */
.sidebar-nav #toggleSonido {
  background: white !important;
  border: 2px solid var(--openrest-primary) !important;
  color: var(--openrest-primary) !important;
  transition: all 0.3s ease !important;
}

.sidebar-nav #toggleSonido:hover {
  background: var(--openrest-primary) !important;
  color: white !important;
  transform: rotate(15deg) scale(1.1) !important;
}

/* Scrollbar personalizada para sidebar */
.sidebar-nav::-webkit-scrollbar {
  width: 6px !important;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05) !important;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--openrest-primary) !important;
  border-radius: 3px !important;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: var(--openrest-primary-hover) !important;
}

/* ========================================
   MINI SIDEBAR (Menú colapsado)
   ======================================== */

/* Cuando el sidebar está colapsado */
.mini-sidebar .left-sidebar {
  width: 70px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Resetear el contenedor principal del sidebar */
.mini-sidebar .scroll-sidebar {
  padding: 0 !important;
  margin: 0 !important;
  width: 70px !important;
}

/* Ajustar items principales del menú en modo mini */
.mini-sidebar .sidebar-nav > ul > li > a.sidebar-link {
  padding: 12px 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
  width: 70px !important;
  position: relative !important;
  height: 48px !important;
  box-sizing: border-box !important;
}

/* Ajustar items de submenú */
.mini-sidebar .sidebar-nav ul ul li a {
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
  width: 70px !important;
  position: relative !important;
  height: 40px !important;
}

/* Centrar iconos principales con iconify-icon */
.mini-sidebar .sidebar-nav > ul > li > a iconify-icon.aside-icon {
  margin: 0 !important;
  font-size: 1.3rem !important;
  width: auto !important;
  display: inline-block !important;
}

/* Centrar el contenedor round-16 de los submenús */
.mini-sidebar .sidebar-nav ul ul li a .round-16 {
  margin: 0 !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Iconos dentro del round-16 */
.mini-sidebar .sidebar-nav ul ul li a .round-16 iconify-icon {
  font-size: 0.875rem !important;
  margin: 0 !important;
}

/* Botón de sonido especial */
.mini-sidebar .sidebar-nav .sidebar-item .sidebar-link.d-flex {
  padding: 12px 0 !important;
  justify-content: center !important;
  width: 70px !important;
}

.mini-sidebar .sidebar-nav .sidebar-item .sidebar-link.d-flex .d-flex {
  display: none !important;
}

.mini-sidebar .sidebar-nav .sidebar-item #toggleSonido {
  margin: 0 !important;
}

/* Ocultar TODO el texto cuando está colapsado */
.mini-sidebar .sidebar-nav ul li a span,
.mini-sidebar .sidebar-nav ul li a .hide-menu {
  display: none !important;
}

/* Mostrar submenús pero con diseño compacto */
.mini-sidebar .sidebar-nav ul ul {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Alinear iconos de submenú con los principales */
.mini-sidebar .sidebar-nav ul ul li {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Los items de submenú ya están cubiertos arriba, eliminar duplicado */

/* Iconos principales - Color normal/gris oscuro */
.mini-sidebar .sidebar-nav > ul > li > a i,
.mini-sidebar .sidebar-nav > ul > li > a .ti,
.mini-sidebar .sidebar-nav > ul > li > a iconify-icon {
  color: #6c757d !important;
  font-size: 1.2rem !important;
}

/* Estado activo con círculo - Corregir alineación */
.mini-sidebar .sidebar-nav > ul > li.active > a {
  background: transparent !important;
  position: relative !important;
}

.mini-sidebar .sidebar-nav > ul > li.active > a::before {
  content: '' !important;
  position: absolute !important;
  width: 36px !important;
  height: 36px !important;
  background: var(--openrest-primary) !important;
  border-radius: 50% !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 0 !important;
  opacity: 0.1 !important;
}

/* Iconos principales activos - Naranja */
.mini-sidebar .sidebar-nav > ul > li.active > a i,
.mini-sidebar .sidebar-nav > ul > li.active > a .ti,
.mini-sidebar .sidebar-nav > ul > li.active > a iconify-icon {
  color: var(--openrest-primary) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Iconos de submenú - Color más claro/diferente */
.mini-sidebar .sidebar-nav ul ul li a i,
.mini-sidebar .sidebar-nav ul ul li a .ti,
.mini-sidebar .sidebar-nav ul ul li a iconify-icon {
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: #adb5bd !important; /* Gris más claro */
}

/* Hover en items principales */
.mini-sidebar .sidebar-nav > ul > li > a:hover i,
.mini-sidebar .sidebar-nav > ul > li > a:hover .ti,
.mini-sidebar .sidebar-nav > ul > li > a:hover iconify-icon {
  color: var(--openrest-primary) !important;
}

/* Hover en submenú items */
.mini-sidebar .sidebar-nav ul ul li a:hover i,
.mini-sidebar .sidebar-nav ul ul li a:hover .ti,
.mini-sidebar .sidebar-nav ul ul li a:hover iconify-icon {
  color: var(--openrest-secondary) !important; /* Naranja más claro */
}

/* Submenú activo */
.mini-sidebar .sidebar-nav ul ul li.active > a i,
.mini-sidebar .sidebar-nav ul ul li.active > a .ti,
.mini-sidebar .sidebar-nav ul ul li.active > a iconify-icon {
  color: var(--openrest-secondary) !important;
}

/* Ajustar perfil de usuario en mini sidebar */
.mini-sidebar .user-profile {
  padding: 0.5rem 0 !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 70px !important;
}

.mini-sidebar .user-profile .profile-text {
  display: none !important;
}

.mini-sidebar .user-profile .profile-img {
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
}

/* Ajustar el contenedor de la imagen */
.mini-sidebar .user-profile .profile-pic {
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 40px !important;
  height: 40px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}

/* Eliminar cualquier padding o margin que cause desalineación */
.mini-sidebar .sidebar-nav,
.mini-sidebar .sidebar-nav ul,
.mini-sidebar .sidebar-nav > ul,
.mini-sidebar .sidebar-nav ul li,
.mini-sidebar .sidebar-nav > ul > li {
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 70px !important;
  list-style: none !important;
}

/* Forzar que el nav ocupe todo el ancho */
.mini-sidebar .sidebar-nav {
  width: 70px !important;
  overflow: visible !important;
}

/* Remover TODAS las líneas/bordes izquierdos de submenús */
.mini-sidebar .sidebar-nav ul ul::before,
.mini-sidebar .sidebar-nav ul ul::after,
.mini-sidebar .sidebar-nav ul ul li::before,
.mini-sidebar .sidebar-nav ul ul li::after,
.mini-sidebar .sidebar-nav ul li ul::before,
.mini-sidebar .sidebar-nav ul li ul::after,
.mini-sidebar .sidebar-nav > ul > li > ul::before,
.mini-sidebar .sidebar-nav > ul > li > ul::after,
.mini-sidebar .collapse::before,
.mini-sidebar .collapse::after {
  display: none !important;
  content: none !important;
  border: none !important;
  width: 0 !important;
  background: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Resetear padding/margin para submenús */
.mini-sidebar .sidebar-nav ul ul {
  padding: 0 !important;
  margin: 0 !important;
  border-left: none !important;
  background: rgba(0,0,0,0.02) !important; /* Fondo muy sutil */
  border-radius: 0 !important;
  width: 70px !important;
}

/* Asegurar que los items de submenú no tengan indent */
.mini-sidebar .sidebar-nav ul ul li {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Forzar alineación de los links de submenú */
.mini-sidebar .sidebar-nav ul ul li a {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Nav small caps en mini sidebar */
.mini-sidebar .sidebar-nav .nav-small-cap {
  text-align: center !important;
  padding: 0.5rem 0 !important;
  font-size: 0.625rem !important;
}

/* Resetear arrows/indicadores de expansión */
.mini-sidebar .sidebar-nav .has-arrow::after,
.mini-sidebar .sidebar-nav .has-arrow > a::after {
  display: none !important;
}

/* Ocultar indicadores de estado expandido */
.mini-sidebar .sidebar-nav [aria-expanded="true"]::after {
  display: none !important;
}

/* ========================================
   FIN SIDEBAR MODERNO
   ======================================== */
.topbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--openrest-border) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

/* Estilo del header/navbar similar al landing */
header.topbar {
  background: white !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
  padding: 0.5rem 0 !important;
  min-height: 70px !important;
}

/* Logo text container */
.topbar .logo-text {
  display: flex !important;
  flex-direction: column !important;
}

/* Logo container */
.topbar .logo-main {
  font-weight: 900 !important;
  font-size: 1.8rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Icono del logo chef-hat */
.topbar .logo-icon {
  color: var(--openrest-icon-blue) !important;
  font-size: 1.8rem !important;
  font-weight: 900 !important;
  margin-right: 0.3rem !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 1.8rem !important;
}

/* Logo en navbar con slogan */
.topbar .text-open {
  color: var(--openrest-text-open) !important;
  font-weight: 900 !important;
  font-size: 1.8rem !important;
}

.topbar .text-rest {
  color: var(--openrest-text-rest) !important;
  font-weight: 900 !important;
  font-size: 1.8rem !important;
}

/* Agregar slogan debajo del logo */
.topbar .logo-tagline {
  color: #6B7280 !important;
  font-style: italic !important;
  letter-spacing: 0.05em !important; /* Espaciado ajustado */
  font-size: 0.88rem !important; /* Tamaño reducido para que quepa */
  margin-top: 0px !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding-left: 0.05em !important;
  line-height: 1 !important;
}

/* Botón del menú hamburguesa */
.topbar .sidebartoggler {
  background: linear-gradient(145deg, #ffffff, #f3f4f6) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 
              0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.topbar .sidebartoggler:hover {
  background: linear-gradient(145deg, var(--openrest-primary), var(--openrest-primary-hover)) !important;
  border-color: var(--openrest-primary) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 6px rgba(255, 107, 53, 0.3) !important;
}

.topbar .sidebartoggler i {
  color: #475569 !important;
  transition: color 0.3s ease !important;
}

.topbar .sidebartoggler:hover i {
  color: white !important;
}

/* Estilos modernos para iconos y botones del navbar */
.topbar .nav-link {
  color: #64748B !important; /* Gris moderno */
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.topbar .nav-link:hover {
  color: var(--openrest-primary) !important;
  transform: translateY(-2px) !important;
}

/* Botones de acción con estilo moderno */
.topbar .nav-icon-hover {
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg, #ffffff, #f3f4f6) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px !important;
  color: #475569 !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 
              0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.topbar .nav-icon-hover:hover {
  background: linear-gradient(145deg, var(--openrest-primary), var(--openrest-primary-hover)) !important;
  border-color: var(--openrest-primary) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 6px rgba(255, 107, 53, 0.25),
              0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.topbar .nav-icon-hover:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Dropdown del usuario con estilo mejorado */
.topbar .dropdown-toggle {
  color: #475569 !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  background: linear-gradient(145deg, #ffffff, #f9fafb) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.topbar .dropdown-toggle:hover {
  background: linear-gradient(145deg, #fff5f0, #ffe8df) !important;
  border-color: var(--openrest-primary) !important;
  color: var(--openrest-primary) !important;
  box-shadow: 0 2px 4px rgba(255, 107, 53, 0.15) !important;
}

/* Iconos en el navbar con mejor visibilidad */
.topbar iconify-icon {
  color: currentColor !important;
  font-size: 1.25rem !important;
  stroke-width: 2 !important;
}

/* Hover effect para iconos */
.topbar .nav-icon-hover:hover iconify-icon {
  color: white !important;
  animation: iconPulse 0.3s ease !important;
}

@keyframes iconPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Botones circulares del navbar mejorados */
.topbar .nav-link.rounded-circle {
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: white !important;
  border: 2px solid #E5E7EB !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.topbar .nav-link.rounded-circle::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 50% !important;
  background: var(--openrest-primary) !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.4s ease, height 0.4s ease !important;
  opacity: 0.1 !important;
}

.topbar .nav-link.rounded-circle:hover {
  background: var(--openrest-primary) !important;
  border-color: var(--openrest-primary) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
}

.topbar .nav-link.rounded-circle:hover::before {
  width: 100% !important;
  height: 100% !important;
}

.topbar .nav-link.rounded-circle:hover i,
.topbar .nav-link.rounded-circle:hover iconify-icon {
  color: white !important;
  z-index: 1 !important;
  position: relative !important;
}

/* Badge de notificaciones */
.topbar .notification-badge {
  background: var(--openrest-primary) !important;
  color: white !important;
  font-size: 0.65rem !important;
  padding: 2px 4px !important;
  border-radius: 10px !important;
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
}

/* Mejorar el espaciado del navbar */
.topbar .navbar {
  padding: 0.75rem 1rem !important;
  display: flex !important;
  width: 100% !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Ajustar el contenedor del logo */
.topbar .navbar-nav {
  align-items: center !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
}

/* Asegurar que el espaciador flexible funcione */
.topbar .flex-grow-1 {
  flex-grow: 1 !important;
}

/* Alinear botones de acción a la derecha */
.topbar .navbar-nav.ms-auto {
  margin-left: auto !important;
  gap: 0.75rem !important;
}

/* Quitar márgenes innecesarios de los botones */
.topbar .navbar-nav .nav-item {
  margin-bottom: 0 !important;
}

.topbar .navbar-nav .btn {
  margin-bottom: 0 !important;
}

/* Sección derecha del navbar */
.topbar .ms-auto {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Botones de acciones rápidas en navbar */
.topbar .nav-icon-hover-bg {
  background: transparent !important;
  border-radius: 8px !important;
  padding: 0.5rem !important;
  transition: all 0.3s ease !important;
}

.topbar .nav-icon-hover-bg:hover {
  background: var(--openrest-bg-light) !important;
}

/* Botones especiales en el navbar - Estilo moderno */
.topbar .btn-rounded {
  background: linear-gradient(145deg, #ffffff, #f8f9fa) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #334155 !important;
  font-weight: 500 !important;
  padding: 0.5rem 1.2rem !important;
  border-radius: 10px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  position: relative !important;
  overflow: hidden !important;
}

.topbar .btn-rounded::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.1), transparent) !important;
  transition: left 0.5s ease !important;
}

.topbar .btn-rounded:hover {
  background: linear-gradient(145deg, var(--openrest-primary), var(--openrest-primary-hover)) !important;
  border-color: var(--openrest-primary) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3) !important;
}

.topbar .btn-rounded:hover::before {
  left: 100% !important;
}

/* Botón de SUNAT mejorado */
.topbar .btn-light {
  background: white !important;
  border: 2px solid #E5E7EB !important;
  color: #475569 !important;
  font-weight: 600 !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.topbar .btn-light:hover {
  background: linear-gradient(145deg, #f8f9fa, #e9ecef) !important;
  border-color: var(--openrest-primary) !important;
  color: var(--openrest-primary) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2) !important;
}

.topbar .btn-light img {
  transition: transform 0.3s ease !important;
}

.topbar .btn-light:hover img {
  transform: scale(1.1) !important;
}

/* Dropdown menus en el navbar - Estilo mejorado */
.topbar .dropdown-menu {
  border: none !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  border-radius: 16px !important;
  padding: 0.5rem !important;
  margin-top: 0.5rem !important;
  background: white !important;
  animation: dropdownSlide 0.3s ease !important;
}

@keyframes dropdownSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.topbar .dropdown-item {
  border-radius: 8px !important;
  padding: 0.6rem 1rem !important;
  color: #475569 !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  margin: 0.2rem 0 !important;
}

.topbar .dropdown-item:hover {
  background: var(--openrest-bg-light) !important;
  color: var(--openrest-primary) !important;
  padding-left: 1.2rem !important;
}

.topbar .dropdown-item i,
.topbar .dropdown-item iconify-icon {
  margin-right: 0.5rem !important;
  transition: transform 0.2s ease !important;
}

.topbar .dropdown-item:hover i,
.topbar .dropdown-item:hover iconify-icon {
  transform: scale(1.2) !important;
  color: var(--openrest-primary) !important;
}

/* Fix para el ícono de diamante */
.topbar .bg-brand-icon {
  background: var(--openrest-primary) !important;
}

/* Estilos adicionales para elementos del navbar */
.topbar .nav-item {
  position: relative !important;
}

/* Indicador de notificaciones */
.topbar .position-absolute {
  background: #EF4444 !important;
  color: white !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 0.15rem 0.35rem !important;
  border-radius: 999px !important;
  border: 2px solid white !important;
  min-width: 18px !important;
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important;
}

/* Efecto de respiración para notificaciones */
.topbar .position-absolute {
  animation: breathe 2s ease-in-out infinite !important;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Mejora para el botón de perfil */
.topbar .profile-pic {
  border: 2px solid var(--openrest-primary) !important;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2) !important;
  transition: all 0.3s ease !important;
}

.topbar .profile-pic:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
}

/* Separadores visuales en navbar - Solo entre iconos de acción */
.topbar .navbar-nav.ms-auto > li.nav-icon-hover-bg:not(:last-of-type)::after {
  content: '' !important;
  position: absolute !important;
  right: -0.375rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 20px !important;
  width: 1px !important;
  background: #E5E7EB !important;
  opacity: 0.3 !important;
}

/* Asegurar altura uniforme para todos los botones */
.topbar .navbar-nav .nav-item {
  display: flex !important;
  align-items: center !important;
}

/* Iconos de acción con tamaño uniforme */
.topbar .nav-icon-hover-bg {
  flex-shrink: 0 !important;
}

/* Asegurar que todos los textos sean legibles */
.topbar * {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.sidebar-nav > ul > li.active > a {
  color: var(--openrest-primary) !important;
  border-left: 3px solid var(--openrest-primary) !important;
}

.sidebar-nav > ul > li > a:hover {
  color: var(--openrest-primary) !important;
}

.sidebar-nav ul li a.active,
.sidebar-nav ul li a:hover {
  color: var(--openrest-primary) !important;
}

/* Enlaces activos */
.nav-link.active {
  color: var(--openrest-primary) !important;
  border-bottom: 2px solid var(--openrest-primary) !important;
}

/* Tabs y pills - Estados activos */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  background-color: var(--openrest-primary) !important;
  color: white !important;
  border-color: var(--openrest-primary) !important;
}

.nav-tabs .nav-link {
  color: var(--openrest-text) !important;
  border: 1px solid #dee2e6 !important;
  background: white !important;
}

.nav-tabs .nav-link:hover {
  border-color: var(--openrest-primary) !important;
  color: var(--openrest-primary) !important;
  background: var(--openrest-bg-light) !important;
}

/* Pills y botones de selección tipo toggle */
.nav-pills .nav-link {
  color: var(--openrest-text) !important;
  background: #f8f9fa !important;
  border: 1px solid #dee2e6 !important;
  transition: all 0.3s ease !important;
}

.nav-pills .nav-link:hover {
  background: var(--openrest-bg-light) !important;
  color: var(--openrest-primary) !important;
  border-color: var(--openrest-primary) !important;
}

/* Selectores de periodo (día, semana, mes) */
.btn-group-toggle .btn {
  background: white !important;
  color: var(--openrest-text) !important;
  border: 1px solid #dee2e6 !important;
}

.btn-group-toggle .btn:hover {
  background: var(--openrest-bg-light) !important;
  color: var(--openrest-primary) !important;
  border-color: var(--openrest-primary) !important;
}

.btn-group-toggle .btn.active,
.btn-group-toggle .btn:active,
.btn-check:checked + .btn {
  background: var(--openrest-primary) !important;
  color: white !important;
  border-color: var(--openrest-primary) !important;
  box-shadow: none !important;
}

/* Corregir tabs con fondo azul */
.nav-tabs-custom .nav-link.active,
.nav-tabs-success .nav-link.active {
  background-color: var(--openrest-primary) !important;
  color: white !important;
  border-color: var(--openrest-primary) !important;
}

/* Botones toggle y switch */
.btn-toggle.active {
  background-color: var(--openrest-primary) !important;
  color: white !important;
}

/* Radio buttons y checkboxes estilo button */
input[type="radio"]:checked + label.btn,
input[type="checkbox"]:checked + label.btn {
  background-color: var(--openrest-primary) !important;
  color: white !important;
  border-color: var(--openrest-primary) !important;
}

/* ========================================
   CARDS Y PANELES
   ======================================== */
.card {
  border: 1px solid var(--openrest-border) !important;
  width: 100% !important; /* Asegurar ancho completo */
}

.card:hover {
  box-shadow: 0 4px 6px rgba(255, 107, 53, 0.1) !important;
}

.card-header {
  background-color: var(--openrest-bg-light) !important;
  border-bottom: 1px solid var(--openrest-border) !important;
}

.panel-heading {
  background-color: var(--openrest-bg-light) !important;
  border-color: var(--openrest-border) !important;
}

/* Asegurar que los contenedores principales usen todo el ancho */
.container-fluid {
  width: 100% !important;
  padding-right: 15px !important;
  padding-left: 15px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Columnas y rows deben expandirse correctamente */
.row {
  margin-right: -15px !important;
  margin-left: -15px !important;
}

/* Cards en columnas deben tomar el ancho de su columna */
.col .card,
[class*="col-"] .card {
  width: 100% !important;
}

/* Asegurar que las tablas dentro de cards se expandan */
.card-body {
  width: 100% !important;
}

.card-body .table-responsive {
  width: 100% !important;
}

/* DASHBOARD - Expandir contenedor pero mantener cards horizontales */
/* El dashboard usa col-12 para el contenedor principal, así que ya está expandido */
/* Solo asegurar que los cards internos mantengan su layout en grid */
#tablero .row .col-md-3,
#tablero .row .col-lg-3,
#tablero .row .col-xl-3 {
  /* Mantener 4 cards en línea (25% cada uno) */
  flex: 0 0 25% !important;
  max-width: 25% !important;
}

#tablero .row .col-md-4,
#tablero .row .col-lg-4 {
  /* Mantener 3 cards en línea (33.33% cada uno) */
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
}

#tablero .row .col-md-6,
#tablero .row .col-lg-6 {
  /* Mantener 2 cards en línea (50% cada uno) */
  flex: 0 0 50% !important;
  max-width: 50% !important;
}

/* En pantallas pequeñas, permitir stacking */
@media (max-width: 767px) {
  #tablero .row [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Solo expandir columnas cuando son hijo único */
.row > .col-md-8:only-child,
.row > .col-lg-8:only-child,
.row > .col-md-10:only-child,
.row > .col-lg-10:only-child,
.row > .col-md-9:only-child,
.row > .col-lg-9:only-child {
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Fix para contenedores principales sin romper grid */
.container-fluid {
  width: 100% !important;
  padding-right: 15px !important;
  padding-left: 15px !important;
}

/* Asegurar expansión solo en páginas específicas que lo necesitan */
/* Cliente page - expandir contenido principal */
#cliente .row > [class*="col-"]:only-child {
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Monitor de ventas y páginas similares - Expandir completamente */
/* Forzar expansión total de col-12 */
.col-12,
.col-sm-12,
.col-md-12,
.col-lg-12,
.col-xl-12 {
  max-width: 100% !important;
  flex: 0 0 100% !important;
  width: 100% !important;
}

/* Container-fluid debe usar todo el ancho disponible */
.body-wrapper > .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Para el monitor específicamente - mantener estructura interna */
/* El col-lg-12 ya está al 100%, ahora ajustar el contenido interno si es necesario */
.col-lg-12 > .card {
  width: 100% !important;
}

/* Si queremos que el contenido interno también se expanda */
.card-body .row .col-md-3.nav-pills-container,
.card-body .row .col-md-3:has(.nav-pills) {
  /* Mantener sidebar de navegación pero más compacta */
  flex: 0 0 200px !important;
  max-width: 200px !important;
}

.card-body .row .col-md-9.border-start {
  /* Expandir área de contenido */
  flex: 1 1 auto !important;
  max-width: calc(100% - 200px) !important;
}

/* Específico para cards con tabs (común en monitor) */
.card:has(.nav-tabs) {
  width: 100% !important;
}

/* Alternativa sin :has para navegadores antiguos */
.card > .card-header + .card-body .nav-tabs {
  width: 100% !important;
}

.card > .card-header + .card-body .nav-tabs ~ * {
  width: 100% !important;
}

/* Asegurar que el card del monitor se expanda */
.card-body > .nav-tabs {
  width: 100% !important;
}

.card-body > .nav-tabs + * {
  width: 100% !important;
}

/* Cards dentro de cualquier contenedor deben usar su ancho disponible */
div[class*="col-"] > .card {
  width: 100% !important;
}

/* Cards - Altura proporcional al contenido */
.card {
  display: flex !important;
  flex-direction: column !important;
}

.card-header + .card-body {
  flex: 1 1 auto !important;
}

/* Dashboard - Cards de estadísticas con altura apropiada */
#tablero .card,
.dashboard .card,
[href*="tablero"] + * .card,
.card:has(.card-title:contains("Métricas")),
.card:has(.card-title:contains("Eficiencia")) {
  min-height: unset !important;
  height: auto !important;
}

/* Cards pequeños del dashboard (estadísticas superiores) */
#tablero .col-md-3 .card,
#tablero .col-lg-3 .card,
#tablero .col-xl-3 .card,
.dashboard .col-md-3 .card,
.row:first-child .col-md-3 .card {
  min-height: 80px !important;
  max-height: 120px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ajustar padding para cards pequeños */
#tablero .col-md-3 .card-body,
.row:first-child .col-md-3 .card-body {
  padding: 10px 15px !important;
}

/* Cards medianos del dashboard (incluye Métricas de eficiencia) */
#tablero .col-md-6 .card,
#tablero .col-lg-6 .card,
.dashboard .col-md-6 .card {
  min-height: 180px !important;
  max-height: 280px !important;
  height: auto !important;
  overflow: auto !important;
}

/* Específico para Métricas de eficiencia y cards similares */
.card-body:has(table),
.card-body:has(.table-responsive) {
  padding: 10px !important;
  overflow: auto !important;
  max-height: 240px !important;
}

/* Cards grandes (gráficos) - mantener altura mínima para visualización */
#tablero .col-md-12 .card,
#tablero .col-lg-12 .card,
.card:has(canvas),
.card:has(.chart-container) {
  min-height: 300px !important;
  height: auto !important;
}

/* Canvas y contenedores de gráficos necesitan altura mínima */
.card-body canvas,
.card-body .chart-container {
  min-height: 250px !important;
  height: auto !important;
}

/* AJUSTES - Solo los cards de ajustes necesitan altura igual */
#ajuste .card,
.ajuste-page .card {
  min-height: 400px !important;
  height: 100% !important;
  overflow: visible !important; /* Permitir que el contenido se vea */
}

/* Botones circulares en ajustes no se corten */
#ajuste .rounded-circle,
#ajuste .btn-circle {
  margin: 10px !important;
}

#ajuste .card-body {
  overflow: visible !important;
  padding-bottom: 20px !important;
}

/* Específico para páginas con 2 cards lado a lado EN AJUSTES */
#ajuste .col-md-6,
.ajuste-page .col-md-6 {
  display: flex !important;
  height: 450px !important;
}

#ajuste .col-md-6 > .card,
.ajuste-page .col-md-6 > .card {
  width: 100% !important;
  height: 100% !important;
  min-height: 450px !important;
}

/* Expandir el contenedor principal manteniendo las 2 columnas */
.body-wrapper .container-fluid > .row {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Mantener 2 cards lado a lado con altura igual */
.body-wrapper .container-fluid > .row > .col-md-6 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  padding: 0 15px !important;
}

/* En móviles, apilar verticalmente */
@media (max-width: 767px) {
  .body-wrapper .container-fluid > .row > .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 1rem !important;
  }
}

/* ========================================
   FORMULARIOS
   ======================================== */
.form-control:focus {
  border-color: var(--openrest-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25) !important;
}

.custom-select:focus {
  border-color: var(--openrest-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25) !important;
}

/* Checkboxes y radios */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--openrest-primary) !important;
  border-color: var(--openrest-primary) !important;
}

.form-check-input:checked {
  background-color: var(--openrest-primary) !important;
  border-color: var(--openrest-primary) !important;
}

/* ========================================
   ALERTAS Y NOTIFICACIONES
   ======================================== */
.alert-primary {
  background-color: var(--openrest-bg-light) !important;
  border-color: var(--openrest-border) !important;
  color: var(--openrest-primary) !important;
}

.alert-success {
  background-color: #D1FAE5 !important;
  border-color: #A7F3D0 !important;
  color: var(--openrest-success) !important;
}

.alert-danger {
  background-color: #FEE2E2 !important;
  border-color: #FECACA !important;
  color: var(--openrest-danger) !important;
}

/* Toast notifications */
.toast-success {
  background-color: var(--openrest-success) !important;
}

.toast-error {
  background-color: var(--openrest-danger) !important;
}

.toast-warning {
  background-color: var(--openrest-warning) !important;
}

.toast-info {
  background-color: var(--openrest-info) !important;
}

/* ========================================
   BADGES Y LABELS
   ======================================== */
.badge-primary,
.label-primary {
  background-color: var(--openrest-primary) !important;
}

.badge-success,
.label-success {
  background-color: var(--openrest-success) !important;
}

.badge-danger,
.label-danger {
  background-color: var(--openrest-danger) !important;
}

.badge-warning,
.label-warning {
  background-color: var(--openrest-warning) !important;
}

.badge-info,
.label-info {
  background-color: var(--openrest-info) !important;
}

/* ========================================
   TABLAS
   ======================================== */
.table-primary {
  background-color: var(--openrest-bg-light) !important;
}

.table-hover tbody tr:hover {
  background-color: var(--openrest-bg-hover) !important;
}

.table thead th {
  border-bottom: 2px solid var(--openrest-primary) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--openrest-primary) !important;
  border-color: var(--openrest-primary) !important;
  color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--openrest-primary-hover) !important;
  border-color: var(--openrest-primary-hover) !important;
  color: white !important;
}

/* ========================================
   PROGRESS BARS
   ======================================== */
.progress-bar {
  background-color: var(--openrest-primary) !important;
}

.progress-bar-success {
  background-color: var(--openrest-success) !important;
}

.progress-bar-danger {
  background-color: var(--openrest-danger) !important;
}

.progress-bar-warning {
  background-color: var(--openrest-warning) !important;
}

.progress-bar-info {
  background-color: var(--openrest-info) !important;
}

/* ========================================
   SPINNERS Y LOADERS
   ======================================== */
.spinner-border-primary {
  border-color: var(--openrest-primary) !important;
}

.spinner-grow-primary {
  background-color: var(--openrest-primary) !important;
}

/* ========================================
   LINKS Y ANCHORS
   ======================================== */
a {
  color: var(--openrest-primary);
}

a:hover {
  color: var(--openrest-primary-hover);
}

.text-primary {
  color: var(--openrest-primary) !important;
}

.text-success {
  color: var(--openrest-success) !important;
}

.text-danger {
  color: var(--openrest-danger) !important;
}

.text-warning {
  color: var(--openrest-warning) !important;
}

.text-info {
  color: var(--openrest-info) !important;
}

/* ========================================
   BORDES ESPECIALES
   ======================================== */
.border-primary {
  border-color: var(--openrest-primary) !important;
}

.border-success {
  border-color: var(--openrest-success) !important;
}

.border-danger {
  border-color: var(--openrest-danger) !important;
}

.border-warning {
  border-color: var(--openrest-warning) !important;
}

.border-info {
  border-color: var(--openrest-info) !important;
}

/* Bordes izquierdos para cards especiales */
.border-left-primary {
  border-left: 4px solid var(--openrest-primary) !important;
}

.border-left-success {
  border-left: 4px solid var(--openrest-success) !important;
}

.border-left-danger {
  border-left: 4px solid var(--openrest-danger) !important;
}

/* ========================================
   MODALES
   ======================================== */
.modal-header {
  background-color: var(--openrest-bg-light) !important;
  border-bottom: 1px solid var(--openrest-border) !important;
}

.modal-footer {
  background-color: var(--openrest-bg-light) !important;
  border-top: 1px solid var(--openrest-border) !important;
}

/* ========================================
   DROPDOWN MENUS
   ======================================== */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--openrest-bg-light) !important;
  color: var(--openrest-primary) !important;
}

.dropdown-item.active {
  background-color: var(--openrest-primary) !important;
  color: #ffffff !important;
}

/* ========================================
   PAGINATION
   ======================================== */
.page-link {
  color: var(--openrest-primary) !important;
}

.page-link:hover {
  background-color: var(--openrest-bg-light) !important;
  border-color: var(--openrest-border) !important;
}

.page-item.active .page-link {
  background-color: var(--openrest-primary) !important;
  border-color: var(--openrest-primary) !important;
  color: #ffffff !important;
}

/* ========================================
   TOOLTIPS Y POPOVERS
   ======================================== */
.tooltip-inner {
  background: linear-gradient(135deg, var(--openrest-dark), #1a202c) !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.bs-tooltip-top .arrow::before {
  border-top-color: var(--openrest-dark) !important;
}

.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--openrest-dark) !important;
}

.bs-tooltip-start .arrow::before {
  border-left-color: var(--openrest-dark) !important;
}

.bs-tooltip-end .arrow::before {
  border-right-color: var(--openrest-dark) !important;
}

.popover-header {
  background-color: var(--openrest-bg-light) !important;
  border-bottom: 1px solid var(--openrest-border) !important;
}

/* ========================================
   SCROLLBAR PERSONALIZADA (Webkit)
   ======================================== */
::-webkit-scrollbar-thumb {
  background-color: var(--openrest-primary);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--openrest-primary-hover);
}

::-webkit-scrollbar-track {
  background-color: var(--openrest-bg-light);
}

/* ========================================
   AJUSTES ESPECÍFICOS OPENREST
   ======================================== */

/* Dashboard widgets */
.widget-style-1 h3 {
  color: var(--openrest-primary) !important;
}

/* Gráficos - mantener colores funcionales */
.chart-success {
  stroke: var(--openrest-success) !important;
  fill: var(--openrest-success) !important;
}

.chart-danger {
  stroke: var(--openrest-danger) !important;
  fill: var(--openrest-danger) !important;
}

/* Login page */
.login-box .btn-primary {
  background: linear-gradient(135deg, var(--openrest-primary) 0%, var(--openrest-secondary) 100%) !important;
  border: none !important;
}

/* Wizard steps */
.wizard > .steps > ul > li.current a {
  background-color: var(--openrest-primary) !important;
}

.wizard > .steps > ul > li.done a {
  background-color: var(--openrest-success) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single:focus {
  border-color: var(--openrest-primary) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--openrest-primary) !important;
  color: white !important;
}

.select2-container--default .select2-results__option--selected {
  background-color: var(--openrest-bg-light) !important;
  color: var(--openrest-primary) !important;
}

/* Segmented controls y button groups */
.btn-group > .btn.active,
.btn-group > .btn:active,
.btn-group > .btn:focus {
  background-color: var(--openrest-primary) !important;
  color: white !important;
  border-color: var(--openrest-primary) !important;
  z-index: 1 !important;
}

.btn-group > .btn {
  background: white !important;
  color: var(--openrest-text) !important;
  border-color: #dee2e6 !important;
}

.btn-group > .btn:hover:not(.active) {
  background: var(--openrest-bg-light) !important;
  color: var(--openrest-primary) !important;
  border-color: var(--openrest-primary) !important;
  z-index: 0 !important;
}

/* Tabs del monitor de ventas y otros módulos */
.nav-underline-border .nav-link.active {
  color: var(--openrest-primary) !important;
  border-bottom-color: var(--openrest-primary) !important;
  background: transparent !important;
}

.nav-underline-border .nav-link {
  color: var(--openrest-text) !important;
  background: transparent !important;
}

.nav-underline-border .nav-link:hover {
  color: var(--openrest-primary) !important;
}

/* Botones de filtro de periodo */
.period-selector .btn.active,
.date-range-selector .btn.active,
.filter-buttons .btn.active {
  background: var(--openrest-primary) !important;
  color: white !important;
  border-color: var(--openrest-primary) !important;
}

/* Corregir cualquier elemento con clase active que tenga fondo azul */
.bg-primary,
[class*="bg-primary"] {
  background-color: var(--openrest-primary) !important;
}

.text-primary,
[class*="text-primary"] {
  color: var(--openrest-primary) !important;
}

/* Override para elementos con inline styles */
.nav-link.active[style*="background"] {
  background-color: var(--openrest-primary) !important;
  color: white !important;
}

/* Sweet Alert */
.swal2-styled.swal2-confirm {
  background-color: var(--openrest-primary) !important;
}

/* ========================================
   TRANSICIONES SUAVES
   ======================================== */
.btn,
.form-control,
.card,
.dropdown-item,
.nav-link,
a {
  transition: all 0.3s ease;
}

/* ========================================
   DROPDOWNS DIRECCION
   ======================================== */

/* Desactivar comportamiento de hover en dropdowns */
.navbar-nav .dropdown:hover > .dropdown-menu {
    display: none !important;
}

.navbar-nav .dropdown.show > .dropdown-menu {
    display: block !important;
}

/* Prevenir que se cierre el dropdown muy rápido */
.navbar-nav .dropdown-menu {
    margin-top: 0 !important;
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Asegurar que el dropdown de soporte se abra hacia la izquierda */
#dropSupport + .dropdown-menu {
    right: 0 !important;
    left: auto !important;
}

/* Asegurar que todos los dropdowns cerca del borde derecho se abran hacia la izquierda */
.navbar-nav .dropdown-menu-end {
    right: 0 !important;
    left: auto !important;
}

/* Fix para dropdowns que se cortan */
.navbar-nav .dropdown-menu {
    position: absolute !important;
    z-index: 1050 !important;
}

/* Mejorar área clickeable y hover */
.navbar-nav .dropdown-toggle {
    cursor: pointer;
    padding: 0.5rem !important;
}

/* Evitar que el dropdown se cierre al mover el mouse */
.navbar-nav .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

/* ========================================
   EMPRESA - FORMULARIO OCULTO POR DEFECTO
   ======================================== */
.detalle-sucursal {
    display: none !important;
}

.detalle-sucursal.show {
    display: block !important;
}

/* ========================================
   ESPACIADO GENERAL - TOOLBAR Y CONTENIDO
   ======================================== */

/* Asegurar que el navbar esté pegado arriba */
header.topbar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    z-index: 1000 !important;
    height: 70px !important;
    transition: left 0.3s ease, width 0.3s ease !important;
}

/* Ajustar ancho del navbar cuando sidebar está expandido */
body:not(.sidebar-collapsed) header.topbar {
    left: 260px !important; /* Ancho del sidebar expandido */
    width: calc(100% - 260px) !important;
}

/* Ajustar ancho del navbar cuando sidebar está colapsado */
body.sidebar-collapsed header.topbar {
    left: 70px !important; /* Ancho del sidebar colapsado */
    width: calc(100% - 70px) !important;
}

/* Eliminar márgenes del body y main-wrapper */
body {
    margin: 0 !important;
    padding: 0 !important;
}

#main-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ajustar el contenido principal con el navbar fijo */
.page-wrapper {
    padding-top: 85px !important; /* Altura del navbar + pequeño margen */
    margin-top: 0 !important;
    transition: margin-left 0.3s ease !important;
    position: relative !important;
}

/* Ajustar el contenido cuando el sidebar está expandido */
body:not(.sidebar-collapsed) .page-wrapper {
    margin-left: 260px !important; /* Mismo ancho que el sidebar expandido */
}

/* Ajustar el contenido cuando el sidebar está colapsado */
body.sidebar-collapsed .page-wrapper {
    margin-left: 70px !important; /* Mismo ancho que el sidebar colapsado */
}

/* Eliminar espacios superiores del contenedor principal EN TODAS LAS PÁGINAS */
.page-wrapper .container-fluid {
    padding-top: 15px !important; /* Mínimo espacio */
    padding-bottom: 15px !important;
}

/* Reducir espacio del primer elemento en el contenido */
.page-wrapper .container-fluid > :first-child {
    margin-top: 0 !important; /* Sin margen superior */
}

/* Reducir margen de los títulos de página */
.page-wrapper h1:first-of-type,
.page-wrapper h2:first-of-type,
.page-wrapper h3:first-of-type,
.page-wrapper h4:first-of-type {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

/* Específico para el Dashboard y todas las páginas - Títulos */
.page-wrapper .container-fluid h1:first-child,
.page-wrapper .container-fluid h2:first-child,
.page-wrapper .container-fluid h3:first-child,
.page-wrapper .container-fluid h4:first-child,
.page-wrapper .container-fluid h5:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Forzar eliminación de márgenes superiores en TODOS los contenedores */
.page-wrapper > div:first-child,
.page-wrapper .container-fluid > div:first-child,
.page-wrapper .container-fluid .row:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Aplicar a todas las páginas - más específico */
body .page-wrapper {
    padding-top: 0 !important; /* Eliminar padding superior */
}

body .page-wrapper .container-fluid {
    padding-top: 15px !important; /* Espacio mínimo uniforme */
    padding-bottom: 15px !important;
}

/* Sobrescribir estilos del sidebar_moderno.css que causan espaciado */
.page-wrapper.main-content .topbar {
    position: fixed !important; /* Cambiar de sticky a fixed */
    top: 0 !important;
    height: 70px !important; /* Altura fija */
    min-height: unset !important;
    transition: left 0.3s ease, width 0.3s ease !important;
}

/* Ajustar posición del topbar según el sidebar */
body:not(.sidebar-collapsed) .page-wrapper.main-content .topbar {
    left: 260px !important;
    width: calc(100% - 260px) !important;
}

body.sidebar-collapsed .page-wrapper.main-content .topbar {
    left: 70px !important;
    width: calc(100% - 70px) !important;
}

/* El navbar dentro del topbar */
.topbar .navbar {
    height: 70px !important;
    min-height: unset !important;
    padding: 10px 20px !important; /* Reducir padding vertical */
}

/* Ajustar el contenido para que empiece justo después del navbar */
.page-wrapper.main-content {
    padding-top: 70px !important; /* Altura exacta del navbar */
}

/* Eliminar espacios del body-wrapper y container-fluid - OVERRIDE DE TODOS LOS ESTILOS */
.body-wrapper,
.page-wrapper .body-wrapper,
html[data-layout=horizontal] .body-wrapper,
.docs .body-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 20px !important;
}

.body-wrapper .container-fluid {
    padding-top: 15px !important; /* Mínimo espacio entre navbar y contenido */
    margin-top: 0 !important;
    padding-bottom: 15px !important;
}

/* Específico para el rol moso */
.body-wrapper.moso,
.container-fluid.moso {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.body-wrapper.moso .container-fluid.moso {
    padding-top: 20px !important;
}

/* ========================================
   PÁGINA DE CLIENTES - DISPLAY CARDS
   ======================================== */

/* Estado inicial: mostrar card informativo, ocultar detalles */
.col-md-5 .card.display-one {
    display: block !important;
}

.col-md-5 .card.display-two {
    display: none !important;
}

/* JavaScript sobrescribe con inline styles que tienen más especificidad */
.col-md-5 .card.display-one[style*="display: none"] {
    display: none !important;
}

.col-md-5 .card.display-two[style*="display: block"] {
    display: block !important;
}

/* Asegurar que solo un card se muestre a la vez */
.col-md-5 .card {
    width: 100%;
}

/* ========================================
   PÁGINA SALON-MESA - CARDS OCULTAR/MOSTRAR
   ======================================== */

/* Estado inicial: mostrar card informativo, ocultar datagrid de mesas */
.col-md-6 .card#lizq-s {
    display: block !important;
}

.col-md-6 .card#lizq-i {
    display: none !important;
}

/* JavaScript sobrescribe con inline styles */
.col-md-6 .card#lizq-s[style*="display: none"] {
    display: none !important;
}

.col-md-6 .card#lizq-i[style*="display: block"] {
    display: block !important;
}

/* Hacer que col-md-6 también expanda en altura */
.col-md-6 .card-datagrid {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.col-md-6 .card-datagrid .dataTables_wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.col-md-6 .card-datagrid .table-responsive {
    flex: 1 1 auto !important;
    overflow: auto !important;
}

.col-md-6 .card-datagrid .dataTables_paginate {
    flex: 0 0 auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 15px 0 !important;
    background: white !important;
    border-top: 1px solid #e5e5e5 !important;
    margin-top: auto !important;
}

/* ========================================
   PÁGINA PRODUCTOS - CARDS
   ======================================== */

/* Card de categorías que se expande verticalmente */
.col-lg-3 .card-categorias-full {
    height: calc(100vh - 120px) !important;
    min-height: 500px !important;
    display: flex !important;
    flex-direction: column !important;
}

.card-categorias-full .card-body {
    display: flex !important;
    flex-direction: column !important;
}

.card-categorias-full .card-body:first-child {
    flex: 0 0 auto !important; /* El header con título no se expande */
}

.card-categorias-full .card-body.pt-0 {
    flex: 1 1 auto !important; /* El body con la tabla se expande */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* El contenedor de la lista debe expandirse */
.card-categorias-full .display-categoria-list {
    flex: 1 1 auto !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 15px !important;
}

/* La tabla debe usar todo el espacio */
.card-categorias-full #table-categorias {
    width: 100% !important;
}

/* Si DataTables genera un wrapper */
.card-categorias-full .dataTables_wrapper {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Card de productos que se expande verticalmente */
.col-lg-9 .card-productos-full {
    height: calc(100vh - 120px) !important;
    min-height: 500px !important;
    display: flex !important;
    flex-direction: column !important;
}

.card-productos-full .card-header {
    flex: 0 0 auto !important; /* Header con estadísticas no se expande */
    background-color: rgba(248, 248, 248, 0.6) !important; /* Fondo sutilmente visible */
    border: none !important; /* Sin bordes */
    box-shadow: none !important;
}

.card-productos-full .card-datagrid {
    flex: 1 1 auto !important; /* El datagrid se expande */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* La tabla de productos dentro debe expandirse */
.card-productos-full .table-responsive {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
}

/* Card de combos - misma estructura que productos */
.col-lg-9 .card-combos-full {
    height: calc(100vh - 120px) !important;
    min-height: 500px !important;
    display: flex !important;
    flex-direction: column !important;
}

.card-combos-full .card-header {
    flex: 0 0 auto !important;
    background-color: rgba(248, 248, 248, 0.6) !important; /* Fondo sutilmente visible */
    border: none !important; /* Sin bordes */
    box-shadow: none !important;
}

.card-combos-full .card-datagrid {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Card de insumos */
.col-lg-9 .card-insumos-full {
    height: calc(100vh - 120px) !important;
    min-height: 500px !important;
    display: flex !important;
    flex-direction: column !important;
}

.card-insumos-full .card-header {
    flex: 0 0 auto !important;
    background-color: rgba(248, 248, 248, 0.6) !important; /* Fondo sutilmente visible */
    border: none !important; /* Sin bordes */
    box-shadow: none !important;
}

.card-insumos-full .card-datagrid {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Card de categorías de insumos */
.col-lg-3 .card-categorias-insumos-full {
    height: calc(100vh - 120px) !important;
    min-height: 500px !important;
    display: flex !important;
    flex-direction: column !important;
}

.card-categorias-insumos-full .card-body:first-child {
    flex: 0 0 auto !important;
}

.card-categorias-insumos-full .card-datagrid {
    flex: 1 1 auto !important;
}

/* ========================================
   TABLAS DE DATOS
   ======================================== */

/* Clase especial para cards que contienen datagrids - altura completa */
.card-full-height {
    height: calc(100vh - 120px) !important;
    min-height: 600px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Row y columnas para páginas con dos datagrids lado a lado */
.row-full-height {
    height: calc(100vh - 100px) !important;
    min-height: 600px !important;
    display: flex !important;
    flex-wrap: nowrap !important; /* No wrap para mantener en línea */
}

/* Aplicar a CUALQUIER columna dentro de row-full-height */
.row-full-height > [class*="col-"] {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
}

.row-full-height [class*="col-"] > .card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

/* Asegurar que card-full-height funcione dentro de col-md-6 */
.col-md-6 .card-full-height {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.col-md-6 .card-full-height .card-body {
    flex: 0 0 auto !important; /* No expandir el primer card-body con los filtros */
}

.col-md-6 .card-full-height .card-datagrid {
    flex: 1 1 auto !important; /* Expandir el datagrid */
}

/* Clase especial para div contenedor de datagrids que reemplaza card-body pt-0 */
.card-datagrid {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 280px) !important; /* Ajustado para header y card superior */
    min-height: 400px !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: white !important;
}

/* Clase genérica para columnas con datagrids que necesitan expandirse */
[class*="col-md-"] .card-datagrid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

[class*="col-md-"] .card-datagrid .dataTables_wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

[class*="col-md-"] .card-datagrid .table-responsive {
    flex: 1 1 auto !important;
    overflow: auto !important;
}

[class*="col-md-"] .card-datagrid .dataTables_paginate {
    flex: 0 0 auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 15px 0 !important;
    background: white !important;
    border-top: 1px solid #e5e5e5 !important;
    margin-top: auto !important;
}

/* Table-responsive dentro de card-datagrid */
.card-datagrid > .table-responsive {
    flex: 1 1 auto !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    height: 100% !important;
    padding: 15px !important;
}

/* DataTables wrapper dentro de card-datagrid */
.card-datagrid .dataTables_wrapper {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* La tabla NO debe expandir sus filas */
.card-datagrid .dataTables_wrapper table {
    flex: 0 0 auto !important; /* No expandir */
}

/* Las filas mantienen su altura normal */
.card-datagrid table tbody td {
    padding: 12px !important; /* Padding normal */
    height: auto !important; /* Altura automática */
}

/* El contenedor scrolleable de la tabla */
.card-datagrid .dataTables_wrapper .dataTables_scroll {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
}

/* La paginación debe quedarse abajo */
.card-datagrid .dataTables_paginate {
    margin-top: auto !important;
    padding: 10px 0 !important;
}

/* Fix específico para la página de clientes - contenedor de la tabla */
.col-md-7 .card-datagrid {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.col-md-7 .card-datagrid .dataTables_wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* La tabla debe usar el espacio disponible */
.col-md-7 .card-datagrid .table-responsive {
    flex: 1 1 auto !important;
    overflow: auto !important;
}

/* Paginación fija en la parte inferior del datagrid */
.col-md-7 .card-datagrid .dataTables_paginate {
    flex: 0 0 auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 15px 0 !important;
    background: white !important;
    border-top: 1px solid #e5e5e5 !important;
    margin-top: auto !important;
    position: sticky !important;
    bottom: 0 !important;
}

/* Asegurar que la paginación no se salga del contenedor */
.col-md-7 .card-datagrid #table_wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.col-md-7 .card-datagrid #table_paginate {
    margin-top: auto !important;
}

/* Asegurar que el wrapper de DataTables use flexbox correctamente */
.card-datagrid .dataTables_wrapper {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* La tabla debe tomar el espacio disponible pero no más */
.card-datagrid .dataTables_wrapper .table-responsive {
    flex: 1 1 auto !important;
    overflow: auto !important;
}

/* Estilos básicos para las tablas normales (sin card-datagrid) */
.table-responsive {
    overflow-x: auto;
    overflow-y: auto;
    min-height: 400px; /* Altura mínima para que se vea mejor */
}

/* Específico para páginas con listados principales normales */
.card-body.pt-0 > .table-responsive {
    min-height: 500px; /* Un poco más alto cuando es el contenido principal */
}

/* Scrollbar estilizado */
.table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Mensaje cuando no hay datos */
.dataTables_empty {
    padding: 60px 20px !important;
    text-align: center;
    color: #999;
}

/* Dashboard - mantener cards de estadísticas con altura normal */
#tablero .card {
    min-height: auto !important;
    height: auto !important;
}

#tablero .card-body {
    padding: 1.25rem !important;
}

/* Espaciado normal para tablas */
table tbody td {
    vertical-align: middle;
    padding: 12px;
}

/* ========================================
   FIN DEL ARCHIVO
   ======================================== */