/* ==========================================================================
   CSS REPARADO - ISLAS SUPERIORES FIJAS Y ELEMENTOS FLUIDOS (LIQUID UI)
   ========================================================================== */

:root {
  --navbar-islands-top: 16px;
  --max-width-desktop: 1300px;
  --liquid-border: rgba(255, 255, 255, 0.45);
  --liquid-bg-light: rgba(255, 255, 255, 0.4);
  --liquid-bg-dark: rgba(15, 23, 42, 0.45);
}

body.vendor-dashboard {
  background: #fdfeff;
  background-image: radial-gradient(at 0% 0%, rgba(244, 63, 94, 0.04) 0px, transparent 50%),
    radial-gradient(at 50% 0%, rgba(14, 165, 233, 0.03) 0px, transparent 50%);
  color: #1e293b;
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* ISLA DE LOGOTIPO IZQUIERDA (ESTÁTICA AL SCROLL) */
.fixed-island-logo {
  position: fixed;
  top: var(--navbar-islands-top);
  left: 40px;
  z-index: 1100;
  height: 56px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0 20px 0 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  pointer-events: auto;
}

/* ISLA DE NAVEGACIÓN DERECHA (ESTÁTICA AL SCROLL - LIQUID GLASS EFFECT) */
.fixed-island-navigation {
  position: fixed;
  top: var(--navbar-islands-top);
  right: 40px;
  z-index: 1100;
  pointer-events: auto;
}

/* Configuración de la Flor en Cabecera */
.controlled-navbar-logo {
  height: 34px !important;
  width: 34px !important;
  object-fit: contain !important;
}

.brand-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
}

.brand-sub {
  color: #e04f72;
  font-weight: 600;
}

/* DETALLES DE CONSTRUCCIÓN DEL VIDRIO LÍQUIDO */
.liquid-glass-capsule {
  display: block;
  border-radius: 30px !important;
  border: 1px solid var(--liquid-border) !important;
  background: var(--liquid-bg-light) !important;
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.05),
    inset 0 2px 8px 0 rgba(255, 255, 255, 0.7) !important;
  padding: 6px 12px 6px 20px;
}

.liquid-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.liquid-link {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #334155;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 20px;
  transition: all 0.2s ease;
}

.liquid-link:hover {
  background: rgba(255, 255, 255, 0.4);
  color: #e04f72;
}

/* BOTONES INTEGRADOS DE LA CÁPSULA DERECHA */
.capsule-actions-group {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  padding-left: 10px;
}

.icon-action-btn {
  background: transparent;
  border: none;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.fixed-corner-logo {
  position: fixed;
  top: 0;
  left: 0;
  background: #ffffff;
  padding: 16px 24px 16px 20px;
  border-bottom-right-radius: 24px;
  z-index: 1010;
  display: flex;
  align-items: center;
}

.fixed-corner-logo span em {
  font-family: 'Outfit', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.fixed-corner-logo .brand-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.fixed-corner-logo .curve-svg {
  position: absolute;
  width: 30px;
  height: 30px;
  fill: #ffffff;
}

.fixed-corner-logo .curve-right {
  top: 0;
  left: 100%;
}

.fixed-corner-logo .curve-bottom {
  top: 100%;
  left: 0;
}

/* ==========================================================================
       BARRA DE NAVEGACIÓN SUPERIOR DERECHA (ESCRITORIO)
       ========================================================================== */
.dashboard-top-nav {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  transform: none !important;
  z-index: 1000;
  max-width: 650px;
}

.liquid-nav-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 24px;
  box-sizing: border-box;
}

.nav-links-left-group {
  display: flex;
  gap: 20px;
  align-items: center;
}

.nav-links-left-group .liquid-link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #1d1d1f;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.nav-links-left-group .liquid-link:hover {
  opacity: 0.7;
}

/* BOTONES PREMIUM */
.capsule-actions-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.premium-circle-btn {
  width: 42px;
  height: 42px;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1d1d1f !important;
  transition: transform 0.2s ease, background 0.2s ease;
}

.premium-circle-btn:hover {
  transform: translateY(-1px) scale(1.04);
  background: rgba(255, 255, 255, 0.95) !important;
}

.premium-circle-btn.profile-pink-touch {
  background: rgba(255, 192, 203, 0.35) !important;
  border: 1px solid rgba(255, 105, 180, 0.25) !important;
  color: #e04f72 !important;
}

/* ==========================================================================
       BARRA DE MENÚ INFERIOR 
       ========================================================================== */


.dashboard-bottom-nav {
  display: none;
  /* Se activa vía media query */
  position: fixed !important;
  bottom: 20px !important;
  left: 15px !important;
  right: 15px !important;
  height: 65px !important;
  z-index: 1000;
  margin: 0 auto;
  max-width: 450px;
  style: "border-radius: 35px !important; background:transparent !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;";
}

.bottom-nav-inner {
  display: flex;
  align-items: center;
  /* Distribuye el espacio equitativamente */
  width: 100%;
  height: 100%;
  padding: 10 20px;
  /* Más aire para los iconos */
  box-sizing: border-box;
}

