* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-app, #f1f5f9);
    color: var(--text-primary, #1e293b);
    min-height: 100vh;
    display: flex;
}

/* Main Content */
.main-content {
    flex: 1;
    background-color: var(--bg-header, #2e3b4e);
}

/* Header */
.header {
    padding: 1.5rem;
    background-color: var(--bg-header, #2e3b4e);
}

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

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.menu-icon {
    width: 24px;
    height: 24px;
    fill: white;
    cursor: pointer;
}

.header-title {
    color: var(--text-on-header, white);
    font-size: 1.5rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-user-info {
    color: var(--text-on-header-muted, rgba(255,255,255,.65));
    font-size: .875rem;
    font-weight: 400;
    white-space: nowrap;
    margin-left: auto;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 1rem;
    flex-shrink: 0;
}

.notification-icon {
    width: 24px;
    height: 24px;
    fill: #94a3b8;
    cursor: pointer;
}

.new-product-btn {
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

.new-product-btn:hover {
    background-color: #2563eb;
}

.new-product-btn svg {
    width: 16px;
    height: 16px;
    fill: white;
}

/* Filters */
.filters {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.filter-select {
    background-color:  rgb(71 85 105 / 1); 
    border: 1px solid rgb(100 116 139 / 1);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
}

.filter-select option {
    background-color: #64748b;
    color: white;
}

.alerts-btn {
    background-color: rgb(71 85 105 / 1); 
    border: 1px solid rgb(100 116 139 / 1);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
}

.search-container {
    position: relative;
    margin-left: auto;
}

.search-input {
    background-color: rgb(71 85 105 / 1); 
    border: 1px solid rgb(100 116 139 / 1);
    color: white;
    padding: 0.5rem 0.5rem 0.5rem 2.5rem;
    border-radius: 6px;
    width: 250px;
}

.search-input::placeholder {
    color: #94a3b8;
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    fill: #94a3b8;
}

/* Content Area */
.content {
    padding: 1.5rem;
    background-color: var(--bg-app, #f1f5f9);
    min-height: calc(100vh - 140px);
}

/* ── Global form theming ─────────────────────────────────────────────────── */
.content input[type="text"],
.content input[type="number"],
.content input[type="email"],
.content input[type="password"],
.content input[type="date"],
.content input[type="search"],
.content textarea,
.content select {
  background: var(--input-bg, #fff);
  color: var(--input-text, #1e293b);
  border-color: var(--input-border, #d1d5db);
}

.content input:focus,
.content select:focus,
.content textarea:focus {
  border-color: var(--input-focus, #5b7cfa);
  outline: none;
  box-shadow: 0 0 0 3px rgba(91,124,250,.12);
}

.content select option {
  background: var(--bg-panel, #fff);
  color: var(--input-text, #1e293b);
}

/* Labels */
.content label {
  color: var(--text-secondary, #475569);
}

/* Cards and panels inside content */
.content .section-card,
.content .dashboard-card,
.content .cuenta-card,
.content .resumen-card {
  background: var(--bg-card, #fff);
  border-color: var(--border, #e2e8f0);
}

/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.product-card {
    background: var(--bg-card, white);
    border-radius: var(--radius-md, 8px);
    padding: 1rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.1));
}

.product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.product-info h3 {
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin-bottom: 0.25rem;
}

.product-type {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.type-producto {
    background-color: #f3f4f6;
    color: #374151;
}

.type-combo {
    background-color: #f3e8ff;
    color: #7c3aed;
}

.type-insumo {
    background-color: #f3f4f6;
    color: #374151;
}

.product-icon {
    width: 16px;
    height: 16px;
    fill: #9ca3af;
}

.warning-icon {
    fill: #f59e0b;
}

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

.stock-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stock-info svg {
    width: 16px;
    height: 16px;
    fill: #6b7280;
}

.stock-text {
    font-size: 0.875rem;
    color: #6b7280;
}

.stock-warning {
    color: #ef4444;
}

.stock-warning svg {
    fill: #ef4444;
}

.product-price {
    font-weight: 600;
    color: #111827;
}

.product-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.action-group {
    display: flex;
    gap: 0.5rem;
}

.action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.action-btn:hover {
    background-color: #f3f4f6;
}

.action-btn svg {
    width: 16px;
    height: 16px;
    fill: #6b7280;
}

.action-btn.green {
    background-color: #dcfce7;
}

.action-btn.green:hover {
    background-color: #bbf7d0;
}

.action-btn.green svg {
    fill: #16a34a;
}

/* Notifications */
.notifications {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.notifications-header {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.notifications-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

.notification-item {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.notification-content svg {
    width: 20px;
    height: 20px;
    fill: #ef4444;
}

.notification-text {
    color: #111827;
}

.notification-highlight {
    color: #ef4444;
    font-weight: 500;
}

.chevron-icon {
    width: 20px;
    height: 20px;
    fill: #9ca3af;
}

/* Mobile sidebar — now handled by mobile-nav-widget; sidebar hidden via #mobile-nav-widget rule */
@media (max-width: 767px) {
  .header {
    padding: 1rem;
  }

  .header-top {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
  }

  .header-left {
    flex: 1;
    min-width: 0;
  }

  .header-title {
    font-size: 1.1rem;
  }

  .header-user-info {
    font-size: .75rem;
    margin-left: auto;
    flex-shrink: 0;
  }

  .header-right {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .filters {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .search-container {
    width: 100%;
    margin: 0.5rem 0 0;
  }

  .search-input {
    width: 100%;
  }
}

.text-slate-400 {
  color: rgb(148 163 184);
}

.w-6 {
  width: 24px;
}

.h-6 {
  height: 24px;
}

.text-slate-400 {
  color: rgb(148 163 184);
}
.text-slate-500 {
  color: rgb(100 116 139);
}

/* Tamaño general */
.w-5 { width: 20px; }
.h-5 { height: 20px; }

/* Color de trazo blanco */
.text-white {
  stroke: white;
  fill: none;
}

/* --- SIDEBAR GENERAL --- */
.sidebar {
  width: 60px;
  flex-shrink: 0;
  background-color: var(--bg-sidebar, #2e3b4e);
  color: var(--text-on-sidebar, #cbd5e1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem 0;
  gap: 0.25rem;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.3s ease;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  scrollbar-width: thin;
  scrollbar-color: var(--border, #475569) transparent;
}

.sidebar.expandido {
  width: 220px;
}

/* Offset main-content to account for fixed sidebar */
.main-content {
  margin-left: 60px;
}

.sidebar.expandido ~ .main-content {
  margin-left: 220px;
}

/* --- ÍCONOS INDIVIDUALES --- */
.sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background-color: var(--sidebar-icon-bg, #64748b);
  color: var(--text-on-sidebar, white);
  cursor: pointer;
  transition: all 0.3s ease;
}

.sidebar:not(.expandido) .sidebar-icon {
  border-radius: 8px;
  width: 40px;
  height: 40px;
  margin: 0 auto; /* centrado con margen */
}

/* Modo EXPANDIDO (sin bordes ni margen extra) */
.sidebar.expandido .sidebar-icon {
  border-radius: 0;
  width: 100%;
  margin: 0;
  justify-content: flex-start;
  padding-left: 16px;
  gap: 12px;
}

.sidebar-icon:hover {
  background-color: var(--sidebar-icon-hover, #334155);
}

.sidebar-icon.active {
  background-color: var(--sidebar-icon-active, #3b4f6e);
  border-left: 3px solid var(--sidebar-active-border, #5b7cfa);
  padding-left: 9px;
}

.sidebar:not(.expandido) .sidebar-icon.active {
  padding-left: 12px;
  border-left: 3px solid var(--sidebar-active-border, #5b7cfa);
}

.sidebar-icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* --- TEXTO DE LOS ÍCONOS --- */
.sidebar-label {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.2s ease;
  pointer-events: none;
}

.sidebar.expandido .sidebar-label {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* --- PERFIL AL FINAL --- */
.sidebar-profile {
  margin-top: auto;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--border, #1f2a44);
  padding-top: 8px;
}

/* Ocultar nombre cuando sidebar está colapsado */
.sidebar:not(.expandido) .sidebar-profile .sidebar-profile-name {
  display: none;
}

/* ─── Negocios Switch dropdown ─────────────────────────────────────── */
.sidebar-dropdown-caret {
  margin-left: auto;
  opacity: 0.5;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.sidebar-icon.snp-active .sidebar-dropdown-caret { transform: rotate(180deg); opacity: 1; }
/* When sidebar is expanded the panel opens downward, so flip caret down */
.sidebar.expandido .sidebar-icon.snp-active .sidebar-dropdown-caret { transform: rotate(90deg); }

/* Floating negocios panel lives on body — no sidebar CSS needed */

.snp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background .15s;
  font-size: 13px;
  color: var(--text-primary, #e8eefc);
}
.snp-item:hover { background: rgba(91,124,250,.12); }
.snp-item.snp-current { opacity: .6; cursor: default; }
.snp-item.snp-current:hover { background: none; }

.snp-avatar {
  width: 28px; height: 28px; border-radius: 6px;
  background: #1f2f54; color: #7b9dfa;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.snp-info { flex: 1; min-width: 0; }
.snp-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snp-role { font-size: 11px; color: var(--text-muted, #8898b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.snp-loading, .snp-error, .snp-empty {
  padding: 12px 14px; font-size: 12px; color: var(--text-muted, #8898b8);
}
.snp-error { color: #ed4245; }

.snp-new-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  font-size: 13px; font-weight: 600; color: #5b7cfa;
  cursor: pointer;
  border-top: 1px solid var(--border, #1f2a44);
  margin-top: 4px;
  transition: background .15s;
}
.snp-new-btn:hover { background: rgba(91,124,250,.1); }

@media (max-width: 768px) {
  .modal-content {
    width: 95vw;
    max-height: 85vh;
    overflow-y: auto;
    padding: 16px;
    font-size: 14px;
  }

  .filtro-fechas {
    flex-direction: column;
    align-items: flex-start;
  }

  .filtro-fechas label,
  .filtro-fechas button {
    width: 100%;
  }

  .tabla-logs {
    font-size: 12px;
  }
}

/* ─── Mobile navigation widget ─────────────────────────────────────────────── */

/* Hidden on desktop */
#mobile-nav-widget,
.mnw-panel,
.mnw-backdrop { display: none; }

/* ─── User session badge tab (mobile only) ────────────────────────────────── */
#user-session-badge { display: none; }
.header-negocio-sub { display: none; }

@media (max-width: 767px) {
  /* ── Default mobile: gestos mode — hide sidebar, show widget ── */
  .sidebar { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .menu-icon { display: none !important; }

  /* ── Responsive header: 3-line layout ─────────────────────────────────── */
  .header { padding: 12px 14px 8px; }
  .header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 8px;
  }
  .header-left { width: 100%; }
  .header-title {
    font-size: 1.25rem !important;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .header-negocio-sub {
    display: block;
    font-size: .8rem;
    color: var(--text-on-header-muted, rgba(255,255,255,.5));
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: 1px;
  }
  .header-user-info { display: none !important; }

  /* Action buttons row: horizontal scroll */
  .header-right {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
    gap: .5rem;
    padding: 4px 0 2px;
  }
  .header-right::-webkit-scrollbar { display: none; }
  .header-right .new-product-btn,
  .header-right .alerts-btn,
  .header-right .pdv-mode-btn,
  .header-right button {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
    padding: 6px 10px;
  }

  /* ── User session badge — vertical tab widget (mirrors modules widget) ── */
  #user-session-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    z-index: 9998;
    background: var(--bg-sidebar, #1e293b);
    border: 1px solid rgba(255,255,255,.12);
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 6px 4px;
    gap: 2px;
    box-shadow: -2px 0 14px rgba(0,0,0,.3);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    right: 0;
    top: 38%;
    transform: translateY(-50%);
  }

  /* Bridge pseudo-element (same as mnw) */
  #user-session-badge::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: var(--usb-bridge, 0px);
    background: var(--bg-sidebar, #1e293b);
    pointer-events: none;
  }
  #user-session-badge:not(.usb-right)::before { right: 100%; }
  #user-session-badge.usb-right::before { left: 100%; }

  /* When on left side */
  #user-session-badge.usb-left {
    left: 0; right: auto;
    border-radius: 0 8px 8px 0;
    border-left: none;
    border-right: 1px solid rgba(255,255,255,.12);
    box-shadow: 2px 0 14px rgba(0,0,0,.3);
  }

  .usb-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,.5);
    padding: 4px 0;
    max-height: 90px;
    overflow: hidden;
  }

  .usb-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.4);
    padding: 2px 0;
  }
  .usb-icon-wrap svg {
    width: 12px; height: 12px;
  }

  /* ── Override: barra mode — restore sidebar, hide widget/footer ── */
  body.nav-barra .sidebar {
    display: flex !important;
    position: fixed;
    top: 0; left: 0;
    width: 60px;
    height: 100vh;
    z-index: 999;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 0;
    gap: 0.25rem;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--bg-sidebar, #2e3b4e);
    color: var(--text-on-sidebar, #cbd5e1);
  }
  body.nav-barra .sidebar.expandido { width: 220px; }
  body.nav-barra .main-content { margin-left: 60px !important; transition: margin-left .3s; }
  body.nav-barra .sidebar.expandido ~ .main-content { margin-left: 220px !important; }
  body.nav-barra .menu-icon { display: block !important; }
  body.nav-barra .sidebar-label { display: none; }
  body.nav-barra .sidebar.expandido .sidebar-label { display: inline-block; opacity: 1; transform: translateX(0); pointer-events: auto; }
  body.nav-barra #mobile-nav-widget { display: none !important; }
  body.nav-barra .mnw-panel { display: none !important; }
  body.nav-barra .mnw-backdrop { display: none !important; }
  body.nav-barra .mib { display: none !important; }
  body.nav-barra .header-user-info { display: none !important; }
  body.nav-barra #user-session-badge { display: none !important; }

  /* ── Draggable tab handle ── */
  #mobile-nav-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 9999;
    background: var(--bg-sidebar, #1e293b);
    border: 1px solid rgba(255,255,255,.12);
    border-left: none;
    border-radius: 0 10px 10px 0;
    padding: 6px 4px;
    gap: 2px;
    box-shadow: 2px 0 14px rgba(0,0,0,.3);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: border-radius .2s, border .2s;
  }

  /* Bridge that fills the gap between widget and screen edge while dragging */
  #mobile-nav-widget::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--mnw-bridge, 0px);
    background: var(--bg-sidebar, #1e293b);
    pointer-events: none;
  }

  /* Left side: bridge extends to the left */
  #mobile-nav-widget:not(.mnw-right)::before {
    right: 100%;
  }

  /* Right side: bridge extends to the right */
  #mobile-nav-widget.mnw-right::before {
    left: 100%;
  }

  /* When on right side */
  #mobile-nav-widget.mnw-right {
    border-radius: 10px 0 0 10px;
    border-left: 1px solid rgba(255,255,255,.12);
    border-right: none;
  }

  /* When panel is open: glow effect */
  #mobile-nav-widget.mnw-open {
    background: #2a3a5c;
  }

  .mnw-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.4);
    padding: 2px 0;
  }

  .mnw-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,.5);
    padding: 4px 0;
  }

  #mobile-nav-widget.mnw-open .mnw-label,
  #mobile-nav-widget.mnw-open .mnw-arrow {
    color: rgba(255,255,255,.8);
  }

  /* Panel slides out */
  .mnw-panel {
    display: none;
    position: fixed;
    top: 0;
    width: 260px;
    height: 100vh;
    background: var(--bg-sidebar, #1e293b);
    box-shadow: 4px 0 24px rgba(0,0,0,.4);
    z-index: 9998;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #475569 transparent;
    flex-direction: column;
  }

  .mnw-panel.mnw-panel-left {
    left: 0;
    border-right: 1px solid rgba(255,255,255,.1);
  }

  .mnw-panel.mnw-panel-right {
    right: 0;
    left: auto;
    border-left: 1px solid rgba(255,255,255,.1);
    box-shadow: -4px 0 24px rgba(0,0,0,.4);
  }

  .mnw-panel.mnw-visible {
    display: flex;
  }

  /* Backdrop */
  .mnw-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 9997;
  }

  .mnw-backdrop.mnw-visible {
    display: block;
  }

  /* Panel header with mode switcher */
  .mnw-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
  }

  .mnw-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: .5px;
  }

  .mnw-mode-btns {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,.06);
    border-radius: 6px;
    padding: 2px;
  }

  .mnw-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: rgba(255,255,255,.45);
    cursor: pointer;
    padding: 4px 8px;
    transition: all .15s;
  }

  .mnw-mode-btn.mnw-mode-active {
    background: rgba(91,124,250,.25);
    color: #7b9dfa;
  }

  /* Panel content area */
  .mnw-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
  }

  /* ── Icons grid mode ── */
  .mnw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px;
  }

  .mnw-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.75);
    cursor: pointer;
    transition: background .15s;
  }

  .mnw-grid-item:active {
    background: rgba(91,124,250,.3);
  }

  .mnw-grid-item.mnw-active {
    background: rgba(91,124,250,.25);
    box-shadow: inset 0 0 0 2px #5b7cfa;
  }

  .mnw-grid-item svg {
    width: 20px;
    height: 20px;
  }

  .mnw-grid-item.mnw-logout {
    color: #ef4444;
  }

  /* ── Full list mode (icon + name) ── */
  .mnw-list {
    display: flex;
    flex-direction: column;
  }

  .mnw-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: rgba(255,255,255,.8);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background .15s;
    white-space: nowrap;
  }

  .mnw-list-item:active {
    background: rgba(91,124,250,.25);
  }

  .mnw-list-item.mnw-active {
    background: rgba(91,124,250,.15);
    color: #7b9dfa;
  }

  .mnw-list-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .mnw-list-item.mnw-logout {
    color: #ef4444;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 4px;
    padding-top: 12px;
  }

  /* ─── Global mobile overflow fixes ──────────────────────────────────── */

  /* Force all content areas to respect viewport width */
  .main-content,
  .content-area,
  .content,
  .section-content {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Tables: always scrollable in their container */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  thead, tbody, tr {
    max-width: 100%;
  }

  /* Grids: single column fallback */
  .kpi-grid,
  .cards-grid,
  .resumen-grid,
  .log-grid,
  .mkt-grid,
  .recursos-grid,
  .export-grid,
  .drive-grid {
    grid-template-columns: 1fr !important;
  }

  /* 2-column grids that can handle it */
  .arqueo-grid,
  .bill-items,
  .mesas-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Multi-column layouts → stack */
  .chats-layout,
  .mail-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  /* Drawers / side panels: full width on mobile */
  .crm-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Modals: never wider than screen */
  .modal-content,
  .modal-box,
  .modal,
  .modal-wide {
    max-width: 95vw !important;
    margin: 8px auto;
  }

  /* Nav pills / tab bars: scroll instead of overflow */
  .inv-navbar,
  .inv-nav,
  .nav-pills {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .inv-navbar::-webkit-scrollbar,
  .inv-nav::-webkit-scrollbar,
  .nav-pills::-webkit-scrollbar {
    display: none;
  }

  /* Agenda week grid: scrollable */
  .agenda-semana {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Status tags: shrink */
  .status-tag {
    min-width: auto !important;
    font-size: 11px;
  }

  /* Fecha labels */
  .fecha-label {
    min-width: auto !important;
  }

  /* ─── Mobile info footer bar ───────────────────────────────── */
  .mib {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    background: var(--bg-sidebar, #1e293b);
    border-top: 1px solid rgba(255,255,255,.08);
    transition: transform .25s ease;
    display: flex;
    align-items: center;
  }

  .mib-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    min-width: 0;
    gap: 8px;
  }

  .mib-left {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mib-right {
    font-size: 10px;
    color: rgba(255,255,255,.4);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .mib-toggle {
    background: none;
    border: none;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    padding: 6px 10px;
    flex-shrink: 0;
    transition: transform .2s;
  }

  .mib-hidden {
    transform: translateY(calc(100% - 12px));
  }

  .mib-hidden .mib-toggle {
    transform: rotate(180deg);
  }

  .mib-hidden .mib-content {
    opacity: 0;
    pointer-events: none;
  }

  /* Push content up so footer doesn't cover it */
  .main-content {
    padding-bottom: 36px;
  }
}

/* Hidden on desktop */
.mib { display: none; }

/* Corrige el zoom extraño en móviles (viewport fix) */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

.modal-content {
  border: 1px solid #ddd;
  animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
#modal-detalle-producto {
  max-height: 90vh;
  overflow-y: auto;
}
.modal-content {
  max-height: 90vh;
  overflow-y: auto;
}

body.modal-open {
  overflow: hidden;
  height: 100vh;
}

/* Modal overlay genérico (usado por soporte, caja, etc.) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay .modal-box {
  background: var(--bg-card, #fff);
  border-radius: 12px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.2));
}

/* ─── Utilidades globales UX ─────────────────────────────────────────────── */

/* Clase genérica para ocultar elementos (modales, paneles, etc.) */
.hidden { display: none !important; }

/* Color helper */
.text-muted { color: #94a3b8; font-size: 13px; }
.text-danger { color: #ef4444; }
.text-success { color: #22c55e; }

/* Estado vacío — usar en .innerHTML cuando no hay datos */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  text-align: center;
  color: #94a3b8;
  gap: 8px;
}
.empty-state svg {
  opacity: 0.35;
  margin-bottom: 4px;
}
.empty-state p {
  font-size: 14px;
  margin: 0;
}
.empty-state small {
  font-size: 12px;
  color: #64748b;
}

/* Spinner de carga inline */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #94a3b8;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}

/* Badge de estado genérico */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.badge-green  { background: #dcfce7; color: #16a34a; }
.badge-red    { background: #fee2e2; color: #dc2626; }
.badge-yellow { background: #fef9c3; color: #ca8a04; }
.badge-blue   { background: #dbeafe; color: #2563eb; }
.badge-gray   { background: #f1f5f9; color: #64748b; }

/* ── Global Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.btn-primary {
  background: #5b7cfa;
  color: #fff;
  border-color: #5b7cfa;
}
.btn-primary:hover { background: #4a6ae8; }
.btn-secondary {
  background: transparent;
  color: #94a3b8;
  border-color: #334155;
}
.btn-secondary:hover { border-color: #5b7cfa; color: #5b7cfa; }
.btn-danger {
  background: transparent;
  color: #ef4444;
  border-color: #7f1d1d;
}
.btn-danger:hover { background: rgba(239,68,68,.1); }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* ═══════════════════════════════════════════════════════════
   COMPONENTES UNIVERSALES (core/components.js)
   ═══════════════════════════════════════════════════════════ */

/* ── Empty State ── */
.v-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; gap: 10px; }
.v-empty__icon { font-size: 40px; opacity: 0.3; margin-bottom: 4px; }
.v-empty__title { font-size: 15px; font-weight: 600; color: var(--text-secondary, #64748b); }
.v-empty__sub { font-size: 12px; color: var(--text-muted, #94a3b8); max-width: 260px; line-height: 1.5; }
.v-empty__btn { margin-top: 12px; padding: 8px 20px; border-radius: 8px; border: none; background: var(--accent, #5b7cfa); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; }
.v-empty__btn:hover { background: #4a6ae8; }

/* ── Skeleton Loader ── */
@keyframes v-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.v-skel { background: var(--bg-card, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 16px; margin-bottom: 10px; }
.v-skel__header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.v-skel__av { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(90deg, var(--bg-muted, #f1f5f9) 25%, var(--bg-card, #fff) 50%, var(--bg-muted, #f1f5f9) 75%); background-size: 400px 100%; animation: v-shimmer 1.4s ease-in-out infinite; }
.v-skel__av--lg { width: 56px; height: 56px; }
.v-skel__meta { flex: 1; }
.v-skel__line { height: 10px; border-radius: 6px; margin-bottom: 6px; background: linear-gradient(90deg, var(--bg-muted, #f1f5f9) 25%, var(--bg-card, #fff) 50%, var(--bg-muted, #f1f5f9) 75%); background-size: 400px 100%; animation: v-shimmer 1.4s ease-in-out infinite; }
.v-skel__line--name { width: 40%; height: 13px; }
.v-skel__line--time { width: 22%; }
.v-skel__line--full { width: 100%; }
.v-skel__line--wide { width: 82%; }
.v-skel__line--cell { display: inline-block; width: 22%; margin-right: 4%; }
.v-skel__row { margin-bottom: 8px; }

/* ── KPI Card ── */
.v-kpi { background: var(--bg-card, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 16px; display: flex; align-items: center; gap: 12px; transition: box-shadow .15s, transform .15s; }
.v-kpi:hover { box-shadow: 0 2px 12px rgba(0,0,0,.06); transform: translateY(-1px); }
.v-kpi__icon { font-size: 24px; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kpi-accent, var(--accent, #5b7cfa)) 12%, transparent); flex-shrink: 0; }
.v-kpi__body { flex: 1; min-width: 0; }
.v-kpi__label { font-size: 11px; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.v-kpi__value { font-size: 22px; font-weight: 700; color: var(--text-primary, #1e293b); line-height: 1.2; margin-top: 2px; }
.v-kpi__trend { font-size: 11px; font-weight: 600; margin-top: 2px; }
.v-kpi__trend--up { color: #22c55e; }
.v-kpi__trend--down { color: #ef4444; }
.v-kpi__trend--neutral { color: var(--text-muted, #94a3b8); }

/* ── Loading Button ── */
@keyframes v-btn-spin { to { transform: rotate(360deg); } }
.btn.loading { opacity: .75; cursor: not-allowed; pointer-events: none; position: relative; padding-left: 32px; }
.btn.loading::before { content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: v-btn-spin .7s linear infinite; }