/* ====================================================
   SISTEMA DE ESCALA PROPORCIONAL PARA DESKTOP
   Soporta: 1920x1080 (max) hasta 800x600 (min)
   Factor de escala: 800/1920 = 0.4167 (41.67%)
   ==================================================== */

:root {
  /* ===== FUENTES ESCALABLES ===== */
  /* Formula: clamp(min_800, valor_vw, max_1920) */
  /* Donde valor_vw = max_px / 19.2 (1vw a 1920px = 19.2px) */
  /* Minimos ajustados para legibilidad en 800px */

  --font-scale-xs: clamp(8px, 0.625vw, 12px);       /* 12px en 1920 -> 5px teorico, 8px minimo legible */
  --font-scale-sm: clamp(9px, 0.729vw, 14px);       /* 14px en 1920 -> 5.8px teorico, 9px minimo */
  --font-scale-base: clamp(10px, 0.833vw, 16px);    /* 16px base -> 6.67px teorico, 10px minimo */
  --font-scale-lg: clamp(11px, 0.9375vw, 18px);     /* 18px en 1920 */
  --font-scale-xl: clamp(12px, 1.042vw, 20px);      /* 20px en 1920 */
  --font-scale-2xl: clamp(14px, 1.25vw, 24px);      /* 24px en 1920 */
  --font-scale-3xl: clamp(16px, 1.458vw, 28px);     /* 28px en 1920 */

  /* ===== ESPACIADO ESCALABLE ===== */
  /* Espaciado puede escalar mas agresivamente */
  --space-scale-1: clamp(2px, 0.208vw, 4px);        /* 4px */
  --space-scale-2: clamp(4px, 0.417vw, 8px);        /* 8px */
  --space-scale-3: clamp(6px, 0.625vw, 12px);       /* 12px */
  --space-scale-4: clamp(8px, 0.833vw, 16px);       /* 16px */
  --space-scale-5: clamp(10px, 1.042vw, 20px);      /* 20px */
  --space-scale-6: clamp(12px, 1.25vw, 24px);       /* 24px */
  --space-scale-8: clamp(16px, 1.667vw, 32px);      /* 32px */
  --space-scale-10: clamp(20px, 2.083vw, 40px);     /* 40px */
  --space-scale-12: clamp(24px, 2.5vw, 48px);       /* 48px */

  /* ===== ANCHOS DE MODAL ESCALABLES ===== */
  /* En 800px los modales deben caber, usando % como fallback */
  --modal-width-sm: clamp(280px, 20.83vw, 400px);     /* 400px en 1920, ~167px en 800 pero min 280 */
  --modal-width-md: clamp(380px, 31.25vw, 600px);     /* 600px en 1920, ~250px en 800 pero min 380 */
  --modal-width-lg: clamp(500px, 46.875vw, 900px);    /* 900px en 1920, ~375px en 800 pero min 500 */
  --modal-width-xl: clamp(600px, 62.5vw, 1200px);     /* 1200px en 1920 */

  /* ===== ALTURA DE HEADER ESCALABLE ===== */
  --header-height-scale: clamp(80px, 7.8125vw, 150px); /* 150px en 1920, ~62px en 800 pero min 80 */

  /* ===== GRID MINMAX ESCALABLES ===== */
  --grid-card-min: clamp(80px, 7.29vw, 140px);       /* minimo para categoria-card */
  --grid-producto-min: clamp(90px, 8.33vw, 160px);   /* minimo para productos */
  --grid-mesa-min: clamp(150px, 15.625vw, 300px);    /* minimo para mesas */

  /* ===== SIDEBAR/PANEL ESCALABLE ===== */
  --sidebar-min-width: clamp(180px, 16.67vw, 320px);
  --sidebar-max-width: clamp(220px, 23.44vw, 450px);

  /* ===== BOTONES Y CONTROLES ESCALABLES ===== */
  --btn-height-sm: clamp(24px, 1.667vw, 32px);
  --btn-height-md: clamp(28px, 2.083vw, 40px);
  --btn-height-lg: clamp(32px, 2.5vw, 48px);

  /* ===== ICONOS ESCALABLES ===== */
  --icon-size-sm: clamp(12px, 0.833vw, 16px);
  --icon-size-md: clamp(14px, 1.042vw, 20px);
  --icon-size-lg: clamp(16px, 1.25vw, 24px);
  --icon-size-xl: clamp(20px, 1.667vw, 32px);

  /* ===== BORDER RADIUS ESCALABLES ===== */
  --radius-scale-sm: clamp(2px, 0.208vw, 4px);
  --radius-scale-md: clamp(4px, 0.417vw, 8px);
  --radius-scale-lg: clamp(6px, 0.625vw, 12px);
  --radius-scale-xl: clamp(8px, 0.833vw, 16px);
}

/* ===== BREAKPOINTS PARA AJUSTES ESPECIFICOS ===== */

/* Pantallas muy pequenas (800-1024px) */
@media (max-width: 1024px) {
  :root {
    /* Sidebar mas compacto en pantallas pequenas */
    --sidebar-min-width: 160px;
    --sidebar-max-width: 200px;

    /* Modales ocupan mas % del viewport */
    --modal-width-lg: min(500px, 90vw);
    --modal-width-xl: min(600px, 95vw);
  }
}

/* Pantallas medianas (1024-1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {
  :root {
    --sidebar-min-width: 200px;
    --sidebar-max-width: 280px;
  }
}

/* Pantallas grandes (1366-1600px) */
@media (min-width: 1366px) and (max-width: 1600px) {
  :root {
    --sidebar-min-width: 240px;
    --sidebar-max-width: 350px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  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-color: #ffffff;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.login-form-container {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.login-form-container h1 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #333;

}

.login-form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.login-button {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 0.75rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: background-color 0.3s;
}

.login-button:hover {
  background-color: #1976D2;
}

.login-button:disabled {
  background-color: #B0BEC5;
  cursor: not-allowed;
}

.fingerprint-retry {
  background-color: #FF9800 !important;
  margin-top: 0.5rem;
}

.fingerprint-retry:hover:not(:disabled) {
  background-color: #F57C00 !important;
}

.error-message {
  color: #D32F2F;
  background-color: #FFEBEE;
  padding: 0.75rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

/* Selector de método de autenticación */
.auth-method-selector {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  background-color: #f8f9fa;
  padding: 0.25rem;
  border-radius: 6px;
}

.method-button {
  flex: 1 1;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  font-weight: 500;
  color: #666;
}

.method-button:hover:not(:disabled) {
  background-color: #e9ecef;
  color: #333;
}

.method-button.active {
  background-color: #2196F3;
  color: white;
  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
}

.method-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Estados de autenticación biométrica */
.fingerprint-status {
  background-color: #E3F2FD;
  color: #1976D2;
  padding: 0.75rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.fingerprint-info {
  background-color: #F3E5F5;
  color: #7B1FA2;
  padding: 0.75rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  text-align: center;
}

.fingerprint-info p {
  margin: 0;
  font-size: 0.9rem;
}

/* Loading spinner */
.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #E3F2FD;
  border-top: 2px solid #1976D2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* src/components/Dashboard/Dashboard.css */

/* Variables CSS para consistencia */
:root {
  --header-height: 60px;
  --footer-height: 40px;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --border-radius: 8px;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: #f5f5f5;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.5rem;
  padding: 0 var(--spacing-lg);
  height: 60px;
  height: var(--header-height);
  min-height: 60px;
  min-height: var(--header-height);
  background-color: #2196F3;
  color: white;
  flex-shrink: 0;
}

.dashboard-header h1 {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.5rem);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  gap: var(--spacing-md);
}

.user-info span {
  font-size: clamp(0.8rem, 1.5vw, 1rem);
}

.logout-button {
  background-color: white;
  color: #2196F3;
  border: none;
  padding: 0.5rem 1rem;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 8px;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 500;
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  transition: background-color 0.3s;
}

.logout-button:hover {
  background-color: #e3f2fd;
}

/* Contenido principal */
.dashboard-content {
  flex: 1 1;
  padding: 1rem;
  padding: var(--spacing-md);
  overflow: hidden;
  height: calc(100vh - 60px - 40px);
  height: calc(100vh - var(--header-height) - var(--footer-height));
}

/* Layout principal con Grid */
.dashboard-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  grid-gap: 1rem;
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
  height: 100%;
  max-height: 100%;
}

/* Columna de categorías */
.categories-column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  grid-gap: 1rem;
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.5rem;
  padding-right: var(--spacing-xs);
}

/* Scrollbar personalizado */
.categories-column::-webkit-scrollbar {
  width: 6px;
}

.categories-column::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.categories-column::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.categories-column::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* Categorías */
.module-category {
  background-color: white;
  border-radius: 8px;
  border-radius: var(--border-radius);
  padding: 0.75rem;
  padding: var(--spacing-sm);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
}

.category-title {
  color: #333;
  font-size: clamp(0.75rem, 1.2vw, 0.95rem);
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
  padding-bottom: var(--spacing-xs);
  margin: 0 0 0.75rem 0;
  margin: 0 0 var(--spacing-sm) 0;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* Módulos en columna con scroll */
.module-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--spacing-xs);
  overflow-y: auto;
  flex: 1 1;
  min-height: 0;
  padding-right: 2px;
}

.module-column::-webkit-scrollbar {
  width: 4px;
}

.module-column::-webkit-scrollbar-track {
  background: transparent;
}

.module-column::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 2px;
}

/* Tarjetas de módulo compactas */
.module-card.compact {
  background-color: white;
  border-radius: 8px;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem 0.75rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  min-height: clamp(36px, 5vh, 48px);
  flex-shrink: 0;
}

.module-card.compact:hover:not(.disabled) {
  transform: translateX(3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-md);
}

.module-card.compact .module-icon {
  font-size: clamp(1rem, 2vw, 1.5rem);
  margin-right: 0.75rem;
  margin-right: var(--spacing-sm);
  flex-shrink: 0;
  line-height: 1;
}

.module-card.compact h3 {
  margin: 0;
  font-size: clamp(0.7rem, 1.1vw, 0.9rem);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Estilos para módulos deshabilitados */
.module-card.disabled,
.ventas-card.disabled {
  pointer-events: none;
  position: relative;
}

.module-card.disabled::after {
  content: '🔒';
  position: absolute;
  right: 8px;
  font-size: 0.9em;
  opacity: 0.7;
}

.ventas-card.disabled::after {
  content: '🔒';
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.2em;
  opacity: 0.7;
}

/* Columna de Ventas */
.ventas-column {
  width: clamp(180px, 20vw, 280px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 0;
  padding: var(--spacing-md) 0;
}

/* Tarjeta de Ventas */
.ventas-card {
  background-color: white;
  border-radius: 8px;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: clamp(200px, 40vh, 350px);
  border: 4px solid #FFD600;
}

.ventas-card:hover:not(.disabled) {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.ventas-icon {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1rem;
  margin-bottom: var(--spacing-md);
  line-height: 1;
}

.ventas-card h2 {
  margin: 0 0 0.75rem 0;
  margin: 0 0 var(--spacing-sm) 0;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  color: inherit;
}

.ventas-card p {
  margin: 0;
  font-size: clamp(0.8rem, 1.3vw, 1rem);
  opacity: 0.8;
}

/* Footer */
.dashboard-footer {
  padding: 0.75rem 1.5rem;
  padding: var(--spacing-sm) var(--spacing-lg);
  height: 40px;
  height: var(--footer-height);
  min-height: 40px;
  min-height: var(--footer-height);
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  text-align: center;
  color: #666;
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Pantallas medianas (tablets, laptops pequeños) */
@media (max-width: 1200px) {
  .categories-column {
    grid-template-columns: repeat(2, 1fr);
  }

  .ventas-column {
    width: clamp(150px, 18vw, 220px);
  }
}

/* Pantallas pequeñas */
@media (max-width: 900px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .categories-column {
    grid-template-columns: repeat(3, 1fr);
    order: 2;
  }

  .ventas-column {
    width: 100%;
    order: 1;
    padding: 0;
  }

  .ventas-card {
    height: auto;
    min-height: 100px;
    padding: 1rem;
    padding: var(--spacing-md);
    flex-direction: row;
    gap: 1rem;
    gap: var(--spacing-md);
  }

  .ventas-icon {
    font-size: 2.5rem;
    margin-bottom: 0;
  }

  .ventas-card h2 {
    margin: 0;
  }
}

/* Pantallas muy pequeñas */
@media (max-width: 600px) {
  .dashboard-content {
    padding: 0.75rem;
    padding: var(--spacing-sm);
  }

  .categories-column {
    grid-template-columns: repeat(2, 1fr);
  }

  .module-category {
    padding: 0.5rem;
    padding: var(--spacing-xs);
  }

  .category-title {
    font-size: 0.7rem;
  }

  .module-card.compact {
    padding: 0.5rem;
    padding: var(--spacing-xs);
  }

  .module-card.compact h3 {
    font-size: 0.65rem;
  }
}

/* Pantallas extra pequeñas (móviles) */
@media (max-width: 480px) {
  .categories-column {
    grid-template-columns: 1fr;
  }

  .dashboard-header {
    padding: 0 0.75rem;
    padding: 0 var(--spacing-sm);
  }

  .user-info {
    gap: 0.5rem;
    gap: var(--spacing-xs);
  }
}

/* ============================================
   ESTILOS BIOMÉTRICOS (sin cambios)
   ============================================ */

.fingerprint-test-section {
  margin: 2rem;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-left: 5px solid #667eea;
}

.test-header {
  text-align: center;
  margin-bottom: 2rem;
}

.test-header h3 {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-size: 1.4rem;
  font-weight: 600;
}

.test-header p {
  margin: 0;
  color: #666;
  font-size: 1rem;
}

.test-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.test-button {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 180px;
  position: relative;
  overflow: hidden;
}

.test-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.test-button:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.test-button.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.test-button.secondary {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
}

.test-button.tertiary {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
  color: white;
}

.test-button.info {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
}

.test-result {
  padding: 1.5rem;
  border-radius: 8px;
  margin-top: 1rem;
  animation: slideIn 0.3s ease-out;
}

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

.test-result.success {
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  border: 1px solid #b8dacc;
  color: #155724;
}

.test-result.error {
  background: linear-gradient(135deg, #f8d7da 0%, #f1b0b7 100%);
  border: 1px solid #f1b0b7;
  color: #721c24;
}

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.result-icon {
  font-size: 1.2rem;
  margin-right: 0.5rem;
}

.result-title {
  font-weight: 600;
  font-size: 1rem;
  flex: 1 1;
}

.clear-result {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.clear-result:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.result-message {
  margin: 0.5rem 0;
  font-size: 1rem;
  line-height: 1.4;
}

.result-details {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  opacity: 0.8;
  flex-wrap: wrap;
}

.result-details span {
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .fingerprint-test-section {
    margin: 1rem;
    padding: 1.5rem;
  }

  .test-buttons {
    flex-direction: column;
    align-items: center;
  }

  .test-button {
    width: 100%;
    max-width: 300px;
  }

  .result-details {
    flex-direction: column;
    gap: 0.5rem;
  }

  .test-header h3 {
    font-size: 1.2rem;
  }
}

/* Estilos del encabezado */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  flex-wrap: wrap;
  gap: 1rem;
}

.dashboard-titulo h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
}

.dashboard-titulo h1::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 4px;
  background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-full);
}

.dashboard-titulo p {
  color: var(--color-text-light);
  margin-top: 1rem;
  font-size: 1.05rem;
}

.dashboard-controles {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.selector-fecha {
  display: flex;
  align-items: center;
  background-color: var(--color-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem 1rem;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.selector-fecha:hover {
  box-shadow: var(--shadow-md);
}

.selector-periodo {
  display: flex;
  background-color: var(--color-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.selector-periodo button {
  padding: 0.5rem 1rem;
  border: none;
  background-color: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.selector-periodo button.activo {
  background-color: var(--color-primary);
  color: white;
}

.selector-periodo button:hover:not(.activo) {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Estilos de las tarjetas de métricas */
.metricas-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .metricas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .metricas-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.metrica-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  background-color: var(--color-card);
}

.metrica-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-dark));
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.metrica-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.metrica-card:hover::before {
  opacity: 1;
}

.metrica-card-inner {
  background-color: var(--color-card);
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-normal);
}

.metrica-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.metrica-titulo {
  color: var(--color-text-light);
  font-weight: 500;
}

.metrica-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.metrica-icono.positivo {
  background-color: rgba(6, 214, 160, 0.15);
  color: var(--color-success);
}

.metrica-icono.negativo {
  background-color: rgba(239, 71, 111, 0.15);
  color: var(--color-danger);
}

.metrica-valor {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}

.metrica-comparacion {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}

.metrica-comparacion.positivo {
  color: var(--color-success);
}

.metrica-comparacion.negativo {
  color: var(--color-danger);
}

.periodo {
  margin-left: 0.25rem;
  color: var(--color-text-light);
}

/* Estilos de los gráficos */
.graficos-grid,
.graficos-secundarios-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {

  .graficos-grid,
  .graficos-secundarios-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grafico-card {
  background-color: var(--color-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.grafico-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-normal);
}

.grafico-card:hover {
  box-shadow: var(--shadow-md);
}

.grafico-card:hover::after {
  transform: scaleX(1);
}

.grafico-titulo {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--color-text);
}

.grafico-contenido,
.grafico-pie-contenido {
  height: 300px;
}

/* Estilos de tablas */
.tabla-card {
  background-color: var(--color-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  margin-bottom: 2rem;
}

.tabla-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.tabla-titulo {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
}

.tabla-link {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-primary);
  cursor: pointer;
  transition: color 0.2s ease;
}

.tabla-link:hover {
  color: var(--color-primary-dark);
}

.tabla-scroll {
  overflow-x: auto;
  margin: 0 -1.25rem;
}

.tabla-productos {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}

.tabla-productos th,
.tabla-productos td {
  padding: 0.75rem 1.25rem;
  white-space: nowrap;
}

.tabla-productos th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.tabla-productos tr.par {
  background-color: var(--color-bg-alt);
}

.tabla-productos tr {
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.tabla-productos tr:hover {
  background-color: rgba(67, 97, 238, 0.08);
  transform: translateX(5px);
}

.producto-nombre {
  font-weight: 500;
  color: var(--color-text);
}

.producto-categoria {
  color: var(--color-text-light);
}

.producto-precio,
.producto-cantidad {
  text-align: right;
  color: var(--color-text);
}

.producto-total {
  text-align: right;
  font-weight: 600;
  color: var(--color-text);
}

/* Estilos para estadísticas adicionales */
.estadisticas-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  .estadisticas-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.estadistica-card {
  background-color: var(--color-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  transition: all 0.3s ease;
}

.estadistica-card:hover {
  box-shadow: var(--shadow-md);
}

.estadistica-titulo {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  color: var(--color-text);
}

/* Estilos para los métodos de pago */
.metodos-pago-contenido,
.rendimiento-dias-contenido {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.metodo-pago-item,
.rendimiento-dia-item {
  margin-bottom: 0.5rem;
}

.metodo-pago-header,
.rendimiento-dia-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.metodo-nombre,
.dia-nombre {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-text);
}

.metodo-porcentaje,
.dia-porcentaje {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.metodo-pago-barra-bg,
.rendimiento-barra-bg {
  width: 100%;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.metodo-pago-barra,
.rendimiento-barra {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.metodo-pago-barra.efectivo {
  background-color: var(--color-primary);
}

.metodo-pago-barra.tarjeta {
  background-color: var(--color-info);
}

.rendimiento-barra.semana {
  background-color: var(--color-primary);
}

.rendimiento-barra.fin-semana {
  background-color: var(--color-success);
}

/* Estilos para indicadores */
.indicadores-contenido {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.indicador-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.indicador-info p {
  margin: 0;
}

.indicador-nombre {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.indicador-valor {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 0.25rem !important;
}

.indicador-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.indicador-icono.positivo {
  background-color: rgba(6, 214, 160, 0.15);
  color: var(--color-success);
}

.indicador-icono.negativo {
  background-color: rgba(239, 71, 111, 0.15);
  color: var(--color-danger);
}

/* Estilos para la pantalla de carga mejorada */
.pantalla-carga {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: var(--color-text);
  background-color: var(--color-bg);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.spinner {
  width: 60px;
  height: 60px;
  position: relative;
  margin-bottom: 1.5rem;
}

.spinner::before,
.spinner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: var(--color-primary);
}

.spinner::before {
  animation: spin 1.5s linear infinite;
  z-index: 2;
}

.spinner::after {
  border: 4px solid rgba(67, 97, 238, 0.15);
  z-index: 1;
}

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

  100% {
    transform: rotate(360deg);
  }
}

.pantalla-carga span {
  font-size: 1.1rem;
  font-weight: 500;
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* Responsive para móviles */
@media (max-width: 640px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-controles {
    width: 100%;
    flex-direction: column;
  }

  .selector-fecha {
    width: 100%;
  }

  .selector-periodo {
    width: 100%;
  }

  .selector-periodo button {
    flex: 1 1;
    text-align: center;
  }
}

DashboardVentas.css */:root {
  /* Paleta de colores mejorada */
  --color-primary: #4361ee;
  --color-primary-light: #4895ef;
  --color-primary-dark: #3a0ca3;
  --color-secondary: #7209b7;
  --color-secondary-light: #9d4edd;
  --color-accent: #f72585;
  --color-accent-light: #ff758f;
  --color-info: #4cc9f0;
  --color-info-light: #90e0ef;
  --color-success: #06d6a0;
  --color-success-light: #80ffdb;
  --color-warning: #ffd166;
  --color-warning-light: #ffe5b4;
  --color-danger: #ef476f;
  --color-danger-light: #ffa6c1;

  /* Colores de fondo y texto */
  --color-bg: #f8f9fd;
  --color-bg-alt: #f1f4fa;
  --color-card: #ffffff;
  --color-card-hover: #ffffff;
  --color-text: #2b2d42;
  --color-text-secondary: #555b6e;
  --color-text-light: #6c757d;
  --color-text-muted: #8d99ae;
  --color-border: #e9ecef;
  --color-border-light: #f1f4f9;

  /* Sombras mejoradas */
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.07), 0 6px 6px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 3px rgba(67, 97, 238, 0.3);

  /* Bordes redondeados */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Tipografía */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

  /* Transiciones */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Espaciado */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
}

/* Estilos generales mejorados */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-text);
}

button {
  cursor: pointer;
  font-family: inherit;
}

.dashboard-container {
  min-height: 100vh;
  padding: var(--spacing-xl);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 10% 20%, rgba(67, 97, 238, 0.02) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(114, 9, 183, 0.02) 0%, transparent 20%);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.dashboard-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, rgba(67, 97, 238, 0.04), transparent);
  z-index: 0;
}

.dashboard-content {
  max-width: 100%;
  margin: 0 auto;
}
/* ===== VENTAS ENHANCED - DISEÑO PROFESIONAL Y RESPONSIVO ===== */

/* Variables CSS Mejoradas */
:root {
  /* Colores principales del sistema */
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --info-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

  /* Colores de superficie */
  --surface-primary: #ffffff;
  --surface-secondary: #f8fafc;
  --surface-tertiary: #f1f5f9;
  --surface-elevated: #ffffff;
  --surface-overlay: rgba(15, 23, 42, 0.8);

  /* Colores de texto */
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;
  --text-inverse: #ffffff;
  --text-muted: #cbd5e1;

  /* Sombras profesionales */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Transiciones */
  --transition-fast: 150ms ease-out;
  --transition-normal: 300ms ease-out;
  --transition-slow: 500ms ease-out;

  /* Bordes y radios */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
}

/* ===== LAYOUT PRINCIPAL MEJORADO ===== */
.enhanced-dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f8fafc;
  background: var(--surface-secondary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #0f172a;
  color: var(--text-primary);
  overflow: hidden;
}

.enhanced-dashboard.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.dashboard-layout {
  display: flex;
  flex: 1 1;
  overflow: hidden;
  gap: 1rem;
  gap: var(--space-4);
  padding: 1rem;
  padding: var(--space-4);
}

/* ===== SIDEBAR PROFESIONAL ===== */
.sidebar {
  display: flex;
  flex-direction: column;
  width: 280px;
  background: #ffffff;
  background: var(--surface-elevated);
  border-radius: 16px;
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: all 300ms ease-out;
  transition: all var(--transition-normal);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.sidebar.collapsed {
  width: 80px;
}

/* ===== TABS MEJORADOS ===== */
.enhanced-tabs {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  background: var(--surface-elevated);
  border-radius: 16px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.tabs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  padding: var(--space-4) var(--space-6);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: var(--primary-gradient);
  color: #ffffff;
  color: var(--text-inverse);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tabs-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.025em;
}

.sidebar-toggle,
.fullscreen-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  border-radius: var(--radius-md);
  color: #ffffff;
  color: var(--text-inverse);
  cursor: pointer;
  transition: all 150ms ease-out;
  transition: all var(--transition-fast);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.sidebar-toggle:hover,
.fullscreen-toggle:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.tabs-container {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  padding: var(--space-3);
  gap: 0.5rem;
  gap: var(--space-2);
}

.enhanced-tab-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 1rem 1rem;
  padding: var(--space-4) var(--space-4);
  background: transparent;
  border: none;
  border-radius: 12px;
  border-radius: var(--radius-lg);
  color: #64748b;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 300ms ease-out;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  text-align: left;
}

.enhanced-tab-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 500ms ease-out;
  transition: left var(--transition-slow);
}

.enhanced-tab-button:hover::before {
  left: 100%;
}

.enhanced-tab-button:hover {
  background: #f1f5f9;
  background: var(--surface-tertiary);
  color: #0f172a;
  color: var(--text-primary);
  transform: translateX(4px);
}

.enhanced-tab-button.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: var(--tab-color, var(--primary-gradient));
  color: #ffffff;
  color: var(--text-inverse);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
  transform: translateX(8px);
}

.enhanced-tab-button.active .tab-indicator {
  position: absolute;
  right: 0.5rem;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: #ffffff;
  background: var(--text-inverse);
  border-radius: 2px;
  opacity: 0.8;
}

.tab-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-content {
  flex: 1 1;
  display: flex;
  align-items: center;
  position: relative;
}

.tab-label {
  transition: opacity 150ms ease-out;
  transition: opacity var(--transition-fast);
}

.sidebar.collapsed .tab-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
}


/* ===== ÁREA PRINCIPAL ===== */
.main-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  background: var(--surface-elevated);
  border-radius: 16px;
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.content-wrapper {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tab-content-wrapper {
  flex: 1 1;
  padding: 1.5rem;
  padding: var(--space-6);
  overflow-y: auto;
}

/* ===== CONTENIDO PRINCIPAL ===== */
.main-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-header {
  padding: 1.5rem 1.5rem 1rem;
  padding: var(--space-6) var(--space-6) var(--space-4);
  background: #ffffff;
  background: var(--surface-elevated);
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  gap: var(--space-4);
}

.header-actions h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  color: var(--text-primary);
  letter-spacing: -0.025em;
}

.enhanced-refresh-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
  padding: 0.75rem 1.25rem;
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  background: var(--success-gradient);
  color: #ffffff;
  color: var(--text-inverse);
  border: none;
  border-radius: 12px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 300ms ease-out;
  transition: all var(--transition-normal);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
}

.enhanced-refresh-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
}

.enhanced-refresh-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.enhanced-refresh-button .spinning {
  animation: spin 1s linear infinite;
}

/* ===== ESTADOS DE CARGA MEJORADOS ===== */
.loading-state {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem;
  padding: var(--space-20);
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  gap: var(--space-4);
  text-align: center;
}

.loading-spinner span {
  font-size: 1.125rem;
  font-weight: 600;
  color: #64748b;
  color: var(--text-secondary);
}

.verificando-state {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem;
  padding: var(--space-20);
}

.verification-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  gap: var(--space-6);
  text-align: center;
  max-width: 400px;
}

.verification-spinner h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  color: var(--text-primary);
}

.verification-spinner p {
  margin: 0;
  font-size: 1rem;
  color: #64748b;
  color: var(--text-secondary);
}

/* ===== CONTENEDOR DE MESAS ===== */
.mesas-container {
  flex: 1 1;
  padding: 1.5rem;
  padding: var(--space-6);
  overflow-y: auto;
}

/* ===== BANNERS DE ERROR ===== */
.error-banner {
  margin: 1rem 1.5rem;
  margin: var(--space-4) var(--space-6);
  padding: 1rem;
  padding: var(--space-4);
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border: 1px solid #f87171;
  border-radius: 12px;
  border-radius: var(--radius-lg);
  color: #dc2626;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm);
}

/* ===== MODALES MEJORADOS ===== */
.enhanced-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.8);
  background: var(--surface-overlay);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 300ms ease-out ease-out;
  animation: fadeIn var(--transition-normal) ease-out;
  padding: 1rem;
  padding: var(--space-4);
}

.enhanced-modal {
  background: #ffffff;
  background: var(--surface-elevated);
  border-radius: 20px;
  border-radius: var(--radius-2xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  box-shadow: var(--shadow-2xl);
  max-width: 90vw;
  max-height: 90vh;
  width: 500px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 300ms ease-out ease-out;
  animation: slideUp var(--transition-normal) ease-out;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.enhanced-modal.large {
  width: 900px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  padding: var(--space-6) var(--space-8);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: var(--primary-gradient);
  color: #ffffff;
  color: var(--text-inverse);
}

.modal-title-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  border-radius: var(--radius-md);
  color: #ffffff;
  color: var(--text-inverse);
  cursor: pointer;
  transition: all 150ms ease-out;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: rotate(90deg);
}

.modal-body {
  flex: 1 1;
  padding: 2rem;
  padding: var(--space-8);
  overflow-y: auto;
  background: #ffffff;
}

.input-group {
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6);
}

.input-group label {
  display: block;
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-3);
  font-weight: 600;
  color: #0f172a;
  color: var(--text-primary);
  font-size: 1rem;
}

.enhanced-number-input {
  width: 100%;
  padding: 1rem;
  padding: var(--space-4);
  border: 2px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
  border-radius: var(--radius-lg);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  background: #f8fafc;
  background: var(--surface-secondary);
  color: #0f172a;
  color: var(--text-primary);
  transition: all 150ms ease-out;
  transition: all var(--transition-fast);
}

.enhanced-number-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

/* ===== TECLADO NUMÉRICO MEJORADO ===== */
.enhanced-numpad {
  background: #f8fafc;
  background: var(--surface-secondary);
  border-radius: 16px;
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  padding: var(--space-6);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm);
}

.numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  grid-gap: 0.75rem;
  grid-gap: var(--space-3);
  gap: var(--space-3);
  max-width: 300px;
  margin: 0 auto;
}

.numpad-key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: #ffffff;
  background: var(--surface-elevated);
  border: 2px solid rgba(226, 232, 240, 0.5);
  border-radius: 12px;
  border-radius: var(--radius-lg);
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 150ms ease-out;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.numpad-key::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(102, 126, 234, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 150ms ease-out;
  transition: all var(--transition-fast);
}

.numpad-key:active::before {
  width: 100px;
  height: 100px;
}

.numpad-key:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: var(--primary-gradient);
  color: #ffffff;
  color: var(--text-inverse);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
}

.numpad-key.function-key {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  background: var(--warning-gradient);
  color: #ffffff;
  color: var(--text-inverse);
  font-size: 1rem;
  border-color: transparent;
}

.numpad-key.function-key:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  background: var(--danger-gradient);
}

.numpad-key.zero-key {
  grid-column: span 2;
  width: auto;
}

.modal-footer {
  padding: 1.5rem 2rem;
  padding: var(--space-6) var(--space-8);
  background: #f8fafc;
  background: var(--surface-secondary);
  border-top: 1px solid rgba(226, 232, 240, 0.5);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  gap: var(--space-3);
}

.modal-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: 12px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 300ms ease-out;
  transition: all var(--transition-normal);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
}

.modal-btn.primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  background: var(--success-gradient);
  color: #ffffff;
  color: var(--text-inverse);
}

.modal-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
}

.modal-btn.secondary {
  background: linear-gradient(135deg, #64748b, #475569);
  background: linear-gradient(135deg, var(--text-secondary), #475569);
  color: #ffffff;
  color: var(--text-inverse);
}

.modal-btn.secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
}

/* ===== OVERLAY DE CARGA GLOBAL MEJORADO ===== */
.enhanced-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.9);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 300ms ease-out ease-out;
  animation: fadeIn var(--transition-normal) ease-out;
}

.loading-card {
  background: #ffffff;
  background: var(--surface-elevated);
  border-radius: 20px;
  border-radius: var(--radius-2xl);
  padding: 2.5rem;
  padding: var(--space-10);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  box-shadow: var(--shadow-2xl);
  text-align: center;
  max-width: 400px;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.loading-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6);
  color: #667eea;
}

.loading-card h3 {
  margin: 0 0 0.75rem;
  margin: 0 0 var(--space-3);
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  color: var(--text-primary);
}

.loading-card p {
  margin: 0 0 1.5rem;
  margin: 0 0 var(--space-6);
  color: #64748b;
  color: var(--text-secondary);
  font-size: 1rem;
}

.loading-bar {
  width: 100%;
  height: 4px;
  background: #f8fafc;
  background: var(--surface-secondary);
  border-radius: 2px;
  overflow: hidden;
}

.loading-progress {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background: var(--primary-gradient);
  border-radius: 2px;
  animation: loadingProgress 2s ease-in-out infinite;
}

/* ===== ANIMACIONES ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes loadingProgress {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ===== RESPONSIVE DESIGN MEJORADO ===== */
@media (max-width: 1024px) {
  .dashboard-layout {
    gap: 0.75rem;
    gap: var(--space-3);
    padding: 0.75rem;
    padding: var(--space-3);
  }
  
  .sidebar {
    width: 260px;
  }
  
  .sidebar.collapsed {
    width: 70px;
  }
}

@media (max-width: 768px) {
  .dashboard-layout {
    flex-direction: column;
    gap: 0.5rem;
    gap: var(--space-2);
    padding: 0.5rem;
    padding: var(--space-2);
  }
  
  .sidebar {
    width: 100%;
    order: 2;
    flex-direction: row;
    height: auto;
  }
  
  .sidebar.collapsed {
    width: 100%;
  }
  
  .enhanced-tabs {
    flex-direction: row;
  }
  
  .tabs-container {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .tabs-container::-webkit-scrollbar {
    display: none;
  }
  
  .main-area {
    order: 1;
    flex: 1 1;
  }
  
  .enhanced-modal {
    width: 95vw;
    max-height: 95vh;
  }
  
  .enhanced-modal.large {
    width: 95vw;
  }
  
  .numpad-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .numpad-key {
    width: 60px;
    height: 60px;
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .enhanced-modal,
  .enhanced-modal.large {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .tabs-title {
    font-size: 1rem;
  }
  
  .enhanced-tab-button {
    padding: 0.75rem;
    padding: var(--space-3);
    font-size: 0.75rem;
  }
  
  .tab-label {
    display: none;
  }
  
  .sidebar.collapsed .tab-label {
    display: none;
  }
  
  .numpad-key {
    width: 50px;
    height: 50px;
    font-size: 1rem;
  }
}


/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus states para accesibilidad */
.enhanced-tab-button:focus,
.enhanced-refresh-button:focus,
.sidebar-toggle:focus,
.fullscreen-toggle:focus,
.modal-close:focus,
.numpad-key:focus,
.modal-btn:focus,
.enhanced-number-input:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* ===== MEJORAS DE RENDIMIENTO ===== */
.enhanced-dashboard {
  contain: layout style paint;
}

.main-area,
.sidebar,
.enhanced-modal {
  will-change: transform;
}

/* ===== ESTILOS PROFESIONALES NUEVOS ===== */

/* Dashboard Profesional */
.professional-dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #0f172a;
  color: var(--text-primary);
  overflow: hidden;
}

.professional-dashboard.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.dashboard-layout-professional {
  display: flex;
  flex: 1 1;
  overflow: hidden;
  gap: 0;
}

/* Sidebar Profesional */
.sidebar-professional {
  display: flex;
  flex-direction: column;
  width: 320px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transition: all 300ms ease-out;
  transition: all var(--transition-normal);
  border-right: 1px solid rgba(226, 232, 240, 0.8);
  z-index: 100;
}

.sidebar-professional.collapsed {
  width: 80px;
}

/* Tabs Profesionales */
.enhanced-tabs-professional {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tabs-header-professional {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1rem;
  padding: var(--space-6) var(--space-6) var(--space-4);
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  position: relative;
}

.tabs-header-professional::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.3) 100%);
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
}

.sidebar-toggle-pro {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 8px;
  border-radius: var(--radius-md);
  color: white;
  padding: 0.5rem;
  padding: var(--space-2);
  cursor: pointer;
  transition: all 150ms ease-out;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-toggle-pro:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.brand-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
}

.brand-icon {
  color: #fbbf24;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.brand-subtitle {
  font-size: 0.75rem;
  opacity: 0.8;
  font-weight: 500;
}

.header-actions-pro {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
}

.action-btn-header,
.fullscreen-toggle-pro {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 8px;
  border-radius: var(--radius-md);
  color: white;
  padding: 0.5rem;
  padding: var(--space-2);
  cursor: pointer;
  transition: all 150ms ease-out;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn-header:hover,
.fullscreen-toggle-pro:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* Panel de Estadísticas Rápidas */
.quick-stats-panel {
  padding: 1rem 1.5rem;
  padding: var(--space-4) var(--space-6);
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.stats-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  gap: var(--space-3);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
  padding: 0.5rem;
  padding: var(--space-2);
  background: white;
  border-radius: 8px;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm);
  font-size: 0.75rem;
}

.stat-item svg {
  color: #2563eb;
  flex-shrink: 0;
}

.stat-item span {
  color: #64748b;
  color: var(--text-secondary);
  flex: 1 1;
}

.stat-item strong {
  color: #0f172a;
  color: var(--text-primary);
  font-weight: 600;
}

/* Contenedor de Tabs */
.tabs-container-professional {
  flex: 1 1;
  padding: 1rem 0.5rem;
  padding: var(--space-4) var(--space-2);
  overflow-y: auto;
}

.tabs-container-professional.collapsed {
  padding: 1rem 0.25rem;
  padding: var(--space-4) var(--space-1);
}

.tabs-navigation {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--space-2);
}

/* Botones de Tab Profesionales */
.professional-tab-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  padding: 1rem;
  padding: var(--space-4);
  background: white;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 150ms ease-out;
  transition: all var(--transition-fast);
  text-align: left;
  position: relative;
  overflow: hidden;
}

.professional-tab-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--tab-gradient);
  opacity: 0;
  transition: opacity 150ms ease-out;
  transition: opacity var(--transition-fast);
  z-index: 0;
}

.professional-tab-button:hover::before {
  opacity: 0.05;
}

.professional-tab-button.active::before {
  opacity: 0.1;
}

.professional-tab-button:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
  border-color: var(--tab-color);
}

.professional-tab-button.active {
  background: var(--tab-gradient);
  color: white;
  border-color: transparent;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
  transform: translateX(8px);
}

.tab-icon-professional {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
}

.active-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #fbbf24;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm);
}

.tab-content-professional {
  flex: 1 1;
  z-index: 1;
  position: relative;
}

.tab-label-professional {
  font-weight: 600;
  font-size: 0.875rem;
  display: block;
  margin-bottom: 2px;
}

.tab-description {
  font-size: 0.75rem;
  opacity: 0.8;
  display: block;
}

.professional-tab-button.active .tab-description {
  opacity: 0.9;
}

.tab-status {
  z-index: 1;
  position: relative;
}

.status-icon {
  color: #fbbf24;
}

/* Área Principal Profesional */
.main-area-professional {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: white;
}

.content-wrapper-professional {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Contenido Principal Profesional */
.main-content-professional {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-header-professional {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  padding: var(--space-6);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm);
}

.header-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  gap: var(--space-4);
}

.page-title-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
}

.page-icon {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
  padding: 0.5rem;
  padding: var(--space-2);
  border-radius: 8px;
  border-radius: var(--radius-md);
}

.title-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
  color: var(--text-primary);
}

.page-subtitle {
  font-size: 0.875rem;
  color: #64748b;
  color: var(--text-secondary);
  margin: 0;
}

.header-actions-professional {
  display: flex;
  align-items: center;
  gap: 1rem;
  gap: var(--space-4);
}

/* Indicadores de Estado */
.status-indicators {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  gap: var(--space-1);
  padding: 0.25rem 0.5rem;
  padding: var(--space-1) var(--space-2);
  background: white;
  border-radius: 8px;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-badge.available .status-dot {
  background: #10b981;
}

.status-badge.occupied .status-dot {
  background: #ef4444;
}

.status-badge.pending .status-dot {
  background: #f59e0b;
}

/* Botón de Actualizar Profesional */
.refresh-button-professional {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 12px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease-out;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
}

.refresh-button-professional:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
}

.refresh-button-professional:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Estados de Carga Profesionales */
.loading-state-professional {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem;
  padding: var(--space-20);
}

.loading-content {
  text-align: center;
  max-width: 300px;
}

.loading-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  gap: var(--space-4);
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6);
}

.loading-icon {
  color: #2563eb;
  animation: pulse 2s infinite;
}

.loading-dots {
  display: flex;
  gap: 0.25rem;
  gap: var(--space-1);
}

.loading-dots span {
  width: 6px;
  height: 6px;
  background: #2563eb;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.loading-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  margin: 0 0 var(--space-2);
  color: #0f172a;
  color: var(--text-primary);
}

.loading-content p {
  color: #64748b;
  color: var(--text-secondary);
  margin: 0;
}

/* Contenedor de Mesas Profesional */
.mesas-container-professional {
  flex: 1 1;
  display: flex;
  padding: 1.5rem;
  padding: var(--space-6);
  overflow: hidden;
}

.mesas-grid-wrapper {
  flex: 1 1;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border-radius: 16px;
  border-radius: var(--radius-xl);
  border: none;
  display: flex;
  flex-direction: column;
}

.mesas-summary {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  gap: var(--space-4);
}

.summary-card {
  background: white;
  padding: 1.5rem;
  padding: var(--space-6);
  border-radius: 16px;
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.summary-card h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1rem;
  margin: 0 0 var(--space-4);
  color: #0f172a;
  color: var(--text-primary);
}

.summary-stats {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  gap: var(--space-3);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  padding: var(--space-2);
  background: #f8fafc;
  background: var(--surface-secondary);
  border-radius: 8px;
  border-radius: var(--radius-md);
}

.summary-item .label {
  font-size: 0.875rem;
  color: #64748b;
  color: var(--text-secondary);
}

.summary-item .value {
  font-weight: 600;
  color: #0f172a;
  color: var(--text-primary);
}

/* Estado de Verificación Profesional */
.verification-state-professional {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem;
  padding: var(--space-20);
}

.verification-card {
  background: white;
  padding: 2rem;
  padding: var(--space-8);
  border-radius: 20px;
  border-radius: var(--radius-2xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  box-shadow: var(--shadow-2xl);
  text-align: center;
  max-width: 400px;
  width: 100%;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.verification-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  gap: var(--space-4);
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6);
}

.verification-icon {
  color: #2563eb;
  animation: pulse 2s infinite;
}

.verification-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: #0f172a;
  color: var(--text-primary);
}

.verification-content p {
  color: #64748b;
  color: var(--text-secondary);
  margin: 0.5rem 0 0;
  margin: var(--space-2) 0 0;
}

.verification-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--space-2);
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: #f1f5f9;
  background: var(--surface-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  animation: progress 2s infinite;
}

@keyframes progress {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

.progress-text {
  font-size: 0.75rem;
  color: #64748b;
  color: var(--text-secondary);
  text-align: center;
}

/* Wrappers de Contenido de Tabs */
.tab-content-wrapper-professional {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-header-tab {
  padding: 1.5rem;
  padding: var(--space-6);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm);
}

.tab-header-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
}

.tab-icon-header {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
  padding: 0.5rem;
  padding: var(--space-2);
  border-radius: 8px;
  border-radius: var(--radius-md);
}

.tab-title-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
  color: var(--text-primary);
}

.tab-title-section p {
  font-size: 0.875rem;
  color: #64748b;
  color: var(--text-secondary);
  margin: 2px 0 0;
}

.tab-content-body {
  flex: 1 1;
  overflow: auto;
  padding: 1.5rem;
  padding: var(--space-6);
}

/* Banner de Error Profesional */
.error-banner-professional {
  margin: 1rem 1.5rem;
  margin: var(--space-4) var(--space-6);
  padding: 1rem;
  padding: var(--space-4);
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid #fecaca;
  border-radius: 12px;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm);
}

.error-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
  color: #dc2626;
  font-weight: 500;
}

/* Estado de Error Profesional */
.error-state-professional {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem;
  padding: var(--space-20);
}

.error-state-professional .error-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  gap: var(--space-4);
}

.error-icon {
  color: #dc2626;
}

.error-state-professional h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: #0f172a;
  color: var(--text-primary);
}

.error-state-professional p {
  color: #64748b;
  color: var(--text-secondary);
  margin: 0;
}

/* Overlay de Carga Profesional */
.professional-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.loading-card-professional {
  background: white;
  padding: 2rem;
  padding: var(--space-8);
  border-radius: 20px;
  border-radius: var(--radius-2xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  box-shadow: var(--shadow-2xl);
  text-align: center;
  max-width: 400px;
  width: 90%;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.loading-animation-professional {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  gap: var(--space-4);
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6);
  position: relative;
}

.loading-icon-pro {
  color: #2563eb;
  z-index: 2;
  position: relative;
}

.loading-spinner-pro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spinner-inner {
  width: 60px;
  height: 60px;
  border: 3px solid rgba(37, 99, 235, 0.2);
  border-top: 3px solid #2563eb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.loading-content-pro h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  margin: 0 0 var(--space-2);
  color: #0f172a;
  color: var(--text-primary);
}

.loading-content-pro p {
  color: #64748b;
  color: var(--text-secondary);
  margin: 0 0 1rem;
  margin: 0 0 var(--space-4);
}

.loading-progress-bar {
  width: 100%;
  height: 4px;
  background: #f1f5f9;
  background: var(--surface-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill-pro {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  animation: progress 2s infinite;
}

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

.spinning {
  animation: spin 1s linear infinite;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
  .sidebar-professional {
    width: 280px;
    position: fixed;
    left: -280px;
    top: 0;
    height: 100vh;
    z-index: 1000;
    transition: left 300ms ease-out;
    transition: left var(--transition-normal);
  }

  .sidebar-professional.collapsed {
    left: 0;
    width: 80px;
  }

  .mesas-container-professional {
    flex-direction: column;
  }

  .mesas-summary {
    width: 100%;
  }

  .status-indicators {
    flex-wrap: wrap;
  }

  .header-actions-professional {
    flex-wrap: wrap;
  }
}

/* ===== UTILIDADES ADICIONALES ===== */
.error-state {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem;
  padding: var(--space-20);
  color: #64748b;
  color: var(--text-secondary);
  font-size: 1.125rem;
  font-weight: 600;
}
/* MapaMesas.css - Estilos modernos para el mapa de mesas */

/* ===== VARIABLES CSS ===== */
:root {
  --mesa-border-radius: 12px;
  --mesa-transition: 0.3s;
  --mesa-transition-fast: 0.15s;
  
  /* Sombras modernas */
  --mesa-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --mesa-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --mesa-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --mesa-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);

  /* Colores modernos */
  --mesa-disponible: #10b981;
  --mesa-disponible-dark: #059669;
  --mesa-ocupada: #ef4444;
  --mesa-ocupada-dark: #dc2626;
  --mesa-pendiente: #f59e0b;
  --mesa-pendiente-dark: #d97706;

  /* Colores de superficie */
  --mesa-bg-primary: #f8fafc;
  --mesa-bg-secondary: #ffffff;
  --mesa-bg-tertiary: #f1f5f9;

  /* Colores de texto */
  --mesa-text-primary: #0f172a;
  --mesa-text-secondary: #64748b;
  --mesa-text-light: #ffffff;

  /* Espaciado */
  --mesa-space-1: 0.25rem;
  --mesa-space-2: 0.5rem;
  --mesa-space-3: 0.75rem;
  --mesa-space-4: 1rem;
  --mesa-space-5: 1.25rem;
  --mesa-space-6: 1.5rem;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.mesa-map-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  overflow: hidden;
  border-radius: 0;
}

/* ===== LEYENDA MODERNA - OCULTA PARA EVITAR DUPLICACIÓN ===== */
.mesa-legend-modern {
  display: none;
}

.legend-item-modern {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--mesa-space-3);
  padding: 0.75rem 1.25rem;
  padding: var(--mesa-space-3) var(--mesa-space-5);
  border-radius: 12px;
  border-radius: var(--mesa-border-radius);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  transition: all var(--mesa-transition) ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.legend-item-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.legend-item-modern:hover::before {
  left: 100%;
}

.legend-item-modern.disponible {
  background: linear-gradient(135deg, #10b981, #059669);
  background: linear-gradient(135deg, var(--mesa-disponible), var(--mesa-disponible-dark));
  color: #ffffff;
  color: var(--mesa-text-light);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--mesa-shadow-md);
}

.legend-item-modern.ocupada {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  background: linear-gradient(135deg, var(--mesa-ocupada), var(--mesa-ocupada-dark));
  color: #ffffff;
  color: var(--mesa-text-light);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--mesa-shadow-md);
}

.legend-item-modern.pendiente {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  background: linear-gradient(135deg, var(--mesa-pendiente), var(--mesa-pendiente-dark));
  color: #ffffff;
  color: var(--mesa-text-light);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--mesa-shadow-md);
}

.legend-item-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  box-shadow: var(--mesa-shadow-lg);
}

/* ===== CONTENEDOR DEL MAPA ===== */
.mesa-map {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  flex: 1 1;
  overflow: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1.5rem;
  padding: var(--mesa-space-6);
  border-radius: 16px;
  margin: 0;
  min-height: 500px;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

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

.mesa-map::-webkit-scrollbar-track {
  background: #f1f5f9;
  background: var(--mesa-bg-tertiary);
  border-radius: 4px;
}

.mesa-map::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.mesa-map::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ===== ESTILO DE LAS MESAS MODERNAS ===== */
.mesa-item {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  min-width: 60px;
  min-height: 60px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.mesa-item::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  transition: opacity var(--mesa-transition) ease;
}

.mesa-item:hover::before {
  opacity: 1;
}

.mesa-item:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  z-index: 10;
  border-color: rgba(255, 255, 255, 0.2);
}

.mesa-item:active {
  transform: translateY(-1px) scale(1.01);
}

/* Estados de las mesas - Usando los colores exactos del diseño */
.mesa-item.disponible {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.mesa-item.ocupada {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.mesa-item.pendiente {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

/* ===== CONTENIDO DE LA MESA ===== */
.mesa-content-modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
  height: 100%;
}

.mesa-icon {
  opacity: 0.9;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
  flex-shrink: 0;
}

.mesa-numero-modern {
  font-size: 0.875rem;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

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

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

.mesa-item {
  animation: fadeIn 0.5s ease-out;
}

.mesa-item.pendiente {
  animation: fadeIn 0.5s ease-out, pulse 2s ease-in-out infinite;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .mesa-map {
    padding: 16px;
    min-height: 400px;
  }

  .mesa-item {
    min-width: 50px;
    min-height: 50px;
  }

  .mesa-content-modern {
    gap: 2px;
    padding: 6px;
  }

  .mesa-numero-modern {
    font-size: 0.75rem;
  }

  .mesa-icon {
    width: 14px;
    height: 14px;
  }
}

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.mesa-item:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}


/* ===== EFECTOS ESPECIALES ===== */
.mesa-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transition: transform var(--mesa-transition) ease;
}

.mesa-item:hover::after {
  transform: scaleX(1);
}
/* SeleccionMeseroHorizontal.css - Estilos modernos para el selector horizontal de meseros */

/* ===== VARIABLES CSS ===== */
:root {
  --modal-border-radius: 16px;
  --card-border-radius: 12px;
  --transition-duration: 0.3s;
  --transition-fast: 0.15s;
  
  /* Sombras modernas */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Colores modernos */
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-primary-light: #93c5fd;
  
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  
  --color-secondary: #64748b;
  --color-secondary-dark: #475569;
  --color-secondary-light: #cbd5e1;

  /* Colores de superficie */
  --color-bg-primary: #f8fafc;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #f1f5f9;
  --color-bg-overlay: rgba(15, 23, 42, 0.5);

  /* Colores de texto */
  --color-text-primary: #0f172a;
  --color-text-secondary: #64748b;
  --color-text-tertiary: #94a3b8;
  --color-text-light: #ffffff;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
}

/* ===== OVERLAY Y MODAL ===== */
.selector-horizontal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.5);
  background: var(--color-bg-overlay);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
  padding: 1rem;
  padding: var(--space-4);
}

.selector-horizontal-modal {
  background: #ffffff;
  background: var(--color-bg-secondary);
  border-radius: 16px;
  border-radius: var(--modal-border-radius);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  box-shadow: var(--shadow-2xl);
  width: 100%;
  max-width: 1000px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.4s ease-out;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

/* ===== HEADER MODERNO ===== */
.selector-horizontal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  padding: var(--space-6) var(--space-8);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  color: var(--color-text-light);
  position: relative;
  overflow: hidden;
}

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

.header-horizontal-title-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  gap: var(--space-4);
  z-index: 1;
}

.title-horizontal-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  border-radius: var(--card-border-radius);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
}

.selector-horizontal-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-horizontal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  transition: all var(--transition-duration) ease;
  z-index: 1;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.btn-horizontal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* ===== BARRA DE BÚSQUEDA MODERNA ===== */
.search-horizontal-container {
  padding: 1.5rem 2rem;
  padding: var(--space-6) var(--space-8);
  background: #f1f5f9;
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.search-horizontal-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.search-horizontal-icon {
  position: absolute;
  left: 1rem;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  color: var(--color-text-secondary);
  pointer-events: none;
}

.search-horizontal-input {
  width: 100%;
  padding: 1rem 3rem 1rem calc(1rem * 2 + 24px);
  padding: var(--space-4) var(--space-12) var(--space-4) calc(var(--space-4) * 2 + 24px);
  border: 2px solid transparent;
  border-radius: 12px;
  border-radius: var(--card-border-radius);
  font-size: 1rem;
  background: #ffffff;
  background: var(--color-bg-secondary);
  color: #0f172a;
  color: var(--color-text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  transition: all var(--transition-duration) ease;
}

.search-horizontal-input:focus {
  outline: none;
  border-color: #3b82f6;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

.search-horizontal-input::placeholder {
  color: #94a3b8;
  color: var(--color-text-tertiary);
}

.clear-horizontal-search {
  position: absolute;
  right: 0.75rem;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  transition: all var(--transition-duration) ease;
  color: #ef4444;
  color: var(--color-danger);
}

.clear-horizontal-search:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: translateY(-50%) scale(1.1);
}

/* ===== CONTENIDO DEL MODAL ===== */
.selector-horizontal-content {
  flex: 1 1;
  overflow-y: auto;
  background: #f8fafc;
  background: var(--color-bg-primary);
  padding: 1.5rem;
  padding: var(--space-6);
}

/* Scrollbar personalizado */
.selector-horizontal-content::-webkit-scrollbar {
  width: 8px;
}

.selector-horizontal-content::-webkit-scrollbar-track {
  background: #f1f5f9;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
}

.selector-horizontal-content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  background: var(--color-secondary-light);
  border-radius: 4px;
}

.selector-horizontal-content::-webkit-scrollbar-thumb:hover {
  background: #64748b;
  background: var(--color-secondary);
}

/* ===== ESTADO DE CARGA MODERNO ===== */
.loading-horizontal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  gap: var(--space-6);
  padding: 3rem 2rem;
  padding: var(--space-12) var(--space-8);
  min-height: 350px;
}

.loading-horizontal-spinner {
  position: relative;
}

.spinner-horizontal-circle {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(102, 126, 234, 0.1);
  border-left-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-horizontal-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: #64748b;
  color: var(--color-text-secondary);
  animation: pulse 2s ease-in-out infinite;
}

/* ===== MENSAJE DE ERROR MODERNO ===== */
.error-horizontal-message {
  display: flex;
  align-items: center;
  gap: 1rem;
  gap: var(--space-4);
  padding: 1.5rem;
  padding: var(--space-6);
  margin: 2rem auto;
  margin: var(--space-8) auto;
  max-width: 600px;
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border: 1px solid #fca5a5;
  border-radius: 12px;
  border-radius: var(--card-border-radius);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
}

.error-horizontal-icon {
  color: #dc2626;
  flex-shrink: 0;
}

.error-horizontal-text {
  flex: 1 1;
  color: #dc2626;
  font-weight: 500;
}

/* ===== GRID HORIZONTAL DE MESEROS ===== */
.meseros-horizontal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  grid-gap: 1rem;
  grid-gap: var(--space-4);
  gap: var(--space-4);
  animation: fadeIn 0.5s ease-out;
}

/* ===== NO RESULTADOS MODERNO ===== */
.no-results-horizontal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  gap: var(--space-4);
  padding: 3rem 2rem;
  padding: var(--space-12) var(--space-8);
  text-align: center;
  color: #64748b;
  color: var(--color-text-secondary);
}

.no-results-horizontal-icon {
  color: #cbd5e1;
  color: var(--color-secondary-light);
  animation: bounce 2s ease-in-out infinite;
}

.no-results-horizontal p {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
}

/* ===== CARD DE MESERO HORIZONTAL ===== */
.mesero-horizontal-card {
  position: relative;
  background: #ffffff;
  background: var(--color-bg-secondary);
  border-radius: 12px;
  border-radius: var(--card-border-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  transition: all var(--transition-duration) ease;
  display: flex;
  align-items: center;
  gap: 1rem;
  gap: var(--space-4);
  padding: 1.25rem;
  padding: var(--space-5);
  border: 2px solid transparent;
  min-height: 100px;
}

.mesero-horizontal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--card-color);
  transition: width 0.3s ease;
  transition: width var(--transition-duration) ease;
}

.mesero-horizontal-card:hover {
  transform: translateX(4px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
  border-color: var(--card-color);
}

.mesero-horizontal-card:hover::before {
  width: 8px;
}

.mesero-horizontal-card.selected {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-color: var(--card-color);
}

.mesero-horizontal-card.selected::before {
  width: 100%;
  opacity: 0.1;
}

.mesero-horizontal-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--card-color) 0%, color-mix(in srgb, var(--card-color) 80%, black) 100%);
  border-radius: 50%;
  color: #ffffff;
  color: var(--color-text-light);
  flex-shrink: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
}

.mesero-horizontal-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  gap: var(--space-1);
  min-width: 0;
  z-index: 1;
}

.mesero-horizontal-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #0f172a;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.025em;
}

.mesero-horizontal-number {
  font-size: 0.875rem;
  color: #64748b;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.selected-horizontal-badge {
  position: absolute;
  top: 0.75rem;
  top: var(--space-3);
  right: 0.75rem;
  right: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #10b981 0%, var(--color-success-dark) 100%);
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  color: #ffffff;
  color: var(--color-text-light);
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
  animation: scaleIn 0.3s ease-out;
  z-index: 2;
}

.mesero-horizontal-hover-effect {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--card-color) 0%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  transition: transform var(--transition-duration) ease;
}

.mesero-horizontal-card:hover .mesero-horizontal-hover-effect {
  transform: scaleX(1);
}

/* ===== FOOTER MODERNO ===== */
.selector-horizontal-footer {
  padding: 1.25rem 2rem;
  padding: var(--space-5) var(--space-8);
  background: #ffffff;
  background: var(--color-bg-secondary);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  gap: var(--space-3);
}

.btn-horizontal-cancel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  padding: var(--space-3) var(--space-6);
  background: linear-gradient(135deg, #64748b, #475569);
  background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
  color: #ffffff;
  color: var(--color-text-light);
  border: none;
  border-radius: 12px;
  border-radius: var(--card-border-radius);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  transition: all var(--transition-duration) ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.btn-horizontal-cancel::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.btn-horizontal-cancel:hover::before {
  left: 100%;
}

.btn-horizontal-cancel:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, #475569, #334155);
  background: linear-gradient(135deg, var(--color-secondary-dark), #334155);
}

.btn-horizontal-cancel:active {
  transform: translateY(-1px);
}

/* ===== ANIMACIONES ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

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

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .selector-horizontal-modal {
    max-width: 100%;
    max-height: 95vh;
    margin: 0.5rem;
    margin: var(--space-2);
  }
  
  .selector-horizontal-header {
    padding: 1rem 1.5rem;
    padding: var(--space-4) var(--space-6);
  }
  
  .selector-horizontal-title {
    font-size: 1.5rem;
  }
  
  .title-horizontal-icon-wrapper {
    width: 40px;
    height: 40px;
  }
  
  .search-horizontal-container {
    padding: 1rem 1.5rem;
    padding: var(--space-4) var(--space-6);
  }
  
  .selector-horizontal-content {
    padding: 1rem;
    padding: var(--space-4);
  }
  
  .meseros-horizontal-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    gap: var(--space-3);
  }
  
  .mesero-horizontal-card {
    padding: 1rem;
    padding: var(--space-4);
  }
  
  .mesero-horizontal-avatar {
    width: 48px;
    height: 48px;
  }
  
  .selector-horizontal-footer {
    padding: 1rem 1.5rem;
    padding: var(--space-4) var(--space-6);
  }
}

@media (max-width: 480px) {
  .selector-horizontal-overlay {
    padding: 0;
  }
  
  .selector-horizontal-modal {
    border-radius: 0;
    max-height: 100vh;
    margin: 0;
  }
  
  .mesero-horizontal-avatar {
    width: 40px;
    height: 40px;
  }
  
  .mesero-horizontal-name {
    font-size: 1rem;
  }
}

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.btn-horizontal-close:focus,
.mesero-horizontal-card:focus,
.btn-horizontal-cancel:focus,
.search-horizontal-input:focus,
.clear-horizontal-search:focus {
  outline: 2px solid #3b82f6;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ===== MODO OSCURO ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-tertiary: #334155;
    --color-bg-overlay: rgba(0, 0, 0, 0.7);
    --color-text-primary: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #94a3b8;
  }
  
  .selector-horizontal-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  }
  
  .search-horizontal-input {
    background: #f1f5f9;
    background: var(--color-bg-tertiary);
    color: #0f172a;
    color: var(--color-text-primary);
  }
  
  .error-horizontal-message {
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
    border-color: #991b1b;
  }
  
  .mesero-horizontal-card {
    background: #f1f5f9;
    background: var(--color-bg-tertiary);
  }
}
/* Ventas.css - Estilos modernos para el módulo de Ventas */

/* ===== VARIABLES CSS ===== */
:root {
  --ventas-border-radius: 16px;
  --ventas-card-radius: 12px;
  --ventas-transition: 0.3s;
  --ventas-transition-fast: 0.15s;

  /* Sombras modernas */
  --ventas-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --ventas-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --ventas-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --ventas-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
  --ventas-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Colores modernos */
  --ventas-primary: #3b82f6;
  --ventas-primary-dark: #2563eb;
  --ventas-primary-light: #93c5fd;

  --ventas-success: #10b981;
  --ventas-success-dark: #059669;

  --ventas-warning: #f59e0b;
  --ventas-warning-dark: #d97706;

  --ventas-danger: #ef4444;
  --ventas-danger-dark: #dc2626;

  --ventas-secondary: #64748b;
  --ventas-secondary-dark: #475569;
  --ventas-secondary-light: #cbd5e1;

  /* Colores de superficie */
  --ventas-bg-primary: #ffffff;
  --ventas-bg-secondary: #ffffff;
  --ventas-bg-tertiary: #f8fafc;
  --ventas-bg-overlay: rgba(15, 23, 42, 0.5);

  /* Colores de texto */
  --ventas-text-primary: #0f172a;
  --ventas-text-secondary: #64748b;
  --ventas-text-tertiary: #94a3b8;
  --ventas-text-light: #ffffff;

  /* Espaciado */
  --ventas-space-1: 0.25rem;
  --ventas-space-2: 0.5rem;
  --ventas-space-3: 0.75rem;
  --ventas-space-4: 1rem;
  --ventas-space-5: 1.25rem;
  --ventas-space-6: 1.5rem;
  --ventas-space-8: 2rem;

  /* Status colors para estados */
  --status-abierto: #22c55e;
  --status-pendiente: #f59e0b;
  --status-cerrado: #3b82f6;
  --status-completado: #10b981;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background: #ffffff;
  background: var(--ventas-bg-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
  overflow: hidden;
}

.dashboard-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1rem;
  padding: var(--ventas-space-4);
  gap: 0.5rem;
  gap: var(--ventas-space-2);
  width: 100%;
  max-width: 100%;
}

/* ===== TABS MODERNOS ===== */
.pedidos-tabs {
  display: flex;
  gap: 0.5rem;
  gap: var(--ventas-space-2);
  background: #ffffff;
  background: var(--ventas-bg-secondary);
  padding: 0.75rem;
  padding: var(--ventas-space-3);
  border-radius: 16px;
  border-radius: var(--ventas-border-radius);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-md);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pedidos-tabs::-webkit-scrollbar {
  display: none;
}

.tab-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--ventas-space-3);
  padding: 1rem 1.5rem;
  padding: var(--ventas-space-4) var(--ventas-space-6);
  border: none;
  border-radius: 12px;
  border-radius: var(--ventas-card-radius);
  background: transparent;
  color: #64748b;
  color: var(--ventas-text-secondary);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  transition: all var(--ventas-transition) ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.tab-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.tab-button:hover::before {
  left: 100%;
}

.tab-button:hover {
  background: #f8fafc;
  background: var(--ventas-bg-tertiary);
  color: #0f172a;
  color: var(--ventas-text-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-md);
}

.tab-button.active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  background: linear-gradient(135deg, var(--ventas-primary), var(--ventas-primary-dark));
  color: #ffffff;
  color: var(--ventas-text-light);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  box-shadow: var(--ventas-shadow-lg);
}

.tab-button.active:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  background: linear-gradient(135deg, var(--ventas-primary-dark), #1d4ed8);
  transform: translateY(-1px);
}

/* ===== CONTENEDOR DE TABS ===== */
.tab-container {
  flex: 1 1;
  background: #ffffff;
  background: var(--ventas-bg-secondary);
  border-radius: 16px;
  border-radius: var(--ventas-border-radius);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Estilos de tab-content movidos a la sección de pedidos específicos */

/* ===== CONTROLES DE PEDIDO ===== */
.pedido-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  margin-bottom: var(--ventas-space-4);
  gap: 0.75rem;
  gap: var(--ventas-space-3);
  flex-wrap: wrap;
}

.refresh-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--ventas-space-2);
  padding: 0.75rem 1.25rem;
  padding: var(--ventas-space-3) var(--ventas-space-5);
  background: linear-gradient(135deg, #10b981, #059669);
  background: linear-gradient(135deg, var(--ventas-success), var(--ventas-success-dark));
  color: #ffffff;
  color: var(--ventas-text-light);
  border: none;
  border-radius: 12px;
  border-radius: var(--ventas-card-radius);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  transition: all var(--ventas-transition) ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-md);
}

.refresh-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669, #047857);
  background: linear-gradient(135deg, var(--ventas-success-dark), #047857);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  box-shadow: var(--ventas-shadow-lg);
}

.refresh-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.refresh-button .spinning {
  animation: spin 1s linear infinite;
}

/* ===== ESTADOS DE CARGA ===== */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  padding: var(--ventas-space-8);
  min-height: 200px;
}

.loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--ventas-space-3);
  color: #64748b;
  color: var(--ventas-text-secondary);
  font-size: 1.125rem;
  font-weight: 500;
}

.loading::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid rgba(59, 130, 246, 0.1);
  border-left-color: #3b82f6;
  border-left-color: var(--ventas-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.verificando-pedido {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== MENSAJES DE ERROR ===== */
.error-message {
  margin-top: 1rem;
  margin-top: var(--ventas-space-4);
  padding: 1rem;
  padding: var(--ventas-space-4);
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border: 1px solid #fca5a5;
  border-radius: 12px;
  border-radius: var(--ventas-card-radius);
  color: #dc2626;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-sm);
}

/* ===== MODALES MODERNOS ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.5);
  background: var(--ventas-bg-overlay);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

.modal-container,
.mesero-modal-container {
  background: #ffffff;
  background: var(--ventas-bg-secondary);
  border-radius: 16px;
  border-radius: var(--ventas-border-radius);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  box-shadow: var(--ventas-shadow-2xl);
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.4s ease-out;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.modal-container {
  width: 500px;
}

.mesero-modal-container {
  width: 900px;
}

/* ===== HEADER DE MODAL ===== */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  padding: var(--ventas-space-6) var(--ventas-space-8);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  color: var(--ventas-text-light);
}

.modal-title-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--ventas-space-3);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #ffffff;
  color: var(--ventas-text-light);
  cursor: pointer;
  transition: all 0.3s ease;
  transition: all var(--ventas-transition) ease;
  font-size: 1.25rem;
}

.close-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* ===== CUERPO DE MODAL ===== */
.modal-body {
  flex: 1 1;
  padding: 2rem;
  padding: var(--ventas-space-8);
  overflow-y: auto;
}

.form-group {
  margin-bottom: 1.5rem;
  margin-bottom: var(--ventas-space-6);
}

.form-group label {
  display: block;
  margin-bottom: 0.75rem;
  margin-bottom: var(--ventas-space-3);
  font-weight: 600;
  color: #0f172a;
  color: var(--ventas-text-primary);
  font-size: 1rem;
}

.numero-input {
  width: 100%;
  padding: 1rem;
  padding: var(--ventas-space-4);
  border: 2px solid #cbd5e1;
  border: 2px solid var(--ventas-secondary-light);
  border-radius: 12px;
  border-radius: var(--ventas-card-radius);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  background: #f8fafc;
  background: var(--ventas-bg-tertiary);
  color: #0f172a;
  color: var(--ventas-text-primary);
  transition: all 0.3s ease;
  transition: all var(--ventas-transition) ease;
}

.numero-input:focus {
  outline: none;
  border-color: #3b82f6;
  border-color: var(--ventas-primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* ===== TECLADO NUMÉRICO ===== */
.teclado-numerico {
  background: #f8fafc;
  background: var(--ventas-bg-tertiary);
  border-radius: 12px;
  border-radius: var(--ventas-card-radius);
  padding: 1.5rem;
  padding: var(--ventas-space-6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-sm);
}

.teclado-header {
  text-align: center;
  font-weight: 600;
  color: #64748b;
  color: var(--ventas-text-secondary);
  margin-bottom: 1rem;
  margin-bottom: var(--ventas-space-4);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.teclado-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  grid-gap: 0.75rem;
  grid-gap: var(--ventas-space-3);
  gap: var(--ventas-space-3);
  max-width: 300px;
  margin: 0 auto;
}

.teclado-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #ffffff;
  background: var(--ventas-bg-secondary);
  border: 2px solid #cbd5e1;
  border: 2px solid var(--ventas-secondary-light);
  border-radius: 12px;
  border-radius: var(--ventas-card-radius);
  font-size: 1.25rem;
  font-weight: 600;
  color: #0f172a;
  color: var(--ventas-text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  transition: all var(--ventas-transition) ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-sm);
}

.teclado-btn:hover {
  background: #3b82f6;
  background: var(--ventas-primary);
  color: #ffffff;
  color: var(--ventas-text-light);
  border-color: #3b82f6;
  border-color: var(--ventas-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-md);
}

.teclado-btn.teclado-fn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  background: linear-gradient(135deg, var(--ventas-warning), var(--ventas-warning-dark));
  color: #ffffff;
  color: var(--ventas-text-light);
  border-color: #f59e0b;
  border-color: var(--ventas-warning);
  font-size: 0.875rem;
}

.teclado-btn.teclado-fn:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
  background: linear-gradient(135deg, var(--ventas-warning-dark), #b45309);
}

.teclado-btn.btn-zero {
  grid-column: span 2;
  width: auto;
}

.teclado-spacer {
  grid-column: span 1;
}

/* ===== FOOTER DE MODAL ===== */
.modal-footer {
  padding: 1.5rem 2rem;
  padding: var(--ventas-space-6) var(--ventas-space-8);
  background: #f8fafc;
  background: var(--ventas-bg-tertiary);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  gap: var(--ventas-space-3);
}

.accept-button,
.cancel-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--ventas-space-2);
  padding: 0.75rem 1.5rem;
  padding: var(--ventas-space-3) var(--ventas-space-6);
  border: none;
  border-radius: 12px;
  border-radius: var(--ventas-card-radius);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  transition: all var(--ventas-transition) ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-md);
  position: relative;
  overflow: hidden;
}

.accept-button {
  background: linear-gradient(135deg, #10b981, #059669);
  background: linear-gradient(135deg, var(--ventas-success), var(--ventas-success-dark));
  color: #ffffff;
  color: var(--ventas-text-light);
}

.accept-button:hover {
  background: linear-gradient(135deg, #059669, #047857);
  background: linear-gradient(135deg, var(--ventas-success-dark), #047857);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  box-shadow: var(--ventas-shadow-lg);
}

.cancel-button {
  background: linear-gradient(135deg, #64748b, #475569);
  background: linear-gradient(135deg, var(--ventas-secondary), var(--ventas-secondary-dark));
  color: #ffffff;
  color: var(--ventas-text-light);
}

.cancel-button:hover {
  background: linear-gradient(135deg, #475569, #334155);
  background: linear-gradient(135deg, var(--ventas-secondary-dark), #334155);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  box-shadow: var(--ventas-shadow-lg);
}

/* ===== OVERLAY DE CARGA GLOBAL ===== */
.loading-overlay {
  background: rgba(15, 23, 42, 0.7);
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  gap: var(--ventas-space-6);
  padding: 2rem;
  padding: var(--ventas-space-8);
  background: #ffffff;
  background: var(--ventas-bg-secondary);
  border-radius: 16px;
  border-radius: var(--ventas-border-radius);
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
  box-shadow: var(--ventas-shadow-xl);
}

.loading-spinner .loading {
  font-size: 1.125rem;
  font-weight: 600;
  color: #0f172a;
  color: var(--ventas-text-primary);
}

.loading-spinner .loading::before {
  width: 32px;
  height: 32px;
}

/* ===== ANIMACIONES ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .dashboard-content {
    padding: 0.75rem;
    padding: var(--ventas-space-3);
    gap: 0.75rem;
    gap: var(--ventas-space-3);
  }

  .pedidos-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
    gap: var(--ventas-space-3);
    /* Mantener cuadrados en tablets */
    grid-auto-rows: 250px;
  }

  .pedido-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .nuevo-pedido-button {
    width: 100%;
    justify-content: center;
  }

  .pedidos-tabs {
    padding: 0.5rem;
    padding: var(--ventas-space-2);
    gap: 0.25rem;
    gap: var(--ventas-space-1);
  }

  .tab-button {
    padding: 0.75rem 1rem;
    padding: var(--ventas-space-3) var(--ventas-space-4);
    font-size: 0.8rem;
  }

  .tab-button span {
    display: none;
  }

  .tab-content {
    padding: 1rem;
    padding: var(--ventas-space-4);
  }

  .modal-container,
  .mesero-modal-container {
    width: 95vw;
    max-height: 95vh;
  }

  .modal-header {
    padding: 1rem 1.5rem;
    padding: var(--ventas-space-4) var(--ventas-space-6);
  }

  .modal-header h2 {
    font-size: 1.25rem;
  }

  .modal-body {
    padding: 1.5rem;
    padding: var(--ventas-space-6);
  }

  .teclado-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .teclado-btn {
    width: 50px;
    height: 50px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .dashboard-content {
    padding: 0.5rem;
    padding: var(--ventas-space-2);
  }

  .pedidos-status-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pedidos-status-tabs::-webkit-scrollbar {
    display: none;
  }

  .status-tab-button {
    min-width: 100px;
    flex: 0 0 auto;
  }

  .pedidos-grid {
    grid-template-columns: 1fr;
    /* En móviles, mantener proporción más rectangular pero controlada */
    grid-auto-rows: 280px;
  }

  .pedidos-tabs {
    flex-wrap: wrap;
  }

  .tab-button {
    flex: 1 1;
    min-width: calc(50% - 0.25rem);
    min-width: calc(50% - var(--ventas-space-1));
  }

  .modal-container,
  .mesero-modal-container {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.tab-button:focus,
.refresh-button:focus,
.close-button:focus,
.teclado-btn:focus,
.accept-button:focus,
.cancel-button:focus,
.numero-input:focus {
  outline: 2px solid #3b82f6;
  outline: 2px solid var(--ventas-primary);
  outline-offset: 2px;
}

/* ===== ESTILOS ESPECÍFICOS DE PEDIDOS ===== */
.pedidos-status-tabs {
  display: flex;
  background-color: #ffffff;
  background-color: var(--ventas-bg-secondary);
  border-radius: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-md);
  margin-bottom: 0;
  justify-content: stretch;
  padding: 0.5rem;
  padding: var(--ventas-space-2);
  gap: 0.5rem;
  gap: var(--ventas-space-2);
  width: 100%;
  position: relative;
  z-index: 1;
}

.status-tab-button {
  flex: 1 1;
  padding: 0.75rem 1rem;
  padding: var(--ventas-space-3) var(--ventas-space-4);
  background: transparent;
  border: none;
  border-radius: 12px;
  border-radius: var(--ventas-card-radius);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
  transition: var(--ventas-transition-fast);
  color: #64748b;
  color: var(--ventas-text-secondary);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.status-tab-button:hover {
  background-color: #f8fafc;
  background-color: var(--ventas-bg-tertiary);
  color: #0f172a;
  color: var(--ventas-text-primary);
  transform: translateY(-1px);
}

.status-tab-button.active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  background: linear-gradient(135deg, var(--ventas-primary), var(--ventas-primary-dark));
  color: #ffffff;
  color: var(--ventas-text-light);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-md);
}

.tab-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  gap: var(--ventas-space-4);
  background: #ffffff;
  background: var(--ventas-bg-secondary);
  border-radius: 0;
  padding: 1.5rem;
  padding: var(--ventas-space-6);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-md);
  overflow: hidden;
  margin-top: -2px;
  position: relative;
}

.pedido-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  gap: var(--ventas-space-4);
  margin-bottom: 1rem;
  margin-bottom: var(--ventas-space-4);
  flex-wrap: wrap;
}

.nuevo-pedido-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--ventas-space-2);
  padding: 0.75rem 1.5rem;
  padding: var(--ventas-space-3) var(--ventas-space-6);
  background: linear-gradient(135deg, #10b981, #059669);
  background: linear-gradient(135deg, var(--ventas-success), var(--ventas-success-dark));
  color: #ffffff;
  color: var(--ventas-text-light);
  border: none;
  border-radius: 12px;
  border-radius: var(--ventas-card-radius);
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
  transition: var(--ventas-transition);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-md);
}

.nuevo-pedido-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  box-shadow: var(--ventas-shadow-lg);
}

.view-mode-switch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--ventas-space-3);
  background: #f8fafc;
  background: var(--ventas-bg-tertiary);
  padding: 0.5rem;
  padding: var(--ventas-space-2);
  border-radius: 12px;
  border-radius: var(--ventas-card-radius);
}

.view-mode-button {
  padding: 0.5rem;
  padding: var(--ventas-space-2);
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  border-radius: var(--ventas-space-2);
  cursor: pointer;
  transition: 0.15s;
  transition: var(--ventas-transition-fast);
  color: #64748b;
  color: var(--ventas-text-secondary);
}

.view-mode-button.active {
  background: #3b82f6;
  background: var(--ventas-primary);
  color: #ffffff;
  color: var(--ventas-text-light);
}

.refresh-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--ventas-space-2);
  padding: 0.75rem 1rem;
  padding: var(--ventas-space-3) var(--ventas-space-4);
  background: #f8fafc;
  background: var(--ventas-bg-tertiary);
  color: #0f172a;
  color: var(--ventas-text-primary);
  border: none;
  border-radius: 12px;
  border-radius: var(--ventas-card-radius);
  cursor: pointer;
  transition: 0.3s;
  transition: var(--ventas-transition);
}

.refresh-button:hover {
  background: #cbd5e1;
  background: var(--ventas-secondary-light);
}

.refresh-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #64748b;
  color: var(--ventas-text-secondary);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  padding: var(--ventas-space-8);
  text-align: center;
  color: #64748b;
  color: var(--ventas-text-secondary);
  flex: 1 1;
  min-height: 300px;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  margin-bottom: var(--ventas-space-4);
}

.empty-state h3 {
  margin-bottom: 0.75rem;
  margin-bottom: var(--ventas-space-3);
  color: #0f172a;
  color: var(--ventas-text-primary);
}

.pedidos-lista {
  flex: 1 1;
  overflow: auto;
  width: 100%;
  min-height: 0;
}

.pedidos-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  background: var(--ventas-bg-secondary);
  border-radius: 12px;
  border-radius: var(--ventas-card-radius);
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-md);
}

.pedidos-table th {
  background: #f8fafc;
  background: var(--ventas-bg-tertiary);
  padding: 1rem;
  padding: var(--ventas-space-4);
  text-align: left;
  font-weight: 600;
  color: #0f172a;
  color: var(--ventas-text-primary);
  border-bottom: 1px solid #cbd5e1;
  border-bottom: 1px solid var(--ventas-secondary-light);
}

.pedidos-table td {
  padding: 1rem;
  padding: var(--ventas-space-4);
  border-bottom: 1px solid #cbd5e1;
  border-bottom: 1px solid var(--ventas-secondary-light);
}

.pedido-row {
  transition: 0.15s;
  transition: var(--ventas-transition-fast);
}

.pedido-row:hover {
  background: #f8fafc;
  background: var(--ventas-bg-tertiary);
}

.pedido-clickable {
  cursor: pointer;
}

/* ===== BOTONES DE ACCIÓN PROFESIONALES ===== */
.action-buttons-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.action-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.action-button:hover::before {
  width: 300px;
  height: 300px;
}

.action-button:active {
  transform: scale(0.98);
}

/* Botón Ver - Azul */
.action-button-view {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.action-button-view:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
}

/* Botón Enviar - Naranja */
.action-button-send {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
}

.action-button-send:hover {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
  transform: translateY(-2px);
}

/* Botón Entregado - Verde */
.action-button-delivered {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.action-button-delivered:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  transform: translateY(-2px);
}

.action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.action-button:disabled:hover {
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ajuste para celdas de acciones en la tabla */
.pedidos-table td .action-buttons-group {
  justify-content: flex-start;
  min-width: 200px;
}

/* Iconos dentro de los botones */
.action-button svg,
.card-action-button svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.action-button:hover svg,
.card-action-button:hover svg {
  transform: scale(1.1);
}

/* Espaciado para los botones de acción */
.action-button span,
.card-action-button span {
  position: relative;
  z-index: 1;
}

.pedidos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  grid-gap: 1rem;
  grid-gap: var(--ventas-space-4);
  gap: var(--ventas-space-4);
  flex: 1 1;
  overflow: auto;
  width: 100%;
  padding-bottom: 1rem;
  padding-bottom: var(--ventas-space-4);
  min-height: 0;
  /* Auto-filas para mantener proporción cuadrada */
  grid-auto-rows: 300px;
}

.pedido-card {
  background: #ffffff;
  background: var(--ventas-bg-secondary);
  border-radius: 12px;
  border-radius: var(--ventas-card-radius);
  padding: 0.75rem;
  padding: var(--ventas-space-3);
  /* Reducido de space-5 a space-3 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--ventas-shadow-md);
  cursor: pointer;
  transition: 0.3s;
  transition: var(--ventas-transition);
  border-left: 4px solid #3b82f6;
  border-left: 4px solid var(--ventas-primary);
  /* Hacer cuadrados perfectos */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Aspect ratio 1:1 como respaldo */
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}

.pedido-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  box-shadow: var(--ventas-shadow-lg);
}

.pedido-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  margin-bottom: var(--ventas-space-2);
  /* Reducido de space-3 a space-2 */
  /* Asegurar que el header no crezca demasiado */
  flex-shrink: 0;
  gap: 0.5rem;
  gap: var(--ventas-space-2);
}

.pedido-numero {
  font-weight: 700;
  font-size: 1.1rem;
  /* Reducido de 1.25rem */
  color: #3b82f6;
  color: var(--ventas-primary);
  line-height: 1.2;
}

.pedido-fecha {
  font-size: 0.75rem;
  /* Reducido de 0.875rem */
  color: #64748b;
  color: var(--ventas-text-secondary);
  line-height: 1.2;
  text-align: right;
  flex-shrink: 0;
}

.pedido-card-cliente {
  margin-bottom: 0.25rem;
  margin-bottom: var(--ventas-space-1);
  /* Controlar el crecimiento del contenido del cliente */
  flex: 0 0 auto; /* No permitir crecimiento ni encogimiento */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 40px; /* Altura mínima fija */
  max-height: 40px; /* Altura máxima fija */
  overflow: hidden;
}

.pedido-card-cliente strong {
  color: #0f172a;
  color: var(--ventas-text-primary);
  font-size: 0.9rem; /* Reducido aún más */
  line-height: 1.1;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px; /* Margen mínimo */
}

.pedido-card-total {
  margin-bottom: 0.5rem;
  margin-bottom: var(--ventas-space-2);
  /* Reducido de space-4 a space-2 */
  text-align: center;
  /* Cambiado a center para mejor balance */
  /* Mantener el total en posición fija */
  flex-shrink: 0;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  padding: var(--ventas-space-1) var(--ventas-space-2);
}

.pedido-card-total span {
  font-size: 1.2rem;
  /* Reducido de 1.5rem */
  font-weight: 700;
  color: #10b981;
  color: var(--ventas-success);
  line-height: 1.2;
}

.pedido-card-estados {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.25rem;
  grid-gap: 0.25rem;
  grid-gap: var(--ventas-space-1);
  gap: var(--ventas-space-1);
  /* Reducido de space-2 a space-1 */
  font-size: 0.75rem;
  /* Reducido de 0.875rem */
  /* Mantener los estados en la parte inferior */
  flex-shrink: 0;
  margin-top: auto;
  background: #f8fafc;
  background: var(--ventas-bg-tertiary);
  border-radius: 6px;
  padding: 0.25rem;
  padding: var(--ventas-space-1);
}

.estado-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 0.25rem;
  padding: var(--ventas-space-1);
  border-radius: 4px;
  transition: background-color 0.2s;
  color: #64748b;
  color: var(--ventas-text-secondary);
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 1;
}

.estado-item-label {
  margin-bottom: 1px;
}

/* ===== ESTILOS ADICIONALES PARA CARDS COMPACTAS ===== */

/* Indicador de estado visual en el borde superior */
.pedido-card.abierto {
  border-left-color: #22c55e;
  border-left-color: var(--status-abierto);
}

.pedido-card.pendiente {
  border-left-color: #f59e0b;
  border-left-color: var(--status-pendiente);
}

.pedido-card.cerrado {
  border-left-color: #3b82f6;
  border-left-color: var(--status-cerrado);
}

/* Hover más sutil para cards compactas */
.pedido-card:hover {
  transform: translateY(-1px);
  /* Reducido de -2px */
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  box-shadow: var(--ventas-shadow-lg);
  border-left-width: 6px;
  /* Aumenta el borde en hover */
}

/* ===== BOTONES DE ACCIÓN PARA TARJETAS ===== */
.pedido-card-acciones {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  flex-wrap: wrap;
}

.card-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  flex: 1 1;
  min-width: 120px;
}

.card-action-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.card-action-button:hover::before {
  left: 100%;
}

.card-action-button:active {
  transform: scale(0.96);
}

/* Botón Ver Detalle - Azul Claro */
.card-action-button-view {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: white;
}

.card-action-button-view:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
  transform: translateY(-3px);
}

/* Botón Enviar - Naranja/Ámbar */
.card-action-button-send {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
  color: white;
}

.card-action-button-send:hover {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
  transform: translateY(-3px);
}

/* Botón Entregado - Verde Esmeralda */
.card-action-button-delivered {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  color: white;
}

.card-action-button-delivered:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
  transform: translateY(-3px);
}

.card-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.card-action-button:disabled:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Estados completados con checkmark visual */
.estado-item.completado {
  background-color: rgba(16, 185, 129, 0.15);
  color: #10b981;
  color: var(--status-completado);
  border-radius: 4px;
}

/* Información de cliente más compacta */
.pedido-card-cliente div {
  font-size: 0.7rem; /* Más pequeño */
  color: #64748b;
  color: var(--ventas-text-secondary);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

/* Total con mejor destaque visual */
.pedido-card-total {
  position: relative;
}

.pedido-card-total::before {
  content: '$';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: #10b981;
  color: var(--ventas-success);
  opacity: 0.7;
}

/* Estados con iconos más pequeños y funcionales */
.estado-item svg {
  width: 12px;
  height: 12px;
}

/* Indicadores de progreso más visibles */
.estado-item.activo {
  background-color: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  color: var(--status-abierto);
  font-weight: 600;
}

.estado-item.pendiente {
  background-color: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  color: var(--status-pendiente);
  font-weight: 600;
}

.estado-item.procesando {
  background-color: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  color: var(--status-cerrado);
  font-weight: 600;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* Mejora visual del número de pedido */
.pedido-numero::before {
  content: '#';
  opacity: 0.6;
  font-weight: 400;
}

/* Información adicional compacta */
.pedido-info-extra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: #94a3b8;
  color: var(--ventas-text-tertiary);
  margin-top: 0.25rem;
  margin-top: var(--ventas-space-1);
  padding-top: 0.25rem;
  padding-top: var(--ventas-space-1);
  border-top: 1px solid rgba(203, 213, 225, 0.3);
}

/* Responsive para cards compactas */
@media (max-width: 768px) {
  .pedido-card {
    padding: 0.5rem;
    padding: var(--ventas-space-2);
  }

  .pedido-numero {
    font-size: 1rem;
  }

  .pedido-fecha {
    font-size: 0.7rem;
  }

  .pedido-card-total span {
    font-size: 1.1rem;
  }

  .pedido-card-estados {
    font-size: 0.7rem;
    gap: 2px;
  }
}

@media (max-width: 480px) {
  .pedido-card {
    padding: 0.5rem;
    padding: var(--ventas-space-2);
  }

  .pedido-card-estados {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .estado-item:nth-child(3) {
    grid-column: 1 / -1;
  }
}


.dashboard-footer {
  padding: 0.5rem;
  padding: var(--ventas-space-2);
  text-align: center;
  background: #ffffff;
  background: var(--ventas-bg-secondary);
  border-top: 1px solid #cbd5e1;
  border-top: 1px solid var(--ventas-secondary-light);
  color: #64748b;
  color: var(--ventas-text-secondary);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.modal-overlay.loading-overlay {
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  gap: var(--ventas-space-4);
  background: #ffffff;
  background: var(--ventas-bg-secondary);
  padding: 2rem;
  padding: var(--ventas-space-8);
  border-radius: 16px;
  border-radius: var(--ventas-border-radius);
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
  box-shadow: var(--ventas-shadow-xl);
}

.loading {
  color: #0f172a;
  color: var(--ventas-text-primary);
  font-weight: 600;
}

/* ===== OPTIMIZACIONES PARA PEDIDOS LLEVAR ===== */

.pedidos-table {
  table-layout: auto;
  width: 100%;
}

.pedidos-table th,
.pedidos-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Asegurar que el contenido ocupe todo el espacio */
.dashboard>* {
  width: 100%;
}

.tab-content>* {
  width: 100%;
  max-width: 100%;
}

/* Vista de tabla responsive */
@media (max-width: 1024px) {
  .pedidos-table {
    font-size: 0.875rem;
  }

  .pedidos-table th,
  .pedidos-table td {
    padding: 0.75rem;
    padding: var(--ventas-space-3);
  }
}


/* Estilos adicionales para CreacionPedidoLlevar refactorizado */

/* ===== INFORMACIÓN ESPECÍFICA DEL PEDIDO PARA LLEVAR ===== */
.pedido-llevar-info {
  background-color: white;
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  background-color: #f8f9fa;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 3px solid #4CAF50;
}

.info-item:hover {
  background-color: #e9ecef;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-icon {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.info-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 0.75rem;
  color: #6c757d;
  margin-bottom: 2px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-weight: 600;
  color: #212529;
  font-size: 1rem;
}

.edit-hint {
  font-size: 0.75rem;
  color: #6c757d;
  font-style: italic;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.info-item:hover .edit-hint {
  opacity: 1;
}

/* ===== ESTADOS DE CARGA ===== */
.cargando-pedido {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
  text-align: center;
  padding: 2rem;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top-color: #4CAF50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.cargando-pedido p {
  color: #6c757d;
  font-size: 1.1rem;
  margin: 0;
  font-weight: 500;
}

/* ===== MODALES ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.modal-container {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  border: 1px solid #ddd;
  max-width: 500px;
  width: 90%;
  animation: modalEnter 0.3s ease-out;
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background-color: #4caf50;
  color: white;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.close-button {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.close-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.modal-body {
  padding: 1.5rem;
  background-color: #ffffff;
  color: #212529;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
}

.nombre-input,
.cliente-input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.nombre-input:focus,
.cliente-input:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.nombre-input::placeholder,
.cliente-input::placeholder {
  color: #adb5bd;
}

.cliente-preview {
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: #f8f9fa;
  border-left: 3px solid #4CAF50;
  border-radius: 4px;
}

.cliente-preview strong {
  display: block;
  margin-bottom: 0.5rem;
  color: #495057;
  font-size: 0.85rem;
}

.cliente-preview span {
  color: #212529;
  font-weight: 500;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.5rem;
  background-color: #ffffff;
  border-top: 1px solid #e9ecef;
}

.accept-button,
.cancel-button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.accept-button {
  background-color: #4caf50;
  color: white;
}

.accept-button:hover {
  background-color: #45a049;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.cancel-button {
  background-color: #6c757d;
  color: white;
}

.cancel-button:hover {
  background-color: #5a6268;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .modal-container {
    width: 95%;
    margin: 1rem;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 1rem;
  }

  .modal-header h2 {
    font-size: 1.1rem;
  }

  .pedido-llevar-info {
    padding: 0.75rem;
  }

  .info-item {
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .info-icon {
    width: 28px;
    height: 28px;
    font-size: 1.25rem;
  }

  .info-value {
    font-size: 0.9rem;
  }

  .edit-hint {
    display: none;
    /* Ocultar en móvil para ahorrar espacio */
  }

  .modal-footer {
    flex-direction: column;
    gap: 0.5rem;
  }

  .accept-button,
  .cancel-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .nombre-input {
    padding: 0.5rem;
    font-size: 0.9rem;
  }

  .info-item {
    flex-direction: column;
    text-align: center;
    gap: 0.25rem;
  }

  .info-content {
    align-items: center;
  }
}

/* ===== ANIMACIONES ADICIONALES ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pedido-llevar-info {
  animation: fadeInUp 0.3s ease-out;
}

/* ===== UTILIDADES ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== MODO OSCURO (opcional) ===== */
@media (prefers-color-scheme: dark) {
  .pedido-llevar-info {
    background-color: #2d3748;
    border-bottom-color: #4a5568;
  }

  .info-item {
    background-color: #4a5568;
    color: #e9ecef;
  }

  .info-item:hover {
    background-color: #2d3748;
  }

  .info-label {
    color: #a0aec0;
  }

  .info-value {
    color: #e9ecef;
  }

  /* Modal mantiene fondo blanco incluso en modo oscuro */
  .modal-overlay {
    background-color: rgba(255, 255, 255, 0.95);
  }

  .modal-container {
    background-color: white;
    color: #212529;
  }

  .modal-body {
    background-color: #ffffff;
  }

  .modal-footer {
    background-color: #ffffff;
    border-top-color: #e9ecef;
  }

  /* Inputs mantienen fondo blanco en modo oscuro */
  .nombre-input,
  .cliente-input {
    background-color: #ffffff;
    border-color: #e9ecef;
    color: #212529;
  }

  .nombre-input:focus,
  .cliente-input:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
  }

  .nombre-input::placeholder,
  .cliente-input::placeholder {
    color: #adb5bd;
  }

  .form-group label {
    color: #333;
  }

  .cliente-preview {
    background-color: #f8f9fa;
  }

  .cliente-preview strong {
    color: #495057;
  }

  .cliente-preview span {
    color: #212529;
  }
}

/* ===== FORMULARIO DE CLIENTE ===== */
.formulario-cliente-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 1rem;
}

.formulario-cliente {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  max-width: 500px;
  width: 100%;
}

.formulario-cliente h2 {
  margin: 0 0 1.5rem 0;
  color: #212529;
  font-size: 1.5rem;
  text-align: center;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #495057;
  font-size: 0.9rem;
}

.form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.2s ease;
  outline: none;
}

.form-group input:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.form-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn-cancelar,
.btn-continuar {
  flex: 1 1;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-cancelar {
  background-color: #6c757d;
  color: white;
}

.btn-cancelar:hover {
  background-color: #5a6268;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.btn-continuar {
  background-color: #4caf50;
  color: white;
}

.btn-continuar:hover:not(:disabled) {
  background-color: #45a049;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.btn-continuar:disabled {
  background-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
  transform: none;
}
/* Modal Overlay */
.biometrico-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

/* Modal Container */
.biometrico-modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  max-height: none;
  overflow: visible;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  margin: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 1000000;
}

/* Modal Header */
.biometrico-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  flex-shrink: 0;
}

.modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-title h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Modal Body */
.biometrico-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1;
  min-height: 0;
}

/* Connection Status Section */
.connection-status-section {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.connection-item {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.connection-item.connected {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.connection-item.connected .status-badge {
  color: #059669;
}

.connection-item.disconnected {
  background: #fef2f2;
  border-color: #fecaca;
}

.connection-item.disconnected .status-badge {
  color: #dc2626;
}

.connection-item svg {
  color: #64748b;
}

.connection-item.connected svg {
  color: #059669;
}

.connection-item.disconnected svg {
  color: #dc2626;
}

.status-badge {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
}

/* Config Summary */
.config-summary {
  background: #f8fafc;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.config-summary h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #475569;
  font-weight: 600;
}

.config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.config-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.config-label {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.config-value {
  font-size: 13px;
  color: #1e293b;
  font-weight: 500;
}

/* Sync Actions */
.sync-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

.sync-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.sync-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sync-btn-upload {
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  border-color: #93c5fd;
  color: #1e40af;
}

.sync-btn-upload:hover:not(:disabled) {
  background: linear-gradient(135deg, #bfdbfe, #dbeafe);
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.sync-btn-download {
  background: linear-gradient(135deg, #d1fae5, #ecfdf5);
  border-color: #6ee7b7;
  color: #065f46;
}

.sync-btn-download:hover:not(:disabled) {
  background: linear-gradient(135deg, #a7f3d0, #d1fae5);
  border-color: #10b981;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.sync-btn svg {
  flex-shrink: 0;
}

.sync-btn-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sync-btn-title {
  font-size: 14px;
  font-weight: 600;
}

.sync-btn-desc {
  font-size: 11px;
  opacity: 0.8;
}

/* Sync Status */
.sync-status {
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.sync-status.info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.sync-status.success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.sync-status.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.sync-status-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Progress Bar */
.sync-progress {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-bar {
  flex: 1 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: currentColor;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  font-weight: 600;
  min-width: 60px;
  text-align: right;
}

/* Sync Help */
.sync-help {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 16px;
}

.sync-help h4 {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: #92400e;
  font-weight: 600;
}

.sync-help ul {
  margin: 0;
  padding-left: 18px;
}

.sync-help li {
  font-size: 12px;
  color: #78350f;
  margin-bottom: 6px;
  line-height: 1.5;
}

.sync-help li:last-child {
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 600px) {
  .biometrico-modal {
    width: 95%;
    margin: 10px;
  }

  .connection-status-section {
    flex-direction: column;
  }

  .config-grid {
    grid-template-columns: 1fr;
  }

  .sync-actions {
    grid-template-columns: 1fr;
  }

  .sync-btn {
    padding: 16px;
  }
}

/* Header.css - Estilos profesionales para el Header */

/* ===== VARIABLES CSS PROFESIONALES ===== */
:root {
  --header-height-pro: 80px;
  --header-padding: 1.5rem;
  --border-radius-pro: 12px;
  --border-radius-sm-pro: 8px;
  --border-radius-lg-pro: 16px;
  --transition-pro: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast-pro: 0.15s ease-out;

  /* Sombras profesionales */
  --shadow-sm-pro: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md-pro: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg-pro: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl-pro: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Colores del sistema profesional */
  --header-primary: #2563eb;
  --header-primary-dark: #1d4ed8;
  --header-primary-light: #3b82f6;

  --header-surface: #ffffff;
  --header-surface-elevated: #f8fafc;
  --header-surface-glass: rgba(255, 255, 255, 0.95);

  /* Colores de texto profesionales */
  --header-text-primary: #0f172a;
  --header-text-secondary: #64748b;
  --header-text-tertiary: #94a3b8;
  --header-text-light: #ffffff;
  --header-text-accent: #fbbf24;

  /* Espaciado profesional */
  --header-space-1: 0.25rem;
  --header-space-2: 0.5rem;
  --header-space-3: 0.75rem;
  --header-space-4: 1rem;
  --header-space-5: 1.25rem;
  --header-space-6: 1.5rem;
  --header-space-8: 2rem;
}

/* ===== HEADER PROFESIONAL ===== */
.header-professional {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  background: linear-gradient(135deg, var(--header-color, #2563eb) 0%, var(--header-primary-dark) 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: 1rem 1.5rem;
  padding: var(--header-space-4) var(--header-space-6);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg-pro);
  position: relative;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 80px;
  min-height: var(--header-height-pro);
  width: 100%;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
}

/* Contenedor principal del header */
.header-container-professional {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1.5rem;
  gap: var(--header-space-6);
}

/* ===== SECCIÓN IZQUIERDA - BRANDING ===== */
.header-left-professional {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  gap: var(--header-space-6);
  flex-shrink: 0;
}

.brand-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--header-space-3);
}

.brand-icon-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  border-radius: var(--border-radius-lg-pro);
  color: #fbbf24;
  color: var(--header-text-accent);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.brand-info-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.system-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  color: var(--header-text-light);
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.system-subtitle {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.system-metrics {
  display: flex;
  gap: 0.5rem;
  gap: var(--header-space-2);
  align-items: center;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  gap: var(--header-space-1);
  padding: 0.25rem 0.5rem;
  padding: var(--header-space-1) var(--header-space-2);
  background: rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  border-radius: var(--border-radius-sm-pro);
  color: #ffffff;
  color: var(--header-text-light);
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid rgba(16, 185, 129, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* ===== SECCIÓN CENTRAL - FECHA Y HORA ===== */
.header-center-professional {
  display: flex;
  align-items: center;
  flex: 1 1;
  justify-content: center;
}

.datetime-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  gap: var(--header-space-4);
  background: rgba(255, 255, 255, 0.15);
  padding: 0.75rem 1.25rem;
  padding: var(--header-space-3) var(--header-space-5);
  border-radius: 16px;
  border-radius: var(--border-radius-lg-pro);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}

.date-section,
.time-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--header-space-2);
  color: #ffffff;
  color: var(--header-text-light);
}

.date-text {
  font-size: 0.875rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.time-text {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.025em;
}

/* ===== SECCIÓN DERECHA - USUARIO Y ACCIONES ===== */
.header-right-professional {
  display: flex;
  align-items: center;
  gap: 1rem;
  gap: var(--header-space-4);
  flex-shrink: 0;
}

.user-badge-professional {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--header-space-3);
  background: rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem;
  padding: var(--header-space-2) var(--header-space-4);
  border-radius: 16px;
  border-radius: var(--border-radius-lg-pro);
  color: #ffffff;
  color: var(--header-text-light);
  border: 1px solid rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all var(--transition-pro);
}

.user-badge-professional:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.user-info-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.user-name {
  font-size: 0.875rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.user-role {
  font-size: 0.7rem;
  opacity: 0.8;
  font-weight: 500;
}

/* ===== BOTÓN DE REGRESO PROFESIONAL ===== */
/* Botón Biométrico en Header */
.biometrico-button-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--header-space-2);
  padding: 0.5rem 1rem;
  padding: var(--header-space-2) var(--header-space-4);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.9));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  border-radius: var(--border-radius-lg-pro);
  color: #ffffff;
  color: var(--header-text-light);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all var(--transition-pro);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  -webkit-user-select: none;
          user-select: none;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
  white-space: nowrap;
  font-family: inherit;
}

.biometrico-button-header:hover {
  background: linear-gradient(135deg, rgba(5, 150, 105, 1), rgba(4, 120, 87, 1));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.5);
}

.biometrico-button-header:active {
  transform: translateY(-1px);
}

.back-button-professional {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--header-space-2);
  padding: 0.5rem 1rem;
  padding: var(--header-space-2) var(--header-space-4);
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  border-radius: var(--border-radius-lg-pro);
  color: #ffffff;
  color: var(--header-text-light);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all var(--transition-pro);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  -webkit-user-select: none;
          user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm-pro);
  white-space: nowrap;
  font-family: inherit;
}

.back-button-professional::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.back-button-professional:hover::before {
  left: 100%;
}

.back-button-professional:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md-pro);
}

.back-button-professional:active {
  transform: translateY(-1px);
}

.back-button-professional:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

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

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

.header-professional {
  animation: fadeInPro 0.5s ease-out;
}

.brand-section-header {
  animation: slideInPro 0.4s ease-out;
}

.datetime-container,
.user-badge-professional,
.back-button-professional {
  animation: slideInPro 0.5s ease-out;
}

/* ===== RESPONSIVE DESIGN PROFESIONAL ===== */
@media (max-width: 1200px) {
  .header-professional {
    padding: 0.75rem 1.25rem;
    padding: var(--header-space-3) var(--header-space-5);
  }

  .system-metrics {
    display: none;
  }
}

@media (max-width: 768px) {
  .header-professional {
    padding: 0.75rem 1rem;
    padding: var(--header-space-3) var(--header-space-4);
  }

  .header-container-professional {
    flex-direction: column;
    gap: 1rem;
    gap: var(--header-space-4);
    align-items: stretch;
  }

  .header-left-professional,
  .header-center-professional,
  .header-right-professional {
    flex: 1 1 auto;
    justify-content: center;
  }

  .system-title {
    font-size: 1.25rem;
  }

  .datetime-container {
    gap: 0.5rem;
    gap: var(--header-space-2);
    padding: 0.5rem 1rem;
    padding: var(--header-space-2) var(--header-space-4);
  }

  .back-button-professional {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .header-professional {
    padding: 0.5rem 0.75rem;
    padding: var(--header-space-2) var(--header-space-3);
  }

  .brand-icon-header {
    width: 40px;
    height: 40px;
  }

  .system-title {
    font-size: 1.125rem;
  }

  .system-subtitle {
    font-size: 0.7rem;
  }

  .date-text,
  .time-text {
    font-size: 0.8rem;
  }

  .user-name {
    font-size: 0.8rem;
  }

  .user-role {
    font-size: 0.65rem;
  }
}

/* ===== ACCESIBILIDAD PROFESIONAL ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== ALTO CONTRASTE ===== */
@media (prefers-contrast: high) {
  .back-button-professional,
  .user-badge-professional,
  .datetime-container,
  .brand-icon-header {
    border-width: 2px;
  }
}

/* ===== UTILIDADES ADICIONALES ===== */
.header-professional * {
  box-sizing: border-box;
}

.header-professional button {
  font-family: inherit;
}
/* src/components/Clientes/Clientes.css */
.clientes-container {
  background: white;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.clientes-content {
  flex: 1 1;
  margin: 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}

.clientes-inner {
  padding: 24px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header de la página */
.clientes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e2e8f0;
}

.clientes-titulo {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.clientes-titulo::before {
  content: '👥';
  font-size: 28px;
}

.botones-header {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Botones del header */
.btn-nuevo {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-nuevo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.btn-guardar-principal {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
}

.btn-guardar-principal:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}

.btn-guardar-principal:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-cancelar {
  background: #6b7280;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  font-size: 10px;
  transition: all 0.3s ease;
}

.btn-cancelar:hover {
  background: #4b5563;
  transform: translateY(-1px);
}

/* Panel del formulario */
.panel-formulario {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.formulario-content {
  padding: 16px;
}

.formulario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}

.campo-grupo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campo-financiamiento,
.campo-referencia {
  grid-column: 1 / -1;
}

.campo-grupo label {
  font-weight: 500;
  color: #374151;
  font-size: 11px;
  white-space: nowrap;
}

.input-campo,
.textarea-campo {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 11px;
  transition: all 0.2s ease;
  background: white;
}

.input-campo:focus,
.textarea-campo:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.textarea-campo {
  resize: vertical;
  font-family: inherit;
}

/* Panel de filtros */
.panel-filtros {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.filtros-content {
  padding: 12px 16px;
}

.filtros-row-horizontal {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.filtro-item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: auto;
}

.filtro-item label {
  font-weight: 600;
  color: #374151;
  font-size: 14px;
  white-space: nowrap;
}

.filtro-boton-buscar {
  display: flex;
  align-items: center;
  gap: 4px;
}

.input-filtro-buscar {
  padding: 2px 6px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  font-size: 10px;
  transition: all 0.2s ease;
  background: white;
  width: 150px;
}

.input-filtro-buscar:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.btn-buscar {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  transition: all 0.3s ease;
  height: 22px;
}

.btn-buscar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Panel de listado */
.panel-listado {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Tabla */
.tabla-container {
  flex: 1 1;
  overflow-y: auto;
  max-height: none;
  height: calc(100vh - 240px);
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: white;
}

.tabla-clientes {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: white;
  table-layout: auto;
}

.tabla-clientes thead {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabla-clientes th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.tabla-clientes td {
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #f3f4f6;
  vertical-align: middle;
  font-size: 13px;
}

.tabla-clientes tbody tr:hover {
  background-color: #f8fafc;
}

.tabla-clientes tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.tabla-clientes tbody tr:nth-child(even):hover {
  background-color: #f0f2ff;
}

.nombre-cliente {
  font-weight: 600;
  color: #374151;
}

.referencia {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acciones-cliente {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.btn-accion {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
}

.btn-editar {
  color: #3182ce;
}

.btn-editar:hover {
  background: #e6f6ff;
  transform: scale(1.1);
}

.btn-eliminar {
  color: #e53e3e;
}

.btn-eliminar:hover {
  background: #fee;
  transform: scale(1.1);
}

/* Estados de carga y sin datos */
.cargando,
.sin-datos {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
  font-size: 16px;
  background: white;
}

.cargando {
  color: #667eea;
  font-weight: 500;
}

.sin-datos {
  color: #9ca3af;
}

/* Contenedor de acciones */
.acciones-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.info-clientes {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

/* Loading state */
.loading {
  text-align: center;
  padding: 60px 20px;
  color: #667eea;
  font-size: 16px;
  font-weight: 500;
}

/* Responsivo */
@media (max-width: 1024px) {
  .clientes-content {
    margin: 10px;
  }

  .clientes-inner {
    padding: 16px;
  }

  .formulario-grid {
    grid-template-columns: 1fr;
  }

  .filtros-row-horizontal {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .clientes-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .clientes-titulo {
    font-size: 18px;
    text-align: center;
  }

  .botones-header {
    justify-content: center;
  }

  .panel-filtros {
    overflow-x: auto;
  }

  .filtros-row-horizontal {
    flex-wrap: nowrap;
    min-width: -webkit-fit-content;
    min-width: fit-content;
  }

  .tabla-container {
    overflow-x: auto;
  }

  .tabla-clientes {
    min-width: 600px;
  }

  .acciones-container {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  animation: slideIn 0.3s ease-out;
}

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

.modal-small {
  width: var(--modal-width-sm);
  max-width: 90%;
}

.modal-medium {
  width: var(--modal-width-md);
  max-width: 90%;
}

.modal-large {
  width: var(--modal-width-lg);
  max-width: 90%;
}

.modal-xlarge {
  width: var(--modal-width-xl);
  max-width: 95%;
}

.modal-header {
  padding: var(--space-scale-5) var(--space-scale-6);
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--radius-scale-md) var(--radius-scale-md) 0 0;
}

.modal-title {
  margin: 0;
  font-size: var(--font-scale-2xl);
  font-weight: 600;
  color: white;
}

.modal-close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.modal-close svg {
  font-size: 1.2rem;
}

.modal-body {
  padding: var(--space-scale-6);
  overflow-y: auto;
  flex: 1 1;
}

.modal-footer {
  padding: var(--space-scale-4) var(--space-scale-6);
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-scale-3);
  background-color: #f5f5f5;
  border-radius: 0 0 var(--radius-scale-md) var(--radius-scale-md);
}

.modal-btn {
  padding: var(--space-scale-3) var(--space-scale-6);
  border: none;
  border-radius: var(--radius-scale-md);
  font-size: var(--font-scale-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-scale-2);
  min-width: clamp(60px, 6.25vw, 120px);
  height: var(--btn-height-md);
  text-align: center;
  white-space: nowrap;
}

.modal-btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.modal-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.modal-btn-secondary {
  background: #f0f0f0;
  color: #333;
}

.modal-btn-secondary:hover {
  background: #e0e0e0;
}

.modal-btn-danger {
  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
  color: white;
}

.modal-btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 101, 101, 0.4);
}

.modal-btn-warning {
  background: linear-gradient(135deg, #ff9f43 0%, #f39c12 100%);
  color: white;
}

.modal-btn-warning:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 159, 67, 0.4);
}

.modal-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.modal-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.confirm-modal-content {
  text-align: center;
  padding: var(--space-scale-5) 0;
}

.confirm-modal-content p {
  font-size: var(--font-scale-base);
  color: #333;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .modal-container {
    margin: 10px;
    max-height: calc(100vh - 20px);
  }

  .modal-small,
  .modal-medium,
  .modal-large,
  .modal-xlarge {
    width: 100%;
    max-width: calc(100% - 20px);
  }
}
.form-field {
  margin-bottom: 16px;
}

.form-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #333;
  margin-bottom: 6px;
  font-size: 14px;
}

.form-field-icon {
  color: #666;
  font-size: 14px;
}

.required-asterisk {
  color: #e74c3c;
  font-weight: bold;
}

.form-field-input-container {
  position: relative;
}

.form-field-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
  background-color: #fff;
  box-sizing: border-box;
}

.form-field-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-field-input.error {
  border-color: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.form-field-input.disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.form-field-input::placeholder {
  color: #999;
  font-style: italic;
}

/* Estilos específicos para textarea */
textarea.form-field-input {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

/* Estilos específicos para select */
select.form-field-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27m6 8 4 4 4-4%27/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
  -webkit-appearance: none;
          appearance: none;
}

/* Mensajes de error y ayuda */
.form-field-error {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-field-help {
  color: #666;
  font-size: 12px;
  margin-top: 4px;
  font-style: italic;
}

/* Estilos responsivos */
@media (max-width: 768px) {
  .form-field-input {
    padding: 10px 12px;
    font-size: 16px; /* Evita zoom en iOS */
  }
}

/* Validación visual mejorada */
.form-field-input:valid:not(:placeholder-shown) {
  border-color: #27ae60;
}

.form-field-input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: #e74c3c;
}

/* Estilos para campos con iconos */
.form-field.with-icon .form-field-input {
  padding-left: 40px;
}

.form-field.with-icon .form-field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.form-grid {
  display: grid;
  width: 100%;
}

.form-grid.responsive {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.form-grid-full-width {
  grid-column: 1 / -1;
  width: 100%;
}

.form-grid-section {
  grid-column: 1 / -1;
  margin-bottom: 24px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.form-grid-section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  padding-bottom: 8px;
  border-bottom: 2px solid #667eea;
}

.form-grid-section-content {
  display: grid;
  grid-template-columns: inherit;
  grid-gap: inherit;
  gap: inherit;
}

/* Breakpoints específicos */
@media (max-width: 768px) {
  .form-grid.responsive {
    grid-template-columns: 1fr;
  }

  .form-grid-section {
    padding: 16px;
    margin-bottom: 16px;
  }

  .form-grid-section-title {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .form-grid {
    gap: 12px;
  }

  .form-grid-section {
    padding: 12px;
    margin-bottom: 12px;
  }
}

/* Utilidades para columnas específicas */
.form-grid-col-1 {
  grid-column: span 1;
}

.form-grid-col-2 {
  grid-column: span 2;
}

.form-grid-col-3 {
  grid-column: span 3;
}

.form-grid-col-full {
  grid-column: 1 / -1;
}
.search-bar {
  position: relative;
  display: flex;
  align-items: center;
  background-color: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.2s ease;
  overflow: hidden;
}

.search-bar:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-bar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  background-color: #f8f9fa;
  border-right: 1px solid #e0e0e0;
  transition: color 0.2s ease;
}

.search-bar:focus-within .search-bar-icon {
  color: #667eea;
}

.search-bar-input {
  flex: 1 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #333;
}

.search-bar-input::placeholder {
  color: #999;
  font-style: italic;
}

.search-bar-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.search-bar-clear:hover {
  color: #e74c3c;
  background-color: rgba(231, 76, 60, 0.1);
}

.search-bar-clear:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tamaños */
.search-bar-small {
  height: 36px;
}

.search-bar-small .search-bar-icon {
  width: 36px;
  font-size: 12px;
}

.search-bar-small .search-bar-input {
  padding: 8px 12px;
  font-size: 13px;
}

.search-bar-small .search-bar-clear {
  width: 32px;
  height: 32px;
  margin-right: 2px;
  font-size: 12px;
}

.search-bar-medium {
  height: 44px;
}

.search-bar-medium .search-bar-icon {
  width: 44px;
  font-size: 14px;
}

.search-bar-medium .search-bar-input {
  padding: 12px 16px;
  font-size: 14px;
}

.search-bar-medium .search-bar-clear {
  width: 36px;
  height: 36px;
  margin-right: 4px;
  font-size: 14px;
}

.search-bar-large {
  height: 52px;
}

.search-bar-large .search-bar-icon {
  width: 52px;
  font-size: 16px;
}

.search-bar-large .search-bar-input {
  padding: 16px 20px;
  font-size: 16px;
}

.search-bar-large .search-bar-clear {
  width: 40px;
  height: 40px;
  margin-right: 6px;
  font-size: 16px;
}

/* Estados */
.search-bar.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.search-bar.disabled .search-bar-input {
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
  .search-bar-input {
    font-size: 16px; /* Evita zoom en iOS */
  }
}

/* Variantes de estilo */
.search-bar.rounded {
  border-radius: 25px;
}

.search-bar.no-border {
  border: none;
  background-color: #f8f9fa;
}

.search-bar.no-border:focus-within {
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}
/* src/contexts/ToastStyles.css */
.toast-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 400px;
}

.toast-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 100%;
  animation: slideIn 0.3s ease-out;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-left: 4px solid;
}

.toast-item.success {
  background-color: rgba(46, 213, 115, 0.95);
  border-left-color: #2ed573;
  color: #fff;
}

.toast-item.error {
  background-color: rgba(255, 71, 87, 0.95);
  border-left-color: #ff4757;
  color: #fff;
}

.toast-item.warning {
  background-color: rgba(255, 165, 2, 0.95);
  border-left-color: #ffa502;
  color: #fff;
}

.toast-item.info {
  background-color: rgba(32, 120, 244, 0.95);
  border-left-color: #2078f4;
  color: #fff;
}

.toast-icon {
  margin-right: 12px;
  font-size: 20px;
}

.toast-content {
  flex: 1 1;
  font-size: 14px;
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  padding: 0 0 0 10px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.toast-close:hover {
  opacity: 1;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.toast-item.removing {
  animation: fadeOut 0.3s ease-in forwards;
}
/* src/components/Gastos/Gastos.css */
.gastos-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.gastos-content {
  flex: 1 1;
  margin: 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}

.gastos-inner {
  padding: 24px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header de la página */
.gastos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #f1f5f9;
}

.gastos-titulo {
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 3px;
}

.gastos-titulo::before {
  content: '💸';
  font-size: 14px;
}

.botones-header {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Botones del header */
.btn-nuevo {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}

.btn-nuevo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.btn-guardar-principal {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
}

.btn-guardar-principal:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}

.btn-guardar-principal:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-cancelar {
  background: #6b7280;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  font-size: 10px;
  transition: all 0.3s ease;
}

.btn-cancelar:hover {
  background: #4b5563;
  transform: translateY(-1px);
}

/* Panel de filtros */
.panel-filtros {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 2px;
  margin-bottom: 2px;
  overflow: hidden;
  box-shadow: none;
}

.filtros-content {
  padding: 8px 12px;
}

.filtros-row-horizontal {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.filtro-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: auto;
}

.filtro-item label {
  font-weight: 500;
  color: #374151;
  font-size: 11px;
  white-space: nowrap;
  min-width: -webkit-fit-content;
  min-width: fit-content;
}

.input-filtro,
.select-input {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  font-size: 11px;
  transition: all 0.2s ease;
  background: white;
  height: 26px;
  width: 140px;
}

.input-filtro:focus,
.select-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.btn-mostrar-gastos {
  display: flex;
  align-items: center;
}

.btn-buscar {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  transition: all 0.3s ease;
  height: 26px;
  white-space: nowrap;
}

.btn-buscar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Total de gastos */
.total-gastos-box {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 12px;
  text-align: center;
  min-width: 120px;
}

.total-label {
  font-size: 10px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 2px;
}

.total-amount {
  font-size: 16px;
  font-weight: 700;
  color: #dc2626;
}

/* Panel del formulario */
.panel-formulario {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.formulario-content {
  padding: 16px;
}

.formulario-titulo {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 8px;
}

.formulario-grid {
  display: grid;
  grid-template-columns: 120px 1fr 140px;
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}

.campo-concepto {
  grid-column: 2;
}

.campo-grupo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campo-grupo label {
  font-weight: 500;
  color: #374151;
  font-size: 11px;
  white-space: nowrap;
}

.input-campo,
.select-campo {
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 11px;
  transition: all 0.2s ease;
  background: white;
}

.input-campo:focus,
.select-campo:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Panel de listado */
.panel-listado {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Tabla */
.tabla-container {
  flex: 1 1;
  overflow-y: auto;
  max-height: none;
  height: calc(100vh - 300px);
  border: 1px solid #d1d5db;
  border-radius: 2px;
}

.tabla-gastos {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
  table-layout: fixed;
}

.tabla-gastos thead {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabla-gastos th {
  padding: 4px 6px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.tabla-gastos td {
  padding: 3px 6px;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #f3f4f6;
  vertical-align: middle;
  font-size: 11px;
}

.tabla-gastos tbody tr:hover {
  background-color: #f8fafc;
}

.tabla-gastos tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.tabla-gastos tbody tr:nth-child(even):hover {
  background-color: #f0f2ff;
}

.concepto-gasto {
  font-weight: 600;
  color: #374151;
}

.monto-gasto {
  font-weight: 600;
  color: #dc2626;
  text-align: right;
}

.acciones-gasto {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.btn-accion {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

.btn-editar {
  color: #3182ce;
}

.btn-editar:hover {
  background: #e6f6ff;
  transform: scale(1.1);
}

.btn-eliminar {
  color: #e53e3e;
}

.btn-eliminar:hover {
  background: #fee;
  transform: scale(1.1);
}

/* Estados de carga y sin datos */
.cargando,
.sin-datos {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
  font-size: 16px;
  background: white;
}

.cargando {
  color: #667eea;
  font-weight: 500;
}

.sin-datos {
  color: #9ca3af;
}

/* Contenedor de acciones */
.acciones-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

.info-gastos {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

/* Loading state */
.loading {
  text-align: center;
  padding: 60px 20px;
  color: #667eea;
  font-size: 16px;
  font-weight: 500;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: white;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.gasto-form {
  padding: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
}

.form-control {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.form-control:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-control[type="textarea"],
textarea.form-control {
  resize: vertical;
  font-family: inherit;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 0 0 12px 12px;
}

.btn-cancel {
  background: #e2e8f0;
  color: #4a5568;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s;
}

.btn-cancel:hover {
  background: #cbd5e0;
}

.btn-save {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-save:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Animaciones */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Responsivo */
@media (max-width: 1024px) {
  .gastos-content {
    margin: 10px;
  }

  .gastos-inner {
    padding: 16px;
  }

  .formulario-grid {
    grid-template-columns: 1fr;
  }

  .filtros-row-horizontal {
    flex-wrap: wrap;
    gap: 8px;
  }

  .total-gastos-box {
    order: -1;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .gastos-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .gastos-titulo {
    font-size: 18px;
    text-align: center;
  }

  .botones-header {
    justify-content: center;
  }

  .panel-filtros {
    overflow-x: auto;
  }

  .filtros-row-horizontal {
    flex-wrap: nowrap;
    min-width: -webkit-fit-content;
    min-width: fit-content;
  }

  .tabla-container {
    overflow-x: auto;
  }

  .tabla-gastos {
    min-width: 600px;
  }

  .acciones-container {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .modal-content {
    width: 95%;
    margin: 10px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .modal-footer {
    flex-direction: column;
    gap: 12px;
  }

  .btn-save,
  .btn-cancel {
    width: 100%;
  }
}
/* src/components/Mermas/Mermas.css */
.mermas-container {
  background: linear-gradient(135deg, #795548 0%, #5d4037 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.mermas-content {
  flex: 1 1;
  margin: 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}

.mermas-inner {
  padding: 24px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header de la pagina */
.mermas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #f1f5f9;
}

.mermas-titulo {
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 3px;
}

.mermas-titulo::before {
  content: '';
  font-size: 14px;
}

.botones-header {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Botones del header */
.btn-nuevo {
  background: linear-gradient(135deg, #795548, #5d4037);
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(121, 85, 72, 0.3);
}

.btn-nuevo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(121, 85, 72, 0.4);
}

/* Panel de filtros */
.panel-filtros {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 2px;
  margin-bottom: 2px;
  overflow: hidden;
  box-shadow: none;
}

.filtros-content {
  padding: 8px 12px;
}

.filtros-row-horizontal {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.filtro-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: auto;
}

.filtro-item label {
  font-weight: 500;
  color: #374151;
  font-size: 11px;
  white-space: nowrap;
  min-width: -webkit-fit-content;
  min-width: fit-content;
}

.input-filtro,
.select-input {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  font-size: 11px;
  transition: all 0.2s ease;
  background: white;
  height: 26px;
  width: 140px;
}

.input-filtro:focus,
.select-input:focus {
  outline: none;
  border-color: #795548;
  box-shadow: 0 0 0 3px rgba(121, 85, 72, 0.1);
}

.btn-mostrar-mermas {
  display: flex;
  align-items: center;
}

.btn-buscar {
  background: linear-gradient(135deg, #795548, #5d4037);
  color: white;
  border: none;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  transition: all 0.3s ease;
  height: 26px;
  white-space: nowrap;
}

.btn-buscar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(121, 85, 72, 0.3);
}

/* Total de mermas */
.total-mermas-box {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 12px;
  text-align: center;
  min-width: 120px;
}

.total-label {
  font-size: 10px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 2px;
}

.total-amount {
  font-size: 16px;
  font-weight: 700;
  color: #795548;
}

/* Panel de listado */
.panel-listado {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Tabla */
.tabla-container {
  flex: 1 1;
  overflow-y: auto;
  max-height: none;
  height: calc(100vh - 300px);
  border: 1px solid #d1d5db;
  border-radius: 2px;
}

.tabla-mermas {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
  table-layout: fixed;
}

.tabla-mermas thead {
  background: linear-gradient(135deg, #795548 0%, #5d4037 100%);
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabla-mermas th {
  padding: 4px 6px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.tabla-mermas td {
  padding: 3px 6px;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #f3f4f6;
  vertical-align: middle;
  font-size: 11px;
}

.tabla-mermas tbody tr:hover {
  background-color: #f8fafc;
}

.tabla-mermas tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.tabla-mermas tbody tr:nth-child(even):hover {
  background-color: #f0f2ff;
}

.producto-merma {
  font-weight: 600;
  color: #374151;
}

.cantidad-merma {
  font-weight: 600;
  color: #795548;
  text-align: right;
}

.acciones-merma {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.btn-accion {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

.btn-ver {
  color: #3182ce;
}

.btn-ver:hover {
  background: #ebf8ff;
  transform: scale(1.1);
}

.btn-eliminar {
  color: #e53e3e;
}

.btn-eliminar:hover {
  background: #fee;
  transform: scale(1.1);
}

/* Estilos para la tabla principal */
.motivo-merma {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cantidad-ingredientes {
  text-align: center;
  font-weight: 600;
  color: #795548;
}

/* Modal de detalle de merma */
.detalle-merma-modal {
  padding: 10px 0;
}

.detalle-info {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
}

.detalle-info p {
  margin: 8px 0;
  font-size: 14px;
  color: #374151;
}

.detalle-info strong {
  color: #1f2937;
}

.detalle-ingredientes {
  margin-top: 16px;
}

.detalle-ingredientes > label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.tabla-detalle-ingredientes {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.tabla-detalle-ingredientes thead {
  background: #795548;
  color: white;
}

.tabla-detalle-ingredientes th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
}

.tabla-detalle-ingredientes td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}

.tabla-detalle-ingredientes tbody tr:last-child td {
  border-bottom: none;
}

.tabla-detalle-ingredientes tbody tr:hover {
  background: #f5f5f5;
}

.cantidad-detalle {
  text-align: right;
  font-weight: 500;
  color: #795548;
}

/* Estados de carga y sin datos */
.cargando,
.sin-datos {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
  font-size: 16px;
  background: white;
}

.cargando {
  color: #795548;
  font-weight: 500;
}

.sin-datos {
  color: #9ca3af;
}

/* Contenedor de acciones */
.acciones-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

.info-mermas {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

/* Loading state */
.loading {
  text-align: center;
  padding: 60px 20px;
  color: #795548;
  font-size: 16px;
  font-weight: 500;
}

/* Ocultar flechas de inputs numéricos */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Estilos para el select de producto */
.form-group-merma {
  margin-bottom: 16px;
}

.form-group-merma label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.select-producto {
  width: 100%;
}

.select-producto .select__control {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  min-height: 42px;
  box-shadow: none;
  transition: all 0.2s ease;
}

.select-producto .select__control:hover {
  border-color: #795548;
}

.select-producto .select__control--is-focused {
  border-color: #795548;
  box-shadow: 0 0 0 3px rgba(121, 85, 72, 0.1);
}

.select-producto .select__placeholder {
  color: #9ca3af;
}

.select-producto .select__single-value {
  color: #1f2937;
}

.select-producto .select__menu {
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 9999;
}

.select-producto .select__option {
  padding: 10px 12px;
  cursor: pointer;
}

.select-producto .select__option--is-focused {
  background-color: #f5f5f5;
}

.select-producto .select__option--is-selected {
  background-color: #795548;
  color: white;
}

/* Selector de modo */
.modo-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  background: #f3f4f6;
  padding: 4px;
  border-radius: 8px;
}

.modo-btn {
  flex: 1 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.modo-btn:hover {
  background: #e5e7eb;
}

.modo-btn.activo {
  background: #795548;
  color: white;
  box-shadow: 0 2px 4px rgba(121, 85, 72, 0.3);
}

/* Tabla de ingredientes de receta */
.ingredientes-receta {
  margin-top: 16px;
}

.ingredientes-receta > label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.tabla-ingredientes-receta {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  max-height: 250px;
  overflow-y: auto;
}

.header-ingredientes {
  display: grid;
  grid-template-columns: 40px 1fr 100px 120px;
  grid-gap: 8px;
  gap: 8px;
  padding: 10px 12px;
  background: #795548;
  color: white;
  font-weight: 600;
  font-size: 12px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.row-ingrediente {
  display: grid;
  grid-template-columns: 40px 1fr 100px 120px;
  grid-gap: 8px;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
  font-size: 13px;
}

.row-ingrediente:last-child {
  border-bottom: none;
}

.row-ingrediente:nth-child(even) {
  background: #fafafa;
}

.row-ingrediente:hover {
  background: #f5f5f5;
}

.col-check {
  display: flex;
  justify-content: center;
}

.col-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #795548;
}

.col-nombre {
  font-weight: 500;
  color: #374151;
}

.col-receta {
  text-align: center;
  color: #6b7280;
}

.col-merma input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
}

.col-merma input:focus {
  outline: none;
  border-color: #795548;
  box-shadow: 0 0 0 2px rgba(121, 85, 72, 0.1);
}

.col-merma input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

.sin-ingredientes {
  padding: 20px;
  text-align: center;
  color: #9ca3af;
  font-style: italic;
  background: #f9fafb;
  border-radius: 8px;
  margin-top: 12px;
}

/* Sección de platillos múltiples */
.platillos-section {
  margin-bottom: 16px;
}

.agregar-platillo-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.select-platillo-container {
  flex: 1 1;
}

.btn-agregar-platillo {
  background: linear-gradient(135deg, #795548, #5d4037);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
  white-space: nowrap;
  height: 42px;
}

.btn-agregar-platillo:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(121, 85, 72, 0.3);
}

/* Lista de platillos agregados */
.lista-platillos-agregados {
  margin-bottom: 16px;
}

.lista-platillos-agregados > label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.tabla-platillos {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.header-platillos {
  display: grid;
  grid-template-columns: 1fr 120px 80px;
  grid-gap: 8px;
  gap: 8px;
  padding: 10px 12px;
  background: #795548;
  color: white;
  font-weight: 600;
  font-size: 12px;
}

.row-platillo {
  display: grid;
  grid-template-columns: 1fr 120px 80px;
  grid-gap: 8px;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
  font-size: 13px;
  background: white;
}

.row-platillo:last-child {
  border-bottom: none;
}

.row-platillo:hover {
  background: #f5f5f5;
}

.col-platillo-nombre {
  font-weight: 500;
  color: #374151;
}

.col-platillo-cantidad {
  display: flex;
  justify-content: center;
}

.col-platillo-cantidad input {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
}

.col-platillo-cantidad input:focus {
  outline: none;
  border-color: #795548;
  box-shadow: 0 0 0 2px rgba(121, 85, 72, 0.1);
}

.col-platillo-acciones {
  display: flex;
  justify-content: center;
}

.btn-eliminar-platillo {
  background: transparent;
  border: none;
  color: #e53e3e;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

.btn-eliminar-platillo:hover {
  background: #fee;
  transform: scale(1.1);
}

/* Ajuste para ingredientes consolidados (4 columnas con origen) */
.ingredientes-receta .header-ingredientes {
  grid-template-columns: 40px 1fr 90px 120px;
}

.ingredientes-receta .row-ingrediente {
  grid-template-columns: 40px 1fr 90px 120px;
}

/* Columna de origen */
.col-origen {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Tags de origen */
.tag-preparado {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: help;
}

.tag-directo {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Responsivo */
@media (max-width: 1024px) {
  .mermas-content {
    margin: 10px;
  }

  .mermas-inner {
    padding: 16px;
  }

  .filtros-row-horizontal {
    flex-wrap: wrap;
    gap: 8px;
  }

  .total-mermas-box {
    order: -1;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .mermas-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .mermas-titulo {
    font-size: 18px;
    text-align: center;
  }

  .botones-header {
    justify-content: center;
  }

  .panel-filtros {
    overflow-x: auto;
  }

  .filtros-row-horizontal {
    flex-wrap: nowrap;
    min-width: -webkit-fit-content;
    min-width: fit-content;
  }

  .tabla-container {
    overflow-x: auto;
  }

  .tabla-mermas {
    min-width: 700px;
  }

  .acciones-container {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
}

/* src/components/SalidaInventario/SalidaInventario.css */
.salida-inventario-container {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.salida-inventario-content {
  flex: 1 1;
  margin: 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}

.salida-inventario-inner {
  padding: 24px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header de la pagina */
.salida-inventario-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #f1f5f9;
}

.salida-inventario-titulo {
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 3px;
}

.botones-header {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Botones del header */
.btn-nuevo {
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(46, 125, 50, 0.3);
}

.btn-nuevo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(46, 125, 50, 0.4);
}

/* Panel de filtros */
.panel-filtros {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 2px;
  margin-bottom: 2px;
  overflow: hidden;
}

.filtros-content {
  padding: 8px 12px;
}

.filtros-row-horizontal {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.filtro-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: auto;
}

.filtro-item label {
  font-weight: 500;
  color: #374151;
  font-size: 11px;
  white-space: nowrap;
  min-width: -webkit-fit-content;
  min-width: fit-content;
}

.filtro-destino {
  flex: 1 1;
  max-width: 250px;
}

.select-filtro-destino {
  min-width: 180px;
}

.input-filtro {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  font-size: 11px;
  transition: all 0.2s ease;
  background: white;
  height: 26px;
  width: 140px;
}

.input-filtro:focus {
  outline: none;
  border-color: #2e7d32;
  box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

.btn-mostrar-salidas {
  display: flex;
  align-items: center;
}

.btn-buscar {
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  color: white;
  border: none;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  transition: all 0.3s ease;
  height: 26px;
  white-space: nowrap;
}

.btn-buscar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

/* Panel de listado */
.panel-listado {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Tabla */
.tabla-container {
  flex: 1 1;
  overflow-y: auto;
  max-height: none;
  height: calc(100vh - 300px);
  border: 1px solid #d1d5db;
  border-radius: 2px;
}

.tabla-salidas {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
  table-layout: fixed;
}

.tabla-salidas thead {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabla-salidas th {
  padding: 4px 6px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.tabla-salidas td {
  padding: 3px 6px;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #f3f4f6;
  vertical-align: middle;
  font-size: 11px;
}

.tabla-salidas tbody tr:hover {
  background-color: #f8fafc;
}

.tabla-salidas tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.tabla-salidas tbody tr:nth-child(even):hover {
  background-color: #f0f2ff;
}

/* Tag de destino */
.tag-destino {
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  display: inline-block;
}

.tag-destino-detalle {
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.destino-salida {
  white-space: nowrap;
}

.motivo-salida {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cantidad-ingredientes {
  text-align: center;
  font-weight: 600;
  color: #2e7d32;
}

.acciones-salida {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.btn-accion {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

.btn-ver {
  color: #3182ce;
}

.btn-ver:hover {
  background: #ebf8ff;
  transform: scale(1.1);
}

.btn-eliminar {
  color: #e53e3e;
}

.btn-eliminar:hover {
  background: #fee;
  transform: scale(1.1);
}

/* Modal de detalle */
.detalle-salida-modal {
  padding: 10px 0;
}

.detalle-info {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
}

.detalle-info p {
  margin: 8px 0;
  font-size: 14px;
  color: #374151;
}

.detalle-info strong {
  color: #1f2937;
}

.detalle-ingredientes {
  margin-top: 16px;
}

.detalle-ingredientes > label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.tabla-detalle-ingredientes {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.tabla-detalle-ingredientes thead {
  background: #2e7d32;
  color: white;
}

.tabla-detalle-ingredientes th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
}

.tabla-detalle-ingredientes td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}

.tabla-detalle-ingredientes tbody tr:last-child td {
  border-bottom: none;
}

.tabla-detalle-ingredientes tbody tr:hover {
  background: #f5f5f5;
}

.cantidad-detalle {
  text-align: right;
  font-weight: 500;
  color: #2e7d32;
}

/* Estados de carga y sin datos */
.cargando,
.sin-datos {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
  font-size: 16px;
  background: white;
}

.cargando {
  color: #2e7d32;
  font-weight: 500;
}

/* Contenedor de acciones */
.acciones-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

.info-salidas {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

/* Loading state */
.loading {
  text-align: center;
  padding: 60px 20px;
  color: #2e7d32;
  font-size: 16px;
  font-weight: 500;
}

/* Ocultar flechas de inputs numéricos */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Estilos para el formulario */
.form-group-salida {
  margin-bottom: 16px;
}

.form-group-salida label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.destino-obligatorio {
  background: #f0fdf4;
  padding: 16px;
  border-radius: 8px;
  border: 2px solid #bbf7d0;
  margin-bottom: 20px;
}

.select-destino {
  width: 100%;
}

.select-producto {
  width: 100%;
}

/* Selector de modo */
.modo-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  background: #f3f4f6;
  padding: 4px;
  border-radius: 8px;
}

.modo-btn {
  flex: 1 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.modo-btn:hover {
  background: #e5e7eb;
}

.modo-btn.activo {
  background: #2e7d32;
  color: white;
  box-shadow: 0 2px 4px rgba(46, 125, 50, 0.3);
}

/* Sección de platillos */
.platillos-section {
  margin-bottom: 16px;
}

.agregar-platillo-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.select-platillo-container {
  flex: 1 1;
}

.btn-agregar-platillo {
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
  white-space: nowrap;
  height: 42px;
}

.btn-agregar-platillo:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

/* Lista de platillos agregados */
.lista-platillos-agregados {
  margin-bottom: 16px;
}

.lista-platillos-agregados > label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.tabla-platillos {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.header-platillos {
  display: grid;
  grid-template-columns: 1fr 120px 80px;
  grid-gap: 8px;
  gap: 8px;
  padding: 10px 12px;
  background: #2e7d32;
  color: white;
  font-weight: 600;
  font-size: 12px;
}

.row-platillo {
  display: grid;
  grid-template-columns: 1fr 120px 80px;
  grid-gap: 8px;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
  font-size: 13px;
  background: white;
}

.row-platillo:last-child {
  border-bottom: none;
}

.row-platillo:hover {
  background: #f5f5f5;
}

.col-platillo-nombre {
  font-weight: 500;
  color: #374151;
}

.col-platillo-cantidad {
  display: flex;
  justify-content: center;
}

.col-platillo-cantidad input {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
}

.col-platillo-cantidad input:focus {
  outline: none;
  border-color: #2e7d32;
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.1);
}

.col-platillo-acciones {
  display: flex;
  justify-content: center;
}

.btn-eliminar-platillo {
  background: transparent;
  border: none;
  color: #e53e3e;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

.btn-eliminar-platillo:hover {
  background: #fee;
  transform: scale(1.1);
}

/* Tabla de ingredientes */
.ingredientes-receta {
  margin-top: 16px;
}

.ingredientes-receta > label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.tabla-ingredientes-receta {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  max-height: 250px;
  overflow-y: auto;
}

.header-ingredientes {
  display: grid;
  grid-template-columns: 40px 1fr 90px 120px;
  grid-gap: 8px;
  gap: 8px;
  padding: 10px 12px;
  background: #2e7d32;
  color: white;
  font-weight: 600;
  font-size: 12px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.row-ingrediente {
  display: grid;
  grid-template-columns: 40px 1fr 90px 120px;
  grid-gap: 8px;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
  font-size: 13px;
}

.row-ingrediente:last-child {
  border-bottom: none;
}

.row-ingrediente:nth-child(even) {
  background: #fafafa;
}

.row-ingrediente:hover {
  background: #f5f5f5;
}

.col-check {
  display: flex;
  justify-content: center;
}

.col-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #2e7d32;
}

.col-nombre {
  font-weight: 500;
  color: #374151;
}

.col-origen {
  display: flex;
  justify-content: center;
  align-items: center;
}

.col-salida input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
}

.col-salida input:focus {
  outline: none;
  border-color: #2e7d32;
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.1);
}

.col-salida input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Tags de origen */
.tag-preparado {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: help;
}

.tag-directo {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sin-ingredientes {
  padding: 20px;
  text-align: center;
  color: #9ca3af;
  font-style: italic;
  background: #f9fafb;
  border-radius: 8px;
  margin-top: 12px;
}

/* Responsivo */
@media (max-width: 1024px) {
  .salida-inventario-content {
    margin: 10px;
  }

  .salida-inventario-inner {
    padding: 16px;
  }

  .filtros-row-horizontal {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .salida-inventario-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .salida-inventario-titulo {
    font-size: 18px;
    text-align: center;
  }

  .botones-header {
    justify-content: center;
  }

  .panel-filtros {
    overflow-x: auto;
  }

  .filtros-row-horizontal {
    flex-wrap: nowrap;
    min-width: -webkit-fit-content;
    min-width: fit-content;
  }

  .tabla-container {
    overflow-x: auto;
  }

  .tabla-salidas {
    min-width: 700px;
  }

  .acciones-container {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
}

/* src/components/EntradaInventario/EntradaInventario.css */
.entrada-inventario-container {
  background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.entrada-inventario-content {
  flex: 1 1;
  margin: 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}

.entrada-inventario-inner {
  padding: 24px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header de la pagina */
.entrada-inventario-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #f1f5f9;
}

.entrada-inventario-titulo {
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 3px;
}

.botones-header {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Botones del header */
.btn-nuevo {
  background: linear-gradient(135deg, #1565c0, #0d47a1);
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(21, 101, 192, 0.3);
}

.btn-nuevo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(21, 101, 192, 0.4);
}

/* Panel de filtros */
.panel-filtros {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 2px;
  margin-bottom: 2px;
  overflow: hidden;
}

.filtros-content {
  padding: 8px 12px;
}

.filtros-row-horizontal {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.filtro-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: auto;
}

.filtro-item label {
  font-weight: 500;
  color: #374151;
  font-size: 11px;
  white-space: nowrap;
  min-width: -webkit-fit-content;
  min-width: fit-content;
}

.input-filtro {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  font-size: 11px;
  transition: all 0.2s ease;
  background: white;
  height: 26px;
  width: 140px;
}

.input-filtro:focus {
  outline: none;
  border-color: #1565c0;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.1);
}

.btn-mostrar-entradas {
  display: flex;
  align-items: center;
}

.btn-buscar {
  background: linear-gradient(135deg, #1565c0, #0d47a1);
  color: white;
  border: none;
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  transition: all 0.3s ease;
  height: 26px;
  white-space: nowrap;
}

.btn-buscar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
}

/* Panel de listado */
.panel-listado {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Tabla */
.tabla-container {
  flex: 1 1;
  overflow-y: auto;
  max-height: none;
  height: calc(100vh - 300px);
  border: 1px solid #d1d5db;
  border-radius: 2px;
}

.tabla-entradas {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
  table-layout: fixed;
}

.tabla-entradas thead {
  background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabla-entradas th {
  padding: 4px 6px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.tabla-entradas td {
  padding: 3px 6px;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #f3f4f6;
  vertical-align: middle;
  font-size: 11px;
}

.tabla-entradas tbody tr:hover {
  background-color: #f8fafc;
}

.tabla-entradas tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.tabla-entradas tbody tr:nth-child(even):hover {
  background-color: #e3f2fd;
}

.comentario-entrada {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cantidad-ingredientes {
  text-align: center;
  font-weight: 600;
  color: #1565c0;
}

.acciones-entrada {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.btn-accion {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

.btn-ver {
  color: #3182ce;
}

.btn-ver:hover {
  background: #ebf8ff;
  transform: scale(1.1);
}

.btn-eliminar {
  color: #e53e3e;
}

.btn-eliminar:hover {
  background: #fee;
  transform: scale(1.1);
}

/* Modal de detalle */
.detalle-entrada-modal {
  padding: 10px 0;
}

.detalle-info {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
}

.detalle-info p {
  margin: 8px 0;
  font-size: 14px;
  color: #374151;
}

.detalle-info strong {
  color: #1f2937;
}

.detalle-ingredientes {
  margin-top: 16px;
}

.detalle-ingredientes > label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.tabla-detalle-ingredientes {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.tabla-detalle-ingredientes thead {
  background: #1565c0;
  color: white;
}

.tabla-detalle-ingredientes th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
}

.tabla-detalle-ingredientes td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}

.tabla-detalle-ingredientes tbody tr:last-child td {
  border-bottom: none;
}

.tabla-detalle-ingredientes tbody tr:hover {
  background: #f5f5f5;
}

.tabla-detalle-ingredientes tfoot {
  background: #f1f5f9;
  font-weight: 600;
}

.tabla-detalle-ingredientes tfoot td {
  padding: 12px;
  border-top: 2px solid #e2e8f0;
}

.cantidad-detalle {
  text-align: right;
  font-weight: 500;
  color: #1565c0;
}

.costo-detalle {
  text-align: right;
  color: #6b7280;
}

.subtotal-detalle {
  text-align: right;
  font-weight: 500;
  color: #374151;
}

.total-label {
  text-align: right;
  font-weight: 600;
  color: #1f2937;
}

.total-valor {
  text-align: right;
  font-weight: 700;
  color: #1565c0;
  font-size: 14px;
}

/* Estados de carga y sin datos */
.cargando,
.sin-datos {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
  font-size: 16px;
  background: white;
}

.cargando {
  color: #1565c0;
  font-weight: 500;
}

/* Contenedor de acciones */
.acciones-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

.info-entradas {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

/* Loading state */
.loading {
  text-align: center;
  padding: 60px 20px;
  color: #1565c0;
  font-size: 16px;
  font-weight: 500;
}

/* Ocultar flechas de inputs numéricos */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Estilos para el formulario */
.form-group-entrada {
  margin-bottom: 16px;
}

.form-group-entrada label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.select-producto {
  width: 100%;
}

/* Selector de modo */
.modo-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  background: #f3f4f6;
  padding: 4px;
  border-radius: 8px;
}

.modo-btn {
  flex: 1 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.modo-btn:hover {
  background: #e5e7eb;
}

.modo-btn.activo {
  background: #1565c0;
  color: white;
  box-shadow: 0 2px 4px rgba(21, 101, 192, 0.3);
}

/* Sección de ingredientes múltiples */
.ingredientes-section {
  margin-bottom: 16px;
}

.agregar-ingrediente-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.select-ingrediente-container {
  flex: 1 1;
}

.btn-agregar-ingrediente {
  background: linear-gradient(135deg, #1565c0, #0d47a1);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
  white-space: nowrap;
  height: 42px;
}

.btn-agregar-ingrediente:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
}

/* Lista de ingredientes agregados */
.lista-ingredientes-agregados {
  margin-bottom: 16px;
}

.lista-ingredientes-agregados > label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.tabla-ingredientes {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}

.header-ingredientes {
  display: grid;
  grid-template-columns: 1fr 100px 80px;
  grid-gap: 8px;
  gap: 8px;
  padding: 10px 12px;
  background: #1565c0;
  color: white;
  font-weight: 600;
  font-size: 12px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.row-ingrediente {
  display: grid;
  grid-template-columns: 1fr 100px 80px;
  grid-gap: 8px;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
  font-size: 13px;
  background: white;
}

.row-ingrediente:last-child {
  border-bottom: none;
}

.row-ingrediente:hover {
  background: #f5f5f5;
}

.col-nombre {
  font-weight: 500;
  color: #374151;
}

.col-cantidad {
  display: flex;
  justify-content: center;
}

.col-cantidad input {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
}

.col-cantidad input:focus {
  outline: none;
  border-color: #1565c0;
  box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.1);
}

.col-acciones {
  display: flex;
  justify-content: center;
}

.btn-eliminar-ingrediente {
  background: transparent;
  border: none;
  color: #e53e3e;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

.btn-eliminar-ingrediente:hover {
  background: #fee;
  transform: scale(1.1);
}

/* Responsivo */
@media (max-width: 1024px) {
  .entrada-inventario-content {
    margin: 10px;
  }

  .entrada-inventario-inner {
    padding: 16px;
  }

  .filtros-row-horizontal {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .entrada-inventario-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .entrada-inventario-titulo {
    font-size: 18px;
    text-align: center;
  }

  .botones-header {
    justify-content: center;
  }

  .panel-filtros {
    overflow-x: auto;
  }

  .filtros-row-horizontal {
    flex-wrap: nowrap;
    min-width: -webkit-fit-content;
    min-width: fit-content;
  }

  .tabla-container {
    overflow-x: auto;
  }

  .tabla-entradas {
    min-width: 600px;
  }

  .acciones-container {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
}

/* src/components/Ventas/CreacionPedido/CreacionPedido.css */

.creacion-pedido-content {
  display: flex;
  width: 100%;
  height: calc(100vh - var(--header-height-scale));
  overflow: hidden;
}

/* Estilos para pedido pendiente */
.pedido-pendiente-alerta {
  display: flex;
  align-items: center;
  gap: var(--space-scale-4);
  margin: var(--space-scale-4);
  padding: var(--space-scale-4);
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  border: 2px solid #f39c12;
  border-radius: var(--radius-scale-lg);
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.2);
}

.alerta-icono {
  font-size: var(--font-scale-2xl);
  min-width: clamp(16px, 1.5625vw, 30px);
}

.alerta-contenido h3 {
  margin: 0 0 clamp(2px, 0.26vw, 5px) 0;
  color: #d35400;
  font-size: var(--font-scale-base);
  font-weight: 600;
}

.alerta-contenido p {
  margin: 0;
  color: #8e44ad;
  font-size: var(--font-scale-sm);
  line-height: 1.4;
}

/* Estilos para elementos deshabilitados */
.categorias-grid.deshabilitado {
  opacity: 0.5;
  pointer-events: none;
}

.categoria-card.deshabilitada {
  background-color: #e0e0e0 !important;
  color: #999 !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}

.buscador-container.deshabilitado {
  opacity: 0.5;
  pointer-events: none;
}

.buscador-input.deshabilitado {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.buscador-opciones.deshabilitado {
  opacity: 0.6;
  pointer-events: none;
}

.productos-seccion {
  flex: 2 1;
  height: 100%;
  overflow-y: auto;
  background-color: #f9f9f9;
  border-right: 1px solid #e0e0e0;
  padding: var(--space-scale-3);
}

.detalle-pedido-seccion {
  flex: 1 1;
  min-width: var(--sidebar-min-width);
  max-width: var(--sidebar-max-width);
  height: 100%;
  overflow-y: auto;
  padding: var(--space-scale-3);
  background-color: #333;

}

/* Estilos para la vista de categorías */
.categorias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-card-min), 1fr));
  grid-gap: var(--space-scale-4);
  gap: var(--space-scale-4);
  padding: var(--space-scale-4);
}

.categoria-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(45px, 4.6875vw, 90px);
  padding: var(--space-scale-4);
  border: none;
  border-radius: var(--radius-scale-md);
  background-color: #f5f5f5;
  color: #333;

  font-weight: 600;
  font-size: var(--font-scale-base);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
}

.categoria-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Estilos para la vista de productos */
.productos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-scale-3) var(--space-scale-4);
  background-color: #f0f0f0;
  border-radius: var(--radius-scale-md);
  margin-bottom: var(--space-scale-4);
}

.productos-header h3 {
  margin: 0;
  font-size: var(--font-scale-xl);
  color: #333;

}

.btn-volver {
  background-color: transparent;
  border: none;
  color: #1976d2;
  padding: var(--space-scale-2) var(--space-scale-3);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-scale-sm);
  transition: background-color 0.2s;
}

.btn-volver:hover {
  background-color: rgba(25, 118, 210, 0.1);
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-producto-min), 1fr));
  grid-gap: var(--space-scale-3);
  gap: var(--space-scale-3);
  padding: var(--space-scale-2);
}

/* Estilos para modal detalles producto */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-producto-detalle {
  background-color: white;
  border-radius: var(--radius-scale-md);
  width: 90%;
  max-width: var(--modal-width-md);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-scale-4) var(--space-scale-5);
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  margin: 0;
  font-size: var(--font-scale-xl);
  color: #333;

}

.btn-cerrar-modal {
  background: none;
  border: none;
  font-size: var(--font-scale-2xl);
  cursor: pointer;
  color: #616161;
}

.modal-content {
  padding: var(--space-scale-5);
  flex: 1 1;
  overflow-y: auto;
}

.producto-precio-detalle {
  font-size: var(--font-scale-xl);
  font-weight: 700;
  margin-bottom: var(--space-scale-4);
  color: #1976d2;
}

.producto-ingredientes {
  margin-bottom: var(--space-scale-5);
}

.producto-ingredientes h4 {
  margin-top: 0;
  color: #333;

  border-bottom: 1px solid #e0e0e0;
  padding-bottom: var(--space-scale-1);
}

.lista-ingredientes {
  list-style-type: none;
  padding-left: var(--space-scale-1);
}

.lista-ingredientes li {
  padding: var(--space-scale-1) 0;
  border-bottom: 1px dashed #f0f0f0;
}

.cantidad-ingrediente {
  margin-left: var(--space-scale-1);
  color: #666;
  font-size: 0.9em;
}

.producto-promociones-detalle {
  background-color: #fff8e1;
  padding: var(--space-scale-3);
  border-radius: var(--radius-scale-md);
  border-left: 4px solid #ffc107;
}

.producto-promociones-detalle h4 {
  margin-top: 0;
  color: #333;

}

.lista-promociones {
  list-style-type: none;
  padding-left: var(--space-scale-1);
}

.item-promocion-detalle {
  padding: var(--space-scale-1) 0;
}

.modal-footer {
  padding: var(--space-scale-4) var(--space-scale-5);
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
}

.btn-agregar-desde-detalle {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: var(--space-scale-2) var(--space-scale-4);
  border-radius: var(--radius-scale-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-agregar-desde-detalle:hover {
  background-color: #388e3c;
}

/* Estados de carga y errores */
.cargando-productos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 2.083vw, 40px);
  text-align: center;
  color: #666;
}

.cargando-ingredientes {
  display: flex;
  align-items: center;
  gap: var(--space-scale-3);
  padding: var(--space-scale-4);
  color: #666;
}

.spinner {
  width: clamp(16px, 1.5625vw, 30px);
  height: clamp(16px, 1.5625vw, 30px);
  border: clamp(2px, 0.156vw, 3px) solid #1976d2;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}

.spinner-small {
  width: clamp(10px, 0.9375vw, 18px);
  height: clamp(10px, 0.9375vw, 18px);
  border: clamp(1px, 0.104vw, 2px) solid #1976d2;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.error-ingredientes {
  color: #e53935;
  padding: var(--space-scale-3);
  background-color: #ffebee;
  border-radius: var(--radius-scale-sm);
}

.no-ingredientes {
  font-style: italic;
  color: #757575;
}

.no-productos {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(15px, 1.5625vw, 30px);
  color: #757575;
  font-style: italic;
}
/* Estilos para el buscador de productos */

.buscador-container {
  width: 100%;
  padding: var(--space-scale-3) var(--space-scale-4);
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.buscador-input-container {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: var(--radius-scale-md);
  padding: 0 var(--space-scale-3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.buscador-input-container:focus-within {
  box-shadow: 0 1px 6px rgba(25, 118, 210, 0.2);
  background-color: white;
  border: 1px solid #bbdefb;
}

.buscador-icon {
  color: #757575;
  margin-right: var(--space-scale-2);
}

.buscador-input {
  flex: 1 1;
  border: none;
  background: transparent;
  padding: var(--space-scale-3) 0;
  font-size: var(--font-scale-base);
  outline: none;
  width: 100%;
}

.buscador-clear {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-scale-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #757575;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.buscador-clear:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.busqueda-header {
  background-color: #e3f2fd;
  margin-top: var(--space-scale-3);
}

/* Animación para los resultados de búsqueda */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.productos-grid {
  animation: fadeIn 0.3s ease;
}

/* Contenedor de opciones de búsqueda */
.buscador-container .buscador-opciones {
  display: flex;
  flex-direction: row;
  gap: var(--space-scale-5);
  margin: 0;
  padding: 0;
  align-items: center;
}

.buscador-container .buscador-opciones.deshabilitado {
  opacity: 0.5;
  pointer-events: none;
}

/* Estilo visual para los checkboxes personalizados */
.buscador-container .opcion-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  gap: var(--space-scale-2);
}

.buscador-container .opcion-checkbox.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Cuadro del checkbox personalizado */
.buscador-container .checkbox-custom {
  width: clamp(14px, 1.146vw, 22px);
  height: clamp(14px, 1.146vw, 22px);
  border: 2px solid #2196F3;
  border-radius: var(--radius-scale-sm);
  background-color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.buscador-container .opcion-checkbox:hover .checkbox-custom {
  background-color: #e3f2fd;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.buscador-container .checkbox-custom.checked {
  background-color: white;
  border-color: #2196F3;
}

/* Palomita dentro del checkbox */
.buscador-container .checkmark {
  color: #2196F3;
  font-size: var(--font-scale-base);
  font-weight: bold;
  line-height: 1;
}

/* Etiqueta del checkbox */
.buscador-container .checkbox-label {
  color: #333;
  font-size: var(--font-scale-sm);
  font-weight: 500;
  white-space: nowrap;
}

.buscador-container .opcion-checkbox.disabled .checkbox-label {
  color: #999;
}
/* DetallePedidoMejorado.css */

/* Estilos para el componente principal */
.pedido-seccion {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #e5e5e5;
  background-color: #f8f9fa;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  height: 100%;
  position: relative;
  transition: width 0.3s ease;
  width: 30%;
}

.pedido-seccion.pantalla-completa {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 70%;
  z-index: 1000;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
}

.pedido-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
}

.pedido-titulo {
  display: flex;
  align-items: center;
}

.pedido-titulo h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;

}

.pedido-controles {
  display: flex;
  gap: 0.5rem;
}

.btn-vista-toggle,
.btn-pantalla-completa {
  background-color: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-scale-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
}

.btn-vista-toggle:hover,
.btn-pantalla-completa:hover {
  background-color: #f0f0f0;
  color: #2196F3;
}

.pedido-acciones {
  display: flex;
  gap: 0.5rem;
}

.btn-imprimir,
.btn-limpiar,
.btn-mover-productos {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-scale-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  gap: 0.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-imprimir {
  color: #2196F3;
}

.btn-limpiar {
  color: #f44336;
}

.btn-mover-productos {
  color: #7c3aed;
  border-color: #c4b5fd;
}

.btn-imprimir:hover {
  background-color: #e3f2fd;
  border-color: #2196F3;
}

.btn-mover-productos:hover {
  background-color: #f3f4f6;
  border-color: #7c3aed;
  transform: translateY(-1px);
}

.btn-limpiar:hover {
  background-color: #ffebee;
  border-color: #f44336;
}

/* Botón de promoción de mesa para pedidos para llevar */
.btn-promocion-mesa {
  background-color: #fff;
  border: 1px solid #f59e0b;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-scale-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  gap: 0.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
  color: #d97706;
}

.btn-promocion-mesa:hover {
  background-color: #fffbeb;
  border-color: #d97706;
  transform: translateY(-1px);
}

.btn-promocion-mesa.activo {
  background-color: #fef3c7;
  border-color: #d97706;
  color: #92400e;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

.btn-promocion-mesa.activo:hover {
  background-color: #fde68a;
}

.pedido-contenido {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Secciones de nuevos y guardados */
.seccion-nuevos,
.seccion-guardados {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}

.seccion-titulo {
  background-color: #f0f0f0;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
}

.seccion-titulo h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.seccion-titulo.clickable {
  cursor: pointer;
}

.seccion-titulo.clickable:hover {
  background-color: #e8e8e8;
}

.contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #2196F3;
  color: white;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

.toggle-icon {
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.toggle-icon.closed {
  transform: rotate(-90deg);
}

.pedido-lista {
  overflow: hidden;
  max-height: 100%;
  transition: max-height 0.3s ease;
}

.nuevos-lista {
  min-height: 100px;
}

.guardados-lista {
  max-height: 100%;
}

.pedido-scroll {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

.pedido-vacio {
  padding: 1rem;
  text-align: center;
  color: #999;
  font-style: italic;
}

/* Elementos de pedido */
.pedido-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background-color 0.2s;
}

.pedido-item:hover {
  background-color: #f5f5f5;
}

.pedido-item.nuevo {
  background-color: #f9f9f9;
}

.pedido-item.guardado {
  background-color: #f0f0f0;
  opacity: 0.85;
}

.pedido-item.con-promocion {
  background-color: #e8f4ff;
  border-left: 4px solid #2196F3;
}

.item-detalles {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.item-nombre {
  font-weight: 500;
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.item-precio {
  font-weight: 500;
  color: #555;
  white-space: nowrap;
}

/* Estilos para el precio tachado en promociones 2x1 */
.precio-tachado {
  text-decoration: line-through;
  color: #999;
  margin-right: 0.5rem;
}

.precio-gratis {
  color: #4CAF50;
  font-weight: bold;
}

.badge {
  display: inline-flex;
  padding: 0.15rem 0.4rem;
  font-size: 0.65rem;
  border-radius: var(--radius-scale-sm);
  margin-right: 0.25rem;
  font-weight: bold;
  white-space: nowrap;
}

.badge.impreso {
  background-color: #e0e0e0;
  color: #555;
}

.badge.total-3 {
  background-color: #03a9f4;
  color: white;
}

.badge.plus-nuevos {
  background-color: #4caf50;
  color: white;
}

.badge.plus-guardados {
  background-color: #ff9800;
  color: white;
}

.badge.promocion-badge {
  background-color: #9c27b0;
  color: white;
}

.item-acciones {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cantidad-control {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.btn-cantidad {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: var(--radius-scale-sm);
  font-weight: bold;
  cursor: pointer;
}

.btn-cantidad:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-cantidad:hover:not(:disabled) {
  background-color: #e0e0e0;
}

.cantidad {
  font-weight: 500;
  min-width: 1.5rem;
  text-align: center;
}

.item-subtotal {
  font-weight: 600;
  color: #333;

}

.btn-eliminar {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffebee;
  border: 1px solid #ffcdd2;
  border-radius: var(--radius-scale-sm);
  color: #f44336;
  font-weight: bold;
  cursor: pointer;
}

.btn-eliminar:hover {
  background-color: #ffcdd2;
}

.btn-eliminar-guardado {
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
  color: #757575;
}

.btn-eliminar-guardado:hover {
  background-color: #e0e0e0;
}

.item-observaciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.observacion-tag {
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-scale-sm);
  font-size: 0.75rem;
  color: #555;
}

/* Información adicional para promociones */
.promocion-info {
  background-color: #e1f5fe;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-scale-sm);
  font-size: 0.75rem;
  color: #0288d1;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.promocion-info::before {
  content: '🎁';
  font-size: 0.85rem;
}

.promocion-detalle {
  font-weight: 500;
}

/* Botón de instrucciones */
.btn-instrucciones {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: var(--radius-scale-sm);
  padding: 0.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: all 0.2s ease;
}

.btn-instrucciones:hover:not(:disabled) {
  background-color: #e3f2fd;
  border-color: #2196F3;
  color: #2196F3;
}

.btn-instrucciones:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Instrucciones del producto */
.item-instrucciones {
  padding: 0.5rem;
  background-color: #fff8e1;
  border-left: 3px solid #ffc107;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.instrucciones-label {
  font-weight: 600;
  color: #f57c00;
}

.instrucciones-texto {
  color: #666;
  font-style: italic;
  flex: 1 1;
}

/* Modal de instrucciones */
.modal-instrucciones {
  background: white;
  padding: 0;
  border-radius: var(--radius-scale-md);
  max-width: var(--modal-width-md);
  width: 90%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid #ddd;
}

.modal-instrucciones .modal-header {
  padding: 1rem 1.5rem;
  background-color: #2196F3;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--radius-scale-md) var(--radius-scale-md) 0 0;
}

.modal-instrucciones .modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.modal-instrucciones .btn-cerrar-modal {
  background: transparent;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: clamp(16px, 1.5625vw, 30px);
  height: clamp(16px, 1.5625vw, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-scale-sm);
  transition: background-color 0.2s;
}

.modal-instrucciones .btn-cerrar-modal:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.modal-instrucciones .modal-body {
  padding: 1.5rem;
  background-color: #ffffff;
  color: #333;
}

.modal-instrucciones .producto-nombre {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
  color: #333;
}

.instrucciones-input-container {
  margin-top: 1rem;
}

.instrucciones-input-container label {
  display: block;
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 500;
}

.instrucciones-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: var(--radius-scale-sm);
  font-size: 0.95rem;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s;
}

.instrucciones-textarea:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.caracteres-contador {
  text-align: right;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #999;
}

.modal-instrucciones .modal-footer {
  padding: 1rem 1.5rem;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid #e0e0e0;
  border-radius: 0 0 var(--radius-scale-md) var(--radius-scale-md);
}

.modal-instrucciones .btn-confirmar,
.modal-instrucciones .btn-cancelar {
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-scale-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1 1;
  max-width: clamp(80px, 7.8125vw, 150px);
}

.modal-instrucciones .btn-confirmar {
  background-color: #2196F3;
  color: white;
  border: 1px solid #2196F3;
}

.modal-instrucciones .btn-confirmar:hover {
  background-color: #1976D2;
  border-color: #1976D2;
}

.modal-instrucciones .btn-cancelar {
  background-color: #fff;
  color: #666;
  border: 1px solid #ddd;
}

.modal-instrucciones .btn-cancelar:hover {
  background-color: #f5f5f5;
}

/* Vista de resumen */
.vista-resumen {
  flex: 1 1;
  overflow: auto;
  padding: 1rem;
}

.resumen-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.resumen-tabla th,
.resumen-tabla td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.resumen-tabla th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #333;

}

.resumen-tabla tr.nuevo {
  background-color: #f9f9f9;
}

.resumen-tabla tr.guardado {
  background-color: #f0f0f0;
}

.resumen-tabla tr.mixto {
  background-color: #e8f5e9;
}

.resumen-tabla .estado-nuevo,
.resumen-tabla .estado-guardado,
.resumen-tabla .estado-mixto {
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.resumen-tabla .estado-nuevo {
  background-color: #e8f5e9;
  color: #4caf50;
}

.resumen-tabla .estado-guardado {
  background-color: #fff3e0;
  color: #ff9800;
}

.resumen-tabla .estado-mixto {
  background-color: #e8eaf6;
  color: #3f51b5;
}

.resumen-tabla tfoot {
  font-weight: 600;
}

.resumen-tabla .total-label {
  text-align: right;
}

.resumen-tabla .total-valor {
  text-align: center;
  font-weight: 700;
}

/* Totales del pedido */
.pedido-totales {
  background-color: #fff;
  padding: 1rem;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
  border-top: 1px solid #e5e5e5;
}

.total-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.subtotal {
  color: #555;
}

/* Animación para calculando promociones */
.calculando-promociones {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.calculando-badge {
  font-size: 0.8rem;
  background-color: #ffecb3;
  color: #ff6f00;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-scale-sm);
  display: inline-block;
  animation: pulsate 1.5s infinite;
}

@keyframes pulsate {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.6;
  }
}

.promociones-aplicadas {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background-color: #f8f9fa;
  border-radius: var(--radius-scale-sm);
  border: 1px dashed #ccc;
}

.promociones-titulo {
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #333;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.promocion-item {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px dotted #eee;
  font-size: 0.85rem;
}

.promocion-item:last-child {
  border-bottom: none;
}

.promocion-descripcion {
  flex: 1 1;
}

/* Tipos específicos de promociones */
.promocion-item.promocion-descuento {
  background-color: #fce4ec;
  border-radius: var(--radius-scale-sm);
  padding: 0.5rem;
  margin-bottom: 0.25rem;
}

.promocion-item.promocion-compra-lleva {
  background-color: #e8f5e9;
  border-radius: var(--radius-scale-sm);
  padding: 0.5rem;
  margin-bottom: 0.25rem;
}

.promocion-item.promocion-regalo {
  background-color: #e3f2fd;
  border-radius: var(--radius-scale-sm);
  padding: 0.5rem;
  margin-bottom: 0.25rem;
}

.promocion-descuento {
  color: #f44336;
  font-weight: 600;
}

.descuentos {
  color: #f44336;
  font-weight: 500;
}

.total-final {
  font-weight: 700;
  font-size: 1rem;
  border-top: 1px solid #e5e5e5;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

/* Modal de autorización */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Overlay específico para modal de instrucciones - Fondo blanco */
.modal-overlay-instrucciones {
  background-color: rgba(255, 255, 255, 0.95);
}

.modal-autorizacion {
  background-color: white;
  border-radius: var(--radius-scale-md);
  width: 90%;
  max-width: var(--modal-width-sm);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #333;

}

.btn-cerrar-modal {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #777;
}

.btn-cerrar-modal:hover {
  color: #333;

}

.modal-body {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.input-password {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: var(--radius-scale-sm);
  font-size: 1rem;
}

.error-mensaje {
  color: #f44336;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #e0e0e0;
}

.btn-confirmar,
.btn-cancelar {
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-scale-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.btn-confirmar {
  background-color: #2196F3;
  border: 1px solid #1e88e5;
  color: white;
}

.btn-confirmar:hover {
  background-color: #1e88e5;
  border-color: #1976d2;
}

.btn-cancelar {
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  color: #333;
}

.btn-cancelar:hover {
  background-color: #e0e0e0;
  border-color: #ccc;
}

/* Media queries para responsive */
@media (max-width: 1200px) {
  .pedido-seccion {
    width: 100%;
  }
}

@media (max-width: 992px) {
  .pedido-seccion {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .pedido-seccion {
    width: 100%;
    border-left: none;
    border-top: 1px solid #e5e5e5;
  }

  .pedido-seccion.pantalla-completa {
    width: 100%;
  }
}
/* ===== AUTORIZACION MODAL (prefijo am-) ===== */

.am-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.am-modal {
  background: #fff;
  border-radius: 12px;
  width: 390px;
  max-width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: amIn 0.2s ease-out;
  overflow: hidden;
}

@keyframes amIn {
  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Header --- */
.am-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #1e293b;
  color: #fff;
}

.am-header__title {
  font-size: 14px;
  font-weight: 600;
}

.am-header__close {
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}

.am-header__close:hover {
  background: rgba(255,255,255,0.2);
}

/* --- Body --- */
.am-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Info box */
.am-info {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #3b82f6;
  border-radius: 6px;
  padding: 10px 12px;
}

.am-info p {
  margin: 0 0 3px;
  font-size: 12px;
  color: #475569;
  line-height: 1.45;
  word-break: break-word;
}

.am-info p:last-child {
  margin-bottom: 0;
}

.am-info strong {
  color: #1e293b;
}

.am-info__desc {
  color: #64748b !important;
  font-style: italic;
}

/* Tabs */
.am-tabs {
  display: flex;
  gap: 8px;
}

.am-tab {
  flex: 1 1;
  padding: 9px 8px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.am-tab:hover:not(:disabled) {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.am-tab--active {
  background: #1e293b;
  border-color: #1e293b;
  color: #fff;
}

.am-tab--active:hover:not(:disabled) {
  background: #334155;
  border-color: #334155;
}

.am-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.am-tab__off {
  font-size: 10px;
  color: #ef4444;
  margin-left: 2px;
}

.am-tab--active .am-tab__off {
  color: #fca5a5;
}

/* Fields */
.am-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.am-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.am-input,
.am-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: #1e293b;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.am-input:focus,
.am-textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.am-input:disabled,
.am-textarea:disabled {
  background: #f3f4f6;
  opacity: 0.6;
  cursor: not-allowed;
}

.am-textarea {
  resize: vertical;
  min-height: 56px;
  max-height: 120px;
}

/* Biometric area */
.am-biometric {
  text-align: center;
  padding: 12px 0;
}

.am-biometric__icon {
  font-size: 36px;
  margin-bottom: 8px;
  animation: amPulse 2s infinite ease-in-out;
}

@keyframes amPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.1); opacity: 0.7; }
}

.am-biometric p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

/* Messages */
.am-msg {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}

.am-msg--info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}

.am-msg--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

/* --- Footer --- */
.am-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.am-btn {
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.15s;
}

.am-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.am-btn--cancel {
  background: #e2e8f0;
  color: #475569;
}

.am-btn--cancel:hover:not(:disabled) {
  background: #cbd5e1;
}

.am-btn--ok {
  background: #3b82f6;
  color: #fff;
}

.am-btn--ok:hover:not(:disabled) {
  background: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* --- Responsive --- */
@media (max-width: 440px) {
  .am-modal {
    width: 100%;
  }

  .am-tabs {
    flex-direction: column;
    gap: 6px;
  }

  .am-footer {
    flex-direction: column;
    gap: 6px;
  }

  .am-btn {
    width: 100%;
  }
}

/* Estilos para el Modal de Mover Productos */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.mover-productos-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  width: 90vw;
  max-width: 800px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: auto;
  position: relative;
}

.mover-productos-modal .modal-header {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.mover-productos-modal .modal-header h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.mover-productos-modal .btn-cerrar-modal {
  background: transparent;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.mover-productos-modal .btn-cerrar-modal:hover {
  background: rgba(255, 255, 255, 0.2);
}

.mover-productos-modal .modal-body {
  padding: 0;
  flex: 1 1;
  overflow-y: auto;
  background: white;
}

/* Pasos del Modal */
.paso-seleccionar-productos,
.paso-seleccionar-mesa {
  padding: 24px;
  background: white;
}

.paso-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e5e7eb;
  background: white;
}

.paso-header h4 {
  color: #1f2937;
  margin: 0 0 8px 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.paso-header p {
  color: #6b7280;
  margin: 0;
  font-size: 0.95rem;
}

/* Controles de Selección */
.controles-seleccion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.checkbox-control {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
  color: #374151;
}

.checkbox-control input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.seleccion-info {
  display: flex;
  align-items: center;
}

.badge-seleccion {
  background: #3b82f6;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Lista de Productos */
.lista-productos {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
}

.producto-item {
  border-bottom: 1px solid #e5e7eb;
  background: white;
}

.producto-item:last-child {
  border-bottom: none;
}

.producto-checkbox {
  display: block;
  padding: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  background: white;
}

.producto-checkbox:hover {
  background: #f3f4f6;
}

.producto-checkbox input[type="checkbox"] {
  margin-right: 12px;
  width: 16px;
  height: 16px;
}

.producto-checkbox input[type="checkbox"]:checked + .producto-info {
  background: rgba(59, 130, 246, 0.05);
  border-left: 3px solid #3b82f6;
  padding-left: 13px;
}

.producto-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 16px;
  transition: all 0.2s;
}

.producto-nombre {
  font-weight: 600;
  color: #1f2937;
  font-size: 1rem;
}

.producto-detalles {
  display: flex;
  gap: 16px;
  font-size: 0.9rem;
  color: #6b7280;
}

.producto-detalles .cantidad,
.producto-detalles .precio {
  font-weight: 500;
}

.producto-detalles .subtotal {
  font-weight: 600;
  color: #059669;
}

.producto-instrucciones {
  font-size: 0.85rem;
  color: #7c3aed;
  background: #f3f4f6;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 4px;
}

/* Resumen de Productos Seleccionados */
.productos-seleccionados-resumen {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.productos-seleccionados-resumen h5 {
  margin: 0 0 10px 0;
  color: #92400e;
  font-weight: 600;
}

.productos-seleccionados-resumen ul {
  margin: 0;
  padding-left: 20px;
  color: #78350f;
}

.productos-seleccionados-resumen li {
  margin-bottom: 4px;
  font-size: 0.9rem;
}

/* Mesas Disponibles */
.mesas-disponibles {
  background: white;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.mesas-disponibles h5 {
  margin: 0 0 15px 0;
  color: #1f2937;
  font-weight: 600;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #6b7280;
  background: white;
}

.no-mesas {
  text-align: center;
  padding: 20px;
  color: #ef4444;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}

.lista-mesas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
  background: #fafafa;
  border-radius: 6px;
}

.mesa-option {
  display: block;
  cursor: pointer;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s;
  background: white;
}

.mesa-option:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.mesa-option input[type="radio"] {
  margin-right: 12px;
  width: 16px;
  height: 16px;
}

.mesa-option input[type="radio"]:checked + .mesa-info {
  color: #1d4ed8;
}

.mesa-option:has(input[type="radio"]:checked) {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.mesa-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mesa-nombre {
  font-weight: 600;
  font-size: 1rem;
  color: #1f2937;
}

.mesa-detalles {
  display: flex;
  gap: 12px;
  font-size: 0.85rem;
  color: #6b7280;
}

.mesa-pedido {
  font-weight: 500;
  color: #7c3aed;
}

.mesa-mesero {
  color: #059669;
}

/* Modal Footer */
.mover-productos-modal .modal-footer {
  padding: 20px 24px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.mover-productos-modal .modal-footer button {
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid;
  font-size: 0.9rem;
}

.btn-cancelar {
  background: white;
  color: #6b7280;
  border-color: #d1d5db;
}

.btn-cancelar:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.btn-atras {
  background: white;
  color: #7c3aed;
  border-color: #c4b5fd;
}

.btn-atras:hover {
  background: #f3f4f6;
  border-color: #a855f7;
}

.btn-continuar {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.btn-continuar:hover:not(:disabled) {
  background: #2563eb;
  border-color: #2563eb;
}

.btn-mover {
  background: #059669;
  color: white;
  border-color: #059669;
}

.btn-mover:hover:not(:disabled) {
  background: #047857;
  border-color: #047857;
}

.btn-continuar:disabled,
.btn-mover:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
  .mover-productos-modal {
    width: 95vw;
    max-height: 90vh;
  }
  
  .controles-seleccion {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .lista-mesas {
    grid-template-columns: 1fr;
  }
  
  .mover-productos-modal .modal-footer {
    flex-wrap: wrap;
  }
}
.producto-card {
  position: relative;
  background-color: #ffffff;
  border-radius: var(--radius-scale-md);
  padding-top: clamp(12px, 1.302vw, 25px);
  padding-left: var(--space-scale-4);
  padding-right: var(--space-scale-3);
  padding-bottom: var(--space-scale-3);
  margin-bottom: var(--space-scale-3);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
}

.producto-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.producto-card.con-promocion {
  border-left: 4px solid #FFEB3B;
}

.producto-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.producto-nombre {
  margin: 0 0 clamp(2px, 0.26vw, 5px) 0;
  font-size: var(--font-scale-base);
  font-weight: 500;
  width: 100%;
}

.producto-precio {
  font-size: var(--font-scale-lg);
  font-weight: 700;
  color: #333;
  width: 100%;
  text-align: left;
}

.ver-detalles-btn2 {
  background: none;
  border: none;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: var(--space-scale-3);
  padding-bottom: 0px;

}

.ver-detalles-btn {
  background: none;
  border: none;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: var(--space-scale-3);
  padding-bottom: 0px;

  position: absolute;
  bottom: 0px;
  right: 0px;






  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(12px, 1.146vw, 22px);
  height: clamp(12px, 1.146vw, 22px);
  border-radius: 50%;
  background-color: #51b4f1;
  color: #333;

  font-style: normal;
  font-size: var(--font-scale-sm);
  font-weight: bold;
}

/* Badge de promoción destacado para cualquier tipo de promoción */
.promocion-badge-destacado {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #FFEB3B;
  /* Amarillo */
  color: #333;

  padding: var(--space-scale-1) var(--space-scale-3);
  font-size: var(--font-scale-xs);
  font-weight: bold;
  border-radius: var(--radius-scale-sm);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  max-width: clamp(60px, 6.25vw, 120px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

/* Para tarjetas con colores de fondo intensos */
.producto-card.fondo-oscuro .promocion-badge-destacado {
  background-color: #FFF59D;
  /* Amarillo más claro */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Estilos para ingredientes */
.ingrediente-match {
  font-size: var(--font-scale-xs);
  color: #4CAF50;
  margin-top: var(--space-scale-1);
  padding: clamp(1px, 0.156vw, 3px) var(--space-scale-2);
  background-color: #E8F5E9;
  border-radius: var(--radius-scale-sm);
  display: inline-block;
}

.ingrediente-excluido {
  font-size: var(--font-scale-xs);
  color: #FF9800;
  margin-top: var(--space-scale-1);
  padding: clamp(1px, 0.156vw, 3px) var(--space-scale-2);
  background-color: #FFF3E0;
  border-radius: var(--radius-scale-sm);
  display: inline-block;
}

/* Estilos para productos encontrados por ingrediente */
.producto-card.resultado-ingrediente {
  border-left: 4px solid #4CAF50;
}

.producto-card.resultado-sin-ingrediente {
  border-left: 4px solid #FF9800;
}
/* TomaPedidos.css - Estilos modernos para el componente header universal */

/* ===== VARIABLES CSS ===== */
:root {
  --header-height: 72px;
  --action-bar-height: 80px;
  --content-padding: 1.5rem;
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --border-radius-lg: 16px;
  --transition-duration: 0.3s;
  --transition-fast: 0.15s;
  
  /* Sombras modernas */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);

  /* Colores modernos */
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-primary-light: #93c5fd;
  
  --color-success: #10b981;
  --color-success-dark: #059669;
  --color-success-light: #86efac;
  
  --color-info: #06b6d4;
  --color-info-dark: #0891b2;
  --color-info-light: #67e8f9;
  
  --color-warning: #f59e0b;
  --color-warning-dark: #d97706;
  --color-warning-light: #fcd34d;
  
  --color-danger: #ef4444;
  --color-danger-dark: #dc2626;
  --color-danger-light: #fca5a5;
  
  --color-secondary: #64748b;
  --color-secondary-dark: #475569;
  --color-secondary-light: #cbd5e1;

  /* Colores de superficie */
  --color-bg-primary: #f8fafc;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #f1f5f9;
  --color-bg-glass: rgba(255, 255, 255, 0.9);

  /* Colores de texto */
  --color-text-primary: #0f172a;
  --color-text-secondary: #64748b;
  --color-text-tertiary: #94a3b8;
  --color-text-light: #ffffff;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
}

/* ===== RESET Y BASE ===== */
.toma-pedidos-container * {
  box-sizing: border-box;
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.toma-pedidos-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-tertiary) 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
  overflow: hidden;
}

/* ===== HEADER MODERNO ===== */
.toma-pedidos-header-modern {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: 8px 2rem;
  padding: 8px var(--space-8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12),
              0 1px 3px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
  min-height: 36px;
  gap: 2rem;
  gap: var(--space-8);
}

.pedido-tipo-section {
  display: flex;
  align-items: center;
}

.tipo-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 0.5rem 1rem;
  padding: var(--space-2) var(--space-4);
  border-radius: 16px;
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tipo-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #3b82f6;
  background: var(--tipo-color, var(--color-primary));
  border-radius: 12px;
  border-radius: var(--border-radius);
  color: #ffffff;
  color: var(--color-text-light);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
}

.tipo-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--space-2);
}

.tipo-titulo-modern {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  color: var(--color-text-light);
  letter-spacing: -0.025em;
  line-height: 1.2;
}


.numero-pedido-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.25);
  padding: 0.25rem 0.75rem;
  padding: var(--space-1) var(--space-3);
  border-radius: 8px;
  border-radius: var(--border-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  color: var(--color-text-light);
  width: -webkit-fit-content;
  width: fit-content;
}

.estado-pendiente-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  gap: var(--space-1);
  background: linear-gradient(135deg, #f39c12, #e67e22);
  padding: 0.25rem 0.75rem;
  padding: var(--space-1) var(--space-3);
  border-radius: 8px;
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(243, 156, 18, 0.3);
  animation: pulse-warning 2s infinite;
  width: -webkit-fit-content;
  width: fit-content;
}

.estado-pendiente-badge-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #f39c12, #e67e22);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(243, 156, 18, 0.3);
  animation: pulse-warning 2s infinite;
  white-space: nowrap;
  margin-left: auto;
}

/* Estilos para la card de tipo de pedido */
.tipo-pedido-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(226, 232, 240, 0.6);
  order: -1;
  min-height: auto;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06),
              0 1px 3px rgba(15, 23, 42, 0.04);
}

.tipo-pedido-card:hover {
  border-color: rgba(102, 126, 234, 0.4);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1),
              0 2px 6px rgba(15, 23, 42, 0.06);
}

.tipo-pedido-card .info-card-value {
  font-size: 0.9rem;
}

.info-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.estado-pendiente-inline {
  font-size: 0.8rem;
  color: white;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  animation: pulse-warning 2s infinite;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.tipo-pedido-info-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.numero-pedido-small {
  font-size: 0.75rem;
  color: #64748b;
  color: var(--color-text-secondary);
  font-weight: 600;
  background: rgba(226, 232, 240, 0.5);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.estado-pendiente-small {
  font-size: 0.65rem;
  color: #f39c12;
  font-weight: 700;
  animation: pulse-warning 2s infinite;
}

/* Estilos para card de mesa clickable */
.mesa-card.clickable,
.mesero-card.clickable,
.personas-card.clickable {
  cursor: pointer;
  position: relative;
}

.mesa-card.clickable::after,
.mesero-card.clickable::after,
.personas-card.clickable::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  background: linear-gradient(90deg, transparent, var(--card-accent-color, var(--color-primary)), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mesa-card.clickable:hover::after,
.mesero-card.clickable:hover::after,
.personas-card.clickable:hover::after {
  opacity: 1;
}

.cambiar-mesa-hint {
  font-size: 0.6rem;
  color: #3b82f6;
  color: var(--card-accent-color, var(--color-primary));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0;
  transition: all 0.3s ease;
  margin-top: 4px;
  display: inline-block;
}

.mesa-card.clickable:hover .cambiar-mesa-hint,
.mesero-card.clickable:hover .cambiar-mesa-hint,
.personas-card.clickable:hover .cambiar-mesa-hint {
  opacity: 1;
  transform: translateX(2px);
}

@keyframes pulse-warning {
  0%, 100% {
    box-shadow: 0 2px 4px rgba(243, 156, 18, 0.3);
  }
  50% {
    box-shadow: 0 4px 8px rgba(243, 156, 18, 0.5);
    transform: translateY(-1px);
  }
}

/* Header Left - Fecha y Hora */
.header-left-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Header Right - Usuario */
.header-right-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Separador vertical entre fecha y hora */
.header-separator {
  width: 1px;
  height: 20px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* Items del sistema (fecha, hora) */
.system-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
}

.system-info-item:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.system-info-item svg {
  opacity: 0.85;
}

.time-display {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

/* Badge del usuario */
.user-info-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.15));
  padding: 6px 16px;
  border-radius: 20px;
  color: #ffffff;
  color: var(--color-text-light);
  font-weight: 700;
  font-size: 0.8rem;
  border: 1px solid rgba(59, 130, 246, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.user-info-badge:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.user-info-badge svg {
  opacity: 0.9;
}

/* ===== BARRA DE ACCIÓN MODERNA ===== */
.action-bar-modern {
  display: flex;
  align-items: center;
  gap: 2rem;
  gap: var(--space-8);
  padding: 1.5rem 2rem;
  padding: var(--space-6) var(--space-8);
  background: #ffffff;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm);
  min-height: 80px;
  min-height: var(--action-bar-height);
  position: relative;
  z-index: 50;
}

.pedido-info-cards {
  display: flex;
  gap: 10px;
  flex: 1 1;
  flex-wrap: wrap;
}

.info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.6);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-width: 140px;
  max-width: 200px;
  -webkit-user-select: none;
          user-select: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06),
              0 1px 3px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  background: linear-gradient(90deg, transparent, var(--card-accent-color, var(--color-primary)), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.info-card:hover::before {
  opacity: 1;
}

.info-card:hover {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12),
              0 4px 8px rgba(15, 23, 42, 0.08),
              0 0 0 1px rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

.info-card:active {
  transform: translateY(-2px) scale(1.01);
}

.info-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  color: #ffffff;
  color: var(--color-text-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
              0 2px 4px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card-icon svg {
  width: 18px;
  height: 18px;
}

.info-card:hover .info-card-icon {
  transform: rotate(5deg) scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2),
              0 4px 8px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.info-card-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.info-card:hover .info-card-icon::after {
  opacity: 1;
}

.info-card-icon.tipo-pedido {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.info-card-icon.mesa {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --card-accent-color: #3b82f6;
}

.info-card-icon.mesero {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --card-accent-color: #10b981;
}

.info-card-icon.personas {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --card-accent-color: #f59e0b;
}

.info-card-icon.cliente {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  --card-accent-color: #8b5cf6;
}

.info-card-icon.telefono {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  --card-accent-color: #06b6d4;
}

.info-card-icon.direccion {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --card-accent-color: #ef4444;
}

.info-card-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1;
  min-width: 0;
}

.info-card-label-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.info-card-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  transition: color 0.3s ease;
}

.info-card:hover .info-card-label {
  color: #475569;
}

.numero-pedido-inline {
  font-size: 0.7rem;
  color: #3b82f6;
  font-weight: 700;
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  line-height: 1;
}

.info-card-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: all 0.3s ease;
}

.info-card:hover .info-card-value {
  color: #3b82f6;
  color: var(--card-accent-color, var(--color-primary));
  transform: translateX(2px);
}

.info-card-telefono {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  color: var(--color-text-secondary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.info-card-edit {
  position: absolute;
  top: 0.75rem;
  top: var(--space-3);
  right: 0.75rem;
  right: var(--space-3);
  color: #94a3b8;
  color: var(--color-text-tertiary);
  opacity: 0;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  padding: 6px;
  border-radius: 12px;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.info-card:hover .info-card-edit {
  opacity: 1;
  transform: translateY(0);
  color: #3b82f6;
  color: var(--card-accent-color, var(--color-primary));
}

.info-card-edit:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: scale(1.1) rotate(5deg);
}


.total-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  gap: var(--space-1); /* Reducir gap */
  padding: 0.5rem 1rem;
  padding: var(--space-2) var(--space-4); /* Reducir padding */
  background: linear-gradient(135deg, #10b981, #059669);
  background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
  color: #ffffff;
  color: var(--color-text-light);
  border-radius: 8px;
  border-radius: var(--border-radius-sm); /* Bordes más pequeños */
  min-width: 100px; /* Reducir ancho mínimo */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm); /* Sombra más sutil */
  height: 60px; /* Altura fija compacta */
  justify-content: center;
}

.total-label {
  font-size: 0.65rem; /* Reducir tamaño */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
  line-height: 1;
}

.total-amount {
  font-size: 1rem; /* Reducir tamaño */
  font-weight: 700;
  font-family: 'SF Mono', 'Monaco', monospace;
  line-height: 1.1;
}

.action-bar-separator {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, #cbd5e1, transparent);
  background: linear-gradient(to bottom, transparent, var(--color-secondary-light), transparent);
}

.action-buttons-group {
  display: flex;
  gap: 0.75rem;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

/* ===== BOTONES DE ACCIÓN MODERNOS ===== */
.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
  padding: 0.75rem 1.25rem;
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: 12px;
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  transition: all var(--transition-duration) ease;
  min-width: 120px;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  -webkit-user-select: none;
          user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.action-btn:hover:not(:disabled)::before {
  left: 100%;
}

.action-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
}

.action-btn:active:not(:disabled) {
  transform: translateY(-1px);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  box-shadow: var(--shadow-sm) !important;
}

.action-btn:disabled::before {
  display: none;
}

/* Variantes de botones */
.action-btn.primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #ffffff;
  color: var(--color-text-light);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  background: linear-gradient(135deg, var(--color-primary-dark), #1d4ed8);
}

.action-btn.success {
  background: linear-gradient(135deg, #10b981, #059669);
  background: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
  color: #ffffff;
  color: var(--color-text-light);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-btn.success:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669, #047857);
  background: linear-gradient(135deg, var(--color-success-dark), #047857);
}

.action-btn.info {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
  color: #ffffff;
  color: var(--color-text-light);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-btn.info:hover:not(:disabled) {
  background: linear-gradient(135deg, #0891b2, #0e7490);
  background: linear-gradient(135deg, var(--color-info-dark), #0e7490);
}

.action-btn.warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  background: linear-gradient(135deg, var(--color-warning), var(--color-warning-dark));
  color: #0f172a;
  color: var(--color-text-primary);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.action-btn.warning:hover:not(:disabled) {
  background: linear-gradient(135deg, #d97706, #b45309);
  background: linear-gradient(135deg, var(--color-warning-dark), #b45309);
  color: #ffffff;
  color: var(--color-text-light);
}

.action-btn.danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  background: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark));
  color: #ffffff;
  color: var(--color-text-light);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-btn.danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  background: linear-gradient(135deg, var(--color-danger-dark), #b91c1c);
}

.action-btn.secondary {
  background: linear-gradient(135deg, #64748b, #475569);
  background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
  color: #ffffff;
  color: var(--color-text-light);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-btn.secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, #475569, #334155);
  background: linear-gradient(135deg, var(--color-secondary-dark), #334155);
}

.action-btn.double-icon {
  min-width: 180px;
  gap: 0.25rem;
  gap: var(--space-1);
}

.action-btn.double-icon svg:first-child {
  margin-right: 0.25rem;
  margin-right: var(--space-1);
}

/* ===== CONTENIDO PRINCIPAL ===== */
.contenido-principal {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  background: var(--color-bg-primary);
}

/* ===== OVERLAY DE CARGA MODERNO ===== */
.loading-overlay-modern {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  gap: var(--space-6);
  padding: 2rem 2.5rem;
  padding: var(--space-8) var(--space-10);
  background: #ffffff;
  background: var(--color-bg-secondary);
  border-radius: 16px;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.loading-spinner-modern {
  position: relative;
}

.spinner-circle {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(59, 130, 246, 0.1);
  border-left-color: #3b82f6;
  border-left-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  color: var(--color-text-primary);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Indicadores de actualización automática */
.system-info-item.updating {
  background: rgba(6, 182, 212, 0.15);
  color: #ffffff;
  color: var(--color-text-light);
  border-color: rgba(6, 182, 212, 0.3);
  animation: pulse-info 2s infinite;
  font-size: 0.75rem;
  padding: 4px 10px;
}

.system-info-item.last-update {
  background: rgba(16, 185, 129, 0.15);
  color: #ffffff;
  color: var(--color-text-light);
  border-color: rgba(16, 185, 129, 0.3);
  opacity: 0.9;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes pulse-info {
  0%, 100% {
    box-shadow: 0 2px 4px rgba(6, 182, 212, 0.2);
  }
  50% {
    box-shadow: 0 4px 8px rgba(6, 182, 212, 0.4);
    background: rgba(6, 182, 212, 0.2);
  }
}

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

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

.action-bar-modern {
  animation: fadeIn 0.5s ease-out;
}

.info-card {
  animation: cardEnter 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.info-card:nth-child(1) { animation-delay: 0s; }
.info-card:nth-child(2) { animation-delay: 0.05s; }
.info-card:nth-child(3) { animation-delay: 0.1s; }
.info-card:nth-child(4) { animation-delay: 0.15s; }
.info-card:nth-child(5) { animation-delay: 0.2s; }

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

.action-btn {
  animation: slideInFromLeft 0.5s ease-out;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
  .header-content {
    padding: 0 1rem;
    padding: 0 var(--space-4);
  }
  
  .action-bar-modern {
    gap: 1.5rem;
    gap: var(--space-6);
    padding: 1.25rem 1.5rem;
    padding: var(--space-5) var(--space-6);
  }
  
  .action-buttons-group {
    gap: 0.5rem;
    gap: var(--space-2);
  }
  
  .action-btn {
    min-width: 100px;
    padding: 0.75rem 1rem;
    padding: var(--space-3) var(--space-4);
  }
}

@media (max-width: 768px) {
  .toma-pedidos-header-modern {
    padding: 8px 1rem;
    padding: 8px var(--space-4);
  }

  .header-content {
    flex-direction: row;
    gap: 0.5rem;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .header-left-info {
    gap: 8px;
  }

  .header-right-info {
    gap: 8px;
  }

  .system-info-item {
    padding: 5px 10px;
    font-size: 0.75rem;
  }

  .user-info-badge {
    padding: 5px 12px;
    font-size: 0.75rem;
  }

  .tipo-titulo-modern {
    font-size: 1.5rem;
  }

  .action-bar-modern {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    gap: var(--space-4);
    padding: 1rem;
    padding: var(--space-4);
  }

  .pedido-info-cards {
    justify-content: center;
  }

  .action-buttons-group {
    justify-content: center;
    gap: 0.5rem;
    gap: var(--space-2);
  }

  .action-btn {
    flex: 1 1;
    min-width: auto;
  }

  .action-btn.double-icon {
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .toma-pedidos-header-modern {
    padding: 6px 0.75rem;
    padding: 6px var(--space-3);
  }

  .header-content {
    gap: 0.5rem;
    gap: var(--space-2);
  }

  .header-left-info {
    gap: 6px;
  }

  .header-right-info {
    gap: 6px;
  }

  .header-separator {
    display: none;
  }

  .system-info-item {
    padding: 4px 8px;
    font-size: 0.7rem;
  }

  .system-info-item svg {
    width: 14px;
    height: 14px;
  }

  .user-info-badge {
    padding: 4px 10px;
    font-size: 0.7rem;
    gap: 6px;
  }

  .user-info-badge svg {
    width: 14px;
    height: 14px;
  }

  .tipo-badge {
    padding: 0.75rem 1rem;
    padding: var(--space-3) var(--space-4);
  }

  .tipo-icon-wrapper {
    width: 40px;
    height: 40px;
  }

  .tipo-titulo-modern {
    font-size: 1.25rem;
  }
  
  .action-bar-modern {
    padding: 0.75rem;
    padding: var(--space-3);
  }
  
  .info-card {
    min-width: 120px;
    padding: 0.75rem 1rem;
    padding: var(--space-3) var(--space-4);
  }
  
  .info-card-icon {
    width: 32px;
    height: 32px;
  }
  
  .action-btn {
    padding: 0.75rem;
    padding: var(--space-3);
    font-size: 0.8rem;
    gap: 0.25rem;
    gap: var(--space-1);
  }
  
  .total-display {
    min-width: 90px; /* Más compacto en móvil */
    padding: 0.5rem 0.75rem;
    padding: var(--space-2) var(--space-3); /* Menos padding */
    height: 55px; /* Altura fija más pequeña */
  }
  
  .total-amount {
    font-size: 0.95rem; /* Más pequeño en móvil */
  }
}

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.action-btn:focus,
.info-card:focus {
  outline: 2px solid #3b82f6;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ===== MODO OSCURO ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-tertiary: #334155;
    --color-bg-glass: rgba(30, 41, 59, 0.9);
    --color-text-primary: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #94a3b8;
  }

  .info-card {
    background: #f1f5f9;
    background: var(--color-bg-tertiary);
    border-color: rgba(148, 163, 184, 0.2);
  }

  .info-card:hover {
    background: #ffffff;
    background: var(--color-bg-secondary);
    border-color: #93c5fd;
    border-color: var(--color-primary-light);
  }
}

/* ===== ALTO CONTRASTE ===== */
@media (prefers-contrast: high) {
  .action-btn {
    border-width: 2px;
  }
  
  .info-card {
    border-width: 2px;
  }
}
/* FormaPago.css - Enhanced visual design */

/* ===== CSS Variables ===== */
:root {
  --fp-efectivo: #10b981;
  --fp-tarjeta: #3b82f6;
  --fp-transferencia: #8b5cf6;
  --fp-cxc: #f59e0b;
  --fp-cupon: #ef4444;
  --fp-cortesia: #6b7280;
  --fp-success: #059669;
  --fp-danger: #dc2626;
  --fp-border: #e2e8f0;
  --fp-bg-card: #ffffff;
  --fp-text-primary: #1e293b;
  --fp-text-secondary: #64748b;
  --fp-text-muted: #94a3b8;
}

/* ===== Animations ===== */
@keyframes fp-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fp-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fp-scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes fp-bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fp-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes fp-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

@keyframes fp-progressStripe {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

@keyframes fp-warningPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ===== Hide number input spinners ===== */
.fp-overlay input[type=number]::-webkit-outer-spin-button,
.fp-overlay input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.fp-overlay input[type=number] {
  -moz-appearance: textfield;
}

/* ===== Overlay ===== */
.fp-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #f0f2f5 0%, #e8edf2 50%, #f0f2f5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 0;
}

/* ===== Container ===== */
.fp-container {
  background-color: #ffffff;
  border-radius: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  overflow: hidden;
  border: none;
}

/* ===== Header ===== */
.fp-header {
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 50%, #7c3aed 100%);
  color: white;
  padding: 16px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: none;
  box-shadow:
    0 4px 15px rgba(67, 56, 202, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
}

.fp-header__left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fp-header__icon {
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 12px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-header__title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.fp-header__subtitle {
  margin: 3px 0 0 0;
  opacity: 0.85;
  font-size: 13px;
  font-weight: 500;
}

.fp-header__method-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.fp-header__shortcuts {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 6px 10px;
}

.fp-header__shortcut-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 3px 7px;
  transition: background 0.2s;
}

.fp-header__shortcut-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

.fp-header__shortcut-key {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  padding: 1px 5px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.fp-header__close {
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.fp-header__close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
}

/* ===== Main Content ===== */
.fp-main {
  flex: 1 1;
  display: grid;
  grid-template-columns: 1fr 450px;
  grid-gap: 24px;
  gap: 24px;
  padding: 24px 28px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8f9fc 0%, #f0f2f5 100%);
}

/* ===== Left Column ===== */
.fp-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: auto;
  padding-right: 8px;
}

/* ===== Card (reusable) ===== */
.fp-card {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  padding: 24px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.3s ease;
}

.fp-card:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04);
}

.fp-card--right {
  padding: 20px;
}

.fp-card--flex {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ===== Section Header ===== */
.fp-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f1f5f9;
}

.fp-section-header__icon {
  background: linear-gradient(135deg, #10b981, #059669);
  background: linear-gradient(135deg, var(--fp-efectivo), #059669);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.fp-section-header__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  color: var(--fp-text-primary);
}

.fp-section-header__title--summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== Methods Grid ===== */
.fp-methods-label {
  display: block;
  margin-bottom: 10px;
  color: #374151;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.2px;
}

.fp-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 20px;
}

.fp-method-btn {
  background: #ffffff;
  color: #64748b;
  color: var(--fp-text-secondary);
  border: 2px solid #e2e8f0;
  border: 2px solid var(--fp-border);
  border-radius: 12px;
  padding: 14px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.fp-method-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.fp-method-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.fp-method-btn__icon {
  font-size: 24px;
  line-height: 1;
}

/* Method active states with glow */
.fp-method-btn--efectivo.fp-method-btn--active {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4), 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.fp-method-btn--efectivo:hover { border-color: #10b981; border-color: var(--fp-efectivo); }

.fp-method-btn--tarjeta.fp-method-btn--active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4), 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.fp-method-btn--tarjeta:hover { border-color: #3b82f6; border-color: var(--fp-tarjeta); }

.fp-method-btn--transferencia.fp-method-btn--active {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4), 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.fp-method-btn--transferencia:hover { border-color: #8b5cf6; border-color: var(--fp-transferencia); }

.fp-method-btn--cxc.fp-method-btn--active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4), 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.fp-method-btn--cxc:hover { border-color: #f59e0b; border-color: var(--fp-cxc); }

.fp-method-btn--cupon.fp-method-btn--active {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4), 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.fp-method-btn--cupon:hover { border-color: #ef4444; border-color: var(--fp-cupon); }

.fp-method-btn--cortesia.fp-method-btn--active {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4), 0 0 0 3px rgba(107, 114, 128, 0.15);
}
.fp-method-btn--cortesia:hover { border-color: #6b7280; border-color: var(--fp-cortesia); }

/* ===== Shortcut Badge ===== */
.fp-shortcut {
  position: absolute;
  top: 4px;
  right: 6px;
  background: rgba(0, 0, 0, 0.06);
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.fp-method-btn--active .fp-shortcut {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* ===== Amount Section ===== */
.fp-amount {
  margin-bottom: 20px;
}

.fp-amount__label {
  display: block;
  margin-bottom: 8px;
  color: #374151;
  font-weight: 700;
  font-size: 14px;
}

.fp-amount__row {
  display: flex;
  gap: 10px;
}

.fp-amount__input-wrap {
  position: relative;
  flex: 1 1;
}

.fp-amount__currency {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 700;
  color: #9ca3af;
  pointer-events: none;
}

.fp-amount__input {
  width: 100%;
  padding: 16px 16px 16px 42px;
  border: 2px solid #e2e8f0;
  border: 2px solid var(--fp-border);
  border-radius: 12px;
  font-size: 24px;
  font-weight: 700;
  outline: none;
  transition: all 0.25s ease;
  text-align: right;
  box-sizing: border-box;
  background: #ffffff;
  color: #1e293b;
  color: var(--fp-text-primary);
}

.fp-amount__input:focus {
  border-color: #3b82f6;
  border-color: var(--fp-tarjeta);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.fp-amount__input::placeholder {
  color: #d1d5db;
  font-weight: 500;
}

.fp-saldo-btn {
  padding: 16px 20px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.fp-saldo-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* ===== Quick Amount Buttons ===== */
.fp-quick-amounts {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.fp-quick-btn {
  flex: 1 1;
  padding: 10px 8px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  color: #64748b;
  color: var(--fp-text-secondary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fp-quick-btn:hover {
  background: #ecfdf5;
  border-color: #10b981;
  border-color: var(--fp-efectivo);
  color: #10b981;
  color: var(--fp-efectivo);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.fp-quick-btn:active {
  transform: translateY(0);
}

/* ===== Terminal Selection ===== */
.fp-terminal {
  margin-bottom: 16px;
}

.fp-terminal__label {
  display: block;
  margin-bottom: 8px;
  color: #374151;
  font-weight: 700;
  font-size: 14px;
}

.fp-terminal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}

.fp-terminal__btn {
  background: #ffffff;
  color: #64748b;
  color: var(--fp-text-secondary);
  border: 2px solid #e2e8f0;
  border: 2px solid var(--fp-border);
  border-radius: 12px;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.fp-terminal__btn:hover {
  background: #f8fafc;
  border-color: #3b82f6;
  border-color: var(--fp-tarjeta);
  transform: translateY(-1px);
}

.fp-terminal__btn--active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.fp-terminal__btn--active:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

/* ===== Method Fields (transferencia, cupon, cortesia) ===== */
.fp-method-fields {
  margin-bottom: 16px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid;
}

.fp-method-fields--transferencia {
  background: linear-gradient(135deg, #faf5ff, #f5f3ff);
  border-color: #d8b4fe;
}

.fp-method-fields--cupon {
  background: linear-gradient(135deg, #fef2f2, #fff1f2);
  border-color: #fecaca;
}

.fp-method-fields--cortesia {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border-color: #bbf7d0;
}

.fp-method-fields__title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 700;
}

.fp-method-fields__title--transferencia { color: #7c3aed; }
.fp-method-fields__title--cupon { color: #dc2626; color: var(--fp-danger); }
.fp-method-fields__title--cortesia { color: #16a34a; }

.fp-method-fields__auth-info {
  font-size: 12px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  line-height: 1.6;
}

.fp-method-fields__auth-info--transferencia {
  color: #6d28d9;
  background: rgba(139, 92, 246, 0.08);
}

.fp-method-fields__auth-info--cupon {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.08);
}

.fp-method-fields__auth-info--cortesia {
  color: #15803d;
  background: rgba(22, 163, 74, 0.08);
}

.fp-method-fields__grid {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.fp-method-fields__select,
.fp-method-fields__input {
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.fp-method-fields__select--transferencia,
.fp-method-fields__input--transferencia {
  border: 1px solid #d8b4fe;
  background: #ffffff;
}

.fp-method-fields__select--transferencia:focus,
.fp-method-fields__input--transferencia:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.fp-method-fields__input--cupon {
  width: 100%;
  border: 1px solid #fecaca;
  box-sizing: border-box;
  background: #ffffff;
}

.fp-method-fields__input--cupon:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ===== Add Payment Button ===== */
.fp-add-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.fp-add-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}

.fp-add-btn:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.fp-add-btn:disabled:hover {
  background: #e5e7eb;
  transform: none;
  box-shadow: none;
}

/* ===== Right Column ===== */
.fp-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===== Summary ===== */
.fp-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fp-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
  transition: all 0.2s ease;
}

.fp-summary__row-label {
  color: #64748b;
  color: var(--fp-text-secondary);
  font-weight: 600;
}

.fp-summary__row-value {
  font-weight: 700;
  color: #1e293b;
  color: var(--fp-text-primary);
}

/* Descuento */
.fp-summary__row--descuento {
  font-size: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fef2f2, #fff1f2);
  border-radius: 12px;
  border: 2px solid #fecaca;
}

.fp-summary__row--descuento .fp-summary__row-label,
.fp-summary__row--descuento .fp-summary__row-value {
  color: #dc2626;
  color: var(--fp-danger);
  font-weight: 700;
}

/* Divider */
.fp-summary__divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
  margin: 6px 0;
}

/* Total/Pagado grid */
.fp-summary__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.fp-summary__row--total {
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  border: 2px solid #3b82f6;
  border: 2px solid var(--fp-tarjeta);
  font-size: 18px;
  padding: 14px;
}

.fp-summary__row--total .fp-summary__row-label,
.fp-summary__row--total .fp-summary__row-value {
  color: #1e40af;
  font-weight: 800;
}

.fp-summary__row--total .fp-summary__row-value {
  font-size: 20px;
}

.fp-summary__row--pagado {
  border: 2px solid #e2e8f0;
  border: 2px solid var(--fp-border);
}

.fp-summary__row--pagado-active {
  background: linear-gradient(135deg, #dcfce7, #d1fae5);
  border-color: #16a34a;
}

.fp-summary__row--pagado-active .fp-summary__row-label,
.fp-summary__row--pagado-active .fp-summary__row-value {
  color: #16a34a;
}

/* Saldo */
.fp-summary__row--saldo-pending {
  background: linear-gradient(135deg, #fef3c7, #fef9c3);
  border: 2px solid #f59e0b;
  border: 2px solid var(--fp-cxc);
}

.fp-summary__row--saldo-pending .fp-summary__row-label,
.fp-summary__row--saldo-pending .fp-summary__row-value {
  color: #d97706;
  font-weight: 700;
}

.fp-summary__row--saldo-pending .fp-summary__row-value {
  font-size: 18px;
}

.fp-summary__row--saldo-ok {
  background: linear-gradient(135deg, #dcfce7, #d1fae5);
  border: 2px solid #16a34a;
}

.fp-summary__row--saldo-ok .fp-summary__row-label,
.fp-summary__row--saldo-ok .fp-summary__row-value {
  color: #16a34a;
}

/* Cambio */
.fp-summary__row--cambio {
  font-weight: 600;
  color: #059669;
  color: var(--fp-success);
  padding: 14px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-radius: 12px;
  border: 2px solid #059669;
  border: 2px solid var(--fp-success);
  margin-top: 4px;
}

.fp-summary__row--cambio .fp-summary__row-label,
.fp-summary__row--cambio .fp-summary__row-value {
  color: #059669;
  color: var(--fp-success);
  font-weight: 700;
}

/* ===== Progress Bar ===== */
.fp-progress {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.fp-progress__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  color: var(--fp-text-secondary);
}

.fp-progress__bar {
  height: 10px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.fp-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  border-radius: 10px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-width: 0;
}

.fp-progress__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  background-size: 40px 100%;
  animation: fp-progressStripe 1s linear infinite;
}

/* ===== Payments List ===== */
.fp-payments__title {
  margin: 0 0 14px 0;
  color: #1e293b;
  color: var(--fp-text-primary);
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fp-payments__scroll {
  flex: 1 1;
  overflow: auto;
  padding-right: 4px;
}

.fp-payments__empty {
  text-align: center;
  padding: 36px 20px;
  color: #94a3b8;
  color: var(--fp-text-muted);
  font-size: 14px;
}

.fp-payments__empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
  animation: fp-float 3s ease-in-out infinite;
}

.fp-payments__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fp-payment-item {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  border-left: 4px solid transparent;
}

.fp-payment-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Border left colors per method */
.fp-payment-item--efectivo { border-left-color: #10b981; border-left-color: var(--fp-efectivo); }
.fp-payment-item--tarjeta { border-left-color: #3b82f6; border-left-color: var(--fp-tarjeta); }
.fp-payment-item--transferencia { border-left-color: #8b5cf6; border-left-color: var(--fp-transferencia); }
.fp-payment-item--cxc { border-left-color: #f59e0b; border-left-color: var(--fp-cxc); }
.fp-payment-item--cupon { border-left-color: #ef4444; border-left-color: var(--fp-cupon); }
.fp-payment-item--cortesia { border-left-color: #6b7280; border-left-color: var(--fp-cortesia); }

.fp-payment-item__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1;
}

.fp-payment-item__icon {
  font-size: 18px;
  line-height: 1;
}

.fp-payment-item__badge {
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  min-width: 60px;
  text-align: center;
  letter-spacing: 0.3px;
}

.fp-payment-item__badge--efectivo { background: linear-gradient(135deg, #10b981, #059669); }
.fp-payment-item__badge--tarjeta { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.fp-payment-item__badge--transferencia { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.fp-payment-item__badge--cxc { background: linear-gradient(135deg, #f59e0b, #d97706); }
.fp-payment-item__badge--cupon { background: linear-gradient(135deg, #ef4444, #dc2626); }
.fp-payment-item__badge--cortesia { background: linear-gradient(135deg, #6b7280, #4b5563); }

.fp-payment-item__detail {
  font-size: 11px;
  color: #64748b;
  color: var(--fp-text-secondary);
}

.fp-payment-item__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fp-payment-item__amount {
  font-size: 16px;
  font-weight: 800;
  color: #059669;
  color: var(--fp-success);
}

.fp-payment-item__delete {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  color: var(--fp-danger);
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.fp-payment-item__delete:hover {
  background: #fecaca;
  transform: scale(1.1);
}

/* ===== Footer ===== */
.fp-footer {
  border-top: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff, #f9fafb);
  padding: 16px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.04);
}

.fp-footer__warning {
  flex: 1 1;
  color: #dc2626;
  color: var(--fp-danger);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: fp-warningPulse 2s ease-in-out infinite;
}

.fp-footer__actions {
  display: flex;
  gap: 12px;
}

.fp-btn-cancel {
  padding: 12px 24px;
  background: #ffffff;
  color: #6b7280;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fp-btn-cancel:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.fp-btn-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fp-btn-drawer {
  padding: 12px 20px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
}

.fp-btn-drawer:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

.fp-btn-drawer:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.fp-btn-drawer .fp-btn-shortcut {
  background: rgba(255, 255, 255, 0.25);
}

.fp-btn-finalize {
  padding: 14px 36px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
  letter-spacing: -0.2px;
}

.fp-btn-finalize:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.fp-btn-finalize:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.fp-btn-finalize:disabled:hover {
  background: #e5e7eb;
  transform: none;
  box-shadow: none;
}

.fp-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid white;
  border-top: 2.5px solid transparent;
  border-radius: 50%;
  animation: fp-spin 0.8s linear infinite;
}

/* ===== Shortcut badge in buttons ===== */
.fp-btn-shortcut {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-left: 4px;
}

.fp-btn-cancel .fp-btn-shortcut {
  background: rgba(0, 0, 0, 0.06);
  color: #9ca3af;
}

/* ===== Change Modal ===== */
.fp-cambio-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;
  animation: fp-fadeIn 0.3s ease-out;
}

.fp-cambio-modal {
  background-color: white;
  border-radius: 24px;
  padding: 40px;
  min-width: 500px;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: fp-scaleIn 0.3s ease-out;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.fp-cambio-modal__deco-top {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 50%;
  opacity: 0.1;
}

.fp-cambio-modal__deco-bottom {
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 50%;
  opacity: 0.1;
}

.fp-cambio-modal__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fp-bounceIn 0.5s ease-out;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.fp-cambio-modal__check {
  font-size: 40px;
  color: white;
}

.fp-cambio-modal__title {
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 800;
  color: #1e293b;
  color: var(--fp-text-primary);
  letter-spacing: -0.5px;
}

.fp-cambio-modal__desc {
  margin: 0 0 30px 0;
  font-size: 16px;
  color: #64748b;
  color: var(--fp-text-secondary);
}

.fp-cambio-modal__info {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border: 2px solid #bbf7d0;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}

.fp-cambio-modal__info-label {
  font-size: 18px;
  color: #64748b;
  color: var(--fp-text-secondary);
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: 1px;
}

.fp-cambio-modal__info-amount {
  font-size: 56px;
  font-weight: 800;
  color: #10b981;
  color: var(--fp-efectivo);
  letter-spacing: -1px;
  margin-bottom: 15px;
  animation: fp-pulse 1.5s ease-in-out infinite;
}

.fp-cambio-modal__details {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid #bbf7d0;
  font-size: 14px;
  color: #64748b;
  color: var(--fp-text-secondary);
}

.fp-cambio-modal__detail-label {
  margin-bottom: 5px;
}

.fp-cambio-modal__detail-value {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  color: var(--fp-text-primary);
}

.fp-cambio-modal__btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.fp-cambio-modal__btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4);
}

.fp-cambio-modal__hint {
  margin-top: 15px;
  font-size: 12px;
  color: #94a3b8;
  color: var(--fp-text-muted);
  font-style: italic;
}

/* src/components/common/ConfirmationModal.css */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.confirmation-modal {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 400px;
  max-width: 90%;
  overflow: hidden;
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #333;

}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #757575;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.close-btn:hover {
  background-color: #f5f5f5;
  color: #333;

}

.modal-body {
  padding: 20px;
}

.modal-body p {
  margin: 0;
  line-height: 1.5;
  color: #555;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-confirm {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.btn-confirm:hover {
  background-color: #e53935;
}

.btn-cancel {
  background-color: #e0e0e0;
  color: #333;

  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.btn-cancel:hover {
  background-color: #bdbdbd;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cambio-mesa-modal {
  background: white;
  border-radius: 6px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 70%;
  height: 90vh;

  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header optimizado - reducción de altura */
.modal-header {
  background-color: #2196F3;
  color: white;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
}

.close-button {
  background: transparent;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.close-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Nuevo estilo compacto para la información de mesas */
.info-mesas-compact {
  background-color: #f5f5f5;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.mesa-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.mesa-origen,
.mesa-destino {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: white;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.mesa-origen {
  border-left: 3px solid #2196F3;
}

.mesa-destino {
  border-left: 3px solid #4CAF50;
}

.mesa-separator {
  font-size: 1.2rem;
  color: #757575;
}

.info-label {
  font-size: 0.8rem;
  color: #666;
  font-weight: 500;
}

.info-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;

}

.modal-body {
  flex: 1 1;
  overflow: hidden;
  padding: 0;
}

.mapa-mesas-container {
  height: 100%;
  overflow: hidden;
}

.mapa-wrapper {
  height: 100%;
  position: relative;
}

/* Leyenda de mesas optimizada */
.leyenda-mesas {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: white;
  border-radius: 4px;
  padding: 4px 8px;
  display: flex;
  gap: 10px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

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

.leyenda-color {
  width: 14px;
  height: 14px;
  border-radius: 2px;
}

.leyenda-color.disponible {
  background-color: #4CAF50;
}

.spinner {
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 3px solid #2196F3;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
  margin-bottom: 0.5rem;
}

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

  100% {
    transform: rotate(360deg);
  }
}

.loading-mesas,
.no-mesas-message,
.error-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
}

.modal-footer {
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  background-color: #f5f5f5;
  border-top: 1px solid #e0e0e0;
}

.cambiar-button,
.cancelar-button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.cambiar-button {
  background-color: #4CAF50;
  color: white;
}

.cambiar-button:hover:not(:disabled) {
  background-color: #388E3C;
}

.cambiar-button:disabled {
  background-color: #A5D6A7;
  cursor: not-allowed;
}

.cancelar-button {
  background-color: #F5F5F5;
  color: #333;

  border: 1px solid #e0e0e0;
}

.cancelar-button:hover {
  background-color: #E0E0E0;
}

/* Personalización de MapaMesas para este modal */
.mapa-wrapper .mesa-map-container {
  height: 100%;
  padding-top: 0;
}

/* Destacar visualmente la mesa seleccionada */
.mapa-wrapper .mesa-item.selected,
.mapa-wrapper .mesa-item:active {
  border: 2px solid #FF9800;
  box-shadow: 0 0 8px rgba(255, 152, 0, 0.5);
}

/* Esconder elementos que no necesitamos del componente MapaMesas */
.mapa-wrapper .mesa-legend {
  display: none;
  /* Ya tenemos nuestra propia leyenda más compacta */
}
/* Estilos base para el componente de gestión de pedidos */
.gestion-pedido-base {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
}

/* Contenedor del error global */
.error-mensaje-global {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #ef4444;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .gestion-pedido-base {
    /* Ajustes para dispositivos móviles */
  }
  
  .error-mensaje-global {
    top: 10px;
    right: 10px;
    left: 10px;
    text-align: center;
  }
}
/* Modal específico para impresoras */
.modal-impresoras-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  /* Más alto que otros modales */
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.modal-impresoras-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  width: 90vw;
  max-width: 1200px;
  height: 85vh;
  max-height: 800px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-impresoras-container .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 2px solid #e9ecef;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  flex-shrink: 0;
}

.modal-impresoras-container .modal-header h2 {
  margin: 0;
  color: #212529;
  font-size: 1.4rem;
  font-weight: 600;
}

.modal-impresoras-container .close-button {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #6c757d;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.modal-impresoras-container .close-button:hover {
  background-color: #dc3545;
  color: white;
  transform: rotate(90deg);
}

.modal-impresoras-body {
  flex: 1 1;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Estilos para que ImpresionMonitor se adapte al modal */
.modal-impresoras-body>* {
  flex: 1 1;
  overflow: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .modal-impresoras-container {
    width: 95vw;
    height: 90vh;
    margin: 2.5vh auto;
  }

  .modal-impresoras-container .modal-header {
    padding: 1rem 1.5rem;
  }

  .modal-impresoras-container .modal-header h2 {
    font-size: 1.2rem;
  }
}
/* DialogoAlertaImpresoras.css */
.dialogo-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialogo-alerta {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 700px;
  /* Aumentado de 500px a 700px */
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: auto;
}

.dialogo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  /* Aumentado el padding horizontal */
  border-bottom: 1px solid #e9ecef;
}

.dialogo-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #dc3545;
}

.btn-cerrar {
  background: none;
  border: none;
  font-size: 20px;
  color: #6c757d;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  transition: color 0.2s;
}

.btn-cerrar:hover {
  color: #343a40;
}

.dialogo-body {
  padding: 24px;
  /* Aumentado de 20px a 24px */
  display: flex;
  align-items: flex-start;
}

.icono-alerta,
.icono-error {
  font-size: 36px;
  /* Aumentado de 30px a 36px */
  margin-right: 20px;
  /* Aumentado de 16px a 20px */
  flex-shrink: 0;
}

.alerta-contenido {
  flex: 1 1;
  min-width: 0;
  /* Asegura que el contenido se ajuste al espacio disponible */
}

.alerta-mensaje {
  margin: 0 0 12px 0;
  font-weight: 600;
  font-size: 17px;
  /* Aumentado de 16px a 17px */
}

.alerta-descripcion {
  margin: 0 0 16px 0;
  color: #6c757d;
  font-size: 15px;
  /* Aumentado de 14px a 15px */
}

.impresoras-error {
  margin-bottom: 16px;
  background-color: #f8f9fa;
  padding: 16px;
  /* Aumentado de 12px a 16px */
  border-radius: 4px;
  max-height: 250px;
  /* Altura máxima con scroll */
  overflow-y: auto;
}

.impresoras-error h3 {
  margin: 0 0 10px 0;
  /* Aumentado de 8px a 10px */
  font-size: 15px;
  /* Aumentado de 14px a 15px */
  color: #495057;
}

.impresoras-error ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* Formato de dos columnas */
  grid-gap: 8px;
}

.impresoras-error li {
  margin-bottom: 6px;
  /* Aumentado de 4px a 6px */
  display: flex;
  flex-direction: column;
  /* Cambiado a columna para mejor legibilidad */
}

.nombre-impresora {
  font-weight: 500;
  color: #212529;
  margin-bottom: 2px;
}

.error-impresora {
  color: #dc3545;
  font-size: 13px;
}

.alerta-advertencia {
  margin-top: 20px;
  /* Aumentado de 16px a 20px */
  padding: 12px;
  /* Aumentado de 10px a 12px */
  background-color: #fff3cd;
  border-radius: 4px;
  font-size: 14px;
  color: #856404;
}

.dialogo-footer {
  display: flex;
  justify-content: flex-end;
  padding: 18px 20px;
  /* Aumentado de 16px a 18px/20px */
  border-top: 1px solid #e9ecef;
  gap: 10px;
  /* Aumentado de 8px a 10px */
}

.btn-secundario,
.btn-principal,
.btn-revisar {
  padding: 10px 18px;
  /* Aumentado de 8px/16px a 10px/18px */
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s;
  white-space: nowrap;
  /* Evita que los botones se partan en múltiples líneas */
}

.btn-secundario {
  background-color: #e9ecef;
  color: #495057;
}

.btn-secundario:hover {
  background-color: #dee2e6;
}

.btn-revisar {
  background-color: #17a2b8;
  color: white;
}

.btn-revisar:hover {
  background-color: #138496;
}

.btn-principal {
  background-color: #28a745;
  color: white;
}

.btn-principal:hover {
  background-color: #218838;
}

.btn-principal.btn-advertencia {
  background-color: #dc3545;
}

.btn-principal.btn-advertencia:hover {
  background-color: #c82333;
}

/* Media queries para dispositivos pequeños */
@media (max-width: 768px) {
  .dialogo-alerta {
    width: 95%;
    max-width: none;
    max-height: 80vh;
  }

  .impresoras-error ul {
    grid-template-columns: 1fr;
    /* Una sola columna en pantallas pequeñas */
  }

  .dialogo-footer {
    flex-wrap: wrap;
    justify-content: center;
  }

  .btn-secundario,
  .btn-principal,
  .btn-revisar {
    flex: 1 0 auto;
    margin-bottom: 8px;
    text-align: center;
  }
}
/* BotonSemaforoImpresoras.css */
.semaforo-container {
  display: inline-block;
  margin-right: 10px;
}

.boton-semaforo {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background-color: #f8f9fa;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  height: 40px;
  min-width: 120px;
}

.boton-semaforo:hover {
  background-color: #e9ecef;
}

.boton-semaforo:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(30, 144, 255, 0.25);
}

.boton-semaforo:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.boton-semaforo.estado-correcto {
  border-color: #28a745;
  background-color: #f0fff4;
}

.boton-semaforo.estado-error {
  border-color: #dc3545;
  background-color: #fff5f5;
}

.boton-semaforo.estado-cargando {
  border-color: #ffc107;
  background-color: #fffbeb;
}

.icono-principal {
  position: relative;
  margin-right: 8px;
}

.icono-impresora {
  font-size: 18px;
}

.indicador {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.indicador.correcto {
  background-color: #28a745;
  box-shadow: 0 0 4px #28a745;
}

.indicador.error {
  background-color: #dc3545;
  box-shadow: 0 0 4px #dc3545;
}

.indicador.cargando {
  background-color: #ffc107;
  box-shadow: 0 0 4px #ffc107;
  animation: parpadeo 1s infinite;
}

.indicador.desconocido {
  background-color: #6c757d;
  box-shadow: 0 0 4px #6c757d;
}

.texto-principal {
  font-weight: 500;
  margin-right: 8px;
}

.mini-indicadores {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.mini-indicador {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: 3px;
}

.mini-indicador.disponible {
  background-color: #28a745;
}

.mini-indicador.error {
  background-color: #dc3545;
}

.mini-indicador.mas {
  width: auto;
  height: auto;
  font-size: 10px;
  color: #6c757d;
  background: none;
}

@keyframes parpadeo {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* Estilos adicionales para el modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.mesero-modal-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* ImpresionMonitor.css */
.impresion-monitor {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 100%;

  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e9ecef;
}

.monitor-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #343a40;
}

.monitor-acciones {
  display: flex;
  gap: 10px;
}

.btn-verificar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-verificar:hover {
  background-color: #0069d9;
}

.btn-verificar:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.btn-cerrar {
  background: none;
  border: none;
  font-size: 20px;
  color: #6c757d;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  transition: color 0.2s;
}

.btn-cerrar:hover {
  color: #343a40;
}

.monitor-info {
  padding: 16px;
  border-bottom: 1px solid #e9ecef;
}

.estado-general {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.indicador-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 24px;
  margin-right: 16px;
  color: white;
}

.indicador-grande.estado-ok {
  background-color: #28a745;
}

.indicador-grande.estado-error {
  background-color: #dc3545;
}

.estado-texto {
  flex: 1 1;
}

.estado-principal {
  margin: 0 0 4px 0;
  font-weight: 500;
  font-size: 16px;
}

.estado-secundario {
  margin: 0;
  font-size: 14px;
  color: #6c757d;
}

.error-banner {
  padding: 12px;
  background-color: #f8d7da;
  color: #721c24;
  border-radius: 4px;
  margin-top: 16px;
  font-size: 14px;
}

.impresoras-tabla-container {
  flex: 1 1;
  overflow-y: auto;
  padding: 0 16px;
  margin: 16px 0;
}

.impresoras-tabla {
  width: 100%;
  border-collapse: collapse;
}

.impresoras-tabla th {
  text-align: left;
  padding: 10px;
  border-bottom: 2px solid #e9ecef;
  font-weight: 600;
  font-size: 14px;
  color: #495057;
}

.impresoras-tabla td {
  padding: 10px;
  border-bottom: 1px solid #e9ecef;
  font-size: 14px;
}

.nombre-celda {
  font-weight: 500;
  position: relative;
}

.badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
  font-weight: normal;
}

.badge.predeterminada {
  background-color: #007bff;
  color: white;
}

.badge.necesaria {
  background-color: #fd7e14;
  color: white;
}

.estado-celda {
  white-space: nowrap;
}

.estado-indicador {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.estado-indicador.verde {
  background-color: #28a745;
}

.estado-indicador.rojo {
  background-color: #dc3545;
}

.mensaje-celda {
  color: #6c757d;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Filas especiales */
.impresora-predeterminada {
  background-color: #e9f5fe;
}

.impresora-necesaria {
  font-weight: 500;
}

.impresora-error {
  background-color: #fff5f5;
}

/* Celdas para estados de carga */
.loading-cell {
  text-align: center;
  padding: 30px !important;
  color: #6c757d;
}

.empty-cell {
  text-align: center;
  padding: 30px !important;
  color: #6c757d;
  font-style: italic;
}

.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0, 123, 255, 0.3);
  border-radius: 50%;
  border-top-color: #007bff;
  animation: spin 1s ease-in-out infinite;
  margin-right: 10px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.monitor-footer {
  padding: 16px;
  border-top: 1px solid #e9ecef;
  font-size: 13px;
  color: #6c757d;
  text-align: center;
}
/* Pedidouber.css */

.pedido-uber-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: #f8f9fa;
}

.header-pedido-uber {

  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  background-color: #4caf50;
}

.header-titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;

}

.header-titulo h1 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;

}

.usuario-info {
  font-size: 0.9rem;
  color: #333;

}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  flex-wrap: wrap;
}

.header-info-container {
  display: flex;
  gap: 20px;
}

.header-info-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 0.8rem;
  color: #777;
}

.info-value {
  font-size: 1rem;
  font-weight: 500;
  color: #333;

}

.cuenta-number {
  font-weight: 700;
  color: #2196F3;
}

.header-details-container {
  display: flex;
  gap: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  background-color: #f5f5f5;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
}

.detail-icon {
  font-size: 1.2rem;
}

.detail-info {
  display: flex;
  flex-direction: column;
}

.detail-label {
  font-size: 0.8rem;
  color: #777;
}

.detail-value {
  font-size: 1rem;
  font-weight: 500;
  color: #333;

}

.cliente-detail {
  background-color: #e3f2fd;
  border-color: #bbdefb;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  border-radius: 4px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.button-icon {
  font-size: 1.1rem;
}

.finalizar-button {
  background-color: #4caf50;
  color: white;
}

.finalizar-button:hover {
  background-color: #388e3c;
}

.imprimir-button {
  background-color: #2196F3;
  color: white;
}

.imprimir-button:hover {
  background-color: #4caf50;
}

.imprimir-button:disabled {
  background-color: #b0bec5;
  cursor: not-allowed;
}

.limpiar-button {
  background-color: #f44336;
  color: white;
}

.limpiar-button:hover {
  background-color: #d32f2f;
}

.regresar-button {
  background-color: #757575;
  color: white;
}

.regresar-button:hover {
  background-color: #616161;
}

.regresar-button:disabled {
  background-color: #bdbdbd;
  cursor: wait;
}

.pedido-uber-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Modal de nombre del cliente */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal-header {
  background-color: #2196F3;
  color: white;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #b02929;
}

.close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #757575;
}

.close-button:hover {
  color: #f44336;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;

}

.nombre-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.nombre-input:focus {
  border-color: #2196F3;
  outline: none;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.modal-footer {
  padding: 15px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background-color: #f8f9fa;
  border-top: 1px solid #e0e0e0;
}

.accept-button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
}

.accept-button:hover {
  background-color: #388e3c;
}

.cancel-button {
  background-color: #f5f5f5;
  color: #333;

  border: 1px solid #ddd;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
}

.cancel-button:hover {
  background-color: #e0e0e0;
}

/* Estilos para loading y error */
.cargando-pedido {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(33, 150, 243, 0.3);
  border-top: 4px solid #2196F3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

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

  100% {
    transform: rotate(360deg);
  }
}

.error-mensaje {
  text-align: center;
  padding: 40px 20px;
  background-color: #ffebee;
  border-radius: 8px;
  max-width: 600px;
  margin: 40px auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.error-mensaje p {
  color: #d32f2f;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.error-mensaje button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.error-mensaje button:hover {
  background-color: #d32f2f;
}

/* Overlay de carga */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.loading-spinner {
  background-color: white;
  padding: 20px 30px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.loading {
  margin-top: 15px;
  font-weight: 500;
  color: #333;

}

/* Responsividad */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .header-info-container {
    width: 100%;
    justify-content: space-between;
  }

  .header-details-container {
    width: 100%;
    justify-content: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .action-button {
    padding: 8px 12px;
  }

  .button-text {
    display: none;
  }

  .button-icon {
    font-size: 1.3rem;
  }
}


/* ===== ESTILOS PARA PEDIDOS A DOMICILIO ===== */

/* Modal de b�squeda por tel�fono */
.modal-busqueda-telefono {
  max-width: 450px;
  width: 90%;
}

.busqueda-info {
  text-align: center;
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #007bff;
}

.busqueda-info h3 {
  color: #007bff;
  margin-bottom: 8px;
  font-size: 18px;
}

.busqueda-info p {
  color: #666;
  margin: 0;
  font-size: 14px;
}

.telefono-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease;
  text-align: center;
  letter-spacing: 1px;
}

.telefono-input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.search-button {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-button:hover:not(:disabled) {
  background: #0056b3;
  transform: translateY(-1px);
}

.search-button:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
}

.spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Modal de cliente domicilio */
.modal-cliente-domicilio {
  max-width: 500px;
  width: 95%;
}

.nuevo-cliente-info {
  text-align: center;
  margin-bottom: 20px;
  padding: 15px;
  background: #fff3cd;
  border-radius: 8px;
  border-left: 4px solid #ffc107;
}

.nuevo-cliente-info h3 {
  color: #856404;
  margin-bottom: 8px;
  font-size: 18px;
}

.nuevo-cliente-info p {
  color: #856404;
  margin: 0;
  font-size: 14px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.cliente-input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
}

.cliente-input:focus {
  border-color: #28a745;
  outline: none;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.cliente-preview {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.cliente-preview strong {
  display: block;
  margin-bottom: 8px;
  color: #495057;
  font-size: 14px;
}

.cliente-preview span {
  display: block;
  padding: 8px 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  font-weight: 500;
  color: #28a745;
  min-height: 20px;
}

.info-adicional {
  margin-top: 8px;
  padding: 6px 12px;
  background: #e9ecef;
  border-radius: 4px;
  font-size: 13px;
  color: #6c757d;
}

/* Botones del modal */
.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.accept-button {
  background: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.accept-button:hover:not(:disabled) {
  background: #1e7e34;
  transform: translateY(-1px);
}

.accept-button:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
}

.cancel-button {
  background: #6c757d;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-button:hover:not(:disabled) {
  background: #5a6268;
  transform: translateY(-1px);
}

/* Spinner de carga */
.toma-pedidos-cargando {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f8f9fa;
}

.toma-pedidos-cargando .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

.toma-pedidos-cargando p {
  color: #6c757d;
  font-size: 16px;
  margin: 0;
}

/* Overlay del modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.modal-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
  border-radius: 12px 12px 0 0;
}

.modal-header h2 {
  margin: 0;
  color: #333;
  font-size: 20px;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-button:hover {
  background: #e9ecef;
  color: #495057;
}

.modal-body {
  padding: 20px;
}

/* Responsivo */
@media (max-width: 768px) {
  .modal-container {
    margin: 10px;
    max-width: none;
    width: auto;
  }
  
  .modal-footer {
    flex-direction: column;
  }
  
  .accept-button,
  .cancel-button,
  .search-button {
    width: 100%;
    justify-content: center;
  }
}
/* ===== REPORTES GENERALES ===== */

/* Layout */
.rg-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.rg-body {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  gap: 12px;
  overflow: hidden;
}

/* ===== FILTROS ===== */
.rg-filtros {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

/* Fila 1: modo + selector + buscar */
.rg-filtros__row1 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rg-filtros__modo {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.rg-radio {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: #64748b;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  transition: all 0.15s;
  white-space: nowrap;
}

.rg-radio:hover {
  background: #f1f5f9;
}

.rg-radio--active {
  background: #e0f2fe;
  border-color: #03A9F4;
  color: #0277BD;
  font-weight: 600;
}

.rg-radio input[type="radio"] {
  display: none;
}

.rg-filtros__selector {
  flex: 1 1;
  min-width: 0;
}

.rg-filtros__selector select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #334155;
  background: white;
  outline: none;
  transition: border-color 0.15s;
}

.rg-filtros__selector select:focus {
  border-color: #03A9F4;
  box-shadow: 0 0 0 2px rgba(3,169,244,0.1);
}

.rg-filtros__fechas {
  display: flex;
  gap: 10px;
}

.rg-filtros__fecha-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1;
}

.rg-filtros__fecha-item span {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
}

.rg-filtros__fecha-item input[type="date"] {
  flex: 1 1;
  padding: 5px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #334155;
  outline: none;
  min-width: 0;
}

.rg-filtros__fecha-item input[type="date"]:focus {
  border-color: #03A9F4;
  box-shadow: 0 0 0 2px rgba(3,169,244,0.1);
}

.rg-btn-buscar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 20px;
  background: #03A9F4;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  box-shadow: 0 2px 4px rgba(3,169,244,0.25);
  flex-shrink: 0;
}

.rg-btn-buscar:hover:not(:disabled) {
  background: #0288D1;
  box-shadow: 0 3px 8px rgba(3,169,244,0.35);
}

.rg-btn-buscar:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Fila 2: checkboxes inline */
.rg-filtros__row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid #f1f5f9;
}

.rg-checks {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.rg-checks__title {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 4px;
  white-space: nowrap;
}

.rg-checks__sep {
  width: 1px;
  height: 20px;
  background: #e2e8f0;
  margin: 0 6px;
  flex-shrink: 0;
}

.rg-check {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.76rem;
  color: #475569;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.12s;
  white-space: nowrap;
}

.rg-check:hover {
  background: #f1f5f9;
}

.rg-check input[type="checkbox"] {
  margin: 0;
  width: 13px;
  height: 13px;
  accent-color: #03A9F4;
  cursor: pointer;
}

/* ===== RESULTADOS ===== */
.rg-resultados {
  flex: 1 1;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Toolbar: tabs + acciones */
.rg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #e2e8f0;
  padding: 0 10px;
  flex-shrink: 0;
  background: #f8fafc;
}

.rg-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
}

.rg-tab {
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.15s;
  margin-bottom: -2px;
}

.rg-tab:hover {
  color: #334155;
  background: rgba(3,169,244,0.04);
}

.rg-tab--active {
  color: #03A9F4;
  border-bottom-color: #03A9F4;
  font-weight: 600;
  background: white;
}

.rg-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Paginacion */
.rg-pag {
  display: flex;
  align-items: center;
  gap: 3px;
}

.rg-pag button {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 0.75rem;
  color: #475569;
  transition: background 0.12s;
  line-height: 1.4;
}

.rg-pag button:hover:not(:disabled) {
  background: #e2e8f0;
}

.rg-pag button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.rg-pag__info {
  font-size: 0.78rem;
  color: #475569;
  font-weight: 600;
  padding: 0 4px;
}

.rg-pag__total {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-left: 2px;
}

.rg-btn-csv {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.rg-btn-csv:hover {
  background: #43A047;
}

/* Contenido */
.rg-content {
  flex: 1 1;
  overflow: auto;
  min-height: 0;
}

/* ===== TABLA ===== */
.rg-tabla-wrap {
  overflow-x: auto;
}

.rg-tabla {
  width: 100%;
  border-collapse: collapse;
}

.rg-tabla th,
.rg-tabla td {
  padding: 7px 10px;
  text-align: left;
  font-size: 0.8rem;
  border-bottom: 1px solid #f1f5f9;
}

.rg-tabla th {
  background: #f8fafc;
  font-weight: 600;
  color: #64748b;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 2px solid #e2e8f0;
}

.rg-tabla tbody tr:hover {
  background: #f8fafc;
}

.rg-tabla tbody tr:nth-child(even) {
  background: #fafbfd;
}

.rg-tabla tbody tr:nth-child(even):hover {
  background: #f1f5f9;
}

.rg-tabla th.rg-num,
.rg-tabla td.rg-num,
.rg-num {
  text-align: right;
  font-family: 'Consolas', 'SF Mono', monospace;
}

.rg-tabla tfoot td {
  border-top: 2px solid #e2e8f0;
  border-bottom: none;
  padding: 8px 10px;
  background: #f8fafc;
}

.rg-total-label {
  text-align: right;
  font-weight: 600;
  color: #334155;
  font-size: 0.8rem;
}

.rg-total-val {
  text-align: right;
  color: #03A9F4;
  font-weight: 700;
  font-family: 'Consolas', 'SF Mono', monospace;
  font-size: 0.8rem;
}

/* ===== ESTADOS VACIOS / CARGA ===== */
.rg-empty,
.rg-loading {
  padding: 40px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.88rem;
}

.rg-loading {
  color: #03A9F4;
}

.rg-empty-mini {
  padding: 10px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.8rem;
}

/* ===== RESUMEN / CARDS ===== */
.rg-resumen {
  padding: 16px;
}

.rg-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 16px;
}

.rg-card {
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.15s, box-shadow 0.15s;
}

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

.rg-card__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 6px;
  opacity: 0.9;
}

.rg-card__valor {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: 'Consolas', 'SF Mono', monospace;
  line-height: 1;
}

.rg-card--ventas {
  background: linear-gradient(135deg, #43A047, #66BB6A);
  color: white;
}

.rg-card--cuentas {
  background: linear-gradient(135deg, #1E88E5, #42A5F5);
  color: white;
}

.rg-card--ticket {
  background: linear-gradient(135deg, #F57C00, #FFB74D);
  color: white;
}

.rg-card--neta {
  background: linear-gradient(135deg, #7B1FA2, #BA68C8);
  color: white;
}

/* ===== CHARTS (Power BI style) ===== */
.rg-charts-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 16px;
}

.rg-chart-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.rg-chart-title {
  margin: 0 0 10px 0;
  font-size: 0.78rem;
  color: #334155;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}

.rg-chart-full {
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #fafbfd;
}

.rg-chart-tooltip {
  background: rgba(15, 23, 42, 0.92);
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
}

.rg-chart-tooltip__label {
  margin: 0 0 4px 0;
  font-weight: 700;
  font-size: 13px;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 4px;
}

.rg-chart-tooltip p {
  margin: 2px 0;
  font-weight: 600;
}

/* recharts legend text */
.recharts-legend-item-text {
  font-size: 11px !important;
  color: #475569 !important;
}

@media (max-width: 1100px) {
  .rg-charts-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .rg-charts-row {
    grid-template-columns: 1fr;
  }
}

/* ===== DESGLOSE ===== */
.rg-desglose {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.rg-desglose__panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
}

.rg-desglose__panel h4 {
  margin: 0 0 8px 0;
  font-size: 0.78rem;
  color: #334155;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  border-bottom: 2px solid #e2e8f0;
}

.rg-desglose__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #eef2f6;
}

.rg-desglose__row:last-child {
  border-bottom: none;
}

.rg-desglose__label {
  font-size: 0.8rem;
  color: #475569;
}

.rg-desglose__cant {
  font-size: 0.72rem;
  color: #94a3b8;
  background: #eef2f6;
  padding: 1px 8px;
  border-radius: 10px;
}

.rg-desglose__monto {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
  font-family: 'Consolas', 'SF Mono', monospace;
}

.rg-desglose__monto--neg {
  color: #ef4444;
}

/* ===== BADGES ===== */
.badge-tipo {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ===== CANCELADOS ===== */
.rg-row-cancel {
  background: #fff8f8 !important;
}

.rg-row-cancel:hover {
  background: #fef2f2 !important;
}

.rg-cancel-importe {
  color: #dc2626;
  font-weight: 600;
}

.rg-motivo {
  font-size: 0.78rem;
  color: #64748b;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rg-total-val--neg {
  color: #dc2626 !important;
}

.badge-mesa       { background: #dcfce7; color: #166534; }
.badge-llevar     { background: #fff7ed; color: #c2410c; }
.badge-domicilio  { background: #dbeafe; color: #1e40af; }
.badge-uber       { background: #f3e8ff; color: #7c3aed; }
.badge-rappi      { background: #ffe4e6; color: #be123c; }
.badge-delibot    { background: #e0f2fe; color: #0369a1; }

/* ===== MESERO FILTRO ===== */
.rg-mesero-filtro {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.rg-mesero-filtro__icon {
  color: #94a3b8;
  font-size: 14px;
  flex-shrink: 0;
}

.rg-mesero-filtro__input {
  flex: 1 1;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #334155;
  outline: none;
  transition: border-color 0.15s;
  max-width: 300px;
}

.rg-mesero-filtro__input:focus {
  border-color: #03A9F4;
  box-shadow: 0 0 0 2px rgba(3,169,244,0.1);
}

.rg-mesero-filtro__clear {
  background: #e2e8f0;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: #64748b;
  transition: background 0.12s;
}

.rg-mesero-filtro__clear:hover {
  background: #cbd5e1;
}

.rg-mesero-filtro__count {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-left: auto;
  white-space: nowrap;
}

.rg-cards--mesero {
  margin: 12px 16px 0 16px;
}

/* ===== SCROLLBAR ===== */
.rg-content::-webkit-scrollbar,
.rg-tabla-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.rg-content::-webkit-scrollbar-track,
.rg-tabla-wrap::-webkit-scrollbar-track {
  background: #f8fafc;
}

.rg-content::-webkit-scrollbar-thumb,
.rg-tabla-wrap::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.rg-content::-webkit-scrollbar-thumb:hover,
.rg-tabla-wrap::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .rg-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .rg-desglose {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .rg-filtros__row1 {
    flex-wrap: wrap;
  }
  .rg-filtros__selector {
    flex: 1 1 100%;
    order: 3;
  }
  .rg-btn-buscar {
    flex: 1 1;
    justify-content: center;
  }
  .rg-filtros__row2 {
    flex-wrap: wrap;
  }
  .rg-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 10px;
  }
  .rg-toolbar__actions {
    justify-content: space-between;
  }
}

@media (max-width: 600px) {
  .rg-body {
    padding: 8px;
  }
  .rg-cards {
    grid-template-columns: 1fr 1fr;
  }
  .rg-card__valor {
    font-size: 1.1rem;
  }
  .rg-filtros__fechas {
    flex-direction: column;
    gap: 6px;
  }
  .rg-checks__sep {
    display: none;
  }
  .rg-filtros__row2 {
    flex-direction: column;
    gap: 4px;
  }
}

/* src/components/CorteCaja/CorteCaja.css */
.corte-caja-container {
  background: white;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
}

/* Contenido principal optimizado para Header y Footer */
.corte-main-content {
  flex: 1 1;
  display: grid;
  grid-template-columns: 320px 1fr 280px;
  grid-gap: 15px;
  gap: 15px;
  padding: 15px;
  height: calc(100vh - 110px); /* Optimizado para Header + Footer */
  overflow: hidden;
}

/* Sección Arqueo - Versión Compacta */
.seccion-arqueo {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 16px rgba(71, 85, 105, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #e2e8f0;
}

.panel-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}

.panel-titulo.small {
  margin-bottom: 10px;
}

.panel-titulo h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}

.panel-titulo h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.panel-icono {
  font-size: 18px;
  color: #3b82f6;
}

.arqueo-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 4px;
  gap: 4px;
  margin-bottom: 12px;
  flex: 1 1;
}

.arqueo-item {
  display: grid;
  grid-template-columns: 80px 70px 80px;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: #f7fafc;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 18px;
}

.arqueo-item:hover {
  background: #edf2f7;
  transform: scale(1.02);
}

.denominacion {
  font-weight: 600;
  color: #1e293b;
  font-size: 16px;
  text-align: center;
}

.cantidad-input {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
  background: white;
  width: 100%;
  -moz-appearance: textfield; /* Firefox */
}

/* Eliminar flechas en Chrome, Safari, Edge */
.cantidad-input::-webkit-outer-spin-button,
.cantidad-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cantidad-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
  outline: none;
}

.subtotal {
  text-align: center;
  font-weight: 600;
  color: #475569;
  font-size: 15px;
}

.total-arqueo-destacado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
  color: white;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(30, 64, 175, 0.3);
  margin-top: auto;
}

.total-valor {
  font-size: 22px;
}

/* Sección Info Central - Versión Compacta */
.seccion-info {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 15px;
}

.info-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(71, 85, 105, 0.1);
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(71, 85, 105, 0.15);
  border-color: #cbd5e1;
}

.card-label {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.card-value {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.card-value small {
  display: block;
  font-size: 10px;
  color: #64748b;
  font-weight: 400;
  margin-top: 2px;
}

/* Opciones de impresión - Versión Compacta */
.opciones-seccion {
  margin-top: 15px;
  flex: 1 1;
}

.opciones-seccion h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.seccion-icono {
  font-size: 14px;
  color: #667eea;
}

.opciones-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4px;
  gap: 4px;
}

.opcion-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 11px;
  position: relative;
}

.opcion-checkbox:hover {
  background: #f7fafc;
}

.opcion-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  height: 14px;
  width: 14px;
  background-color: #edf2f7;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.opcion-checkbox input:checked ~ .checkmark {
  background-color: #667eea;
  border-color: #667eea;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 6px;
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.opcion-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.label-text {
  color: #475569;
  font-weight: 500;
  line-height: 1.1;
}

/* Sección Acciones - Versión Compacta */
.seccion-acciones {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.botones-principales {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-accion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  font-family: inherit;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.btn-parcial {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
  color: white;
}

.btn-parcial:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(66, 153, 225, 0.4);
}

.btn-final {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  color: white;
}

.btn-final:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4);
}

.btn-icono {
  font-size: 18px;
  flex-shrink: 0;
}

.btn-content {
  flex: 1 1;
}

.btn-titulo {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.2;
  color: white;
}

.btn-descripcion {
  font-size: 11px;
  opacity: 0.9;
  line-height: 1.2;
  color: white;
}

/* Consulta Section - Versión Compacta */
.consulta-section {
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
  flex: 1 1;
}

.consulta-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.fecha-selector {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icono {
  position: absolute;
  left: 8px;
  color: #94a3b8;
  z-index: 1;
  font-size: 12px;
}

.select-fecha {
  width: 100%;
  padding: 8px 8px 8px 28px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: white;
  font-size: 12px;
  color: #1e293b;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.select-fecha:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
  outline: none;
}

.btn-consultar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(14, 165, 233, 0.3);
}

.btn-consultar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
}

.resultados-mini {
  background: #f7fafc;
  border-radius: 6px;
  padding: 10px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1;
}

.no-resultados {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #94a3b8;
  font-size: 11px;
}

.no-resultados svg {
  font-size: 16px;
}

/* Responsive */
@media (max-width: 1200px) {
  .corte-main-content {
    grid-template-columns: 300px 1fr 280px;
  }
}

@media (max-width: 1024px) {
  .corte-main-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 15px;
    padding: 15px;
    height: calc(100vh - 140px); /* Más espacio para Header en móvil */
  }

  .info-cards {
    grid-template-columns: 1fr;
  }

  .opciones-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .corte-main-content {
    padding: 10px;
    height: calc(100vh - 160px); /* Ajustado para Header responsive */
    overflow-y: auto; /* Permitir scroll en móvil si es necesario */
  }

  .arqueo-item {
    grid-template-columns: 60px 1fr 60px;
    gap: 8px;
    padding: 10px;
  }

  .btn-accion {
    padding: 15px;
  }
}

/* Ajustes específicos para Footer en el layout */
.corte-caja-container .dashboard-footer {
  background: #f8f9fa;
  color: #1e293b;
  border-top: 1px solid #e2e8f0;
}

/* Estilos para lista de cortes anteriores */
.lista-cortes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  width: 100%;
}

.corte-item {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px;
  font-size: 11px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.corte-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
  transform: translateY(-1px);
}

.corte-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}

.corte-numero {
  font-weight: 700;
  color: #1e293b;
  font-size: 13px;
}

.corte-tipo {
  padding: 2px 6px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.corte-tipo.final {
  background: #dcfce7;
  color: #166534;
}

.corte-tipo.parcial {
  background: #fef3c7;
  color: #92400e;
}

.corte-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.corte-fecha, .corte-usuario, .corte-mesas {
  color: #64748b;
  font-size: 10px;
}

.corte-totales {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
}

.corte-totales span {
  font-weight: 600;
  color: #1e293b;
  font-size: 10px;
}

/* Scrollbar personalizada para lista de cortes */
.lista-cortes::-webkit-scrollbar {
  width: 4px;
}

.lista-cortes::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 2px;
}

.lista-cortes::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

.lista-cortes::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Estilos para sección de acciones de corte */
.corte-acciones {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: flex-end;
}

.btn-reimprimir {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.btn-reimprimir:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.btn-reimprimir:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.btn-reimprimir svg {
  font-size: 10px;
}

/* Modal de confirmación corte final */
.confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9000;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.confirm-modal {
  background: white;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: confirmSlideIn 0.2s ease-out;
}

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

.confirm-icon {
  font-size: 36px;
  color: #48bb78;
  margin-bottom: 12px;
}

.confirm-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
}

.confirm-message {
  margin: 0 0 24px 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

.confirm-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.confirm-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.confirm-btn--cancel {
  background: #f1f5f9;
  color: #475569;
}

.confirm-btn--cancel:hover {
  background: #e2e8f0;
}

.confirm-btn--accept {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
}

.confirm-btn--accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
}
/* src/components/Compras/GestionCompras.css */
.gestion-compras-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.gestion-compras-content {
  flex: 1 1;
  margin: 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}

.gestion-compras-inner {
  padding: 24px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header de la página */
.compras-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f1f5f9;
}

.compras-titulo {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 12px;
}

.compras-titulo::before {
  content: '📦';
  font-size: 32px;
}

/* Botón Nueva Compra */
.btn-nueva-compra {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-nueva-compra::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-nueva-compra:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.btn-nueva-compra:hover::before {
  left: 100%;
}

.btn-nueva-compra:active {
  transform: translateY(-1px);
}

/* Selector de corte */
.selector-corte {
  margin-top: 15px;
}

.selector-corte label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 0.9em;
}

.selector-corte .select-container {
  position: relative;
}

.selector-corte .select-input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 0.9em;
  background-color: white;
  transition: all 0.3s ease;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276,9 12,15 18,9%27%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

.selector-corte .select-input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.selector-corte .select-input:hover {
  border-color: #007bff;
}

/* Estilos para los inputs de fecha en filtros */
.input-fecha-container {
  position: relative;
}

.input-fecha {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  background: white;
  color: #374151;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-fecha:hover {
  border-color: #9ca3af;
  transform: translateY(-1px);
}

.input-fecha:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-1px);
}

.input-fecha:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Estilizar el icono del calendario en filtros */
.input-fecha::-webkit-calendar-picker-indicator {
  background: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27%3e%3cpath fill=%27%23666%27 d=%27M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z%27/%3e%3c/svg%3e") center/contain no-repeat;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 16px;
  height: 16px;
}

.input-fecha::-webkit-calendar-picker-indicator:hover {
  background: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27%3e%3cpath fill=%27%23FFC107%27 d=%27M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z%27/%3e%3c/svg%3e") center/contain no-repeat;
}

.input-fecha:disabled::-webkit-calendar-picker-indicator {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Estilizar el texto del input de fecha en filtros */
.input-fecha::-webkit-datetime-edit {
  color: #333;
  padding: 0;
}

.input-fecha::-webkit-datetime-edit-fields-wrapper {
  background: transparent;
}

.input-fecha::-webkit-datetime-edit-month-field,
.input-fecha::-webkit-datetime-edit-day-field,
.input-fecha::-webkit-datetime-edit-year-field {
  color: #333;
  font-weight: 500;
}

.input-fecha::-webkit-datetime-edit-month-field:focus,
.input-fecha::-webkit-datetime-edit-day-field:focus,
.input-fecha::-webkit-datetime-edit-year-field:focus {
  background-color: rgba(255, 193, 7, 0.1);
  color: #333;
  outline: none;
}

/* Mejorar la apariencia del rango de fechas */
.rango-fechas {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.fecha-desde,
.fecha-hasta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 140px;
}

.fecha-desde label,
.fecha-hasta label {
  font-size: 0.85em;
  font-weight: 600;
  color: #555;
}

/* Estilos para búsqueda simplificada */
.busqueda-group {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  transition: all 0.2s ease;
  min-width: 300px;
}

.busqueda-group:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.busqueda-icon {
  color: #64748b;
  margin-right: 8px;
  font-size: 14px;
}

.input-busqueda {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #1e293b;
  flex: 1 1;
  font-weight: 500;
}

.input-busqueda::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.btn-limpiar-busqueda {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 2px 6px;
  margin-left: 8px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  transition: all 0.2s ease;
}

.btn-limpiar-busqueda:hover {
  color: #dc2626;
  background-color: rgba(220, 38, 38, 0.1);
}

/* Información de compras */
.info-compras {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.info-compras strong {
  color: #1e293b;
  font-weight: 600;
}

/* Responsive para filtros de fecha */
@media (max-width: 768px) {
  .rango-fechas {
    flex-direction: column;
    gap: 10px;
  }

  .fecha-desde,
  .fecha-hasta {
    width: 100%;
    min-width: auto;
  }

  .input-fecha {
    font-size: 16px;
    /* Evita zoom en iOS */
    min-height: 40px;
  }
}

/* Estilos para la columna de acciones */
.columna-acciones {
  text-align: center;
  white-space: nowrap;
  width: 180px;
}

.btn-ver-detalle {
  background: #007bff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
  margin-right: 8px;
}

.btn-ver-detalle:hover {
  background: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.btn-ver-detalle:active {
  transform: translateY(0);
}

.btn-abonar {
  background: #28a745;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.btn-abonar:hover {
  background: #218838;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.btn-abonar:active {
  transform: translateY(0);
}

/* Responsive para botón abonar */
@media (max-width: 768px) {
  .btn-abonar {
    padding: 8px 10px;
    font-size: 0.75em;
  }

  .columna-acciones {
    width: 150px;
  }

  .btn-ver-detalle {
    padding: 8px 10px;
    font-size: 0.75em;
    margin-right: 5px;
  }
}

.compras-titulo {
  font-size: 1.5rem;
  color: #333;

  margin-bottom: 1rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.5rem;
}

/* Panel de filtros */
.panel-filtros {
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  border: 2px solid #e2e8f0;
  border-radius: 20px;
  margin-bottom: 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}

.panel-filtros::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #667eea, #764ba2, #10b981);
}

/* Header de filtros */
.filtros-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 24px 28px 16px 28px;
  border-bottom: 2px solid #f1f5f9;
  margin-bottom: 20px;
}

.filtros-titulo {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-buscar {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-buscar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-buscar:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.btn-buscar:hover::before {
  left: 100%;
}

/* Contenido de filtros */
.filtros-content {
  padding: 0 28px 28px 28px;
  flex-shrink: 0;
}

/* Fila horizontal de filtros con botón */
.filtros-row-horizontal {
  display: flex;
  gap: 20px;
  align-items: end;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Items de filtro */
.filtro-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  flex: 0 1 auto;
}

.filtro-item label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0;
}

/* Grupo de filtros de fecha horizontal */
.filtro-fecha-group-horizontal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 250px;
  flex: 0 1 auto;
}

.group-label-horizontal {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0;
}

/* Radio group compacto horizontal */
.radio-group-horizontal {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.radio-option:hover {
  color: #374151;
}

.radio-option input[type="radio"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #667eea;
  flex-shrink: 0;
}

.radio-text {
  -webkit-user-select: none;
          user-select: none;
  font-size: 13px;
}

/* Container del botón de búsqueda a la derecha */
.filtro-boton-buscar {
  display: flex;
  align-items: end;
  margin-left: auto;
  flex-shrink: 0;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fechas-rango {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
}

.fechas-rango .filtro-item {
  flex: 1 1;
  min-width: 120px;
}

.filtros-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}

.filtros-row:last-child {
  margin-bottom: 0;
}

.filtro-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filtro-item label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.select-container {
  position: relative;
  flex: 1 1;
}

.select-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
  background-color: white;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23888%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
}

.text-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
}

.text-input:focus,
.select-input:focus {
  border-color: #E91E63;
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.15);
  outline: none;
}

/* Filtro de fechas */
.filtro-fecha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.filtro-fecha>label {
  min-width: 55px;
  font-size: 0.9rem;
  color: #555;
}

.radio-group {
  display: flex;
  gap: 1rem;
}

.radio-label {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #555;
  cursor: pointer;
}

.radio-label input[type="radio"] {
  margin-right: 0.5rem;
  cursor: pointer;
  accent-color: #E91E63;
}

.rango-fechas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.fecha-desde,
.fecha-hasta {
  display: flex;
  align-items: center;
}

.fecha-desde label,
.fecha-hasta label {
  font-size: 0.85rem;
  color: #555;
  margin-right: 0.5rem;
  min-width: 50px;
}

.select-fecha {
  width: 140px;
}

.select-fecha select {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.85rem;
  background-color: white;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23888%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.8rem;
}

.select-fecha select:focus {
  border-color: #E91E63;
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.15);
  outline: none;
}

.boton-buscar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.btn-buscar {
  padding: 0.5rem 1.2rem;

  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-buscar:hover {
  background-color: #D81B60;
  box-shadow: 0 4px 8px rgba(233, 30, 99, 0.3);
}

.icono-buscar {
  margin-right: 0.5rem;
  font-size: 0.9rem;
}

/* Panel de listado de compras */
.panel-listado {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.listado-titulo {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
  padding: 24px 24px 16px 24px;
  border-bottom: 2px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 10px;
}

.listado-titulo::before {

  font-size: 24px;
  margin-top: 0;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}

/* Selección de columnas */
.seleccion-columnas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
}

.columna-check {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: #555;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.columna-check:hover {
  background-color: #f5f5f5;
}

.columna-check.seleccionada {
  background-color: #f8f9fa;
  font-weight: 500;
}

.columna-check input[type="checkbox"] {
  margin-right: 0.4rem;
  cursor: pointer;

}

/* Tabla de compras con scroll */
.tabla-container {
  overflow-y: auto;
  flex: 1 1;
  min-height: 300px;
  margin-bottom: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tabla-compras {
  width: 100%;
  border-collapse: collapse;
}

.tabla-compras th,
.tabla-compras td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.tabla-compras th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #555;
  font-size: 0.85rem;
  white-space: nowrap;
}

.tabla-compras tbody tr {
  transition: background-color 0.2s ease;
}

.tabla-compras tbody tr:hover {
  background-color: #f9f9f9;
}

.columna-numerica {
  text-align: right;
  font-family: 'Consolas', monospace;
}

.estatus-pendiente {
  color: #f57c00;
  font-weight: 500;
}

.estatus-pagado {
  color: #43a047;
  font-weight: 500;
}

.cargando,
.sin-datos {
  padding: 2rem;
  text-align: center;
  color: #777;
  font-style: italic;
}

/* Totales en footer */
tfoot td {
  font-weight: bold;
  background-color: #f9f9f9;
  border-top: 2px solid #eee;
}

.total-label {
  text-align: right;
  font-weight: 600;
  color: #333;

}

.total-valor {
  color: #000;
  font-weight: 700;
}

/* Paginación y exportación */
.acciones-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.paginacion {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.btn-paginacion {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

.btn-paginacion:hover {
  background-color: #e9e9e9;
}

.input-pagina {
  width: 40px;
  padding: 0.3rem 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9rem;
}

.exportar-opciones {
  display: flex;
  gap: 0.5rem;
}

.btn-exportar,
.btn-imprimir {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-exportar {
  background-color: #4CAF50;
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-exportar:hover {
  background-color: #388E3C;
  box-shadow: 0 3px 6px rgba(76, 175, 80, 0.3);
}

.btn-imprimir {
  background-color: #2196F3;
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-imprimir:hover {
  background-color: #1976D2;
  box-shadow: 0 3px 6px rgba(33, 150, 243, 0.3);
}

.icono-exportar,
.icono-imprimir {
  margin-right: 0.5rem;
}

/* Media queries para responsive */
@media (max-width: 1200px) {
  .filtros-row-horizontal {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    justify-content: flex-start;
  }

  .filtro-item {
    min-width: auto;
    max-width: none;
  }

  .filtro-fecha-group-horizontal {
    min-width: auto;
  }

  .radio-group-horizontal {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .filtro-boton-buscar {
    margin-left: 0;
    justify-content: center;
    margin-top: 16px;
  }

  .btn-buscar {
    width: 100%;
    max-width: 300px;
  }

  .acciones-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .exportar-opciones {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .filtros-content {
    padding: 0 16px 20px 16px;
  }

  .filtros-row-horizontal {
    gap: 12px;
  }

  .radio-group-horizontal {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .seleccion-columnas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .seleccion-columnas {
    grid-template-columns: 1fr;
  }
}

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

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

::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}
/* AgregarCompraModal.css */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.agregar-compra-modal {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 1000px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.modal-header {
  background: #FFC107;
  color: #333;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5em;
  font-weight: 600;
}

.btn-close {
  background: none;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  color: #333;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.btn-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.modal-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1 1;
}

.error-message {
  background-color: #f8d7da;
  color: #721c24;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  border: 1px solid #f5c6cb;
}

.compra-form {
  margin-bottom: 30px;
}

.form-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
  font-size: 0.9em;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9em;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #FFC107;
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
}

/* Estilos específicos para el input de fecha */
.fecha-input-container {
  position: relative;
}

.fecha-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9em;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.fecha-input:hover {
  border-color: #FFC107;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.fecha-input:focus {
  outline: none;
  border-color: #FFC107;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2);
}

/* Estilizar el icono del calendario */
.fecha-input::-webkit-calendar-picker-indicator {
  background: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27%3e%3cpath fill=%27%23FFC107%27 d=%27M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z%27/%3e%3c/svg%3e") center/contain no-repeat;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 20px;
  height: 20px;
}

.fecha-input::-webkit-calendar-picker-indicator:hover {
  background: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27%3e%3cpath fill=%27%23e0a800%27 d=%27M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z%27/%3e%3c/svg%3e") center/contain no-repeat;
}

/* Estilizar el texto del input de fecha */
.fecha-input::-webkit-datetime-edit {
  color: #333;
  padding: 0;
}

.fecha-input::-webkit-datetime-edit-fields-wrapper {
  background: transparent;
}

.fecha-input::-webkit-datetime-edit-month-field,
.fecha-input::-webkit-datetime-edit-day-field,
.fecha-input::-webkit-datetime-edit-year-field {
  color: #333;
  font-weight: 500;
}

.fecha-input::-webkit-datetime-edit-month-field:focus,
.fecha-input::-webkit-datetime-edit-day-field:focus,
.fecha-input::-webkit-datetime-edit-year-field:focus {
  background-color: rgba(255, 193, 7, 0.1);
  color: #333;
  outline: none;
}

/* Para Firefox */
.fecha-input[type="date"]::-moz-focus-inner {
  border: 0;
}

/* Placeholder personalizado cuando no hay fecha */
.fecha-input:invalid:not(:focus):not(:placeholder-shown) {
  color: #999;
}

/* Animación sutil al hacer clic */
.fecha-input:active {
  transform: scale(0.99);
  transition: transform 0.1s ease;
}

/* Responsive para el calendario */
@media (max-width: 768px) {
  .fecha-input {
    font-size: 16px; /* Evita zoom en iOS */
    min-height: 44px; /* Tamaño mínimo de tap en móviles */
  }
  
  .fecha-input::-webkit-calendar-picker-indicator {
    width: 24px;
    height: 24px;
  }
}

.form-group textarea {
  resize: vertical;
  min-height: 60px;
}

.detalles-section {
  border-top: 2px solid #f0f0f0;
  padding-top: 20px;
}

.detalles-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.detalles-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.3em;
}

.btn-agregar-detalle {
  background: #28a745;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  transition: background-color 0.3s;
}

.btn-agregar-detalle:hover {
  background: #218838;
}

.sin-detalles {
  text-align: center;
  color: #666;
  padding: 40px;
  background: #f8f9fa;
  border-radius: 8px;
  font-style: italic;
}

.detalles-tabla {
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
}

.tabla-header {
  display: grid;
  grid-template-columns: 2fr 0.7fr 1fr 1fr 1fr 80px;
  grid-gap: 10px;
  gap: 10px;
  background: #e9ecef;
  padding: 15px;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #dee2e6;
}

.tabla-row {
  display: grid;
  grid-template-columns: 2fr 0.7fr 1fr 1fr 1fr 80px;
  grid-gap: 10px;
  gap: 10px;
  padding: 15px;
  border-bottom: 1px solid #dee2e6;
  align-items: center;
}

.tabla-row:last-child {
  border-bottom: none;
}

.campo-ingrediente select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 0.85em;
}

.campo-cantidad input,
.campo-costo input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  text-align: right;
  font-size: 0.85em;
}

.campo-unidad {
  text-align: center;
  font-weight: 600;
  color: #495057;
  font-size: 0.9em;
}

.campo-importe {
  text-align: right;
  font-weight: 600;
  color: #28a745;
}

.campo-acciones {
  display: flex;
  justify-content: center;
}

.btn-eliminar-detalle {
  background: #dc3545;
  color: white;
  border: none;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: background-color 0.3s;
}

.btn-eliminar-detalle:hover {
  background: #c82333;
}

.tabla-footer {
  background: #e9ecef;
  padding: 15px;
  border-top: 2px solid #dee2e6;
}

.total-compra {
  text-align: right;
  font-size: 1.2em;
  color: #333;
}

.modal-footer {
  background: #f8f9fa;
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  border-top: 1px solid #e9ecef;
}

.btn-cancelar,
.btn-guardar {
  padding: 12px 25px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-cancelar {
  background: #6c757d;
  color: white;
}

.btn-cancelar:hover {
  background: #5a6268;
}

.btn-guardar {
  background: #FFC107;
  color: #333;
}

.btn-guardar:hover {
  background: #e0a800;
}

.btn-guardar:disabled {
  background: #d6d8db;
  color: #6c757d;
  cursor: not-allowed;
}

/* Responsividad */
@media (max-width: 768px) {
  .agregar-compra-modal {
    width: 95%;
    max-height: 95vh;
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .tabla-header,
  .tabla-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .tabla-header {
    display: none;
  }

  .tabla-row {
    background: white;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    display: block;
    padding: 15px;
  }

  .campo-ingrediente,
  .campo-cantidad,
  .campo-costo,
  .campo-importe,
  .campo-acciones {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .campo-ingrediente::before { content: "Ingrediente: "; font-weight: 600; }
  .campo-cantidad::before { content: "Cantidad: "; font-weight: 600; }
  .campo-costo::before { content: "Costo: "; font-weight: 600; }
  .campo-importe::before { content: "Importe: "; font-weight: 600; }

  .campo-acciones {
    justify-content: flex-end;
  }

  .modal-footer {
    flex-direction: column;
  }

  .btn-cancelar,
  .btn-guardar {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* Estilos para checkbox personalizado */
.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.checkbox-label:hover {
  background-color: rgba(255, 193, 7, 0.1);
}

.checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}

.checkbox-custom {
  width: 20px;
  height: 20px;
  background-color: white;
  border: 2px solid #ddd;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-input:checked + .checkbox-custom {
  background-color: #FFC107;
  border-color: #FFC107;
}

.checkbox-input:checked + .checkbox-custom::after {
  content: '✓';
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.checkbox-custom:hover {
  border-color: #FFC107;
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
}

.checkbox-input:focus + .checkbox-custom {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.3);
}

.checkbox-text {
  font-weight: 600;
  color: #333;
  -webkit-user-select: none;
          user-select: none;
  transition: color 0.3s ease;
}

.checkbox-input:checked ~ .checkbox-text {
  color: #28a745;
}

.checkbox-input:not(:checked) ~ .checkbox-text {
  color: #dc3545;
}

/* Animación al cambiar estado */
.checkbox-custom {
  transform: scale(1);
  transition: all 0.2s ease;
}

.checkbox-input:checked + .checkbox-custom {
  transform: scale(1.1);
}

.checkbox-input:active + .checkbox-custom {
  transform: scale(0.95);
}

/* Estilos para React Select (ingredientes) */
.select-ingrediente {
  width: 100%;
}

.select__control {
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  min-height: 38px !important;
  box-shadow: none !important;
  font-size: 0.85em !important;
}

.select__control:hover {
  border-color: #FFC107 !important;
}

.select__control--is-focused {
  border-color: #FFC107 !important;
  box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.2) !important;
}

.select__value-container {
  padding: 2px 8px !important;
}

.select__placeholder {
  color: #6c757d !important;
  font-size: 0.85em !important;
}

.select__single-value {
  color: #495057 !important;
  font-size: 0.85em !important;
  font-weight: 500 !important;
}

.select__input-container {
  margin: 0 !important;
  padding: 0 !important;
}

.select__input input {
  font-size: 0.85em !important;
}

.select__dropdown-indicator {
  color: #6c757d !important;
  padding: 4px !important;
}

.select__dropdown-indicator:hover {
  color: #FFC107 !important;
}

.select__clear-indicator {
  color: #6c757d !important;
  padding: 4px !important;
}

.select__clear-indicator:hover {
  color: #dc3545 !important;
}

.select__menu {
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  z-index: 9999 !important;
}

.select__menu-list {
  padding: 4px 0 !important;
  max-height: 200px !important;
}

.select__option {
  padding: 8px 12px !important;
  font-size: 0.85em !important;
  cursor: pointer !important;
}

.select__option:hover {
  background-color: rgba(255, 193, 7, 0.1) !important;
  color: #333 !important;
}

.select__option--is-selected {
  background-color: #FFC107 !important;
  color: #333 !important;
}

.select__option--is-focused {
  background-color: rgba(255, 193, 7, 0.2) !important;
  color: #333 !important;
}

.select__no-options-message {
  padding: 8px 12px !important;
  color: #6c757d !important;
  font-size: 0.85em !important;
  font-style: italic !important;
}

.select__loading-indicator {
  color: #FFC107 !important;
}

/* Ajustes responsivos para el select */
@media (max-width: 768px) {
  .select__control {
    min-height: 44px !important;
    font-size: 16px !important;
  }
  
  .select__placeholder,
  .select__single-value,
  .select__input input,
  .select__option {
    font-size: 16px !important;
  }
  
  .select__menu-list {
    max-height: 150px !important;
  }
}
/* AbonarCompraModal.css */
.abonar-compra-modal {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.abonar-compra-modal .modal-header {
  background: #28a745;
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.abonar-compra-modal .modal-header h2 {
  margin: 0;
  font-size: 1.4em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.abonar-compra-modal .btn-close {
  background: none;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  color: white;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.abonar-compra-modal .btn-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.abonar-compra-modal .modal-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1 1;
}

.abonar-compra-modal .error-message {
  background-color: #f8d7da;
  color: #721c24;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  border: 1px solid #f5c6cb;
}

/* Información de la compra */
.compra-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
  border: 1px solid #e9ecef;
}

.compra-info h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 1.2em;
  font-weight: 600;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.info-item label {
  font-size: 0.85em;
  font-weight: 600;
  color: #666;
}

.info-item span {
  font-size: 0.95em;
  font-weight: 500;
  color: #333;
}

.monto-total {
  color: #007bff !important;
  font-weight: 700 !important;
}

.monto-abonado {
  color: #28a745 !important;
  font-weight: 700 !important;
}

.saldo-pendiente {
  color: #dc3545 !important;
  font-weight: 700 !important;
}

.estatus {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 600;
  text-align: center;
  max-width: -webkit-fit-content;
  max-width: fit-content;
}

.estatus.pagado {
  background-color: #d4edda;
  color: #155724;
}

.estatus.pendiente {
  background-color: #f8d7da;
  color: #721c24;
}

.estatus.parcial {
  background-color: #fff3cd;
  color: #856404;
}

/* Formulario de abono */
.abono-form {
  margin-bottom: 25px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 600;
  color: #333;
  font-size: 0.9em;
}

.form-group input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9em;
  transition: border-color 0.3s;
}

.form-group input:focus {
  outline: none;
  border-color: #28a745;
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

.monto-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.monto-input {
  flex: 1 1;
}

.btn-monto-sugerido {
  background: #17a2b8;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 600;
  transition: background-color 0.3s;
}

.btn-monto-sugerido:hover {
  background: #138496;
}

.fecha-input-container {
  position: relative;
}

.fecha-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9em;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.fecha-input:hover {
  border-color: #28a745;
}

.fecha-input:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

/* Resumen del abono */
.resumen-abono {
  background: #e8f5e8;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #c3e6cb;
  margin-bottom: 20px;
}

.resumen-abono h4 {
  margin: 0 0 15px 0;
  color: #155724;
  font-size: 1.1em;
  font-weight: 600;
}

.resumen-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.resumen-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(21, 87, 36, 0.1);
}

.resumen-item:last-child {
  border-bottom: none;
  padding-top: 12px;
  font-weight: 600;
}

.resumen-item label {
  color: #155724;
  font-weight: 500;
}

.valor-abono {
  color: #28a745;
  font-weight: 700;
  font-size: 1.1em;
}

.saldo-resultante {
  color: #666;
  font-weight: 600;
}

.nuevo-estatus {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 600;
}

.nuevo-estatus.pagado {
  background-color: #28a745;
  color: white;
}

.nuevo-estatus.parcial {
  background-color: #ffc107;
  color: #333;
}

/* Footer del modal */
.abonar-compra-modal .modal-footer {
  background: #f8f9fa;
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  border-top: 1px solid #e9ecef;
}

.abonar-compra-modal .btn-cancelar,
.abonar-compra-modal .btn-guardar {
  padding: 12px 25px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.abonar-compra-modal .btn-cancelar {
  background: #6c757d;
  color: white;
}

.abonar-compra-modal .btn-cancelar:hover {
  background: #5a6268;
}

.abonar-compra-modal .btn-guardar {
  background: #28a745;
  color: white;
}

.abonar-compra-modal .btn-guardar:hover {
  background: #218838;
}

.abonar-compra-modal .btn-guardar:disabled {
  background: #d6d8db;
  color: #6c757d;
  cursor: not-allowed;
}

/* Responsividad */
@media (max-width: 768px) {
  .abonar-compra-modal {
    width: 95%;
    max-height: 95vh;
  }

  .info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .resumen-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .abonar-compra-modal .modal-footer {
    flex-direction: column;
  }

  .abonar-compra-modal .btn-cancelar,
  .abonar-compra-modal .btn-guardar {
    width: 100%;
    justify-content: center;
  }
}
/* DetalleCompraModal.css */
.detalle-compra-modal {
  background: white;
  border-radius: 20px;
  width: 95%;
  max-width: 1100px;
  max-height: 92vh;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.detalle-compra-modal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.detalle-compra-modal .modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

.detalle-compra-modal .modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.detalle-compra-modal .btn-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: white;
  padding: 10px;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.detalle-compra-modal .btn-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.detalle-compra-modal .modal-content {
  padding: 28px;
  overflow-y: auto;
  flex: 1 1;
  background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
}

.detalle-compra-modal .error-message {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  color: #dc2626;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  border: 1px solid #fca5a5;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.detalle-compra-modal .error-message::before {
  content: '⚠️';
  font-size: 18px;
}

/* Resumen de la compra */
.compra-resumen {
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 28px;
  border: 2px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.compra-resumen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2, #10b981);
}

.resumen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.resumen-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.resumen-item label {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.resumen-item span {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.valor-destacado {
  font-weight: 700 !important;
  color: #667eea !important;
  font-size: 18px !important;
}

.monto-total {
  color: #667eea !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

.monto-abonado {
  color: #10b981 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

.saldo-pendiente {
  color: #ef4444 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

.estatus {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  max-width: -webkit-fit-content;
  max-width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.estatus.pagado {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
  border: 1px solid #10b981;
}

.estatus.pendiente {
  background: linear-gradient(135deg, #fee2e2, #fca5a5);
  color: #991b1b;
  border: 1px solid #ef4444;
}

.estatus.parcial {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border: 1px solid #f59e0b;
}

/* Sistema de pestañas */
.tabs-container {
  margin-bottom: 24px;
}

.tabs-header {
  display: flex;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-radius: 16px;
  padding: 6px;
  margin-bottom: 24px;
  gap: 4px;
}

.tab-button {
  background: transparent;
  border: none;
  padding: 16px 24px;
  cursor: pointer;
  font-weight: 600;
  color: #64748b;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  flex: 1 1;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.tab-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.tab-button:hover {
  color: #334155;
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.tab-button:hover::before {
  left: 100%;
}

.tab-button.active {
  color: #ffffff;
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transform: translateY(-2px);
}

.tabs-content {
  min-height: 300px;
}

/* Loading spinner */
.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: #666;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

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

/* Sin datos */
.sin-datos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: #999;
  text-align: center;
}

.sin-datos svg {
  font-size: 3em;
  margin-bottom: 15px;
  opacity: 0.5;
}

.sin-datos p {
  font-size: 1.1em;
  margin: 0;
}

/* Tablas de datos */
.ingredientes-tabla,
.abonos-tabla {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid #e5e7eb;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.tabla-header {
  display: grid;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 20px;
  font-weight: 700;
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ingredientes-tabla .tabla-header {
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 15px;
}

.abonos-tabla .tabla-header {
  grid-template-columns: 1fr 1fr 2fr;
  gap: 15px;
}

.tabla-row {
  display: grid;
  padding: 18px 20px;
  border-bottom: 1px solid #f1f5f9;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.ingredientes-tabla .tabla-row {
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 15px;
}

.abonos-tabla .tabla-row {
  grid-template-columns: 1fr 1fr 2fr;
  gap: 15px;
}

.tabla-row:hover {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  transform: translateX(4px);
}

.tabla-row:last-child {
  border-bottom: none;
}

/* Campos específicos */
.nombre-ingrediente {
  font-weight: 500;
  color: #333;
}

.campo-cantidad,
.campo-costo,
.campo-importe {
  text-align: right;
  font-weight: 500;
}

.campo-importe {
  color: #28a745;
  font-weight: 600;
}

.campo-fecha {
  color: #666;
  font-weight: 500;
}

.monto-abono {
  color: #28a745;
  font-weight: 600;
  font-size: 1.05em;
}

.campo-referencia {
  color: #666;
  font-style: italic;
}

/* Footers de tabla */
.tabla-footer {
  background: #f8f9fa;
  padding: 15px;
  border-top: 2px solid #e9ecef;
  text-align: right;
}

.total-ingredientes,
.total-abonos {
  color: #333;
  font-size: 1.1em;
}

.total-ingredientes strong,
.total-abonos strong {
  color: #28a745;
}

/* Footer del modal */
.detalle-compra-modal .modal-footer {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  padding: 24px 28px;
  display: flex;
  justify-content: center;
  border-top: 2px solid #e5e7eb;
}

.detalle-compra-modal .btn-cerrar {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
  position: relative;
  overflow: hidden;
}

.detalle-compra-modal .btn-cerrar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.detalle-compra-modal .btn-cerrar:hover {
  background: linear-gradient(135deg, #4b5563, #374151);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107, 114, 128, 0.4);
}

.detalle-compra-modal .btn-cerrar:hover::before {
  left: 100%;
}

/* Responsividad */
@media (max-width: 768px) {
  .detalle-compra-modal {
    width: 98%;
    max-height: 95vh;
  }

  .resumen-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .tabs-header {
    flex-direction: column;
  }

  .tab-button {
    width: 100%;
    justify-content: center;
    border-bottom: none;
    border-left: 3px solid transparent;
  }

  .tab-button.active {
    border-left-color: #007bff;
    border-bottom-color: transparent;
  }

  .ingredientes-tabla .tabla-header,
  .ingredientes-tabla .tabla-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .abonos-tabla .tabla-header,
  .abonos-tabla .tabla-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .tabla-header {
    display: none;
  }

  .tabla-row {
    display: block;
    padding: 15px;
    background: white;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
  }

  .campo-ingrediente,
  .campo-cantidad,
  .campo-costo,
  .campo-importe,
  .campo-fecha,
  .campo-referencia {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .campo-ingrediente::before { content: "Ingrediente: "; font-weight: 600; color: #666; }
  .campo-cantidad::before { content: "Cantidad: "; font-weight: 600; color: #666; }
  .campo-costo::before { content: "Costo: "; font-weight: 600; color: #666; }
  .campo-importe::before { content: "Importe: "; font-weight: 600; color: #666; }
  .campo-fecha::before { content: "Fecha: "; font-weight: 600; color: #666; }
  .campo-referencia::before { content: "Referencia: "; font-weight: 600; color: #666; }

  .monto-abono::before { content: "Monto: "; font-weight: 600; color: #666; }

  .tabla-footer {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .resumen-grid {
    grid-template-columns: 1fr;
  }

  .sin-datos {
    padding: 40px 20px;
  }

  .sin-datos svg {
    font-size: 2em;
  }
}
/* src/components/Precios/ActualizarPrecios.css */
.actualizar-precios-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.actualizar-precios-content {
  flex: 1 1;
  margin: 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}

.actualizar-precios-inner {
  padding: 24px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header de la página */
.precios-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #f1f5f9;
}

.precios-titulo {
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 3px;
}

.precios-titulo::before {
  content: '💰';
  font-size: 14px;
}

/* Botón Guardar Principal */
.btn-guardar-principal {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
  position: relative;
  overflow: hidden;
}

/* Animación de parpadeo para el botón cuando hay cambios */
.btn-guardar-principal.btn-parpadeando {
  animation: parpadeo 1s ease-in-out infinite;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

@keyframes parpadeo {
  0% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
  }
}

.btn-guardar-principal::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-guardar-principal:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.btn-guardar-principal:hover:not(:disabled)::before {
  left: 100%;
}

.btn-guardar-principal:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Panel de filtros */
.panel-filtros {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 2px;
  margin-bottom: 2px;
  overflow: hidden;
  box-shadow: none;
}

.filtros-header {
  display: none;
}

.filtros-titulo {
  display: none;
}

.filtros-content {
  padding: 3px 6px;
}

.filtros-row-horizontal {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.filtro-item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: auto;
}

.filtro-item label {
  font-weight: 500;
  color: #374151;
  font-size: 10px;
  white-space: nowrap;
  min-width: -webkit-fit-content;
  min-width: fit-content;
}

.input-filtro,
.select-input {
  padding: 2px 6px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  font-size: 10px;
  transition: all 0.2s ease;
  background: white;
  height: 22px;
  width: 150px;
}

.input-filtro:focus,
.select-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filtro-boton-buscar {
  display: flex;
  align-items: center;
}

.btn-buscar {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  transition: all 0.3s ease;
  height: 22px;
  white-space: nowrap;
}

.btn-buscar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Panel de listado */
.panel-listado {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.listado-titulo {
  display: none;
}

.listado-titulo::before {
  display: none;
}

/* Tabla */
.tabla-container {
  flex: 1 1;
  overflow-y: auto;
  max-height: none;
  height: calc(100vh - 80px);
  border: 1px solid #d1d5db;
  border-radius: 2px;
}

.tabla-precios {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
  table-layout: fixed;
}

.tabla-precios thead {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabla-precios th {
  padding: 4px 6px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.tabla-precios td {
  padding: 3px 6px;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #f3f4f6;
  vertical-align: middle;
  font-size: 11px;
}

.tabla-precios tbody tr:hover {
  background-color: #f8fafc;
}

.tabla-precios tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.tabla-precios tbody tr:nth-child(even):hover {
  background-color: #f0f2ff;
}

.nombre-producto {
  font-weight: 600;
  color: #374151;
}

.categoria {
  color: #6b7280;
  font-style: italic;
}

.precio-actual {
  font-weight: 600;
  color: #059669;
  text-align: right;
}

.input-precio {
  width: 100%;
  max-width: 80px;
  padding: 2px 4px;
  border: 1px solid #d1d5db;
  border-radius: 2px;
  font-size: 11px;
  text-align: right;
  transition: all 0.2s ease;
}

.input-precio:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

/* Estilo para inputs modificados */
.input-precio.input-modificado {
  border: 2px solid #ef4444;
  background-color: #fef2f2;
  color: #dc2626;
  font-weight: 600;
  animation: pulso-rojo 1.5s ease-in-out infinite;
}

.input-precio.input-modificado:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

@keyframes pulso-rojo {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
}

/* Ocultar las flechas del input number */
.input-precio::-webkit-outer-spin-button,
.input-precio::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-precio[type=number] {
  -moz-appearance: textfield;
}

/* Estados de carga y sin datos */
.cargando,
.sin-datos {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
  font-size: 16px;
  background: white;
}

.cargando {
  color: #667eea;
  font-weight: 500;
}

.sin-datos {
  color: #9ca3af;
}

/* Contenedor de acciones */
.acciones-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

.info-productos {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.exportar-opciones {
  display: flex;
  gap: 12px;
}

.btn-exportar,
.btn-imprimir {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  background: white;
  color: #374151;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-exportar:hover,
.btn-imprimir:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

.icono-exportar,
.icono-imprimir {
  font-size: 14px;
}

/* Responsivo */
@media (max-width: 1024px) {
  .actualizar-precios-content {
    margin: 10px;
  }
  
  .actualizar-precios-inner {
    padding: 16px;
  }
  
  /* Mantener filtros horizontales sin cambios */
  .filtros-row-horizontal {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto; /* Permitir scroll horizontal si es necesario */
  }
  
  .filtro-item {
    min-width: -webkit-fit-content;
    min-width: fit-content;
    flex-shrink: 0; /* Evitar que se compriman */
  }
}

@media (max-width: 768px) {
  .precios-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .precios-titulo {
    font-size: 24px;
  }
  
  /* Mantener filtros sin cambios en móvil */
  .panel-filtros {
    overflow-x: auto; /* Permitir scroll horizontal */
  }
  
  .filtros-row-horizontal {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-width: -webkit-fit-content;
    min-width: fit-content;
  }
  
  .filtro-item {
    min-width: -webkit-fit-content;
    min-width: fit-content;
    flex-shrink: 0;
  }
  
  .tabla-container {
    overflow-x: auto;
  }
  
  .tabla-precios {
    min-width: 600px;
  }
  
  .acciones-container {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .exportar-opciones {
    justify-content: center;
  }
}
/* src/components/MalasOrdenesGarantias/MalasOrdenesGarantias.css */
.malas-ordenes-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.malas-ordenes-content {
  flex: 1 1;
  margin: 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}

.malas-ordenes-inner {
  padding: 24px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Header */
.malas-ordenes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.malas-ordenes-titulo {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-cerrar {
  background: transparent;
  color: #764ba2;
  border: 2px solid #764ba2;
  padding: 10px 24px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  min-width: 120px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-cerrar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  transition: left 0.3s ease;
  z-index: -1;
}

.btn-cerrar:hover {
  color: white;
  border-color: #667eea;
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-cerrar:hover::before {
  left: 0;
}

.btn-cerrar:active {
  transform: scale(0.98);
}

/* Panel de búsqueda */
.panel-busqueda {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.busqueda-header {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
}

.busqueda-titulo {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin: 0;
}

.busqueda-content {
  padding: 12px;
}

.busqueda-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.input-busqueda {
  flex: 1 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.2s ease;
  background: white;
}

.input-busqueda:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.btn-buscar {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  transition: all 0.3s ease;
}

.btn-buscar:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-buscar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Panel información del pedido */
.panel-info-pedido {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.info-header {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
}

.info-titulo {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin: 0;
}

.info-content {
  padding: 12px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-item span {
  font-size: 13px;
  color: #1e293b;
  font-weight: 500;
}

/* Panel de productos */
.panel-productos {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.productos-header {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
}

.productos-titulo {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin: 0;
}

.productos-content {
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
}

/* Tablas */
.tabla-productos,
.tabla-registro {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
}

.tabla-productos thead,
.tabla-registro thead {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabla-productos th,
.tabla-registro th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.tabla-productos th:last-child,
.tabla-registro th:last-child {
  border-right: none;
}

.tabla-productos td,
.tabla-registro td {
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  font-size: 12px;
  color: #374151;
}

.tabla-productos tbody tr:hover,
.tabla-registro tbody tr:hover {
  background-color: #f8fafc;
}

.tabla-productos tbody tr:nth-child(even),
.tabla-registro tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.sin-productos {
  text-align: center;
  padding: 20px;
  color: #9ca3af;
  font-style: italic;
}

/* Estados y badges */
.estado-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: #e5e7eb;
  color: #6b7280;
}

/* Acciones en tabla */
.acciones-cell {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
}

.btn-accion {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-mala-orden {
  background: #ef4444;
  color: white;
}

.btn-mala-orden:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.btn-garantia {
  background: #f59e0b;
  color: white;
}

.btn-garantia:hover {
  background: #d97706;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

/* Paneles de registro */
.paneles-registro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-registro {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.panel-mala-orden {
  border: 2px solid #ffcdd2;
}

.panel-garantia {
  border: 2px solid #ffe0b2;
}

.registro-header {
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
}

.panel-mala-orden .registro-header {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
}

.panel-garantia .registro-header {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.registro-titulo {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.panel-mala-orden .registro-titulo {
  color: #d32f2f;
}

.panel-garantia .registro-titulo {
  color: #f57c00;
}

.registro-content {
  padding: 0;
  max-height: 250px;
  overflow-y: auto;
}

/* Input motivo */
.input-motivo {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 11px;
  transition: all 0.2s ease;
}

.input-motivo:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

/* Botón remover */
.btn-remover {
  background: #e57373;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.btn-remover:hover {
  background: #ef5350;
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Footer de acciones */
.acciones-footer {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.btn-guardar-principal {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-guardar-principal:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.btn-guardar-principal:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Animación de carga */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading {
  text-align: center;
  padding: 40px;
  color: #667eea;
  font-size: 16px;
  font-weight: 500;
}

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

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Responsivo */
@media (max-width: 1024px) {
  .malas-ordenes-content {
    margin: 10px;
  }

  .malas-ordenes-inner {
    padding: 16px;
  }

  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .paneles-registro {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .malas-ordenes-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .malas-ordenes-titulo {
    font-size: 16px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .busqueda-row {
    flex-direction: column;
    gap: 8px;
  }

  .input-busqueda {
    width: 100%;
  }

  .btn-buscar {
    width: 100%;
    justify-content: center;
  }

  .productos-content,
  .registro-content {
    overflow-x: auto;
  }

  .tabla-productos,
  .tabla-registro {
    min-width: 600px;
  }

  .acciones-cell {
    flex-direction: column;
    gap: 4px;
  }

  .btn-accion {
    width: 100%;
  }
}
/* Promociones - Catálogo estilo Excel */
.promociones-container {
  background: linear-gradient(135deg, #CDDC39 0%, #AFB42B 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.promo-excel {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  margin: 0 16px 16px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ─── Tipo Badge ──────────────────────────────────────────────── */
.promo-tipo-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.promo-tipo-badge--t1 {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}

.promo-tipo-badge--t2 {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.promo-tipo-badge--t3 {
  background: #f3e5f5;
  color: #7b1fa2;
  border: 1px solid #ce93d8;
}

/* ─── Aplica Badges ───────────────────────────────────────────── */
.promo-aplica-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.promo-aplica-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 500;
  background: #f5f5f5;
  color: #616161;
  border: 1px solid #e0e0e0;
  white-space: nowrap;
}

/* ─── Toggle Switch ───────────────────────────────────────────── */
.promo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  transition: all 0.2s ease;
  min-width: 58px;
  justify-content: center;
}

.promo-toggle--on {
  background: #c8e6c9;
  color: #2e7d32;
}

.promo-toggle--on:hover {
  background: #a5d6a7;
}

.promo-toggle--off {
  background: #ffcdd2;
  color: #c62828;
}

.promo-toggle--off:hover {
  background: #ef9a9a;
}

.promo-toggle-slider {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.promo-toggle--on .promo-toggle-slider {
  background: #2e7d32;
}

.promo-toggle--off .promo-toggle-slider {
  background: #c62828;
}

/* ─── Modal: Tipo de promoción selector ───────────────────────── */
.promo-tipo-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.promo-tipo-option {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  background: #fafafa;
}

.promo-tipo-option input[type="radio"] {
  display: none;
}

.promo-tipo-option:hover {
  border-color: #bdbdbd;
  background: #f5f5f5;
}

.promo-tipo-option--active {
  border-color: #CDDC39;
  background: #f9fbe7;
  color: #33691e;
}

.promo-tipo-icon {
  font-size: 16px;
  color: #9e9e9e;
}

.promo-tipo-option--active .promo-tipo-icon {
  color: #689f38;
}

/* ─── Modal: Config por tipo ──────────────────────────────────── */
.promo-tipo-config {
  padding: 10px 0;
}

.promo-config-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #555;
}

.promo-config-row label {
  font-weight: 500;
  white-space: nowrap;
}

.promo-config-input {
  width: 80px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
}

.promo-config-input:focus {
  outline: none;
  border-color: #CDDC39;
  box-shadow: 0 0 0 2px rgba(205, 220, 57, 0.2);
}

.promo-config-hint {
  font-size: 11px;
  color: #9e9e9e;
  font-style: italic;
}

.promo-config-combo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─── Modal: Tipo de pedido grid ──────────────────────────────── */
.promo-tipo-pedido-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.promo-tipo-pedido-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
  background: #fafafa;
}

.promo-tipo-pedido-item input[type="checkbox"] {
  display: none;
}

.promo-tipo-pedido-item:hover {
  border-color: #bdbdbd;
}

.promo-tipo-pedido-item--active {
  border-color: #CDDC39;
  background: #f9fbe7;
  color: #33691e;
  font-weight: 500;
}

/* ─── Modal: Días de la semana grid ───────────────────────────── */
.promo-dias-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.promo-dias-grid {
  display: flex;
  gap: 6px;
  flex: 1 1;
}

.promo-dia-item {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
  background: #fafafa;
  text-align: center;
}

.promo-dia-item input[type="checkbox"] {
  display: none;
}

.promo-dia-item:hover {
  border-color: #bdbdbd;
}

.promo-dia-item--active {
  border-color: #CDDC39;
  background: #f9fbe7;
  color: #33691e;
}

.promo-dias-toggle-btn {
  padding: 6px 12px;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: #555;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.promo-dias-toggle-btn:hover {
  background: #f5f5f5;
  border-color: #999;
}

/* ─── Modal: Selector de platillos ────────────────────────────── */
.promo-platillos-selector {
  position: relative;
}

.promo-platillos-search {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 10px;
}

.promo-platillos-search-icon {
  color: #888;
  font-size: 13px;
  margin-right: 8px;
}

.promo-platillos-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  flex: 1 1;
  color: #333;
}

.promo-platillos-clear {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 12px;
  padding: 2px;
  display: flex;
  align-items: center;
}

.promo-platillos-clear:hover {
  color: #f44336;
}

.promo-platillos-dropdown {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  max-height: 180px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.promo-platillos-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s;
  border-bottom: 1px solid #f5f5f5;
}

.promo-platillos-option:last-child {
  border-bottom: none;
}

.promo-platillos-option:hover {
  background: #f9fbe7;
}

.promo-platillos-option--selected {
  color: #9e9e9e;
  cursor: default;
  font-style: italic;
}

.promo-platillos-option--selected:hover {
  background: transparent;
}

/* ─── Platillos list (chips) ──────────────────────────────────── */
.promo-platillos-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  background: #fafafa;
  border: 1px solid #eeeeee;
  border-radius: 6px;
}

.promo-platillo-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #c8e6c9;
}

.promo-platillo-chip-remove {
  background: none;
  border: none;
  color: #c62828;
  cursor: pointer;
  font-size: 9px;
  padding: 1px;
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.promo-platillo-chip-remove:hover {
  opacity: 1;
}

.promo-platillos-clear-all {
  padding: 4px 8px;
  background: transparent;
  border: 1px dashed #bdbdbd;
  border-radius: 12px;
  font-size: 10px;
  color: #9e9e9e;
  cursor: pointer;
  transition: all 0.2s ease;
}

.promo-platillos-clear-all:hover {
  border-color: #f44336;
  color: #f44336;
  background: #ffebee;
}

/* ─── Modal 2 columnas ────────────────────────────────────────── */
.promo-modal {
  width: 95vw !important;
  max-width: 1400px !important;
}

.promo-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  align-items: start;
}

.promo-modal-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.promo-modal-col:last-child .promo-platillos-selector {
  min-height: 300px;
}

.promo-modal-col:last-child .promo-platillos-list {
  max-height: 400px;
  overflow-y: auto;
}

/* ─── Sección en el modal ─────────────────────────────────────── */
.promo-seccion {
  background: #fafafa;
  border: 1px solid #eeeeee;
  border-radius: 6px;
  padding: 12px;
}

.promo-seccion h4 {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin: 0 0 8px 0;
}

/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .promo-modal-grid {
    grid-template-columns: 1fr;
  }

  .promo-modal-col:last-child .promo-platillos-selector {
    min-height: auto;
  }
}

@media (max-width: 1024px) {
  .promo-tipo-selector {
    flex-direction: column;
  }

  .promo-dias-grid {
    flex-wrap: wrap;
  }

  .promo-dia-item {
    min-width: 50px;
  }
}

@media (max-width: 768px) {
  .promo-excel {
    margin: 0 8px 8px 8px;
  }

  .promo-tipo-pedido-grid {
    flex-direction: column;
  }

  .promo-dias-container {
    flex-direction: column;
    align-items: stretch;
  }

  .promo-dias-grid {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ─── Scrollbar ───────────────────────────────────────────────── */
.promo-platillos-dropdown::-webkit-scrollbar {
  width: 6px;
}

.promo-platillos-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.promo-platillos-dropdown::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.promo-platillos-dropdown::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* src/components/Inventario/Inventario.css */
.inventario-wrapper {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.inventario-container {
  display: flex;
  flex: 1 1;
  overflow: hidden;
}

/* Menú lateral */
.menu-lateral {
  width: 280px;
  background: white;
  border-right: 1px solid #e2e8f0;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow-y: auto;
  z-index: 100;
}

.menu-lateral.cerrado {
  width: 60px;
}

.menu-header {
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.toggle-menu {
  background: transparent;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.toggle-menu:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-titulo {
  font-weight: 600;
  font-size: 14px;
}

.menu-lateral.cerrado .menu-titulo {
  display: none;
}

/* Items del menú */
.menu-items {
  padding: 8px 0;
}

.menu-item {
  margin-bottom: 4px;
}

.menu-item-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  border-left: 3px solid transparent;
}

.menu-item-header:hover {
  background: #f8fafc;
  color: #667eea;
}

.menu-item-header.activo {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  color: #667eea;
  border-left-color: #667eea;
  font-weight: 600;
}

.menu-item-header.inventario-directo {
  font-weight: 600;
}

.menu-item-header.salir {
  color: #ef4444;
  margin-top: 20px;
}

.menu-item-header.salir:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Submenú */
.submenu {
  background: #f8fafc;
  border-left: 3px solid #e2e8f0;
  margin-left: 16px;
}

.submenu-item {
  padding: 10px 20px;
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
}

.submenu-item:hover {
  background: white;
  color: #667eea;
  border-left-color: #667eea;
}

.submenu-item.activo {
  background: white;
  color: #667eea;
  border-left-color: #667eea;
  font-weight: 500;
}

.menu-lateral.cerrado .submenu {
  display: none;
}

.menu-lateral.cerrado .menu-item-header span {
  display: none;
}

/* Panel de búsqueda */
.panel-busqueda {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.busqueda-content {
  padding: 12px;
}

.busqueda-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.form-group {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.input-busqueda {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.2s ease;
  background: white;
  width: 300px;
}

.input-busqueda:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Contenido principal */
.inventario-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inventario-content.con-menu {
  margin-left: 0;
}

.inventario-content.sin-menu {
  margin-left: 0;
}

.inventario-inner {
  margin: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  border: none;
  padding: 20px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  max-height: calc(100vh - 140px);
}

.inventario-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.inventario-titulo {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Panel de inventario */
.panel-inventario {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Tabla de inventario */
.tabla-container {
  flex: 1 1;
  overflow-y: auto;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
}

.tabla-inventario {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  background: white;
  table-layout: fixed;
}

.tabla-inventario thead {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabla-inventario th {
  padding: 8px 6px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(255,255,255,0.2);
  white-space: nowrap;
}

.tabla-inventario th:last-child {
  border-right: none;
}

.tabla-inventario td {
  padding: 6px;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #f3f4f6;
  vertical-align: middle;
  font-size: 10px;
  color: #374151;
}

.tabla-inventario tbody tr:hover {
  background-color: #f8fafc;
}

.tabla-inventario tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* Estilos específicos para columnas */
.producto-nombre {
  font-weight: 600;
  color: #1e293b;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linea-nombre {
  color: #6b7280;
  font-size: 9px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monto {
  text-align: right;
  font-weight: 500;
  color: #059669;
  font-family: 'Courier New', monospace;
}

.existencias {
  text-align: right;
  font-weight: 600;
  color: #2563eb;
  font-family: 'Courier New', monospace;
}

.por-comprar {
  text-align: right;
  font-weight: 500;
  font-family: 'Courier New', monospace;
}

.text-center {
  text-align: center;
}

/* Totales */
.totales-container {
  background: #f1f5f9;
  border-top: 2px solid #e2e8f0;
  padding: 8px 12px;
}

.totales-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  font-weight: 600;
  font-size: 12px;
}

.total-label {
  color: #374151;
}

.total-existencias {
  color: #2563eb;
  font-family: 'Courier New', monospace;
}

.total-monto {
  color: #059669;
  font-family: 'Courier New', monospace;
}

/* Botones de acción */
.acciones-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 15px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.btn-accion {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  transition: all 0.3s ease;
  white-space: nowrap;
  min-width: 120px;
  height: 36px;
  text-align: center;
}

.btn-inventario-inicial {
  background: #3b82f6;
  color: white;
}

.btn-inventario-inicial:hover {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-ajuste {
  background: #f59e0b;
  color: white;
}

.btn-ajuste:hover {
  background: #d97706;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-entrada {
  background: #10b981;
  color: white;
}

.btn-entrada:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-salida {
  background: #ef4444;
  color: white;
}

.btn-salida:hover {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-exportar {
  background: #8b5cf6;
  color: white;
}

.btn-exportar:hover {
  background: #7c3aed;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.btn-cerrar {
  background: transparent;
  color: #764ba2;
  border: 2px solid #764ba2;
}

.btn-cerrar:hover {
  background: #764ba2;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(118, 75, 162, 0.3);
}

/* Estilos para catálogos */
.catalogo-container {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  min-height: 0;
}

/* Layout especial para proveedores - 50/50 */
.catalogo-container.layout-horizontal {
  display: flex;
  flex-direction: column;
}

.catalogo-content-horizontal {
  display: flex;
  flex: 1 1;
  gap: 20px;
  overflow: hidden;
}

.catalogo-formulario-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.catalogo-tabla-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.catalogo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.catalogo-titulo {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.catalogo-acciones {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  margin-top: 12px;
}

.btn-accion {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  transition: all 0.3s ease;
  white-space: nowrap;
  min-width: 140px;
  height: 38px;
  text-align: center;
}

.btn-nuevo {
  background: #3b82f6;
  color: white;
}

.btn-nuevo:hover:not(:disabled) {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-guardar {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.btn-guardar:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-eliminar {
  background: #ef4444;
  color: white;
}

.btn-eliminar:hover:not(:disabled) {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-cerrar {
  background: transparent;
  color: #764ba2;
  border: 2px solid #764ba2;
}

.btn-cerrar:hover {
  background: #764ba2;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(118, 75, 162, 0.3);
}

.btn-accion:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-accion:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Formularios */
.catalogo-formulario {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  flex-shrink: 0;
  max-height: 350px;
  overflow-y: auto;
}

/* Formulario en layout horizontal */
.catalogo-formulario-section .catalogo-formulario {
  flex: 1 1;
  max-height: none;
  height: 100%;
  margin-bottom: 0;
}

.catalogo-formulario::-webkit-scrollbar {
  width: 6px;
}

.catalogo-formulario::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.catalogo-formulario::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.catalogo-formulario::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.formulario-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  align-items: flex-end;
}

.form-group {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.input-form {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.2s ease;
  background: white;
}

.input-form:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input-form:disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.7;
}

select.input-form:disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
}

.text-right {
  text-align: right;
}

/* Tablas */
.catalogo-tabla-container {
  flex: 1 1;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tabla-header {
  padding: 12px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.tabla-titulo {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin: 0;
}

.tabla-content {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 0;
  max-height: 100%;
}

.tabla-catalogo {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
}

.tabla-catalogo thead {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabla-catalogo th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.tabla-catalogo th:last-child {
  border-right: none;
}

.tabla-catalogo td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  color: #374151;
}

.tabla-catalogo tbody tr:hover {
  background-color: #f8fafc;
}

.tabla-catalogo tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.tabla-catalogo tbody tr.seleccionado {
  background-color: #e0f2fe;
}

.tabla-catalogo tbody tr {
  cursor: pointer;
}

/* Botones de tabla */
.btn-tabla-accion {
  background: transparent;
  border: 1px solid #d1d5db;
  color: #6b7280;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  margin: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
}

.btn-tabla-accion:hover {
  background: #667eea;
  color: white;
  border-color: #667eea;
  transform: scale(1.1);
}

.btn-tabla-accion.eliminar:hover {
  background: #ef4444;
  border-color: #ef4444;
}

.sin-datos {
  text-align: center;
  padding: 40px;
  color: #9ca3af;
  font-style: italic;
}

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

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Responsivo */
@media (max-width: 1024px) {
  .inventario-wrapper {
    position: relative;
  }

  .menu-lateral.abierto {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    width: 280px;
  }

  .inventario-content {
    margin: 20px;
    margin-left: 20px;
  }

  /* En tablets reducir gap y ajustar layout */
  .catalogo-content-horizontal {
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .inventario-content {
    margin: 10px;
  }

  .inventario-inner {
    padding: 16px;
  }

  .formulario-row {
    flex-direction: column;
  }

  .catalogo-acciones {
    flex-wrap: wrap;
  }

  .tabla-content {
    overflow-x: auto;
  }

  .tabla-catalogo {
    min-width: 600px;
  }

  .catalogo-formulario {
    max-height: 250px;
  }

  /* En móviles volver al layout vertical */
  .catalogo-content-horizontal {
    flex-direction: column;
    gap: 15px;
  }

  .catalogo-formulario-section,
  .catalogo-tabla-section {
    flex: none;
  }

  .catalogo-formulario-section .catalogo-formulario {
    height: auto;
    max-height: 200px;
    margin-bottom: 15px;
  }
}

/* Estilos para formularios en modales */
.modal-inventario-form,
.modal-ajuste-form,
.modal-entrada-form,
.modal-salida-form,
.modal-exportar-form {
  padding: 10px;
}

.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.form-group.full-width {
  width: 100%;
}

.form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

select.form-control {
  background-color: white;
  cursor: pointer;
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

/* Tablas en modales */
.tabla-productos-modal,
.productos-entrada {
  margin: 20px 0;
}

.tabla-modal {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.tabla-modal thead {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.tabla-modal th {
  padding: 12px;
  text-align: left;
  font-weight: 500;
  font-size: 14px;
}

.tabla-modal td {
  padding: 10px 12px;
  border-bottom: 1px solid #e0e0e0;
}

.tabla-modal tbody tr:hover {
  background-color: #f8f9fa;
}

.tabla-modal .form-control {
  margin: 0;
  padding: 6px 10px;
}

/* Botón agregar producto */
.btn-add-producto {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  transition: all 0.2s ease;
}

.btn-add-producto:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Botón remover */
.btn-remove {
  background: #f56565;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-remove:hover {
  background: #e53e3e;
}

/* Productos entrada */
.productos-entrada h3 {
  margin-bottom: 15px;
  color: #333;
  font-size: 18px;
}

/* Opciones de exportación */
.export-options {
  padding: 20px;
}

.export-options h3 {
  margin-bottom: 20px;
  color: #333;
  font-size: 16px;
}

.export-options .form-group {
  margin-bottom: 15px;
}

.export-options label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}

.export-options input[type="radio"],
.export-options input[type="checkbox"] {
  margin-right: 10px;
  cursor: pointer;
}
/* Estilos para el Catálogo de Proveedores estilo Excel */

.catalogo-proveedores-excel {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Header con botones de acción */
.excel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom: none;
  flex-shrink: 0;
}

.excel-header-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.excel-titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.excel-acciones {
  display: flex;
  gap: 8px;
}

.btn-excel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
  min-width: 80px;
  justify-content: center;
}

.btn-excel:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.btn-excel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-nuevo {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.btn-nuevo:hover {
  background: rgba(255, 255, 255, 0.3);
}

.btn-guardar {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.btn-guardar:hover {
  background: rgba(255, 255, 255, 0.3);
}

.btn-eliminar {
  background: rgba(255, 67, 54, 0.2);
  border: 1px solid rgba(255, 67, 54, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.btn-eliminar:hover {
  background: rgba(255, 67, 54, 0.3);
}

/* Estilos para el input de búsqueda */
.excel-search-container {
  display: flex;
  align-items: center;
}

.excel-search-group {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border-radius: 4px;
  padding: 4px 8px;
  border: 1px solid #ced4da;
}

.search-icon {
  color: #666;
  font-size: 14px;
  margin-right: 8px;
}

.excel-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #333;
  width: 250px;
  padding: 4px 0;
}

.excel-search-input::placeholder {
  color: #999;
  font-style: italic;
}

.excel-clear-search {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 2px;
  margin-left: 6px;
  border-radius: 3px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.excel-clear-search:hover {
  color: #f44336;
  background: rgba(244, 67, 54, 0.1);
}

/* Espaciado adicional para compensar la eliminación de inputs */

/* Contenedor de tabla estilo Excel */
.excel-table-container {
  flex: 1 1;
  overflow: auto;
  background: white;
  border: 1px solid #e2e8f0;
  margin: 12px;
  border-radius: 6px;
}

.excel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
}

.excel-th {
  background: linear-gradient(to bottom, #f8f9fa 0%, #f1f3f5 100%);
  border: 1px solid #dee2e6;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: #495057;
  white-space: nowrap;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.excel-th-actions {
  width: 80px;
  text-align: center;
}

.excel-row {
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.excel-row:hover {
  background-color: #f5f5f5;
}

.excel-row-selected {
  background-color: #e3f2fd !important;
}

.excel-row-selected:hover {
  background-color: #bbdefb !important;
}

.excel-cell {
  border: 1px solid #e9ecef;
  padding: 8px 12px;
  font-size: 13px;
  color: #495057;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.excel-cell-nombre {
  font-weight: 500;
  color: #1976d2;
  max-width: 200px;
}

.excel-cell-small {
  max-width: 100px;
}

.excel-cell-xsmall {
  max-width: 60px;
}

.excel-cell-actions {
  text-align: center;
  width: 80px;
  padding: 2px 4px;
}

.excel-btn-action {
  padding: 3px 6px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  margin: 0 1px;
  transition: all 0.2s ease;
}

.excel-btn-edit {
  background: #2196F3;
  color: white;
}

.excel-btn-edit:hover {
  background: #1976D2;
}

.excel-btn-delete {
  background: #f44336;
  color: white;
}

.excel-btn-delete:hover {
  background: #d32f2f;
}

.excel-loading,
.excel-empty {
  text-align: center;
  padding: 40px;
  font-style: italic;
  color: #666;
  background: #f9f9f9;
}

/* Footer */
.excel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  font-size: 12px;
  color: #6c757d;
  flex-shrink: 0;
}

.excel-info {
  display: flex;
  gap: 16px;
}

.excel-shortcuts {
  font-style: italic;
}

/* Responsive */
@media (max-width: 1200px) {
  /* Responsive para pantallas medianas */
}

@media (max-width: 768px) {
  .excel-header {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .excel-header-controls {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .excel-search-input {
    width: 200px;
  }

  .excel-acciones {
    justify-content: center;
  }

  .excel-footer {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  .excel-table {
    font-size: 11px;
  }

  .excel-cell {
    padding: 3px 6px;
  }
}

/* Estilos para scroll suave */
.excel-table-container::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

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

.excel-table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 6px;
}

.excel-table-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Efectos de selección */
.excel-cell:hover {
  background-color: rgba(33, 150, 243, 0.05);
}

.excel-row-selected .excel-cell:hover {
  background-color: rgba(33, 150, 243, 0.15);
}

/* Estados de validación */
.excel-input.error {
  border-color: #f44336;
  box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2);
}

.excel-input.success {
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
/* Estilos para el Catálogo de Insumos estilo Excel */

.catalogo-proveedores-excel {
  width: 100%;
  height: 100%;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Header con botones de acción */
.excel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.excel-header-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.excel-titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.excel-acciones {
  display: flex;
  gap: 8px;
}

.btn-excel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
  min-width: 80px;
  justify-content: center;
}

.btn-excel:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.btn-excel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-nuevo {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}

.btn-guardar {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
}

.btn-eliminar {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
}

/* Estilos para el input de búsqueda */
.excel-search-container {
  display: flex;
  align-items: center;
}

.excel-search-group {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-icon {
  color: #666;
  font-size: 14px;
  margin-right: 8px;
}

.excel-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #333;
  width: 250px;
  padding: 4px 0;
}

.excel-search-input::placeholder {
  color: #999;
  font-style: italic;
}

.excel-clear-search {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 2px;
  margin-left: 6px;
  border-radius: 3px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.excel-clear-search:hover {
  color: #f44336;
  background: rgba(244, 67, 54, 0.1);
}

/* Contenedor de tabla estilo Excel */
.excel-table-container {
  flex: 1 1;
  overflow: auto;
  background: white;
  border: 1px solid #d0d0d0;
  margin: 16px 16px 16px 16px;
}

.excel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
}

.excel-th {
  background: linear-gradient(to bottom, #f0f0f0 0%, #e0e0e0 100%);
  border: 1px solid #c0c0c0;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: #333;
  white-space: nowrap;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.excel-th-actions {
  width: 80px;
  text-align: center;
}

.excel-row {
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.excel-row:hover {
  background-color: #f5f5f5;
}

.excel-row-selected {
  background-color: #e3f2fd !important;
}

.excel-row-selected:hover {
  background-color: #bbdefb !important;
}

.excel-cell {
  border: 1px solid #e0e0e0;
  padding: 4px 8px;
  font-size: 12px;
  color: #333;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.excel-cell-nombre {
  font-weight: 500;
  color: #1976d2;
  max-width: 200px;
}

.excel-cell-small {
  max-width: 100px;
}

.excel-cell-xsmall {
  max-width: 60px;
}

.excel-cell-actions {
  text-align: center;
  width: 80px;
  padding: 2px 4px;
}

.excel-btn-action {
  padding: 3px 6px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  margin: 0 1px;
  transition: all 0.2s ease;
}

.excel-btn-edit {
  background: #2196F3;
  color: white;
}

.excel-btn-edit:hover {
  background: #1976D2;
}

.excel-btn-delete {
  background: #f44336;
  color: white;
}

.excel-btn-delete:hover {
  background: #d32f2f;
}

.excel-loading,
.excel-empty {
  text-align: center;
  padding: 40px;
  font-style: italic;
  color: #666;
  background: #f9f9f9;
}

/* Footer */
.excel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  font-size: 11px;
  color: #666;
  flex-shrink: 0;
}

.excel-info {
  display: flex;
  gap: 16px;
}

.excel-shortcuts {
  font-style: italic;
}

/* Estilos específicos para insumos */
.text-right {
  text-align: right !important;
}

.estado-stock {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stock-ok {
  background-color: #e8f5e8;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

.stock-bajo {
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #ffcdd2;
  animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Responsive */
@media (max-width: 1200px) {
  /* Responsive para pantallas medianas */
}

@media (max-width: 768px) {
  .excel-header {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .excel-header-controls {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .excel-search-input {
    width: 200px;
  }

  .excel-acciones {
    justify-content: center;
  }

  .excel-footer {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  .excel-table {
    font-size: 11px;
  }

  .excel-cell {
    padding: 3px 6px;
  }
}

/* Estilos para scroll suave */
.excel-table-container::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

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

.excel-table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 6px;
}

.excel-table-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Botón de ajuste de inventario */
.btn-ajuste {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
}

/* Botón de exportar */
.btn-exportar {
  background: linear-gradient(135deg, #607D8B 0%, #455A64 100%);
}

/* ==================== Modal Ajuste Masivo ==================== */
.modal-ajuste-inventario {
  width: 90vw !important;
  max-width: 1400px !important;
}

.ajuste-search-bar {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 10px;
}

.ajuste-search-icon {
  color: #888;
  font-size: 13px;
  margin-right: 8px;
}

.ajuste-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  flex: 1 1;
  color: #333;
}

.ajuste-clear-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 12px;
  padding: 2px;
  display: flex;
  align-items: center;
}

.ajuste-clear-btn:hover {
  color: #f44336;
}

.ajuste-table-wrapper {
  overflow-y: auto;
  max-height: calc(80vh - 140px);
  border: 1px solid #ddd;
  border-radius: 4px;
}

.ajuste-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.ajuste-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 5;
}

.ajuste-table th {
  background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
  border: 1px solid #c0c0c0;
  padding: 7px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: #333;
  white-space: nowrap;
}

.ajuste-table td {
  border: 1px solid #e0e0e0;
  padding: 4px 8px;
  color: #333;
  white-space: nowrap;
}

.ajuste-cell-nombre {
  font-weight: 500;
  color: #1976d2;
}

.ajuste-cell-number {
  text-align: right;
  font-family: 'Consolas', monospace;
}

.ajuste-cell-input {
  padding: 2px 4px !important;
  width: 130px;
}

.ajuste-input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 12px;
  font-family: 'Consolas', monospace;
  text-align: right;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.ajuste-input:focus {
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.15);
}

.ajuste-input-up {
  border-color: #4CAF50;
  background-color: #f1f8e9;
}

.ajuste-input-down {
  border-color: #f44336;
  background-color: #fce4ec;
}

.ajuste-cell-diff {
  text-align: right;
  font-family: 'Consolas', monospace;
  font-weight: 500;
  color: #999;
}

.diff-positive {
  color: #2e7d32;
  background-color: #e8f5e9;
}

.diff-negative {
  color: #c62828;
  background-color: #ffebee;
}

.ajuste-row-changed {
  background-color: #fffde7 !important;
}

/* Efectos de selección */
.excel-cell:hover {
  background-color: rgba(33, 150, 243, 0.05);
}

.excel-row-selected .excel-cell:hover {
  background-color: rgba(33, 150, 243, 0.15);
}

/* Estados de validación */
.excel-input.error {
  border-color: #f44336;
  box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2);
}

.excel-input.success {
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
/* Estilos para el Catálogo de Unidades estilo Excel */

.catalogo-proveedores-excel {
  width: 100%;
  height: 100%;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Header con botones de acción */
.excel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.excel-header-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.excel-titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.excel-acciones {
  display: flex;
  gap: 8px;
}

.btn-excel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  color: white;
  min-width: 80px;
  justify-content: center;
}

.btn-excel:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.btn-excel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-nuevo {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}

.btn-guardar {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
}

.btn-eliminar {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
}

/* Estilos para el input de búsqueda */
.excel-search-container {
  display: flex;
  align-items: center;
}

.excel-search-group {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-icon {
  color: #666;
  font-size: 14px;
  margin-right: 8px;
}

.excel-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #333;
  width: 250px;
  padding: 4px 0;
}

.excel-search-input::placeholder {
  color: #999;
  font-style: italic;
}

.excel-clear-search {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 2px;
  margin-left: 6px;
  border-radius: 3px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.excel-clear-search:hover {
  color: #f44336;
  background: rgba(244, 67, 54, 0.1);
}

/* Contenedor de tabla estilo Excel */
.excel-table-container {
  flex: 1 1;
  overflow: auto;
  background: white;
  border: 1px solid #d0d0d0;
  margin: 16px 16px 16px 16px;
}

.excel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
}

.excel-th {
  background: linear-gradient(to bottom, #f0f0f0 0%, #e0e0e0 100%);
  border: 1px solid #c0c0c0;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: #333;
  white-space: nowrap;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.excel-th-actions {
  width: 80px;
  text-align: center;
}

.excel-row {
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.excel-row:hover {
  background-color: #f5f5f5;
}

.excel-row-selected {
  background-color: #e3f2fd !important;
}

.excel-row-selected:hover {
  background-color: #bbdefb !important;
}

.excel-cell {
  border: 1px solid #e0e0e0;
  padding: 4px 8px;
  font-size: 12px;
  color: #333;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.excel-cell-nombre {
  font-weight: 500;
  color: #1976d2;
  max-width: 200px;
}

.excel-cell-small {
  max-width: 100px;
}

.excel-cell-xsmall {
  max-width: 60px;
}

.excel-cell-actions {
  text-align: center;
  width: 80px;
  padding: 2px 4px;
}

.excel-btn-action {
  padding: 3px 6px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  margin: 0 1px;
  transition: all 0.2s ease;
}

.excel-btn-edit {
  background: #2196F3;
  color: white;
}

.excel-btn-edit:hover {
  background: #1976D2;
}

.excel-btn-delete {
  background: #f44336;
  color: white;
}

.excel-btn-delete:hover {
  background: #d32f2f;
}

.excel-loading,
.excel-empty {
  text-align: center;
  padding: 40px;
  font-style: italic;
  color: #666;
  background: #f9f9f9;
}

/* Footer */
.excel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  font-size: 11px;
  color: #666;
  flex-shrink: 0;
}

.excel-info {
  display: flex;
  gap: 16px;
}

.excel-shortcuts {
  font-style: italic;
}

/* Estilos específicos para unidades */
.prefijo-badge {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
  min-width: 20px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Responsive */
@media (max-width: 1200px) {
  /* Responsive para pantallas medianas */
}

@media (max-width: 768px) {
  .excel-header {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .excel-header-controls {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .excel-search-input {
    width: 200px;
  }

  .excel-acciones {
    justify-content: center;
  }

  .excel-footer {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  .excel-table {
    font-size: 11px;
  }

  .excel-cell {
    padding: 3px 6px;
  }

  .prefijo-badge {
    font-size: 9px;
    padding: 1px 4px;
  }
}

/* Estilos para scroll suave */
.excel-table-container::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

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

.excel-table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 6px;
}

.excel-table-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Efectos de selección */
.excel-cell:hover {
  background-color: rgba(33, 150, 243, 0.05);
}

.excel-row-selected .excel-cell:hover {
  background-color: rgba(33, 150, 243, 0.15);
}

/* Estados de validación */
.excel-input.error {
  border-color: #f44336;
  box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2);
}

.excel-input.success {
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
/* Estilos para el componente de Configuración */

.configuracion-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.configuracion-container {
  flex: 1 1;
  display: flex;
  position: relative;
}

/* Menú lateral */
.menu-lateral {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: #ecf0f1;
  width: 280px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: 2px 0 15px rgba(0,0,0,0.15);
  z-index: 100;
  border-right: 1px solid #34495e;
  flex-shrink: 0;
  overflow: hidden;
  height: 100%;
}

.menu-lateral.cerrado {
  width: 60px;
}

.menu-header {
  display: flex;
  align-items: center;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(236,240,241,0.15);
  gap: 12px;
  background: rgba(44,62,80,0.8);
}


.toggle-menu {
  background: rgba(236,240,241,0.1);
  border: 1px solid rgba(236,240,241,0.2);
  color: #ecf0f1;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.toggle-menu:hover {
  background: rgba(236,240,241,0.2);
  border-color: rgba(236,240,241,0.3);
}

.menu-titulo {
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.3s ease;
  color: #ecf0f1;
  letter-spacing: 0.5px;
}

.menu-lateral.cerrado .menu-titulo {
  opacity: 0;
}

.menu-items {
  flex: 1 1;
  padding: 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Estilos del scrollbar para el menú */
.menu-items::-webkit-scrollbar {
  width: 6px;
}

.menu-items::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.menu-items::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.menu-items::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.menu-item {
  margin-bottom: 4px;
}

.menu-item-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #bdc3c7;
  border-left: 3px solid transparent;
}

.menu-item-header:hover {
  background: rgba(236,240,241,0.08);
  color: #ecf0f1;
  border-left-color: rgba(52,152,219,0.5);
}

.menu-item-header.activo {
  background: rgba(52,152,219,0.15);
  color: #ffffff;
  border-left-color: #3498db;
  font-weight: 600;
}

.menu-item-header.salir {
  margin-top: auto;
  border-top: 1px solid rgba(236,240,241,0.15);
  color: #e74c3c;
  font-weight: 500;
}

.menu-item-header.salir:hover {
  background: rgba(231,76,60,0.15);
  color: #ff6b6b;
  border-left-color: #e74c3c;
}

.menu-item-header.simple {
  justify-content: flex-start;
  padding-left: 20px;
}

.menu-item-header.simple svg {
  margin-right: 12px;
  font-size: 16px;
  color: inherit;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.menu-item-header.simple:hover svg {
  opacity: 1;
  transform: scale(1.1);
}

.submenu {
  background: rgba(0,0,0,0.1);
  margin: 0 8px;
  border-radius: 4px;
  overflow: hidden;
}

.submenu-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.submenu-item:hover {
  background: rgba(255,255,255,0.1);
}

.submenu-item.activo {
  background: rgba(255,255,255,0.15);
  border-left-color: #FFEB3B;
  font-weight: 500;
}

/* Contenido principal */
.configuracion-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  background: #f7f9fc;
  overflow-x: auto;
}

.configuracion-inner {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.configuracion-header {
  margin-bottom: 20px;
}

.configuracion-titulo {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  letter-spacing: 0.3px;
}

/* Contenido del formulario */
.config-content-form {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(44, 62, 80, 0.08);
  padding: 30px;
  border: 1px solid rgba(52, 152, 219, 0.1);
}

.config-form-section {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.config-group {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e9ecef;
}

.config-group-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #3498db;
}

.config-item {
  margin-bottom: 0;
}

.config-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  gap: 12px;
}

.config-checkbox input[type="checkbox"] {
  display: none;
}

.config-checkmark {
  width: 24px;
  height: 24px;
  border: 2px solid #bdc3c7;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: white;
  color: white;
  font-size: 14px;
}

.config-checkbox input[type="checkbox"]:checked + .config-checkmark {
  background: #3498db;
  border-color: #3498db;
}

.config-label {
  font-size: 14px;
  color: #34495e;
  font-weight: 500;
}

.config-form-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
  margin-top: 20px;
}

.config-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.config-btn-primary {
  background: #3498db;
  color: white;
}

.config-btn-primary:hover:not(:disabled) {
  background: #2980b9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.config-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Fondo de Caja */
.fondo-caja-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 30px;
}

.fondo-caja-box {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 40px 50px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.fondo-caja-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 25px 0;
  padding-bottom: 15px;
  border-bottom: 2px solid #3498db;
}

.fondo-caja-input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: white;
  border: 2px solid #bdc3c7;
  border-radius: 8px;
  padding: 8px 15px;
  transition: all 0.2s ease;
}

.fondo-caja-input-container:focus-within {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.fondo-caja-currency {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
}

.fondo-caja-input {
  border: none;
  outline: none;
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
  width: 200px;
  background: transparent;
}

.fondo-caja-input::placeholder {
  color: #bdc3c7;
}

/* Registrar IP y Equipo */
.registro-ip-container {
  display: flex;
  gap: 30px;
}

.registro-ip-form {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
}

.form-select {
  padding: 10px 15px;
  border: 2px solid #bdc3c7;
  border-radius: 6px;
  font-size: 14px;
  color: #2c3e50;
  background: white;
  transition: all 0.2s ease;
  outline: none;
}

.form-select:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.modulos-box {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
}

.modulos-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #3498db;
}

.form-input {
  padding: 10px 15px;
  border: 2px solid #bdc3c7;
  border-radius: 6px;
  font-size: 14px;
  color: #2c3e50;
  background: white;
  transition: all 0.2s ease;
  outline: none;
}

.form-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.ip-input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 20px 0;
}

.ip-input {
  width: 70px;
  padding: 12px;
  border: 2px solid #bdc3c7;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: #2c3e50;
  background: white;
  transition: all 0.2s ease;
  outline: none;
}

.ip-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.ip-separator {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
}

.radio-group {
  display: flex;
  gap: 30px;
  margin-top: 15px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
}

.radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.registro-ip-actions {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.config-btn-secondary {
  background: #95a5a6;
  color: white;
}

.config-btn-secondary:hover:not(:disabled) {
  background: #7f8c8d;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(149, 165, 166, 0.3);
}

.config-btn-danger {
  background: #e74c3c;
  color: white;
}

.config-btn-danger:hover:not(:disabled) {
  background: #c0392b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.modulos-registrados {
  flex: 1 1;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.modulos-registrados-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #3498db;
}

.modulos-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modulo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  padding: 12px 15px;
  border-radius: 6px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.modulo-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modulo-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.modulo-nombre {
  font-weight: 600;
  color: #2c3e50;
}

.modulo-ip {
  color: #7f8c8d;
  font-family: monospace;
}

.modulo-tipo {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.modulo-tipo.caja {
  background: #d4edda;
  color: #155724;
}

.modulo-tipo.mesero {
  background: #cce5ff;
  color: #004085;
}

.modulo-delete {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modulo-delete:hover {
  background: #c0392b;
  transform: scale(1.1);
}

/* Configuración de Email */
.email-config-container {
  max-width: 900px;
  margin: 0 auto;
}

.email-info-box {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 30px;
}

.email-section-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 25px 0;
  padding-bottom: 15px;
  border-bottom: 2px solid #3498db;
}

.email-row {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}

.email-row:first-of-type {
  margin-bottom: 30px;
}

.email-group {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.email-label {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 5px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #2c3e50;
  cursor: pointer;
  margin-top: 10px;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.email-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

/* Contenido placeholder */
.config-content-placeholder {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(44, 62, 80, 0.08);
  padding: 60px 40px;
  text-align: center;
  border: 1px solid rgba(52, 152, 219, 0.1);
}

.placeholder-icon {
  font-size: 48px;
  color: #3498db;
  margin-bottom: 24px;
  opacity: 0.8;
}

.config-content-placeholder h2 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.config-content-placeholder p {
  margin: 0;
  color: #7f8c8d;
  font-size: 16px;
  line-height: 1.5;
  max-width: 400px;
}

/* Configuración del Biométrico */
.biometrico-config-container {
  max-width: 800px;
  margin: 0 auto;
}

.biometrico-info-box {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 30px;
}

.biometrico-section-title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 25px 0;
  padding-bottom: 15px;
  border-bottom: 2px solid #3498db;
  display: flex;
  align-items: center;
  gap: 10px;
}

.biometrico-section-title svg {
  color: #3498db;
}

.biometrico-device-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 25px;
  border: 1px solid #e9ecef;
}

.device-model {
  display: flex;
  align-items: center;
  gap: 10px;
}

.device-label {
  font-size: 14px;
  color: #7f8c8d;
}

.device-value {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.modelo-select {
  min-width: 180px;
  font-weight: 600;
  color: #2c3e50;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.connection-status:not(.success):not(.error) {
  background: #f1f3f4;
  color: #5f6368;
}

.connection-status.success {
  background: #d4edda;
  color: #155724;
}

.connection-status.error {
  background: #f8d7da;
  color: #721c24;
}

.biometrico-form-group {
  margin-bottom: 20px;
}

.biometrico-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;
}

.biometrico-row {
  display: flex;
  gap: 30px;
}

.biometrico-row .biometrico-form-group {
  flex: 1 1;
}

.input-hint {
  display: block;
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 5px;
}

.biometrico-checkbox {
  margin-top: 10px;
  padding: 15px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.biometrico-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.biometrico-help {
  margin-top: 30px;
  padding: 20px;
  background: #e8f4fd;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

.biometrico-help h4 {
  margin: 0 0 15px 0;
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
}

.biometrico-help ul {
  margin: 0;
  padding-left: 20px;
}

.biometrico-help li {
  font-size: 13px;
  color: #34495e;
  margin-bottom: 8px;
  line-height: 1.5;
}

.biometrico-help li:last-child {
  margin-bottom: 0;
}

/* Sección divisor para biométrico */
.biometrico-section-divider {
  margin: 30px 0 20px 0;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.biometrico-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
}

.biometrico-section-title svg {
  color: #3498db;
  font-size: 16px;
}

/* Fila de formulario biométrico (2 columnas) */
.biometrico-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 15px;
}

.biometrico-form-row .biometrico-form-group {
  margin-bottom: 0;
}

.biometrico-form-row .form-input {
  width: 100%;
}

/* Animación de spinner */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
  .menu-lateral {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1000;
    transform: translateX(-100%);
  }

  .menu-lateral.abierto {
    transform: translateX(0);
  }

  .configuracion-content {
    margin-left: 0;
  }

  .configuracion-inner {
    padding: 16px;
  }

  .configuracion-titulo {
    font-size: 20px;
  }

  .config-content-placeholder {
    padding: 40px 20px;
  }

  .placeholder-icon {
    font-size: 36px;
  }

  .config-content-placeholder h2 {
    font-size: 20px;
  }

  .config-content-placeholder p {
    font-size: 14px;
  }

  /* Biométrico responsive */
  .biometrico-row {
    flex-direction: column;
    gap: 15px;
  }

  .biometrico-form-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .biometrico-device-info {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .biometrico-actions {
    flex-direction: column;
  }

  .biometrico-actions .config-btn {
    width: 100%;
    justify-content: center;
  }

  .ip-input-group {
    justify-content: center;
  }

  .ip-input {
    width: 60px;
    padding: 10px 8px;
    font-size: 16px;
  }
}

/* ========================================
   Estilos para Impresión por Platillo
======================================== */

.impresion-platillo-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 15px;
}

/* Barra de herramientas */
.impresion-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.toolbar-acciones-principal {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.asignar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.asignar-group .impresora-select {
  min-width: 200px;
  padding: 8px 12px;
  font-size: 13px;
}

.asignar-group .config-btn {
  padding: 8px 14px;
  font-size: 13px;
}

.toolbar-info {
  display: flex;
  align-items: center;
}

.seleccion-count {
  font-size: 13px;
  color: #495057;
}

.seleccion-count strong {
  color: #2c3e50;
}

.total-count {
  color: #6c757d;
  font-size: 12px;
}



/* Tabla de platillos */
.platillos-table-container {
  flex: 1 1;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  background: white;
}

.loading-platillos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 15px;
  color: #6c757d;
}

.loading-platillos .spin {
  font-size: 32px;
  color: #3498db;
}

.platillos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.platillos-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Fila de títulos */
.platillos-table thead tr.header-titles {
  background: #2c3e50;
  color: white;
}

.platillos-table thead tr.header-titles th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: none;
}

/* Fila de filtros tipo Excel */
.platillos-table thead tr.header-filters {
  background: #34495e;
}

.platillos-table thead tr.header-filters th {
  padding: 6px 8px;
  border-bottom: 2px solid #1a252f;
}

.platillos-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Estilos para inputs y selects de filtro */
.filter-cell {
  vertical-align: middle;
}

.filter-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #4a6278;
  border-radius: 4px;
  font-size: 12px;
  background: #fff;
  color: #2c3e50;
  outline: none;
  transition: all 0.2s ease;
}

.filter-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
}

.filter-input::placeholder {
  color: #95a5a6;
  font-style: italic;
}

.filter-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #4a6278;
  border-radius: 4px;
  font-size: 12px;
  background: #fff;
  color: #2c3e50;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-select:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
}

.filter-select option {
  padding: 4px 8px;
}

.platillos-table th.col-check {
  width: 50px;
  text-align: center;
}

.platillos-table th.col-platillo {
  width: 30%;
}

.platillos-table th.col-categoria {
  width: 20%;
}

.platillos-table th.col-impresora,
.platillos-table th.col-impresora-cat {
  width: 20%;
}

.platillos-table tbody tr {
  transition: all 0.15s ease;
  cursor: pointer;
  border-bottom: 1px solid #f1f3f5;
}

.platillos-table tbody tr:hover {
  background: #f8f9fa;
}

.platillos-table tbody tr.selected {
  background: #e3f2fd;
}

.platillos-table tbody tr.selected:hover {
  background: #bbdefb;
}

.platillos-table td {
  padding: 12px 15px;
  vertical-align: middle;
}

.platillos-table td.col-check {
  text-align: center;
}

.platillos-table td.no-data {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
  font-style: italic;
}

.check-all-btn {
  background: transparent;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #bdc3c7;
}

.check-icon .checked {
  color: #3498db;
}

/* Badges */
.categoria-badge {
  display: inline-block;
  padding: 4px 10px;
  background: #f1f3f5;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: #495057;
}

.impresora-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.impresora-badge.asignada {
  background: #d4edda;
  color: #155724;
}

.impresora-badge.sin-asignar {
  background: #f8f9fa;
  color: #6c757d;
  font-style: italic;
}

.impresora-badge.categoria {
  background: #fff3cd;
  color: #856404;
}

/* Leyenda */
.impresion-leyenda {
  padding: 15px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  border-left: 4px solid #17a2b8;
}

.impresion-leyenda h4 {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
}

.impresion-leyenda ul {
  margin: 0;
  padding-left: 18px;
}

.impresion-leyenda li {
  font-size: 12px;
  color: #495057;
  margin-bottom: 5px;
  line-height: 1.4;
}

.impresion-leyenda li:last-child {
  margin-bottom: 0;
}

/* Responsive para Impresión por Platillo */
@media (max-width: 992px) {
  .impresion-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-acciones-principal {
    width: 100%;
  }

  .asignar-group {
    width: 100%;
    justify-content: flex-start;
  }

  .asignar-group .impresora-select {
    flex: 1 1;
    min-width: 150px;
  }

  .toolbar-info {
    width: 100%;
    justify-content: center;
    padding-top: 8px;
    border-top: 1px solid #dee2e6;
  }
}

@media (max-width: 768px) {
  .platillos-table th.col-impresora-cat,
  .platillos-table td.col-impresora-cat {
    display: none;
  }

  .platillos-table thead tr.header-titles th,
  .platillos-table td {
    padding: 8px 6px;
    font-size: 11px;
  }

  .filter-input,
  .filter-select {
    padding: 4px 6px;
    font-size: 11px;
  }

  .asignar-group .config-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .asignar-group .config-btn span {
    display: none;
  }
}

/* ========================================
   Estilos para Configuración de Tickets
======================================== */

.ticket-config-layout {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Vista previa tipo ticket térmico */
.ticket-preview-section {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e9ecef;
}

.ticket-preview {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px 12px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  text-align: center;
  max-width: 340px;
  margin: 15px auto 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  line-height: 1.5;
}

.ticket-preview .preview-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket-preview .preview-line.bold {
  font-weight: 700;
  font-size: 14px;
}

.ticket-preview .preview-line.small {
  font-size: 11px;
  color: #555;
}

.ticket-preview .preview-separator {
  color: #999;
  letter-spacing: -1px;
  margin: 6px 0;
}

/* Fila de campo con checkbox + input */
.ticket-field-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #eee;
  transition: border-color 0.2s;
}

.ticket-field-row:hover {
  border-color: #3498db;
}

.ticket-field-row .config-checkbox {
  margin-top: 28px;
}

.ticket-field-input {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ticket-field-input .form-input {
  width: 100%;
}

.ticket-field-input .form-input:disabled {
  background: #f1f3f5;
  color: #adb5bd;
  cursor: not-allowed;
}

/* Logo upload en ticket */
.logo-upload-area {
  flex: 1 1;
}

.logo-preview-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo-preview-img {
  max-width: 140px;
  max-height: 80px;
  object-fit: contain;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  background: #fff;
  padding: 4px;
}

.logo-actions {
  display: flex;
  gap: 8px;
}

.logo-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  border: 2px dashed #bdc3c7;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #7f8c8d;
  font-size: 13px;
  text-align: center;
}

.logo-upload-placeholder:hover {
  border-color: #3498db;
  background: #f0f8ff;
  color: #3498db;
}

@media (max-width: 768px) {
  .ticket-preview {
    max-width: 100%;
    font-size: 11px;
  }

  .logo-preview-container {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== ESTILOS PARA SECCIÓN DE LICENCIA ===== */
.licencia-status-box {
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid;
}

.licencia-activa {
  background-color: #d4edda;
  border-color: #28a745;
}

.licencia-vencida {
  background-color: #f8d7da;
  border-color: #dc3545;
}

.licencia-sin-activar {
  background-color: #fff3cd;
  border-color: #ffc107;
  text-align: center;
  color: #856404;
  font-weight: 500;
}

.licencia-status-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.licencia-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.badge-activa {
  background-color: #28a745;
  color: white;
}

.badge-vencida {
  background-color: #dc3545;
  color: white;
}

.licencia-tipo {
  font-size: 13px;
  font-weight: 600;
  color: #495057;
}

.licencia-status-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.licencia-detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #333;
}

.licencia-detail-item svg {
  color: #6c757d;
  flex-shrink: 0;
}
/* src/components/Platillos/Platillos.css */
.platillos-container {
  background: white;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.platillos-content {
  flex: 1 1;
  margin: 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}

.platillos-inner {
  padding: 24px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header de la pagina */
.platillos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e2e8f0;
}

.platillos-titulo {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.platillos-titulo::before {
  content: '';
  font-size: 28px;
}

.platillos-botones-header {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-nuevo-platillo {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-nuevo-platillo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.btn-nueva-categoria {
  background: linear-gradient(135deg, #FF9800, #F57C00);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.btn-nueva-categoria:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 152, 0, 0.4);
}

.btn-ver-categorias {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.btn-ver-categorias:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

.btn-recalcular-costos {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  transition: all 0.2s;
}

.btn-recalcular-costos:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}

/* Panel de filtros */
.platillos-panel-filtros {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.platillos-filtros-content {
  padding: 12px 16px;
}

.platillos-filtros-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.platillos-filtro-item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: auto;
}

.platillos-filtro-item label {
  font-weight: 600;
  color: #374151;
  font-size: 14px;
  white-space: nowrap;
}

.platillos-filtro-derecha {
  display: flex;
  align-items: center;
  gap: 12px;
}

.platillos-select-categoria {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: white;
  color: #374151;
  cursor: pointer;
  min-width: 160px;
  transition: all 0.2s ease;
}

.platillos-select-categoria:focus {
  outline: none;
  border-color: #FF9800;
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}

/* Panel de listado */
.platillos-panel-listado {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Tabla */
.platillos-tabla-container {
  flex: 1 1;
  overflow-y: auto;
  max-height: none;
  height: calc(100vh - 280px);
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: white;
}

.tabla-platillos {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: white;
  table-layout: auto;
}

.tabla-platillos thead {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabla-platillos th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.tabla-platillos td {
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #f3f4f6;
  vertical-align: middle;
  font-size: 13px;
}

.tabla-platillos tbody tr:hover {
  background-color: #fff8f0;
}

.tabla-platillos tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.tabla-platillos tbody tr:nth-child(even):hover {
  background-color: #fff3e0;
}

.platillos-nombre {
  font-weight: 600;
  color: #374151;
}

.platillos-precio {
  font-weight: 600;
  color: #059669;
  text-align: right;
}

.platillos-costo {
  color: #6b7280;
  text-align: right;
}

.platillos-categoria {
  background: #FFF3E0;
  color: #E65100;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  display: inline-block;
}

.platillos-cocina-si {
  color: #059669;
  font-weight: 600;
}

.platillos-cocina-no {
  color: #9ca3af;
}

.platillos-acciones {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.platillos-btn-accion {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
}

.platillos-btn-editar {
  color: #FF9800;
}

.platillos-btn-editar:hover {
  background: #FFF3E0;
  transform: scale(1.1);
}

.platillos-btn-receta {
  color: #3b82f6;
}

.platillos-btn-receta:hover {
  background: #eff6ff;
  transform: scale(1.1);
}

.platillos-btn-eliminar {
  color: #ef4444;
}

.platillos-btn-eliminar:hover {
  background: #fef2f2;
  transform: scale(1.1);
}

/* Acciones container */
.platillos-acciones-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.platillos-info {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

/* Estados */
.platillos-cargando,
.platillos-sin-datos {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
  font-size: 16px;
  background: white;
}

.platillos-cargando {
  color: #FF9800;
  font-weight: 500;
}

.platillos-sin-datos {
  color: #9ca3af;
}

.platillos-loading {
  text-align: center;
  padding: 60px 20px;
  color: #FF9800;
  font-size: 16px;
  font-weight: 500;
}

/* Modal sections */
.platillos-modal-section {
  margin-bottom: 20px;
}

.platillos-modal-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #FF9800;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #FFF3E0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Checkbox field */
.platillos-checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.platillos-checkbox-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #FF9800;
  cursor: pointer;
}

.platillos-checkbox-field label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

/* Responsivo */
@media (max-width: 1024px) {
  .platillos-content {
    margin: 10px;
  }

  .platillos-inner {
    padding: 16px;
  }

  .platillos-filtros-row {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .platillos-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .platillos-titulo {
    font-size: 18px;
    text-align: center;
  }

  .platillos-botones-header {
    justify-content: center;
  }

  .platillos-panel-filtros {
    overflow-x: auto;
  }

  .platillos-filtros-row {
    flex-wrap: nowrap;
    min-width: -webkit-fit-content;
    min-width: fit-content;
  }

  .platillos-tabla-container {
    overflow-x: auto;
  }

  .tabla-platillos {
    min-width: 800px;
  }

  .platillos-acciones-container {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
}
/* RecetaModal.css */

.modal-container.receta-modal-wide {
  width: min(850px, 95vw);
  max-width: 95vw;
}

.receta-agregar-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.receta-tipo-selector {
  display: flex;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #d1d5db;
  height: 38px;
  flex-shrink: 0;
}

.receta-tipo-btn {
  padding: 0 14px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  background: white;
  color: #6b7280;
  transition: all 0.2s;
  white-space: nowrap;
}

.receta-tipo-btn.active {
  background: #FF9800;
  color: white;
}

.receta-tipo-btn:hover:not(.active) {
  background: #f3f4f6;
}

.receta-select-container {
  flex: 1 1;
  min-width: 200px;
}

.receta-cantidad-input {
  width: 90px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  transition: border-color 0.2s;
}

.receta-cantidad-input:focus {
  outline: none;
  border-color: #FF9800;
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}

.receta-btn-agregar {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  height: 38px;
  transition: all 0.2s;
}

.receta-btn-agregar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.receta-btn-agregar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Tabla de items */
.receta-tabla-container {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  max-height: 350px;
  overflow-y: auto;
}

.receta-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.receta-tabla thead {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.receta-tabla th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.receta-tabla td {
  padding: 6px 12px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

.receta-tabla tbody tr:hover {
  background-color: #fff8f0;
}

.receta-tabla tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* Badges de tipo */
.receta-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

.receta-badge-ingrediente {
  background: #dbeafe;
  color: #1d4ed8;
}

.receta-badge-preparado {
  background: #fce7f3;
  color: #be185d;
}

/* Cantidad editable inline */
.receta-cantidad-inline {
  width: 70px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
  transition: border-color 0.2s;
}

.receta-cantidad-inline:focus {
  outline: none;
  border-color: #FF9800;
  box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.15);
}

/* Botón eliminar item */
.receta-btn-eliminar {
  background: transparent;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.receta-btn-eliminar:hover {
  background: #fef2f2;
  transform: scale(1.1);
}

/* Sin items */
.receta-sin-items {
  text-align: center;
  padding: 30px;
  color: #9ca3af;
  font-size: 14px;
}

/* Loading */
.receta-loading {
  text-align: center;
  padding: 40px;
  color: #FF9800;
  font-size: 14px;
}

/* src/components/Preparados/Preparados.css */
.preparados-container {
  background: white;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.preparados-content {
  flex: 1 1;
  margin: 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
}

.preparados-inner {
  padding: 24px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header de la pagina */
.preparados-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e2e8f0;
}

.preparados-titulo {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preparados-botones-header {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-nuevo-preparado {
  background: linear-gradient(135deg, #4CAF50, #388E3C);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.btn-nuevo-preparado:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(76, 175, 80, 0.4);
}

/* Panel de filtros */
.preparados-panel-filtros {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.preparados-filtros-content {
  padding: 12px 16px;
}

.preparados-filtros-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.preparados-filtro-item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: auto;
}

.preparados-filtro-item label {
  font-weight: 600;
  color: #374151;
  font-size: 14px;
  white-space: nowrap;
}

.preparados-filtro-derecha {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Panel de listado */
.preparados-panel-listado {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Tabla */
.preparados-tabla-container {
  flex: 1 1;
  overflow-y: auto;
  max-height: none;
  height: calc(100vh - 280px);
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: white;
}

.tabla-preparados {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: white;
  table-layout: auto;
}

.tabla-preparados thead {
  background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabla-preparados th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.tabla-preparados td {
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #f3f4f6;
  vertical-align: middle;
  font-size: 13px;
}

.tabla-preparados tbody tr:hover {
  background-color: #f0fdf4;
}

.tabla-preparados tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.tabla-preparados tbody tr:nth-child(even):hover {
  background-color: #e8f5e9;
}

.preparados-nombre {
  font-weight: 600;
  color: #374151;
}

.preparados-num-ingredientes {
  text-align: center;
}

.preparados-badge-ingredientes {
  background: #E8F5E9;
  color: #2E7D32;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  display: inline-block;
}

.preparados-acciones {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.preparados-btn-accion {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
}

.preparados-btn-editar {
  color: #4CAF50;
}

.preparados-btn-editar:hover {
  background: #E8F5E9;
  transform: scale(1.1);
}

.preparados-btn-ingredientes {
  color: #2196F3;
}

.preparados-btn-ingredientes:hover {
  background: #E3F2FD;
  transform: scale(1.1);
}

.preparados-btn-eliminar {
  color: #ef4444;
}

.preparados-btn-eliminar:hover {
  background: #fef2f2;
  transform: scale(1.1);
}

/* Acciones container */
.preparados-acciones-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.preparados-info {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

/* Estados */
.preparados-cargando,
.preparados-sin-datos {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
  font-size: 16px;
  background: white;
}

.preparados-cargando {
  color: #4CAF50;
  font-weight: 500;
}

.preparados-sin-datos {
  color: #9ca3af;
}

.preparados-loading {
  text-align: center;
  padding: 60px 20px;
  color: #4CAF50;
  font-size: 16px;
  font-weight: 500;
}

/* Modal sections */
.preparados-modal-section {
  margin-bottom: 20px;
}

.preparados-modal-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #4CAF50;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #E8F5E9;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Responsivo */
@media (max-width: 1024px) {
  .preparados-content {
    margin: 10px;
  }

  .preparados-inner {
    padding: 16px;
  }

  .preparados-filtros-row {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .preparados-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .preparados-titulo {
    font-size: 18px;
    text-align: center;
  }

  .preparados-botones-header {
    justify-content: center;
  }

  .preparados-panel-filtros {
    overflow-x: auto;
  }

  .preparados-filtros-row {
    flex-wrap: nowrap;
    min-width: -webkit-fit-content;
    min-width: fit-content;
  }

  .preparados-tabla-container {
    overflow-x: auto;
  }

  .tabla-preparados {
    min-width: 500px;
  }

  .preparados-acciones-container {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
}

/* PreparadoIngredientesModal.css */

.prep-ing-agregar-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 16px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.prep-ing-select-container {
  flex: 1 1;
  min-width: 200px;
}

.prep-ing-cantidad-input {
  width: 90px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  transition: border-color 0.2s;
}

.prep-ing-cantidad-input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.prep-ing-btn-agregar {
  background: linear-gradient(135deg, #4CAF50, #388E3C);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  height: 38px;
  transition: all 0.2s;
}

.prep-ing-btn-agregar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.prep-ing-btn-agregar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Tabla de items */
.prep-ing-tabla-container {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  max-height: 350px;
  overflow-y: auto;
}

.prep-ing-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.prep-ing-tabla thead {
  background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.prep-ing-tabla th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.prep-ing-tabla td {
  padding: 6px 12px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

.prep-ing-tabla tbody tr:hover {
  background-color: #f0fdf4;
}

.prep-ing-tabla tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* Cantidad editable inline */
.prep-ing-cantidad-inline {
  width: 70px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
  transition: border-color 0.2s;
}

.prep-ing-cantidad-inline:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.15);
}

/* Boton eliminar item */
.prep-ing-btn-eliminar {
  background: transparent;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prep-ing-btn-eliminar:hover {
  background: #fef2f2;
  transform: scale(1.1);
}

/* Sin items */
.prep-ing-sin-items {
  text-align: center;
  padding: 30px;
  color: #9ca3af;
  font-size: 14px;
}

/* Loading */
.prep-ing-loading {
  text-align: center;
  padding: 40px;
  color: #4CAF50;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   Usuarios.css — Usuarios y Perfiles
   ═══════════════════════════════════════════════════════════════ */

.usu-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
}

.usu-content {
  flex: 1 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 20px;
  width: 100%;
  box-sizing: border-box;
}

/* ─── TABS ──────────────────────────────────────────────────── */
.usu-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 0;
}

.usu-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: none;
  background: transparent;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.usu-tab:hover {
  color: #795548;
  background: rgba(121, 85, 72, 0.05);
}

.usu-tab--active {
  color: #795548;
  border-bottom-color: #795548;
}

/* ─── PANEL ─────────────────────────────────────────────────── */
.usu-panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

/* ─── TOOLBAR ───────────────────────────────────────────────── */
.usu-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.usu-toolbar-info {
  font-size: 14px;
  color: #666;
}

.usu-search {
  position: relative;
  flex: 1 1;
  max-width: 400px;
}

.usu-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 14px;
}

.usu-search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.usu-search-input:focus {
  border-color: #795548;
  box-shadow: 0 0 0 2px rgba(121, 85, 72, 0.15);
}

/* ─── BOTONES ───────────────────────────────────────────────── */
.usu-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.usu-btn--primary {
  background: #795548;
  color: white;
}

.usu-btn--primary:hover {
  background: #5d4037;
}

.usu-btn--small {
  padding: 4px 12px;
  font-size: 12px;
  background: #e0e0e0;
  color: #333;
}

.usu-btn--small:hover {
  background: #bdbdbd;
}

.usu-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.usu-btn-icon--edit {
  background: #e3f2fd;
  color: #1976d2;
}

.usu-btn-icon--edit:hover {
  background: #bbdefb;
}

.usu-btn-icon--delete {
  background: #fce4ec;
  color: #d32f2f;
}

.usu-btn-icon--delete:hover {
  background: #f8bbd0;
}

/* ─── TABLA USUARIOS ────────────────────────────────────────── */
.usu-table-wrap {
  overflow-x: auto;
}

.usu-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.usu-tabla th {
  background: #f5f5f5;
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  color: #555;
  border-bottom: 2px solid #e0e0e0;
  white-space: nowrap;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.usu-tabla td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.usu-tabla tbody tr:hover {
  background: #fafafa;
}

.usu-nombre {
  font-weight: 600;
  color: #333;
}

.usu-tabla code {
  background: #f5f5f5;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #795548;
}

.usu-acciones {
  display: flex;
  gap: 6px;
}

/* ─── BADGES Y ESTADOS ──────────────────────────────────────── */
.usu-badge-perfil {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  background: #e8eaf6;
  color: #3f51b5;
}

.usu-estado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.usu-estado--activo {
  background: #e8f5e9;
  color: #2e7d32;
}

.usu-estado--inactivo {
  background: #ffebee;
  color: #c62828;
}

/* ─── PERFILES GRID (Cards) ─────────────────────────────────── */
.usu-perfiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.usu-perfil-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  transition: box-shadow 0.2s;
}

.usu-perfil-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.usu-perfil-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.usu-perfil-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.usu-perfil-header h3 svg {
  color: #795548;
}

.usu-perfil-actions {
  display: flex;
  gap: 6px;
}

.usu-perfil-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.usu-perfil-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #777;
}

.usu-perfil-permisos-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.usu-perm-tag {
  display: inline-block;
  padding: 2px 8px;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

.usu-perm-tag--more {
  background: #f5f5f5;
  color: #666;
}

/* ─── MODAL PERFIL: PERMISOS ────────────────────────────────── */
.usu-perfil-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.usu-permisos-section {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
}

.usu-permisos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.usu-permisos-header h4 {
  margin: 0;
  font-size: 15px;
  color: #333;
}

.usu-perm-grupo {
  margin-bottom: 12px;
}

.usu-perm-grupo:last-child {
  margin-bottom: 0;
}

.usu-perm-grupo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 4px;
}

.usu-perm-grupo-header h5 {
  margin: 0;
  font-size: 13px;
  color: #555;
  font-weight: 700;
}

.usu-btn-toggle-grupo {
  border: none;
  background: transparent;
  color: #795548;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.usu-btn-toggle-grupo:hover {
  background: rgba(121, 85, 72, 0.1);
}

.usu-btn-toggle-grupo.active {
  color: #c62828;
}

.usu-perm-grupo-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 4px;
  gap: 4px;
  padding: 4px 0;
}

.usu-perm-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.usu-perm-item:hover {
  background: #f5f5f5;
}

.usu-perm-item--on {
  background: #e8f5e9;
  color: #2e7d32;
  border-color: #c8e6c9;
}

.usu-perm-item input[type="checkbox"] {
  accent-color: #795548;
  width: 16px;
  height: 16px;
}

/* ─── TOGGLE ACTIVO (user form) ─────────────────────────────── */
.usu-activo-toggle {
  margin-top: 12px;
}

.usu-toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
}

.usu-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.usu-toggle-btn--on {
  background: #e8f5e9;
  color: #2e7d32;
}

.usu-toggle-btn--on:hover {
  background: #c8e6c9;
}

.usu-toggle-btn--off {
  background: #ffebee;
  color: #c62828;
}

.usu-toggle-btn--off:hover {
  background: #ffcdd2;
}

.usu-toggle-btn svg {
  font-size: 20px;
}

/* ─── LOADING / EMPTY ───────────────────────────────────────── */
.usu-loading {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 14px;
}

.usu-empty {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 14px;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .usu-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .usu-search {
    max-width: 100%;
  }

  .usu-perfiles-grid {
    grid-template-columns: 1fr;
  }

  .usu-perm-grupo-items {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Meseros.css — Meseros y Repartidores
   ═══════════════════════════════════════════════════════════════ */

.mes-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
}

.mes-content {
  flex: 1 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 20px;
  width: 100%;
  box-sizing: border-box;
}

/* ─── STATS ─────────────────────────────────────────────────── */
.mes-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.mes-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 8px;
  color: white;
  min-width: 140px;
}

.mes-stat-card svg {
  font-size: 24px;
  opacity: 0.9;
}

.mes-stat-card > div {
  display: flex;
  flex-direction: column;
}

.mes-stat-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.mes-stat-label {
  font-size: 12px;
  opacity: 0.85;
  font-weight: 500;
}

.mes-stat--total {
  background: linear-gradient(135deg, #607d8b, #455a64);
}

.mes-stat--mesero {
  background: linear-gradient(135deg, #00bcd4, #0097a7);
}

.mes-stat--repartidor {
  background: linear-gradient(135deg, #ff9800, #f57c00);
}

/* ─── PANEL ─────────────────────────────────────────────────── */
.mes-panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

/* ─── TOOLBAR ───────────────────────────────────────────────── */
.mes-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.mes-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1;
  flex-wrap: wrap;
}

.mes-search {
  position: relative;
  flex: 1 1;
  max-width: 350px;
  min-width: 200px;
}

.mes-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 14px;
}

.mes-search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.mes-search-input:focus {
  border-color: #00bcd4;
  box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.15);
}

/* ─── FILTRO TIPO ───────────────────────────────────────────── */
.mes-filtro-tipo {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}

.mes-filtro-btn {
  padding: 7px 14px;
  border: none;
  background: white;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  border-right: 1px solid #ddd;
}

.mes-filtro-btn:last-child {
  border-right: none;
}

.mes-filtro-btn:hover {
  background: #f5f5f5;
}

.mes-filtro-btn--active {
  background: #00bcd4;
  color: white;
}

.mes-filtro-btn--active:hover {
  background: #0097a7;
}

/* ─── BOTONES ───────────────────────────────────────────────── */
.mes-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.mes-btn--primary {
  background: #00bcd4;
  color: white;
}

.mes-btn--primary:hover {
  background: #0097a7;
}

.mes-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.mes-btn-icon--edit {
  background: #e3f2fd;
  color: #1976d2;
}

.mes-btn-icon--edit:hover {
  background: #bbdefb;
}

.mes-btn-icon--delete {
  background: #fce4ec;
  color: #d32f2f;
}

.mes-btn-icon--delete:hover {
  background: #f8bbd0;
}

/* ─── TABLA ─────────────────────────────────────────────────── */
.mes-table-wrap {
  overflow-x: auto;
}

.mes-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mes-tabla th {
  background: #f5f5f5;
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  color: #555;
  border-bottom: 2px solid #e0e0e0;
  white-space: nowrap;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.mes-tabla td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.mes-tabla tbody tr:hover {
  background: #fafafa;
}

.mes-num {
  font-weight: 700;
  color: #00bcd4;
  font-size: 14px;
}

.mes-nombre {
  font-weight: 600;
  color: #333;
}

.mes-dir {
  color: #777;
  font-size: 12px;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mes-acciones {
  display: flex;
  gap: 6px;
}

/* ─── BADGES ────────────────────────────────────────────────── */
.mes-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.mes-badge--mesero {
  background: #e0f7fa;
  color: #00838f;
}

.mes-badge--repartidor {
  background: #fff3e0;
  color: #e65100;
}

.mes-badge--ninguno {
  background: #f5f5f5;
  color: #999;
}

/* ─── MODAL: SECCION DIRECCION ──────────────────────────────── */
.mes-form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #555;
  margin: 16px 0 8px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}

.mes-form-section-title svg {
  color: #00bcd4;
}

/* ─── MODAL: TIPO EMPLEADO ──────────────────────────────────── */
.mes-tipo-section {
  margin-top: 16px;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #eee;
}

.mes-tipo-title {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  display: block;
  margin-bottom: 8px;
}

.mes-tipo-checks {
  display: flex;
  gap: 12px;
}

.mes-tipo-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid #ddd;
  color: #666;
  transition: all 0.2s;
}

.mes-tipo-check:hover {
  border-color: #bbb;
}

.mes-tipo-check--on {
  border-color: #00bcd4;
  background: #e0f7fa;
  color: #00838f;
}

.mes-tipo-check input[type="checkbox"] {
  accent-color: #00bcd4;
  width: 16px;
  height: 16px;
}

.mes-tipo-check svg {
  font-size: 16px;
}

/* ─── LOADING / EMPTY ───────────────────────────────────────── */
.mes-loading,
.mes-empty {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 14px;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mes-stats {
    flex-direction: column;
  }

  .mes-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .mes-toolbar-left {
    flex-direction: column;
  }

  .mes-search {
    max-width: 100%;
  }

  .mes-filtro-tipo {
    width: 100%;
  }

  .mes-filtro-btn {
    flex: 1 1;
    text-align: center;
  }

  .mes-tipo-checks {
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CatalogoMesas.css — Editor visual de mesas
   ═══════════════════════════════════════════════════════════════ */

.cm-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
}

.cm-content {
  flex: 1 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 20px;
  width: 100%;
  box-sizing: border-box;
}

/* ─── TOOLBAR ───────────────────────────────────────────────── */
.cm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cm-toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cm-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
  font-weight: 600;
}

.cm-vista-toggle {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}

.cm-vista-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  background: white;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  border-right: 1px solid #ddd;
}

.cm-vista-btn:last-child {
  border-right: none;
}

.cm-vista-btn--active {
  background: #2196F3;
  color: white;
}

.cm-vista-btn--active:hover {
  background: #1976D2;
}

/* ─── BOTONES ───────────────────────────────────────────────── */
.cm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.cm-btn--primary {
  background: #2196F3;
  color: white;
}

.cm-btn--primary:hover {
  background: #1976D2;
}

.cm-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.cm-btn-icon--edit {
  background: #e3f2fd;
  color: #1976d2;
}

.cm-btn-icon--edit:hover {
  background: #bbdefb;
}

.cm-btn-icon--delete {
  background: #fce4ec;
  color: #d32f2f;
}

.cm-btn-icon--delete:hover {
  background: #f8bbd0;
}

/* ─── MAPA PANEL ────────────────────────────────────────────── */
.cm-mapa-panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.cm-mapa-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #e3f2fd;
  color: #1565c0;
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid #bbdefb;
}

.cm-mapa-hint svg {
  flex-shrink: 0;
}

.cm-mapa {
  position: relative;
  min-height: 600px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  background-size: 10px 10px, 10px 10px, 100% 100%;
  overflow: auto;
  cursor: default;
  padding: 16px;
}

.cm-mapa-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  font-size: 16px;
  text-align: center;
}

/* ─── MESA ITEM (en mapa) ───────────────────────────────────── */
.cm-mesa-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: grab;
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
  transition: box-shadow 0.2s;
  -webkit-user-select: none;
          user-select: none;
  min-width: 60px;
  min-height: 60px;
}

.cm-mesa-item:hover {
  box-shadow: 0 4px 16px rgba(33, 150, 243, 0.4);
}

.cm-mesa-item:hover .cm-mesa-actions-overlay {
  opacity: 1;
}

.cm-mesa-item:hover .cm-resize-handle {
  opacity: 1;
}

.cm-mesa-item--dragging {
  cursor: grabbing;
  box-shadow: 0 8px 24px rgba(33, 150, 243, 0.5);
  opacity: 0.9;
}

.cm-mesa-item--resizing {
  box-shadow: 0 8px 24px rgba(33, 150, 243, 0.5);
}

.cm-mesa-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  padding: 4px;
  pointer-events: none;
}

.cm-mesa-label {
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-mesa-num {
  font-size: 10px;
  opacity: 0.8;
}

/* ─── OVERLAY ACTIONS (hover) ───────────────────────────────── */
.cm-mesa-actions-overlay {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.cm-mesa-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  transition: all 0.15s;
}

.cm-mesa-action-btn--edit {
  background: rgba(255, 255, 255, 0.9);
  color: #1976d2;
}

.cm-mesa-action-btn--edit:hover {
  background: white;
}

.cm-mesa-action-btn--delete {
  background: rgba(255, 255, 255, 0.9);
  color: #d32f2f;
}

.cm-mesa-action-btn--delete:hover {
  background: white;
}

/* ─── RESIZE HANDLE ─────────────────────────────────────────── */
.cm-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity 0.2s;
  background:
    linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.6) 50%);
  border-radius: 0 0 8px 0;
}

/* ─── LISTA PANEL ───────────────────────────────────────────── */
.cm-lista-panel {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 16px;
  overflow-x: auto;
}

.cm-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cm-tabla th {
  background: #f5f5f5;
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  color: #555;
  border-bottom: 2px solid #e0e0e0;
  white-space: nowrap;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.cm-tabla td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.cm-tabla tbody tr:hover {
  background: #fafafa;
}

.cm-td-num {
  font-weight: 700;
  color: #2196F3;
  font-size: 14px;
}

.cm-td-pos {
  font-family: 'Consolas', monospace;
  font-size: 12px;
  color: #777;
}

.cm-td-actions {
  display: flex;
  gap: 6px;
}

/* ─── FORM SECTION ──────────────────────────────────────────── */
.cm-form-section {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  margin: 14px 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
}

/* ─── LOADING / EMPTY ───────────────────────────────────────── */
.cm-loading,
.cm-empty {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 14px;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cm-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .cm-toolbar-left {
    flex-wrap: wrap;
  }
}

/* Estilos para Biometrico.js - Actualizado con tabs */

/* Generales */
.dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #2c3e50;
  color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.dashboard-header h1 {
  margin: 0;
  font-size: 1.5rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.back-button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.back-button:hover {
  background-color: #2980b9;
}

.back-button:disabled {
  background-color: #95a5a6;
  cursor: not-allowed;
}

.dashboard-content {
  flex: 1 1;
  padding: 0;
  overflow-y: auto;
}

.biometrico-container {
  max-width: 100%;
  margin: 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}

/* Estilo para pestañas principales (nuevo) */
.main-tabs {
  display: flex;
  background-color: #f0f4f7;
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;
}

.tab-button {
  flex: 1 1;
  padding: 12px 15px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  color: #555;
  transition: background-color 0.2s, color 0.2s;
}

.tab-button.active {
  background-color: #3498db;
  color: white;
}

.tab-button:hover:not(.active) {
  background-color: #e0e6ed;
}

/* Contenedor de la vista de asistencia */
.attendance-view {
  padding: 10px 0;
}

/* Controles de visualización */
.view-controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.view-tabs {
  display: flex;
  gap: 10px;
}

.view-tab {
  padding: 8px 15px;
  background-color: #ddd;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.view-tab.active {
  background-color: #3498db;
  color: white;
}

.refresh-controls {
  display: flex;
  gap: 10px;
}

.refresh-button {
  padding: 8px 15px;
  background-color: #4a6da7;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.refresh-button:hover {
  background-color: #3a5d97;
}

.refresh-button:disabled {
  background-color: #a0a0a0;
  cursor: not-allowed;
}

/* Vista principal */
.main-view {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
}

/* Barra de búsqueda */
.search-container {
  position: relative;
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

.clear-search {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
}

/* Navegación por lotes */
.batch-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 6px;
}

.batch-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.total-count {
  font-weight: 500;
  color: #3498db;
}

.batch-controls {
  display: flex;
  gap: 5px;
}

.batch-controls button {
  padding: 6px 10px;
  background-color: #ecf0f1;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.batch-controls button:hover:not(:disabled) {
  background-color: #dde4e6;
}

.batch-controls button.active {
  background-color: #3498db;
  color: white;
  border-color: #2980b9;
}

.batch-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.batch-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.batch-actions select {
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}

/* Lista de usuarios */
.user-list-container {
  padding: 10px 0;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.user-card {
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.user-header {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  background-color: #f5f7fa;
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-header:hover {
  background-color: #eef2f7;
}

.user-name-id {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.user-name {
  font-weight: 600;
  color: #2c3e50;
}

.user-id {
  font-size: 0.85rem;
  color: #7f8c8d;
}

.user-fingerprint-count {
  display: flex;
  align-items: center;
  gap: 10px;
}

.huella-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #7f8c8d;
  font-size: 0.85rem;
}

.huella-count {
  font-size: 1.2rem;
  font-weight: 600;
  color: #3498db;
}

.expand-button {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #7f8c8d;
}

/* Contenedor de huellas */
.fingerprints-container {
  padding: 15px;
  border-top: 1px solid #eee;
}

.fingerprints-container h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #2c3e50;
}

.fingerprints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.fingerprint-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 6px;
  background-color: #f9f9f9;
}

.fingerprint-item.registered {
  background-color: #e8f7f2;
  border-color: #c4e8d1;
}

.finger-icon {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.finger-name {
  font-weight: 500;
  color: #2c3e50;
  margin-bottom: 5px;
  text-align: center;
}

.finger-status {
  font-size: 0.85rem;
  color: #7f8c8d;
}

/* Estados de carga */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

.spinner-small {
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-left: 3px solid #3498db;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  margin-right: 10px;
}

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

  100% {
    transform: rotate(360deg);
  }
}

.fingerprint-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #666;
}

.fingerprint-error {
  padding: 15px;
  text-align: center;
  color: #e74c3c;
  background-color: #fdeaea;
  border-radius: 4px;
  margin: 10px;
}

.no-users-message {
  padding: 40px 20px;
  text-align: center;
  color: #666;
  background-color: #f9f9f9;
  border-radius: 8px;
}

/* Modal de configuración */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.config-modal {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ddd;
}

.modal-header h3 {
  margin: 0;
  color: #2c3e50;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #7f8c8d;
}

.modal-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #2c3e50;
}

.input-field {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

.config-description {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border-left: 4px solid #3498db;
  font-size: 0.9rem;
  color: #2c3e50;
}

.modal-footer {
  padding: 15px 20px;
  background-color: #f5f7fa;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-primary {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #2980b9;
}

.btn-cancel {
  padding: 10px 20px;
  background-color: #ecf0f1;
  color: #2c3e50;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-cancel:hover {
  background-color: #dde4e6;
}

.dashboard-footer {
  text-align: center;
  padding: 15px;
  background-color: #2c3e50;
  color: #ecf0f1;
  font-size: 0.9rem;
}

/* Estilos responsivos */
/* DeviceStatus.css */
.device-status {
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Indicador de estado */
.status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.1rem;
  position: relative;
  margin-bottom: 5px;
}

.status-indicator::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 10px;
  animation: pulse 2s infinite;
}

.status-indicator.connected {
  background-color: #e6f7ee;
  color: #10b981;
  border-left: 4px solid #10b981;
}

.status-indicator.connected::before {
  background-color: #10b981;
}

.status-indicator.disconnected {
  background-color: #f1f5f9;
  color: #64748b;
  border-left: 4px solid #64748b;
}

.status-indicator.disconnected::before {
  background-color: #64748b;
  animation: none;
}

.status-indicator.connecting {
  background-color: #eff6ff;
  color: #3b82f6;
  border-left: 4px solid #3b82f6;
}

.status-indicator.connecting::before {
  background-color: #3b82f6;
}

.status-indicator.error {
  background-color: #fef2f2;
  color: #ef4444;
  border-left: 4px solid #ef4444;
}

.status-indicator.error::before {
  background-color: #ef4444;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

/* Información del dispositivo */
.device-info {
  background-color: #333;

  border-radius: 8px;
  padding: 15px;
  border: 1px solid #e2e8f0;
}

.device-info-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.device-info-list li {
  display: flex;
  align-items: center;
}

.device-info-list li strong {
  color: #475569;
  margin-right: 8px;
}

/* Botones de acción */
.device-actions {
  display: flex;
  gap: 12px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.btn-connect,
.btn-disconnect,
.btn-configure {
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
}

.btn-connect {
  background-color: #10b981;
  color: white;
}

.btn-connect:hover:not(:disabled) {
  background-color: #059669;
}

.btn-disconnect {
  background-color: #ef4444;
  color: white;
}

.btn-disconnect:hover:not(:disabled) {
  background-color: #dc2626;
}

.btn-configure {
  background-color: #f3f4f6;
  color: #1f2937;
  border: 1px solid #d1d5db;
}

.btn-configure:hover:not(:disabled) {
  background-color: #e5e7eb;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Diseño responsivo */
@media (min-width: 768px) {
  .device-status {
    flex-direction: row;
    align-items: center;
  }

  .status-indicator {
    flex: 1 1;
    margin-bottom: 0;
  }

  .device-info {
    flex: 2 1;
    margin: 0 15px;
  }

  .device-actions {
    flex: 1 1;
    justify-content: flex-end;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .device-info-list {
    grid-template-columns: 1fr;
  }

  .device-actions {
    justify-content: center;
  }

  .btn-connect,
  .btn-disconnect,
  .btn-configure {
    width: 100%;
  }
}
.attendance-report {
  width: 100%;
  overflow: auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.attendance-table-container {
  overflow-x: auto;
  padding: 10px;
}

.attendance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 800px;
}

.attendance-table th,
.attendance-table td {
  padding: 10px;
  text-align: center;
  border: 1px solid #e0e0e0;
}

.attendance-table th {
  background-color: #f0f8ff;
  font-weight: 600;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.attendance-table .employee-column {
  text-align: left;
  min-width: 200px;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background-color: #f0f8ff;
  z-index: 20;
}

.attendance-table .day-column {
  min-width: 120px;
}

.attendance-table .employee-name {
  text-align: left;
  font-weight: 500;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background-color: #fff;
  z-index: 10;
}

.attendance-table .record-cell {
  background-color: #f8ffff;
}

.attendance-table .no-record {
  color: #999;
  background-color: #f9f9f9;
}

/* Estilos para los controles de fechas */
.attendance-controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.date-controls {
  display: flex;
  gap: 15px;
}

.date-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-input-group label {
  font-weight: 600;
  color: #333;

}

.date-input-group input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.load-button {
  padding: 8px 15px;
  background-color: #4a6da7;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.load-button:hover {
  background-color: #3a5d97;
}

.load-button:disabled {
  background-color: #a0a0a0;
  cursor: not-allowed;
}

.attendance-filters {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Mensaje cuando no hay registros */
.no-records-message {
  padding: 40px 20px;
  text-align: center;
  color: #666;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-top: 20px;
}

.no-records-message p {
  margin: 8px 0;
}

/* Responsive */
@media (max-width: 960px) {
  .attendance-controls {
    flex-direction: column;
    gap: 15px;
  }

  .date-controls {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .attendance-table {
    font-size: 13px;
  }

  .attendance-table th,
  .attendance-table td {
    padding: 8px 5px;
  }
}
/* BiometricoTest.css */
.biometrico-test {
    padding: 20px;
    background: #f5f7fa;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.biometrico-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.biometrico-header h1 {
    margin: 0;
    color: #2c3e50;
    font-size: 28px;
    font-weight: 600;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.status-indicator.connected {
    background: #d4edda;
    color: #155724;
}

.status-indicator.disconnected {
    background: #f8d7da;
    color: #721c24;
}

.status-indicator.error {
    background: #fff3cd;
    color: #856404;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
}

.connected .status-dot {
    background: #28a745;
}

.disconnected .status-dot {
    background: #dc3545;
}

.error .status-dot {
    background: #ffc107;
}

.biometrico-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 20px;
    gap: 20px;
}

.control-panel,
.enrollment-panel,
.users-panel,
.devices-panel,
.logs-panel {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.control-panel h3,
.enrollment-panel h3,
.users-panel h3,
.devices-panel h3,
.logs-panel h3 {
    margin: 0 0 20px 0;
    color: #2c3e50;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: #0056b3;
    transform: translateY(-2px);
}

.btn-verify {
    background: #28a745;
    color: white;
}

.btn-verify:hover:not(:disabled) {
    background: #1e7e34;
    transform: translateY(-2px);
}

.btn-enroll {
    background: #6f42c1;
    color: white;
}

.btn-enroll:hover:not(:disabled) {
    background: #5a32a3;
    transform: translateY(-2px);
}

.btn-cancel {
    background: #ffc107;
    color: #212529;
}

.btn-cancel:hover:not(:disabled) {
    background: #e0a800;
    transform: translateY(-2px);
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #c82333;
    transform: translateY(-2px);
}

.btn-small {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}

.message-display {
    min-height: 50px;
    display: flex;
    align-items: center;
}

.message {
    padding: 12px 16px;
    border-radius: 8px;
    margin: 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.message.warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.message.info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.enrollment-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

.user-select {
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    cursor: pointer;
}

.user-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

.usuarios-count {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
    text-align: center;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
}

.users-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 400px;
    overflow-y: auto;
}

.enrollment-info {
    margin-top: 15px;
    padding: 15px;
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 8px;
}

.info-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #1a5490;
}

.no-users,
.no-logs {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.user-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.user-card:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

.user-info h4 {
    margin: 0 0 5px 0;
    color: #2c3e50;
    font-size: 16px;
}

.user-info p {
    margin: 0 0 3px 0;
    color: #6c757d;
    font-size: 14px;
}

.user-info small {
    display: block;
    color: #6c757d;
    font-size: 12px;
    margin: 2px 0;
}

.device-card {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-bottom: 10px;
}

.device-card h4 {
    margin: 0 0 10px 0;
    color: #2c3e50;
}

.device-card p {
    margin: 5px 0;
    color: #6c757d;
    font-size: 14px;
}

.device-card .status {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}

.device-card .status.ready {
    background: #d4edda;
    color: #155724;
}

.logs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.logs-container {
    max-height: 300px;
    overflow-y: auto;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
}

.log-entry {
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 5px;
    border-radius: 6px;
    font-size: 13px;
    border-left: 3px solid transparent;
}

.log-entry.success {
    background: #d4edda;
    border-left-color: #28a745;
    color: #155724;
}

.log-entry.error {
    background: #f8d7da;
    border-left-color: #dc3545;
    color: #721c24;
}

.log-entry.warning {
    background: #fff3cd;
    border-left-color: #ffc107;
    color: #856404;
}

.log-entry.info {
    background: #d1ecf1;
    border-left-color: #17a2b8;
    color: #0c5460;
}

.log-time {
    flex-shrink: 0;
    font-weight: 600;
    opacity: 0.8;
}

.log-message {
    flex: 1 1;
}

/* Responsive */
@media (max-width: 768px) {
    .biometrico-test {
        padding: 10px;
    }
    
    .biometrico-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .biometrico-content {
        grid-template-columns: 1fr;
    }
    
    .control-group {
        gap: 10px;
    }
    
    .btn {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* Animaciones */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

.btn:disabled {
    animation: pulse 1.5s infinite;
}

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

.log-entry:first-child {
    animation: slideIn 0.3s ease-out;
}

/* Scrollbar personalizado */
.users-list::-webkit-scrollbar,
.logs-container::-webkit-scrollbar {
    width: 6px;
}

.users-list::-webkit-scrollbar-track,
.logs-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.users-list::-webkit-scrollbar-thumb,
.logs-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.users-list::-webkit-scrollbar-thumb:hover,
.logs-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.licencia-block-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.licencia-block-card {
  background: white;
  border-radius: 16px;
  padding: 40px;
  max-width: 460px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.licencia-block-icon {
  margin-bottom: 20px;
}

.licencia-block-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 8px 0;
}

.licencia-block-subtitle {
  font-size: 14px;
  color: #6c757d;
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.licencia-block-api-url {
  font-size: 12px;
  color: #6c757d;
  margin: 0 0 20px 0;
  background: #f1f3f5;
  border-radius: 6px;
  padding: 6px 12px;
  word-break: break-all;
}

.licencia-block-api-url span {
  font-family: monospace;
  color: #0f3460;
  font-weight: 600;
}

.licencia-block-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  text-align: left;
}

.licencia-block-form {
  text-align: left;
}

.licencia-block-field {
  margin-bottom: 16px;
}

.licencia-block-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.licencia-block-field input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.licencia-block-field input:focus {
  outline: none;
  border-color: #0f3460;
}

.licencia-block-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #0f3460, #16213e);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 8px;
}

.licencia-block-btn:hover {
  opacity: 0.9;
}

.licencia-block-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.update-block-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #0a1628 0%, #1a2744 50%, #0d3b66 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.update-block-card {
  background: white;
  border-radius: 16px;
  padding: 40px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.update-block-icon {
  margin-bottom: 20px;
}

.update-block-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 8px 0;
}

.update-block-version {
  font-size: 16px;
  color: #0d6efd;
  font-weight: 600;
  margin: 0 0 24px 0;
}

.update-block-subtitle {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.update-progress-container {
  margin: 20px 0;
}

.update-progress-bar {
  width: 100%;
  height: 12px;
  background: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
}

.update-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0d6efd, #0dcaf0);
  border-radius: 6px;
  transition: width 0.3s ease;
}

.update-progress-info {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: #6c757d;
}

.update-block-installing {
  font-size: 14px;
  color: #198754;
  font-weight: 500;
  margin: 20px 0 0 0;
  animation: pulse 1.5s infinite;
}

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

.update-block-error {
  margin-top: 16px;
  text-align: left;
}

.update-block-error p {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  margin: 0 0 8px 0;
}

.update-block-hint {
  background: transparent !important;
  border: none !important;
  color: #6c757d !important;
  font-size: 12px !important;
  padding: 0 !important;
}


/*# sourceMappingURL=main.84d14316.css.map*/