/* ══════════════════════════════════════════════════════════════
   IN-PACK CRM — ESTILOS FASE 1
   Respeta las variables del index.html (--primary, --orange, etc.)
   ══════════════════════════════════════════════════════════════ */

/* Badge del sidebar (Pedidos online con contador) */
.crm-badge {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  margin-left: 6px;
  background: var(--orange, #F5923A);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  animation: crmPulse 2s infinite;
}
@keyframes crmPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.15); opacity: .85; }
}

/* Stats superiores del CRM */
.crm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.crm-stat {
  background: var(--bg, #f4f7fb);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 14px 16px;
}
.crm-stat-lbl { font-size: 11px; color: var(--text-500, #64748b); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.crm-stat-val { font-size: 22px; font-weight: 700; color: var(--text-900, #0f172a); margin-top: 4px; }
.crm-hot   { color: #c0392b; }
.crm-blue  { color: #2980b9; }
.crm-green { color: #27ae60; }

/* Filtros (chips) */
.crm-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.crm-chip {
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-700, #334155);
  cursor: pointer;
  transition: all .15s;
}
.crm-chip:hover { background: var(--bg, #f4f7fb); }
.crm-chip.on {
  background: var(--primary, #1e3a5f);
  color: #fff;
  border-color: var(--primary, #1e3a5f);
}
.crm-chip-hot.on  { background: #c0392b; border-color: #c0392b; }
.crm-chip-warm.on { background: #e67e22; border-color: #e67e22; }
.crm-chip-cold.on { background: #2980b9; border-color: #2980b9; }
.crm-chip-win.on  { background: #27ae60; border-color: #27ae60; }

/* Tabla de leads */
.crm-table td, .crm-table th { vertical-align: middle; }
.crm-lead-row { cursor: pointer; transition: background .15s; }
.crm-lead-row:hover { background: var(--bg, #f4f7fb); }
.crm-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.crm-avatar-hot  { background: #fdedec; color: #c0392b; }
.crm-avatar-warm { background: #fef5e7; color: #b9770e; }
.crm-avatar-cold { background: #d6eaf8; color: #2471a3; }
.crm-avatar-new  { background: #eaeded; color: #566573; }
.crm-avatar-win  { background: #d4efdf; color: #1e8449; }
.crm-avatar-out  { background: #f4f6f7; color: #99a3a4; }

.crm-lead-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crm-lead-info { min-width: 0; }
.crm-lead-name { font-weight: 600; color: var(--text-900, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.crm-lead-tel  { font-size: 11px; color: var(--text-500, #64748b); margin-top: 1px; }

.crm-origen-tag {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  background: #eef2f7;
  color: #475569;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.crm-producto { font-size: 11px; color: var(--text-500, #64748b); margin-top: 3px; }

.crm-estado-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.crm-estado-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.crm-estado-caliente   { background: #fdedec; color: #c0392b; }
.crm-estado-caliente::before { background: #c0392b; }
.crm-estado-tibio      { background: #fef5e7; color: #b9770e; }
.crm-estado-tibio::before { background: #b9770e; }
.crm-estado-frio       { background: #d6eaf8; color: #2471a3; }
.crm-estado-frio::before { background: #2471a3; }
.crm-estado-nuevo      { background: #eaeded; color: #566573; }
.crm-estado-nuevo::before { background: #566573; }
.crm-estado-ganado     { background: #d4efdf; color: #1e8449; }
.crm-estado-ganado::before { background: #1e8449; }
.crm-estado-descartado { background: #f4f6f7; color: #99a3a4; }
.crm-estado-descartado::before { background: #99a3a4; }

.crm-actividad { font-size: 12px; color: var(--text-700, #334155); }
.crm-actividad-hot  { color: #c0392b; font-weight: 600; }
.crm-actividad-time { font-size: 10px; color: var(--text-400, #94a3b8); margin-top: 2px; }

.crm-actions { display: flex; gap: 6px; justify-content: flex-end; }
.crm-btn-cat {
  background: #f39c12;
  color: #fff;
  border: none;
  width: 32px; height: 32px;
  border-radius: 7px;
  font-size: 14px;
  cursor: pointer;
  transition: transform .1s;
}
.crm-btn-cat:hover { transform: scale(1.1); }
.crm-btn-wa {
  background: #25D366;
  color: #fff;
  border: none;
  width: 32px; height: 32px;
  border-radius: 7px;
  font-size: 14px;
  cursor: pointer;
  transition: transform .1s;
}
.crm-btn-wa:hover { transform: scale(1.1); }
.crm-btn-ficha {
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  color: var(--text-700, #334155);
  width: 32px; height: 32px;
  border-radius: 7px;
  font-size: 16px;
  cursor: pointer;
}
.crm-btn-ficha:hover { background: var(--bg, #f4f7fb); }

/* Ficha del lead (modal) */
.crm-ficha-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border, #e2e8f0); }
.crm-ficha-avatar { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; }
.crm-ficha-name { font-size: 18px; font-weight: 700; color: var(--text-900, #0f172a); }
.crm-ficha-sub  { font-size: 13px; color: var(--text-500, #64748b); margin-top: 2px; }

.crm-ficha-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.crm-ficha-cell {
  background: var(--bg, #f4f7fb);
  border-radius: 8px;
  padding: 10px 12px;
}
.crm-ficha-cell-lbl { font-size: 10px; color: var(--text-500, #64748b); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.crm-ficha-cell-val { font-size: 14px; font-weight: 600; color: var(--text-900, #0f172a); margin-top: 3px; }

.crm-ficha-bts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.crm-ficha-bts button { flex: 1; min-width: 110px; padding: 10px 12px; border-radius: 8px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; }
.crm-fb-precios  { background: #f39c12; color: #fff; }
.crm-fb-pedido   { background: #8e44ad; color: #fff; }
.crm-fb-enviar-cat{ background: #f39c12; color: #fff; flex: 2 !important; font-size: 14px !important; }
.crm-fb-wa       { background: #25D366; color: #fff; }
.crm-fb-catalogo { background: #3498db; color: #fff; }
.crm-fb-editar   { background: var(--primary, #1e3a5f); color: #fff; }
.crm-fb-descartar{ background: #95a5a6; color: #fff; }
.crm-fb-ganado   { background: #27ae60; color: #fff; }

.crm-timeline {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 10px;
}
.crm-timeline-h { font-size: 12px; font-weight: 700; color: var(--text-700, #334155); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 10px; }
.crm-event {
  display: flex;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid #f1f5f9;
}
.crm-event:last-child { border-bottom: none; }
.crm-event-ico { width: 26px; height: 26px; border-radius: 50%; background: var(--bg, #f4f7fb); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.crm-event-body { flex: 1; min-width: 0; }
.crm-event-desc { font-size: 13px; color: var(--text-900, #0f172a); }
.crm-event-meta { font-size: 11px; color: var(--text-500, #64748b); margin-top: 2px; }
.crm-event-pts { font-size: 11px; font-weight: 700; }
.crm-event-pts-plus  { color: #27ae60; }
.crm-event-pts-minus { color: #c0392b; }

.crm-nota-box {
  margin-top: 14px;
  background: var(--bg, #f4f7fb);
  padding: 10px;
  border-radius: 8px;
}
.crm-nota-box textarea { width: 100%; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; padding: 8px; font-family: inherit; font-size: 13px; resize: vertical; min-height: 50px; outline: none; }
.crm-nota-box textarea:focus { border-color: var(--primary, #1e3a5f); }

/* Pedidos online list */
.crm-pedidos-list { display: flex; flex-direction: column; gap: 10px; }
.crm-pedido-card {
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  transition: all .15s;
}
.crm-pedido-card:hover { border-color: var(--primary, #1e3a5f); box-shadow: 0 2px 8px rgba(30,58,95,.1); }
.crm-pedido-card.no-leido { border-left: 4px solid var(--orange, #F5923A); background: #fff8f0; }
.crm-pedido-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.crm-pedido-num  { font-weight: 700; color: var(--primary, #1e3a5f); font-size: 13px; }
.crm-pedido-estado {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.crm-pedido-estado-pendiente  { background: #fef5e7; color: #b9770e; }
.crm-pedido-estado-confirmado { background: #d4efdf; color: #1e8449; }
.crm-pedido-estado-rechazado  { background: #fdedec; color: #c0392b; }
.crm-pedido-estado-entregado  { background: #d6eaf8; color: #2471a3; }

.crm-pedido-cliente { font-size: 14px; font-weight: 600; color: var(--text-900, #0f172a); }
.crm-pedido-items   { font-size: 12px; color: var(--text-500, #64748b); margin-top: 2px; }
.crm-pedido-time    { font-size: 11px; color: var(--text-400, #94a3b8); margin-top: 4px; }
.crm-pedido-right   { text-align: right; min-width: 100px; }
.crm-pedido-total   { font-size: 18px; font-weight: 700; color: var(--text-900, #0f172a); }
.crm-pedido-margen  { font-size: 11px; color: #27ae60; margin-top: 2px; font-weight: 600; }

/* Config CRM */
.crm-cfg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.crm-cfg-box {
  background: var(--bg, #f4f7fb);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 16px;
}
.crm-cfg-h {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary, #1e3a5f);
  margin: 0 0 12px;
}
.crm-hint { font-size: 12px; color: var(--text-500, #64748b); margin-top: 6px; }
.crm-hint code { background: #fff; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 11px; color: var(--primary, #1e3a5f); }

/* Toast de notificación en pantalla */
.crm-toast {
  position: fixed;
  top: 80px;
  right: 20px;
  max-width: 340px;
  background: #fff;
  border-left: 4px solid var(--orange, #F5923A);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  z-index: 10000;
  animation: crmSlideIn .3s ease;
  cursor: pointer;
}
.crm-toast-t { font-weight: 700; color: var(--text-900, #0f172a); font-size: 13px; margin-bottom: 3px; }
.crm-toast-m { font-size: 12px; color: var(--text-500, #64748b); }
@keyframes crmSlideIn {
  from { transform: translateX(380px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Responsive: ocultar columnas menos importantes en móvil */
@media (max-width: 700px) {
  .crm-table thead { display: none; }
  .crm-table, .crm-table tbody, .crm-table tr, .crm-table td { display: block; width: 100%; }
  .crm-table tr { border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
  .crm-table td { padding: 4px 0; border: none; }
  .crm-actions { justify-content: flex-start; margin-top: 6px; }
}


/* ═══════════════════════════════════════════════════════════════════════ */
/* MARKETING DASHBOARD */
/* ═══════════════════════════════════════════════════════════════════════ */

.mkt-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin-bottom:18px;
}
.mkt-kpi-card{
  background:#fff;border:1px solid #e2e8f0;border-radius:14px;
  padding:18px;position:relative;overflow:hidden;
  transition:transform .15s;
}
.mkt-kpi-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--kc1,#3b82f6),var(--kc2,#60a5fa));
}
.mkt-kpi-card.up::before{background:linear-gradient(90deg,#10b981,#34d399)}
.mkt-kpi-card.down::before{background:linear-gradient(90deg,#ef4444,#f87171)}
.mkt-kpi-card.gold::before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.mkt-kpi-card.purple::before{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
.mkt-kpi-card.green::before{background:linear-gradient(90deg,#10b981,#34d399)}
.mkt-kpi-card.cyan::before{background:linear-gradient(90deg,#06b6d4,#22d3ee)}

.mkt-kpi-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:#64748b;font-weight:600;margin-bottom:8px;
  display:flex;align-items:center;gap:6px;
}
.mkt-kpi-value{
  font-family:'Sora',sans-serif;font-size:32px;font-weight:800;color:#0A2540;
  line-height:1;margin-bottom:6px;
}
.mkt-kpi-sub{font-size:11px;color:#94a3b8;line-height:1.4}
.mkt-kpi-trend{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;
  margin-left:6px;
}
.mkt-kpi-trend.up{background:#d1fae5;color:#065f46}
.mkt-kpi-trend.down{background:#fee2e2;color:#991b1b}
.mkt-kpi-trend.eq{background:#f1f5f9;color:#64748b}

.mkt-kpi-loading{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:30px;grid-column:1/-1;
}
.mkt-kpi-spinner{
  width:18px;height:18px;border:2px solid #e2e8f0;border-top-color:#3b82f6;
  border-radius:50%;animation:mkt-spin .8s linear infinite;
}
@keyframes mkt-spin{to{transform:rotate(360deg)}}

.mkt-grid-2col{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;
}
@media(max-width:900px){.mkt-grid-2col{grid-template-columns:1fr}}

/* Barras de distribución */
.mkt-bar-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed #f1f5f9}
.mkt-bar-row:last-child{border-bottom:none}
.mkt-bar-icon{font-size:18px;width:32px;flex-shrink:0;text-align:center}
.mkt-bar-info{flex:1;min-width:0}
.mkt-bar-name{font-size:13px;font-weight:600;color:#0A2540;margin-bottom:4px;display:flex;justify-content:space-between;gap:8px}
.mkt-bar-name span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt-bar-name span:last-child{flex-shrink:0;color:#64748b;font-weight:700;font-size:12px}
.mkt-bar-track{background:#f1f5f9;height:6px;border-radius:3px;overflow:hidden}
.mkt-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#3b82f6,#60a5fa);transition:width .5s ease}
.mkt-bar-fill.green{background:linear-gradient(90deg,#10b981,#34d399)}
.mkt-bar-fill.orange{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.mkt-bar-fill.purple{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
.mkt-bar-fill.cyan{background:linear-gradient(90deg,#06b6d4,#22d3ee)}

/* Tools (accesos directos) */
.mkt-tools-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;
}
.mkt-tool{
  display:flex;align-items:center;gap:14px;
  background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;
  padding:14px;text-decoration:none;color:inherit;
  transition:all .2s;cursor:pointer;
}
.mkt-tool:hover{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06);text-decoration:none}
.mkt-tool-ic{
  width:48px;height:48px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.mkt-tool-info{flex:1;min-width:0}
.mkt-tool-name{font-family:'Sora',sans-serif;font-weight:700;font-size:14px;color:#0A2540;margin-bottom:2px}
.mkt-tool-desc{font-size:11px;color:#64748b;line-height:1.4}
.mkt-tool-id{font-size:10px;color:#94a3b8;margin-top:4px;font-family:monospace}
.mkt-tool-arrow{font-size:20px;color:#cbd5e1;transition:all .2s;flex-shrink:0}
.mkt-tool:hover .mkt-tool-arrow{color:#3b82f6;transform:translateX(4px)}

.mkt-tip{
  background:linear-gradient(135deg,#fef3c7,#fef9c3);
  border:1px solid #fde68a;
}

/* Estado sin datos */
.mkt-empty{
  text-align:center;padding:30px 20px;color:#94a3b8;font-size:13px;
}
.mkt-empty-ic{font-size:32px;margin-bottom:10px;opacity:.5}

/* ═══════════════════════════════════════════════════════════════════════ */
/* REFRESH VISUAL — FASE B (Mayo 2026) */
/* Sidebar moderno con grupos + tarjetas + tablas mejoradas */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Tipografía global mejorada */
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 14px !important; line-height: 1.55 !important; }
h1, h2, h3, h4, h5 { font-family: 'Sora', sans-serif !important; letter-spacing: -0.01em; }

/* ═══ SIDEBAR moderno con grupos ═══ */
.sidebar { background: linear-gradient(180deg, #0A2540 0%, #061a30 100%) !important; box-shadow: 4px 0 24px rgba(0,0,0,.12) !important; }
.sidebar-logo { padding: 22px 16px 16px !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.logo-box { background: linear-gradient(135deg, #F5923A, #e07e28) !important; box-shadow: 0 4px 14px rgba(245,146,58,.4) !important; border-radius: 12px !important; }
.logo-t1 { font-family: 'Sora', sans-serif !important; font-size: 17px !important; letter-spacing: -0.5px !important; }
.logo-t2 { color: #7a99bb !important; font-weight: 600 !important; }

.nav-group { margin-bottom: 6px; padding-bottom: 6px; }
.nav-group:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.05); }
.nav-label { 
  font-family: 'Sora', sans-serif !important;
  font-size: 10px !important; 
  font-weight: 700 !important; 
  letter-spacing: 2.5px !important; 
  color: #5a7da3 !important;
  padding: 16px 12px 8px !important; 
  text-transform: uppercase;
}
.nav-a { 
  display: flex !important; 
  align-items: center !important; 
  gap: 11px !important; 
  padding: 10px 12px !important; 
  border-radius: 10px !important; 
  color: #b0c4dc !important; 
  font-size: 13.5px !important; 
  font-weight: 500 !important; 
  transition: all .18s ease !important; 
  margin: 1px 4px !important; 
  text-decoration: none !important;
  position: relative;
}
.nav-a:hover { 
  background: rgba(255,255,255,.06) !important; 
  color: #fff !important; 
  transform: translateX(2px);
}
.nav-a.on { 
  background: linear-gradient(135deg, rgba(245,146,58,.18), rgba(245,146,58,.10)) !important; 
  color: #F5923A !important;
  border-left: none !important;
  box-shadow: 0 2px 8px rgba(245,146,58,.15);
}
.nav-a.on::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: #F5923A;
  border-radius: 3px;
}
.nav-a .ni { font-size: 17px !important; width: 22px !important; flex-shrink: 0; }
.nav-a .nt { flex: 1; }

/* ═══ TOPBAR ═══ */
.topbar { 
  background: #ffffff !important; 
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) !important;
  height: var(--topbar-h) !important;
}

/* ═══ CARDS — Mejora general ═══ */
.card { 
  background: #fff !important; 
  border: 1px solid var(--border) !important; 
  border-radius: var(--r) !important; 
  box-shadow: var(--shadow-xs) !important; 
  padding: 20px !important; 
  margin-bottom: 16px !important; 
  transition: box-shadow var(--t) !important;
}
.card:hover { box-shadow: var(--shadow-sm) !important; }
.card-title { 
  font-family: 'Sora', sans-serif !important;
  font-size: 15px !important; 
  font-weight: 700 !important; 
  color: var(--text-900) !important; 
  letter-spacing: -0.01em;
}
.card-header { 
  display: flex !important; 
  align-items: center !important; 
  justify-content: space-between !important; 
  margin-bottom: 14px !important;
  gap: 12px;
  flex-wrap: wrap;
}

/* ═══ BOTONES modernos ═══ */
.btn { 
  display: inline-flex !important; 
  align-items: center !important; 
  gap: 6px !important; 
  padding: 8px 16px !important; 
  border-radius: var(--r-sm) !important; 
  font-weight: 600 !important; 
  font-size: 13px !important; 
  font-family: inherit !important;
  cursor: pointer !important; 
  border: 1px solid transparent !important; 
  transition: all var(--t-fast) !important; 
  text-decoration: none !important;
  white-space: nowrap;
  line-height: 1.4;
}
.btn-primary { 
  background: var(--primary) !important; 
  color: #fff !important; 
  box-shadow: 0 1px 3px rgba(10,37,64,.2) !important;
}
.btn-primary:hover { 
  background: var(--primary-light) !important; 
  transform: translateY(-1px) !important; 
  box-shadow: 0 4px 12px rgba(10,37,64,.25) !important;
}
.btn-success { background: var(--green) !important; color: #fff !important; }
.btn-success:hover { background: var(--green-dark) !important; transform: translateY(-1px) !important; }
.btn-danger { background: var(--red) !important; color: #fff !important; }
.btn-danger:hover { background: var(--red-dark) !important; transform: translateY(-1px) !important; }
.btn-warning { background: var(--yellow) !important; color: #fff !important; }
.btn-secondary { background: var(--bg) !important; color: var(--text-900) !important; border: 1px solid var(--border) !important; }
.btn-secondary:hover { background: #eef2f7 !important; border-color: var(--border-mid) !important; }
.btn-sm { padding: 6px 12px !important; font-size: 12px !important; }
.btn-lg { padding: 11px 22px !important; font-size: 14px !important; }

/* ═══ FORMULARIOS modernos ═══ */
.form-control, .form-select { 
  width: 100%; 
  padding: 9px 12px !important; 
  border: 1.5px solid var(--border) !important; 
  border-radius: var(--r-sm) !important; 
  font-size: 13.5px !important; 
  font-family: inherit !important;
  background: #fff !important; 
  transition: all var(--t-fast) !important;
  color: var(--text-900);
}
.form-control:focus, .form-select:focus { 
  outline: none !important; 
  border-color: var(--primary) !important; 
  box-shadow: 0 0 0 3px rgba(10,37,64,.08) !important;
}
.form-label { 
  font-size: 12px !important; 
  font-weight: 600 !important; 
  color: var(--text-700) !important; 
  margin-bottom: 5px !important; 
  display: block !important; 
  letter-spacing: 0.2px;
}

/* ═══ TABLAS modernas ═══ */
table { 
  width: 100%; 
  border-collapse: collapse;
  border-spacing: 0;
}
table thead th { 
  background: var(--bg) !important; 
  color: var(--text-700) !important; 
  font-size: 11.5px !important; 
  font-weight: 700 !important; 
  text-transform: uppercase !important; 
  letter-spacing: 0.7px !important;
  padding: 12px 14px !important; 
  text-align: left !important; 
  border-bottom: 2px solid var(--border) !important;
}
table tbody td { 
  padding: 12px 14px !important; 
  border-bottom: 1px solid var(--border) !important; 
  font-size: 13.5px !important;
  color: var(--text-900);
}
table tbody tr { transition: background var(--t-fast); }
table tbody tr:hover { background: #fafbfc !important; }
table tbody tr:last-child td { border-bottom: none !important; }

/* ═══ MODALES — solo overlay (NO el modal en sí) ═══ */
.modal-overlay { 
  background: rgba(10, 37, 64, 0.6) !important; 
  backdrop-filter: blur(4px) !important;
}
/* El modal interno SIEMPRE fondo blanco para que el texto sea legible */
.modal,
.modal-content { 
  background: #fff !important;
  color: var(--text-900) !important;
}
.modal {
  border-radius: var(--r-lg) !important; 
  box-shadow: var(--shadow-lg) !important; 
  overflow: hidden;
}
.modal-content {
  border-radius: var(--r-lg) !important; 
  box-shadow: var(--shadow-lg) !important; 
  border: none !important; 
  overflow: hidden;
}
.modal-header { 
  padding: 18px 22px !important; 
  border-bottom: 1px solid var(--border) !important;
  background: #fff !important;
  color: var(--text-900) !important;
}
.modal-title { 
  font-family: 'Sora', sans-serif !important;
  font-size: 17px !important; 
  font-weight: 700 !important; 
  color: var(--text-900) !important;
}
.modal-body { 
  padding: 20px 22px !important; 
  background: #fff !important;
  color: var(--text-900) !important;
}
.modal-footer { 
  padding: 14px 22px !important; 
  border-top: 1px solid var(--border) !important; 
  background: var(--bg) !important;
  gap: 8px;
  display: flex;
  justify-content: flex-end;
}
/* Asegurar que TODO dentro del modal tenga texto legible */
.modal *,
.modal-content *,
.modal-overlay .modal * {
  color: inherit;
}
.modal .form-label,
.modal-content .form-label,
.modal label {
  color: var(--text-700) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6,
.modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4 {
  color: var(--text-900) !important;
}
.modal p, .modal span, .modal div, .modal td, .modal th {
  color: inherit;
}

/* ═══ DASHBOARD CARDS — modernización ═══ */
.dash-section-tit {
  font-family: 'Sora', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-700) !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 22px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-ventas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.dash-vcard {
  background: #fff;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 18px 20px !important;
  transition: all var(--t) !important;
  position: relative;
  overflow: hidden;
}
.dash-vcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  opacity: 0.7;
}
.dash-vcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.dash-vcard-tit {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-500) !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px;
}
.dash-vcard-val {
  font-family: 'Sora', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--text-900) !important;
  line-height: 1.1 !important;
  margin-bottom: 4px;
}
.dash-vcard-val--big { font-size: 32px !important; color: var(--primary) !important; }
.dash-vcard-sub { font-size: 12px; color: var(--text-500); }
.dash-vcard-gan { font-size: 12px; color: var(--green-dark); margin-top: 6px; font-weight: 600; }
.dash-vcard-gan--big { font-size: 13px; color: var(--green-dark); }

/* Pago items */
.dash-pago-item {
  flex: 1; min-width: 140px;
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  text-align: center;
  border: 1px solid var(--border);
}
.dash-pago-val { font-size: 18px; font-weight: 800; font-family: 'Sora', sans-serif; }
.dash-pago-lbl { font-size: 11px; color: var(--text-500); margin-top: 4px; font-weight: 600; }

/* ═══ SCROLLBAR moderno ═══ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { 
  background: #cbd5e1; 
  border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ═══ Sidebar foot user pill ═══ */
.user-pill {
  background: rgba(255,255,255,.06);
  border-radius: var(--r);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 12px;
}

/* ═══ Mobile responsive mejoras ═══ */
@media (max-width: 768px) {
  .card { padding: 14px !important; }
  .dash-vcard { padding: 14px 16px !important; }
  .dash-vcard-val { font-size: 22px !important; }
  .dash-vcard-val--big { font-size: 26px !important; }
  table thead th, table tbody td { padding: 10px 8px !important; font-size: 12px !important; }
  .btn { padding: 8px 14px !important; font-size: 12px !important; }
  body { font-size: 13.5px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* MÓDULO INTELIGENCIA — Estilos para tabs y KPIs */
/* ═══════════════════════════════════════════════════════════════════════ */

.int-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-700);
  padding: 9px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.int-tab:hover {
  background: var(--bg);
  color: var(--text-900);
}
.int-tab.on {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(10,37,64,.2);
}

.int-pane {
  animation: fadeInUp .3s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.int-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

/* KPIs reutilizando estilos de marketing */
.mkt-kpi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: all var(--t);
}
.mkt-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.mkt-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--primary);
}
.mkt-kpi-card.green::before { background: #10B981; }
.mkt-kpi-card.gold::before { background: #F59E0B; }
.mkt-kpi-card.down::before { background: #EF4444; }
.mkt-kpi-card.purple::before { background: #8B5CF6; }
.mkt-kpi-card.cyan::before { background: #06B6D4; }
.mkt-kpi-card.mkt-kpi-loading {
  display: flex; align-items: center; gap: 12px; justify-content: center;
}
.mkt-kpi-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.mkt-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-500);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.mkt-kpi-value {
  font-family: 'Sora', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-900);
  line-height: 1.1;
}
.mkt-kpi-sub {
  font-size: 12px;
  color: var(--text-500);
  margin-top: 4px;
}

.mkt-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-500);
  font-size: 14px;
}
.mkt-empty-ic {
  font-size: 36px;
  margin-bottom: 10px;
  opacity: 0.7;
}

/* Mobile */
@media (max-width: 768px) {
  .int-tab { padding: 7px 12px; font-size: 12px; }
  .int-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mkt-kpi-card { padding: 14px; }
  .mkt-kpi-value { font-size: 20px; }
}
@media (max-width: 480px) {
  .int-kpis { grid-template-columns: 1fr; }
}