@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

body { font-family: "Nunito", sans-serif !important; background: #f0f2f8 !important; }

/* ── SIDEBAR ── */
.app-sidebar {
  width: 255px; min-width: 255px;
  background: linear-gradient(180deg,#1c2444,#252d4d);
  position: fixed; top:0; left:0; height:100vh;
  display:flex; flex-direction:column; z-index:1040; overflow-y:auto;
}
.app-main { margin-left: 255px; min-height: 100vh; background: #f0f2f8; }

.sb-logo { padding:20px; border-bottom:1px solid rgba(255,255,255,.07); }
.sb-logo-icon { width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#667eea,#764ba2);display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem;box-shadow:0 4px 14px rgba(102,126,234,.4); }
.sb-logo-text { font-size:.95rem;font-weight:800;color:#fff;line-height:1.1; }
.sb-logo-sub  { font-size:.68rem;color:rgba(255,255,255,.4); }

.sb-user-area { padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.07); }
.sb-av { width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#f093fb,#f5576c);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:.95rem;box-shadow:0 2px 10px rgba(0,0,0,.3);flex-shrink:0; }
.sb-uname { font-size:.88rem;font-weight:700;color:#fff; }
.sb-urole  { font-size:.7rem;color:rgba(255,255,255,.4); }

.sb-section { padding:16px 20px 4px;font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.25); }

.sb-nav { list-style:none;padding:4px 12px;margin:0;flex:1; }
.sb-nav li { margin-bottom:2px; }
.sb-nav a { display:flex;align-items:center;gap:11px;padding:10px 14px;color:rgba(255,255,255,.6);text-decoration:none;border-radius:10px;font-size:.875rem;font-weight:600;transition:all .18s; }
.sb-nav a:hover { background:rgba(255,255,255,.08);color:#fff; }
.sb-nav a.active { background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 14px rgba(102,126,234,.4); }
.sb-nav .sn-badge { margin-left:auto;background:#f59e0b;color:#fff;font-size:.65rem;font-weight:800;padding:2px 7px;border-radius:20px; }

.sb-foot { padding:12px;border-top:1px solid rgba(255,255,255,.07); }
.sb-foot a { display:flex;align-items:center;gap:10px;padding:9px 14px;color:rgba(255,255,255,.5);text-decoration:none;border-radius:10px;font-size:.85rem;font-weight:600;transition:all .18s; }
.sb-foot a:hover { background:rgba(255,255,255,.08);color:#fff; }

/* ── TOPBAR ── */
.app-topbar { background:#fff;border-bottom:1px solid #e8ecf4;height:62px;display:flex;align-items:center;padding:0 28px;gap:14px;position:sticky;top:0;z-index:100;box-shadow:0 1px 6px rgba(0,0,0,.06); }
.topbar-title { font-size:1.1rem;font-weight:800;color:#1c2444;flex:1; }
.topbar-alert-badge { display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;padding:6px 15px;border-radius:20px;font-size:.76rem;font-weight:800;text-decoration:none;animation:glow 2s infinite;box-shadow:0 2px 10px rgba(239,68,68,.35); }
@keyframes glow { 0%,100%{box-shadow:0 2px 10px rgba(239,68,68,.35)} 50%{box-shadow:0 4px 20px rgba(239,68,68,.6)} }
.topbar-chip { display:flex;align-items:center;gap:8px;background:#f4f6fb;border-radius:20px;padding:6px 14px 6px 8px;font-size:.82rem;font-weight:700;color:#555; }
.chip-av { width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;color:#fff; }

.app-body { padding:26px; }

/* ── STAT CARDS ── */
.stat-card { background:#fff;border-radius:16px;padding:22px;display:flex;align-items:center;gap:16px;box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.04);transition:transform .2s,box-shadow .2s; }
.stat-card:hover { transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1); }
.si { width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0; }
.si-blue   { background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 14px rgba(102,126,234,.4); }
.si-green  { background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff;box-shadow:0 4px 14px rgba(17,153,142,.4); }
.si-teal   { background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;box-shadow:0 4px 14px rgba(79,172,254,.4); }
.si-orange { background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;box-shadow:0 4px 14px rgba(245,158,11,.4); }
.si-red    { background:linear-gradient(135deg,#f5576c,#c0392b);color:#fff;box-shadow:0 4px 14px rgba(245,87,108,.4); }
.si-gray   { background:linear-gradient(135deg,#a8b2c8,#6b7a99);color:#fff; }
.stat-val  { font-size:2rem;font-weight:800;color:#1c2444;line-height:1; }
.stat-lbl  { font-size:.72rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;margin-top:4px; }

/* ── CARDS ── */
.crm-card { background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.04);overflow:hidden;margin-bottom:20px; }
.crm-head { padding:15px 20px;border-bottom:1px solid #f0f3f8;font-size:.9rem;font-weight:800;color:#1c2444;display:flex;align-items:center;gap:8px; }
.crm-body { padding:20px; }

/* ── TABLES ── */
.crm-table { width:100%;border-collapse:collapse; }
.crm-table thead th { background:#f8faff;color:#94a3b8;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:11px 16px;border-bottom:2px solid #edf0f7;white-space:nowrap; }
.crm-table tbody td { padding:12px 16px;border-bottom:1px solid #f0f3f8;vertical-align:middle;font-size:.87rem;color:#444; }
.crm-table tbody tr:last-child td { border-bottom:none; }
.crm-table tbody tr:hover td { background:#f8faff; }

/* ── FUNNEL ── */
.funnel-item { flex:1;border-radius:12px;padding:16px 8px;text-align:center; }
.funnel-item .fv { font-size:1.6rem;font-weight:800; }
.funnel-item .fl { font-size:.65rem;font-weight:700;text-transform:uppercase;margin-top:4px;opacity:.8; }
.fi-gray   { background:#f3f4f6;color:#6b7280; }
.fi-blue   { background:#eff6ff;color:#2563eb; }
.fi-orange { background:#fff7ed;color:#c2410c; }
.fi-green  { background:#f0fdf4;color:#15803d; }
.fi-red    { background:#fef2f2;color:#b91c1c; }

/* ── ESTADO BADGES ── */
.eb { display:inline-block;padding:4px 11px;border-radius:20px;font-size:.72rem;font-weight:800;white-space:nowrap; }
.eb-recien_cargado { background:#f3f4f6;color:#6b7280; }
.eb-contactado     { background:#dbeafe;color:#1d4ed8; }
.eb-re_contactar   { background:#ffedd5;color:#c2410c; }
.eb-cerrado        { background:#dcfce7;color:#15803d; }
.eb-descartado     { background:#fee2e2;color:#b91c1c; }

/* ── ESTADO RADIO BUTTONS ── */
.estado-opt { cursor:pointer; }
.estado-opt input[type=radio] { display:none; }
.estado-opt span { display:inline-block;padding:7px 16px;border-radius:20px;font-size:.8rem;font-weight:700;border:2px solid #e2e8f0;color:#94a3b8;background:#f8faff;cursor:pointer;transition:all .18s; }
.estado-opt.eo-recien_cargado input:checked+span { background:linear-gradient(135deg,#94a3b8,#64748b);border-color:transparent;color:#fff; }
.estado-opt.eo-contactado     input:checked+span { background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(102,126,234,.4); }
.estado-opt.eo-re_contactar   input:checked+span { background:linear-gradient(135deg,#f59e0b,#f97316);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(245,158,11,.4); }
.estado-opt.eo-cerrado        input:checked+span { background:linear-gradient(135deg,#11998e,#38ef7d);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(17,153,142,.4); }
.estado-opt.eo-descartado     input:checked+span { background:linear-gradient(135deg,#f5576c,#c0392b);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(245,87,108,.4); }

/* ── RC BADGES ── */
.rc-today  { background:#ffedd5;color:#c2410c;padding:3px 9px;border-radius:6px;font-size:.73rem;font-weight:800; }
.rc-late   { background:#fee2e2;color:#b91c1c;padding:3px 9px;border-radius:6px;font-size:.73rem;font-weight:800; }
.rc-future { background:#dbeafe;color:#1d4ed8;padding:3px 9px;border-radius:6px;font-size:.73rem;font-weight:800; }

/* ── TIMELINE ── */
.tl-item { display:flex;gap:14px;padding-bottom:16px; }
.tl-dot { width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);margin-top:5px;flex-shrink:0;box-shadow:0 2px 6px rgba(102,126,234,.4); }
.tl-title { font-size:.85rem;font-weight:700;color:#1c2444; }
.tl-note  { font-size:.8rem;color:#64748b;margin-top:2px; }
.tl-meta  { font-size:.72rem;color:#94a3b8;margin-top:4px; }

/* ── NOTES ── */
.note-item { background:#f8faff;border-radius:10px;padding:12px 14px;margin-bottom:8px;border-left:3px solid #667eea; }
.note-item p { margin:0 0 5px;font-size:.85rem;color:#333; }
.note-item small { font-size:.72rem;color:#94a3b8; }

/* ── LOGIN ── */
.login-bg { min-height:100vh;background:linear-gradient(135deg,#1c2444 0%,#252d4d 50%,#667eea 100%);display:flex;align-items:center;justify-content:center;padding:20px; }
.login-card-wrap { width:100%;max-width:420px; }
.login-card { background:#fff;border-radius:20px;padding:36px;box-shadow:0 20px 60px rgba(0,0,0,.3); }

/* ── FORM OVERRIDES ── */
.form-control:focus { border-color:#667eea !important;box-shadow:0 0 0 3px rgba(102,126,234,.15) !important; }
.form-select:focus  { border-color:#667eea !important;box-shadow:0 0 0 3px rgba(102,126,234,.15) !important; }

/* ── BTN OVERRIDES ── */
.btn-primary { background:linear-gradient(135deg,#667eea,#764ba2) !important;border:none !important; }
.btn-primary:hover { opacity:.9 !important;transform:translateY(-1px); }
.btn-success { background:linear-gradient(135deg,#11998e,#38ef7d) !important;border:none !important; }
.btn-info    { background:linear-gradient(135deg,#4facfe,#00f2fe) !important;border:none !important;color:#fff !important; }

/* ── MODAL ── */
.modal-content { border:none !important;border-radius:18px !important;box-shadow:0 20px 60px rgba(0,0,0,.18) !important; }

/* ── MISC ── */
.fw-800 { font-weight:800; }
code { background:#eff6ff;color:#667eea;padding:2px 7px;border-radius:5px;font-size:.82rem; }

/* ═══════════════════════════════════════════
   AÑADIDOS v4 — Mobile + Dashboard extras
   (No modifica nada existente)
═══════════════════════════════════════════ */

/* ── MOBILE SIDEBAR TOGGLE ── */
.app-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5); z-index:1039;
}
.app-overlay.open { display:block; }
.topbar-hamburger {
  display:none; background:none; border:none;
  font-size:1.4rem; color:#555; cursor:pointer;
  padding:4px 8px; line-height:1;
}

/* ── FAB MOBILE ── */
.fab {
  display:none; position:fixed; bottom:22px; right:22px;
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,#667eea,#764ba2);
  color:#fff !important; border:none; font-size:1.5rem;
  box-shadow:0 6px 20px rgba(102,126,234,.5);
  z-index:998; cursor:pointer;
  align-items:center; justify-content:center;
  text-decoration:none; transition:transform .2s;
}
.fab:hover { transform:scale(1.1); }

/* ── RANKING RECLUTADORES ── */
.rank-item { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid #f0f3f8; }
.rank-item:last-child { border-bottom:none; }
.rank-num { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.73rem; font-weight:800; flex-shrink:0; }
.rn-1 { background:linear-gradient(135deg,#ffd700,#ffa500); color:#fff; box-shadow:0 2px 8px rgba(255,165,0,.4); }
.rn-2 { background:linear-gradient(135deg,#c0c0c0,#a0a0a0); color:#fff; }
.rn-3 { background:linear-gradient(135deg,#cd7f32,#a0522d); color:#fff; }
.rn-n { background:#f0f3f8; color:#94a3b8; }
.rank-bar-wrap { flex:1; height:6px; background:#f0f3f8; border-radius:3px; overflow:hidden; }
.rank-bar { height:100%; background:linear-gradient(90deg,#667eea,#764ba2); border-radius:3px; }

/* ── CHIPS FILTRO RÁPIDO ── */
.estado-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.estado-chip { padding:5px 12px; border-radius:20px; font-size:.74rem; font-weight:700; cursor:pointer; text-decoration:none; border:2px solid transparent; transition:all .18s; }
.ec-all            { background:#f4f6fb; color:#555; border-color:#e2e8f0; }
.ec-recien_cargado { background:#f3f4f6; color:#6b7280; border-color:#d1d5db; }
.ec-contactado     { background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe; }
.ec-re_contactar   { background:#ffedd5; color:#c2410c; border-color:#fed7aa; }
.ec-cerrado        { background:#dcfce7; color:#15803d; border-color:#bbf7d0; }
.ec-descartado     { background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
.estado-chip.active { box-shadow:0 2px 8px rgba(0,0,0,.15); transform:scale(1.04); }

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 768px) {
  .app-sidebar { transform:translateX(-100%); transition:transform .3s ease; }
  .app-sidebar.open { transform:translateX(0); }
  .app-main { margin-left:0 !important; }
  .topbar-hamburger { display:flex !important; align-items:center; }
  .topbar-chip span { display:none; }
  .app-body { padding:14px; }
  .stat-val { font-size:1.5rem; }
  .fab { display:flex !important; }
  .hide-mobile { display:none !important; }
  .crm-table tbody tr { display:block; border-bottom:2px solid #f0f3f8; }
  .crm-table tbody td { display:flex; justify-content:space-between; align-items:center; padding:7px 14px; border-bottom:1px solid #f8f8f8; font-size:.83rem; }
  .crm-table tbody td::before { content:attr(data-label); font-size:.68rem; font-weight:800; color:#94a3b8; text-transform:uppercase; margin-right:8px; white-space:nowrap; flex-shrink:0; }
  .crm-table tbody td:first-child { padding-top:12px; }
  .crm-table tbody td:last-child  { padding-bottom:12px; border-bottom:none; justify-content:flex-end; }
  .crm-table thead { display:none; }
}