.bottom-liquid-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #1d1d1f;
  text-decoration: none;
  gap: 2px;
  /* Espacio reducido entre icono y texto para mayor limpieza */
  transition: transform 0.2s ease, opacity 0.2s ease;
  flex: 1;
  /* Asegura que cada botón ocupe el mismo ancho */
}

.bottom-liquid-link .material-icons {
  font-size: 20px;
  /* Ajuste para mejor proporción */
}

.bottom-liquid-link span:not(.material-icons) {
  font-size: 9px;
  /* Tamaño optimizado para pantallas pequeñas */
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

.bottom-liquid-link:hover {
  transform: translateY(-2px);
}

.bottom-nav-inner .bottom-profile-trigger {
  color: #e04f72;
}

/* Números y tarjetas en Modo Claro */
[data-theme="light"] .metric-card-item {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .metric-card-item .card-label {
  color: #86868b !important;
}

[data-theme="light"] .metric-card-item .card-value {
  color: #e04f72 !important;
}

[data-theme="light"] .metric-card-item.metric-card-item--critical .card-value {
  color: #ff3b30 !important;
}

/* CORRECCIÓN: Selectores de acción rápida limpios en Modo Claro */
[data-theme="light"] .clean-business-table select,
[data-theme="light"] .kanban-interactive-card select {
  background-color: #ffffff !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  padding: 6px 10px;
  border-radius: 8px;
}

/* Alertas Modo Claro */
[data-theme="light"] .live-alert-card.alert-warning-zone {
  background-color: #fff9db !important;
  border: 1px solid #ffe066 !important;
  color: #f08c00 !important;
}

[data-theme="light"] .live-alert-card.alert-danger-zone {
  background-color: #fff5f5 !important;
  border: 1px solid #ffc9c9 !important;
  color: #fa5252 !important;
}

/* Cabeceras Kanban Pastel - Modo Claro */
[data-theme="light"] .stage-header.stage-nuevo {
  background: #e3f2fd !important;
  color: #1e88e5 !important;
  border: 1px solid #bbdefb !important;
}

[data-theme="light"] .stage-header.stage-preparando {
  background: #f3e5f5 !important;
  color: #8e24aa !important;
  border: 1px solid #e1bee7 !important;
}

[data-theme="light"] .stage-header.stage-enruta {
  background: #fff3e0 !important;
  color: #f57c00 !important;
  border: 1px solid #ffe0b2 !important;
}

[data-theme="light"] .stage-header.stage-entregado {
  background: #e8f5e9 !important;
  color: #388e3c !important;
  border: 1px solid #c8e6c9 !important;
}

[data-theme="light"] .stage-header.stage-cancelado {
  background: #ffebee !important;
  color: #c62828 !important;
  border: 1px solid #ffcdd2 !important;
}

[data-theme="light"] .stage-header.stage-reembolsado {
  background: #eceff1 !important;
  color: #37474f !important;
  border: 1px solid #cfd8dc !important;
}

/* --- CONFIGURACIÓN MODO OSCURO --- */
[data-theme="dark"] {
  background-color: #121214 !important;
  color: #e3e3e3 !important;
}

[data-theme="dark"] .fixed-corner-logo {
  background: #121214 !important;
}

[data-theme="dark"] .fixed-corner-logo .curve-svg {
  fill: #121214 !important;
}

[data-theme="dark"] .fixed-corner-logo span {
  color: #ffffff !important;
}

[data-theme="dark"] .nav-links-left-group .liquid-link {
  color: #ffffff !important;
}

[data-theme="dark"] .bottom-liquid-link {
  color: #ffffff !important;
}

/* Números legibles en Modo Oscuro */
[data-theme="dark"] .metric-card-item {
  background: #1a1a1e !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .metric-card-item .card-label {
  color: #a1a1aa !important;
}

[data-theme="dark"] .metric-card-item .card-value {
  color: #ff9fbc !important;
}

[data-theme="dark"] .metric-card-item.metric-card-item--critical .card-value {
  color: #ff758f !important;
}

/* Forzar visibilidad de paneles de negocio en oscuro */
[data-theme="dark"] .business-card-panel {
  background: #1a1a1e !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .business-card-panel h2 {
  color: #ffffff !important;
}

[data-theme="dark"] .business-card-panel p {
  color: #a1a1aa !important;
}

/* Tablas de Datos en Oscuro */
[data-theme="dark"] .clean-business-table th {
  background-color: #222227 !important;
  color: #ffffff !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .clean-business-table td {
  color: #e3e3e3 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .clean-business-table tr:hover td {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Botones e iconos en modo oscuro */
[data-theme="dark"] .premium-circle-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .premium-circle-btn.profile-pink-touch {
  background: rgba(224, 79, 114, 0.25) !important;
  border: 1px solid rgba(224, 79, 114, 0.4) !important;
  color: #ff9fbc !important;
}

/* Selectores en Modo Oscuro */
[data-theme="dark"] .kanban-interactive-card select,
[data-theme="dark"] .clean-business-table select {
  background-color: #2a2a32 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ==========================================================================
       ADAPTACIÓN DE COLORES CHILLONES A TONOS PASTEL ELEGANTES (MODO OSCURO)
       ========================================================================== */
/* Etapa Nuevo */
[data-theme="dark"] .stage-header.stage-nuevo,
[data-theme="dark"] .status-pill.stage-nuevo,
[data-theme="dark"] [class*="stage-nuevo"] {
  background-color: rgba(43, 140, 255, 0.15) !important;
  background-image: none !important;
  color: #70b5ff !important;
  border: 1px solid rgba(43, 140, 255, 0.3) !important;
}

[data-theme="dark"] .stage-header.stage-nuevo .stage-badge {
  background: rgba(43, 140, 255, 0.3) !important;
  color: #70b5ff !important;
}

/* Etapa Preparando */
[data-theme="dark"] .stage-header.stage-preparando,
[data-theme="dark"] .status-pill.stage-preparando {
  background-color: rgba(157, 78, 221, 0.15) !important;
  color: #c77dff !important;
  border: 1px solid rgba(157, 78, 221, 0.3) !important;
}

[data-theme="dark"] .stage-header.stage-preparando .stage-badge {
  background: rgba(157, 78, 221, 0.3) !important;
  color: #c77dff !important;
}

/* Etapa En Ruta */
[data-theme="dark"] .stage-header.stage-enruta,
[data-theme="dark"] .status-pill.stage-enruta {
  background-color: rgba(255, 159, 67, 0.15) !important;
  color: #ffb7b2 !important;
  border: 1px solid rgba(255, 159, 67, 0.3) !important;
}

[data-theme="dark"] .stage-header.stage-enruta .stage-badge {
  background: rgba(255, 159, 67, 0.3) !important;
  color: #ffb7b2 !important;
}

/* Etapa Entregado */
[data-theme="dark"] .stage-header.stage-entregado,
[data-theme="dark"] .status-pill.stage-entregado {
  background-color: rgba(40, 199, 111, 0.15) !important;
  color: #b7e4c7 !important;
  border: 1px solid rgba(40, 199, 111, 0.3) !important;
}

[data-theme="dark"] .stage-header.stage-entregado .stage-badge {
  background: rgba(40, 199, 111, 0.3) !important;
  color: #b7e4c7 !important;
}

/* Etapa Cancelado */
[data-theme="dark"] .stage-header.stage-cancelado,
[data-theme="dark"] .status-pill.stage-cancelado,
[data-theme="dark"] [class*="stage-cancelado"] {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .stage-header.stage-cancelado .stage-badge {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

/* Etapa Reembolsado */
[data-theme="dark"] .stage-header.stage-reembolsado,
[data-theme="dark"] .status-pill.stage-reembolsado,
[data-theme="dark"] [class*="stage-reembolsado"] {
  background-color: rgba(148, 163, 184, 0.15) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

[data-theme="dark"] .stage-header.stage-reembolsado .stage-badge {
  background: rgba(148, 163, 184, 0.3) !important;
  color: #cbd5e1 !important;
}

/* Alertas dinámicas */
[data-theme="dark"] .live-alert-card.alert-warning-zone {
  background-color: #2c2514 !important;
  border: 1px solid #ffb70340 !important;
  color: #ffca3a !important;
}

[data-theme="dark"] .live-alert-card.alert-danger-zone {
  background-color: #2d191e !important;
  border: 1px solid #ff5a5f40 !important;
  color: #ff758f !important;
}

[data-theme="dark"] .kanban-interactive-card {
  background: #222227 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .kanban-interactive-card h4 {
  color: #ffffff !important;
}

[data-theme="dark"] .kanban-interactive-card .card-pricing {
  color: #ff9fbc !important;
}

/* Píldoras de stock */
[data-theme="dark"] .status-pill.status-pill--success {
  background-color: rgba(40, 199, 111, 0.15) !important;
  color: #b7e4c7 !important;
}

[data-theme="dark"] .status-pill.status-pill--warning {
  background-color: rgba(255, 159, 67, 0.15) !important;
  color: #ffb7b2 !important;
}

[data-theme="dark"] .status-pill.status-pill--danger {
  background-color: rgba(255, 90, 95, 0.15) !important;
  color: #ff758f !important;
}

/* Estilos del Sidebar */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.profile-sidebar {
  position: fixed;
  top: 0;
  right: -350px;
  width: 350px;
  height: 100%;
  background: rgba(26, 26, 36, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 30px 24px;
  box-sizing: border-box;
  transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-sidebar.open {
  right: 0;
}

[data-theme="light"] .profile-sidebar {
  background: rgba(255, 255, 255, 0.9);
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}

.sidebar-close-btn {
  align-self: flex-end;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 24px;
}

[data-theme="light"] .sidebar-user-info {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.sidebar-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e04f72, #ff6b8b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 14px;
}

.sidebar-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.sidebar-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-menu-item--logout {
  margin-top: auto;
  color: #ff5a5f;
}

/* ==========================================================================
       MEDIA QUERIES PARA ADAPTACIÓN MÓVIL EXACTA (SIN TRASLAPES)
       ========================================================================== */
@media (max-width: 992px) {
  .fixed-corner-logo {
    position: fixed !important;
    top: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow:
      1px 1px 1px 0px var(--glass-highlight) inset,
      -1px -1px 1px 0px var(--glass-highlight) inset,
      var(--glass-shadow) !important;
    border-radius: 50px !important;
    padding: 6px 20px 6px 8px !important;
    z-index: 10000 !important;
    height: 46px !important;
    width: max-content !important;
    max-width: calc(100% - 32px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .fixed-corner-logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    gap: 10px !important;
  }

  [data-theme="dark"] .fixed-corner-logo {
    background: var(--glass-bg) !important;
  }

  .fixed-corner-logo .curve-svg {
    display: none !important;
  }

  .fixed-corner-logo .brand-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur, 10px)) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur, 10px)) saturate(1.6) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 50% !important;
    box-shadow: var(--glass-shadow) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  .fixed-corner-logo .brand-icon img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    display: block !important;
    padding: 0 !important;
  }

  .fixed-corner-logo span:not(.brand-icon) {
    display: inline-block !important;
    font-size: 15px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  .dashboard-viewport {
    padding: 10px !important;
  }

  .panel-main-content {
    margin-top: 70px !important;
    /* Libera espacio debajo del logo de la esquina */
    padding-bottom: 100px !important;
    /* Espacio de amortiguación para que la barra inferior no tape info */
  }

  /* Intercambio de Navbars */
  .dashboard-top-nav {
    display: none !important;
    /* Desaparece barra superior */
  }

  .dashboard-bottom-nav {
    display: block !important;
    /* Aparece barra inferior */
  }

  /* Reestructuración de Tarjetas KPI */
  .kpi-metrics-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    /* Una por fila para evitar compresión text-wrap */
    gap: 12px !important;
    width: 100% !important;
  }

  .metric-card-item {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ==========================================================================
   FORZAR SCROLL HORIZONTAL DIRECTO EN LAS CARDS (VISTA MÓVIL)
   ========================================================================== */
  @media (max-width: 768px) {

    /* Apuntamos directamente a las tarjetas principales de las 5 secciones */
    #ventas,
    #ordenes,
    #pedidos-recientes,
    #productos,
    #inventario {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: auto !important;
      /* Forza la aparición de la barra horizontal si el contenido es ancho */
      display: block !important;
      -webkit-overflow-scrolling: touch;
      /* Desplazamiento suave con el dedo en iPhone/Android */
      padding-bottom: 15px !important;
      /* Espacio para que la barra no tape el contenido */
    }

    /* --- 1. TOP PRODUCTOS MÁS VENDIDOS --- */
    #ventas .chart-viewport-wrapper,
    #ventas canvas {
      min-width: 500px !important;
      /* Evita que la gráfica se aplaste a 200px */
      display: block !important;
    }

    /* --- 2. FLUJO DE ÓRDENES (KANBAN) --- */
    #ordenes .kanban-flexible-board {
      display: flex !important;
      flex-wrap: nowrap !important;
      /* Fuerza a las columnas a quedarse en una sola fila larga */
      gap: 15px !important;
      width: max-content !important;
      /* Obliga al contenedor a estirarse horizontalmente */
    }

    #ordenes .kanban-stage-column {
      flex: 0 0 280px !important;
      /* Cada columna mide obligatoriamente 280px */
      width: 280px !important;
    }

    /* --- 3, 4 y 5. TABLAS (PEDIDOS, CATÁLOGO E INVENTARIO) --- */
    #pedidos-recientes table,
    #productos table,
    #inventario table,
    .clean-business-table {
      min-width: 650px !important;
      /* Fuerza a las tablas a mantener una anchura legible */
      width: max-content !important;
    }

    /* ==========================================================================
     DISEÑO VISUAL DE LA BARRA DE SCROLL (Para que sea visible en móvil)
     ========================================================================== */
    #ventas::-webkit-scrollbar,
    #ordenes::-webkit-scrollbar,
    #pedidos-recientes::-webkit-scrollbar,
    #productos::-webkit-scrollbar,
    #inventario::-webkit-scrollbar {
      height: 8px !important;
      /* Grosor ideal para tocar con el dedo */
      display: block !important;
    }

    /* La barrita arrastrable (Color rosa del ecosistema de tu app) */
    #ventas::-webkit-scrollbar-thumb,
    #ordenes::-webkit-scrollbar-thumb,
    #pedidos-recientes::-webkit-scrollbar-thumb,
    #productos::-webkit-scrollbar-thumb,
    #inventario::-webkit-scrollbar-thumb {
      background-color: rgba(244, 63, 94, 0.5) !important;
      border-radius: 10px !important;
    }

    /* El carril por donde pasa la barra */
    #ventas::-webkit-scrollbar-track,
    #ordenes::-webkit-scrollbar-track,
    #pedidos-recientes::-webkit-scrollbar-track,
    #productos::-webkit-scrollbar-track,
    #inventario::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.05) !important;
      border-radius: 10px !important;
    }
  }

  /* Adaptación de Gráfica Responsiva sin aplastarse */
  .chart-viewport-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    overflow-x: auto;
    /* Scroll horizontal si la pantalla es excesivamente pequeña */
    -webkit-overflow-scrolling: touch;
  }

  #topProductsChart {
    min-width: 450px;
    /* Asegura que las barras no colapsen en modo ultra-width */
    height: 280px !important;
  }

  /* Transformación Flexible del Pipeline Kanban */
  .kanban-flexible-board {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    /* Comportamiento nativo de app móvil (Deslizar columnas) */
    gap: 16px !important;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }

  .kanban-stage-column {
    flex: 0 0 280px !important;
    /* Ancho fijo para cada estado en móvil */
    max-width: 280px !important;
  }
}

