/* Estilos para React Grid Layout */
.react-grid-layout {
  position: relative;
}

.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top;
  border-radius: 16px;
}

.react-grid-item img {
  pointer-events: none;
  user-select: none;
}

.react-grid-item.cssTransforms {
  transition-property: transform;
}

.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: rgba(102, 126, 234, 0.2);
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  border-radius: 16px;
  border: 2px dashed rgba(102, 126, 234, 0.5);
}

.react-grid-item.react-grid-placeholder.placeholder-active {
  opacity: 0.3;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0;
  right: 0;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNiA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZG90cyBmaWxsPSIjOTk5IiBkPSJtMTUgMTJjMCAxLjEwNS0uODk1IDItMiAycy0yLS44OTUtMi0yIC44OTUtMiAyLTIgMiAuODk1IDIgMnoiLz4KPC9zdmc+) center/contain no-repeat;
  background-size: 12px 12px;
  cursor: nw-resize;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.react-grid-item:hover > .react-resizable-handle {
  opacity: 0.8;
}

.react-grid-item > .react-resizable-handle::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

/* Estilos para modo oscuro */
[data-theme="dark"] .react-grid-item > .react-resizable-handle::after {
  border-right: 2px solid rgba(255, 255, 255, 0.4);
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .react-grid-item.react-grid-placeholder {
  background: rgba(102, 126, 234, 0.3);
  border-color: rgba(102, 126, 234, 0.6);
}

/* Animaciones de entrada */
.grid-item-enter {
  opacity: 0;
  transform: scale(0.9);
}

.grid-item-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}

.grid-item-exit {
  opacity: 1;
}

.grid-item-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .react-grid-item > .react-resizable-handle {
    display: none;
  }
  
  .react-grid-item.react-draggable-dragging {
    transform: scale(1.05) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }
}

/* Efectos de hover para widgets */
.react-grid-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .react-grid-item:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Indicador de arrastre */
.react-grid-item.react-draggable-dragging {
  cursor: grabbing;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(1.02);
}

/* Estilos para el layout completo */
.react-grid-layout {
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

/* Smooth transitions */
.react-grid-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
}

.react-grid-item.react-draggable-dragging,
.react-grid-item.resizing {
  transition: none;
  will-change: transform, width, height;
}

/* Glassmorphism effect for dragging */
.react-grid-item.react-draggable-dragging {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .react-grid-item.react-draggable-dragging {
  background: rgba(26, 32, 44, 0.9);
} 
/* Fuente de reserva con las MÉTRICAS de Roboto (mismo enfoque que next/font).
   Usa Arial local (disponible al instante, sin red) pero ajustada para ocupar
   EXACTAMENTE el mismo espacio que Roboto. Así podemos cargar Roboto de forma
   asíncrona (FCP rápido) sin que el texto salte cuando Roboto llega (CLS ~0).
   Antes: fuentes bloqueantes -> FCP 6 s; o fuentes async sin esto -> CLS 0,496. */
@font-face {
  font-family: 'Roboto Fallback';
  src: local('Arial');
  ascent-override: 92.7734%;
  descent-override: 24.4141%;
  line-gap-override: 0%;
  size-adjust: 100.3195%;
}

/* El CSS base de react-big-calendar (20 KB) se importa donde de verdad se usa
   (components/restaurant/TimelineView.js, ruta lazy). Aquí estaba como @import
   GLOBAL, así que entraba en el CSS render-blocking inicial de TODAS las páginas
   —incluida la landing, que no tiene calendario— retrasando el primer pintado.
   Los overrides .rbc-* de debajo son propios y pesan poco; se mantienen. */

/* Estilos personalizados para React Big Calendar */
.rbc-calendar {
  height: 100% !important;
  min-height: 500px;
  font-family: 'Roboto', 'Helvetica Neue', sans-serif !important;
  background: transparent !important;
  border: none !important;
}

.rbc-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  padding: 12px 8px !important;
  font-weight: 600 !important;
  color: #2c3e50 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
}

.rbc-month-view, .rbc-time-view {
  background: transparent !important;
  border: none !important;
}

