.lead-chat-field-chip::after {
    content: '';
}
/* =========================================================
   CRM Multi-Tenant — Premium UI (Glass + Gradient + Inter)
   v2.2 - Visual Polish Final
   ========================================================= */

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

/* =========================
   VARIABLES & THEMES
   ========================= */
:root {
  --bg-primary: #0f1117;
  --bg-secondary: #1a1d29;
  --bg-tertiary: #252936;
  --bg-card: #1e2130;
  --bg-gradient: linear-gradient(135deg, #0f1117 0%, #1a1d29 100%);
  --bg-glass: rgba(30, 33, 48, 0.95);
  --accent-primary: #6366f1;
  --accent-primary-rgb: 99, 102, 241;
  --accent-secondary: #8b5cf6;
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-danger: #ef4444;
  --accent-danger-rgb: 239, 68, 68;
  --accent-info: #3b82f6;
  --accent-info-rgb: 59, 130, 246;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --border-color: rgba(99, 102, 241, 0.15);
  --border-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.3);
  --border-radius-sm: 6px;
  --border-radius: 10px;
  --border-radius-lg: 14px;
  --border-radius-xl: 20px;
    --scrollbar-track: rgba(99, 102, 241, 0.16);
    --scrollbar-thumb: rgba(99, 102, 241, 0.52);
    --scrollbar-thumb-hover: rgba(99, 102, 241, 0.72);
}
body[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-card: #ffffff;
  --bg-gradient: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  --bg-glass: rgba(255, 255, 255, 0.95);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --border-color: rgba(99, 102, 241, 0.12);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.2);
    --scrollbar-track: rgba(148, 163, 184, 0.35);
    --scrollbar-thumb: rgba(99, 102, 241, 0.45);
    --scrollbar-thumb-hover: rgba(99, 102, 241, 0.6);
}
body.theme-blue {
  --accent-primary: #3b82f6; --accent-secondary: #2563eb; --accent-info: #3b82f6; --accent-info-rgb: 59, 130, 246;
  --border-color: rgba(59, 130, 246, 0.18); --border-gradient: linear-gradient(135deg, #3b82f6, #2563eb); --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.28);
}
body.theme-blue[data-theme="light"] { --border-color: rgba(59, 130, 246, 0.14); --shadow-glow: 0 0 30px rgba(59,130,246,0.18); }
body.theme-green {
  --accent-primary: #22c55e; --accent-secondary: #16a34a; --accent-info: #22c55e; --accent-info-rgb: 34, 197, 94;
  --border-color: rgba(34, 197, 94, 0.18); --border-gradient: linear-gradient(135deg, #22c55e, #16a34a); --shadow-glow: 0 0 30px rgba(34, 197, 94, 0.28);
}
body.theme-green[data-theme="light"] { --border-color: rgba(34, 197, 94, 0.14); --shadow-glow: 0 0 30px rgba(34,197,94,0.18); }

/* --- REGLAS DE VISIBILIDAD POR ROL --- */
body:not(.is-admin) .admin-only { display: none !important; }

/* =========================
   LAYOUT PRINCIPAL
   ========================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
.a11y-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
}
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}
#content-container { flex-grow: 1; overflow: hidden; position: relative; }
main.crm-view, main#superadmin-content {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow-y: auto;
  padding: 32px;
}

body,
main.crm-view,
main#superadmin-content,
.modal-body,
.modal-content,
.lead-detail-panel,
.lead-detail-content,
.lead-chat-panel,
.lead-chat-body,
.leads-list-panel,
.leads-list-wa,
.leads-grid,
.dashboard-grid,
#stats-grid-container,
.kanban-board,
.lead-tags-manager-list-modern,
.lead-tags-checkboxes,
.lead-chat-tags-checkboxes {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

body::-webkit-scrollbar,
main.crm-view::-webkit-scrollbar,
main#superadmin-content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.lead-detail-panel::-webkit-scrollbar,
.lead-chat-panel::-webkit-scrollbar,
.leads-list-wa::-webkit-scrollbar,
.leads-grid::-webkit-scrollbar,
.dashboard-grid::-webkit-scrollbar,
#stats-grid-container::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body::-webkit-scrollbar-track,
main.crm-view::-webkit-scrollbar-track,
main#superadmin-content::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.lead-detail-panel::-webkit-scrollbar-track,
.lead-chat-panel::-webkit-scrollbar-track,
.leads-list-wa::-webkit-scrollbar-track,
.leads-grid::-webkit-scrollbar-track,
.dashboard-grid::-webkit-scrollbar-track,
#stats-grid-container::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 8px;
}

body::-webkit-scrollbar-thumb,
main.crm-view::-webkit-scrollbar-thumb,
main#superadmin-content::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.lead-detail-panel::-webkit-scrollbar-thumb,
.lead-chat-panel::-webkit-scrollbar-thumb,
.leads-list-wa::-webkit-scrollbar-thumb,
.leads-grid::-webkit-scrollbar-thumb,
.dashboard-grid::-webkit-scrollbar-thumb,
#stats-grid-container::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.25s ease;
}

body::-webkit-scrollbar-thumb:hover,
main.crm-view::-webkit-scrollbar-thumb:hover,
main#superadmin-content::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.lead-detail-panel::-webkit-scrollbar-thumb:hover,
.lead-chat-panel::-webkit-scrollbar-thumb:hover,
.leads-list-wa::-webkit-scrollbar-thumb:hover,
.leads-grid::-webkit-scrollbar-thumb:hover,
.dashboard-grid::-webkit-scrollbar-thumb:hover,
#stats-grid-container::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* =========================
   HEADER & NAVIGATION
   ========================= */
.header {
  flex-shrink: 0;
  background: var(--bg-glass);
  backdrop-filter: blur(30px) saturate(180%);
  border-bottom: 1px solid var(--border-color);
  padding: 20px 40px;
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}
.logo { display: flex; align-items: center; gap: 16px; font-size: 22px; font-weight: 800; }
.avatar-logo { width: 44px; height: 44px; border-radius: var(--border-radius-lg); object-fit: cover; background-color: var(--bg-tertiary); border: 1px solid var(--border-color); }
.user-section { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
#navigation-container { display: none; align-items: center; gap: 12px; position: relative; z-index: 1300; }
#navigation-container.is-ready { display: flex; }
.nav-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(320px, 82vw);
    padding: 32px 28px 36px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    background: linear-gradient(165deg, var(--bg-card) 0%, color-mix(in srgb, var(--bg-card) 97%, var(--accent-primary)) 100%);
    border-right: 1px solid var(--border-color);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12), 
                8px 0 48px rgba(0, 0, 0, 0.08);
    transform: translateX(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .32s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity .24s ease;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1300;
}
.navigation { 
    display: flex; 
    flex-direction: column; 
    gap: 10px;
    animation: slideInNav 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s backwards;
}

@keyframes slideInNav {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.nav-utilities { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.nav-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, color-mix(in srgb, var(--bg-tertiary) 95%, var(--accent-primary)) 100%);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    cursor: pointer;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.nav-toggle-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--accent-primary) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .3s ease;
}
.nav-toggle-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb, 99, 102, 241), 0.25);
    transform: translateY(-1px);
}
.nav-toggle-btn:hover::before {
    opacity: 0.08;
}
.nav-toggle-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--accent-rgb, 99, 102, 241), 0.15);
}
.nav-toggle-icon {
    position: relative;
    width: 18px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-toggle-icon span {
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    background: currentColor;
    border-radius: 999px;
    transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle-icon span:nth-child(1) { top: 0; }
.nav-toggle-icon span:nth-child(2) { top: 5px; }
.nav-toggle-icon span:nth-child(3) { bottom: 0; }
.nav-toggle-label {
    display: inline;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-size: 11px;
}
#navigation-container.is-open .nav-toggle-btn {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}
#navigation-container.is-open .nav-toggle-icon span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}
#navigation-container.is-open .nav-toggle-icon span:nth-child(2) {
    opacity: 0;
}
#navigation-container.is-open .nav-toggle-icon span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}
#navigation-container.is-open .nav-panel {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
.nav-panel .navigation .nav-btn-crm { 
    width: 100%;
    position: relative;
    overflow: hidden;
}
.nav-panel .navigation .nav-btn-crm::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3px;
    height: 0;
    background: var(--accent-primary);
    transition: height .25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 2px 2px 0;
}
.nav-panel .navigation .nav-btn-crm:hover::after,
.nav-panel .navigation .nav-btn-crm.active::after {
    height: 100%;
}
.nav-panel .navigation .nav-btn-crm:hover {
    transform: translateX(4px);
    background: linear-gradient(90deg, 
        color-mix(in srgb, var(--accent-primary) 12%, transparent) 0%, 
        transparent 100%);
}
.nav-panel .navigation .nav-btn-crm.active {
    background: linear-gradient(90deg, 
        color-mix(in srgb, var(--accent-primary) 18%, transparent) 0%, 
        color-mix(in srgb, var(--accent-primary) 8%, transparent) 100%);
    border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-color));
}
.nav-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.nav-btn-icon svg {
    width: 100%;
    height: 100%;
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-btn-crm {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding-left: 16px !important;
    padding-right: 16px !important;
    justify-content: flex-start;
}
.nav-btn-label {
    flex: 1;
    text-align: left;
}
.nav-btn-crm:hover .nav-btn-icon svg {
    transform: scale(1.1) rotate(2deg);
}
.nav-btn-crm.active .nav-btn-icon {
    color: var(--accent-primary);
}
.nav-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, 
                rgba(99, 102, 241, 0.08) 0%, 
                rgba(15, 23, 42, 0.45) 40%,
                rgba(15, 23, 42, 0.52) 100%);
    backdrop-filter: blur(8px) saturate(120%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1200;
}
#navigation-container.is-open .nav-overlay {
    opacity: 1;
    pointer-events: auto;
}

#nav-utilities-container[hidden] {
    display: none;
}

#nav-utilities-container {
    flex: 0 1 auto;
    display: none;
}

#nav-utilities-container.is-ready {
    display: flex;
}

.nav-utilities .notifications-wrapper,
.nav-utilities .theme-switcher,
.nav-utilities .theme-picker-wrapper {
    display: flex;
    align-items: center;
}

.nav-utilities .theme-picker-wrapper {
    gap: 10px;
}

.nav-utility-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.nav-utility-btn svg {
    width: 16px;
    height: 16px;
}
.nav-utility-btn:hover,
.nav-utility-btn:focus-visible {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 14%, transparent);
    outline: none;
}
.nav-utility-btn:active {
    transform: translateY(1px);
}

@media (max-width: 1180px) {
    .header { flex-wrap: wrap; gap: 20px; }
    .user-section { width: 100%; justify-content: flex-end; }
    #nav-utilities-container.is-ready { width: 100%; }
}

@media (max-width: 768px) {
    .header { padding: 16px 24px; }
    #nav-utilities-container.is-ready { justify-content: flex-start; }
}

@media (max-width: 600px) {
    .logo { font-size: 18px; }
    .nav-panel { width: min(360px, 90vw); }
}