#ventas,
#ordenes,
#pedidos-recientes,
#productos,
#inventario,
.table-scrollable-container {
  scrollbar-width: thin;
  /* Barra más delgada y elegante */
  scrollbar-color: rgba(244, 63, 94, 0.6) rgba(0, 0, 0, 0.03);
  /* [Color del indicador] [Color del fondo] */
}

/* --- 2. Para navegadores basados en WebKit (Chrome, Safari, Edge, Opera) --- */
#ventas::-webkit-scrollbar,
#ordenes::-webkit-scrollbar,
#pedidos-recientes::-webkit-scrollbar,
#productos::-webkit-scrollbar,
#inventario::-webkit-scrollbar,
.table-scrollable-container::-webkit-scrollbar {
  height: 6px !important;
  /* Grosor sutil horizontal */
  width: 6px !important;
  /* Grosor sutil vertical (por si acaso) */
  display: block !important;
}

/* El indicador/barra que se arrastra */
#ventas::-webkit-scrollbar-thumb,
#ordenes::-webkit-scrollbar-thumb,
#pedidos-recientes::-webkit-scrollbar-thumb,
#productos::-webkit-scrollbar-thumb,
#inventario::-webkit-scrollbar-thumb,
.table-scrollable-container::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #f43f5e, #fda4af) !important;
  /* Degradado rosa vivo a rosa pastel */
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  /* Pequeño borde para estilizar */
}

