*{box-sizing:border-box;margin:0;padding:0}
:root{
--navy:#0D1B2A;
--navy-mid:#152233;
--navy-light:#1E3448;
--purple:#6B3FA0;
--purple-h:#7B4FB0;
--purple-soft:#F0EBF8;
--purple-mid:#DDD0F0;
--cyan:#00A8CC;
--cyan-soft:#E6F7FB;
--white:#FFFFFF;
--g50:#F7F8FA;
--g100:#F0F1F4;
--g200:#E2E5EA;
--g300:#C8CDD6;
--g400:#9BA3AF;
--g600:#5A6472;
--g800:#2D3540;
--green:#16A34A;
--green-s:#DCFCE7;
--amber:#D97706;
--amber-s:#FEF3C7;
--red:#DC2626;
--red-s:#FEE2E2;
--t1:#0D1B2A;
--t2:#5A6472;
--t3:#9BA3AF;
}
html,body{height:100%;font-family:'Poppins',sans-serif;background:var(--g50);color:var(--t1);font-size:14px}
/* ── LOGIN ─────────────────────────────────── */
#login-screen{position:fixed;inset:0;background:var(--navy);display:flex;align-items:center;justify-content:center;z-index:1000;flex-direction:column;gap:0}
.login-brand{display:flex;flex-direction:column;align-items:center;margin-bottom:2.5rem}
.login-wordmark{font-family:'Poppins',sans-serif;font-size:48px;font-weight:400;letter-spacing:-1px;line-height:1.4}
.login-wordmark .be{color:var(--purple)}
.login-wordmark .efficient{color:#ffffff}
.login-wordmark .mx{color:#ffffff;font-size:32px;vertical-align:baseline}
.login-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:2rem;width:360px}
.login-card-title{font-size:15px;font-weight:500;color:#ffffff;margin-bottom:1.5rem;letter-spacing:0}
.login-card label{font-size:11px;color:rgba(255,255,255,0.45);display:block;margin-bottom:6px;letter-spacing:0.05em;text-transform:uppercase}
.login-card input{width:100%;padding:10px 14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#fff;font-size:13px;font-family:'Poppins',sans-serif;margin-bottom:1rem;outline:none;transition:border 0.15s}
.login-card input:focus{border-color:var(--purple)}
.login-card input::placeholder{color:rgba(255,255,255,0.25)}
.btn-google{width:100%;padding:11px;background:#fff;border:none;border-radius:8px;color:#3c4043;font-size:13px;font-weight:500;cursor:pointer;font-family:'Poppins',sans-serif;display:flex;align-items:center;justify-content:center;gap:10px;transition:background 0.15s}
.btn-google:hover{background:#f1f3f4}
.btn-google:active{background:#e8eaed}
.btn-login{width:100%;padding:11px;background:var(--purple);border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:'Poppins',sans-serif;transition:background 0.15s;margin-top:4px}
.btn-login:hover{background:var(--purple-h)}
.login-err{font-size:12px;color:#f87171;margin-top:8px;text-align:center;min-height:18px}
.login-stripe{height:3px;background:linear-gradient(90deg,var(--purple),var(--cyan));width:100%;position:absolute;top:0;left:0}
/* ── APP SHELL ─────────────────────────────── */
#app{display:none;height:100vh;flex-direction:column}
#app.visible{display:flex}
/* TOPBAR */
.topbar{height:54px;background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;flex-shrink:0;position:relative}
.topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--purple),var(--cyan))}
.tb-left{display:flex;align-items:center;gap:10px}
.tb-logo{width:30px;height:30px;background:var(--purple);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tb-logo svg{width:16px;height:16px}
.tb-name{font-family:'Poppins',sans-serif;font-size:14px;font-weight:800;color:#fff;letter-spacing:-0.3px}
.tb-tag{font-size:10px;color:rgba(255,255,255,0.35);letter-spacing:0.05em}
.tb-right{display:flex;align-items:center;gap:8px}
.tb-notif{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;color:rgba(255,255,255,0.5);font-size:15px;transition:all 0.15s}
.tb-notif:hover{background:rgba(255,255,255,0.08);color:#fff}
.notif-badge{position:absolute;top:4px;right:4px;width:8px;height:8px;background:var(--red);border-radius:50%;border:1.5px solid var(--navy)}
.tb-divider{width:1px;height:20px;background:rgba(255,255,255,0.1)}
.tb-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:background 0.15s}
.tb-user:hover{background:rgba(255,255,255,0.06)}
.tb-avatar{width:30px;height:30px;background:var(--purple);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;font-family:'Poppins',sans-serif;flex-shrink:0}
.tb-uname{font-size:12px;font-weight:500;color:#fff}
.tb-urole{font-size:10px;color:rgba(255,255,255,0.4)}
/* LAYOUT */
.app-body{display:flex;flex:1;overflow:visible}
/* SIDEBAR */
.sidebar{width:208px;background:var(--white);border-right:1px solid var(--g200);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sb-section{padding:1rem 0.75rem 0}
.sb-label{font-size:9px;font-weight:600;color:var(--t3);letter-spacing:0.1em;text-transform:uppercase;padding:0 0.5rem;margin-bottom:6px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--t2);transition:all 0.12s;margin-bottom:2px;font-weight:400;user-select:none}
.nav-item:hover{background:var(--purple-soft);color:var(--purple)}
.nav-item.active{background:var(--purple);color:#fff;font-weight:500}
.nav-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0}
.nav-badge{margin-left:auto;background:var(--red-s);color:var(--red);font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;min-width:20px;text-align:center}
.nav-item.active .nav-badge{background:rgba(255,255,255,0.25);color:#fff}
.sb-spacer{flex:1}
.sb-version{padding:0.75rem 1.25rem;font-size:10px;color:var(--t3)}
#sb-user-card{display:none !important}
.nav-item[data-page="notificaciones"],.nav-item[data-page="config"]{}
#sb-section-sistema{}
/* MAIN */
.main{flex:1;overflow-y:auto;background:var(--g50)}
.page{display:none;padding:1.5rem;animation:fadeIn 0.2s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* PAGE HEADER */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem;position:relative;z-index:2}
.ph-left{}
.ph-title{font-family:'Poppins',sans-serif;font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-0.5px}
.ph-sub{font-size:12px;color:var(--t3);margin-top:3px}
.btn-primary{background:var(--purple);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Poppins',sans-serif;transition:background 0.15s;white-space:nowrap}
.btn-primary:hover{background:var(--purple-h)}
.btn-secondary{background:var(--white);color:var(--t1);border:1px solid var(--g200);padding:8px 14px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;font-family:'Poppins',sans-serif;transition:all 0.15s}
.btn-secondary:hover{border-color:var(--g300);background:var(--g50)}
/* CARDS */
.card{background:var(--white);border:1px solid var(--g200);border-radius:12px;padding:1.25rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.card::-webkit-scrollbar{height:5px}
.card::-webkit-scrollbar-track{background:rgba(107,63,160,0.06);border-radius:3px}
.card::-webkit-scrollbar-thumb{background:rgba(107,63,160,0.35);border-radius:3px}
.card-title{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.875rem}
/* METRICS */
.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:1.25rem}
.metric{background:var(--white);border:1px solid var(--g200);border-radius:10px;padding:1rem;position:relative;overflow:hidden}
.metric-accent{height:3px;border-radius:2px;margin-bottom:10px;width:32px}
.metric-val{font-family:'Poppins',sans-serif;font-size:26px;font-weight:800;color:var(--navy);line-height:1}
.metric-lbl{font-size:11px;color:var(--t3);margin-top:5px}
/* GRID */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px}
/* TABLE */
.tbl{width:100%;border-collapse:collapse;border:1.5px solid rgba(107,63,160,0.35);border-radius:8px;overflow:hidden;min-width:600px}
.tbl th{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:0.06em;padding:8px 12px;text-align:left;border-bottom:2px solid rgba(107,63,160,0.45);border-right:1px solid rgba(107,63,160,0.25);background:rgba(107,63,160,0.06)}
.tbl td{padding:9px 12px;border-bottom:1px solid rgba(107,63,160,0.2);border-right:1px solid rgba(107,63,160,0.18);font-size:12.5px;color:var(--t1);vertical-align:middle}.tbl td:last-child{border-right:none}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(107,63,160,0.06)}
/* PILLS */
.pill{display:inline-flex;align-items:center;font-size:10px;font-weight:600;padding:3px 8px;border-radius:20px;white-space:nowrap}
.pill-live{background:#DCFCE7;color:#15803D}
.pill-prog{background:var(--purple-soft);color:var(--purple)}
.pill-pause{background:var(--amber-s);color:var(--amber)}
.pill-end{background:var(--g100);color:var(--g600)}
.pill-alta{background:var(--red-s);color:var(--red)}
.pill-media{background:var(--amber-s);color:var(--amber)}
.pill-baja{background:var(--green-s);color:var(--green)}
.pill-abierto{background:var(--red-s);color:var(--red)}
.pill-revision{background:var(--amber-s);color:var(--amber)}
.pill-resuelto{background:var(--green-s);color:var(--green)}
.pill-cerrado{background:var(--g100);color:var(--g600)}
.pill-cdmx{background:var(--cyan-soft);color:#006B85}
.pill-mty{background:var(--purple-soft);color:var(--purple)}
.pill-gdl{background:#FEF3C7;color:#92400E}
/* ROW ITEMS */
.row-item{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--g100);font-size:12.5px}
.row-item:last-child{border-bottom:none}
.row-item-main{flex:1;min-width:0}
.row-item-title{color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-item-sub{font-size:11px;color:var(--t3);margin-top:1px}
/* SEV DOT */
.sev{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-right:8px}
.sev-alta{background:var(--red)}
.sev-media{background:var(--amber)}
.sev-baja{background:var(--green)}
/* FORM */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;align-items:start}
.form-full{grid-column:1/-1}
.field{display:flex;flex-direction:column;min-width:0}
.field label{font-size:11px;color:var(--t2);display:block;margin-bottom:5px;font-weight:500}
.field input,.field select,.field textarea{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--g200);border-radius:8px;font-size:13px;color:var(--t1);font-family:'Poppins',sans-serif;background:var(--white);outline:none;transition:border 0.15s;display:block}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple)}
.field textarea{resize:vertical;min-height:80px}
/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:500;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.open{display:flex}
.modal{background:var(--white);border-radius:14px;width:100%;max-width:700px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.2)}
.modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--g200);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--white);z-index:1;border-radius:14px 14px 0 0}
.modal-title{font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;color:var(--navy)}
.modal-close{width:28px;height:28px;border:none;background:var(--g100);border-radius:6px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--t2)}
.modal-close:hover{background:var(--g200)}
.modal-body{padding:1.5rem}
.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--g200);display:flex;gap:8px;justify-content:flex-end}
/* EMPTY STATE */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center}
.empty-icon{width:48px;height:48px;background:var(--purple-soft);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:1rem}
.empty-title{font-size:14px;font-weight:500;color:var(--t1);margin-bottom:4px}
.empty-sub{font-size:12px;color:var(--t3)}
/* TOAST */
#toast{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast-item{padding:10px 16px;border-radius:8px;font-size:12.5px;font-weight:500;color:#fff;min-width:200px;animation:slideUp 0.2s ease;box-shadow:0 4px 16px rgba(0,0,0,0.15)}
.toast-ok{background:var(--green)}
.toast-err{background:var(--red)}
.toast-info{background:var(--purple)}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* TABS */
.tab-bar{display:flex;gap:4px;margin-bottom:1.25rem;background:var(--g100);padding:4px;border-radius:10px;width:fit-content}
.tab-btn{padding:6px 14px;border-radius:7px;border:none;background:transparent;font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;font-family:'Poppins',sans-serif;transition:all 0.15s}
.tab-btn.active{background:var(--white);color:var(--navy);box-shadow:0 1px 4px rgba(0,0,0,0.08)}
/* SEARCH */
.search-bar{display:flex;gap:8px;margin-bottom:1rem;align-items:center}
.search-input{flex:1;padding:8px 12px;border:1px solid var(--g200);border-radius:8px;font-size:13px;font-family:'Poppins',sans-serif;outline:none;background:var(--white)}
.search-input:focus{border-color:var(--purple)}
/* CONFIG */
.config-section{margin-bottom:1.5rem}
.config-section-title{font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;color:var(--navy);margin-bottom:0.75rem;padding-bottom:8px;border-bottom:1px solid var(--g200)}
.user-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--g100)}
.user-row:last-child{border-bottom:none}
.u-avatar{width:34px;height:34px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;font-family:'Poppins',sans-serif;flex-shrink:0}
.u-info{flex:1}
.u-name{font-size:13px;font-weight:500;color:var(--t1)}
.u-email{font-size:11px;color:var(--t3)}
.u-actions{display:flex;gap:6px;align-items:center}
.role-select{padding:4px 8px;border:1px solid var(--g200);border-radius:6px;font-size:11px;font-family:'Poppins',sans-serif;color:var(--t1);background:var(--white);cursor:pointer}
.toggle{width:36px;height:20px;background:var(--g300);border-radius:10px;cursor:pointer;position:relative;transition:background 0.2s;flex-shrink:0;border:none}
.toggle.on{background:var(--green)}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform 0.2s}
.toggle.on::after{transform:translateX(16px)}
/* PIPELINE KANBAN */
.kanban{display:flex;gap:10px;overflow-x:auto;padding-bottom:1rem}
.kanban-col{min-width:200px;max-width:200px;background:var(--g100);border-radius:10px;padding:10px}
.kanban-col-title{font-size:11px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.kanban-count{background:var(--white);color:var(--t2);font-size:10px;padding:1px 6px;border-radius:10px}
.kanban-card{background:var(--white);border:1px solid var(--g200);border-radius:8px;padding:10px;margin-bottom:6px;cursor:pointer;transition:box-shadow 0.15s}
.kanban-card:hover{box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.kc-empresa{font-size:12.5px;font-weight:500;color:var(--t1);margin-bottom:4px}
.kc-contacto{font-size:11px;color:var(--t3)}
.kc-valor{font-size:11px;font-weight:600;color:var(--purple);margin-top:6px}
/* OCUPACIÓN PANTALLAS */
.ocu-plaza{margin-bottom:1rem}
.ocu-plaza-name{font-size:12px;font-weight:600;color:var(--navy);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.ocu-bar{height:8px;background:var(--g200);border-radius:4px;overflow:hidden;margin-bottom:2px}
.ocu-fill{height:100%;border-radius:4px;background:var(--purple);transition:width 0.5s}
.ocu-pct{font-size:11px;color:var(--t3)}
/* SCROLLBAR HORIZONTAL TABLAS */
#crm-tabla-wrap{overflow:auto;-webkit-overflow-scrolling:touch;max-height:70vh;position:relative}
#crm-tabla-wrap::-webkit-scrollbar{height:8px;width:6px}
#crm-tabla-wrap::-webkit-scrollbar-track{background:rgba(107,63,160,0.08);border-radius:3px}
#crm-tabla-wrap::-webkit-scrollbar-thumb{background:rgba(107,63,160,0.45);border-radius:3px}
#crm-tabla-wrap::-webkit-scrollbar-thumb:hover{background:rgba(107,63,160,0.7)}
/* Header is extracted via JS — no CSS sticky needed */
.crm-tbl thead th{z-index:auto;background:#F3F0F8;border-bottom:2px solid rgba(107,63,160,0.45)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap::-webkit-scrollbar{height:6px}
.tbl-wrap::-webkit-scrollbar-track{background:rgba(107,63,160,0.08);border-radius:3px}
.tbl-wrap::-webkit-scrollbar-thumb{background:rgba(107,63,160,0.45);border-radius:3px}
.card{overflow-x:auto}
.card::-webkit-scrollbar{height:6px}
.card::-webkit-scrollbar-track{background:rgba(107,63,160,0.08)}
.card::-webkit-scrollbar-thumb{background:rgba(107,63,160,0.45);border-radius:3px}
/* BORDES GLOBALES TABLAS */
table{border-collapse:collapse}
table th{border:1px solid rgba(107,63,160,0.3)!important;background:rgba(107,63,160,0.06)!important}
table td{border:1px solid rgba(107,63,160,0.18)!important}
table tr:last-child td{border-bottom:1px solid rgba(107,63,160,0.18)!important}
/* CRM COLUMN MENU */
/* INLINE EDITING */
.crm-cell-edit{outline:none;border:1.5px solid #6B3FA0!important;border-radius:4px;background:#fff!important;padding:4px 6px;min-width:80px;font-family:'Poppins',sans-serif;font-size:12px;color:var(--navy)}
.crm-cell-saving{opacity:0.5}
td[contenteditable='true']:focus{outline:2px solid rgba(107,63,160,0.4);border-radius:3px;background:rgba(107,63,160,0.04)}
td[contenteditable='true']:hover{background:rgba(107,63,160,0.06)!important;cursor:text}
.crm-checkbox-cell{text-align:center;cursor:pointer;user-select:none;font-size:16px}
.crm-checkbox-cell:hover{background:rgba(107,63,160,0.08)!important}
.crm-money-cell{text-align:right;font-family:'Poppins',sans-serif}
/* COLUMN RESIZE */
.crm-tbl th{resize:horizontal;overflow:auto}
.crm-col-menu-btn{opacity:0;padding:2px 5px;border:none;background:#6B3FA0;border-radius:4px;font-size:10px;cursor:pointer;color:#fff;line-height:1;flex-shrink:0;transition:opacity 0.15s}
.crm-tbl th:hover .crm-col-menu-btn{opacity:1}
.crm-th-wrap{position:relative;display:flex;align-items:center;gap:4px;cursor:default}
.crm-col-menu-btn{opacity:0;padding:2px 5px;border:none;background:rgba(107,63,160,0.12);border-radius:4px;font-size:11px;cursor:pointer;color:#6B3FA0;line-height:1;flex-shrink:0;font-weight:700;transition:all 0.15s}
.crm-tbl th:hover .crm-col-menu-btn{opacity:1}
.crm-col-menu-btn:hover{background:#6B3FA0;color:#fff}
/* RESIZE HANDLE */
.crm-col-menu{position:fixed;background:var(--white);border:0.5px solid var(--g200);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.16);z-index:9999;min-width:180px;padding:4px 0}
.crm-col-menu-item{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:12px;color:var(--t1);cursor:pointer;font-family:'Poppins',sans-serif}
.crm-col-menu-item:hover{background:var(--g50)}
.crm-col-menu-sep{height:1px;background:var(--g100);margin:4px 0}
/* CRM BATERÍA — indicador visual de probabilidad de cierre */
.crm-battery{display:inline-block;position:relative;width:56px;height:20px;background:#fff;border:1.2px solid #CBD5E1;border-radius:4px;overflow:hidden;vertical-align:middle}
.crm-battery::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:3px;height:9px;background:#CBD5E1;border-radius:0 2px 2px 0}
.crm-battery-fill{position:absolute;left:0;top:0;bottom:0;transition:width 300ms cubic-bezier(0.4,0,0.2,1);z-index:1;border-radius:2px 0 0 2px}
.crm-battery-label{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#1E293B;font-family:'Poppins',sans-serif;letter-spacing:-0.02em;text-shadow:0 0 2px rgba(255,255,255,0.9),0 0 4px rgba(255,255,255,0.6)}
.crm-battery-recent .crm-battery-fill::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.5) 50%,transparent 100%);animation:crm-battery-shimmer 1.8s infinite}
@keyframes crm-battery-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
/* CRM PIPELINE */
.crm-tab{padding:8px 16px;border:none;background:transparent;font-size:12.5px;font-weight:500;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:'Poppins',sans-serif}
.crm-tab.active{color:var(--purple);border-bottom-color:var(--purple);font-weight:600}
.crm-tab:hover{color:var(--t1)}
.crm-tool-btn{padding:5px 12px;border:0.5px solid var(--g200);border-radius:6px;background:var(--white);font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;font-family:'Poppins',sans-serif}
.crm-tool-btn:hover{background:var(--g100)}
.crm-ej-chip{padding:4px 12px;border:0.5px solid var(--g200);border-radius:20px;background:var(--white);font-size:11px;font-weight:500;color:var(--t2);cursor:pointer;font-family:'Poppins',sans-serif}
.crm-ej-chip.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.crm-section{margin-bottom:1.5rem}
.crm-section-header{display:flex;align-items:center;gap:8px;padding:8px 0;cursor:pointer;user-select:none}
.crm-section-dot{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.crm-section-name{font-size:13px;font-weight:600;color:var(--navy)}
.crm-section-count{font-size:11px;color:var(--t3);background:var(--g100);padding:2px 8px;border-radius:10px}
.crm-tbl{width:100%;min-width:900px;border-collapse:separate;border-spacing:0;font-size:12px;border:1.5px solid rgba(107,63,160,0.35)}
.crm-tbl th{font-size:10px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:0.05em;padding:8px 10px;text-align:left;border-right:1px solid rgba(107,63,160,0.25);background:#F3F0F8;border-bottom:2px solid rgba(107,63,160,0.45);white-space:nowrap;position:relative;overflow:visible}
/* Sticky columns disabled — only vertical sticky header active */
th.crm-sticky-chk,th.crm-sticky-cliente,th.crm-sticky-gladiator,th.crm-sticky-cliente-nochk,th.crm-sticky-gladiator-nochk{background:#F3F0F8;z-index:10}
.crm-tbl th:last-child{border-right:none}
.crm-tbl td{padding:9px 10px;border-bottom:0.5px solid rgba(107,63,160,0.1);border-right:0.5px solid rgba(107,63,160,0.06);color:var(--t1);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#fff}
.crm-tbl tr:hover td{background:#F5F3FF}
.crm-row:hover .crm-row-menu-btn{opacity:1!important}
/* Redimensionar columnas */
/* Botón ··· notorio */
.crm-col-menu-btn{opacity:0;padding:2px 6px;border:none;background:#EDE9FE;border-radius:4px;font-size:11px;font-weight:700;cursor:pointer;color:#6B3FA0;line-height:1;flex-shrink:0;transition:opacity 0.15s}
.crm-tbl th:hover .crm-col-menu-btn{opacity:1}
/* Tablas generales con bordes morados sutiles */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl thead tr th{font-size:10px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:0.05em;padding:8px 10px;text-align:left;border-bottom:2px solid rgba(107,63,160,0.45);border-right:1px solid rgba(107,63,160,0.25);background:rgba(107,63,160,0.06)}
.tbl thead tr th:last-child{border-right:none}
.tbl tbody tr td{padding:9px 10px;border-bottom:0.5px solid rgba(107,63,160,0.1);border-right:0.5px solid rgba(107,63,160,0.06);color:var(--t1);vertical-align:middle}
.tbl tbody tr td:last-child{border-right:none}
.tbl tbody tr:hover td{background:rgba(107,63,160,0.05)}
/* ── Campañas: tabla con scroll contenido en viewport ─────────── */
@media(min-width:769px){#solicitudes-table{height:calc(100vh - 220px);overflow:auto;border:1.5px solid rgba(107,63,160,0.35);border-radius:8px;min-height:300px}#sol-tbl thead{position:sticky;top:0;z-index:3}}
.sol-th{position:relative}.crm-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;flex-shrink:0}
.crm-st{display:inline-flex;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;white-space:nowrap}
.crm-tp{display:inline-flex;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:600}
/* TICKET MODAL */
.tk-step{padding:1.25rem;border-bottom:1px solid var(--g100)}
.tk-step-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:1rem}
.tk-step-num{width:28px;height:28px;border-radius:50%;background:var(--purple);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.tk-step-title{font-size:14px;font-weight:500;color:var(--navy)}
.tk-step-sub{font-size:11px;color:var(--t3);margin-top:2px}
.tk-label{font-size:11px;color:var(--t2);font-weight:500;margin-bottom:4px}
.tk-select,.tk-input{width:100%;padding:8px 10px;border:1px solid var(--g200);border-radius:8px;font-size:12px;color:var(--t1);background:var(--white);font-family:"Poppins",sans-serif}
.tk-textarea{width:100%;padding:8px 10px;border:1px solid var(--g200);border-radius:8px;font-size:12px;color:var(--t1);background:var(--white);font-family:"Poppins",sans-serif;min-height:80px;resize:vertical}
.tk-city-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;border:1.5px solid var(--g200);border-radius:10px;background:var(--white);cursor:pointer;font-size:13px;font-weight:500;color:var(--t2);font-family:"Poppins",sans-serif;transition:all 0.15s}
.tk-city-btn.active{border-color:var(--purple);background:var(--purple-soft);color:var(--purple)}
.tk-chip{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--g200);border-radius:8px;background:var(--white);cursor:pointer;font-size:12px;font-weight:500;color:var(--t2);font-family:"Poppins",sans-serif;text-align:left;transition:all 0.15s}
.tk-chip.active{border-color:var(--purple);background:var(--purple-soft);color:var(--purple)}
.tk-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tk-alert-yellow{background:#FFFBEB;border:1px solid #FDE68A;border-radius:8px;padding:8px 12px;font-size:11px;color:#92400E;margin-top:10px}
.tk-alert-blue{background:var(--cyan-soft);border:1px solid #BAE6FD;border-radius:8px;padding:8px 12px;font-size:11px;color:#0369A1}
.tk-pantalla-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--g200);border-radius:20px;background:var(--white);cursor:pointer;font-size:11px;font-weight:500;color:var(--t2);margin:3px;font-family:"Poppins",sans-serif}
.tk-pantalla-chip.active{border-color:var(--purple);background:var(--purple-soft);color:var(--purple)}
/* LOADER */
.loader{display:flex;align-items:center;justify-content:center;padding:2rem;color:var(--t3);font-size:13px;gap:8px}
.spin{width:16px;height:16px;border:2px solid var(--g200);border-top-color:var(--purple);border-radius:50%;animation:spin 0.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== MEDIA QUERIES ===== */


/* ===== PRINT ===== */
@media print{
body{background:white}
.sidebar,.topbar,#ai-chat-btn,#ai-chat-panel,#hamburger-btn,#mobile-overlay{display:none !important}
.main{margin:0}
.app-body{display:block}
}

/* ===== TABLET (≤900px) ===== */

/* ===== PCR TESTIGOS — LAYOUT DESKTOP ===== */
@media(min-width:769px){
  .pcr-testigos-flex {
    gap:1.5rem !important;
  }

  .pcr-filter-panel {
    width:240px !important;
    border-radius:12px !important;
    padding:1.25rem !important;
    box-shadow:0 1px 4px rgba(0,0,0,0.04) !important;
  }

  .pcr-content-panel {
    background:var(--white) !important;
    border:1px solid var(--g200) !important;
    border-radius:12px !important;
    padding:1.5rem !important;
    box-shadow:0 1px 4px rgba(0,0,0,0.04) !important;
  }

  #pcr-testigos-empty {
    min-height:220px !important;
  }

  #pcr-testigos-grid {
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important;
    gap:14px !important;
  }

  #pcr-tf-campana,
  #pcr-tf-centro {
    border-radius:8px !important;
    padding:8px 10px !important;
    font-size:12px !important;
  }
}

@media(max-width:900px){
.sidebar{width:180px}
.main{margin-left:0}
}

/* ===== MOBILE (≤768px) ===== */
@media(max-width:768px){
/* Sidebar: hidden by default, slide in from left */
.sidebar{
position:fixed !important;
left:-280px !important;
top:0 !important;
bottom:0 !important;
width:260px !important;
z-index:1001 !important;
transition:left 0.3s ease !important;
box-shadow:4px 0 20px rgba(0,0,0,0.3) !important;
overflow-y:auto !important;
}
.sidebar.open{
left:0 !important;
}

/* Main content: full width */
.app-body{flex-direction:column}
.main{margin-left:0 !important;width:100% !important}

/* Topbar: full width, taller on mobile */
.topbar{
left:0 !important;
padding:0 16px !important;
height:76px !important;
}
.topbar .tb-right{display:none !important}
.tb-wordmark{font-size:30px !important}
.tb-wordmark-mx{font-size:20px !important}
#hamburger-btn{font-size:28px !important;padding:8px !important}
.tb-wordmark{padding-right:12px !important}
#sb-user-card{display:flex !important}
#page-pcr .pcr-testigos-flex{flex-direction:column !important}
#page-pcr .pcr-testigos-flex>div:first-child{width:100% !important}
.nav-item[data-page="notificaciones"],.nav-item[data-page="config"]{display:flex !important}
#sb-section-sistema{display:block !important}
.sb-section:last-of-type{display:block !important}


/* Page header: stack vertically */
.ph{flex-direction:column !important;gap:10px !important;align-items:flex-start !important}
.ph-right{width:100% !important;flex-wrap:wrap !important;gap:8px !important}
.ph-title{font-size:20px !important}

/* Stats cards: 2 columns */
.stats-row{grid-template-columns:1fr 1fr !important;gap:8px !important}

/* Forms: single column */
.form-grid{grid-template-columns:1fr !important}

/* Modals: full width */
.modal{
width:95vw !important;
max-width:95vw !important;
max-height:92vh !important;
margin:4vh auto !important;
border-radius:12px !important;
}
.modal-body{max-height:72vh !important;overflow-y:auto !important}

/* Cards: less padding */
.card{padding:0.75rem !important}

/* Tables: horizontal scroll */
.card table{min-width:600px}

/* Tabs: wrap */
.tab-bar{flex-wrap:wrap !important;gap:4px !important}

/* Login: responsive */
.login-card{width:90vw !important;max-width:360px !important;padding:1.5rem !important}
.login-wordmark{font-size:36px !important}
.login-wordmark .mx{font-size:24px !important}

/* Cover/PCR report */
.cover{padding:24px 16px !important}
.cover-main h1{font-size:28px !important}
.cover-meta{flex-wrap:wrap !important;gap:12px !important}
.section{padding:24px 16px !important}
.section-title{font-size:24px !important}
.pcr-foto-grid{grid-template-columns:1fr !important}

/* Chat beHind: full width */
#ai-chat-panel{
width:calc(100vw - 16px) !important;
height:70vh !important;
bottom:8px !important;
right:8px !important;
border-radius:12px !important;
}
#ai-chat-btn{
bottom:16px !important;
right:16px !important;
width:48px !important;
height:48px !important;
}

/* Pipeline CRM — móvil */
/* Tabs: scroll horizontal sin wrap */
#page-pipeline [id="crm-tabs"]{overflow-x:auto !important;flex-wrap:nowrap !important;-webkit-overflow-scrolling:touch !important}
.crm-tab{font-size:11px !important;padding:6px 10px !important;white-space:nowrap !important}

/* Botones de herramientas: wrap en 2 filas */
#page-pipeline .crm-tool-btn{font-size:11px !important;padding:4px 8px !important}

/* Tabla: scroll horizontal + vertical para sticky header */
#crm-tabla-wrap{overflow:auto !important;-webkit-overflow-scrolling:touch !important;max-height:70vh !important}
.crm-tbl{min-width:800px !important}

/* Vista Lista: cards apiladas */
#pipeline-lista-content .crm-section{margin-bottom:1rem !important}
#pipeline-lista-content .crm-card{padding:10px !important;font-size:12px !important}

/* Kanban: scroll horizontal, columnas fijas */
#pipeline-kanban .kanban{flex-wrap:nowrap !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch !important;padding-bottom:1rem !important}
.kanban-col{min-width:180px !important;max-width:180px !important;padding:8px !important}
.kanban-card{padding:8px !important;font-size:11px !important}

/* Gráfico: altura adaptada */
#pipeline-grafico-content canvas{max-width:100% !important;height:auto !important}

/* Solicitudes table */
#sol-tbl{min-width:700px !important}

/* KPI charts */
.chart-container{min-height:250px !important}

/* Notifications/config */
.config-grid{grid-template-columns:1fr !important}

/* User menu dropdown */
.user-dropdown{right:0 !important;left:auto !important}
}

/* ===== DASHBOARD MOBILE ===== */
@media(max-width:768px){
/* KPI metrics: 2x2 grid */
.metrics-grid{grid-template-columns:1fr 1fr !important;gap:8px !important}
/* Cards below metrics: single column */
.grid2{grid-template-columns:1fr !important;gap:12px !important}
}

/* ===== SMALL MOBILE (≤480px) ===== */
@media(max-width:480px){
.stats-row{grid-template-columns:1fr !important}
.topbar{padding:6px 10px !important}
.ph-title{font-size:18px !important}
.login-wordmark{font-size:30px !important}
.login-wordmark .mx{font-size:20px !important}
.login-card{padding:1.25rem !important}
.modal{width:98vw !important;max-width:98vw !important}
#ai-chat-panel{
width:calc(100vw - 8px) !important;
height:75vh !important;
bottom:4px !important;
right:4px !important;
}
}


/* ── KPI REPORTES — RESPONSIVO PREMIUM ──────────────────────── */
#page-reportes .metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 1.25rem;
}

/* Barra de filtros KPI */
#page-reportes > div:nth-child(2) {
  border-radius: 12px;
}

/* Cards de gráficas — altura adaptativa */
#page-reportes .card [id^="r-chart-"] {
  min-height: 200px;
  position: relative;
}

/* Botones de tipo de gráfica — más compactos */
#page-reportes .card > div:first-child {
  gap: 6px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Título de sección */
#page-reportes > [style*="font-size:13px;font-weight:700"] {
  padding: 4px 0;
  border-left: 3px solid var(--purple);
  padding-left: 10px;
  margin-left: -2px;
}

@media (max-width: 768px) {
  /* Métricas: 2x2 en móvil */
  #page-reportes .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Métricas más compactas */
  #page-reportes .metric {
    padding: 0.75rem !important;
  }
  #page-reportes .metric-val {
    font-size: 22px !important;
  }

  /* Barra de filtros: stack vertical */
  #page-reportes > div:nth-child(2) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Divisor vertical → ocultar en móvil */
  #page-reportes > div:nth-child(2) > div[style*="width:1px"] {
    display: none !important;
  }

  /* Filtro fechas en móvil: stack */
  #page-reportes > div:nth-child(2) > div:last-child {
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* Inputs de fecha: 100% en móvil */
  #kpi-fecha-desde,
  #kpi-fecha-hasta {
    flex: 1 !important;
    min-width: 120px !important;
  }

  /* Botones ejecutivo: scroll horizontal */
  #kpi-ej-filtro {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    width: 100% !important;
  }

  /* Botones tipo gráfica: ocultar en móvil (no necesarios) */
  #page-reportes .card > div:first-child > div[style*="display:flex;gap:4px"] {
    display: none !important;
  }

  /* Charts: altura óptima en móvil */
  #page-reportes .card [id^="r-chart-"] {
    min-height: 240px !important;
  }

  /* Grid2 ya colapsa, asegurar padding */
  #page-reportes .grid2 {
    gap: 10px !important;
  }

  /* Sección labels */
  #page-reportes > [style*="font-size:13px;font-weight:700"] {
    margin-top: 1rem !important;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  /* Tablet: 2 métricas por fila */
  #page-reportes .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Charts más altos en tablet */
  #page-reportes .card [id^="r-chart-"] {
    min-height: 220px;
  }
}