@media (max-width: 480px) {
    .notifications-dropdown {
        width: min(320px, calc(100vw - 40px));
        right: 50%;
        transform: translateX(50%);
    }
    #nav-utilities-container.is-ready {
        justify-content: space-between;
    }
}
.avatar-img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-primary); }
.theme-switcher { display: flex; align-items: center; gap: 10px; color: var(--text-muted); }
.theme-switcher svg { width: 20px; height: 20px; }
#theme-switch-crm { display: none; }
.switch-label { display: block; width: 52px; height: 28px; background: var(--bg-tertiary); border-radius: 14px; position: relative; cursor: pointer; border: 2px solid var(--border-color); transition: all .3s ease; }
.switch-label::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--text-muted); border-radius: 50%; transition: all .3s ease; }
#theme-switch-crm:checked + .switch-label { background: var(--accent-primary); border-color: var(--accent-primary); }
#theme-switch-crm:checked + .switch-label::after { transform: translateX(24px); background: #ffffff; }
.theme-picker-wrapper { position: relative; display: flex; align-items: center; padding: 6px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-card); }
.theme-picker-wrapper .picker-label { font-size: 12px; color: var(--text-muted); margin: 0 8px; cursor: default; }
.theme-dots-container { display: flex; gap: 8px; max-width: 0; overflow: hidden; transition: max-width 0.3s ease-in-out, margin-left 0.3s ease-in-out; margin-left: 0; }
.theme-picker-wrapper:hover .theme-dots-container { max-width: 100px; margin-left: 8px; }
.theme-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .15s; flex-shrink: 0; }
.theme-dot:hover { transform: scale(1.1); }
.theme-dot[data-theme="purple"] { background: #7c3aed; border-color: rgba(124,58,237,.25); }
.theme-dot[data-theme="blue"]   { background: #2563eb; border-color: rgba(37,99,235,.25); }
.theme-dot[data-theme="green"]  { background: #16a34a; border-color: rgba(22,163,74,.25); }
#impersonation-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgba(var(--accent-warning-rgb, 245, 158, 11), 0.1); /* Usando variables si existen */
    color: var(--accent-warning, #f59e0b);
    padding: 6px 12px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--accent-warning, #f59e0b);
    font-size: 13px;
    font-weight: 500;
}

#back-to-superadmin-btn {
    padding: 4px 10px; /* Hacemos el botón un poco más pequeño */
    font-size: 11px;
}

/* =========================
   AUTH & GENERAL COMPONENTS
   ========================= */
#auth-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 20px;
  background: var(--bg-gradient);
}
.kanban-board {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 24px 4px;
    height: calc(100vh - 200px);
    max-height: calc(100vh - 250px);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
  
  /* --- NUEVAS REGLAS --- */
  /* Usamos flexbox para organizar el contenido verticalmente */
  display: flex;
  flex-direction: column;
  gap: 24px; /* Espacio entre el título, el formulario y el mensaje de error */
}
.login-title {
    height: 100%;
    max-height: 100%;
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  /* El margin-bottom ya no es necesario gracias al 'gap' del contenedor */
  margin-bottom: 0; 
  background: var(--border-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#loginForm {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px; /* Espacio entre los campos de usuario, contraseña y el botón */
}
.form-group { display: flex; flex-direction: column; gap: 10px; }
.form-group.full-width { grid-column: 1 / -1; }
.assign-to-list { display: grid; gap: 10px; max-height: 220px; overflow-y: auto; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-tertiary); }
.assign-to-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--border-radius-sm); background: rgba(255, 255, 255, 0.02); border: 1px solid transparent; transition: border-color .2s ease, background-color .2s ease; font-size: 14px; color: var(--text-secondary); }
.assign-to-item:hover { border-color: var(--accent-primary); background: rgba(99, 102, 241, 0.08); }
.assign-to-item input { accent-color: var(--accent-primary); width: 18px; height: 18px; }
.assign-to-text { display: flex; flex-direction: column; line-height: 1.2; }
.assign-to-name { font-weight: 600; color: var(--text-primary); }
.assign-to-role { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--accent-primary); background: rgba(99, 102, 241, 0.12); border-radius: 999px; padding: 2px 8px; width: fit-content; margin-top: 4px; }
label { font-size: 13px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .8px; }
input, select, textarea { padding: 16px 20px; background: var(--bg-tertiary); border: 2px solid var(--border-color); border-radius: var(--border-radius-lg); color: var(--text-primary); font-size: 15px; font-family: inherit; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 20%, transparent); }
textarea { min-height: 100px; resize: vertical; }
.btn { padding: 16px 32px; border: none; border-radius: var(--border-radius-lg); font-size: 14px; font-weight: 700; cursor: pointer; transition: all .3s ease; text-transform: uppercase; }
.btn-primary { background: var(--border-gradient); color: #fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 40px color-mix(in srgb, var(--accent-primary) 50%, transparent); }
.btn-secondary { background: var(--bg-tertiary); color: var(--text-secondary); border: 2px solid var(--border-color); }
.btn-secondary:hover { background: var(--bg-card); color: var(--text-primary); border-color: var(--accent-primary); transform: translateY(-2px); }
.btn-danger { background: transparent; color: var(--accent-danger); border: 2px solid var(--accent-danger); }
.btn-danger:hover { background: var(--accent-danger); color: #fff; }
.btn-small { padding: 10px 20px; font-size: 12px; }
.card-title { font-size: 20px; font-weight: 700; margin-bottom: 28px; }
.collapsible-title { cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; margin-bottom: 0 !important; }
.collapsible-title.expanded { margin-bottom: 28px !important; }
.toggle-icon { font-size: 28px; font-weight: 300; transition: transform .3s; }
.collapsible-title.expanded .toggle-icon { transform: rotate(45deg); }
.collapsible-content { max-height: 0; overflow: hidden; opacity: 0; padding: 0 4px; transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease; }
.collapsible-content.expanded { opacity: 1; padding: 12px 4px 0; }
main > .dashboard > h2.card-title, main > .kanban-header, main > .tasks-header h2 { font-size: 28px; font-weight: 800; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.kanban-header h2.card-title { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* =========================
   DASHBOARD VIEW
   ========================= */
/* Estilo general para los paneles de la izquierda en el dashboard */
.left-panel .form-card,
.left-panel .filters-card {
    background: transparent; /* Quitamos el fondo glassmorphism */
    border: none;
    box-shadow: none;
    padding: 0; /* Quitamos el padding para un control total */
}

/* Estilo para los títulos colapsables */
.left-panel .collapsible-title {
    background: var(--bg-card);
    padding: 20px 24px;
    border-radius: var(--border-radius-xl);
    border: 1px solid var(--border-color);
    margin-bottom: 0 !important;
    transition: all 0.2s ease-in-out;
}
.left-panel .collapsible-title:hover {
    border-color: var(--accent-primary);
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
}

.left-panel .collapsible-title.expanded {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Estilo para el contenido colapsable */
.left-panel .collapsible-content {
    background: var(--bg-card);
    padding: 24px;
    border: 1px solid var(--border-color);
    border-top: none;
    border-bottom-left-radius: var(--border-radius-xl);
    border-bottom-right-radius: var(--border-radius-xl);
    margin-top: -1px; /* Para solapar el borde */
}
.dashboard-grid { display: grid; grid-template-columns: 420px 1fr; gap: 32px; }
.form-card, .filters-card { background: var(--bg-glass); backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--border-color); border-radius: var(--border-radius-xl); padding: 32px; box-shadow: var(--shadow-md); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
#leadForm-crm .form-grid,
#dynamic-form-fields-container-crm {
    grid-template-columns: 1fr; /* Una sola columna para un look más limpio */
    gap: 16px;
}

#filters-content-crm {
    gap: 18px; /* Espaciado ajustado */
}
.search-box, .date-filter-group { display: flex; flex-direction: column; gap: 10px; }
.filters-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.leads-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.lead-item { background: var(--bg-glass); border: 1px solid var(--border-color); border-radius: var(--border-radius-xl); padding: 18px; cursor: pointer; transition: all .3s ease; }
.lead-item:hover { border-color: var(--accent-primary); box-shadow: var(--shadow-glow); transform: translateY(-4px); }

/* =========================
   LEADS 3 PANELS (Layout de Chat Mejorado)
   ========================= */

#view-leads {
    padding: 0;
    overflow: hidden;
    height: 100%;
}

.leads-view-container {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
}

/* --- Panel de Lista (Izquierda) --- */
.leads-list-panel {
    flex: 0 0 380px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    height: 100%;
    overflow: hidden;
    position: relative;
}
.leads-list-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.leads-header-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.leads-header-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.leads-header-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    min-width: 0;
    line-height: 1;
}
.leads-filter-btn--compact {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    padding: 0;
    gap: 0;
}
.leads-filter-btn--compact svg {
    width: 18px;
    height: 18px;
}
.leads-filter-btn--compact .filter-badge {
    position: absolute;
    top: -4px;
    right: -4px;
}
.leads-inline-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
    background: transparent;
    transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    width: 100%;
}
.leads-inline-search svg {
    width: 16px;
    height: 16px;
    color: color-mix(in srgb, var(--text-secondary) 80%, transparent);
}
.leads-inline-search input {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    min-width: 0;
    padding: 0;
    flex: 1;
}
.leads-inline-search input::placeholder {
    color: color-mix(in srgb, var(--text-muted) 80%, transparent);
}
.leads-inline-search:hover {
    border-bottom-color: color-mix(in srgb, var(--text-secondary) 25%, transparent);
}
.leads-inline-search:focus-within {
    border-bottom-color: var(--accent-primary);
}
.leads-inline-search input:focus {
    outline: none;
}
.leads-load-more-trigger {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 16px 8px 24px;
    color: var(--text-muted);
    font-size: 13px;
}
.leads-load-more-trigger .btn {
    min-width: 160px;
}
.leads-load-more-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 13px;
}
.leads-load-more-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
    border-top-color: transparent;
    animation: leads-load-spin 0.8s linear infinite;
}
.leads-load-more-hint,
.leads-load-more-summary {
    color: color-mix(in srgb, var(--text-secondary) 70%, transparent);
    font-size: 12px;
}
.leads-load-more-summary {
    padding: 12px 0 24px;
    text-align: center;
}
@keyframes leads-load-spin {
    to { transform: rotate(360deg); }
}

.leads-mini-navbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--bg-card) 92%, var(--bg-tertiary));
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    font-size: 12px;
    color: var(--text-secondary);
}

.leads-mini-navbar__count {
    font-weight: 600;
    color: var(--text-primary);
}

.leads-mini-navbar__status {
    font-size: 11px;
    color: color-mix(in srgb, var(--text-secondary) 78%, transparent);
}

.leads-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-card) 80%, transparent);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

.leads-loading-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.leads-loading-overlay__content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--border-radius-lg);
    background: color-mix(in srgb, var(--bg-card) 96%, transparent);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    font-size: 13px;
}

.leads-loading-overlay__spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent-primary) 52%, transparent);
    border-top-color: transparent;
    animation: leads-load-spin 0.8s linear infinite;
}
#leads-tag-filter-wrapper { 
    position: relative;
    overflow: visible;
}
.tag-filter-trigger-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    min-width: 180px;
    padding: 6px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.tag-filter-trigger-button:hover,
.tag-filter-trigger-button:focus-visible {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 15%, transparent);
    outline: none;
}
.tag-filter-trigger-button::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    margin-left: 6px;
    transition: transform 0.2s ease;
}
.tag-filter-trigger-button[data-tag-filter-open="true"]::after {
    transform: rotate(-135deg);
}
.tag-filter-trigger-button[data-tag-filter-open="true"],
.tag-filter-trigger-button[data-tag-filter-has-selection="true"] {
    border-color: var(--accent-primary);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-card) 85%, var(--accent-primary));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}
.tag-filter-summary {
    flex: 1;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tag-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.tag-filter-trigger-button[data-tag-filter-has-selection="false"] .tag-filter-count {
    display: none;
}
.lead-tag-filter-popover {
    position: fixed;
    width: min(380px, calc(100vw - 32px));
    max-height: min(520px, calc(100vh - 80px));
    overflow: visible;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 1000;
    opacity: 0;
    transform: translateX(-12px);
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}
.lead-tag-filter-popover.is-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.lead-tag-filter-popover.align-left {
    transform: translateX(12px);
}
.lead-tag-filter-popover.align-left.is-visible {
    transform: translateX(0);
}
.lead-tag-filter-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}
.lead-tag-filter-popover-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.lead-tag-filter-popover-title::before {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--border-gradient);
    border-radius: 2px;
}
.tag-filter-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.tag-filter-close-btn:hover {
    border-color: var(--accent-danger);
    color: var(--accent-danger);
    background: color-mix(in srgb, var(--accent-danger) 10%, transparent);
    transform: scale(1.05);
}
.lead-tag-filter-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tag-filter-action-btn {
    appearance: none;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: var(--border-radius);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    min-width: fit-content;
}
.tag-filter-action-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-tertiary));
    transform: translateY(-1px);
}
.tag-filter-action-btn.is-active {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}
.tag-filter-action-btn.is-primary {
    background: var(--border-gradient);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}
.tag-filter-action-btn.is-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-primary) 40%, transparent);
}
.lead-tag-filter-checkboxes {
    margin-right: 0 !important;
    padding: 0;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: clamp(280px, 50vh, 380px);
    overflow-y: auto;
}
.lead-tag-filter-checkboxes .tag-filter-empty-state {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-secondary);
    margin-top: 4px;
}
.tag-filter-checkbox-item {
    padding: 12px 14px;
    border-radius: var(--border-radius);
    border: 1px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}
.tag-filter-checkbox-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}
.tag-filter-checkbox-item input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}
.tag-filter-checkbox-item:has(input:checked) {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-card));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}
.tag-filter-checkbox-item .lead-tag-checkbox-label {
    font-weight: 500;
}
.lead-tag-filter-footer {
    display: flex;
    justify-content: stretch;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}
.lead-tag-filter-footer .tag-filter-action-btn {
    flex: 1;
}

/* =========================================================
   PANEL LATERAL DE FILTROS
   ========================================================= */