/* El carril/fondo por donde pasa la barra */
#ventas::-webkit-scrollbar-track,
#ordenes::-webkit-scrollbar-track,
#pedidos-recientes::-webkit-scrollbar-track,
#productos::-webkit-scrollbar-track,
#inventario::-webkit-scrollbar-track,
.table-scrollable-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04) !important;
  border-radius: 10px !important;
  margin-inline: 10px;
  /* Despega la barra de los bordes de la card para que no se corte toscamente */
}

/* Efecto Hover: Se vuelve un poco más intensa cuando pasas el dedo o el mouse */
#ventas::-webkit-scrollbar-thumb:hover,
#ordenes::-webkit-scrollbar-thumb:hover,
#pedidos-recientes::-webkit-scrollbar-thumb:hover,
#productos::-webkit-scrollbar-thumb:hover,
#inventario::-webkit-scrollbar-thumb:hover,
.table-scrollable-container::-webkit-scrollbar-thumb:hover {
  background: #f43f5e !important;
}

@media (max-width: 480px) {
  .profile-sidebar {
    width: 100%;
    /* Pantalla completa en celulares */
    right: -100%;
  }
}

.icon-action-btn .material-icons {
  font-size: 18px;
}

.icon-action-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  color: #e04f72;
}

.cart-accent-btn {
  background: rgba(224, 79, 114, 0.08);
  color: #e04f72;
}