@media (min-width: 1201px) {
  /* Desktop: charts bien espaciados */
  #page-reportes .card [id^="r-chart-"] {
    min-height: 240px;
  }
}

/* ── CRM MÓVIL · Pipeline CRM responsive ── */
@media (max-width: 767px) {

  /* Toolbar: colapsar a 3 botones esenciales */
  #page-pipeline > div:nth-child(3) {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Ocultar botones extra en móvil */
  .crm-tool-btn[onclick*="toggleCRMSort"],
  .crm-tool-btn[onclick*="toggleCRMGroup"],
  #crm-btn-delete {
    display: none !important;
  }

  /* Botón Buscar y Filtrar: más compactos */
  .crm-tool-btn {
    padding: 7px 10px;
    font-size: 11px;
  }

  /* Tabs del CRM: iconos apilados verticalmente */
  .crm-tab {
    font-size: 10px;
    padding: 6px 2px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.2;
  }

  /* Kanban: snap scroll horizontal */
  #pipeline-kanban {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  #pipeline-kanban > div {
    scroll-snap-align: start;
  }

  /* Vista lista: padding lateral */
  #crm-view-lista {
    padding: 0 2px;
  }

  /* Gráfico: grid 1 columna en móvil */
  #pipeline-grafico-content > div:last-child {
    grid-template-columns: 1fr !important;
  }
  #pipeline-grafico-content > div:first-child {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}