.leads-filter-floating-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--border-gradient);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
}
.leads-filter-floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.3);
}
.leads-filter-floating-btn:active {
    transform: scale(0.95);
}
.leads-filter-floating-btn svg {
    width: 24px;
    height: 24px;
}
.filter-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.leads-filter-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 380px;
    height: 100vh;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.leads-filter-sidebar.is-open {
    transform: translateX(0);
}
.leads-filter-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 998;
}
.leads-filter-sidebar-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.leads-filter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--border-radius-lg);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.leads-filter-btn:hover,
.leads-filter-btn:focus-visible {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 16%, transparent);
    outline: none;
}
.leads-filter-btn:active {
    transform: translateY(1px);
}
.leads-filter-btn svg {
    width: 18px;
    height: 18px;
}
.leads-filter-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.leads-filter-sidebar-header h2 {
    font-size: 20px;
    top: -6px;
    right: -6px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.leads-filter-sidebar-header h2::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--border-gradient);
    border-radius: 2px;
}
.filter-sidebar-close-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.filter-sidebar-close-btn:hover {
    border-color: var(--accent-danger);
    color: var(--accent-danger);
    background: color-mix(in srgb, var(--accent-danger) 10%, transparent);
    transform: rotate(90deg);
}
.filter-sidebar-close-btn svg {
    width: 20px;
    height: 20px;
}
.leads-filter-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.filter-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.field-filter-active-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.field-filter-active-list:empty::before {
    content: 'No hay filtros de campo aplicados.';
    font-size: 12px;
    color: var(--text-tertiary);
}
.field-filter-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-tertiary) 80%, transparent);
    font-size: 13px;
    color: var(--text-primary);
}
.field-filter-chip strong {
    font-weight: 700;
    color: var(--text-secondary);
}
.field-filter-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 8px;
    border: none;
    border-radius: var(--border-radius-sm, 6px);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.field-filter-chip button:hover {
    background: color-mix(in srgb, var(--accent-primary) 20%, var(--bg-secondary));
    color: var(--accent-primary);
}
.field-filter-chip button:focus {
    outline: 2px solid color-mix(in srgb, var(--accent-primary) 60%, transparent);
    outline-offset: 2px;
}
.filter-sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.filter-sidebar-label-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
}
.filter-sidebar-description {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.filter-sidebar-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: block;
}
.selection-toggle-control {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.selection-toggle-control input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
}
.selection-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}
.selection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.selection-counter {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}
.sidebar-advanced-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.advanced-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.advanced-action-btn svg {
    width: 18px;
    height: 18px;
}
.advanced-action-btn:hover {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-tertiary));
    transform: translateY(-1px);
}
.advanced-action-btn:active {
    transform: translateY(0);
}
.advanced-actions-hint {
    font-size: 12px;
    color: var(--text-tertiary);
}
.leads-advanced-modal {
    background: var(--bg-card);
    width: min(580px, calc(100vw - 32px));
    max-height: min(85vh, 620px);
    border-radius: var(--border-radius-xl);
    box-shadow: 0 18px 40px rgba(15, 17, 23, 0.32);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}
@media (max-width: 540px) {
    .leads-advanced-modal {
        width: calc(100vw - 16px);
        max-height: 90vh;
    }
    .leads-advanced-modal-body {
        padding: 14px;
    }
    .leads-advanced-modal-footer {
        padding: 12px 16px 16px;
    }
}
.leads-advanced-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: inherit;
    overflow: hidden;
}
.leads-advanced-modal-body {
    flex: 1 1 auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    min-height: 0;
}
.advanced-modal-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    border-radius: var(--border-radius-lg);
    padding: 12px 14px;
}
.advanced-summary-count {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.advanced-summary-number {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-primary);
}
.advanced-summary-label {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
}
.advanced-summary-description {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.advanced-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.advanced-summary-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 12px;
    color: var(--text-secondary);
}
.summary-item-label {
    font-weight: 600;
    color: var(--text-primary);
}
.summary-item-value {
    color: var(--text-secondary);
}
.advanced-summary-empty {
    font-size: 12px;
    color: var(--text-tertiary);
}
.advanced-modal-config {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.advanced-option-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: var(--border-radius-lg);
    background: var(--bg-card);
}
.advanced-option-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.advanced-option-subtitle {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.advanced-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.advanced-checkbox-grid--tags { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.advanced-checkbox-grid--assign { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.advanced-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--border-radius);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.advanced-checkbox input {
    accent-color: var(--accent-primary);
    cursor: pointer;
    width: 16px;
    height: 16px;
}
.advanced-checkbox:hover {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-card));
    transform: translateY(-1px);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}
.advanced-checkbox.is-checked {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-card));
    box-shadow: 0 3px 12px color-mix(in srgb, var(--accent-primary) 16%, transparent);
}
.advanced-checkbox.is-partial {
    border-color: color-mix(in srgb, var(--accent-warning) 45%, var(--border-color));
    background: color-mix(in srgb, var(--accent-warning) 12%, var(--bg-card));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-warning) 18%, transparent);
}
.advanced-checkbox.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}
.advanced-field-manager {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.advanced-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.advanced-field-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.advanced-field-select {
    width: 100%;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.advanced-field-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}
.advanced-field-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.advanced-field-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.advanced-field-toggle input {
    accent-color: var(--accent-primary);
}
.advanced-field-toggle.is-active {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary));
    color: var(--text-primary);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}
