*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f7f8fb;
  --panel:#ffffff;
  --dark:#0b1424;
  --dark2:#111827;
  --blue:#2f6df6;
  --blue2:#3768e8;
  --green:#22c55e;
  --muted:#6b7280;
  --text:#0f172a;
  --border:#e8edf5;
  --shadow:0 10px 25px rgba(15,23,42,.06);
}
body{font-family:'Inter',Arial,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
.hidden{display:none!important}.muted{color:var(--muted)}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0b1424,#172554);padding:20px}
.login-card{background:white;border-radius:24px;padding:28px;width:100%;max-width:430px;box-shadow:0 25px 60px rgba(0,0,0,.25)}
.brand-login,.brand{display:flex;align-items:center;gap:12px}
.logo{width:46px;height:46px;border-radius:18px;background:#25D366;color:white;font-weight:900;display:flex;align-items:center;justify-content:center}
.brand-login h1{font-size:24px}.brand-login p{color:#64748b}
label{font-weight:700;color:#334155;font-size:13px}input,select,textarea{width:100%;padding:13px 14px;border:1px solid var(--border);border-radius:12px;font-size:14px;background:white;outline:none}textarea{min-height:90px}
.btn{border:0;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer;background:linear-gradient(135deg,#2f6df6,#4665ee);color:white;font-size:14px;box-shadow:0 8px 18px rgba(47,109,246,.2)}
.btn.secondary{background:white;color:#334155;border:1px solid var(--border);box-shadow:none}.btn.small{padding:10px 15px}.login-card .btn{width:100%;margin-top:18px}.error{color:#dc2626;margin-top:12px;font-weight:700}.notice{margin-top:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:14px;color:#475569;font-size:14px}

.app{display:grid;grid-template-columns:250px minmax(720px,1fr) 360px;height:100vh;min-height:100vh;background:#f7f8fb}
.sidebar{background:linear-gradient(180deg,#111827 0%,#0b1424 100%);color:white;padding:20px 14px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid rgba(255,255,255,.08)}
.brand{margin-bottom:28px;padding:0 2px}.brand h1{font-size:19px;line-height:1.05;font-weight:800;color:#fff}.brand p{font-size:13px;color:#cbd5e1;margin-top:4px}
.nav{display:flex;flex-direction:column;gap:8px}.nav button{position:relative;display:flex;align-items:center;gap:13px;width:100%;background:transparent;border:0;text-align:left;color:#e5edf7;padding:14px 15px;border-radius:9px;font-weight:700;font-size:14px;cursor:pointer;transition:.2s}.nav button span{width:20px;text-align:center;opacity:.95}.nav button.active{background:linear-gradient(135deg,#3478ff,#2e63f0);box-shadow:0 12px 22px rgba(47,109,246,.32)}.nav button:hover{background:rgba(255,255,255,.08)}.nav em{font-style:normal;margin-left:auto;background:#ef4444;color:white;width:24px;height:24px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:11px}.nav em.purple{background:#8b5cf6}
.user-box{border-top:1px solid rgba(255,255,255,.08);padding-top:16px}.user-profile{display:flex;align-items:center;gap:12px}.user-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#64748b,#111827);display:flex;align-items:center;justify-content:center;color:white;font-weight:800}.user-info strong{display:block;color:white;font-size:13px}.user-info small{display:block;color:#cbd5e1;font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis}.user-info span{display:block;color:#22c55e;font-size:11px}.avatar-upload,.logout-btn{display:none!important}

.main{min-width:0;height:100vh;overflow:auto;padding:20px 22px;background:#f8fafc}
.topbar{height:48px;display:flex;align-items:center;gap:15px;margin-bottom:22px}.search-wrap{width:420px;height:45px;background:white;border:1px solid var(--border);border-radius:8px;box-shadow:0 3px 12px rgba(15,23,42,.04);display:flex;align-items:center;padding:0 12px;gap:10px}.search-wrap span{color:#64748b}.search{border:0;background:transparent;padding:0;font-size:14px;box-shadow:none}.search-wrap kbd{font:12px Inter;color:#8a94a6;margin-left:auto}.top-actions{display:flex;gap:8px}.top-actions .btn{display:none}.top-icons{margin-left:auto;display:flex;align-items:center;gap:18px;color:#111827;font-size:22px}.bell{position:relative}.bell b{position:absolute;right:-8px;top:-9px;background:#ef4444;color:white;font-size:10px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}.mini-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#1f2937,#94a3b8);color:white;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}

.stats{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:10px;margin-bottom:22px}.stat{height:106px;background:white;border:1px solid var(--border);border-radius:8px;padding:18px 18px 14px 66px;box-shadow:var(--shadow);position:relative;overflow:hidden}.stat:before{content:'▣';position:absolute;left:18px;top:23px;width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#3478ff,#6155f5);color:white;display:flex;align-items:center;justify-content:center;font-size:16px}.stat:nth-child(2):before{background:#22c55e}.stat:nth-child(3):before{background:#f59e0b}.stat:nth-child(4):before{background:#7c3aed}.stat:nth-child(5):before{content:'▌';background:white;color:#22c55e;font-size:28px}.stat h3{font-size:12px;font-weight:700;color:#111827;margin-bottom:7px}.stat strong{font-size:24px;font-weight:800;display:block;line-height:1}.stat p{font-size:12px;color:#64748b;margin-top:10px}.stat p:before{content:'↑ ';color:#22c55e;font-weight:800}

.section{display:flex;align-items:center;gap:12px;margin-bottom:14px}.section h2{font-size:20px;font-weight:800}.spacer{flex:1}.pipeline-head .btn.secondary{display:block}.pipeline{display:grid;grid-template-columns:repeat(6,235px);gap:8px;overflow-x:auto;padding-bottom:12px}.column{background:#fff;border:1px solid var(--border);border-radius:8px;min-height:448px;padding:12px 10px;box-shadow:0 5px 15px rgba(15,23,42,.03);position:relative}.column:before{content:'';position:absolute;left:0;top:0;right:0;height:3px;background:#2f6df6;border-radius:8px 8px 0 0}.column:nth-child(2):before{background:#f59e0b}.column:nth-child(3):before{background:#8b5cf6}.column:nth-child(4):before{background:#2f6df6}.column:nth-child(5):before{background:#22c55e}.column:nth-child(6):before{background:#ef4444}.col-title{display:flex;align-items:center;justify-content:space-between;color:#1d4ed8;font-weight:800;font-size:14px;margin:7px 0 13px;padding:0 4px}.count{font-size:12px;color:#1d4ed8;background:transparent}

.lead{background:white;border:1px solid #e6edf6;border-radius:8px;padding:12px;margin-bottom:9px;box-shadow:0 5px 12px rgba(15,23,42,.06);cursor:pointer;transition:.18s}.lead:hover{border-color:#c7d2fe;transform:translateY(-2px)}.lead-head{display:flex;align-items:center;gap:10px}.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#ec4899);display:flex;align-items:center;justify-content:center;color:white;font-size:12px;font-weight:800;flex-shrink:0}.avatar.big{width:48px;height:48px;font-size:15px}.lead-main{min-width:0}.lead strong{display:block;font-size:13px;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lead span{font-size:12px;color:#64748b}.wa-mini{margin-left:auto;color:#16a34a;text-decoration:none;border:2px solid #22c55e;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px}.lead p{font-size:12px;line-height:1.45;color:#334155;margin:10px 0;min-height:34px}.lead-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.tag{display:inline-block;background:#dbeafe;color:#3b5f87;border-radius:7px;padding:5px 8px;font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px}.lead-foot small{font-size:10px;color:#64748b}.assigned{display:none}

.bottom-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:12px}.activity-card,.chart-card{background:white;border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);padding:18px}.activity-card h3,.chart-card h3{font-size:14px;margin-bottom:15px}.activity-row{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #eef2f7}.activity-row:last-child{border-bottom:0}.activity-row span:first-child{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#ecfdf5;color:#16a34a}.activity-row .quote-dot{background:#f5f3ff;color:#7c3aed}.activity-row .task-dot{background:#fffbeb;color:#f59e0b}.activity-row b{font-size:13px}.activity-row p{font-size:12px;color:#64748b;margin-top:3px}.activity-row small{font-size:11px;color:#64748b}.chart-wrap{display:flex;align-items:center;gap:24px}.donut{width:148px;height:148px;border-radius:50%;background:conic-gradient(#2f6df6 0 45%,#22c55e 45% 75%,#f59e0b 75% 90%,#ec4899 90% 100%);display:flex;align-items:center;justify-content:center}.donut:before{content:'';position:absolute}.donut span{width:82px;height:82px;background:white;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}.donut b{font-size:22px}.donut small{font-size:11px;color:#64748b}.legend{flex:1}.legend p{display:flex;align-items:center;gap:8px;font-size:12px;margin:10px 0}.legend i{width:10px;height:10px;border-radius:50%;background:#2f6df6}.legend p:nth-child(2) i{background:#22c55e}.legend p:nth-child(3) i{background:#f59e0b}.legend p:nth-child(4) i{background:#ec4899}.legend b{margin-left:auto;color:#64748b}

.right{height:100vh;overflow:auto;background:white;border-left:1px solid var(--border);box-shadow:-4px 0 18px rgba(15,23,42,.04);padding:22px}.right>h3{font-size:19px;margin-bottom:18px}.empty-detail{color:#64748b;margin-top:15px}.detail-top{display:flex;justify-content:flex-end}.close-detail{border:0;background:#ff343f;color:white;width:34px;height:34px;border-radius:9px;font-size:24px;line-height:1;cursor:pointer}.detail-head{display:flex;align-items:center;gap:12px;margin:14px 0 20px}.detail-name{min-width:0}.detail-name b{display:block;font-size:18px}.detail-name small{color:#64748b}.status{margin-left:auto;background:#d1fae5;color:#059669;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;white-space:nowrap}.detail-wa{width:30px;height:30px;border-radius:8px;background:#22c55e;color:white;display:flex;align-items:center;justify-content:center;text-decoration:none}.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-bottom:1px solid var(--border);margin:0 -22px 14px;padding:0 18px}.tabs button{background:white;border:0;padding:12px 3px;color:#64748b;font-size:11px;cursor:pointer;border-bottom:2px solid transparent}.tabs .active{color:#2f6df6;border-bottom-color:#2f6df6;font-weight:700}.info-row{display:grid;grid-template-columns:105px 1fr;gap:10px;align-items:center;border-bottom:1px solid #eef2f7;padding:10px 0;font-size:12px}.info-row b{color:#526070}.info-row span{color:#334155}.form-row select{padding:10px;border-radius:10px}.quick{margin-top:12px;display:grid;gap:10px}.q2,.q3{border:0;border-radius:8px;padding:13px;color:white;font-weight:800;cursor:pointer}.q2{background:#6d5dfc}.q3{background:#fee2e2;color:#b91c1c}

.chat-panel{margin-top:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff}.chat-title{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid var(--border)}.chat-title b{font-size:15px}.chat-title span{font-size:11px;background:#dcfce7;color:#16a34a;padding:5px 8px;border-radius:99px;font-weight:800}.messages{height:235px;background:#fbfdff;padding:14px;display:flex;flex-direction:column;gap:12px}.bubble{max-width:85%;padding:12px;border-radius:8px;font-size:12px;line-height:1.35;box-shadow:0 4px 10px rgba(15,23,42,.04)}.bubble small{display:block;text-align:right;color:#64748b;margin-top:7px;font-size:10px}.bubble.out{margin-left:auto;background:#dcfce7}.bubble.in{background:white;border:1px solid #eef2f7}.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}.chat-input input{height:40px}.chat-input button{width:42px;border:0;border-radius:8px;background:#22c55e;color:white;font-weight:900}.open-wa{display:block;margin:0 12px 12px;text-align:center;text-decoration:none;background:#2f6df6;color:white;border-radius:7px;padding:12px;font-weight:800;font-size:13px}

.table-card,.settings-card{background:white;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:16px}.leads-table{width:100%;border-collapse:collapse;font-size:13px}.leads-table th,.leads-table td{border-bottom:1px solid #eef2f7;padding:12px;text-align:left}.employee-row{display:grid;grid-template-columns:1fr 1fr 100px;gap:12px;padding:12px;border-bottom:1px solid #f1f5f9}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.65);display:none;align-items:center;justify-content:center;padding:20px;z-index:999}.modal.show{display:flex}.modal-card{background:white;border-radius:18px;padding:22px;width:100%;max-width:560px;box-shadow:0 20px 50px rgba(0,0,0,.2);max-height:90vh;overflow:auto}.form{display:grid;gap:12px}.actions{display:flex;gap:10px;justify-content:flex-end}

::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}::-webkit-scrollbar-track{background:transparent}

@media(max-width:1200px){body{overflow:auto}.app{grid-template-columns:230px 1fr}.right{display:none}.stats{grid-template-columns:repeat(2,1fr)}.bottom-grid{grid-template-columns:1fr}.top-icons{display:none}}
@media(max-width:760px){.app{display:block}.sidebar{position:relative}.main{height:auto}.pipeline{grid-template-columns:repeat(6,235px)}.topbar{height:auto;flex-direction:column;align-items:stretch}.search-wrap{width:100%}.stats{grid-template-columns:1fr}}


/* ===== PERFIL + CERRAR SESIÓN SIN ROMPER DISEÑO ===== */
.sidebar{
  display:flex !important;
  flex-direction:column !important;
}

.sidebar > div:first-child{
  flex:1 !important;
  min-height:0 !important;
}

.nav{
  overflow-y:auto !important;
  padding-bottom:10px !important;
}

/* El perfil vive SOLO en el sidebar */
#userBox.sidebar-user{
  display:block !important;
  margin:12px 14px 14px !important;
  padding:12px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  flex-shrink:0 !important;
}

#userBox.sidebar-user .user-profile{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-bottom:10px !important;
}

#userBox.sidebar-user .user-avatar{
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#334155,#64748b) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:800 !important;
  font-size:13px !important;
  flex-shrink:0 !important;
}

#userBox.sidebar-user .user-info strong{
  display:block !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:1.2 !important;
}

#userBox.sidebar-user .user-info small{
  display:block !important;
  color:#cbd5e1 !important;
  font-size:12px !important;
  line-height:1.2 !important;
  margin-top:2px !important;
}

#userBox.sidebar-user .user-info span{
  display:block !important;
  color:#22c55e !important;
  font-size:11px !important;
  margin-top:3px !important;
}

#logoutBtn.logout-btn{
  width:100% !important;
  border:0 !important;
  border-radius:10px !important;
  padding:10px 12px !important;
  background:#ef4444 !important;
  color:#fff !important;
  font-weight:800 !important;
  font-size:13px !important;
  cursor:pointer !important;
}

#logoutBtn.logout-btn:hover{
  background:#dc2626 !important;
}

/* Nunca mostrar este perfil dentro del panel derecho */
.right #userBox,
.right .sidebar-user{
  display:none !important;
}

/* Volver a poner el link de WhatsApp como botón si quedó estilo enlace */
.right a[href*="wa.me"],
.right a[href*="whatsapp"]{
  display:block !important;
  text-align:center !important;
  text-decoration:none !important;
  background:#08c766 !important;
  color:#fff !important;
  border-radius:10px !important;
  padding:13px 16px !important;
  font-weight:800 !important;
  margin:12px 0 10px !important;
}

/* Mejorar botón eliminar si quedó plano */
.right button.delete,
.right .delete-btn,
.right button[id*="delete"],
.right button[class*="delete"]{
  background:#fee2e2 !important;
  color:#b91c1c !important;
  border:0 !important;
  border-radius:10px !important;
  padding:13px 16px !important;
  font-weight:800 !important;
}



/* ===== SESIÓN FIJA ABAJO DEL SIDEBAR - TODO EN UNO ===== */
.sidebar{
  position:relative !important;
  padding-bottom:138px !important;
  overflow:hidden !important;
}

.nav{
  max-height:calc(100vh - 170px) !important;
  overflow-y:auto !important;
  padding-bottom:10px !important;
}

#sidebarSessionBox{
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  bottom:14px !important;
  display:block !important;
  padding:12px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.065) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  z-index:50 !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18) !important;
}

#sidebarSessionBox .session-user{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-bottom:10px !important;
}

#sidebarSessionBox .session-avatar{
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#334155,#64748b) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:900 !important;
  font-size:13px !important;
  flex-shrink:0 !important;
}

#sidebarSessionBox .session-info{
  min-width:0 !important;
}

#sidebarSessionBox .session-info strong{
  display:block !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#sidebarSessionBox .session-info small{
  display:block !important;
  color:#cbd5e1 !important;
  font-size:12px !important;
  margin-top:2px !important;
  white-space:nowrap !important;
}

#sidebarSessionBox .session-info span{
  display:block !important;
  color:#22c55e !important;
  font-size:11px !important;
  margin-top:3px !important;
}

#sidebarSessionBox #logoutBtn{
  width:100% !important;
  display:block !important;
  border:0 !important;
  border-radius:10px !important;
  padding:10px 12px !important;
  background:#ef4444 !important;
  color:white !important;
  font-weight:900 !important;
  font-size:13px !important;
  cursor:pointer !important;
}

#sidebarSessionBox #logoutBtn:hover{
  background:#dc2626 !important;
}