.rbc-date-cell {
  background: white !important;
  border-right: 1px solid rgba(0,0,0,0.05) !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  min-height: 120px !important;
  padding: 4px !important;
  transition: background-color 0.2s ease !important;
}

.rbc-date-cell:hover {
  background: rgba(37, 211, 102, 0.03) !important;
}

.rbc-date-cell.rbc-off-range {
  background: #f8f9fa !important;
  color: #adb5bd !important;
}

.rbc-date-cell.rbc-today {
  background: rgba(37, 211, 102, 0.08) !important;
  border: 2px solid #25D366 !important;
}

.rbc-button-link {
  color: #495057 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

.rbc-button-link:hover {
  background: rgba(37, 211, 102, 0.1) !important;
  color: #25D366 !important;
}

.rbc-toolbar {
  background: white !important;
  padding: 16px !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.rbc-toolbar button {
  background: white !important;
  border: 1px solid #dee2e6 !important;
  color: #495057 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  margin: 0 2px !important;
}

.rbc-toolbar button:hover {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: white !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(37, 211, 102, 0.2) !important;
}

.rbc-toolbar button.rbc-active {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  border-color: #25D366 !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3) !important;
}

.rbc-toolbar .rbc-toolbar-label {
  font-weight: 700 !important;
  font-size: 20px !important;
  color: #2c3e50 !important;
  margin: 0 16px !important;
  text-transform: capitalize !important;
}

.rbc-event {
  background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: white !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  min-height: 20px !important;
  display: flex !important;
  align-items: center !important;
}

.rbc-event:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4) !important;
}

.rbc-event.rbc-selected {
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.3) !important;
}

/* Estilos para diferentes vistas */
.rbc-time-view .rbc-time-content {
  border: none !important;
}