.advanced-field-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.advanced-field-input input,
.advanced-field-input select,
.advanced-field-input textarea {
    width: 100%;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
}
.advanced-field-input textarea {
    min-height: 80px;
    resize: vertical;
}
.advanced-field-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.advanced-field-summary-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10.5px;
    color: var(--text-secondary);
}
.advanced-field-summary-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.advanced-field-summary-list li.is-muted {
    color: var(--text-tertiary);
}
.advanced-field-summary-value {
    font-weight: 600;
    color: var(--text-primary);
}
.advanced-field-summary-count {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}
.advanced-checkbox--stacked {
    align-items: stretch;
    gap: 10px;
}
.advanced-checkbox--inline {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    background: color-mix(in srgb, var(--accent-danger) 6%, transparent);
    border: 1px dotted color-mix(in srgb, var(--accent-danger) 28%, transparent);
    padding: 8px 10px;
}
.advanced-checkbox--inline span {
    font-size: 11px;
}
.advanced-checkbox--muted {
    background: var(--bg-secondary);
    border-style: dashed;
}
.advanced-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tag-color, var(--accent-primary)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag-color, var(--accent-primary)) 35%, transparent);
}
.advanced-tag-pill .advanced-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tag-color, var(--accent-primary));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tag-color, var(--accent-primary)) 20%, transparent);
}
.advanced-tag-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}
.advanced-tag-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.advanced-tag-summary-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.advanced-tag-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tag-color, var(--accent-primary)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag-color, var(--accent-primary)) 32%, transparent);
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
}
.advanced-tag-summary-pill.is-muted {
    background: var(--bg-secondary);
    border-style: dashed;
    color: var(--text-tertiary);
}
.advanced-tag-summary-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tag-color, var(--accent-primary));
}
.advanced-tag-summary-name { color: var(--text-primary); font-weight: 600; }
.advanced-tag-summary-count { color: var(--text-tertiary); font-size: 9.5px; }
.advanced-assignee-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.advanced-assignee-summary-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.advanced-assignee-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px 2px 4px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 32%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    font-size: 10px;
    color: var(--text-secondary);
}
.advanced-assignee-chip.is-unassigned {
    border-style: dashed;
    background: var(--bg-secondary);
    color: var(--text-tertiary);
}
.advanced-assignee-chip-initial {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.advanced-assignee-chip.is-unassigned .advanced-assignee-chip-initial {
    background: transparent;
    color: var(--text-tertiary);
    border: 1px solid color-mix(in srgb, var(--text-tertiary) 40%, transparent);
}
.advanced-assignee-chip-name { font-weight: 600; color: var(--text-primary); }
.advanced-assignee-chip-count { font-size: 9.5px; color: var(--text-tertiary); }
.advanced-assignee-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.advanced-assignee-initial {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-primary) 80%, transparent);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.advanced-assignee-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.advanced-assignee-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.advanced-assignee-option-meta {
    font-size: 10px;
    color: var(--accent-primary);
    font-weight: 500;
}
.advanced-assignee-option-meta.is-muted {
    color: var(--text-tertiary);
}
.advanced-empty-state {
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 16px;
    border-radius: var(--border-radius-lg);
    background: var(--bg-tertiary);
    border: 1px dashed var(--border-color);
    text-align: center;
}
.advanced-hint {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.4;
}
.advanced-modal-warning {
    font-size: 11px;
    color: var(--accent-danger);
    background: color-mix(in srgb, var(--accent-danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-danger) 30%, transparent);
    border-radius: var(--border-radius);
    padding: 10px 12px;
    line-height: 1.4;
}
.leads-advanced-modal-footer {
    display: flex;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
    justify-content: flex-end;
    flex-shrink: 0;
}
.leads-sidebar-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.leads-sidebar-date-range input {
    flex: 1;
}
.sidebar-tag-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sidebar-tag-search-input {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sidebar-tag-search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}
.sidebar-tag-checkbox-item {
    padding: 12px 14px;
    border-radius: var(--border-radius);
    border: 1px solid transparent;
    background: var(--bg-tertiary);
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
}
.sidebar-tag-checkbox-item:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
.sidebar-tag-checkbox-item input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}
.sidebar-tag-checkbox-item:has(input:checked) {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-card));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}
.sidebar-tag-checkbox-item .tag-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sidebar-tag-checkbox-item .lead-tag-checkbox-label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.sidebar-tag-empty-state {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 16px;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-secondary);
    display: none;
}
.leads-filter-sidebar-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn-condensed { padding: 6px 10px; font-size: 12px; }
.leads-list-header h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
    background: var(--border-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.search-box-wa { position: relative; }
.search-box-wa input {
    width: 100%;
    padding-left: 40px;
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--bg-tertiary);
    font-size: 13px;
}
.search-box-wa::before {
    content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' /%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; pointer-events: none; z-index: 1;
}
.leads-list-wa { overflow-y: auto; flex-grow: 1; position: relative; }
.leads-list-wa.has-selection-mode { padding-top: 2px; }
.lead-selection-banner {
    background: rgba(var(--accent-primary-rgb, 59, 130, 246), 0.08);
    border: 1px solid rgba(var(--accent-primary-rgb, 59, 130, 246), 0.18);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 0 12px 0;
}
.lead-selection-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.lead-selection-banner-actions {
    display: flex;
    gap: 8px;
}
.lead-selection-banner-actions .btn + .btn {
    margin-left: 0;
}
.lead-selection-banner-actions .btn {
    white-space: nowrap;
}
.lead-row {
    padding: 12px 16px; border-bottom: 1px solid var(--border-color); cursor: pointer;
    transition: all 0.2s ease; display: flex; gap: 12px; position: relative;
}
.lead-row.lead-row--selection-mode { padding-left: 14px; }
.lead-row::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--accent-primary); opacity: 0; transition: opacity 0.2s ease;
}
.lead-row:hover { background: var(--bg-tertiary); }
.lead-row.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 15%, transparent) 0%, transparent 100%);
    border-left: 3px solid var(--accent-primary);
    padding-left: 15px;
}
.lead-row.active::before { opacity: 1; }
.lead-row.is-selected {
    box-shadow: inset 0 0 0 2px rgba(var(--accent-primary-rgb, 59, 130, 246), 0.22);
    background: linear-gradient(90deg, rgba(var(--accent-primary-rgb, 59, 130, 246), 0.12) 0%, transparent 100%);
}
.lead-row span { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.lead-row.active span { color: var(--accent-primary); }
.lead-row small { font-size: 12px; color: var(--text-muted); }
.lead-row.active small { color: var(--text-secondary); }
.lead-row-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lead-row-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.lead-row .lead-row-meta { font-size: 12px; color: var(--text-muted); }
.lead-row .lead-row-timestamp { font-size: 11px; color: var(--text-secondary); margin-left: auto; white-space: nowrap; }
.lead-row--has-unread { background: var(--bg-tertiary); border-left: 3px solid var(--accent-danger); }
.lead-row-unread-badge { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; margin-left: 6px; flex-shrink: 0; animation: pulse-unread 1.5s ease-in-out infinite; }
.lead-row-unread-badge svg { width: 100%; height: 100%; color: var(--accent-danger); filter: drop-shadow(0 0 4px rgba(var(--accent-danger-rgb), 0.7)); }
.lead-row-select {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    flex-shrink: 0;
}
.lead-row-select input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.lead-row:not(.lead-row--selection-mode) .lead-row-select { display: none; }
.lead-row.is-selected .lead-row-select input[type="checkbox"] {
    accent-color: var(--accent-primary);
}
@keyframes pulse-unread { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.85; } }
.lead-row-info-group { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; align-items: center; }
.lead-row-info-group > .lead-row-assignees,
.lead-row-info-group > .lead-row-fields,
.lead-row-info-group > .lead-row-tags { margin-top: 0; }
.lead-row-assignees { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.lead-row-fields { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.lead-row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.lead-item-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.lead-item-fields { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.lead-item-assignees { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kanban-card-fields { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 1px; }
.kanban-card-assignees { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.lead-field-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 11px 3px 20px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-info-rgb, 59, 130, 246), 0.22);
    background: rgba(var(--accent-info-rgb, 59, 130, 246), 0.12);
    color: var(--accent-info, #3b82f6);
    line-height: 1.25;
    position: relative;
    max-width: 210px;
    white-space: normal;
    word-break: break-word;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lead-field-chip::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 50%;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='1.5' width='13' height='13' rx='2.5' ry='2.5' fill='%233b82f6' fill-opacity='0.15' stroke='%233b82f6' stroke-width='1.2'/%3E%3Cpath d='M4.5 5.75h7M4.5 8h7M4.5 10.25h4.5' stroke='%233b82f6' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50%);
    opacity: 0.9;
}
.lead-field-chip--compact {
    padding: 2px 9px 2px 20px;
    font-size: 9.5px;
    max-width: 190px;
}
.lead-field-chip:hover {
    background: rgba(var(--accent-info-rgb, 59, 130, 246), 0.18);
    border-color: rgba(var(--accent-info-rgb, 59, 130, 246), 0.38);
}

.lead-assignee-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 6px;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
    color: var(--accent-primary);
    line-height: 1.2;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.lead-assignee-chip:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 22%, transparent);
}
.lead-assignee-chip-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.lead-assignee-chip-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lead-assignee-chip--unassigned {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--text-muted) 35%, transparent);
    background: color-mix(in srgb, var(--bg-tertiary) 85%, transparent);
    color: var(--text-muted);
}
.lead-assignee-chip--unassigned .lead-assignee-chip-avatar {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid color-mix(in srgb, var(--text-muted) 45%, transparent);
}
.lead-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--chip-border, var(--accent-primary)) 70%, transparent);
    background: color-mix(in srgb, var(--chip-border, var(--accent-primary)) 8%, transparent);
    color: var(--chip-text, var(--accent-primary));
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lead-tag-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chip-border, var(--accent-primary));
}
.lead-tag-chip.is-compact { font-size: 9.5px; padding: 2px 6px 2px 5px; gap: 3px; }
.lead-tag-chip:hover {
    border-color: color-mix(in srgb, var(--chip-border, var(--accent-primary)) 85%, white);
    background: color-mix(in srgb, var(--chip-border, var(--accent-primary)) 12%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--chip-border, var(--accent-primary)) 18%, transparent);
}
/* --- Panel de Detalle (Centro) --- */
.lead-detail-panel {
    order: 3;
    flex: 0 0 320px;
    min-width: 300px;
    border-left: 1px solid var(--border-color);
    border-right: none;
    padding: 20px;
    overflow-y: auto; height: 100%; background: var(--bg-primary);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.lead-detail-panel::-webkit-scrollbar { width: 8px; }
.lead-detail-panel::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.lead-detail-panel::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.lead-detail-panel::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
.lead-detail-placeholder { 
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    height: 100%; text-align: center; color: var(--text-muted); 
}
.lead-detail-placeholder svg { 
    width: 100px; height: 100px; margin-bottom: 32px; stroke-width: 1; 
    opacity: .3; filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.2));
}
.lead-detail-header { 
    margin-bottom: 20px; 
    position: relative; 
    background: linear-gradient(135deg, var(--bg-card) 0%, color-mix(in srgb, var(--bg-card) 95%, var(--accent-primary)) 100%);
    padding: 18px; 
    border-radius: 12px; 
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent); 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.lead-detail-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lead-detail-header-actions { display: flex; gap: 8px; align-items: center; }
.lead-detail-identifiers { display: flex; flex-direction: column; gap: 6px; padding-right: 12px; }
.lead-detail-header .edit-lead-btn { padding: 6px 12px; font-size: 11px; }
.lead-detail-header h2 { 
    font-size: 20px; 
    font-weight: 700; 
    margin-bottom: 6px; 
    color: var(--text-primary);
    line-height: 1.2;
}
.lead-detail-header p { 
    font-size: 13px; 
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.lead-detail-header p::before {
    content: '📞';
    font-size: 14px;
}
.lead-detail-tags { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.lead-detail-tags-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lead-detail-tags-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lead-detail-tags .detail-section-title { margin: 0; padding-bottom: 0; border-bottom: none; }
.lead-tags-list { display: flex; flex-wrap: wrap; gap: 8px; }
.lead-tags-empty { font-size: 12px; color: var(--text-muted); }
.lead-metadata { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
    gap: 8px; 
    margin-bottom: 18px; 
    padding: 14px; 
    background: var(--bg-secondary); 
    border-radius: 10px; 
    border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}
.detail-section-title { 
    font-size: 11px; 
    font-weight: 700; 
    color: var(--accent-primary); 
    margin: 18px 0 12px; 
    text-transform: uppercase; 
    letter-spacing: 0.16em; 
    padding-bottom: 8px; 
    border-bottom: 2px solid var(--accent-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.detail-section-title::before {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--accent-primary);
    border-radius: 2px;
}
.lead-detail-grid { 
    display: grid; 
    grid-template-columns: 1fr;
    gap: 10px; 
}
.lead-detail-separator {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--border-color) 50%, transparent 100%);
    margin: 16px 0;
    opacity: 0.5;
}
.detail-item { 
    background: var(--bg-card); 
    padding: 14px; 
    border-radius: 8px; 
    border: 1px solid var(--border-color); 
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.detail-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--accent-primary);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.detail-item:hover { 
    border-color: var(--accent-primary); 
    transform: translateX(2px); 
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.detail-item:hover::before {
    opacity: 1;
}
.detail-item .label { 
    font-size: 10px; 
    color: var(--text-muted); 
    margin-bottom: 6px; 
    text-transform: uppercase; 
    font-weight: 700; 
    letter-spacing: 0.12em;
    display: flex;
    align-items: center;
    gap: 4px;
}
.detail-item .value { 
    font-size: 14px; 
    font-weight: 600; 
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}
.lead-tags-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    max-height: clamp(220px, 40vh, 320px);
    overflow-y: auto;
    padding-right: 4px;
    margin-right: -4px;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-gutter: stable;
}
.lead-tags-checkboxes::-webkit-scrollbar {
    width: 8px;
}
.lead-tags-checkboxes::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
.lead-tags-checkboxes::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.lead-tags-checkboxes::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}
.lead-tag-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.lead-tag-checkbox-item:hover {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-card));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-primary) 16%, transparent);
}
.lead-tag-checkbox-item.is-checked {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-card));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}
.lead-tag-checkbox-item input {
    margin: 0;
    accent-color: var(--accent-primary);
}
.tag-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 12%, transparent);
    flex-shrink: 0;
}
.lead-tag-checkbox-label {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}
.lead-tags-assignment-actions { margin-top: 6px; display: flex; justify-content: flex-end; }
.lead-tags-quick-editor {
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 12px;
    padding: 12px;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: none;
    margin-top: 4px;
}
.lead-tags-quick-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* --- Modal de Etiquetas Modernizado --- */
.lead-tags-modal-modern { max-width: 720px !important; }
.lead-tags-modal-header { 
    background: linear-gradient(135deg, var(--accent-primary) 0%, color-mix(in srgb, var(--accent-primary) 85%, var(--accent-info)) 100%);
    color: white;
    padding: 24px 28px;
    border-bottom: none;
}
.lead-tags-modal-title-wrapper { 
    display: flex; 
    align-items: center; 
    gap: 16px;
}
.lead-tags-modal-icon { 
    width: 32px; 
    height: 32px; 
    flex-shrink: 0;
    opacity: 0.95;
}
.lead-tags-modal-header .card-title { 
    color: white; 
    margin: 0; 
    font-size: 20px;
    font-weight: 700;
}
.lead-tags-modal-subtitle { 
    font-size: 13px; 
    margin: 4px 0 0 0; 
    opacity: 0.92;
    font-weight: 400;
}
.lead-tags-modal-header .close-btn { 
    color: white; 
    opacity: 0.9;
    font-size: 32px;
    width: 32px;
    height: 32px;
}
.lead-tags-modal-header .close-btn:hover { 
    opacity: 1; 
    background: rgba(255, 255, 255, 0.15);
}
.lead-tags-modal-body { 
    padding: 28px; 
    display: flex; 
    flex-direction: column; 
    gap: 28px;
}
.lead-tags-modal-create-section {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.lead-tags-section-title { 
    font-size: 14px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    color: var(--text-secondary); 
    margin: 0 0 16px 0;
}
.lead-tag-form-modern { 
    display: flex; 
    flex-direction: column; 
    gap: 16px;
}
.lead-tag-form-inputs { 
    display: grid; 
    grid-template-columns: 1fr auto; 
    gap: 16px; 
    align-items: end;
}
.form-group-flex { flex: 1; }
.form-group-color { min-width: 160px; }
.color-input-wrapper { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 8px 12px; 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.color-input-wrapper:hover { 
    border-color: var(--accent-primary);
}
.color-input-wrapper input[type="color"] { 
    border: none; 
    width: 32px; 
    height: 32px; 
    border-radius: 6px; 
    cursor: pointer;
}
.color-preview { 
    font-size: 12px; 
    font-weight: 600; 
    color: var(--text-secondary); 
    text-transform: uppercase;
}
.lead-tag-form-actions { 
    display: flex; 
    justify-content: flex-end; 
    gap: 10px; 
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.lead-tag-form-actions .btn svg { 
    width: 18px; 
    height: 18px;
}
.lead-tag-form-actions .btn { 
    display: flex; 
    align-items: center; 
    gap: 6px;
}
.lead-tags-modal-list-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lead-tags-section-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}
.lead-tags-count { 
    background: var(--accent-primary); 
    color: white; 
    padding: 4px 12px; 
    border-radius: 12px; 
    font-size: 12px; 
    font-weight: 700;
}
.lead-tags-manager-list-modern { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    max-height: clamp(260px, 45vh, 420px); 
    overflow-y: auto; 
    padding: 4px 8px 4px 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-gutter: stable;
}
.lead-tags-manager-list-modern::-webkit-scrollbar {
    width: 8px;
}
.lead-tags-manager-list-modern::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
.lead-tags-manager-list-modern::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.lead-tags-manager-list-modern::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}
.lead-tag-manager-item { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 14px; 
    padding: 14px 16px; 
    border: 2px solid var(--border-color); 
    border-radius: 12px; 
    background: var(--bg-card); 
    transition: all 0.2s ease;
}
.lead-tag-manager-item:hover { 
    border-color: var(--accent-primary); 
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); 
    transform: translateY(-2px);
}
.lead-tag-manager-item.is-editing { 
    border-color: var(--accent-primary); 
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 20%, transparent); 
    transform: scale(1.02);
}
.lead-tag-manager-chip { 
    display: flex; 
    align-items: center; 
    gap: 12px;
}
.lead-tag-manager-chip .tag-chip { 
    font-size: 13px; 
    padding: 6px 14px; 
    font-weight: 600;
}
.lead-tag-manager-actions { 
    display: flex; 
    gap: 8px;
}
.lead-tag-manager-actions .btn-icon { 
    padding: 8px; 
    border-radius: 8px; 
    background: var(--bg-secondary); 
    border: 1px solid var(--border-color); 
    transition: all 0.2s ease;
}
.lead-tag-manager-actions .btn-icon:hover { 
    background: var(--accent-primary); 
    border-color: var(--accent-primary); 
    color: white; 
    transform: scale(1.1);
}
.lead-tag-manager-actions .btn-icon.danger:hover { 
    background: var(--accent-danger); 
    border-color: var(--accent-danger);
}
.lead-tags-empty-state { 
    text-align: center; 
    font-size: 14px; 
    color: var(--text-muted); 
    padding: 40px 20px; 
    border: 2px dashed var(--border-color); 
    border-radius: 12px; 
    background: var(--bg-secondary);
}
.lead-tags-manager-list { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    max-height: 260px; 
    overflow-y: auto; 
    padding-right: 4px;
}
.lead-metadata .detail-item { 
    border: none; 
    padding: 10px 12px; 
    background: var(--bg-card);
    border-radius: 8px;
}
.lead-metadata .detail-item .label {
    font-size: 9px;
}
.lead-metadata .detail-item .value {
    font-size: 13px;
}

.lead-panels-resizer {
    display: none;
}

.leads-view-container.detail-panel-collapsed .lead-detail-panel {
    display: none;
}

.leads-view-container.detail-panel-collapsed #lead-panels-resizer {
    display: none;
}

.leads-view-container.detail-panel-collapsed .lead-chat-panel {
    flex: 1 1 auto;
    width: 100%;
}