.cart-accent-btn:hover {
  background: #e04f72;
  color: #ffffff;
}

/* SEPARACIÓN EXACTA DE ALERTAS DINÁMICAS (SOLUCIÓN AL SOLAPAMIENTO) */
#live-alerts-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Genera una separación simétrica y limpia entre tarjetas de alerta */
  width: 100%;
}

.live-alert-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-radius: 24px;
  /* Estilo de píldora redondeada suave de tus maquetas */
  font-size: 13.5px;
  font-weight: 500;
  border-left: 6px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
  margin: 0;
}

.alert-warning-zone {
  background: #fffbeb;
  border-left-color: #d97706;
  color: #b45309;
}

.alert-danger-zone {
  background: #fff5f5;
  border-left-color: #f43f5e;
  color: #be123c;
}

.live-alert-card p {
  margin: 0;
}

/* DISEÑO DEL CONTENEDOR BAJO LAS ISLAS FIJAS */
.dashboard-viewport {
  padding-top: 90px;
  /* Colchón de espacio para que el contenido pase por debajo de las islas fijas */
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.panel-main-content {
  width: 100%;
  max-width: var(--max-width-desktop);
  padding: 30px 40px 80px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ENCABEZADO HERO */
.welcome-hero-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-text-block h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 36px;
  font-weight: 700;
  margin: 6px 0;
  color: #0f172a;
  letter-spacing: -0.5px;
}

.hero-label {
  color: #e04f72;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.5px;
  margin: 0;
}

.hero-subtitle {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #334155;
}

.hero-description {
  color: #64748b;
  font-size: 14px;
  margin: 6px 0 0 0;
}

/* REJILLA DE TARJETAS KPI (ESTILO BLANCO MAQUETA) */
.kpi-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

.metric-card-item {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.01);
}

.metric-card-item .card-label {
  font-size: 12px;
  color: #718096;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-card-item .card-value {
  font-size: 32px;
  font-weight: 700;
  color: #0f172a;
  font-family: 'Outfit', sans-serif;
}

.metric-card-item--critical {
  border-right: 4px solid #e04f72;
}