/* Ocultar cualquier userBox viejo duplicado que pueda quedar */
.sidebar > #userBox,
.sidebar .sidebar-user{
  display:none !important;
}

/* Mantener el diseño del panel derecho */
.right #sidebarSessionBox{
  display:none !important;
}



/* ===== FIX OVERLAP PERFIL ===== */
.sidebar{
  padding-bottom:190px !important;
}

.nav{
  max-height:calc(100vh - 240px) !important;
  overflow-y:auto !important;
}

#sidebarSessionBox{
  bottom:16px !important;
}



/* ===== OCULTAR SECCIONES: CHAT, TAREAS Y COTIZACIONES ===== */
.nav button[data-view="chat"],
.nav button[data-view="tasks"],
.nav button[data-view="quotes"],
[data-view="chat"],
[data-view="tasks"],
[data-view="quotes"]{
  display:none !important;
}

/* Más espacio en el menú después de quitar secciones */
.nav{
  gap:10px !important;
}



/* ===== AGENDA COMERCIAL / CALENDARIO ===== */
.calendar-view{
  padding:4px 0 30px;
}

.calendar-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  background:#fff;
  border:1px solid #e7edf5;
  border-radius:18px;
  padding:20px;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
  margin-bottom:16px;
}

.calendar-header .eyebrow{
  color:#2f6df6;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:4px;
}