.lead-activity-section {
    margin-top: 20px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.lead-activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--bg-secondary) 95%, var(--accent-info)) 100%);
    border-bottom: 1px solid var(--border-color);
    gap: 10px;
}
.lead-activity-header h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lead-activity-header h4::before {
    content: '💬';
    font-size: 14px;
}
.lead-activity-body {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
}
.lead-activity-body .activity-feed {
    flex-grow: 1;
    min-height: 220px;
}
.lead-activity-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* --- Panel de Chat (Derecha) --- */
.lead-chat-panel {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    padding: 0;
    background: var(--bg-secondary);
}
.lead-chat-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lead-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
    background: var(--bg-card);
}
.lead-chat-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.lead-chat-tags-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    position: relative;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}
.lead-chat-tags-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
}
.lead-chat-tags-row .lead-chat-tags-toggle {
    align-self: flex-start;
    flex: 0 0 auto;
}
.lead-chat-tags-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.lead-chat-tags-empty {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.3px;
}
.lead-chat-tags-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.lead-chat-tags-group.is-offset {
    margin-left: auto;
    justify-content: flex-end;
}
.lead-chat-fields-inline {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 6px;
}
.lead-chat-field-chip {
    display: inline-flex;
    align-items: center;
    margin-right: 5px;
    padding: 5px 14px 5px 32px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-info-rgb, 59, 130, 246), 0.3);
    background: linear-gradient(135deg,
        rgba(var(--accent-info-rgb, 59, 130, 246), 0.22) 0%,
        rgba(var(--accent-info-rgb, 59, 130, 246), 0.12) 100%);
    color: var(--accent-info, #3b82f6);
    letter-spacing: 0.2px;
    line-height: 1.4;
    max-width: 240px;
    white-space: normal;
    word-break: break-word;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 14px rgba(59, 130, 246, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.lead-chat-field-chip::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='3' ry='3' fill='%233b82f6' fill-opacity='0.18' stroke='%233b82f6' stroke-width='1.2'/%3E%3Cpath d='M4 5.5h8M4 8h8M4 10.5h5' stroke='%233b82f6' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50%);
    opacity: 0.92;
}
.lead-chat-field-chip:hover {
    background: linear-gradient(135deg,
        rgba(var(--accent-info-rgb, 59, 130, 246), 0.3) 0%,
        rgba(var(--accent-info-rgb, 59, 130, 246), 0.18) 100%);
    border-color: rgba(var(--accent-info-rgb, 59, 130, 246), 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px rgba(59, 130, 246, 0.12);
    transform: translateY(-1px);
}
.lead-chat-tags-toggle {
    font-size: 11px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    white-space: nowrap;
}
.lead-chat-tags-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    background: var(--bg-card);
    border-color: var(--text-secondary);
}
.lead-chat-tags-toggle:active {
    transform: translateY(0);
}
.lead-chat-tags-editor {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.15),
        0 8px 20px rgba(0, 0, 0, 0.1),
        0 0 1px rgba(0, 0, 0, 0.1);
    padding: 0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 320px;
    max-width: 380px;
    z-index: 30;
    animation: slideDownFadeIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}
@keyframes slideDownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.lead-chat-tags-editor::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 20px;
    width: 16px;
    height: 16px;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    transform: rotate(45deg);
    z-index: -1;
}
.lead-chat-tags-checkboxes {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 16px;
    background: var(--bg-secondary);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-gutter: stable;
}
.lead-chat-tags-checkboxes::-webkit-scrollbar {
    width: 8px;
}
.lead-chat-tags-checkboxes::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
.lead-chat-tags-checkboxes::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.lead-chat-tags-checkboxes::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}
.lead-chat-tags-checkboxes .lead-tag-checkbox-item {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 6px;
    transition: all 0.15s ease;
    cursor: pointer;
    background: var(--bg-card);
    border: 1.5px solid transparent;
}
.lead-chat-tags-checkboxes .lead-tag-checkbox-item:hover {
    background: color-mix(in srgb, var(--bg-card) 95%, var(--accent-primary));
    border-color: var(--accent-primary);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}
.lead-chat-tags-checkboxes .lead-tag-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}
.lead-chat-tags-checkboxes .lead-tag-checkbox-item:has(input:checked) {
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-card));
    border-color: var(--accent-primary);
}
.lead-chat-tags-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 16px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
}
.lead-chat-tags-actions .btn {
    font-size: 13px;
    padding: 10px 18px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
    flex: 1;
}
.lead-chat-tags-actions .btn-secondary {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
.lead-chat-tags-actions .btn-secondary:hover {
    background: var(--bg-card);
    border-color: var(--text-secondary);
}
.lead-chat-tags-actions .btn-primary {
    background: var(--accent-primary);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}
.lead-chat-tags-actions .btn-primary:hover {
    background: color-mix(in srgb, var(--accent-primary) 90%, black);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
    transform: translateY(-1px);
}
.lead-chat-header .toggle-detail-panel-btn {
    white-space: nowrap;
}
.lead-chat-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.lead-chat-body {
    flex-grow: 1;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    padding: 0;
}
.lead-chat-iframe-wrapper {
    position: relative;
    width: 100%;
    flex-grow: 1;
    min-height: 420px;
}
.lead-chat-iframe-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: var(--bg-secondary);
}
.lead-chat-empty {
    padding: 32px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}
.lead-chat-empty p { margin: 0; }
.lead-chat-panel .lead-detail-placeholder svg { opacity: 0.25; }
.activity-feed {
    flex-grow: 1; overflow-y: auto; padding: 24px;
    display: flex; flex-direction: column-reverse; /* <<< Mantiene los nuevos mensajes abajo */
    gap: 16px; 
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.activity-feed::-webkit-scrollbar { width: 8px; }
.activity-feed::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.activity-feed::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.activity-feed::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
.feed-item { 
    display: flex; align-items: flex-end; gap: 12px; 
    max-width: 80%; animation: fadeInMessage 0.3s ease-out;
}
@keyframes fadeInMessage { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.feed-item.is-self { align-self: flex-end; flex-direction: row-reverse; }
.feed-item-avatar { 
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; 
    background: var(--accent-secondary); color: white; display: flex; 
    align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
    box-shadow: var(--shadow-sm); border: 2px solid var(--bg-secondary);
}
.feed-item.is-self .feed-item-avatar { background: var(--accent-primary); }
.feed-item-content { 
    padding: 14px 20px; /* Aumentamos el padding para más aire */
    border: 1px solid var(--border-color); 
    box-shadow: var(--shadow-sm);
    position: relative;
    background: var(--bg-card);
    border-radius: 20px 20px 20px 4px;
    display: flex; /* NUEVO: Controlamos el contenido interno */
    flex-direction: column; /* NUEVO: Apilamos los elementos verticalmente */
    min-width: 120px; /* ¡LA SOLUCIÓN PRINCIPAL! Ancho mínimo del globo */
}
.feed-item.is-self .feed-item-content { 
    background: var(--border-gradient); 
    color: white; 
    border: none; 
    box-shadow: var(--shadow-glow);
    border-radius: 20px 20px 4px 20px;
}
.feed-item-content::after {
    content: ''; position: absolute; bottom: 0;
    width: 0; height: 0; border: 10px solid transparent;
    border-bottom-color: var(--bg-card); border-left-width: 0;
    margin-bottom: -1px; left: -9px;
}
.feed-item.is-self .feed-item-content::after {
    left: auto; right: -9px; border-left-width: 10px;
    border-right-width: 0; border-bottom-color: var(--accent-primary);
}
.feed-item-header { margin-bottom: 4px; /* AJUSTADO: Menos espacio */ }
.feed-item-user { 
    font-weight: 700; font-size: 13px; color: var(--text-primary); 
    text-transform: uppercase; letter-spacing: 0.5px;
}
.feed-item.is-self .feed-item-user { color: rgba(255, 255, 255, 0.95); }
.feed-item-body { 
    font-size: 15px; color: var(--text-secondary); white-space: pre-wrap; 
    line-height: 1.5; margin: 0;
    word-break: break-word; /* NUEVO: Evita que textos largos rompan el layout */
}
.feed-item.is-self .feed-item-body { color: rgba(255, 255, 255, 0.95); }
.feed-item-footer { text-align: right; margin-top: 6px; /* AJUSTADO */ }
.feed-item-date { font-size: 11px; color: var(--text-muted); opacity: 0.7; }
.feed-item.is-self .feed-item-date { color: rgba(255, 255, 255, 0.8); }
.activity-input-area {
    flex-shrink: 0; padding: 20px 24px; border-top: 1px solid var(--border-color);
    background: var(--bg-card); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}
.activity-input-area form { display: flex; flex-direction: column; gap: 12px; }
.activity-input-area textarea {
    width: 100%;
    min-height: 80px; 
    max-height: 180px; 
    resize: vertical;
    border-radius: var(--border-radius-xl); 
    background: var(--bg-tertiary);
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
}
.activity-input-area textarea:focus { background: var(--bg-secondary); }
.activity-input-area .btn { padding: 14px 24px; border-radius: var(--border-radius-xl); align-self: flex-end; }
.lead-chat-panel .lead-detail-placeholder svg { opacity: 0.2; }

/* =========================
   KANBAN VIEW (Rediseño Visual)
   ========================= */

/* --- Variables de Color para las Columnas --- */
:root {
  --kanban-color-1: var(--accent-info);
  --kanban-color-2: var(--accent-primary);
  --kanban-color-3: #ec4899; /* Rosa */
  --kanban-color-4: var(--accent-success);
  --kanban-color-5: var(--accent-warning);
  --kanban-color-6: #ef4444; /* Rojo */
}

.kanban-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    /* Eliminamos el borde inferior del header general */
    border-bottom: none;
    padding-bottom: 0;
}
.kanban-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kanban-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.kanban-filter-chip:hover {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-tertiary));
}
.kanban-filter-chip:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}
.kanban-filter-chip-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.kanban-filter-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
}
.kanban-filter-chip-icon svg {
    width: 16px;
    height: 16px;
}
.kanban-filter-select {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 0 4px 4px;
    min-width: 130px;
}
.kanban-filter-select:focus {
    outline: none;
}
.kanban-filter-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.kanban-board::-webkit-scrollbar { height: 12px; }
.kanban-board::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 10px; }
.kanban-board::-webkit-scrollbar-thumb { background-color: var(--accent-primary); border-radius: 10px; border: 3px solid var(--bg-secondary); }

.kanban-column { 
    flex: 0 0 320px; 
    display: flex; 
    flex-direction: column; 
    background: var(--bg-secondary); 
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
}

.kanban-column-header { 
    padding: 16px 20px; 
    border-bottom: 1px solid var(--border-color); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    /* La línea de color superior */
    border-top: 3px solid var(--column-color);
    border-top-left-radius: var(--border-radius-lg);
    border-top-right-radius: var(--border-radius-lg);
}
/* Asignación de colores cíclicos a las columnas */
.kanban-column:nth-child(6n+1) { --column-color: var(--kanban-color-1); }
.kanban-column:nth-child(6n+2) { --column-color: var(--kanban-color-2); }
.kanban-column:nth-child(6n+3) { --column-color: var(--kanban-color-3); }
.kanban-column:nth-child(6n+4) { --column-color: var(--kanban-color-4); }
.kanban-column:nth-child(6n+5) { --column-color: var(--kanban-color-5); }
.kanban-column:nth-child(6n+6) { --column-color: var(--kanban-color-6); }

.kanban-column-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kanban-lead-count { 
    font-size: 13px; 
    background: var(--bg-tertiary);
    color: var(--text-muted); 
    padding: 4px 10px; 
    border-radius: 99px;
    font-weight: 700;
}
.kanban-column-leads { 
    padding: 12px; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    flex-grow: 1; 
}

.kanban-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 12px;
    cursor: grab;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
.kanban-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
    border-color: var(--accent-primary);
}
.kanban-card.dragging { opacity: .5; transform: scale(.95); cursor: grabbing; box-shadow: none; }
.kanban-column.drag-over .kanban-column-leads { background-color: rgba(var(--accent-info-rgb), 0.05); }

.kanban-card-content strong {
    font-size: 14px;
    color: var(--text-primary);
}
.kanban-card-content p {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.kanban-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.kanban-card-meta { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.kanban-card-date { font-weight: 500; text-transform: lowercase; }
.kanban-card-assignee .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-secondary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid var(--bg-tertiary);
}

/* =========================
   STATS VIEW (Estilo de Grid Fijo y Profesional)
   ========================= */

.stats-header { 
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 20px; margin-bottom: 24px; 
}
.stats-header h2 { border: none; padding: 0; margin: 0; }
.stats-controls-grid { 
    display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px; margin-bottom: 32px;
}
.stats-controls {
    display: flex; flex-direction: column; 
    align-items: flex-start; gap: 8px;
}

/* --- El Grid de Widgets Modular --- */
#stats-grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(160px, 1fr);
    grid-auto-flow: dense;
    gap: 28px;
}

/* --- Estilo Base de cada Widget --- */
.widget-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-xl);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    padding: 24px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    position: relative; /* SOLUCIÓN 1 (PARTE A): Posiciona el contenedor padre */
}
.widget-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
    border-color: var(--accent-primary);
}

/* --- TAMAÑOS PREDETERMINADOS Y FIJOS --- */
.widget-size-small { grid-column: span 1; grid-row: span 1; }
.widget-size-medium { grid-column: span 2; grid-row: span 1; }
.widget-size-large { grid-column: span 3; grid-row: span 2; }

@media (max-width: 1200px) {
    #stats-grid-container { grid-template-columns: repeat(4, 1fr); }
    .widget-size-small { grid-column: span 1; grid-row: span 1; }
    .widget-size-medium { grid-column: span 2; grid-row: span 1; }
    .widget-size-large { grid-column: span 4; grid-row: span 2; }
}
@media (max-width: 768px) {
    #stats-grid-container { grid-template-columns: repeat(2, 1fr); }
    .widget-size-small { grid-column: span 1; grid-row: span 1; }
    .widget-size-medium { grid-column: span 2; grid-row: span 1; }
    .widget-size-large { grid-column: span 2; grid-row: span 2; }
}