/* Acento en el borde derecho como en tu pantalla */
.metric-card-item--critical .card-value {
  color: #e04f72;
}

/* RESTO DE LA GRID EMPRESARIAL */
.dashboard-business-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 100%;
}

.full-width-row {
  grid-column: 1 / -1;
}

.business-card-panel {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 20px;
  padding: 24px;
}

.panel-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.panel-section-header h2 {
  font-size: 19px;
  margin: 0;
  color: #0f172a;
  font-family: 'Outfit', sans-serif;
}

.panel-section-header p {
  font-size: 13px;
  margin: 2px 0 0 0;
  color: #64748b;
}

.chart-viewport-wrapper {
  position: relative;
  height: 300px;
  width: 100%;
}

.kanban-flexible-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.kanban-stage-column {
  background: #f8fafc;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #f1f5f9;
}

.stage-header {
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Outfit', sans-serif;
}

.stage-nuevo {
  background: #38bdf8;
}

.stage-preparando {
  background: #eab308;
}

.stage-enruta {
  background: #a855f7;
}

.stage-entregado {
  background: #34d399;
}

.stage-cancelado {
  background: #ef4444;
}

.stage-reembolsado {
  background: #64748b;
}

.stage-badge {
  background: rgba(255, 255, 255, 0.3);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
}

.kanban-interactive-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
}

.card-header-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 8px;
}

.kanban-interactive-card h4 {
  margin: 0 0 6px 0;
  font-size: 14px;
  color: #1e293b;
}

.card-pricing {
  font-weight: 700;
  color: #e04f72;
  font-size: 15px;
  margin-bottom: 10px;
}

.card-selector-wrapper select {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
}

/* TABLAS */
.table-scrollable-container {
  overflow-x: auto;
  width: 100%;
}

.clean-business-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13.5px;
}

.clean-business-table th {
  padding: 14px;
  border-bottom: 2px solid #f1f5f9;
  color: #475569;
  font-weight: 600;
}

.clean-business-table td {
  padding: 14px;
  border-bottom: 1px solid #f8fafc;
  color: #334155;
}

