/* =============================================
   BIOSIMILARES - Pharmacy Management System
   Premium CSS Design System
   ============================================= */

:root {
  --primary: #0057b8;
  --primary-dark: #003f8a;
  --primary-light: #1a6fd4;
  --sidebar-bg: #0057b8;
  --sidebar-active: #003f8a;
  --sidebar-hover: #1a6fd4;
  --topbar-bg: #0057b8;
  --bottom-bg: #1a1a2e;
  --content-bg: #f0f4f8;
  --card-bg: #ffffff;
  --text-primary: #1a1a2e;
  --text-secondary: #546e7a;
  --text-light: #ffffff;
  --accent: #00c853;
  --accent-orange: #ff6d00;
  --accent-yellow: #ffd600;
  --danger: #e53935;
  --warning: #fb8c00;
  --success: #43a047;
  --border: #dde4ee;
  --border-light: #eef2f7;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.15);
  --radius: 10px;
  --radius-sm: 6px;
  --sidebar-w: 165px;
  --topbar-h: 68px;
  --bottombar-h: 44px;
  --transition: 0.2s ease;
  --font: 'Inter', sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--content-bg);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

/* ===== TOP BAR ===== */
.top-bar {
  height: var(--topbar-h);
  background: var(--topbar-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  z-index: 100;
  flex-shrink: 0;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 155px;
  text-decoration: none;
}

.logo-icon {
  font-size: 28px;
  animation: spin 10s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

/* Cuando hay logo real cargado: detener spin y limpiar filtro */
.logo-icon.has-logo {
  animation: none;
  filter: none;
  background: rgba(255,255,255,0.92);
  padding: 3px;
}

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

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-sub {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.logo-main {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

.top-tabs {
  display: flex;
  gap: 6px;
  flex: 1;
}

.tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  background: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-dark);
  transition: var(--transition);
  min-width: 75px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.tab-btn:hover { background: #e3f0ff; transform: translateY(-1px); }
.tab-btn.active { background: #e3f0ff; border-bottom: 3px solid var(--primary); }
.tab-btn .tab-icon { font-size: 20px; }

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cdt-badge {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
}

.cdt-badge strong { color: #ffd600; }

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  transition: var(--transition);
}

.action-btn.primary {
  background: #fff;
  color: var(--primary-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.action-btn.primary:hover {
  background: #e3f0ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.btn-icon { font-size: 16px; }

.user-profile {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  position: relative;
}

.user-profile:hover { background: rgba(255,255,255,0.15); }

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.user-name {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
}

.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  overflow: hidden;
  z-index: 999;
  animation: fadeDown 0.2s ease;
}

.user-dropdown.open { display: block; }

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

.dropdown-item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-item:hover { background: #f0f4f8; }
.dropdown-item.logout { color: var(--danger); }
.dropdown-item.logout:hover { background: #ffeaea; }

/* ===== MAIN LAYOUT ===== */
.main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ===== SIDEBAR ===== */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.sidebar::-webkit-scrollbar { display: none; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: var(--transition);
  user-select: none;
}

.sidebar-item:hover {
  background: var(--sidebar-hover);
  color: #fff;
  border-left-color: var(--accent-yellow);
}

.sidebar-item.active {
  background: var(--sidebar-active);
  color: #fff;
  border-left-color: #ffd600;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

.sidebar-item kbd {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--font);
  font-weight: 700;
  min-width: 28px;
  text-align: center;
}

.sidebar-spacer { flex: 1; }

.sidebar-item.tools {
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* ===== CONTENT AREA ===== */
.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--content-bg);
}

.content-area::-webkit-scrollbar { width: 6px; }
.content-area::-webkit-scrollbar-track { background: transparent; }
.content-area::-webkit-scrollbar-thumb { background: #c0cfe0; border-radius: 3px; }

/* ===== MODULE SECTIONS ===== */
.module-section {
  display: none;
  animation: fadeIn 0.25s ease;
}

.module-section.active { display: block; }

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

.module-header {
  margin-bottom: 16px;
}

.module-header h2 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  display: inline-block;
  padding: 6px 20px;
  border-radius: var(--radius-sm);
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(0,87,184,0.3);
}

/* ===== SECTION CARDS ===== */
.section-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  border: 1px solid var(--border-light);
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.card-header-row h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ===== FORM INPUTS ===== */
.form-input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-primary);
  background: #fff;
  transition: var(--transition);
  outline: none;
}

.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,87,184,0.1); }
.form-input.sm { padding: 5px 8px; font-size: 12px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.form-group.full { grid-column: 1 / -1; }

/* ===== BUTTONS ===== */
.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,87,184,0.3); }
.btn-primary.sm { padding: 5px 10px; font-size: 12px; }

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-outline.sm { padding: 5px 10px; font-size: 12px; }

.btn-danger {
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-danger:hover { background: #c62828; }
.btn-danger.sm { padding: 5px 10px; font-size: 12px; }

/* ===== TABLES ===== */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  background: var(--primary);
  color: #fff;
  padding: 9px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  vertical-align: middle;
}

.data-table tr:hover td { background: #eef4ff; }

.data-table tr.selected td {
  background: #cce4ff;
}

.data-table.sm th, .data-table.sm td { padding: 6px 8px; font-size: 12px; }

.empty-row { text-align: center; color: var(--text-secondary); padding: 24px !important; }

/* ===== BADGES ===== */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge-success { background: #e8f5e9; color: #2e7d32; }
.badge-warning { background: #fff3e0; color: #e65100; }
.badge-danger { background: #ffebee; color: #c62828; }
.badge-info { background: #e3f2fd; color: #1565c0; }
.badge-gray { background: #eceff1; color: #546e7a; }

/* ===== ACTION ICONS ===== */
.action-icons { display: flex; gap: 4px; }

.icon-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition);
}

.icon-btn.edit { background: #e3f2fd; color: #1565c0; }
.icon-btn.edit:hover { background: #1565c0; color: #fff; }
.icon-btn.del { background: #ffebee; color: var(--danger); }
.icon-btn.del:hover { background: var(--danger); color: #fff; }
.icon-btn.view { background: #e8f5e9; color: #2e7d32; }
.icon-btn.view:hover { background: #2e7d32; color: #fff; }

/* ===== VENTAS MODULE ===== */
.ventas-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--card-bg);
  border-radius: var(--radius);
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
}

.welcome-logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.big-logo-icon {
  font-size: 60px;
  animation: spin 10s linear infinite;
  filter: drop-shadow(0 0 8px rgba(0,87,184,0.4));
}

.big-logo-text {
  display: flex;
  flex-direction: column;
}

.big-logo-text span {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 4px;
  text-transform: uppercase;
}

.big-logo-text strong {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 52px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: 1px;
}

.welcome-sub {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 1px;
}

.ventas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.venta-quick-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--border-light);
  transition: var(--transition);
}

.venta-quick-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,87,184,0.15);
}

.vqc-icon { font-size: 28px; }
.vqc-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

/* ===== ALMACEN MODULE ===== */
.almacen-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 4px;
}

.alm-stat-card {
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow);
}

.alm-stat-card.green { background: linear-gradient(135deg, #43a047, #2e7d32); }
.alm-stat-card.blue { background: linear-gradient(135deg, #1e88e5, #1565c0); }
.alm-stat-card.orange { background: linear-gradient(135deg, #fb8c00, #e65100); }
.alm-stat-card.red { background: linear-gradient(135deg, #e53935, #b71c1c); }

.alm-stat-icon { font-size: 28px; }
.alm-stat-info { display: flex; flex-direction: column; }
.alm-stat-val { font-size: 22px; font-weight: 700; color: #fff; }
.alm-stat-lbl { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.8); }

/* ===== CAJA CHICA ===== */
.caja-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.caja-card {
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
}

.caja-card.income { background: linear-gradient(135deg, #43a047, #2e7d32); }
.caja-card.expense { background: linear-gradient(135deg, #e53935, #b71c1c); }
.caja-card.balance { background: linear-gradient(135deg, #1e88e5, #1565c0); }

.caja-icon { font-size: 36px; }
.caja-amount { display: block; font-size: 22px; font-weight: 700; color: #fff; }
.caja-lbl { display: block; font-size: 12px; color: rgba(255,255,255,0.8); font-weight: 500; }

/* ===== USUARIOS / ROLES ===== */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.role-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  border: 2px solid var(--border-light);
  transition: var(--transition);
}

.role-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.role-card.admin-role { border-top: 4px solid #ffd600; }
.role-card.vendedor-role { border-top: 4px solid #43a047; }
.role-card.almacen-role { border-top: 4px solid #1e88e5; }
.role-card.cajero-role { border-top: 4px solid #fb8c00; }

.role-icon { font-size: 30px; margin-bottom: 8px; }
.role-name { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.role-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.role-perms { display: flex; flex-wrap: wrap; gap: 4px; }

.perm-badge {
  padding: 3px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}

.perm-badge.active { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.perm-badge.inactive { background: #fafafa; color: #bdbdbd; border: 1px solid #e0e0e0; }

/* ===== REPORTES MODULE ===== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.kpi-card {
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.kpi-card::after {
  content: '';
  position: absolute;
  right: -10px;
  top: -10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}

.kpi-card.sales { background: linear-gradient(135deg, #1e88e5, #0d47a1); }
.kpi-card.stock { background: linear-gradient(135deg, #43a047, #2e7d32); }
.kpi-card.monthly { background: linear-gradient(135deg, #fb8c00, #e65100); }
.kpi-card.purchases { background: linear-gradient(135deg, #8e24aa, #6a1b9a); }

.kpi-icon { font-size: 32px; }
.kpi-info { display: flex; flex-direction: column; }
.kpi-val { font-size: 28px; font-weight: 700; }
.kpi-lbl { font-size: 11px; font-weight: 500; opacity: 0.85; }

.charts-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}

.chart-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
}

.chart-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.chart-card.wide { grid-column: span 1; }

.chart-wrapper { position: relative; height: 220px; }
.chart-wrapper.donut { height: 240px; }

/* ===== HERRAMIENTAS ===== */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.tool-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--border-light);
  cursor: pointer;
  transition: var(--transition);
}

.tool-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,87,184,0.18);
}

.tool-icon { font-size: 36px; margin-bottom: 10px; display: block; }
.tool-name { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.tool-desc { font-size: 11px; color: var(--text-secondary); }

/* ===== PAGINATION ===== */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--border-light);
}

.page-info { font-size: 12px; color: var(--text-secondary); font-weight: 500; }

/* ===== DETAIL PANEL ===== */
.detail-panel {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.detail-title {
  background: #f5f7fa;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

/* ===== BOTTOM BAR ===== */
.bottom-bar {
  height: var(--bottombar-h);
  background: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

.clock-display {
  font-family: 'Roboto Condensed', monospace;
  font-size: 20px;
  font-weight: 700;
  color: #ffd600;
  letter-spacing: 2px;
}

.date-display {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.5px;
}

.day-display {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ===== MODALS ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  animation: fadeOverlay 0.2s ease;
}

@keyframes fadeOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-overlay.open { display: flex; }

.modal {
  background: #fff;
  border-radius: var(--radius);
  width: 560px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalSlide 0.25s ease;
}

.modal.large { width: 750px; }

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

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--primary);
  border-radius: var(--radius) var(--radius) 0 0;
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.modal-close {
  background: rgba(255,255,255,0.2);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: var(--transition);
}

.modal-close:hover { background: rgba(255,255,255,0.4); }

.modal-body { padding: 20px; }

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #f8fafc;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ===== VENTA MODAL SPECIFICS ===== */
.venta-total {
  background: #f8fafc;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 12px;
  border: 1px solid var(--border);
}

.total-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.total-row.grand {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  padding-top: 8px;
  margin-top: 6px;
  border-top: 2px solid var(--primary);
}

/* ===== TOAST NOTIFICATION ===== */
.toast {
  position: fixed;
  bottom: 60px;
  right: 20px;
  background: #1a1a2e;
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  pointer-events: none;
  max-width: 320px;
  box-shadow: var(--shadow-lg);
  border-left: 4px solid var(--accent);
}

.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { border-left-color: var(--accent); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f0f4f8; }
::-webkit-scrollbar-thumb { background: #c0cfe0; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #90aac8; }

/* ===== STATUS LABELS ===== */
.status-row { display: flex; align-items: center; gap: 6px; }

/* ===== STOCK STATUS ===== */
.stock-ok { color: #2e7d32; font-weight: 600; }
.stock-low { color: #e65100; font-weight: 600; }
.stock-critical { color: #c62828; font-weight: 700; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .roles-grid { grid-template-columns: repeat(2, 1fr); }
  .tools-grid { grid-template-columns: repeat(3, 1fr); }
  .charts-container { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .sidebar { display: none; }
  .ventas-grid { grid-template-columns: repeat(2, 1fr); }
  .almacen-stats { grid-template-columns: repeat(2, 1fr); }
  .caja-summary { grid-template-columns: 1fr; }
}

/* ===== EXTRA ANIMATIONS & EFFECTS ===== */

/* Pulsing glow on KPI cards */
.kpi-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.kpi-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

/* Animated border pulse on active sidebar item */
@keyframes sidePulse {
  0%, 100% { border-left-color: #ffd600; }
  50% { border-left-color: #ffffff; }
}
.sidebar-item.active { animation: sidePulse 2.5s ease-in-out infinite; }

/* Top bar shimmer gradient */
.top-bar {
  background: linear-gradient(90deg, #003f8a 0%, #0057b8 30%, #1a6fd4 60%, #0057b8 100%);
  background-size: 200% 100%;
  animation: shimmerTopBar 6s linear infinite;
}
@keyframes shimmerTopBar {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Ripple on button click */
.btn-primary, .btn-outline, .btn-danger, .action-btn, .sidebar-item, .tab-btn {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .btn-outline::after, .btn-danger::after, .action-btn::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.45s ease, height 0.45s ease, opacity 0.45s ease;
  opacity: 0;
}
.btn-primary:active::after, .btn-outline:active::after, .btn-danger:active::after, .action-btn:active::after {
  width: 200px; height: 200px; opacity: 1;
  transition: 0s;
}

/* Staggered row fade-in for tables */
.data-table tbody tr {
  animation: rowFadeIn 0.3s ease both;
}
.data-table tbody tr:nth-child(1)  { animation-delay: 0.03s; }
.data-table tbody tr:nth-child(2)  { animation-delay: 0.06s; }
.data-table tbody tr:nth-child(3)  { animation-delay: 0.09s; }
.data-table tbody tr:nth-child(4)  { animation-delay: 0.12s; }
.data-table tbody tr:nth-child(5)  { animation-delay: 0.15s; }
.data-table tbody tr:nth-child(6)  { animation-delay: 0.18s; }
.data-table tbody tr:nth-child(7)  { animation-delay: 0.21s; }
.data-table tbody tr:nth-child(8)  { animation-delay: 0.24s; }
.data-table tbody tr:nth-child(n+9){ animation-delay: 0.27s; }
@keyframes rowFadeIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Animated clock pulse */
.clock-display {
  animation: clockPulse 1s ease-in-out infinite alternate;
}
@keyframes clockPulse {
  from { text-shadow: 0 0 6px rgba(255,214,0,0.4); }
  to   { text-shadow: 0 0 16px rgba(255,214,0,0.9), 0 0 30px rgba(255,214,0,0.4); }
}

/* Tool card glow hover */
.tool-card:hover .tool-icon {
  animation: iconBounce 0.5s ease;
}
@keyframes iconBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3) rotate(-8deg); }
  70%  { transform: scale(0.95) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Quick card shimmer */
.venta-quick-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.venta-quick-card { position: relative; overflow: hidden; }
.venta-quick-card:hover::before { left: 150%; }

/* KPI icon float */
.kpi-icon {
  animation: iconFloat 3s ease-in-out infinite;
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Alm stat card pop-in */
.alm-stat-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.alm-stat-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Caja card hover */
.caja-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.caja-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Bottom bar gradient pulse */
.bottom-bar {
  background: linear-gradient(90deg, #003f8a, #001f5b, #003f8a);
  background-size: 200%;
  animation: bgMove 8s linear infinite;
}
@keyframes bgMove {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Welcome logo text reveal */
.big-logo-text strong {
  background: linear-gradient(90deg, #1a1a2e 0%, #0057b8 50%, #1a1a2e 100%);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 4s linear infinite;
}
@keyframes textShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Role card hover glow ring */
.role-card:hover {
  box-shadow: 0 0 0 3px rgba(0,87,184,0.2), 0 12px 36px rgba(0,0,0,0.15);
}

/* Badge pulse for critical stock */
.stock-critical {
  animation: stockAlarm 1.2s ease-in-out infinite alternate;
}
@keyframes stockAlarm {
  from { color: #c62828; }
  to   { color: #ff6b6b; text-shadow: 0 0 8px rgba(198,40,40,0.5); }
}

/* Sidebar hover shimmer line */
.sidebar-item::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: rgba(255,255,255,0.08);
  transition: width 0.2s ease;
  pointer-events: none;
}
.sidebar-item { position: relative; }
.sidebar-item:hover::after { width: 100%; }

/* Chart card entrance */
.chart-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.chart-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.12);
}

/* Modal slide-up on open */
.modal-overlay.open .modal {
  animation: modalBounceIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalBounceIn {
  from { opacity: 0; transform: scale(0.88) translateY(30px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ===== TAB PANEL SWITCHING SYSTEM ===== */
.tab-extra-panel { display: none; }

/* Al activar una tab alternativa, ocultar TODOS los hijos directos del módulo
   excepto el panel de tabs en sí. Así cualquier elemento nuevo (ej: ventas-dashboard
   inyectado por mejoras.js) queda automáticamente oculto sin necesitar actualizar este CSS. */
.module-section.alt-tab > *:not(.tab-extra-panel) { display: none !important; }

.module-section.alt-tab > .tab-extra-panel { display: block !important; }

/* ===== PROVEEDORES CARD ===== */
.prov-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 14px 16px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition);
}
.prov-card:hover { border-color: var(--primary); transform: translateY(-2px); }

/* ===== GRUPOS CARD ===== */
.grupo-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px;
  border: 2px solid var(--border-light);
  box-shadow: var(--shadow);
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.grupo-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.grupo-card .gc-icon { font-size: 32px; margin-bottom: 8px; }
.grupo-card .gc-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.grupo-card .gc-count { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

/* ===== PERMISOS MATRIX ===== */
.perm-matrix { border-collapse: collapse; width: 100%; font-size: 12px; }
.perm-matrix th { background: var(--primary); color: #fff; padding: 8px 12px; text-align: center; position: sticky; top: 0; }
.perm-matrix th:first-child { text-align: left; }
.perm-matrix td { padding: 8px 12px; border-bottom: 1px solid var(--border-light); text-align: center; }
.perm-matrix td:first-child { text-align: left; font-weight: 600; }
.perm-check { font-size: 16px; }

/* ===== CAJA APERTURA / CIERRE ===== */
.apertura-card {
  background: linear-gradient(135deg, #0057b8, #1a6fd4);
  border-radius: var(--radius);
  padding: 32px;
  color: #fff;
  text-align: center;
  margin-bottom: 16px;
}
.apertura-card .ap-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.apertura-card .ap-sub   { font-size: 13px; opacity: 0.8; margin-bottom: 24px; }
.apertura-card .ap-monto-label { font-size: 12px; opacity: 0.7; margin-bottom: 8px; }

.cierre-resumen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.cierre-item {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
}
.cierre-item .ci-lbl { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
.cierre-item .ci-val { font-size: 22px; font-weight: 700; }
.cierre-item.verde .ci-val { color: #43a047; }
.cierre-item.rojo .ci-val  { color: var(--danger); }
.cierre-item.azul .ci-val  { color: var(--primary); }

/* ===== REPORTE CARDS ===== */
.reporte-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.rep-stat {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rep-stat.verde { border-color: #43a047; }
.rep-stat.naranja { border-color: #fb8c00; }
.rep-stat.morado { border-color: #8e24aa; }
.rep-stat .rs-val { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.rep-stat .rs-lbl { font-size: 11px; color: var(--text-secondary); }

/* ===== MI PERFIL MODAL ===== */
.perfil-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 20px 18px;
  background: linear-gradient(135deg, #0057b8, #1a6fd4);
  position: relative;
  min-height: 110px;
}

.perfil-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.perfil-avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: 0.2s ease;
}

.perfil-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.perfil-avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: 0.2s ease;
}

.perfil-avatar-edit:hover {
  background: var(--primary);
  color: #fff;
  transform: scale(1.1);
}

.perfil-banner-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.perfil-banner-name {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.perfil-banner-rol {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.15);
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  margin-top: 2px;
}

.perfil-banner-estab {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}

/* Tabs del perfil */
.perfil-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
  margin-bottom: 2px;
}

.perfil-tab {
  background: none;
  border: none;
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: 0.2s ease;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.perfil-tab:hover { color: var(--primary); background: rgba(0,87,184,0.05); }
.perfil-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: rgba(0,87,184,0.06);
}

.perfil-panel { display: none; animation: fadeIn 0.2s ease; }
.perfil-panel.active { display: block; }

/* Foto preview box */
.perfil-foto-preview-box {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: #f0f4f8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
  flex-shrink: 0;
}

.perfil-foto-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Stats del perfil */
.perfil-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.perfil-stat-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
  transition: 0.2s ease;
}

.perfil-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.perfil-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0 auto 8px;
}

.perfil-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.perfil-stat-lbl {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-weight: 500;
}

/* Password strength */
.pass-strength-bar { margin-top: 8px; }

/* ===== MI PERFIL — PANTALLA COMPLETA ===== */
.perfil-fullscreen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #f0f4f8;
  flex-direction: row;
  overflow: hidden;
  animation: slideInFS 0.3s ease;
}
.perfil-fullscreen.open { display: flex; }
@keyframes slideInFS {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
.perfil-sidebar {
  width: 260px; min-width: 220px; background: #fff;
  border-right: 1px solid var(--border); display: flex;
  flex-direction: column; overflow-y: auto;
  box-shadow: 2px 0 12px rgba(0,0,0,0.06); flex-shrink: 0;
}
.perfil-sidebar-header { padding: 28px 22px 20px; border-bottom: 1px solid var(--border-light); }
.perfil-sidebar-title { font-size: 17px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.perfil-sidebar-sub { font-size: 12px; color: var(--text-secondary); }
.perfil-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.perfil-nav-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 10px; cursor: pointer; transition: 0.18s ease;
  color: var(--text-secondary); font-weight: 500; font-size: 14px;
}
.perfil-nav-item:hover { background: #f0f4f8; color: var(--text-primary); }
.perfil-nav-item.active { background: linear-gradient(135deg,rgba(0,87,184,0.1),rgba(26,111,212,0.08)); color: var(--primary); font-weight: 700; }
.pnav-icon { font-size: 18px; }
.pnav-label { flex: 1; }
.pnav-arrow { font-size: 18px; opacity: 0.4; transition: 0.18s; }
.perfil-nav-item.active .pnav-arrow { opacity: 1; }
.perfil-sidebar-user {
  display: flex; align-items: center; gap: 10px; padding: 16px 20px;
  border-top: 1px solid var(--border-light); margin-top: auto; background: #f8fafc;
}
.perfil-sidebar-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,87,184,0.1); border: 2px solid var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; overflow: hidden; flex-shrink: 0;
}
.perfil-sidebar-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.perfil-main { flex: 1; overflow-y: auto; padding: 32px 40px; }
.perfil-main-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 28px; gap: 16px;
}
.perfil-main-title { font-size: 26px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.perfil-main-sub { font-size: 14px; color: var(--text-secondary); }
.perfil-close-btn {
  width: 38px; height: 38px; border: none; border-radius: 50%;
  background: rgba(0,0,0,0.07); cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center; transition: 0.18s; flex-shrink: 0;
}
.perfil-close-btn:hover { background: rgba(0,0,0,0.14); }
.perfil-card {
  background: #fff; border-radius: 14px; padding: 24px 28px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06); border: 1px solid var(--border-light);
}
.perfil-card-section-title {
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 18px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border-light);
}
.perfil-photo-row { display: flex; align-items: center; gap: 24px; }
.perfil-photo-circle-wrap { position: relative; flex-shrink: 0; }
.perfil-photo-circle {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg,rgba(0,87,184,0.12),rgba(26,111,212,0.18));
  border: 3px solid rgba(0,87,184,0.3); display: flex; align-items: center;
  justify-content: center; font-size: 44px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,87,184,0.15);
}
.perfil-photo-circle img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.perfil-photo-camera {
  position: absolute; bottom: 2px; right: 2px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  cursor: pointer; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: 0.2s;
}
.perfil-photo-camera:hover { background: var(--primary-dark); transform: scale(1.1); }
.perfil-photo-info { display: flex; flex-direction: column; gap: 8px; }
.perfil-upload-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px;
  background: var(--primary); color: #fff; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.18s;
  border: none; font-family: var(--font);
}
.perfil-upload-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.perfil-photo-hint { font-size: 12px; color: var(--text-secondary); }
.perfil-remove-btn {
  background: none; border: 1px solid var(--danger); color: var(--danger);
  border-radius: 6px; padding: 5px 12px; font-size: 12px;
  font-family: var(--font); cursor: pointer; transition: 0.18s;
}
.perfil-remove-btn:hover { background: var(--danger); color: #fff; }
.perfil-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.perfil-field-group { display: flex; flex-direction: column; gap: 6px; }
.perfil-field-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.perfil-field-icon-wrap {
  display: flex; align-items: center; background: #f7f9fc;
  border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; transition: 0.18s;
}
.perfil-field-icon-wrap:focus-within {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,87,184,0.08); background: #fff;
}
.perfil-field-icon { padding: 0 12px; font-size: 16px; color: var(--text-secondary); flex-shrink: 0; }
.perfil-field-input {
  flex: 1; border: none; background: transparent; padding: 11px 12px 11px 0;
  font-family: var(--font); font-size: 14px; color: var(--text-primary); outline: none;
}
.perfil-field-input:read-only { color: var(--text-secondary); }
textarea.perfil-field-input {
  border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 14px;
  background: #f7f9fc; width: 100%;
}
textarea.perfil-field-input:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,87,184,0.08); background: #fff; outline: none;
}
.perfil-sesion-badge {
  display: flex; align-items: center; gap: 10px; background: #e8f5e9;
  border-radius: 10px; padding: 10px 16px; margin-top: 18px; font-size: 13px; color: #2e7d32;
}
.perfil-notif-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--border-light);
}
.perfil-notif-row:last-child { border-bottom: none; }
.perfil-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.perfil-toggle input { opacity: 0; width: 0; height: 0; }
.perfil-toggle-slider {
  position: absolute; inset: 0; background: #ccc; border-radius: 24px; cursor: pointer; transition: 0.3s;
}
.perfil-toggle-slider::before {
  content: ''; position: absolute; width: 18px; height: 18px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%;
  transition: 0.3s; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.perfil-toggle input:checked + .perfil-toggle-slider { background: var(--primary); }
.perfil-toggle input:checked + .perfil-toggle-slider::before { transform: translateX(20px); }
.perfil-stats-grid-fs { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.perfil-stat-card-fs {
  background: linear-gradient(135deg, var(--c1), var(--c2));
  border-radius: 14px; padding: 24px; display: flex; flex-direction: column;
  align-items: center; text-align: center; color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12); transition: 0.2s;
}
.perfil-stat-card-fs:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.18); }
.psf-icon { font-size: 36px; margin-bottom: 10px; }
.psf-val  { font-size: 36px; font-weight: 800; line-height: 1; }
.psf-lbl  { font-size: 13px; opacity: 0.85; margin-top: 6px; font-weight: 500; }
.perfil-sysinfo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.perfil-sysinfo-item {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  background: #f8fafc; border-radius: 10px; border: 1px solid var(--border-light);
}
.perfil-sysinfo-label { font-size: 12px; color: var(--text-secondary); }
.perfil-sysinfo-val   { font-size: 14px; color: var(--text-primary); font-weight: 600; }
.perfil-action-quick {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px;
  background: #f8fafc; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text-primary); transition: 0.18s;
}
.perfil-action-quick:hover { background: #eef2f9; border-color: var(--primary); transform: translateY(-2px); }

/* =============================================
   OPTIMIZACIONES DE RENDIMIENTO — GPU & Paint
   Usamos will-change para avisar al navegador
   qué elementos se van a animar, permitiendo
   que los promueva a capas de composición GPU.
   ============================================= */

/* Modales — se animan con opacity y transform */
.modal-overlay {
  will-change: opacity;
  transform: translateZ(0); /* fuerza capa GPU */
}
.modal {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Toast notifications */
.toast-container,
.toast {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Sidebar — transiciones de hover frecuentes */
.sidebar-item {
  will-change: background-color, border-color;
  contain: layout style; /* aisla reflow del sidebar */
}

/* Cards interactivos — hover con transform */
.venta-quick-card,
.tool-card,
.role-card,
.kpi-card,
.alm-stat-card,
.caja-card {
  will-change: transform, box-shadow;
  contain: layout;
}

/* Botones con transform en hover */
.btn-primary,
.btn-outline,
.btn-danger,
.icon-btn,
.action-btn {
  will-change: transform, box-shadow;
}

/* Tablas grandes — contain mejora scroll y repaint */
.table-wrapper {
  contain: layout style;
}
.data-table {
  table-layout: fixed; /* evita recálculos de columnas */
}

/* Logo animado */
.logo-icon,
.big-logo-icon {
  will-change: transform;
}

/* Dropdowns y menús */
.user-dropdown {
  will-change: opacity, transform;
  transform: translateZ(0);
}

/* Pantalla completa de perfil */
.perfil-fullscreen {
  will-change: opacity;
  transform: translateZ(0);
}

/* Respeto por preferencias del sistema (accesibilidad):
   Si el usuario tiene activado "Reducir movimiento" en su SO,
   desactivamos todas las animaciones automáticamente. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   MEJORAS PREMIUM — #1, #2, #3, #5, #6
   ================================================================ */

/* ── #6: MODO OSCURO ──────────────────────────────────────────── */
:root {
  --dm-bg: #0f1117;
  --dm-surface: #1a1d27;
  --dm-surface2: #242838;
  --dm-border: rgba(255,255,255,0.1);
  --dm-text: #e2e8f0;
  --dm-text2: #94a3b8;
  --dm-card: #1e2235;
  --dm-topbar: #0d1120;
  --dm-sidebar: #0d1120;
  --dm-table-head: #1a2a4a;
  --dm-row-hover: #1e2a3e;
}

.dark-mode body {
  background: var(--dm-bg);
  color: var(--dm-text);
}

.dark-mode .top-bar {
  background: linear-gradient(90deg, #0a0e1a 0%, #0d1120 30%, #152040 60%, #0d1120 100%) !important;
  background-size: 200% 100% !important;
}

.dark-mode .sidebar {
  background: var(--dm-sidebar);
}

.dark-mode .sidebar-item {
  color: rgba(200,220,255,0.8);
}

.dark-mode .sidebar-item.active {
  background: rgba(0,87,184,0.35);
}

.dark-mode .sidebar-item:hover {
  background: rgba(255,255,255,0.07);
}

.dark-mode .content-area {
  background: var(--dm-bg);
}

.dark-mode .section-card,
.dark-mode .chart-card,
.dark-mode .role-card,
.dark-mode .tool-card,
.dark-mode .venta-quick-card,
.dark-mode .ventas-welcome,
.dark-mode .cierre-item {
  background: var(--dm-card);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

.dark-mode .card-header-row h3,
.dark-mode .tool-name,
.dark-mode .role-name {
  color: var(--dm-text);
}

.dark-mode .tool-desc,
.dark-mode .role-desc,
.dark-mode .vqc-label,
.dark-mode .filter-row label {
  color: var(--dm-text2);
}

.dark-mode .form-input {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

.dark-mode .form-input:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(26,111,212,0.25);
}

.dark-mode .data-table th {
  background: var(--dm-table-head);
}

.dark-mode .data-table td {
  border-color: var(--dm-border);
  color: var(--dm-text);
}

.dark-mode .data-table tr:hover td {
  background: var(--dm-row-hover);
}

.dark-mode .data-table tr.selected td {
  background: rgba(0,87,184,0.25);
}

.dark-mode .table-wrapper {
  border-color: var(--dm-border);
}

.dark-mode .modal-footer {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}

.dark-mode .modal {
  background: var(--dm-card);
}

.dark-mode .bottom-bar {
  background: linear-gradient(90deg, #060810, #0a0e1a, #060810) !important;
  background-size: 200% !important;
}

.dark-mode .pagination-bar {
  border-color: var(--dm-border);
}

.dark-mode .detail-panel {
  border-color: var(--dm-border);
}

.dark-mode .detail-title {
  background: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

.dark-mode .tab-btn {
  background: var(--dm-surface);
  color: var(--dm-text);
}

.dark-mode .tab-btn:hover,
.dark-mode .tab-btn.active {
  background: var(--dm-surface2);
}

.dark-mode .welcome-sub {
  color: var(--dm-text2);
}

.dark-mode .big-logo-text strong {
  background: linear-gradient(90deg, #90caf9 0%, #e3f2fd 50%, #90caf9 100%);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark-mode .perm-badge.inactive {
  background: rgba(255,255,255,0.06);
  color: #666;
  border-color: rgba(255,255,255,0.1);
}

/* Botón modo oscuro */
.dark-mode-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 17px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  flex-shrink: 0;
}

.dark-mode-btn:hover {
  background: rgba(255,255,255,0.28);
  transform: scale(1.1);
}

/* ── #5: TOAST STACK MEJORADO ──────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 60px;
  right: 18px;
  z-index: 99999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}

.toast-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #1a1d27;
  color: #e2e8f0;
  padding: 12px 12px 10px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  font-size: 13px;
  font-weight: 500;
  pointer-events: all;
  opacity: 0;
  transform: translateX(110%);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  border-left: 4px solid #546e7a;
  min-width: 260px;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.toast-item.show {
  opacity: 1;
  transform: translateX(0);
}

.toast-item.toast-success { border-left-color: #00c853; background: linear-gradient(135deg, #0a2010 0%, #1a1d27 100%); }
.toast-item.toast-error   { border-left-color: #e53935; background: linear-gradient(135deg, #200a0a 0%, #1a1d27 100%); }
.toast-item.toast-warning { border-left-color: #ffd600; background: linear-gradient(135deg, #201a00 0%, #1a1d27 100%); }
.toast-item.toast-info    { border-left-color: #1e88e5; background: linear-gradient(135deg, #0a1020 0%, #1a1d27 100%); }
.toast-item.toast-stock   { border-left-color: #fb8c00; background: linear-gradient(135deg, #201100 0%, #1a1d27 100%); }

.toast-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toast-msg {
  line-height: 1.4;
}

.toast-progress-bar {
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.toast-progress-fill {
  height: 100%;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  width: 100%;
  animation: toastShrink linear forwards;
}

@keyframes toastShrink {
  from { width: 100%; }
  to   { width: 0%; }
}

.toast-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s ease;
  align-self: flex-start;
}

.toast-close:hover {
  color: rgba(255,255,255,0.9);
}

/* ── #2: BADGE STOCK BAJO ─────────────────────────────────────── */
.stock-badge-dot {
  position: absolute;
  top: 6px;
  right: 8px;
  background: linear-gradient(135deg, #e53935, #ff5252);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(229,57,53,0.6);
  cursor: pointer;
  letter-spacing: 0;
  z-index: 10;
  border: 1.5px solid rgba(255,255,255,0.3);
  line-height: 1;
}

@keyframes pulseAlert {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(229,57,53,0.7); }
  50%  { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(229,57,53,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(229,57,53,0); }
}

.stock-badge-dot.pulse-alert {
  animation: pulseAlert 1.2s ease 3;
}

/* ── #3: BARRA DE ESTADO GLOBAL ───────────────────────────────── */
.global-status-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd600;
  flex-shrink: 0;
  transition: background 0.5s ease, box-shadow 0.5s ease;
  animation: connPulse 2s ease-in-out infinite;
}

@keyframes connPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

.conn-label {
  color: rgba(255,255,255,0.8);
  font-weight: 600;
  white-space: nowrap;
}

.sb-sep {
  opacity: 0.3;
  margin: 0 2px;
}

.sb-user-info {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* ── #1: DASHBOARD KPIs ──────────────────────────────────────── */
.ventas-dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
  animation: fadeIn 0.4s ease;
}

.vd-kpi-card {
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vd-kpi-card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 10px 36px rgba(0,0,0,0.25);
}

.vd-kpi-card::before {
  content: '';
  position: absolute;
  right: -16px;
  top: -16px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}

.vd-kpi-card::after {
  content: '';
  position: absolute;
  right: 8px;
  bottom: -20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
}

.vd-kpi-card.blue   { background: linear-gradient(135deg, #1565c0, #0d47a1); }
.vd-kpi-card.green  { background: linear-gradient(135deg, #2e7d32, #1b5e20); }
.vd-kpi-card.purple { background: linear-gradient(135deg, #6a1b9a, #4a148c); }
.vd-kpi-card.orange { background: linear-gradient(135deg, #e65100, #bf360c); }

.vd-icon {
  font-size: 32px;
  flex-shrink: 0;
  z-index: 1;
  animation: iconFloat 3s ease-in-out infinite;
}

.vd-info {
  display: flex;
  flex-direction: column;
  z-index: 1;
  flex: 1;
}

.vd-val {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.vd-lbl {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 3px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.vd-trend {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.9;
  z-index: 1;
}

.vd-arrow {
  font-size: 18px;
  opacity: 0.7;
  z-index: 1;
  transition: transform 0.2s ease;
}

.vd-kpi-card:hover .vd-arrow {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .ventas-dashboard { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .ventas-dashboard { grid-template-columns: 1fr; }
}

/* Dark mode adjustments for dashboard */
.dark-mode .vd-kpi-card.blue   { background: linear-gradient(135deg, #0d2f6e, #0a1f4a); }
.dark-mode .vd-kpi-card.green  { background: linear-gradient(135deg, #0d3b1a, #071a0d); }
.dark-mode .vd-kpi-card.purple { background: linear-gradient(135deg, #2a0845, #1a052e); }
.dark-mode .vd-kpi-card.orange { background: linear-gradient(135deg, #5a2000, #3a1200); }

/* ── D: SKELETON LOADERS ─────────────────────────────── */
@keyframes skeletonShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.skeleton-row td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
}

.skeleton-cell {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e8edf5 25%, #d4dce9 50%, #e8edf5 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}

.dark-mode .skeleton-cell {
  background: linear-gradient(90deg, #1e2235 25%, #252a3e 50%, #1e2235 75%);
  background-size: 200% 100%;
}

/* ── A: QUICKSEARCH Ctrl+K ───────────────────────────── */
#modal-quicksearch {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0,0,0,0.65);
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  backdrop-filter: blur(6px);
  animation: fadeOverlay 0.15s ease;
}

#modal-quicksearch.open { display: flex; }

.qs-panel {
  background: #fff;
  border-radius: 14px;
  width: 580px;
  max-width: 92vw;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35), 0 4px 20px rgba(0,0,0,0.2);
  overflow: hidden;
  animation: modalBounceIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

.dark-mode .qs-panel {
  background: var(--dm-card);
  border: 1px solid var(--dm-border);
}

.qs-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(135deg, #0057b8, #1a6fd4);
}

.dark-mode .qs-header {
  border-color: var(--dm-border);
  background: linear-gradient(135deg, #0a1a3a, #0d2050);
}

.qs-search-icon {
  font-size: 20px;
  flex-shrink: 0;
}

#qs-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: var(--font);
  font-weight: 500;
  color: #fff;
  caret-color: #ffd600;
}

#qs-input::placeholder { color: rgba(255,255,255,0.55); }

.qs-kbd {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  font-family: var(--font);
  white-space: nowrap;
  cursor: pointer;
}

.qs-kbd:hover { background: rgba(255,255,255,0.25); }

#qs-results {
  max-height: 420px;
  overflow-y: auto;
  padding: 8px 0;
}

.qs-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 8px 18px 4px;
}

.dark-mode .qs-group-label { color: var(--dm-text2); }

.qs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-radius: 0;
}

.qs-item:hover { background: #f0f4ff; }
.dark-mode .qs-item:hover { background: var(--dm-row-hover); }

.qs-item-icon { font-size: 20px; flex-shrink: 0; }

.qs-item-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.qs-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark-mode .qs-item-title { color: var(--dm-text); }

.qs-item-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark-mode .qs-item-sub { color: var(--dm-text2); }

.qs-item-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  background: #f0f4f8;
  flex-shrink: 0;
}

.qs-empty, .qs-hints {
  padding: 28px 18px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

.qs-hints { text-align: left; }
.qs-hint-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.qs-hint-item span { font-size: 18px; }
.qs-hint-tip {
  margin-top: 12px;
  font-size: 11px;
  color: #aaa;
  text-align: center;
}

.dark-mode .qs-hint-item, .dark-mode .qs-empty { color: var(--dm-text2); }

.qs-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  color: var(--text-secondary);
  background: #f8fafc;
}

.dark-mode .qs-footer {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text2);
}

.qs-footer kbd {
  background: var(--border-light);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11px;
  font-family: var(--font);
}

/* ── F: BADGE VENTAS DEL DÍA ─────────────────────────── */
.ventas-badge-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  background: linear-gradient(135deg, #00c853, #00a844);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,200,83,0.5);
  letter-spacing: 0;
  z-index: 10;
  border: 1.5px solid rgba(255,255,255,0.3);
  line-height: 1;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────
   ADICIONES — BIOSIMILARES v2.1
   ─────────────────────────────────────────────── */

/* ── KPI "teal" (Margen del Día) ──────────────── */
.vd-kpi-card.teal {
  background: linear-gradient(135deg, #00897b, #00695c);
}

/* ── U3: Paginación como clase reutilizable ───── */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  gap: 8px;
  flex-wrap: wrap;
}

.page-info {
  font-size: 12px;
  color: var(--text-secondary);
}

.page-btn {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 12px;
  font-family: var(--font);
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: var(--transition);
}

.page-btn:hover:not(:disabled) {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── M4: columna precio compra + margen ──────── */
.col-precio-compra { color: var(--text-secondary); font-size: 12px; }
.margen-ok  { color: #2e7d32; font-weight: 700; font-size: 11px; }
.margen-low { color: #c62828; font-weight: 700; font-size: 11px; }

/* ── M2: badge método de pago ───────────────── */
.badge-metodo {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #e3f2fd;
  color: #1565c0;
  font-weight: 600;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────
   U4: RESPONSIVE — Pantallas < 1024px y < 768px
   ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
  :root {
    --sidebar-w: 52px;
  }

  .sidebar-item span:not(.sidebar-icon) { display: none; }
  .sidebar-item kbd { display: none; }
  .sidebar-item .sidebar-label { display: none; }

  .top-tabs .tab-btn span:not(.tab-icon) { display: none; }
  .tab-btn { min-width: 46px; padding: 6px 8px; }

  .ventas-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .roles-grid { grid-template-columns: repeat(2, 1fr); }
  .almacen-stats { grid-template-columns: repeat(2, 1fr); }
  .caja-summary { grid-template-columns: 1fr; }

  .ventas-dashboard { grid-template-columns: repeat(3, 1fr); }
  .charts-container { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root {
    --topbar-h: 56px;
    --sidebar-w: 0px;
  }

  .sidebar { display: none; }

  .main-layout { flex-direction: column; }

  .top-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tab-btn { flex-shrink: 0; }

  .top-bar-left { gap: 10px; }
  .cdt-badge { display: none; }

  .form-grid { grid-template-columns: 1fr; }
  .form-group.full { grid-column: 1 / -1; }

  .ventas-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .roles-grid { grid-template-columns: 1fr 1fr; }
  .almacen-stats { grid-template-columns: 1fr 1fr; }

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

  .modal-box { max-width: 95vw; margin: 12px; }
  .modal-footer { flex-direction: column; gap: 8px; }
  .modal-footer button { width: 100%; }

  /* Ocultar columnas menos importantes en tablas en móvil */
  .data-table .hide-mobile { display: none !important; }

  .content-area { padding: 12px; }
}

/* ─────────────────────────────────────────────────
   U2: PRINT — Dark mode fix y diseño de ticket
   ─────────────────────────────────────────────── */

@media print {
  /* Forzar colores claros para impresión (evitar tinta negra innecesaria) */
  * {
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
    border-color: #ccc !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Ocultar UI del sistema durante impresión */
  .top-bar,
  .sidebar,
  .bottom-bar,
  .modal-overlay,
  .action-icons,
  .btn-primary,
  .btn-outline,
  .btn-danger,
  #toast-container,
  #modal-quicksearch,
  .pagination-bar,
  .ventas-dashboard,
  .filter-row button {
    display: none !important;
  }

  /* El ticket se imprime directamente desde ventana secundaria, no afectar */
  .ticket-print-window {
    display: block !important;
  }

  body {
    overflow: visible !important;
    font-size: 12px;
  }

  .content-area {
    overflow: visible !important;
    padding: 0 !important;
  }

  .data-table th {
    background: #f0f0f0 !important;
    color: #000 !important;
  }
}

/* ================================================================
   MÓDULO METAS — Dashboard de Metas para Empleados
   ================================================================ */

/* ── KPI Row global ── */
.metas-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.mk-kpi-card {
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-lg);
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mk-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.2);
}

.mk-kpi-card::after {
  content: '';
  position: absolute;
  right: -12px;
  top: -12px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
}

.mk-kpi-icon { font-size: 32px; flex-shrink: 0; }

.mk-kpi-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mk-kpi-val {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-kpi-lbl {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* ── Grid de tarjetas ── */
.metas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
}

/* ── Tarjeta individual ── */
.meta-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--border-light);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.meta-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  opacity: 0.6;
  transition: opacity 0.3s;
}

.meta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,87,184,0.15);
  border-color: rgba(0,87,184,0.3);
}

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

/* Tarjeta en estado "meta alcanzada" */
.meta-card.meta-card-success {
  border-color: #a5d6a7;
  background: linear-gradient(180deg, #fff 0%, #f1f8e9 100%);
}

.meta-card.meta-card-success::before {
  background: linear-gradient(90deg, #43a047, #66bb6a);
  opacity: 1;
}

/* ── Cabecera de tarjeta ── */
.meta-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.meta-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.meta-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e3f0ff, #c8e2ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border: 2px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,87,184,0.15);
}

.meta-medalla {
  position: absolute;
  top: -6px;
  right: -8px;
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  animation: medalPulse 2s ease infinite;
}

@keyframes medalPulse {
  0%, 100% { transform: scale(1) rotate(-5deg); }
  50%       { transform: scale(1.15) rotate(5deg); }
}

.meta-yo-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 8px;
  white-space: nowrap;
}

.meta-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-nombre {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta-rol {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.meta-ultima {
  font-size: 10.5px;
  color: #90a4ae;
  margin-top: 2px;
}

.meta-acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.meta-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.meta-badge-ok   { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.meta-badge-pend { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }

.meta-config-btn {
  font-size: 11px !important;
  padding: 4px 8px !important;
  white-space: nowrap;
}

/* ── Fila de stats numéricos ── */
.meta-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8faff;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  gap: 4px;
  border: 1px solid var(--border-light);
}

.meta-stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.meta-stat-val {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.meta-stat-lbl {
  font-size: 9.5px;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
  margin-top: 2px;
}

.meta-stat-sep {
  color: var(--border);
  font-size: 18px;
  flex-shrink: 0;
  padding: 0 2px;
}

/* ── Barras de progreso ── */
.meta-progress-section {
  margin-bottom: 10px;
}

.meta-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.meta-progress-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.meta-progress-val {
  font-size: 11px;
  font-weight: 800;
}

.meta-progress-track {
  height: 8px;
  background: #e9eef5;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.meta-progress-fill {
  height: 100%;
  border-radius: 10px;
  width: 0%;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}

.meta-progress-glow {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  animation: glowPulse 2s ease infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.9; }
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .metas-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .metas-grid { grid-template-columns: 1fr; }
  .metas-kpi-row { grid-template-columns: 1fr 1fr; }
  .meta-stats-row { flex-wrap: wrap; gap: 8px; }
}

/* ── Dark Mode ── */
.dark-mode .meta-card {
  background: #1e2a3a;
  border-color: rgba(255,255,255,0.08);
}

.dark-mode .meta-card.meta-card-success {
  background: linear-gradient(180deg, #1e2a3a 0%, #1a3020 100%);
  border-color: #2e7d32;
}

.dark-mode .meta-stats-row {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.dark-mode .meta-progress-track { background: rgba(255,255,255,0.1); }

.dark-mode .meta-avatar {
  background: linear-gradient(135deg,#1a3060,#0d2040);
  border-color: rgba(255,255,255,0.15);
}

.dark-mode .meta-nombre { color: #e8eaf6; }
.dark-mode .mk-kpi-card { box-shadow: 0 4px 20px rgba(0,0,0,0.4); }

/* ================================================================
   #14 — CRM FIDELIZACIÓN — Estilos del Panel de Clientes
   ================================================================ */

.crm-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 900px) { .crm-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 550px) { .crm-kpi-row { grid-template-columns: 1fr 1fr; } }

.crm-kpi-card {
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
  overflow: hidden;
}

.crm-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.28);
}

.crm-kpi-card::after {
  content: '';
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255,255,255,0.09);
}

.crm-kpi-icon {
  font-size: 30px;
  flex-shrink: 0;
  animation: iconFloat 3.5s ease-in-out infinite;
}

.crm-kpi-val { font-size: 24px; font-weight: 800; line-height: 1; }
.crm-kpi-lbl { font-size: 11px; opacity: 0.85; margin-top: 3px; }

/* Nivel badge en tabla */
.crm-nivel-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

/* Alerta clientes inactivos */
.crm-alert-box {
  margin-top: 14px;
  background: #fff5f5;
  border: 1px solid #ffcdd2;
  border-left: 4px solid #e53935;
  border-radius: 10px;
  padding: 14px 18px;
}

/* Dark mode CRM */
.dark-mode .crm-alert-box {
  background: rgba(229,57,53,0.08);
  border-color: rgba(229,57,53,0.3);
}

/* ================================================================
   #9 — SCANNER CÁMARA — Estilos del Modal
   ================================================================ */

.scanner-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.25s ease;
}

.scanner-modal-overlay.open {
  display: flex;
}

.scanner-modal {
  background: #fff;
  border-radius: 18px;
  width: min(480px, 95vw);
  box-shadow: 0 24px 72px rgba(0,0,0,0.5);
  overflow: hidden;
  animation: scaleIn 0.28s cubic-bezier(0.34,1.56,0.64,1);
}

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

.scanner-header {
  background: linear-gradient(135deg,#1a237e,#283593);
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: #fff;
}

.scanner-title  { font-size: 16px; font-weight: 800; }
.scanner-subtitle { font-size: 12px; opacity: 0.75; margin-top: 3px; }

.scanner-close-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.scanner-close-btn:hover { background: rgba(255,255,255,0.3); }

/* Visor de cámara */
.scanner-video-wrap {
  position: relative;
  background: #000;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.scanner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scanner-overlay {
  position: absolute;
  inset: 0;
  transition: background 0.3s ease;
}

/* Esquinas de enfoque */
.scanner-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sc-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: #fff;
  border-style: solid;
  border-width: 0;
}

.sc-tl { top: 22%; left: 18%; border-top-width: 3px; border-left-width: 3px; border-radius: 3px 0 0 0; }
.sc-tr { top: 22%; right: 18%; border-top-width: 3px; border-right-width: 3px; border-radius: 0 3px 0 0; }
.sc-bl { bottom: 22%; left: 18%; border-bottom-width: 3px; border-left-width: 3px; border-radius: 0 0 0 3px; }
.sc-br { bottom: 22%; right: 18%; border-bottom-width: 3px; border-right-width: 3px; border-radius: 0 0 3px 0; }

/* Línea de escaneo animada */
.scanner-line {
  position: absolute;
  top: 22%;
  left: 18%;
  right: 18%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00e5ff, transparent);
  animation: scanLine 2s ease-in-out infinite;
  box-shadow: 0 0 8px #00e5ff;
}

@keyframes scanLine {
  0%   { top: 22%; }
  50%  { top: 78%; }
  100% { top: 22%; }
}

/* Modo manual */
.scanner-manual-wrap {
  padding: 28px 24px;
  text-align: center;
}

/* Barra de estado */
.scanner-status-bar {
  padding: 10px 16px;
  background: #f8fafc;
  border-top: 1px solid #e8edf3;
}

.scanner-status-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.scanner-last-text {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Controles */
.scanner-controls {
  display: flex;
  gap: 8px;
  padding: 10px 16px 14px;
  justify-content: flex-end;
  background: #fff;
}

/* Dark mode Scanner */
.dark-mode .scanner-modal { background: var(--dm-card); }
.dark-mode .scanner-status-bar { background: var(--dm-surface); border-color: var(--dm-border); }
.dark-mode .scanner-controls { background: var(--dm-card); }
.dark-mode .scanner-status-text { color: var(--dm-text); }
.dark-mode .scanner-last-text { color: var(--dm-text2); }
.dark-mode .scanner-manual-wrap { color: var(--dm-text); }

/* ================================================================
   #13 — REPORTES AVANZADOS — Estilos ABC / Heatmap / Proyecciones
   ================================================================ */

/* Contenedor de análisis avanzado */
.adv-report-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 900px) { .adv-report-grid { grid-template-columns: 1fr; } }

/* Tabla ABC */
.abc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.abc-A { background: linear-gradient(135deg,#2e7d32,#43a047); }
.abc-B { background: linear-gradient(135deg,#f57c00,#fb8c00); }
.abc-C { background: linear-gradient(135deg,#757575,#9e9e9e); }

/* Proyecciones IA */
.ai-proj-card {
  background: linear-gradient(135deg,#1a237e,#283593);
  border-radius: 14px;
  padding: 20px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(26,35,126,0.3);
}

.ai-proj-title {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.9;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-proj-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
}

.ai-proj-item:last-child { border-bottom: none; }
.ai-proj-val { font-weight: 800; font-size: 15px; }
.ai-proj-trend-up   { color: #69f0ae; }
.ai-proj-trend-down { color: #ff5252; }

/* Heatmap días */
.heatmap-grid {
  display: grid;
  grid-template-columns: auto repeat(7, 1fr);
  gap: 3px;
  font-size: 10px;
}

.hm-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  cursor: default;
  transition: transform 0.15s;
}

.hm-cell:hover { transform: scale(1.15); z-index: 1; }
.hm-label { display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 10px; }

.hm-0 { background: #e8f5e9; }
.hm-1 { background: #a5d6a7; }
.hm-2 { background: #66bb6a; }
.hm-3 { background: #43a047; }
.hm-4 { background: #2e7d32; }

.dark-mode .hm-0 { background: #1a2a1a; }
.dark-mode .hm-1 { background: #1b4a1b; }
.dark-mode .hm-2 { background: #1e6b1e; }
.dark-mode .hm-3 { background: #237223; }
.dark-mode .hm-4 { background: #297829; }

/* Dark mode ajustes avanzados */
.dark-mode .ai-proj-card { background: linear-gradient(135deg,#0d1440,#121e5e); }

/* ================================================================
   OLA 3 — FARMAI CHAT PANEL
   Asistente IA con Gemini 1.5 Flash
================================================================ */

/* Botón flotante */
#ia-fab {
  position: fixed;
  bottom: 60px;
  right: 18px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6c3fd3, #4527a0);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(108,63,211,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 1200;
  transition: all 0.25s ease;
  animation: ia-pulse 3s ease-in-out infinite;
}

#ia-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(108,63,211,0.6);
}

@keyframes ia-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(108,63,211,0.45); }
  50%       { box-shadow: 0 4px 30px rgba(108,63,211,0.7); }
}

/* Badge de alertas en el FAB */
#ia-alert-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #c62828;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

/* Panel de chat */
#ia-panel {
  position: fixed;
  bottom: 120px;
  right: 18px;
  width: 380px;
  max-width: calc(100vw - 36px);
  height: 560px;
  max-height: calc(100vh - 140px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 50px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  z-index: 1199;
  transform: scale(0.85) translateY(20px);
  transform-origin: bottom right;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(108,63,211,0.15);
  overflow: hidden;
}

#ia-panel.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* Header del panel */
.ia-panel-header {
  background: linear-gradient(135deg, #6c3fd3, #4527a0);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.ia-panel-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 2px solid rgba(255,255,255,0.4);
}

.ia-panel-info { flex: 1; }
.ia-panel-name { font-size: 14px; font-weight: 800; color: #fff; }
.ia-panel-status { font-size: 11px; color: rgba(255,255,255,0.75); }

.ia-panel-actions { display: flex; gap: 6px; }
.ia-panel-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 8px;
  color: #fff;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.ia-panel-btn:hover { background: rgba(255,255,255,0.28); }

/* Quick prompts */
.ia-quick-prompts {
  display: flex;
  gap: 6px;
  padding: 10px 12px 6px;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
  background: #f8f5ff;
  border-bottom: 1px solid #ede8ff;
}

.ia-quick-prompts::-webkit-scrollbar { display: none; }

.ia-qp-btn {
  flex-shrink: 0;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #d0bfff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #6c3fd3;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.ia-qp-btn:hover {
  background: #6c3fd3;
  color: #fff;
  border-color: #6c3fd3;
}

/* Zona de mensajes */
#ia-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fafbff;
}

#ia-messages::-webkit-scrollbar { width: 4px; }
#ia-messages::-webkit-scrollbar-thumb { background: #d0bfff; border-radius: 2px; }

/* Mensajes */
.ia-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  animation: iaFadeIn 0.2s ease;
}

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

.ia-msg-user { flex-direction: row-reverse; }

.ia-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ede8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.ia-msg-user .ia-msg-avatar {
  background: var(--primary);
}

.ia-msg-bubble { max-width: 82%; }

.ia-msg-content {
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  border: 1px solid var(--border-light);
}

.ia-msg-user .ia-msg-content {
  background: linear-gradient(135deg, #6c3fd3, #4527a0);
  color: #fff;
  border: none;
}

.ia-msg-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.ia-msg-actions button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.5;
  transition: opacity 0.15s;
  padding: 2px;
}
.ia-msg-actions button:hover { opacity: 1; }

/* Indicador "pensando" */
.ia-thinking {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  align-items: center;
}

.ia-thinking span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9c7ee0;
  animation: ia-dot 1.2s ease-in-out infinite;
}

.ia-thinking span:nth-child(2) { animation-delay: 0.2s; }
.ia-thinking span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ia-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* Input bar */
.ia-input-bar {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

#ia-input {
  flex: 1;
  border: 1.5px solid #d0bfff;
  border-radius: 20px;
  padding: 8px 14px;
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  resize: none;
  background: #f8f5ff;
  color: var(--text-primary);
  transition: border-color 0.15s;
}

#ia-input:focus { border-color: #6c3fd3; background: #fff; }
#ia-input::placeholder { color: #b0a0d4; }

#ia-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6c3fd3, #4527a0);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(108,63,211,0.35);
}

#ia-send-btn:hover:not(:disabled) {
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(108,63,211,0.5);
}

#ia-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Dark mode */
.dark-mode #ia-panel { background: #1e1e2e; border-color: rgba(108,63,211,0.3); }
.dark-mode #ia-messages { background: #16162a; }
.dark-mode .ia-msg-content { background: #252540; border-color: #2a2a4a; color: #e0e0f0; }
.dark-mode .ia-quick-prompts { background: #1a1a30; border-color: #2a2a4a; }
.dark-mode .ia-qp-btn { background: #252540; border-color: #4a3a9a; color: #c0a0ff; }
.dark-mode #ia-input { background: #252540; border-color: #4a3a9a; color: #e0e0f0; }
.dark-mode .ia-input-bar { background: #1e1e2e; border-color: #2a2a4a; }

/* Semáforo vencimientos (lotes) */
.row-vencido td { background: rgba(198,40,40,0.05) !important; }
.row-critico td { background: rgba(198,40,40,0.03) !important; }
.row-advertencia td { background: rgba(245,124,0,0.03) !important; }

/* ================================================================
   MÓDULO AUTOMATIZACIÓN — Panel de Reportes Programados
   ================================================================ */
#mod-automatizacion {
  padding: 20px;
}

/* Banner de estado activo */
.auto-status-banner {
  background: linear-gradient(135deg, #0d2b1a, #0f3525);
  border: 1px solid rgba(67,160,71,0.35);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15), inset 0 0 40px rgba(67,160,71,0.05);
}

.auto-status-icon {
  font-size: 40px;
  animation: iconFloat 3s ease-in-out infinite;
  flex-shrink: 0;
}

.auto-status-info {
  flex: 1;
}

.auto-status-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auto-badge-active {
  background: linear-gradient(135deg, #2e7d32, #43a047);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  animation: pulseGreen 2s ease-in-out infinite;
}

@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(67,160,71,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(67,160,71,0); }
}

.auto-status-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}

.auto-status-next {
  text-align: right;
  flex-shrink: 0;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.08);
}

.auto-next-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}

.auto-next-date {
  font-size: 14px;
  font-weight: 700;
  color: #a5d6a7;
  text-transform: capitalize;
}

.auto-next-time {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 3px;
}

/* Grid de dos columnas */
.auto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .auto-grid { grid-template-columns: 1fr; }
}

/* Lista de destinatarios */
.destinatarios-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.dest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-light, #f8fafc);
  border: 1px solid var(--border-light, #e8ecf0);
  border-radius: 8px;
  transition: background 0.15s ease;
}

.dest-row:hover { background: #f0f4ff; }

.dest-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dest-badge {
  font-size: 10px;
  font-weight: 700;
  background: #e3f0ff;
  color: #0057b8;
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dest-email {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dest-remove-btn {
  background: none;
  border: none;
  color: #c62828;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.6;
  padding: 4px 6px;
  border-radius: 4px;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
}
.dest-remove-btn:hover {
  opacity: 1;
  background: rgba(198,40,40,0.1);
}

.auto-destinatarios-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 8px;
  font-size: 12px;
  color: #5d4037;
  line-height: 1.5;
  margin-top: 12px;
}

/* Config grid */
.auto-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.auto-config-item {
  padding: 8px 12px;
  background: var(--bg-light, #f8fafc);
  border-radius: 8px;
  border: 1px solid var(--border-light, #e8ecf0);
}

.auto-config-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  margin-bottom: 3px;
  font-weight: 600;
}

.auto-config-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.auto-config-val code {
  background: #e8f0fe;
  color: #0057b8;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 11px;
}

/* Resultados de envío */
.auto-result-ok,
.auto-result-error {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid;
}

.auto-result-ok {
  background: #e8f5e9;
  border-color: #a5d6a7;
}

.auto-result-error {
  background: #ffebee;
  border-color: #ef9a9a;
}

.auto-result-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.auto-result-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.auto-result-detail {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.8;
}

.auto-result-detail code {
  background: rgba(0,0,0,0.07);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 11px;
}

/* Historial */
.auto-loading {
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.auto-empty-hist {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

/* Dark mode support */
.dark-mode .auto-status-banner {
  background: linear-gradient(135deg, #071209, #0a1e10);
}

.dark-mode .dest-row {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}

.dark-mode .dest-row:hover { background: var(--dm-row-hover); }
.dark-mode .dest-email { color: var(--dm-text); }

.dark-mode .auto-config-item {
  background: var(--dm-surface);
  border-color: var(--dm-border);
}

.dark-mode .auto-config-val { color: var(--dm-text); }

.dark-mode .auto-config-val code {
  background: rgba(26,111,212,0.2);
  color: #90caf9;
}

.dark-mode .auto-result-ok {
  background: rgba(46,125,50,0.15);
  border-color: rgba(67,160,71,0.4);
}

.dark-mode .auto-result-error {
  background: rgba(198,40,40,0.15);
  border-color: rgba(229,57,53,0.4);
}

.dark-mode .auto-result-title { color: var(--dm-text); }
.dark-mode .auto-result-detail { color: var(--dm-text2); }

.dark-mode .auto-destinatarios-note {
  background: rgba(255,214,0,0.08);
  border-color: rgba(255,214,0,0.2);
  color: #ffe082;
}

/* ================================================================
   WEB WORKER UI — Overlay de progreso no-bloqueante
   Aparece encima de todo mientras el Worker procesa datos pesados.
   La UI del sistema sigue activa a 60fps durante todo el proceso.
================================================================ */

/* Animación de rotación para el ícono de carga del Worker */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Overlay fondo semitransparente */
#worker-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: fadeOverlay 0.2s ease;
}

#worker-overlay.visible {
  display: flex;
}

/* Tarjeta central del overlay */
.worker-overlay-inner {
  background: #fff;
  border-radius: 20px;
  padding: 36px 48px;
  text-align: center;
  min-width: 320px;
  max-width: 480px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35), 0 4px 20px rgba(0, 0, 0, 0.2);
  animation: modalBounceIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1.5px solid rgba(0, 87, 184, 0.15);
}

.dark-mode .worker-overlay-inner {
  background: var(--dm-card);
  border-color: var(--dm-border);
}

/* Spinner animado */
.worker-spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 5px solid rgba(0, 87, 184, 0.15);
  border-top-color: #0057b8;
  animation: spin 0.85s linear infinite;
  margin: 0 auto 20px;
}

.dark-mode .worker-spinner {
  border-color: rgba(100, 160, 255, 0.2);
  border-top-color: #5b8def;
}

/* Título y subtítulo del overlay */
.worker-overlay-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-family: var(--font);
}

.dark-mode .worker-overlay-title { color: var(--dm-text); }

.worker-overlay-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-family: var(--font);
  line-height: 1.5;
}

.dark-mode .worker-overlay-sub { color: var(--dm-text2); }

/* Barra de progreso */
.worker-progress-bar {
  height: 8px;
  background: #e8edf5;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.dark-mode .worker-progress-bar { background: rgba(255,255,255,0.1); }

.worker-progress-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #0057b8, #1a8cff);
  width: 0%;
  transition: width 0.4s ease;
  position: relative;
  box-shadow: 0 0 12px rgba(0, 87, 184, 0.5);
}

.worker-progress-fill::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 24px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
  border-radius: 10px;
}

/* Porcentaje */
.worker-overlay-pct {
  font-size: 13px;
  font-weight: 800;
  color: #0057b8;
  font-family: var(--font);
}

.dark-mode .worker-overlay-pct { color: #5b8def; }

/* ================================================================
   ANÁLISIS AVANZADO — Estilos ABC, Heatmap, IA Proyección
================================================================ */

/* Grid 2 columnas del reporte avanzado */
.adv-report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 1100px) {
  .adv-report-grid { grid-template-columns: 1fr; }
}

/* Badges ABC (clase A/B/C) */
.abc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.abc-badge.abc-A { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.abc-badge.abc-B { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
.abc-badge.abc-C { background: #f5f5f5; color: #616161; border: 1px solid #bdbdbd; }

.dark-mode .abc-badge.abc-A { background: rgba(46,125,50,0.2);  border-color: rgba(165,214,167,0.3); }
.dark-mode .abc-badge.abc-B { background: rgba(230,81,0,0.2);   border-color: rgba(255,204,128,0.3); }
.dark-mode .abc-badge.abc-C { background: rgba(97,97,97,0.2);   border-color: rgba(189,189,189,0.3); }

/* Heatmap grid */
.heatmap-grid {
  display: grid;
  grid-template-columns: 100px repeat(7, 1fr);
  gap: 3px;
  align-items: center;
}

.hm-label {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 600;
}

.hm-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  cursor: default;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.hm-cell:hover { transform: scale(1.2); opacity: 0.9; }

/* Niveles de calor 0-4 */
.hm-0 { background: #eef2f7; }
.hm-1 { background: #bbdefb; }
.hm-2 { background: #64b5f6; }
.hm-3 { background: #1e88e5; }
.hm-4 { background: #0d47a1; }

.dark-mode .hm-0 { background: rgba(255,255,255,0.06); }
.dark-mode .hm-1 { background: rgba(30,136,229,0.25); }
.dark-mode .hm-2 { background: rgba(30,136,229,0.5); }
.dark-mode .hm-3 { background: rgba(30,136,229,0.75); }
.dark-mode .hm-4 { background: #1e88e5; }

/* IA Proyección card */
.ai-proj-card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 18px;
  border: 1.5px solid var(--border-light);
  box-shadow: var(--shadow);
}

.dark-mode .ai-proj-card {
  background: var(--dm-card);
  border-color: var(--dm-border);
}

.ai-proj-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.dark-mode .ai-proj-title {
  color: var(--dm-text);
  border-color: var(--dm-border);
}

.ai-proj-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 6px;
  background: #f8faff;
  border: 1px solid var(--border-light);
  font-size: 12px;
  transition: background 0.15s ease;
}

.ai-proj-item:hover { background: #eef4ff; }

.dark-mode .ai-proj-item {
  background: rgba(255,255,255,0.04);
  border-color: var(--dm-border);
}

.dark-mode .ai-proj-item:hover { background: rgba(255,255,255,0.08); }

.ai-proj-trend-up   { color: #2e7d32; font-weight: 700; font-size: 11px; }
.ai-proj-trend-down { color: #c62828; font-weight: 700; font-size: 11px; }

.ai-proj-val {
  font-size: 14px;
  font-weight: 800;
  color: #0057b8;
  min-width: 48px;
  text-align: right;
}

.dark-mode .ai-proj-val { color: #5b8def; }

/* ═══════════════════════════════════════════════════════════
   ADMINS ROOM — Menú flotante premium (F10)
   ═══════════════════════════════════════════════════════════ */

/* Botón del sidebar */
.admins-room-btn {
  transition: background 0.25s, box-shadow 0.25s !important;
}
.admins-room-btn:hover,
.admins-room-btn-open {
  background: linear-gradient(135deg, rgba(255,214,0,0.22), rgba(108,63,211,0.18)) !important;
  box-shadow: inset 0 0 20px rgba(255,214,0,0.1);
}
.admins-room-btn-open {
  border-left-color: #ffd600 !important;
  box-shadow: inset 0 0 24px rgba(255,214,0,0.15),
              4px 0 12px rgba(255,214,0,0.2) !important;
}

/* Overlay de fondo */
#admins-room-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(8, 15, 35, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Panel principal */
.admins-room-panel {
  background: linear-gradient(145deg, rgba(18, 28, 60, 0.98), rgba(10, 16, 40, 0.99));
  border: 1px solid rgba(255, 214, 0, 0.22);
  border-radius: 20px;
  padding: 28px 32px 24px;
  width: min(580px, 94vw);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(255, 214, 0, 0.06);
  position: relative;
  overflow: hidden;
}

/* Decoración de fondo del panel */
.admins-room-panel::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,214,0,0.1), transparent 70%);
  pointer-events: none;
}
.admins-room-panel::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(108,63,211,0.12), transparent 70%);
  pointer-events: none;
}

/* Animaciones */
@keyframes arSlideIn {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes arSlideOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.9) translateY(12px); }
}

/* Header */
.ar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,214,0,0.15);
}
.ar-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ar-crown {
  font-size: 36px;
  filter: drop-shadow(0 0 12px rgba(255,214,0,0.6));
  animation: crownPulse 3s ease infinite;
}
@keyframes crownPulse {
  0%, 100% { transform: scale(1) rotate(-3deg); filter: drop-shadow(0 0 10px rgba(255,214,0,0.5)); }
  50% { transform: scale(1.08) rotate(3deg); filter: drop-shadow(0 0 18px rgba(255,214,0,0.9)); }
}
.ar-title {
  font-family: 'Roboto Condensed', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #ffd600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(255,214,0,0.4);
}
.ar-subtitle {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.ar-subtitle kbd {
  background: rgba(255,214,0,0.15);
  border: 1px solid rgba(255,214,0,0.3);
  color: rgba(255,214,0,0.8);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: 'Inter', sans-serif;
}
.ar-close-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  flex-shrink: 0;
}
.ar-close-btn:hover {
  background: rgba(229,57,53,0.2);
  border-color: rgba(229,57,53,0.4);
  color: #ef9a9a;
  transform: rotate(90deg);
}

/* Grid de cards */
.ar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

/* Card base */
.ar-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.ar-card:hover {
  transform: translateY(-3px) scale(1.02);
}
.ar-card:focus-visible {
  outline: 2px solid #ffd600;
  outline-offset: 2px;
}
.ar-card-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 14px;
  pointer-events: none;
}
.ar-card:hover .ar-card-glow { opacity: 1; }

.ar-card-icon {
  font-size: 30px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px currentColor);
}
.ar-card-info { flex: 1; min-width: 0; }
.ar-card-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}
.ar-card-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  line-height: 1.35;
}
.ar-card-arrow {
  font-size: 18px;
  color: rgba(255,255,255,0.3);
  transition: transform 0.2s, color 0.2s;
  flex-shrink: 0;
}
.ar-card:hover .ar-card-arrow {
  transform: translateX(4px);
  color: rgba(255,255,255,0.8);
}

/* Variantes de color */
.ar-card-gold {
  border-color: rgba(255,214,0,0.2);
  background: linear-gradient(135deg, rgba(255,214,0,0.08), rgba(255,160,0,0.05));
}
.ar-card-gold:hover {
  border-color: rgba(255,214,0,0.5);
  box-shadow: 0 8px 28px rgba(255,214,0,0.2), inset 0 1px 0 rgba(255,214,0,0.15);
}
.ar-card-gold .ar-card-glow {
  background: radial-gradient(ellipse at 20% 50%, rgba(255,214,0,0.12), transparent 70%);
}

.ar-card-blue {
  border-color: rgba(30,136,229,0.2);
  background: linear-gradient(135deg, rgba(21,101,192,0.1), rgba(13,71,161,0.06));
}
.ar-card-blue:hover {
  border-color: rgba(30,136,229,0.5);
  box-shadow: 0 8px 28px rgba(30,136,229,0.2), inset 0 1px 0 rgba(30,136,229,0.15);
}
.ar-card-blue .ar-card-glow {
  background: radial-gradient(ellipse at 20% 50%, rgba(30,136,229,0.12), transparent 70%);
}

.ar-card-purple {
  border-color: rgba(108,63,211,0.2);
  background: linear-gradient(135deg, rgba(108,63,211,0.1), rgba(74,20,140,0.06));
}
.ar-card-purple:hover {
  border-color: rgba(108,63,211,0.5);
  box-shadow: 0 8px 28px rgba(108,63,211,0.2), inset 0 1px 0 rgba(108,63,211,0.15);
}
.ar-card-purple .ar-card-glow {
  background: radial-gradient(ellipse at 20% 50%, rgba(108,63,211,0.12), transparent 70%);
}

/* Footer */
.ar-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.3px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ar-footer kbd {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  border-radius: 3px;
  padding: 0 5px;
  font-size: 10px;
  font-family: 'Inter', sans-serif;
}

/* Dark mode (ya está en contexto oscuro, nada extra necesario) */

/* ================================================================
   ADMINS ROOM — variante TEAL para card Configuración
   ================================================================ */
.ar-card-teal {
  border-color: rgba(0, 188, 165, 0.35);
}
.ar-card-teal .ar-card-glow {
  background: radial-gradient(circle at 30% 30%, rgba(0, 191, 165, 0.22), transparent 70%);
}
.ar-card-teal .ar-card-icon {
  color: #00bfa5;
  text-shadow: 0 0 20px rgba(0, 191, 165, 0.55);
}
.ar-card-teal:hover {
  border-color: rgba(0, 191, 165, 0.6);
  box-shadow: 0 8px 30px rgba(0, 191, 165, 0.2);
}

/* ================================================================
   MODAL CONFIGURACIÓN DEL SISTEMA — Estilos .cs-*
   Abierto desde ADMINS ROOM → card ⚙️ Configuración
   ================================================================ */

/* Overlay */
.cs-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: rgba(6, 14, 28, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: opacity 0.25s ease;
}
.cs-modal-overlay.cs-open {
  display: flex;
  animation: csOverlayIn 0.2s ease;
}

@keyframes csOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Panel principal */
.cs-panel {
  background: linear-gradient(145deg, rgba(18, 32, 56, 0.99), rgba(10, 20, 40, 0.99));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  width: min(980px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 191, 165, 0.08);
  overflow: hidden;
  animation: csPanelIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes csPanelIn {
  from { transform: scale(0.93) translateY(16px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* Header */
.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(0, 191, 165, 0.08), transparent);
}
.cs-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cs-header-icon {
  font-size: 28px;
  filter: drop-shadow(0 0 12px rgba(0, 191, 165, 0.5));
}
.cs-header-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
}
.cs-header-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}
.cs-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
  flex-shrink: 0;
}
.cs-close-btn:hover {
  background: rgba(229, 57, 53, 0.2);
  border-color: rgba(229, 57, 53, 0.4);
  color: #ef9a9a;
}

/* Barra de tabs */
.cs-tabs {
  display: flex;
  gap: 2px;
  padding: 12px 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.cs-tabs::-webkit-scrollbar { display: none; }

.cs-tab-btn {
  flex-shrink: 0;
  padding: 9px 16px;
  border: none;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.cs-tab-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
}
.cs-tab-btn.active {
  color: #00bfa5;
  background: rgba(0, 191, 165, 0.1);
  border-bottom-color: #00bfa5;
}

/* Body scrollable */
.cs-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 191, 165, 0.3) transparent;
}
.cs-body::-webkit-scrollbar { width: 5px; }
.cs-body::-webkit-scrollbar-thumb { background: rgba(0, 191, 165, 0.3); border-radius: 3px; }

/* Paneles de cada tab */
.cs-tab-panel {
  display: none;
  padding: 22px 24px;
  animation: csTabFade 0.18s ease;
}
.cs-tab-panel.active { display: block; }

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

/* Títulos de sección */
.cs-section-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* Grid de formulario */
.cs-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 640px) { .cs-form-grid { grid-template-columns: 1fr; } }

.cs-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cs-span2 { grid-column: span 2; }
@media (max-width: 640px) { .cs-span2 { grid-column: span 1; } }

.cs-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.cs-field input,
.cs-field select,
.cs-select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.18s, background 0.18s;
  width: 100%;
  box-sizing: border-box;
}
.cs-field input:focus,
.cs-field select:focus {
  border-color: rgba(0, 191, 165, 0.55);
  background: rgba(0, 191, 165, 0.06);
}
.cs-field input::placeholder { color: rgba(255, 255, 255, 0.2); }
.cs-select option { background: #0e1e36; color: #fff; }

/* Hint / nota */
.cs-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  margin: -8px 0 14px;
  line-height: 1.5;
}

/* Toggles */
.cs-toggles-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}
.cs-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #00bfa5;
  cursor: pointer;
  flex-shrink: 0;
}

/* Botones de acción */
.cs-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 4px;
}
.cs-btn-save {
  background: linear-gradient(135deg, #00897b, #00bfa5);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.2s;
  box-shadow: 0 3px 14px rgba(0, 191, 165, 0.3);
}
.cs-btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 191, 165, 0.45);
}
.cs-btn-cancel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.18s;
}
.cs-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.cs-btn-new {
  background: rgba(0, 191, 165, 0.12);
  border: 1px solid rgba(0, 191, 165, 0.3);
  border-radius: 8px;
  color: #00bfa5;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.18s;
}
.cs-btn-new:hover {
  background: rgba(0, 191, 165, 0.22);
  border-color: rgba(0, 191, 165, 0.5);
}

/* Logo upload */
.cs-logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cs-logo-preview {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}
.cs-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
  transition: all 0.18s;
}
.cs-file-btn:hover {
  background: rgba(0, 191, 165, 0.1);
  border-color: rgba(0, 191, 165, 0.4);
  color: #00bfa5;
}

/* Tabla de sucursales */
.cs-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}
.cs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cs-table thead tr {
  background: rgba(255, 255, 255, 0.05);
}
.cs-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
}
.cs-table td {
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cs-table tr:hover td { background: rgba(255, 255, 255, 0.03); }
.cs-table tr:last-child td { border-bottom: none; }

/* Sub-formulario (crear/editar sucursal) */
.cs-sub-form {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 191, 165, 0.2);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 12px;
}
.cs-sub-form-title {
  font-size: 13px;
  font-weight: 700;
  color: #00bfa5;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 191, 165, 0.15);
}