.rbc-time-view .rbc-time-header {
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

.rbc-time-view .rbc-time-slot {
  border-top: 1px solid rgba(0,0,0,0.05) !important;
}

.rbc-time-view .rbc-current-time-indicator {
  background: #25D366 !important;
  height: 3px !important;
  border-radius: 2px !important;
  box-shadow: 0 1px 3px rgba(37, 211, 102, 0.3) !important;
}

.rbc-agenda-view {
  background: white !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.rbc-agenda-view table {
  border: none !important;
}

.rbc-agenda-view .rbc-agenda-date-cell {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  font-weight: 600 !important;
  color: #495057 !important;
  border-right: 1px solid rgba(0,0,0,0.05) !important;
}

.rbc-agenda-view .rbc-agenda-time-cell {
  background: white !important;
  color: #6c757d !important;
  font-weight: 500 !important;
  border-right: 1px solid rgba(0,0,0,0.05) !important;
}

.rbc-agenda-view .rbc-agenda-event-cell {
  background: white !important;
  padding: 12px !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .rbc-toolbar {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  
  .rbc-toolbar .rbc-btn-group {
    display: flex !important;
    gap: 4px !important;
  }
  
  .rbc-toolbar button {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  
  .rbc-toolbar .rbc-toolbar-label {
    font-size: 18px !important;
    margin: 0 !important;
  }
  
  .rbc-date-cell {
    min-height: 80px !important;
  }
  
  .rbc-event {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
}

/* Estados de loading */
.rbc-calendar.loading {
  opacity: 0.6;
  pointer-events: none;
}

.rbc-calendar.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #25D366;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Paso 1: manejo de safe-area en móviles y evitar overscroll rubber-band */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
}

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.MuiTableRow-root.Mui-selected {
  background-color: rgba(37, 211, 102, 0.08);
}

.MuiTableRow-root.Mui-selected:hover {
  background-color: rgba(37, 211, 102, 0.12);
}

/* Estilos para el diálogo de mensajes */
.message-dialog-content {
  overflow-x: hidden !important; /* Oculta la barra horizontal */
  max-width: 100%;
  padding-bottom: 12px; /* Espacio para evitar que el contenido toque el borde */
}

.message-container {
  max-width: calc(100% - 16px); /* Ancho adaptativo con margen */
  word-break: break-word; /* Evita que los mensajes largos rompan el diseño */
}

/* Para personalizar la barra vertical y hacerla menos intrusiva */
.message-dialog-content::-webkit-scrollbar {
  width: 6px;
}

.message-dialog-content::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}

/* Hide horizontal scrollbar everywhere in dialogs */
.MuiDialog-paper, 
.MuiDialogContent-root {
  overflow-x: hidden !important;
}

/* Specific fix for WhatsApp message dialog scrollbar */
.whatsapp-message-dialog .MuiDialogContent-root {
  overflow-x: hidden !important;
}

.whatsapp-message-dialog .MuiDialog-scrollPaper {
  overflow-x: hidden !important;
}

/* Ensure messages don't cause horizontal overflow */
.MuiPaper-root {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Improve DataGrid styles */
.MuiDataGrid-root {
  overflow-x: hidden !important;
  border: none !important;
}

.MuiDataGrid-main,
.MuiDataGrid-virtualScroller,
.MuiDataGrid-footerContainer {
  overflow-x: hidden !important;
}

.MuiDataGrid-columnHeaders {
  min-width: unset !important;
  width: 100% !important;
}

.MuiDataGrid-virtualScrollerContent {
  min-width: unset !important;
  width: 100% !important;
}

/* Make sure chip labels don't cause overflow */
.MuiChip-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fix pagination container to prevent overflow */
.MuiDataGrid-footerContainer {
  overflow: hidden !important;
  flex-wrap: wrap;
}

.MuiTablePagination-root {
  overflow: hidden !important;
}

.MuiTablePagination-displayedRows, 
.MuiTablePagination-selectLabel {
  margin: 0 !important; 
}

/* Make pagination more compact on small screens */
@media (max-width: 600px) {
  .MuiTablePagination-actions {
    margin-left: 8px !important;
  }
  
  .MuiTablePagination-select {
    margin-right: 8px !important;
  }
}

/* Animaciones globales para dashboard moderno */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Utilidades de animación */
.animate-pulse {
  animation: pulse 2s infinite;
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s ease-out;
}

.animate-slideInRight {
  animation: slideInRight 0.5s ease-out;
}

/* ESTILOS ESPECÍFICOS PARA VISTA MENSUAL - MÁS VISIBLES */
.rbc-month-view .rbc-event {
  background: linear-gradient(135deg, #FF5722 0%, #D32F2F 100%) !important;
  border: 2px solid #FF5722 !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: white !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 6px rgba(255, 87, 34, 0.4) !important;
  min-height: 18px !important;
  margin: 1px !important;
  opacity: 1 !important;
  z-index: 10 !important;
}

.rbc-month-view .rbc-event:hover {
  background: linear-gradient(135deg, #F44336 0%, #C62828 100%) !important;
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.6) !important;
  transform: scale(1.02) !important;
}

/* contenedor de celdas en vista mensual */
.rbc-month-view .rbc-date-cell {
  min-height: 100px !important;
  height: auto !important;
  overflow: visible !important;
  position: relative !important;  /* restaurado para anclar eventos */
}

/* Contenedor de eventos en vista mensual */
.rbc-month-view .rbc-row-content {
  height: auto !important;
  min-height: 80px !important;
  overflow: visible !important;
}

.rbc-month-view .rbc-events-container {
  margin-top: 2px !important;
  height: auto !important;
  overflow: visible !important;
}

/* Mostrar todos los eventos sin ocultar */
.rbc-month-view .rbc-show-more {
  background: #25D366 !important;
  color: white !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
}

/* DEBUG: Eventos con colores muy llamativos para prueba */
.rbc-event[data-event-id*="sample"] {
  background: linear-gradient(45deg, #FF0000, #FF6600) !important;
  border: 3px solid #FFFF00 !important;
  color: #FFFFFF !important;
  font-weight: 900 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
  animation: pulse 2s infinite !important;
}

/* ==============================================
   ANIMACIONES ÉPICAS PARA GENERACIÓN DE IA
   ============================================== */

/* Animación principal del círculo generador */
@keyframes aiGenerating {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Animación del gradiente de fondo */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Animación del icono de brillo */
@keyframes sparkle {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  25% { 
    transform: scale(1.1) rotate(90deg);
    opacity: 0.8;
  }
  50% { 
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
  }
  75% { 
    transform: scale(1.1) rotate(270deg);
    opacity: 0.9;
  }
}

/* Animaciones orbitales para partículas */
@keyframes orbit0 {
  0% { 
    transform: translate(60px, 0px) rotate(0deg) translate(-60px, 0px); 
    opacity: 1;
  }
  50% { 
    opacity: 0.6;
  }
  100% { 
    transform: translate(60px, 0px) rotate(360deg) translate(-60px, 0px); 
    opacity: 1;
  }
}

@keyframes orbit1 {
  0% { 
    transform: translate(80px, 0px) rotate(0deg) translate(-80px, 0px); 
    opacity: 0.8;
  }
  50% { 
    opacity: 0.4;
  }
  100% { 
    transform: translate(80px, 0px) rotate(360deg) translate(-80px, 0px); 
    opacity: 0.8;
  }
}

@keyframes orbit2 {
  0% { 
    transform: translate(100px, 0px) rotate(0deg) translate(-100px, 0px); 
    opacity: 0.6;
  }
  50% { 
    opacity: 0.8;
  }
  100% { 
    transform: translate(100px, 0px) rotate(360deg) translate(-100px, 0px); 
    opacity: 0.6;
  }
}

@keyframes orbit3 {
  0% { 
    transform: translate(120px, 0px) rotate(0deg) translate(-120px, 0px); 
    opacity: 0.4;
  }
  50% { 
    opacity: 1;
  }
  100% { 
    transform: translate(120px, 0px) rotate(360deg) translate(-120px, 0px); 
    opacity: 0.4;
  }
}

/* Animación del fondo con brillo */
@keyframes aiGlow {
  0% {
    filter: brightness(1) blur(0px);
    opacity: 0.8;
  }
  50% {
    filter: brightness(1.2) blur(1px);
    opacity: 1;
  }
  100% {
    filter: brightness(1) blur(0px);
    opacity: 0.8;
  }
}

/* Animación del texto principal */
@keyframes textPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.02);
    filter: brightness(1.1);
  }
}

/* Animación de fade in/out para texto secundario */
@keyframes fadeInOut {
  0%, 100% {
    opacity: 0.6;
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* Animación del progreso con brillo */
@keyframes progressGlow {
  0%, 100% {
    filter: brightness(1);
    box-shadow: 0 0 10px rgba(156,39,176,0.3);
  }
  50% {
    filter: brightness(1.2);
    box-shadow: 0 0 20px rgba(156,39,176,0.6);
  }
}

/* Animación de entrada para la imagen generada */
@keyframes imageReveal {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    filter: blur(10px);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.95) translateY(10px);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0px);
    filter: blur(0px);
  }
}

/* Animación de pulso suave para botones de acción */
@keyframes buttonPulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(156,39,176,0.2);
  }
  50% {
    box-shadow: 0 6px 25px rgba(156,39,176,0.4);
  }
}

/* Clases de utilidad para las animaciones */
.ai-image-reveal {
  animation: imageReveal 0.8s ease-out forwards;
}

.ai-button-pulse {
  animation: buttonPulse 2s ease-in-out infinite;
}

/* ==============================================
   ANIMACIONES ADICIONALES PARA CANALES
   ============================================== */

/* Animación de pulso premium para avatares */
@keyframes premiumPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 24px rgba(103,58,183,0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 16px 32px rgba(103,58,183,0.5);
  }
}