.status-pill {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.status-pill--success {
  background: #e6fbf2;
  color: #0ea76a;
}

.status-pill--warning {
  background: #fffbeb;
  color: #b45309;
}

.status-pill--danger {
  background: #fff5f5;
  color: #be123c;
}

.mobile-bottom-action-bar {
  display: none !important;
}

/* ==========================================================================
   ADAPTACIONES DE MODO OSCURO (DARK THEME)
   ========================================================================== */
html[data-theme="dark"] body.vendor-dashboard {
  background: #080b11;
  background-image: radial-gradient(at 0% 0%, rgba(224, 79, 114, 0.05) 0px, transparent 40%);
  color: #f1f5f9;
}

html[data-theme="dark"] .fixed-island-logo {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .brand-title {
  color: #ffffff;
}

html[data-theme="dark"] .liquid-glass-capsule {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: var(--liquid-bg-dark) !important;
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.3),
    inset 0 2px 8px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] .liquid-link {
  color: #94a3b8;
}

html[data-theme="dark"] .liquid-link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

html[data-theme="dark"] .capsule-actions-group {
  border-left-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .icon-action-btn {
  color: #94a3b8;
}

html[data-theme="dark"] .icon-action-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e04f72;
}

html[data-theme="dark"] .business-card-panel,
html[data-theme="dark"] .metric-card-item,
html[data-theme="dark"] .kanban-interactive-card {
  background: #0f1420;
  border-color: #1a2234;
}

html[data-theme="dark"] .kanban-stage-column {
  background: #0b0f17;
  border-color: #151b26;
}

html[data-theme="dark"] .kanban-interactive-card h4,
html[data-theme="dark"] .panel-section-header h2,
html[data-theme="dark"] .hero-text-block h1 {
  color: #ffffff;
}

html[data-theme="dark"] .clean-business-table th {
  border-bottom-color: #1a2234;
  color: #64748b;
}

html[data-theme="dark"] .clean-business-table td {
  border-bottom-color: #151b26;
  color: #94a3b8;
}

/* RESPONSIVO */
@media (max-width: 992px) {
  .dashboard-top-nav {
    display: none !important;
  }

  @media (max-width: 994px) {
    .fixed-island-logo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 12px;
      width: auto;
    }

    .fixed-island-navigation {
      display: none;
    }

    .panel-main-content {
      padding: 20px 16px 100px 16px;
    }

    .kpi-metrics-row {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .dashboard-business-grid {
      grid-template-columns: 1fr;
    }

    .kanban-flexible-board {
      grid-template-columns: repeat(4, 270px);
      overflow-x: auto;
      padding-bottom: 14px;
    }

    .mobile-bottom-action-bar {
      display: flex !important;
      position: fixed !important;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      width: 290px;
      height: 56px;
      background: rgba(11, 15, 23, 0.85) !important;
      backdrop-filter: blur(12px);
      border-radius: 30px;
      justify-content: space-around;
      align-items: center;
      z-index: 1200;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-action-item {
      color: rgba(255, 255, 255, 0.65);
      text-decoration: none;
    }
  }
}

html {
  scroll-behavior: smooth;
}

  /* Efecto scroll suave global */
  html {
    scroll-behavior: smooth;
  }

  /* Posicionamiento fijo absoluto en la esquina superior derecha */
  .dashboard-top-nav {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    transform: none !important;
    z-index: 1000;
    max-width: 650px;
  }

  /* Estructura interna equilibrada */
  .liquid-nav-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* Tipografía refinada basada en el ejemplo del usuario */
  .nav-links-left-group {
    display: flex;
    gap: 20px;
    align-items: center;
  }

  .nav-links-left-group .liquid-link {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: -0.2px;
    color: #1d1d1f;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .nav-links-left-group .liquid-link:hover {
    opacity: 0.7;
  }

  /* Estilos de los textos en Modo Oscuro con la nueva tipografía */
  [data-theme="dark"] .nav-links-left-group .liquid-link {
    color: #ffffff !important;
    text-shadow: none !important;
  }

  /* ==========================================================================
       ESTILIZACIÓN DE BOTONES INDIVIDUALES (ESTILO BOTONCITOS)
       ========================================================================== */
  .capsule-actions-group {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  /* Estilo base circular para los botoncitos */
  .premium-circle-btn {
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    color: #1d1d1f !important;
  }

  .premium-circle-btn:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.9) !important;
  }

  .premium-circle-btn .material-icons {
    font-size: 20px !important;
  }

  /* Toquecito rosita especial para el perfil */
  .premium-circle-btn.profile-pink-touch {
    background: rgba(255, 192, 203, 0.35) !important;
    /* Capa translúcida rosa */
    border: 1px solid rgba(255, 105, 180, 0.25) !important;
    color: #e04f72 !important;
    /* Icono a tono */
  }

  .premium-circle-btn.profile-pink-touch:hover {
    background: rgba(255, 192, 203, 0.55) !important;
  }

  /* Ajustes adaptativos para los botoncitos en Modo Oscuro */
  [data-theme="dark"] .premium-circle-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
  }

  [data-theme="dark"] .premium-circle-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
  }

  [data-theme="dark"] .premium-circle-btn.profile-pink-touch {
    background: rgba(224, 79, 114, 0.25) !important;
    border: 1px solid rgba(224, 79, 114, 0.4) !important;
    color: #ff9fbc !important;
  }

  [data-theme="dark"] .premium-circle-btn.profile-pink-touch:hover {
    background: rgba(224, 79, 114, 0.35) !important;
  }

  /* Suavizado de alertas en Modo Oscuro */
  [data-theme="dark"] .live-alert-card.alert-warning-zone {
    background-color: #2c2514 !important;
    border: 1px solid #ffb70340 !important;
    color: #ffca3a !important;
  }

  [data-theme="dark"] .live-alert-card.alert-warning-zone .material-icons {
    color: #ffca3a !important;
  }

  [data-theme="dark"] .live-alert-card.alert-danger-zone {
    background-color: #2d191e !important;
    border: 1px solid #ff5a5f40 !important;
    color: #ff758f !important;
  }

  [data-theme="dark"] .live-alert-card.alert-danger-zone .material-icons {
    color: #ff758f !important;
  }

  /* Estilos del Sidebar */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .sidebar-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .profile-sidebar {
    position: fixed;
    top: 0;
    right: -350px;
    width: 350px;
    height: 100%;
    background: rgba(26, 26, 36, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    padding: 30px 24px;
    box-sizing: border-box;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .profile-sidebar.open {
    right: 0;
  }

  [data-theme="light"] .profile-sidebar {
    background: rgba(255, 255, 255, 0.9);
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
  }

  .sidebar-close-btn {
    align-self: flex-end;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.2s ease;
  }

  .sidebar-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  [data-theme="light"] .sidebar-close-btn:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  .sidebar-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 24px;
  }

  [data-theme="light"] .sidebar-user-info {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .sidebar-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e04f72, #ff6b8b);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(224, 79, 114, 0.3);
  }

  .sidebar-user-info h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    margin: 0 0 4px 0;
    color: inherit;
  }

  .sidebar-user-info p {
    font-size: 14px;
    opacity: 0.6;
    margin: 0;
  }

  .sidebar-menu-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .sidebar-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .sidebar-menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  [data-theme="light"] .sidebar-menu-item:hover {
    background: rgba(0, 0, 0, 0.03);
  }

  .sidebar-menu-item .material-icons {
    opacity: 0.7;
  }

  .sidebar-menu-item--logout {
    margin-top: auto;
    color: #ff5a5f;
  }

  .sidebar-menu-item--logout:hover {
    background: rgba(255, 90, 95, 0.1) !important;
  }
  /* ==========================================================================
   ADAPTACIÓN DEL PIPELINE (KANBAN) PARA MODO OSCURO
   ========================================================================== */

  /* Colores suavizados y desaturados para los encabezados de las columnas */
  [data-theme="dark"] .stage-header.stage-nuevo {
    background-color: rgba(43, 140, 255, 0.15) !important;
    color: #70b5ff !important;
    border: 1px solid rgba(43, 140, 255, 0.3);
  }

  [data-theme="dark"] .stage-header.stage-nuevo .stage-badge {
    background: rgba(43, 140, 255, 0.3) !important;
    color: #70b5ff !important;
  }

  [data-theme="dark"] .stage-header.stage-preparando {
    background-color: rgba(157, 78, 221, 0.15) !important;
    color: #c77dff !important;
    border: 1px solid rgba(157, 78, 221, 0.3);
  }

  [data-theme="dark"] .stage-header.stage-preparando .stage-badge {
    background: rgba(157, 78, 221, 0.3) !important;
    color: #c77dff !important;
  }

  [data-theme="dark"] .stage-header.stage-enruta {
    background-color: rgba(255, 159, 67, 0.15) !important;
    color: #ffb7b2 !important;
    border: 1px solid rgba(255, 159, 67, 0.3);
  }

  [data-theme="dark"] .stage-header.stage-enruta .stage-badge {
    background: rgba(255, 159, 67, 0.3) !important;
    color: #ffb7b2 !important;
  }

  [data-theme="dark"] .stage-header.stage-entregado {
    background-color: rgba(40, 199, 111, 0.15) !important;
    color: #b7e4c7 !important;
    border: 1px solid rgba(40, 199, 111, 0.3);
  }

  [data-theme="dark"] .stage-header.stage-entregado .stage-badge {
    background: rgba(40, 199, 111, 0.3) !important;
    color: #b7e4c7 !important;
  }

  /* Opcional: Suavizar las tarjetas interactivas que van dentro de las columnas */
  [data-theme="dark"] .kanban-interactive-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  }

  [data-theme="dark"] .kanban-interactive-card h4 {
    color: #ffffff !important;
  }

  [data-theme="dark"] .kanban-interactive-card .card-pricing {
    color: #ff9fbc !important;
    /* Toque rosa sutil del Jardín Digital */
  }

  [data-theme="dark"] .kanban-interactive-card select {
    background-color: #24242b !important;
    color: #e3e3e3 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  [data-theme="dark"] .stage-header.stage-nuevo,
  [data-theme="dark"] [class*="stage-nuevo"] {
    background-color: rgba(43, 140, 255, 0.15) !important;
    background-image: none !important;
    /* Por si tiene un gradient de fondo activo */
    color: #70b5ff !important;
    border: 1px solid rgba(43, 140, 255, 0.3) !important;
  }

  /* Ajuste del número/badge interno si es necesario */
  [data-theme="dark"] .stage-header.stage-nuevo .stage-badge,
  [data-theme="dark"] [class*="stage-nuevo"] [class*="badge"] {
    background: rgba(43, 140, 255, 0.3) !important;
    color: #70b5ff !important;
  }

  .vendor-loading-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
  }

  .vendor-loading-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-radius: 18px;
    animation: fadeIn 0.25s ease;
  }

  .vendor-loading-card .material-icons {
    color: var(--pink-main);
  }

  .vendor-loading-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
  }

  .vendor-loading-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-radius: 18px;
    animation: fadeIn 0.25s ease;
  }

  .vendor-loading-card .material-icons {
    color: var(--pink-main);
  }