/* --- Header del Widget --- */
.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.widget-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    padding-right: 8px;
}
.widget-controls { display: flex; align-items: center; gap: 4px; }
.widget-controls button, .widget-drag-handle {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; padding: 4px; font-size: 16px;
    transition: color 0.2s ease;
}
.widget-controls button:hover { color: var(--text-primary); }
.widget-drag-handle { cursor: grab; }
.widget-drag-handle:active { cursor: grabbing; }
/* --- GRIDSTACK CONTAINER --- */
.grid-stack {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    padding: 10px;
}

/* El contenido real de nuestro widget */
.grid-stack-item-content {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    inset: 0;
    overflow: hidden; /* Evita que cualquier cosa se desborde */
    
    /* --- LA SOLUCIÓN PRINCIPAL: FLEXBOX --- */
    display: flex;
    flex-direction: column;
}

.widget-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    cursor: move;
    /* El header tiene un tamaño fijo, no se encoge ni se estira */
    flex-shrink: 0; 
}
.widget-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    padding-right: 8px;
}

.widget-controls { 
    display: flex; 
    align-items: center; 
    gap: 4px;
    flex-shrink: 0;
}
.widget-controls button {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; padding: 4px; font-size: 16px;
    transition: color 0.2s ease;
}
.widget-controls button:hover { color: var(--text-primary); }

.widget-content {
    /* El contenido ocupa todo el espacio restante */
    flex-grow: 1; 
    position: relative; /* Necesario para Chart.js */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px 20px; /* Padding solo en los lados y abajo */
    min-height: 0; /* Un truco de flexbox para permitir que el contenido se encoja correctamente */
}
.widget-content canvas {
    max-height: 100%;
    max-width: 100%;
}

/* --- Estilos Específicos para Widgets KPI --- */
.kpi-widget-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    gap: 4px;
}
.kpi-main-value {
    /* Usamos 'vmin' para que la fuente se adapte al tamaño más pequeño (ancho o alto) del viewport */
    /* Clamp asegura que no sea ni demasiado grande ni demasiado pequeño */
    font-size: clamp(24px, 10vmin, 72px);
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-primary);
}
.kpi-label {
    font-size: clamp(12px, 2.5vmin, 16px);
    font-weight: 500;
    color: var(--text-secondary);
    padding: 0 5px; /* Evita que el texto toque los bordes si es muy largo */
}

/* Helper para el spinner dentro del widget */
.spinner-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   TASKS VIEW (Rediseño Dinámico)
   ========================= */

.tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 32px;
}
.tasks-header h2 { font-size: 28px; font-weight: 800; }

.tasks-board { 
    display: grid; 
    grid-template-columns: 1fr; /* Una sola columna para apilar */
    gap: 32px; 
    align-items: flex-start;
}

#pending-tasks-column {
    /* No necesita estilos especiales, es el contenedor principal */
}

#completed-tasks-column .collapsible-title {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 16px 24px;
    border-radius: var(--border-radius-lg);
    font-size: 18px; 
    font-weight: 700;
    color: var(--text-secondary);
}
#completed-tasks-column .collapsible-title .toggle-icon {
    font-size: 24px;
}
#completed-tasks-column .tasks-list {
    padding-top: 16px;
}

.tasks-column { 
    display: flex;
    flex-direction: column;
}
.tasks-column h3:not(.collapsible-title) { 
    font-size: 18px; 
    margin: 0 0 24px 8px; 
    font-weight: 700;
    color: var(--text-secondary);
}

.tasks-list { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.task-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}
.task-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
    border-color: var(--accent-primary);
}

.task-card.overdue {
    border-color: var(--accent-danger);
    box-shadow: 0 0 20px rgba(var(--accent-danger-rgb), 0.2);
}
.task-card.completed {
    background: var(--bg-secondary);
    opacity: 0.7;
}
.task-card.completed .task-card-content { text-decoration: line-through; }

.task-card-main-content { display: flex; align-items: flex-start; gap: 16px; flex-grow: 1; min-width: 0; }
.task-card-details { display: flex; flex-direction: column; gap: 8px; min-width: 0;}
.task-card-content { font-weight: 500; color: var(--text-primary); word-break: break-word; }

.task-card-link { display: flex; align-items: center; gap: 6px; }
.task-card-link svg { width: 14px; height: 14px; stroke: var(--text-muted); }
.task-card-link a { 
    color: var(--accent-primary); text-decoration: none; font-weight: 600; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-card-link a:hover { text-decoration: underline; }

.task-card-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.task-card-due-date {
    display: flex; align-items: center; gap: 6px; font-size: 13px;
    font-weight: 600; color: var(--text-secondary); background-color: var(--bg-secondary);
    padding: 4px 10px; border-radius: var(--border-radius-sm);
}
.task-card-due-date svg { width: 14px; height: 14px; stroke: var(--text-muted); }
.task-card-due-date.overdue-text { color: var(--accent-danger); background-color: rgba(var(--accent-danger-rgb), 0.1); }
.task-card-due-date.overdue-text svg { stroke: var(--accent-danger); }

.task-card-assignee .avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--accent-secondary);
    color: white; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; border: 2px solid var(--bg-tertiary);
}
.task-card .delete-task-btn {
    opacity: 0;
    transition: opacity 0.2s;
}
.task-card:hover .delete-task-btn {
    opacity: 1;
}
.task-card .delete-task-btn svg { width: 18px; height: 18px; }

/* --- ESTILO DEL CHECKBOX PERSONALIZADO --- */
.task-checkbox-button {
    background: transparent;
    border: 2px solid var(--border-color);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.task-checkbox-button .checkmark {
    width: 14px;
    height: 14px;
    stroke: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}
.task-card.completed .task-checkbox-button {
    background-color: var(--accent-success);
    border-color: var(--accent-success);
}
.task-card.completed .task-checkbox-button .checkmark {
    opacity: 1;
    transform: scale(1);
}
.task-card:not(.completed):hover .task-checkbox-button {
    border-color: var(--accent-primary);
    transform: scale(1.1);
}

/* --- ESTILOS PARA EL AUTOCOMPLETADO (Reutilizados y mejorados) --- */
.autocomplete-container { position: relative; }
.autocomplete-suggestions {
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: 200px; overflow-y: auto; background: var(--bg-card);
    border: 1px solid var(--border-color); border-top: none;
    border-bottom-left-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
    z-index: 1010; display: none;
}
.autocomplete-suggestions .suggestion-item {
    padding: 12px 16px; cursor: pointer;
    display: flex; flex-direction: column;
}
.autocomplete-suggestions .suggestion-item:hover { background-color: var(--accent-primary); color: white; }
.autocomplete-suggestions .suggestion-item:hover small { color: rgba(255,255,255,0.8); }
.autocomplete-suggestions .suggestion-item small { font-size: 12px; color: var(--text-muted); }
#task-lead-search.has-selection {
    background-color: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-tertiary));
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

/* =========================
   MODALES & OVERLAYS
   ========================= */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 17, 23, 0.85); backdrop-filter: blur(12px); display: flex; justify-content: center; align-items: center; z-index: 1000; z-index: 1000; }
.modal-content { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-xl); width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; max-width: 600px; }
.modal-content.modal-lg { max-width: 900px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 28px 36px; border-bottom: 1px solid var(--border-color); }
.modal-body { padding: 32px 36px; overflow-y: auto; }
.close-btn { background: none; border: none; font-size: 32px; color: var(--text-muted); cursor: pointer; }
.form-grid-modal { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.modal-actions { display: flex; gap: 14px; justify-content: flex-end; margin-top: 20px; padding-top: 28px; border-top: 1px solid var(--border-color); }
.form-hint { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
#kpiFieldCheckboxes { display: flex; flex-direction: column; gap: 12px; background: var(--bg-tertiary); padding: 16px; border-radius: var(--border-radius-lg); }
.checkbox-group { display: flex; align-items: center; gap: 10px; }
.checkbox-group input { width: auto; }
#toast-container { position: fixed; top: 90px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 12px; }
.toast-notification { background: var(--bg-card); color: var(--text-primary); padding: 18px 24px; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); border-left: 4px solid var(--accent-primary); animation: slideInToast .4s cubic-bezier(.4,0,.2,1), fadeOutToast .4s ease-in 4.5s forwards; width: 340px; }
@keyframes slideInToast { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOutToast { from { opacity: 1; } to { opacity: 0; } }
.notifications-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.notification-bell { background: var(--bg-tertiary); border: 2px solid var(--border-color); color: var(--text-secondary); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: all .3s; }
.notification-bell:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.notification-bell.has-notifications { color: var(--accent-primary); animation: bell-ring 1s ease-in-out; }
@keyframes bell-ring { 0%,50%,100% { transform: rotate(0); } 10%,30% { transform: rotate(-10deg); } 20%,40% { transform: rotate(10deg); } }
.notification-bell svg { width: 24px; height: 24px; }
.notification-badge { position: absolute; top: -4px; right: -4px; background: var(--accent-danger); color: #fff; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-card); }
.notifications-dropdown {
    position: absolute;
    top: calc(100% + 12px); /* Un poco más de espacio */
    right: 0;
    width: 380px; /* Ancho consistente */
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1100;
    overflow: hidden; /* Importante para los bordes redondeados */
    display: none; /* Controlado por JS */
    flex-direction: column;
}
.notifications-list {
    max-height: 350px;
    overflow-y: auto;
}
.notification-item {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color .2s;
    display: flex;
    align-items: center;
    gap: 12px;
}
.notification-item:last-child {
    border-bottom: none;
}
.notification-item:hover {
    background: var(--bg-tertiary);
}

.notification-content {
    flex-grow: 1;
    cursor: pointer;
}

.notification-item p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 4px;
    font-weight: 500;
}
.notification-item small {
    font-size: 12px;
    color: var(--text-muted);
}

.notification-item.unread p {
    font-weight: 700;
    color: var(--text-primary);
}

.notification-item.unread {
    border-left: 3px solid var(--accent-primary);
    padding-left: 17px;
}

.notification-item.read {
    opacity: 0.8;
}

.delete-notification-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.2s;
    flex-shrink: 0;
}

.notification-item:hover .delete-notification-btn {
    opacity: 1;
}

.delete-notification-btn:hover {
    color: var(--accent-danger);
    background-color: rgba(239, 68, 68, 0.1);
}

.notifications-actions {
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

#confirmationModal {
    z-index: 1100; 
}

.modal-overlay.is-occluded {
    filter: blur(4px) brightness(0.7);
    transition: filter 0.2s ease-in-out;
}

.btn-link, .btn-link-danger {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 4px;
    transition: color 0.2s;
}
.btn-link { color: var(--accent-primary); }
.btn-link:hover { color: var(--text-primary); }
.btn-link-danger { color: var(--accent-danger); }
.btn-link-danger:hover { color: var(--text-primary); }

#all-notifications-list {
    display: flex;
    flex-direction: column;
}

#allNotificationsModal .modal-actions {
    justify-content: flex-end; /* Alinea el contenido a la derecha */
    padding: 16px 28px;
    background-color: var(--bg-secondary);
}

/* =========================
   FORM BUILDER
   ========================= */
.form-builder-body {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Columna de campos actuales más ancha */
    gap: 36px;
    padding: 36px;
    overflow-y: auto;
}

/* Contenedor de la izquierda (Campos Actuales) */
.form-builder-fields {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.form-builder-fields h4,
.form-builder-add h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

#current-fields-list-crm {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto; /* Scroll si hay muchos campos */
    flex-grow: 1;
    padding-right: 8px;
}

#current-fields-list-crm li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
}

/* Contenedor de la derecha (Añadir Nuevo Campo) */
.form-builder-add {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    padding: 28px;
}

#add-field-form-crm {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.delete-field-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.delete-field-btn:hover {
    color: var(--accent-danger);
    background-color: rgba(239, 68, 68, 0.1);
    transform: scale(1.1);
}

/* =========================
   SUPERADMIN & UTILITIES
   ========================= */
.superadmin-panel { padding: 32px; max-width: 1400px; margin: 0 auto; }
.superadmin-panel h2 { font-size: 28px; font-weight: 800; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.sa-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px; }
.sa-card { background: var(--bg-card); padding: 28px; border-radius: var(--border-radius-xl); border: 1px solid var(--border-color); display: flex; flex-direction: column; }
.sa-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 24px; }
.sa-logo-uploader { display: flex; flex-direction: column; align-items: center; gap: 16px; background: var(--bg-tertiary); padding: 20px; border-radius: var(--border-radius-lg); border: 2px dashed var(--border-color); }
.sa-logo-uploader img { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; border: 2px solid var(--border-color); }
.sa-logo-uploader input[type="file"] { display: none; }
.sa-logo-uploader label.btn { width: 100%; text-align: center; padding: 10px 20px; font-size: 12px; }
#create-company-form { display: flex; flex-direction: column; gap: 20px; }
.sa-list { display: flex; flex-direction: column; gap: 12px; max-height: 65vh; overflow-y: auto; padding-right: 8px; }
.sa-company-item { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); display: flex; align-items: center; gap: 16px; padding: 16px; }
.company-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.company-details {
    flex-grow: 1;
    font-weight: 500;
}
.copyable-id {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    display: inline-block; /* Importante para que padding funcione bien */
}