.calendar-header h2{
  font-size:24px;
  font-weight:900;
  color:#0f172a;
  margin:0 0 4px;
}

.calendar-header span{
  color:#64748b;
  font-size:14px;
}

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

.calendar-kpi{
  background:#fff;
  border:1px solid #e7edf5;
  border-radius:16px;
  padding:17px;
  box-shadow:0 8px 22px rgba(15,23,42,.05);
  display:flex;
  align-items:center;
  gap:12px;
}

.calendar-kpi b{
  width:46px;
  height:46px;
  border-radius:14px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}

.calendar-kpi span{
  font-size:13px;
  font-weight:800;
  color:#334155;
}

.calendar-kpi.follow b{background:#2f6df6}
.calendar-kpi.pay b{background:#f59e0b}
.calendar-kpi.trip b{background:#8b5cf6}
.calendar-kpi.urgent b{background:#ef4444}

.calendar-layout{
  display:grid;
  grid-template-columns:minmax(560px,1fr) 330px;
  gap:16px;
}

.calendar-card,
.agenda-card{
  background:#fff;
  border:1px solid #e7edf5;
  border-radius:18px;
  padding:18px;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
}

.calendar-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

.calendar-toolbar h3{
  font-size:20px;
  font-weight:900;
}

.cal-nav{
  width:36px;
  height:36px;
  border:1px solid #e7edf5;
  background:#fff;
  border-radius:10px;
  font-size:24px;
  cursor:pointer;
}

.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}

.calendar-grid strong{
  text-align:center;
  font-size:12px;
  color:#64748b;
  padding-bottom:6px;
}

.day{
  min-height:92px;
  border:1px solid #e7edf5;
  border-radius:12px;
  padding:10px;
  font-weight:800;
  color:#0f172a;
  background:#fbfdff;
  position:relative;
}

.day.muted{
  color:#cbd5e1;
  background:#f8fafc;
}

.day.today{
  border-color:#2f6df6;
  box-shadow:0 0 0 3px rgba(47,109,246,.12);
}

.event-pill{
  display:block;
  margin-top:10px;
  border-radius:999px;
  padding:5px 7px;
  color:#fff;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.event-pill.blue{background:#2f6df6}
.event-pill.yellow{background:#f59e0b}
.event-pill.purple{background:#8b5cf6}
.event-pill.red{background:#ef4444}
.event-pill.green{background:#22c55e}

.event-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  margin-left:4px;
}
.event-dot.blue{background:#2f6df6}

.agenda-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.agenda-title h3{
  font-size:18px;
  font-weight:900;
}

.agenda-title span{
  color:#64748b;
  font-size:13px;
  font-weight:800;
}

.agenda-item{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid #eef2f7;
}

.agenda-item b{
  font-size:12px;
}

.agenda-item strong{
  display:block;
  font-size:14px;
  margin-bottom:4px;
}

.agenda-item p{
  color:#64748b;
  font-size:12px;
}

.agenda-item.blue b{color:#2f6df6}
.agenda-item.yellow b{color:#f59e0b}
.agenda-item.purple b{color:#8b5cf6}

.legend-card{
  margin-top:18px;
  padding:16px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #e7edf5;
}

.legend-card h4{
  margin-bottom:10px;
  font-size:14px;
}

.legend-card p{
  display:flex;
  align-items:center;
  gap:8px;
  color:#334155;
  font-size:12px;
  margin:8px 0;
}

.legend-card i{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}

.legend-card i.blue{background:#2f6df6}
.legend-card i.yellow{background:#f59e0b}
.legend-card i.purple{background:#8b5cf6}
.legend-card i.red{background:#ef4444}
.legend-card i.green{background:#22c55e}

@media(max-width:1100px){
  .calendar-layout{grid-template-columns:1fr}
  .calendar-kpis{grid-template-columns:repeat(2,1fr)}
}



/* ===== EVENTOS AUTOMÁTICOS CALENDARIO ===== */
.calendar-auto-list{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.auto-event{
  border:1px solid #e7edf5;
  border-left:5px solid #2f6df6;
  background:#fff;
  border-radius:12px;
  padding:12px;
  box-shadow:0 5px 14px rgba(15,23,42,.05);
}

.auto-event.pay{border-left-color:#f59e0b}
.auto-event.trip{border-left-color:#8b5cf6}
.auto-event.quote{border-left-color:#06b6d4}
.auto-event.urgent{border-left-color:#ef4444}
.auto-event.done{border-left-color:#22c55e}

.auto-event b{
  display:block;
  font-size:13px;
  color:#0f172a;
  margin-bottom:4px;
}

.auto-event span{
  display:block;
  color:#64748b;
  font-size:12px;
  line-height:1.35;
}

.auto-event small{
  display:block;
  color:#94a3b8;
  font-size:11px;
  margin-top:6px;
}

.calendar-modal-card{
  max-width:520px;
}



/* ===== CAMPOS EXTRA NUEVO LEAD ===== */
.extra-lead-field{
  display:grid;
  gap:7px;
}

.extra-lead-field label{
  font-size:13px;
  font-weight:800;
  color:#334155;
}

.extra-lead-field input,
.extra-lead-field textarea{
  width:100%;
  border:1px solid #e7edf5;
  border-radius:12px;
  padding:12px 14px;
  font-size:14px;
  outline:none;
}

.extra-lead-field textarea{
  min-height:86px;
  resize:vertical;
}

.extra-detail-row b{
  color:#334155;
}



/* ===== TAREAS INTELIGENTES ===== */
.tasks-view{
  padding:10px 0 30px;
}

.tasks-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  border-radius:18px;
  padding:20px;
  margin-bottom:18px;
  border:1px solid #e7edf5;
}

.tasks-header h2{
  font-size:24px;
  font-weight:900;
}

.tasks-header span{
  color:#64748b;
  font-size:14px;
}

.eyebrow{
  color:#8b5cf6;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:4px;
}

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

.task-column{
  background:#fff;
  border-radius:18px;
  padding:16px;
  border:1px solid #e7edf5;
  min-height:500px;
}

.task-column-title{
  margin-bottom:14px;
}

.task-column-title h3{
  font-size:18px;
  font-weight:900;
}

.task-card{
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
  border:1px solid #e7edf5;
  background:#fff;
}

.task-card.urgent{border-left:5px solid #ef4444}
.task-card.medium{border-left:5px solid #f59e0b}
.task-card.low{border-left:5px solid #22c55e}
.task-card.done{border-left:5px solid #8b5cf6}

.task-card small{
  display:block;
  font-size:11px;
  font-weight:900;
  margin-bottom:8px;
}

.task-card strong{
  display:block;
  font-size:14px;
  margin-bottom:6px;
}

.task-card p{
  color:#64748b;
  font-size:12px;
  margin-bottom:8px;
}

.task-card span{
  color:#94a3b8;
  font-size:11px;
}



/* ===== PESTAÑAS FUNCIONALES DETALLE LEAD ===== */
.detail-tab-content{
  display:none;
  padding-top:14px;
}

.detail-tab-content.active{
  display:block;
}

.tab-empty{
  background:#f8fafc;
  border:1px solid #e7edf5;
  border-radius:14px;
  padding:14px;
  color:#64748b;
  font-size:13px;
}

.detail-note-box,
.detail-task-box,
.detail-quote-box,
.detail-history-box{
  display:grid;
  gap:10px;
}

.detail-mini-card{
  background:#fff;
  border:1px solid #e7edf5;
  border-radius:14px;
  padding:13px;
  box-shadow:0 5px 14px rgba(15,23,42,.04);
}

.detail-mini-card b{
  display:block;
  font-size:13px;
  color:#0f172a;
  margin-bottom:4px;
}

.detail-mini-card p{
  font-size:12px;
  color:#64748b;
  line-height:1.4;
}

.detail-mini-card small{
  display:block;
  margin-top:6px;
  color:#94a3b8;
  font-size:11px;
}

.detail-add-area{
  margin-top:12px;
  display:grid;
  gap:8px;
}

.detail-add-area textarea,
.detail-add-area input{
  width:100%;
  border:1px solid #e7edf5;
  border-radius:12px;
  padding:12px;
  font-size:13px;
}

.detail-add-area button{
  border:0;
  border-radius:10px;
  padding:11px;
  font-weight:800;
  color:#fff;
  background:#2f6df6;
  cursor:pointer;
}

.tabs button{
  cursor:pointer;
}



/* ===== MOTOR DE AUTOMATIZACIONES ===== */
.automation-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#ecfdf5;
  color:#059669;
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:900;
  margin-top:8px;
}

.history-auto{
  border-left:5px solid #2f6df6 !important;
}

.task-auto{
  border-left:5px solid #f59e0b !important;
}

.auto-toast{
  position:fixed;
  right:24px;
  bottom:24px;
  background:#0f172a;
  color:white;
  padding:14px 16px;
  border-radius:14px;
  box-shadow:0 18px 45px rgba(15,23,42,.28);
  z-index:99999;
  font-size:13px;
  font-weight:800;
  animation:autoToastIn .25s ease;
}

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



/* ===== REPORTES Y GRAFICAS ===== */
.reports-view{
  padding:10px 0 30px;
}

.reports-header{
  background:#fff;
  border-radius:20px;
  border:1px solid #e7edf5;
  padding:22px;
  margin-bottom:18px;
}

.reports-tag{
  color:#2f6df6;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:4px;
}

.reports-header h2{
  font-size:28px;
  font-weight:900;
  margin-bottom:6px;
}

.reports-header span{
  color:#64748b;
  font-size:14px;
}

.reports-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.report-card{
  background:#fff;
  border-radius:18px;
  border:1px solid #e7edf5;
  padding:20px;
  min-height:360px;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}

.report-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

.report-head h3{
  font-size:18px;
  font-weight:900;
}

.report-card canvas{
  width:100% !important;
  height:280px !important;
}

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



/* ===== REPORTES DATOS REALES ===== */
.empty-reports{
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:16px;
}

.empty-reports strong{
  display:block;
  font-size:14px;
  margin-bottom:4px;
}

.empty-reports p{
  font-size:13px;
  margin:0;
}


/* ===== ROLES Y PERMISOS ===== */
.role-badge{
  background:#eef2ff;
  color:#3730a3;
  border:1px solid #c7d2fe;
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
body[data-role="advisor"] [data-admin-only],
body[data-role="advisor"] [data-supervisor-up],
body[data-role="advisor"] .admin-only,
body[data-role="advisor"] .supervisor-only{
  display:none !important;
}
body[data-role="supervisor"] [data-admin-only],
body[data-role="supervisor"] .admin-only{
  display:none !important;
}
body[data-role="advisor"] .global-metric,
body[data-role="advisor"] .team-metric,
body[data-role="supervisor"] .global-metric{
  display:none !important;
}
body[data-role="agent"] [data-view="reports"],
body[data-role="agent"] [data-view="settings"],
body[data-role="agent"] [data-view="clients"],
body[data-role="agent"] [data-view="employees"]{
  display:none !important;
}
/* ===== FIX GUARDAR LEAD ===== */
button:disabled{
  opacity:.65;
  cursor:not-allowed;
}


/* ===== FIX VISUAL TABS DETALLE ===== */
.detail-tab-content{
  display:none;
  padding-top:14px;
}
.detail-tab-content.active{
  display:block;
}
.detail-mini-card{
  background:#fff;
  border:1px solid #e7edf5;
  border-radius:14px;
  padding:13px;
  box-shadow:0 5px 14px rgba(15,23,42,.04);
  margin-bottom:10px;
}
.detail-mini-card b{
  display:block;
  font-size:13px;
  color:#0f172a;
  margin-bottom:4px;
}
.detail-mini-card p{
  font-size:12px;
  color:#64748b;
  line-height:1.4;
}
.detail-mini-card small{
  display:block;
  margin-top:6px;
  color:#94a3b8;
  font-size:11px;
}
.detail-add-area{
  margin-top:12px;
  display:grid;
  gap:8px;
}
.detail-add-area textarea,
.detail-add-area input{
  width:100%;
  border:1px solid #e7edf5;
  border-radius:12px;
  padding:12px;
  font-size:13px;
}
.detail-add-area button{
  border:0;
  border-radius:10px;
  padding:11px;
  font-weight:800;
  color:#fff;
  background:#2f6df6;
  cursor:pointer;
}
.tabs button{
  cursor:pointer;
}


/* ===== FIX FINAL PERFIL, ROLES Y AJUSTES ===== */
#sidebarSessionBox{ display:none !important; }
body[data-role="agent"] [data-view="reports"],
body[data-role="agent"] [data-view="settings"],
body[data-role="agent"] [data-view="clients"],
body[data-role="agent"] [data-view="employees"],
body[data-role="agent"] .admin-only,
body[data-role="agent"] [data-admin-only],
body[data-role="agent"] .delete-btn,
body[data-role="agent"] .btn-delete,
body[data-role="agent"] button[id*="delete"],
body[data-role="agent"] button[class*="delete"]{ display:none !important; }
body[data-role="supervisor"] [data-view="employees"],
body[data-role="supervisor"] .admin-only,
body[data-role="supervisor"] [data-admin-only],
body[data-role="supervisor"] .delete-btn,
body[data-role="supervisor"] .btn-delete,
body[data-role="supervisor"] button[id*="delete"],
body[data-role="supervisor"] button[class*="delete"]{ display:none !important; }
#userBox.user-box{position:absolute !important;left:14px !important;right:14px !important;bottom:14px !important;display:block !important;padding:12px !important;border-radius:16px !important;background:rgba(255,255,255,.065) !important;border:1px solid rgba(255,255,255,.10) !important;z-index:60 !important;box-shadow:0 12px 28px rgba(0,0,0,.18) !important;}
#userBox .user-profile{display:flex !important;align-items:center !important;gap:10px !important;margin-bottom:10px !important;}
#userBox .user-avatar{width:40px !important;height:40px !important;border-radius:50% !important;background:linear-gradient(135deg,#334155,#64748b) !important;color:#fff !important;display:flex !important;align-items:center !important;justify-content:center !important;font-weight:900 !important;font-size:13px !important;flex-shrink:0 !important;}
#userBox .user-info strong{display:block !important;color:#fff !important;font-size:13px !important;line-height:1.15 !important;}
#userBox .user-info small{display:block !important;color:#cbd5e1 !important;font-size:12px !important;margin-top:2px !important;}
#userBox .user-info span{display:block !important;color:#22c55e !important;font-size:11px !important;margin-top:3px !important;}
#userBox .logout-btn{width:100% !important;display:block !important;border:0 !important;border-radius:10px !important;padding:10px 12px !important;background:#ef4444 !important;color:white !important;font-weight:900 !important;font-size:13px !important;cursor:pointer !important;}
.settings-profile-card{background:#fff;border:1px solid #e7edf5;border-radius:18px;padding:20px;max-width:420px;box-shadow:0 10px 25px rgba(15,23,42,.05);margin-bottom:18px;}
.settings-profile-card h3{margin-bottom:18px;color:#0f172a;font-size:20px;}
.settings-profile-card label{display:block;margin:12px 0 6px;font-size:13px;font-weight:700;color:#334155;}
.settings-profile-card input{width:100%;border:1px solid #dbe3ef;border-radius:12px;padding:12px;font-size:14px;}
.settings-profile-card input:disabled{background:#f8fafc;color:#64748b;}
.settings-profile-card button{margin-top:18px;width:100%;}


/* =========================================================
   UI PREMIUM FINAL - CRM WHATSAPP STYLE
   ========================================================= */

:root{
  --premium-bg:#f8fafc;
  --premium-panel:#ffffff;
  --premium-sidebar:#0b1424;
  --premium-sidebar-2:#08111f;
  --premium-blue:#2563eb;
  --premium-blue-2:#3b82f6;
  --premium-green:#22c55e;
  --premium-purple:#7c3aed;
  --premium-orange:#f59e0b;
  --premium-pink:#ec4899;
  --premium-red:#ef4444;
  --premium-text:#0f172a;
  --premium-muted:#64748b;
  --premium-border:#e7edf5;
  --premium-shadow:0 10px 25px rgba(15,23,42,.06);
}

*{
  box-sizing:border-box;
}

body{
  background:var(--premium-bg) !important;
  font-family:'Inter',Arial,sans-serif !important;
  color:var(--premium-text);
}

/* LOGIN */
.login-page{
  background:linear-gradient(135deg,#061226,#0f2a4d) !important;
}

.login-card{
  border-radius:28px !important;
  box-shadow:0 24px 60px rgba(0,0,0,.26) !important;
}

.login-card input{
  border-radius:14px !important;
}

.login-card .btn{
  border-radius:12px !important;
}

/* LAYOUT */
.app{
  background:var(--premium-bg) !important;
  grid-template-columns:240px minmax(720px,1fr) 360px !important;
}

/* SIDEBAR */
.sidebar{
  background:linear-gradient(180deg,var(--premium-sidebar),var(--premium-sidebar-2)) !important;
  color:#fff !important;
  border-right:1px solid rgba(255,255,255,.06) !important;
  padding:20px 14px 150px !important;
  position:relative !important;
  overflow:hidden !important;
  box-shadow:8px 0 25px rgba(15,23,42,.18) !important;
}

.brand{
  align-items:center !important;
  gap:12px !important;
  padding:0 4px 22px !important;
}

.logo{
  width:50px !important;
  height:50px !important;
  border-radius:18px !important;
  background:#25D366 !important;
  color:white !important;
  box-shadow:0 14px 30px rgba(37,211,102,.22) !important;
}

.brand h1{
  color:#fff !important;
  font-size:20px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
}

.brand p,
#roleText{
  color:#22c55e !important;
  font-weight:800 !important;
  font-size:13px !important;
  margin-top:3px !important;
}

/* NAV */
.nav{
  display:flex !important;
  flex-direction:column !important;
  gap:9px !important;
  overflow-y:auto !important;
  max-height:calc(100vh - 235px) !important;
  padding-right:2px !important;
}

.nav button{
  width:100% !important;
  height:48px !important;
  border:0 !important;
  background:transparent !important;
  color:#e5eefb !important;
  border-radius:11px !important;
  padding:0 14px !important;
  font-size:14px !important;
  font-weight:800 !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  text-align:left !important;
  transition:.18s ease !important;
}

.nav button i{
  width:20px !important;
  text-align:center !important;
  font-size:16px !important;
  color:#cbd5e1 !important;
}

.nav button span{
  flex:1 !important;
}

.nav button:hover{
  background:rgba(255,255,255,.08) !important;
  transform:translateX(3px);
}

.nav button.active{
  background:linear-gradient(135deg,#1477ff,#3365f6) !important;
  box-shadow:0 16px 34px rgba(37,99,235,.35) !important;
  color:#fff !important;
}

.nav button.active i{
  color:#fff !important;
}

.nav em{
  min-width:25px;
  height:25px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  background:#7c3aed;
  color:#fff;
  font-size:12px;
}

/* USER BOX */
#sidebarSessionBox{
  display:none !important;
}

#userBox.user-box,
.user-box{
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  bottom:14px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.065) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  padding:14px !important;
  box-shadow:0 16px 35px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(12px);
}

.user-profile{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin-bottom:13px !important;
}

.user-avatar{
  width:48px !important;
  height:48px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#2563eb,#8b5cf6) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:15px !important;
  font-weight:900 !important;
  flex-shrink:0 !important;
}

.user-info{
  min-width:0 !important;
}

.user-info strong{
  display:block !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.user-info small{
  display:block !important;
  color:#cbd5e1 !important;
  font-size:12px !important;
  margin-top:2px !important;
  max-width:135px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.user-info span{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  color:#22c55e !important;
  font-size:12px !important;
  font-weight:800 !important;
  margin-top:4px !important;
}

.user-info span b{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  display:inline-block;
}

.logout-btn,
#logoutBtn{
  width:100% !important;
  height:42px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(15,23,42,.55) !important;
  color:#fff !important;
  font-weight:900 !important;
  font-size:13px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  cursor:pointer !important;
}

.logout-btn:hover,
#logoutBtn:hover{
  background:#ef4444 !important;
}

/* MAIN */
.main{
  background:#f8fafc !important;
  padding:20px 22px !important;
  overflow:auto !important;
}

.topbar{
  height:54px !important;
  background:transparent !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  margin-bottom:22px !important;
}

.search-wrap{
  width:430px !important;
  height:44px !important;
  background:#fff !important;
  border:1px solid var(--premium-border) !important;
  border-radius:10px !important;
  box-shadow:0 5px 18px rgba(15,23,42,.04) !important;
}

.search{
  font-size:14px !important;
}

/* BUTTONS */
.btn{
  border:0 !important;
  border-radius:10px !important;
  background:linear-gradient(135deg,#1477ff,#2563eb) !important;
  color:#fff !important;
  font-weight:900 !important;
  box-shadow:0 10px 24px rgba(37,99,235,.24) !important;
}

.btn.secondary{
  background:#fff !important;
  color:#334155 !important;
  border:1px solid var(--premium-border) !important;
  box-shadow:none !important;
}

/* STATS */
.stats{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(120px,1fr)) !important;
  gap:10px !important;
  margin-bottom:22px !important;
}

.stat{
  height:112px !important;
  background:#fff !important;
  border:1px solid var(--premium-border) !important;
  border-radius:10px !important;
  box-shadow:var(--premium-shadow) !important;
  padding:18px 14px 12px 68px !important;
  position:relative !important;
  overflow:hidden !important;
}

.stat:before{
  content:'';
  position:absolute;
  left:16px;
  top:25px;
  width:38px;
  height:38px;
  border-radius:10px;
  background:#2563eb;
  box-shadow:0 10px 20px rgba(37,99,235,.18);
}

.stat:after{
  content:'▣';
  position:absolute;
  left:16px;
  top:25px;
  width:38px;
  height:38px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}

.stat:nth-child(2):before{background:#22c55e}
.stat:nth-child(3):before{background:#f59e0b}
.stat:nth-child(4):before{background:#7c3aed}
.stat:nth-child(5):before{background:#22c55e}

.stat h3{
  font-size:12px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  color:#0f172a !important;
  margin-bottom:9px !important;
}

.stat strong{
  font-size:25px !important;
  font-weight:900 !important;
  color:#0f172a !important;
  line-height:1 !important;
}

.stat p{
  color:#64748b !important;
  font-size:11px !important;
  margin-top:9px !important;
}

.stat p:before{
  content:'↑ ';
  color:#22c55e;
  font-weight:900;
}

/* SECTION HEADER */
.section{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:0 0 14px !important;
}

.section h2{
  font-size:22px !important;
  font-weight:900 !important;
}

.spacer{flex:1}

/* PIPELINE */
.pipeline{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(215px,1fr)) !important;
  gap:8px !important;
  overflow-x:auto !important;
  padding-bottom:12px !important;
}

.column{
  min-height:455px !important;
  background:#fff !important;
  border:1px solid var(--premium-border) !important;
  border-radius:10px !important;
  box-shadow:0 6px 18px rgba(15,23,42,.035) !important;
  padding:12px 10px !important;
  position:relative !important;
}

.column:before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:#2563eb;
  border-radius:10px 10px 0 0;
}

.column:nth-child(2):before{background:#f59e0b}
.column:nth-child(3):before{background:#8b5cf6}
.column:nth-child(4):before{background:#2563eb}

.col-title{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding:7px 4px 13px !important;
  border-bottom:1px solid #eef2f7 !important;
  color:#1d4ed8 !important;
  font-size:14px !important;
  font-weight:900 !important;
  margin-bottom:12px !important;
}

.count{
  font-size:12px !important;
  font-weight:900 !important;
}

/* LEAD CARDS */
.lead{
  background:#fff !important;
  border:1px solid #e5edf6 !important;
  border-radius:10px !important;
  padding:12px !important;
  margin-bottom:9px !important;
  box-shadow:0 6px 16px rgba(15,23,42,.055) !important;
  transition:.18s ease !important;
}

.lead:hover{
  transform:translateY(-2px);
  border-color:#bfdbfe !important;
}

.lead-head{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.avatar{
  width:39px !important;
  height:39px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#2563eb,#ec4899) !important;
  color:white !important;
  font-size:12px !important;
  font-weight:900 !important;
  flex-shrink:0 !important;
}

.avatar.big{
  width:52px !important;
  height:52px !important;
  font-size:16px !important;
}

.lead strong{
  font-size:13px !important;
  font-weight:900 !important;
  color:#0f172a !important;
}

.lead span{
  font-size:12px !important;
  color:#64748b !important;
}

.wa-mini{
  margin-left:auto !important;
  width:24px !important;
  height:24px !important;
  border:2px solid #22c55e !important;
  border-radius:50% !important;
  color:#16a34a !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.lead p{
  color:#334155 !important;
  font-size:12px !important;
  line-height:1.45 !important;
  margin:10px 0 !important;
}

.lead-foot{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
}

.tag{
  background:#dbeafe !important;
  color:#3b5f87 !important;
  border-radius:7px !important;
  padding:6px 9px !important;
  font-size:11px !important;
  font-weight:900 !important;
}

/* RIGHT PANEL */
.right{
  background:#fff !important;
  border-left:1px solid var(--premium-border) !important;
  padding:22px !important;
  box-shadow:-6px 0 20px rgba(15,23,42,.04) !important;
  overflow:auto !important;
}

.right h3{
  font-size:20px !important;
  font-weight:900 !important;
  margin-bottom:18px !important;
}

.empty-detail{
  color:#64748b !important;
}

.detail-head{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:12px 0 18px !important;
}

.status{
  background:#d1fae5 !important;
  color:#059669 !important;
  border-radius:999px !important;
  padding:7px 12px !important;
  font-size:12px !important;
  font-weight:900 !important;
}

.detail-wa{
  width:34px !important;
  height:34px !important;
  border-radius:10px !important;
  background:#22c55e !important;
  color:#fff !important;
}

.close-detail{
  width:36px !important;
  height:36px !important;
  border-radius:10px !important;
  background:#ef4444 !important;
  color:white !important;
}

.tabs{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:0 !important;
  margin:0 -22px 16px !important;
  padding:0 18px !important;
  border-bottom:1px solid var(--premium-border) !important;
}

.tabs button{
  background:#fff !important;
  border:0 !important;
  padding:13px 3px !important;
  color:#64748b !important;
  font-size:11px !important;
  font-weight:700 !important;
  border-bottom:2px solid transparent !important;
}

.tabs button.active{
  color:#2563eb !important;
  border-bottom-color:#2563eb !important;
}

.info-row{
  display:grid !important;
  grid-template-columns:112px 1fr !important;
  gap:10px !important;
  align-items:center !important;
  padding:11px 0 !important;
  border-bottom:1px solid #eef2f7 !important;
  font-size:12px !important;
}

.info-row b{
  color:#526070 !important;
}

.info-row span{
  color:#334155 !important;
}

/* CHAT LOOK IF EXISTS */
.chat-panel{
  margin-top:16px !important;
  border:1px solid var(--premium-border) !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:#fff !important;
  box-shadow:var(--premium-shadow) !important;
}

.chat-title{
  height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:0 14px !important;
  border-bottom:1px solid var(--premium-border) !important;
}

.messages{
  height:250px !important;
  background:#fbfdff !important;
  padding:14px !important;
}

/* BOTTOM CARDS */
.premium-bottom-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:16px;
  margin-top:18px;
}

.premium-card{
  background:#fff;
  border:1px solid var(--premium-border);
  border-radius:12px;
  padding:18px;
  box-shadow:var(--premium-shadow);
}

.premium-card h3{
  font-size:15px;
  font-weight:900;
  margin-bottom:14px;
}

.activity-line{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid #eef2f7;
}

.activity-line:last-child{
  border-bottom:0;
}

.activity-line i{
  width:30px;
  height:30px;
  border-radius:9px;
  background:#ecfdf5;
  color:#16a34a;
  display:flex;
  align-items:center;
  justify-content:center;
}

.activity-line:nth-child(3) i{
  background:#f5f3ff;
  color:#7c3aed;
}

.activity-line:nth-child(4) i{
  background:#fffbeb;
  color:#f59e0b;
}

.activity-line b{
  font-size:13px;
}

.activity-line p,
.activity-line small{
  color:#64748b;
  font-size:12px;
}

.origin-card-ui{
  display:grid;
  grid-template-columns:150px 1fr;
  align-items:center;
  gap:20px;
}

.origin-card-ui h3{
  grid-column:1 / -1;
}

.donut-ui{
  width:150px;
  height:150px;
  border-radius:50%;
  background:conic-gradient(#2563eb 0 45%, #22c55e 45% 75%, #f59e0b 75% 90%, #ec4899 90% 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.donut-ui span{
  width:84px;
  height:84px;
  border-radius:50%;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.donut-ui b{
  font-size:22px;
  font-weight:900;
}

.donut-ui small{
  color:#64748b;
  font-size:11px;
}

.legend-ui p{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  margin:10px 0;
  color:#334155;
}

.legend-ui i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#2563eb;
}

.legend-ui p:nth-child(2) i{background:#22c55e}
.legend-ui p:nth-child(3) i{background:#f59e0b}
.legend-ui p:nth-child(4) i{background:#ec4899}

.legend-ui b{
  margin-left:auto;
  color:#64748b;
}

/* MODALS */
.modal-card{
  border-radius:22px !important;
  box-shadow:0 24px 70px rgba(15,23,42,.22) !important;
}

.form input,
.form select,
.form textarea{
  border-radius:12px !important;
}

/* RESPONSIVE */
@media(max-width:1200px){
  .app{
    grid-template-columns:240px 1fr !important;
  }
  .right{
    display:none !important;
  }
  .stats{
    grid-template-columns:repeat(2,1fr) !important;
  }
  .pipeline{
    grid-template-columns:repeat(4,240px) !important;
  }
  .premium-bottom-grid{
    grid-template-columns:1fr !important;
  }
}


/* ===== FIX PREMIUM: ESPACIADO PIPELINE + WHATSAPP ICON ===== */

/* Más separación entre columnas para que no se vea amontonado */
.pipeline{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(245px, 1fr)) !important;
  gap:14px !important;
  column-gap:14px !important;
  padding:0 4px 14px 2px !important;
  align-items:start !important;
}

/* Columnas más limpias y con separación interna */
.column{
  padding:14px 12px !important;
  border-radius:12px !important;
  min-width:245px !important;
}

/* Título con mejor aire */
.col-title{
  padding:8px 4px 14px !important;
  margin-bottom:14px !important;
}

/* Tarjeta de lead con espacio correcto */
.lead{
  padding:14px !important;
  border-radius:12px !important;
  margin-bottom:12px !important;
}

.lead-head{
  gap:11px !important;
}

.lead-main{
  min-width:0 !important;
  flex:1 !important;
}

.lead strong{
  max-width:120px !important;
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.lead span{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.lead p{
  min-height:34px !important;
}

/* Campaña y hora con mejor distribución */
.lead-foot{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

.tag{
  max-width:145px !important;
  flex:1 !important;
}

.lead-foot small{
  flex-shrink:0 !important;
  max-width:48px !important;
  line-height:1.1 !important;
  text-align:right !important;
}

/* Corregir icono de WhatsApp */
.wa-mini{
  margin-left:auto !important;
  width:25px !important;
  height:25px !important;
  min-width:25px !important;
  border:2px solid #22c55e !important;
  border-radius:50% !important;
  color:#16a34a !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  font-size:14px !important;
}

.wa-mini::before{
  content:"\f232" !important;
  font-family:"Font Awesome 6 Brands" !important;
  font-weight:400 !important;
}

.wa-mini i{
  display:none !important;
}

/* Evita que cualquier carácter raro del botón se vea */
.wa-mini{
  font-size:0 !important;
}

.wa-mini::before{
  font-size:14px !important;
}

/* En pantallas medianas mantener scroll limpio */
@media(max-width:1300px){
  .pipeline{
    grid-template-columns:repeat(4, 255px) !important;
    overflow-x:auto !important;
  }
}

/* Ajuste visual para no pegar columnas al borde */
.main{
  padding-left:24px !important;
  padding-right:24px !important;
}



/* =========================================================
   TOPBAR PREMIUM FIX - ESTILO REFERENCIA
   ========================================================= */

.app{
  grid-template-columns:240px minmax(740px,1fr) 360px !important;
  background:#f8fafc !important;
}

.main{
  padding:0 !important;
  background:#f8fafc !important;
  overflow:auto !important;
}

.topbar{
  height:74px !important;
  min-height:74px !important;
  background:#ffffff !important;
  border-bottom:1px solid #e7edf5 !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  padding:0 22px !important;
  margin:0 !important;
  position:sticky !important;
  top:0 !important;
  z-index:80 !important;
  box-shadow:0 2px 12px rgba(15,23,42,.035) !important;
}

.topbar .search-wrap{
  width:420px !important;
  max-width:48vw !important;
  height:44px !important;
  background:#fff !important;
  border:1px solid #dfe7f2 !important;
  border-radius:10px !important;
  display:flex !important;
  align-items:center !important;
  padding:0 12px !important;
  box-shadow:0 6px 18px rgba(15,23,42,.04) !important;
  margin:0 !important;
}

.search-wrap::before{
  content:"\f002" !important;
  font-family:"Font Awesome 6 Free" !important;
  font-weight:900 !important;
  color:#64748b !important;
  font-size:13px !important;
  margin-right:10px !important;
}

.search-wrap .search,
.search-wrap input{
  flex:1 !important;
  height:100% !important;
  border:0 !important;
  outline:0 !important;
  padding:0 !important;
  font-size:14px !important;
  color:#334155 !important;
  background:transparent !important;
}

.search-wrap kbd,
.search-wrap .shortcut{
  color:#94a3b8 !important;
  font-size:12px !important;
  font-weight:700 !important;
  background:transparent !important;
  border:0 !important;
}

.premium-top-spacer{
  flex:1 !important;
}

.premium-top-actions{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin-left:auto !important;
}

.top-icon-btn{
  width:34px !important;
  height:34px !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  color:#0f172a !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  position:relative !important;
  font-size:19px !important;
}

.top-icon-btn:hover{
  background:#f1f5f9 !important;
}

.top-icon-btn .fa-whatsapp{
  color:#16a34a !important;
  font-size:23px !important;
}

.top-icon-btn.notification em{
  position:absolute !important;
  top:-4px !important;
  right:-2px !important;
  width:18px !important;
  height:18px !important;
  border-radius:50% !important;
  background:#ef4444 !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:900 !important;
  font-style:normal !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:2px solid #fff !important;
}

.top-avatar{
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#334155,#64748b) !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:900 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 8px 18px rgba(15,23,42,.16) !important;
}

.top-chevron{
  width:28px !important;
  height:28px !important;
  border:0 !important;
  background:transparent !important;
  color:#0f172a !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* El contenido inicia debajo del topbar con el aire correcto */
#dashboardView,
#leadsTableView,
#calendarView,
#tasksView,
#reportsView,
#settingsView,
#employeesView{
  padding:20px 22px 30px !important;
}

/* Ajustar tarjetas para no pegarse al top */
.stats{
  margin-top:0 !important;
}

/* Right panel alineado con header superior */
.right{
  padding-top:20px !important;
  border-left:1px solid #e7edf5 !important;
  background:#fff !important;
}

.right h3{
  margin-top:0 !important;
}

/* Sidebar logo y altura alineada con topbar */
.sidebar{
  padding-top:20px !important;
}

.brand{
  min-height:54px !important;
  margin-bottom:14px !important;
}

/* Cards métricas más parecidas a la referencia */
.stats{
  gap:12px !important;
}

.stat{
  border-radius:12px !important;
  height:104px !important;
}

/* Encabezado de pipeline alineado */
.section{
  margin-top:10px !important;
  margin-bottom:14px !important;
}

/* Evita que topbar anterior deje botones duplicados muy visibles */
.topbar > button:not(.top-icon-btn):not(.top-chevron),
.topbar > .avatar:not(.top-avatar){
  display:none !important;
}

@media(max-width:1100px){
  .topbar .search-wrap{
    width:100% !important;
    max-width:none !important;
  }

  .premium-top-actions{
    gap:8px !important;
  }
}


/* ===== TOPBAR FINAL ===== */

.topbar{
  height:74px !important;
  min-height:74px !important;

  background:#ffffff !important;

  border-bottom:1px solid #e7edf5 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  padding:0 24px !important;

  position:sticky !important;
  top:0 !important;
  z-index:100 !important;

  box-shadow:0 2px 10px rgba(15,23,42,.03) !important;
}

.search-wrap{
  width:420px !important;
  height:46px !important;

  background:#fff !important;

  border:1px solid #dbe3ef !important;
  border-radius:14px !important;

  display:flex !important;
  align-items:center !important;

  gap:10px !important;

  padding:0 14px !important;

  box-shadow:0 6px 18px rgba(15,23,42,.04) !important;
}

.search-wrap > i{
  color:#64748b !important;
  font-size:14px !important;
}

.search{
  flex:1 !important;

  border:0 !important;
  outline:none !important;

  background:transparent !important;

  font-size:14px !important;
  color:#334155 !important;
}

.search-wrap kbd{
  background:transparent !important;
  border:0 !important;

  color:#94a3b8 !important;

  font-size:12px !important;
  font-weight:700 !important;
}

.top-icons{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
}

.top-icon{
  width:34px !important;
  height:34px !important;

  border:0 !important;
  background:transparent !important;

  border-radius:50% !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  cursor:pointer !important;

  position:relative !important;
}

.top-icon:hover{
  background:#f1f5f9 !important;
}

.top-icon i{
  font-size:19px !important;
}

.top-icon.wa i{
  color:#16a34a !important;
}

.top-icon.bell i{
  color:#0f172a !important;
}

.top-icon.bell b{
  position:absolute !important;

  top:-4px !important;
  right:-2px !important;

  width:18px !important;
  height:18px !important;

  border-radius:50% !important;

  background:#ef4444 !important;
  color:#fff !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:10px !important;
  font-weight:800 !important;

  border:2px solid #fff !important;
}

.mini-avatar{
  width:38px !important;
  height:38px !important;

  border-radius:50% !important;

  background:linear-gradient(135deg,#334155,#64748b) !important;

  color:#fff !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:13px !important;
  font-weight:900 !important;

  box-shadow:0 8px 18px rgba(15,23,42,.15) !important;
}

.top-chevron{
  width:28px !important;
  height:28px !important;

  border:0 !important;
  background:transparent !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  cursor:pointer !important;

  color:#0f172a !important;
}

.top-chevron i{
  font-size:12px !important;
}

.main{
  padding-top:0 !important;
}



/* ===== USER DROPDOWN ===== */

.top-user-menu{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}

.user-dropdown{
  position:absolute;
  top:52px;
  right:0;

  width:190px;

  background:#fff;

  border:1px solid #e7edf5;
  border-radius:14px;

  box-shadow:0 18px 40px rgba(15,23,42,.12);

  padding:8px;

  display:none;

  z-index:999;
}

.user-dropdown.active{
  display:block;
  animation:fadeDropdown .18s ease;
}

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

.dropdown-item{
  width:100%;

  height:42px;

  border:0;
  background:#fff;

  border-radius:10px;

  display:flex;
  align-items:center;
  gap:10px;

  padding:0 12px;

  cursor:pointer;

  color:#334155;

  font-size:13px;
  font-weight:700;
}

.dropdown-item:hover{
  background:#f8fafc;
}

.dropdown-item i{
  width:18px;
  text-align:center;
}

.dropdown-item.logout{
  color:#ef4444;
}

.dropdown-item.logout:hover{
  background:#fef2f2;
}



/* ===== PROFILE AVATAR ===== */

.profile-avatar-wrap{
  display:flex;
  align-items:center;
  gap:18px;
  margin:14px 0 18px;
}

.profile-avatar-preview{
  width:88px;
  height:88px;

  border-radius:50%;

  background:linear-gradient(135deg,#2563eb,#8b5cf6);

  color:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:28px;
  font-weight:900;

  overflow:hidden;

  box-shadow:0 14px 30px rgba(37,99,235,.18);
}

.profile-avatar-preview img,
.mini-avatar img,
.user-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.avatar-upload-btn{
  height:42px;

  padding:0 16px;

  border-radius:12px;

  background:#f1f5f9;

  border:1px solid #dbe3ef;

  color:#334155;

  font-size:13px;
  font-weight:800;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  transition:.18s ease;
}

.avatar-upload-btn:hover{
  background:#e2e8f0;
}

.mini-avatar,
.user-avatar{
  overflow:hidden !important;
}



/* ===== AVATAR PERFIL VISIBLE FIX ===== */
.profile-avatar-wrap{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  margin:12px 0 18px !important;
}

.profile-avatar-preview{
  width:88px !important;
  height:88px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#2563eb,#8b5cf6) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:28px !important;
  font-weight:900 !important;
  overflow:hidden !important;
  box-shadow:0 14px 30px rgba(37,99,235,.18) !important;
}

.profile-avatar-preview img,
.mini-avatar img,
.user-avatar img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.avatar-upload-btn{
  height:42px !important;
  padding:0 16px !important;
  border-radius:12px !important;
  background:#f1f5f9 !important;
  border:1px solid #dbe3ef !important;
  color:#334155 !important;
  font-size:13px !important;
  font-weight:800 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
}

.avatar-upload-btn:hover{
  background:#e2e8f0 !important;
}

.mini-avatar,
.user-avatar{
  overflow:hidden !important;
}


/* ===== SAFE PROFILE AVATAR ===== */
.profile-avatar-wrap{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  margin:12px 0 18px !important;
}

.profile-avatar-preview{
  width:88px !important;
  height:88px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#2563eb,#8b5cf6) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:28px !important;
  font-weight:900 !important;
  overflow:hidden !important;
  box-shadow:0 14px 30px rgba(37,99,235,.18) !important;
}

.profile-avatar-preview img,
.mini-avatar img,
.user-avatar img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.avatar-upload-btn{
  height:42px !important;
  padding:0 16px !important;
  border-radius:12px !important;
  background:#f1f5f9 !important;
  border:1px solid #dbe3ef !important;
  color:#334155 !important;
  font-size:13px !important;
  font-weight:800 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
}

.avatar-upload-btn:hover{
  background:#e2e8f0 !important;
}

.mini-avatar,
.user-avatar{
  overflow:hidden !important;
}

.employee-card{
  background:#fff;
  border-radius:18px;
  padding:18px;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.employee-left{
  display:flex;
  align-items:center;
  gap:14px;
}

.employee-photo{
  width:58px;
  height:58px;
  border-radius:50%;
  object-fit:cover;
}

.employee-data{
  display:flex;
  flex-direction:column;
}

.employee-data strong{
  font-size:16px;
  color:#111827;
}

.employee-data small{
  color:#6b7280;
  margin-top:2px;
}

.employee-role{
  margin-top:6px;
  font-size:13px;
  font-weight:600;
}

.role-admin{
  color:#dc2626;
}

.role-supervisor{
  color:#2563eb;
}

.role-agent{
  color:#059669;
}

.employee-status{
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
}

.employee-status.active{
  background:#dcfce7;
  color:#166534;
}

.employee-status.inactive{
  background:#fee2e2;
  color:#991b1b;
}
/* ===== DASHBOARD AUTOMATICO REAL ===== */
.real-activity-line{
  display:grid !important;
  grid-template-columns:38px 1fr auto !important;
  align-items:center !important;
  gap:12px !important;
  padding:14px 0 !important;
  border-bottom:1px solid #e5edf5 !important;
}
.real-activity-line:last-child{border-bottom:0 !important;}
.activity-icon-real{
  width:30px !important;height:30px !important;border-radius:10px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  background:#dcfce7 !important;color:#16a34a !important;
}
.activity-icon-real.quote,.activity-icon-real.cotizacion{background:#f3e8ff !important;color:#7c3aed !important;}
.activity-icon-real.task,.activity-icon-real.tarea{background:#fffbeb !important;color:#f59e0b !important;}
.activity-icon-real.status,.activity-icon-real.estatus{background:#dbeafe !important;color:#2563eb !important;}
.real-activity-line b{font-size:14px !important;color:#0f172a !important;}
.real-activity-line p{margin:3px 0 0 !important;color:#55708b !important;font-size:12px !important;line-height:1.25 !important;}
.real-activity-line small{color:#64748b !important;font-size:12px !important;white-space:nowrap !important;}


/* ===== LEADS POR ORIGEN CENTRADO - FINAL ===== */
.real-source-chart{
  width:100% !important;
  min-height:230px !important;
  height:230px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  gap:14px !important;
  padding:0 !important;
  margin:0 !important;

  box-sizing:border-box !important;
  overflow:hidden !important;
  transform:none !important;
}

.real-donut{
  width:112px !important;
  height:112px !important;
  min-width:112px !important;
  max-width:112px !important;
  flex:0 0 112px !important;

  border-radius:50% !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  position:relative !important;
  margin:0 auto !important;
  transform:none !important;
}

.real-donut::after{
  content:"" !important;
  position:absolute !important;
  width:64px !important;
  height:64px !important;
  border-radius:50% !important;
  background:#fff !important;
}

.real-donut > div{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

.real-donut b{
  font-size:22px !important;
  line-height:1 !important;
  color:#0f172a !important;
  font-weight:900 !important;
}

.real-donut span{
  font-size:10px !important;
  color:#64748b !important;
}

.real-source-legend{
  width:205px !important;
  max-width:205px !important;
  min-width:205px !important;

  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;

  margin:0 auto !important;
  padding:0 !important;
  transform:none !important;
  overflow:visible !important;
}

.real-source-legend div{
  width:100% !important;
  display:grid !important;
  grid-template-columns:10px 1fr 40px !important;
  align-items:center !important;
  gap:8px !important;

  color:#0f172a !important;
  font-size:12px !important;
  line-height:1.1 !important;
}

.real-source-legend i{
  width:9px !important;
  height:9px !important;
  border-radius:50% !important;
  display:block !important;
}

.real-source-legend span{
  display:block !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.real-source-legend b{
  color:#64748b !important;
  font-size:12px !important;
  text-align:right !important;
  font-weight:800 !important;
}

/* Centra el contenido dentro de cualquier card que contenga el chart real */
.card:has(.real-source-chart),
[class*="card"]:has(.real-source-chart){
  display:flex !important;
  flex-direction:column !important;
}

.card:has(.real-source-chart) h3,
[class*="card"]:has(.real-source-chart) h3{
  margin-bottom:0 !important;
}

.source-chart-card{
  display:flex !important;
  flex-direction:column !important;
}

.source-chart-card .real-source-chart{
  flex:1 1 auto !important;
}


/* ===== DETALLE LEAD LIMPIO Y PERMISOS ===== */
.chat-panel{
  display:none !important;
}

.quick .q2{
  display:none !important;
}

.clean-wa-btn,
.quick .open-wa{
  width:100% !important;
  height:44px !important;
  border-radius:10px !important;
  background:#06c96f !important;
  color:#fff !important;
  font-weight:800 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  margin-bottom:10px !important;
}

body[data-role="agent"] #detailAssigned,
body[data-role="agent"] .info-row.form-row:has(#detailAssigned){
  display:none !important;
}





/* ===== FIX FINAL BOTÓN WHATSAPP DETALLE ===== */
.detail-wa{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:10px !important;
  background:#06c96f !important;
  color:#ffffff !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  text-decoration:none !important;
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
  box-sizing:border-box !important;
}

.detail-wa i,
.detail-wa svg{
  display:block !important;
  font-size:18px !important;
  width:18px !important;
  height:18px !important;
  line-height:1 !important;
  color:#ffffff !important;
  margin:0 !important;
  padding:0 !important;
  transform:translateX(-9px) !important;
}

/* Por si quedó un ícono viejo renderizado como texto */
.detail-wa{
  font-size:0 !important;
}

.detail-wa i{
  font-size:18px !important;
}