/* ==========================================================================
   FILTROS DE BÚSQUEDA
   ========================================================================== */
.search-filter-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 8px 16px;
  margin: 12px 0 20px 0;
  max-width: 380px;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.search-filter-wrapper:focus-within {
  border-color: var(--pink-main);
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.12);
}

.search-filter-wrapper .search-icon {
  color: #94a3b8;
  font-size: 20px;
}

.search-filter-wrapper input {
  border: none;
  background: transparent;
  color: #1e293b;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  width: 100%;
  outline: none;
}
[data-theme="dark"] .search-filter-wrapper {
  background: #1a1a1e !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .search-filter-wrapper input {
  color: #f1f5f9;
}

[data-theme="dark"] .search-filter-wrapper input::placeholder {
  color: #64748b;
}

/* --- ESTILOS DEL MODAL DE PRODUCTOS --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-content {
  background: #ffffff;
  border-radius: 24px;
  width: 90%;
  max-width: 480px;
  padding: 32px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  position: relative;
  font-family: 'Outfit', sans-serif;
  box-sizing: border-box;
}
[data-theme="dark"] .modal-content {
  background: #1e293b;
  color: #f8fafc;
  border: 1px solid #334155;
}
.modal-overlay.open .modal-content {
  transform: translateY(0);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
.modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
  transition: background 0.2s;
}
.modal-close:hover {
  background: #f1f5f9;
}
[data-theme="dark"] .modal-close:hover {
  background: #334155;
}
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #475569;
}
[data-theme="dark"] .form-group label {
  color: #94a3b8;
}
.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
[data-theme="dark"] .form-control {
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}
.form-control:focus {
  border-color: var(--pink-main);
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.12);
}
.btn-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.2s;
}
.btn-icon:hover {
  background: #f1f5f9;
  color: var(--pink-main);
}
[data-theme="dark"] .btn-icon:hover {
  background: #334155;
  color: var(--pink-main);
}
.img-preview {
  margin-top: 10px;
  max-width: 100px;
  max-height: 100px;
  border-radius: 8px;
  object-fit: cover;
  display: none;
  border: 1px solid #edf2f7;
}
[data-theme="dark"] .img-preview {
  border-color: #334155;
}