.copyable-id:hover {
    background-color: var(--accent-primary);
    color: white;
}
.company-item-actions { display: flex; gap: 8px; flex-shrink: 0; }
.info-message { text-align: center; padding: 60px 20px; color: var(--text-muted); border: 2px dashed var(--border-color); border-radius: var(--border-radius-xl); background: var(--bg-tertiary); }
.error-message { color: var(--accent-danger); background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--border-radius-lg); padding: 16px 20px; margin-top: 16px; }
.pagination-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border-color); }
.pagination-controls button:disabled { opacity: .4; cursor: not-allowed; }

#users-modal .modal-content {
    max-width: 900px;
}

.users-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Columna de creación más pequeña */
    gap: 32px;
}

/* --- NUEVOS ESTILOS --- */
.company-id-display {
    font-size: 12px;
    color: var(--text-muted);
    font-family: monospace; /* Hace que sea más fácil de leer y seleccionar */
    margin-top: 4px;
}

/* Estilo general para las tarjetas dentro del modal */
.panel-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.panel-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

/* Estilo específico para el formulario de creación */
#create-user-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Estilo para la lista de usuarios */
.company-users-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 45vh; /* Altura máxima con scroll */
    overflow-y: auto;
    padding-right: 8px; /* Espacio para la barra de scroll */
}

.user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-tertiary);
    padding: 12px 20px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease-in-out;
}

.user-item:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.user-item span {
    font-weight: 500;
}

.role-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    margin-left: 12px;
    text-transform: uppercase;
    color: #fff;
}

.role-tag.admin {
    background: var(--accent-primary);
}

.role-tag.user {
    background: var(--accent-info);
}

.delete-user-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.delete-user-btn:hover {
    color: var(--accent-danger);
    background-color: rgba(239, 68, 68, 0.1);
    transform: scale(1.1);
}

/* =========================
   NOTIFICACIONES
   ========================= */
.notification-item.unread {
    background-color: rgba(var(--accent-info-rgb), 0.1);
}
.notification-item.read {
    opacity: 0.7;
}
#allNotificationsModal .modal-body {
    padding: 0; /* Quitamos el padding para que la lista ocupe todo */
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow-y: auto;
}

#allNotificationsModal .notification-item {
    border-bottom: 1px solid var(--border-color);
    padding: 16px 24px; /* Más espaciado vertical */
}
#allNotificationsModal .notification-item:last-child {
    border-bottom: none;
}

/* =========================
   RESPONSIVIDAD
   ========================= */
@media (max-width: 1200px) { .dashboard-grid { grid-template-columns: 1fr; } .charts-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
    .leads-view-container { flex-direction: column; }
    .leads-list-panel { flex: 0 0 auto; height: 40vh; }
    .lead-panels-resizer { display: none; }
    .lead-detail-panel,
    .lead-chat-panel { flex: 1 1 auto; width: auto !important; min-width: 0; }
    .lead-chat-iframe-wrapper { min-height: 320px; }
    .tasks-board { grid-template-columns: 1fr; }
}

/* ========================= HELPERS & UTILITIES ========================= */

.spinner {
    border: 3px solid rgba(var(--accent-info-rgb), 0.3);
    border-radius: 50%;
    border-top-color: var(--accent-primary);
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

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

/* Para poner un spinner dentro de un botón */
.btn .spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
}
.btn.is-loading {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    opacity: 0.8;
}

/* --- ESTILOS MEJORADOS PARA EL MODAL DE CONFIRMACIÓN --- */

#confirmationModal .modal-content {
    max-width: 400px;
    text-align: center;
}

#confirmationModal .modal-header {
    justify-content: center; /* Centrar el título */
    padding-bottom: 16px;
}

#confirmationModal .modal-body {
    padding-top: 16px;
    padding-bottom: 24px;
}

/* Icono de advertencia */
#confirmationModal .modal-body::before {
    content: '';
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    background-color: rgba(var(--accent-info-rgb), 0.1);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%233b82f6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px;
}

#confirmationModal #confirmation-modal-message {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

#confirmationModal .modal-actions {
    gap: 12px;
    justify-content: center; /* Centrar los botones */
}

/* --- ESTILOS PARA LAS MENCIONES (@) --- */
.activity-input-area {
    position: relative; /* Padre para el posicionamiento del popup */
}

.mention-suggestions-popup {
    position: absolute;
    bottom: 100%; /* Se posiciona justo encima del área de input */
    left: 20px;
    right: 20px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    margin-bottom: 8px; /* Espacio entre el popup y el textarea */
    z-index: 20;
}

.suggestion-item {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
}
.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover, .suggestion-item.is-active {
    background-color: var(--accent-primary);
    color: white;
}

/* --- ESTILOS PARA EL AUTOCOMPLETADO --- */
.autocomplete-container {
    position: relative;
}

.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: none;
    border-bottom-left-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
    z-index: 1010; /* Debe estar por encima del contenido del modal */
    display: none; /* Oculto por defecto */
}

.suggestion-item {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
}

.suggestion-item:hover, .suggestion-item.is-active {
    background-color: var(--accent-primary);
    color: white;
}

/* Muestra una X para limpiar la selección */
#task-lead-search.has-selection {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z' clip-rule='evenodd' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
    padding-right: 45px; /* Espacio para el icono */
}

/* =========================
   USERS VIEW (Estilo Mejorado)
   ========================= */

.users-management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 32px;
}

.users-management-header h2 {
    font-size: 28px;
    font-weight: 800;
}

#users-list-container {
    display: grid;
    /* Grid responsive que crea columnas de 320px como mínimo */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.user-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-xl);
    border: 1px solid var(--border-color);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 24px; /* Espacio entre secciones */
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

.user-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-glow);
    border-color: var(--accent-primary);
}

/* Efecto de borde superior degradado */
.user-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--border-gradient);
    opacity: 0.8;
}

.user-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-card-avatar {
    width: 64px; /* Más grande */
    height: 64px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    flex-shrink: 0;
    border: 3px solid var(--border-color);
}

.user-card-info h4 {
    margin: 0 0 4px 0;
    font-size: 20px; /* Más grande */
    font-weight: 700;
    color: var(--text-primary);
}

.user-card-info .role-tag {
    /* El estilo base ya está definido, podemos ajustarlo si es necesario */
    padding: 5px 12px;
    font-size: 10px;
}

.user-card-actions {
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--border-color);
    padding-top: 24px;
    margin-top: auto; /* Empuja las acciones al fondo de la tarjeta */
}

/* =========================
   BOTONES DE ÍCONO PERSONALIZADOS
   ========================= */

.btn-icon {
    /* Reseteamos estilos de botón */
    background: transparent;
    border: none;
    padding: 0;
    
    /* Dimensiones y forma */
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Hacemos que sea un círculo */
    
    /* Centrado del ícono */
    display: flex;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.btn-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-muted); /* Color inicial del ícono */
    transition: all 0.2s ease-in-out;
}

/* Estilo específico para el botón de eliminar al pasar el ratón */
.btn-icon.delete-user-btn:hover {
    background-color: rgba(var(--accent-danger-rgb), 0.1); /* Fondo rojo semitransparente */
}

.btn-icon.delete-user-btn:hover svg {
    stroke: var(--accent-danger); /* El ícono se vuelve rojo */
    transform: scale(1.1); /* Ligero zoom para dar feedback */
}

/* =========================
   MODAL DE NOTIFICACIONES MEJORADO
   ========================= */

#allNotificationsModal .modal-content {
    max-width: 700px; /* Un poco más ancho */
}

#allNotificationsModal .modal-body {
    padding: 0;
    max-height: 65vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
#allNotificationsModal .modal-body::-webkit-scrollbar { width: 8px; }
#allNotificationsModal .modal-body::-webkit-scrollbar-track { background: var(--scrollbar-track); }
#allNotificationsModal .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
#allNotificationsModal .modal-body::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }

#all-notifications-list.is-empty {
    padding: 40px; /* Solo añadir padding cuando está vacío */
}

.notifications-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-muted);
    padding: 48px;
}
.notifications-empty-state svg {
    width: 64px;
    height: 64px;
    stroke: var(--accent-success);
    margin-bottom: 24px;
    opacity: 0.7;
}
.notifications-empty-state h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

#allNotificationsModal .notification-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 28px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}
#allNotificationsModal .notification-item:last-child {
    border-bottom: none;
}
#allNotificationsModal .notification-item:hover {
    background-color: var(--bg-tertiary);
}

.notification-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: transparent;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.notification-item.unread .notification-indicator {
    background-color: var(--accent-info);
    box-shadow: 0 0 10px var(--accent-info);
}

#allNotificationsModal .notification-item.read {
    opacity: 0.6;
}
#allNotificationsModal .notification-item.read:hover {
    opacity: 1;
}

#allNotificationsModal .notification-content {
    cursor: pointer;
    flex-grow: 1;
}

#allNotificationsModal .notification-content p {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0 0 6px 0;
}
#allNotificationsModal .notification-item.unread .notification-content p {
    font-weight: 700;
    color: var(--text-primary);
}
#allNotificationsModal .notification-content small {
    font-size: 13px;
    color: var(--text-muted);
}
#allNotificationsModal .delete-notification-btn {
    opacity: 0;
    transform: scale(0.8);
}
#allNotificationsModal .notification-item:hover .delete-notification-btn {
    opacity: 1;
    transform: scale(1);
}
#allNotificationsModal .delete-notification-btn svg { width: 18px; height: 18px; }


/* =========================
   MODAL DE CONFIRMACIÓN MEJORADO
   ========================= */
#confirmationModal .modal-content {
    max-width: 440px;
    text-align: center;
    border-top: 4px solid var(--accent-danger);
    box-shadow: var(--shadow-lg), 0 0 40px rgba(var(--accent-danger-rgb), 0.3);
}
#confirmationModal .modal-header {
    justify-content: center;
    padding-bottom: 0;
    border-bottom: none;
}
#confirmationModal .modal-header h2 {
    font-size: 22px;
    font-weight: 700;
}
#confirmationModal .modal-body {
    padding-top: 16px;
    padding-bottom: 28px;
}

/* Icono de advertencia grande */
#confirmationModal .modal-body::before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    background-color: rgba(var(--accent-danger-rgb), 0.1);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23ef4444'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 36px;
    border: 1px solid rgba(var(--accent-danger-rgb), 0.2);
}

#confirmationModal #confirmation-modal-message {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

#confirmationModal .modal-actions {
    gap: 16px;
    justify-content: center;
    padding: 24px;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

/* =========================
   TASKS VIEW (Estilo Kanban)
   ========================= */

.tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 32px;
}
.tasks-header h2 { font-size: 28px; font-weight: 800; }

.tasks-header-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}
#task-filter-container {
    display: flex;
    align-items: center;
    gap: 8px;
}
#task-filter-container label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.tasks-board-kanban { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px; 
    align-items: flex-start;
}

.tasks-column-kanban { 
    background: var(--bg-secondary); 
    border-radius: var(--border-radius-xl); 
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.tasks-column-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    border-top: 3px solid var(--column-color, var(--accent-primary));
    border-top-left-radius: var(--border-radius-xl);
    border-top-right-radius: var(--border-radius-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tasks-column-header h3 { 
    font-size: 16px; 
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tasks-count {
    font-size: 14px;
    font-weight: 700;
    background-color: var(--bg-tertiary);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 99px;
}

.tasks-list-kanban { 
    padding: 20px;
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
    flex-grow: 1;
}

.task-card-kanban {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}
.task-card-kanban:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
    border-color: var(--accent-primary);
}

.task-card-kanban.overdue {
    border-left: 3px solid var(--accent-danger);
    padding-left: 13px;
}
.task-card-kanban.completed {
    background: transparent;
    opacity: 0.6;
}
.task-card-kanban.completed:hover {
    opacity: 1;
}
.task-card-kanban.completed .task-card-title { text-decoration: line-through; }


.task-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.task-card-title {
    flex-grow: 1;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
    margin: 4px 0;
}

.task-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}
.task-card-due-date, .task-card-link {
    display: flex; align-items: center; gap: 6px; font-size: 13px;
    font-weight: 600; color: var(--text-secondary); background-color: var(--bg-secondary);
    padding: 4px 10px; border-radius: var(--border-radius-sm);
}
.task-card-due-date svg, .task-card-link svg { width: 14px; height: 14px; stroke: var(--text-muted); }
.task-card-due-date.overdue-text { color: var(--accent-danger); }
.task-card-due-date.overdue-text svg { stroke: var(--accent-danger); }
.task-card-link a { color: var(--accent-info); text-decoration: none; }
.task-card-link a:hover { text-decoration: underline; }

.task-card-footer {
    display: flex;
    justify-content: flex-end; /* Alinea el avatar a la derecha */
    align-items: center;
    margin-top: 8px;
}
.task-card-assignee .avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--accent-secondary);
    color: white; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; border: 2px solid var(--bg-tertiary);
}