/* Animación de flotación suave */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Animación de brillo de fondo */
@keyframes backgroundGlow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.1);
  }
}

/* Animación de entrada escalonada */
@keyframes staggeredFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}

/* Estilos modernos para el dashboard */
.dashboard-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 0;
}

/* Animaciones suaves */
.fade-in {
  animation: fadeIn 0.6s ease-out;
}

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

.slide-up {
  animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gradientes personalizados */
.gradient-purple {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-pink {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gradient-blue {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.gradient-orange {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.gradient-green {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

/* Efectos de glassmorphism */
.glass-effect {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.glass-dark {
  background: rgba(26, 32, 44, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sombras modernas */
.modern-shadow {
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.modern-shadow-lg {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Efectos de hover mejorados */
.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Estilos para charts y gráficos */
.chart-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Animación de loading mejorada */
.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

/* Estilos para notificaciones */
.notification-badge {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  color: white;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0,-8px,0);
  }
  70% {
    transform: translate3d(0,-4px,0);
  }
  90% {
    transform: translate3d(0,-2px,0);
  }
}

/* Responsive design mejorado */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }
  
  .glass-effect {
    border-radius: 12px;
  }
}

/* Animación de typing effect */
.typing-effect {
  overflow: hidden;
  border-right: .15em solid #667eea;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .15em;
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #667eea; }
}

/* Mejoras para la accesibilidad */
.focus-visible:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* Estilos para elementos interactivos */
.interactive-element {
  cursor: pointer;
  transition: all 0.2s ease;
}

.interactive-element:hover {
  transform: scale(1.02);
}

.interactive-element:active {
  transform: scale(0.98);
}

/* Loader personalizado */
.modern-loader {
  width: 48px;
  height: 48px;
  border: 3px solid transparent;
  border-top: 3px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Mostrar eventos inline en vista mes de react-big-calendar */
.rbc-month-view .rbc-date-cell {
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
  position: relative !important;
  padding: 4px !important;
}

/* Asegurar que los eventos sean visibles dentro de la celda */
.rbc-month-view .rbc-event {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  margin: 1px 0 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  border-radius: 6px !important;
  padding: 2px 4px !important;
  text-align: left !important;
  font-weight: 500 !important;
}

/* Hover effect para eventos */
.rbc-month-view .rbc-event:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  z-index: 10 !important;
}

/* Mejorar el diseño general del calendario */
.rbc-calendar {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.rbc-month-view {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* Encabezados de días */
.rbc-header {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 12px 8px !important;
  border-bottom: 2px solid #cbd5e1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Celdas de fecha */
.rbc-date-cell {
  border-right: 1px solid #f1f5f9 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
  transition: background-color 0.2s ease !important;
}

.rbc-date-cell:hover {
  background: #f8fafc !important;
}

/* Números de fecha */
.rbc-button-link {
  color: #334155 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  padding: 4px !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

.rbc-button-link:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

/* Fecha de hoy */
.rbc-today {
  background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%) !important; /* fondo más notorio */
  border: 2px solid #60a5fa !important; /* borde visible */
  border-radius: 8px !important; /* esquinas suaves */
  box-shadow: inset 0 0 0 3px rgba(59, 130, 246, 0.15) !important; /* realce sutil */
}

.rbc-today .rbc-button-link {
  background: #3b82f6 !important;
  color: white !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  width: 34px !important; /* círculo más grande */
  height: 34px !important;
  line-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important; /* anillo externo */
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.rbc-today .rbc-button-link:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.35) !important;
}

/* Fechas fuera del mes actual */
.rbc-off-range {
  background: #f8fafc !important;
  color: #94a3b8 !important;
}

.rbc-off-range .rbc-button-link {
  color: #94a3b8 !important;
}

/* Botones de navegación */
.rbc-btn-group button {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.rbc-btn-group button:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
}

.rbc-btn-group button.rbc-active {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: white !important;
}

/* Toolbar */
.rbc-toolbar {
  padding: 16px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.rbc-toolbar-label {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  text-align: center !important;
}

/* Premium QR Ordering Tokens */
:root {
  --qr-primary: #6366f1;
  --qr-secondary: #a855f7;
  --qr-accent: #f43f5e;
  --qr-bg: #f8fafc;
  --qr-surface: rgba(255, 255, 255, 0.85);
  --qr-glass-border: rgba(255, 255, 255, 0.4);
  --qr-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
}

.qr-glass {
  background: var(--qr-surface);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--qr-glass-border);
}

.qr-product-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0,0,0,0.04);
}

.qr-product-card:active {
  transform: scale(0.96);
}

.qr-cart-handle {
  width: 36px;
  height: 5px;
  background: #e2e8f0;
  border-radius: 10px;
  margin: 12px auto 4px;
}

.qr-gradient-text {
  background: linear-gradient(135deg, var(--qr-primary), var(--qr-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.qr-success-check {
  width: 80px;
  height: 80px;
  background: #22c55e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
  animation: qrScaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes qrScaleIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}