.task-card-header .delete-task-btn {
    opacity: 0;
    transition: opacity 0.2s;
}
.task-card-kanban:hover .delete-task-btn {
    opacity: 1;
}
.task-card-header .delete-task-btn svg { width: 16px; height: 16px; }

/* CHECKBOX PERSONALIZADO */
.task-checkbox-button {
    background: transparent;
    border: 2px solid var(--border-color);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.task-checkbox-button .checkmark {
    width: 12px; height: 12px; stroke: white;
    opacity: 0; transform: scale(0.5);
    transition: all 0.2s ease;
}
.task-card-kanban.completed .task-checkbox-button {
    background-color: var(--accent-success);
    border-color: var(--accent-success);
}
.task-card-kanban.completed .task-checkbox-button .checkmark {
    opacity: 1;
    transform: scale(1);
}
.task-card-kanban:not(.completed):hover .task-checkbox-button {
    border-color: var(--accent-primary);
    transform: scale(1.1);
}

/* =========================
   NOTES VIEW (Sticky Notes)
   ========================= */

.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.notes-header-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notes-header-text h2 {
    margin: 0;
}

.notes-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.notes-header-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.notes-grid-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.notes-grid-toggle input {
    accent-color: var(--accent-primary);
}

.notes-board {
    position: relative;
    min-height: calc(100vh - 240px);
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: 18px;
    padding: 28px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.notes-board:hover {
    box-shadow: var(--shadow-md);
}

.notes-board.has-grid {
    background-image: 
        radial-gradient(circle, rgba(148, 163, 184, 0.15) 1px, transparent 1px),
        linear-gradient(to right, rgba(148, 163, 184, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
    background-size: 16px 16px, 48px 48px, 48px 48px;
    background-position: 0 0, 0 0, 0 0;
}

.notes-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    text-align: center;
    font-size: 14px;
    pointer-events: none;
    padding: 0 24px;
}

.notes-empty-state svg {
    width: 56px;
    height: 56px;
    opacity: 0.4;
}

.sticky-note {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
    cursor: default;
    color: #1f2937;
    max-width: min(340px, 60vw);
    min-width: 240px;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    backdrop-filter: saturate(120%) blur(8px);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.sticky-note:is(:hover, :focus-within) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.sticky-note.is-dragging {
    cursor: grabbing;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.12);
    transform: scale(1.02) rotate(1deg);
    z-index: 9999 !important;
}

.sticky-note-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    cursor: grab;
    user-select: none;
    min-height: 44px;
    position: relative;
    backdrop-filter: brightness(0.97);
}

.sticky-note-navbar:active {
    cursor: grabbing;
}

.sticky-note.is-dragging .sticky-note-navbar {
    cursor: grabbing;
}

.sticky-note-drag-handle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    color: rgba(31, 41, 55, 0.5);
    font-weight: 600;
    font-size: 12px;
}

.sticky-note-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding-left: 4px;
}

.sticky-note-author-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(31, 41, 55, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: rgba(31, 41, 55, 0.78);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.sticky-note-author-avatar.is-admin {
    background: rgba(99, 102, 241, 0.16);
    color: rgba(67, 56, 202, 0.95);
    border-color: rgba(79, 70, 229, 0.4);
}

.sticky-note-author-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
}

.sticky-note-author-name {
    font-weight: 600;
    font-size: 12px;
    color: rgba(31, 41, 55, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-note-author-role {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(31, 41, 55, 0.5);
    margin-top: 2px;
}

.sticky-note-author-role.is-admin {
    color: rgba(76, 81, 191, 0.9);
}

.sticky-note-grip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0.3;
    transition: opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.sticky-note-grip span {
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: all 0.2s;
}

.sticky-note-navbar:hover .sticky-note-grip {
    opacity: 0.6;
}

.sticky-note.is-dragging .sticky-note-grip {
    opacity: 0.8;
    transform: scale(1.1);
}

.sticky-note.is-dragging .sticky-note-grip span:nth-child(1) {
    transform: translateX(-2px);
}

.sticky-note.is-dragging .sticky-note-grip span:nth-child(3) {
    transform: translateX(2px);
}

.sticky-note-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sticky-note-actions .btn-icon {
    min-width: 28px;
    min-height: 28px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    color: rgba(31, 41, 55, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    border: none;
    cursor: pointer;
    padding: 0;
}

.sticky-note-actions .btn-icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

.sticky-note-actions .btn-icon:hover {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(31, 41, 55, 0.9);
    transform: scale(1.1);
}

.sticky-note-actions .btn-icon:active {
    transform: scale(0.95);
}

.sticky-note-actions .sticky-note-color {
    position: relative;
    background: rgba(0, 0, 0, 0.06);
}

.sticky-note-actions .sticky-note-color::after {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4),
                0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease;
}

.sticky-note-actions .sticky-note-color:hover::after {
    transform: scale(1.15);
}

.sticky-note-actions .sticky-note-duplicate svg {
    width: 13px;
    height: 13px;
}

.sticky-note-actions .sticky-note-delete {
    color: rgba(220, 38, 38, 0.7);
}

.sticky-note-actions .sticky-note-delete:hover {
    background: rgba(220, 38, 38, 0.1);
    color: rgba(220, 38, 38, 1);
}

.sticky-note-actions .btn-icon.is-disabled,
.sticky-note-actions .btn-icon:disabled {
    opacity: 0.45;
    background: rgba(0, 0, 0, 0.05);
    color: rgba(31, 41, 55, 0.35);
    cursor: not-allowed;
    transform: none;
    border-color: rgba(0, 0, 0, 0.05);
}

.sticky-note-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px;
    min-height: 140px;
}

.sticky-note-content {
    width: 100%;
    min-height: 120px;
    border: none;
    resize: vertical;
    background: transparent;
    color: inherit;
    font-size: 14px;
    line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    padding: 0;
    outline: none;
    flex: 1;
}

.sticky-note-content::placeholder {
    color: rgba(31, 41, 55, 0.4);
    font-style: italic;
}

.sticky-note-content:focus {
    outline: none;
}

.sticky-note-footer {
    padding: 8px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(31, 41, 55, 0.45);
    background: rgba(0, 0, 0, 0.02);
    min-height: 32px;
    backdrop-filter: brightness(0.98);
}

.sticky-note-footer-hint {
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    transition: color 0.2s;
}

.sticky-note:hover .sticky-note-footer-hint {
    color: rgba(31, 41, 55, 0.6);
}

.sticky-note-footer-hint svg {
    width: 12px;
    height: 12px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* Estilos adicionales para mejorar la experiencia */
.sticky-note-navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.2) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0.2) 100%);
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1;
}

.sticky-note:hover .sticky-note-navbar::before {
    opacity: 1;
}

.sticky-note-body,
.sticky-note-navbar,
.sticky-note-footer {
    position: relative;
    z-index: 2;
}

.sticky-note-content::-webkit-scrollbar {
    width: 8px;
}

.sticky-note-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
}

.sticky-note-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.sticky-note-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* Animación suave al crear notas */
@keyframes note-appear {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.sticky-note {
    animation: note-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Efecto de papel en los bordes */
.sticky-note::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent rgba(0, 0, 0, 0.08) transparent transparent;
    border-radius: 0 14px 0 0;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.sticky-note:hover::before {
    opacity: 0.8;
}

.sticky-note.is-dragging::before {
    opacity: 0.4;
}

/* Sombra interior sutil para más profundidad */
.sticky-note::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.sticky-note:hover::after {
    opacity: 1;
}

@media (max-width: 960px) {
    .notes-board {
        min-height: 520px;
        padding: 16px;
    }
    
    .sticky-note {
        max-width: min(300px, 85vw);
        min-width: 220px;
    }
    
    .sticky-note-navbar {
        padding: 8px 12px;
    }
    
    .sticky-note-body {
        padding: 12px;
        min-height: 120px;
    }
    
    .sticky-note-actions .btn-icon {
        min-width: 26px;
        min-height: 26px;
        width: 26px;
        height: 26px;
    }
}

/* =========================
   DASHBOARD VIEW - STATS & LEAD LIST (Mejoras)
   ========================= */

.dashboard-stats-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px;
}

.stat-card-mini {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    padding: 24px;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

.stat-card-mini:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-glow);
    border-color: var(--accent-primary);
}

.stat-card-mini .stat-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card-mini .stat-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

/* --- ESTILO DE RESALTADO SIMPLE Y DIRECTO --- */

/* Esta regla se aplicará a la tarjeta con la clase .admin-stat */
.stat-card-mini.admin-stat {
    /* Fondo original, SIN tinte de color */
    background: var(--bg-card) !important; 
    
    /* Borde naranja, grueso y muy visible */
    border: 3px solid var(--accent-warning) !important; 

    /* Sombra naranja para un efecto de resplandor */
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4) !important;
}

/* El número dentro de la tarjeta también resalta */
.stat-card-mini.admin-stat .stat-value {
    color: var(--accent-warning) !important;
}

/* --- Estilos para la Tarjeta de Lead (Sin cambios) --- */
.lead-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
}
.lead-item-info { display: flex; flex-direction: column; gap: 3px; }
.lead-item-info strong { font-size: 15px; font-weight: 600; }
.lead-item-info p { font-size: 13px; color: var(--text-muted); }
.lead-item-meta { text-align: right; flex-shrink: 0; }
.lead-item-date {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
}

/* =========================
   GRIDSTACK - Mejoras Visuales Finales
   ========================= */

/* --- Estilo para la Manija de Redimensión (Resize Handle) --- */
.grid-stack-item .ui-resizable-handle.ui-resizable-se {
    width: 28px;
    height: 28px;
    right: 0px;
    bottom: 0px;
    cursor: se-resize;
    
    display: flex;
    align-items: center;
    justify-content: center;

    background-image: none;
    
    /* El ícono está oculto por defecto */
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease-in-out;
    color: var(--text-muted);
}

/* Solo cuando pasamos el cursor SOBRE EL WIDGET, el ícono aparece */
.grid-stack-item:hover .ui-resizable-handle.ui-resizable-se {
    opacity: 0.7;
    transform: scale(1);
}

/* Al pasar el cursor sobre el propio ícono, se hace más prominente */
.grid-stack-item .ui-resizable-handle.ui-resizable-se:hover {
    opacity: 1;
    color: var(--accent-primary);
}

/* NUEVO ÍCONO SVG: Flecha bidireccional diagonal */
.grid-stack-item .ui-resizable-handle.ui-resizable-se::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9m11.25 11.25v-4.5m0 4.5h-4.5m4.5 0L15 15' /%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9m11.25 11.25v-4.5m0 4.5h-4.5m4.5 0L15 15' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.grid-stack-item:hover .ui-resizable-handle.ui-resizable-se {
    opacity: 1;
    color: var(--accent-primary); /* Cambiamos el color del SVG al pasar el ratón */
}


/* --- Estilo para Scrollbar Discreto dentro de los Widgets --- */
.widget-content {
    /* Permitimos el scroll si es absolutamente necesario */
    overflow: auto;
    
    /* Estilo para Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Estilo para Webkit (Chrome, Safari, Edge) */
.widget-content::-webkit-scrollbar {
    width: 6px;  /* Ancho muy delgado */
    height: 6px;
}

.widget-content::-webkit-scrollbar-track {
    background: var(--scrollbar-track); /* Fondo invisible */
}

.widget-content::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb); /* Color sutil */
    border-radius: 20px;
    border: 2px solid transparent; /* Crea un efecto de "flotado" */
    background-clip: content-box;
}

.widget-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover); /* Más visible al pasar el ratón */
}

/* =========================
   FILTRO DE FECHAS MEJORADO
   ========================= */

.date-filter-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.date-filter-wrapper input {
    flex-grow: 1; /* El input ocupa todo el espacio disponible */
}

#clear-stats-date-filter-btn {
    flex-shrink: 0; /* Evita que el botón se encoja */
    background-color: var(--bg-tertiary);
    color: var(--text-muted);
}

#clear-stats-date-filter-btn:hover {
    background-color: var(--accent-danger);
    color: white;
}

#clear-stats-date-filter-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* =======================================
   ESTILO FINAL PARA LEADS SIN ASIGNAR
   ======================================= */

@keyframes pulse-warning {
    0% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.2); }
    50% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.4); }
    100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.2); }
}

#unassigned-leads-card {
    background: var(--bg-card); /* Fondo original */
    border: 2px solid var(--accent-warning); /* Borde naranja */
    animation: pulse-warning 2.5s infinite ease-in-out;
}

#unassigned-leads-card .stat-value {
    color: var(--accent-warning);
}

#unassigned-leads-card:hover {
    animation-play-state: paused;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
}