:root{--n:#082f56;--b:#1473e6;--y:#ffd43b;--bg:#f3f6fa;--t:#172033;--m:#6f7a8b;--l:#e2e8f0}
*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--t)}button,input,select,textarea{font:inherit}.hidden{display:none!important}
.login-view{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#031f3a,#0a558f);padding:20px}.login-shell{width:min(900px,96vw);display:grid;grid-template-columns:1.1fr .9fr;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 30px 80px #00152d99}.login-info{padding:55px;color:#fff;background:linear-gradient(145deg,var(--n),#08609c)}.login-info>b{background:var(--y);color:var(--n);padding:8px 15px;border-radius:9px;font-size:21px}.login-info h1{font-size:43px;line-height:1.08;margin:30px 0 15px}.login-info p{color:#d4e6f5;line-height:1.6}.login-info span{display:block;margin:12px 0}.login-card{padding:55px 45px}.login-card>small{color:var(--b);font-weight:900;letter-spacing:2px}.login-card h2{font-size:32px;margin:12px 0 5px}.login-card p,.login-card em{color:var(--m);font-style:normal}.login-card label{display:block;font-size:12px;font-weight:800;margin:15px 0 6px}.login-card input{width:100%;padding:13px;border:1px solid var(--l);border-radius:10px}.login-card button{width:100%;padding:14px;margin:20px 0 13px;border:0;border-radius:10px;background:var(--b);color:#fff;font-weight:800}
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}aside{background:linear-gradient(180deg,var(--n),#052744);color:#fff;padding:20px 14px;display:flex;flex-direction:column;height:100vh;position:sticky;top:0}.brand{padding:7px 11px 25px}.brand b{display:block;color:var(--y);font-size:23px}.brand span{font-size:10px;letter-spacing:2px}nav{display:grid;gap:6px}nav button{border:0;background:transparent;color:#dce8f3;padding:12px;border-radius:10px;text-align:left}nav button:hover,nav button.active{background:#ffffff18}nav em{float:right;background:var(--y);color:var(--n);border-radius:20px;padding:2px 7px;font-style:normal;font-size:10px}.userbox{margin-top:auto;border-top:1px solid #ffffff25;padding-top:14px;display:grid;grid-template-columns:36px 1fr 34px;gap:8px;align-items:center}.userbox>div{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--y);color:var(--n);font-weight:900}.userbox span,.userbox small{display:block}.userbox small{color:#bad0e2;font-size:9px}.userbox button{border:0;background:#ffffff15;color:#fff;border-radius:8px;height:34px}
main{min-width:0}header{height:76px;background:#fff;border-bottom:1px solid var(--l);display:flex;align-items:center;justify-content:space-between;padding:0 22px}header h2{margin:0;font-size:21px}header p{margin:4px 0;color:var(--m);font-size:11px}#content{padding:18px}.pill{padding:9px 13px;border-radius:22px;background:#fff2c3;color:#856200;font-size:10px;font-weight:900}.pill.ok{background:#def7ec;color:#08784c}.pill.bad{background:#ffe2e2;color:#a22}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.card{background:#fff;border:1px solid var(--l);border-radius:15px;padding:17px;box-shadow:0 8px 25px #082f560d}.metric{font-size:32px;font-weight:900;margin-top:8px}.muted{color:var(--m);font-size:11px}.section{margin-top:15px}.status-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.status{border:1px solid var(--l);border-radius:11px;padding:12px}.status b{font-size:24px;display:block;margin-top:5px}
.inbox{height:calc(100vh - 112px);display:grid;grid-template-columns:305px minmax(420px,1fr) 295px;background:#fff;border:1px solid var(--l);border-radius:15px;overflow:hidden}.left{border-right:1px solid var(--l);display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.lefthead{padding:13px;border-bottom:1px solid var(--l)}.lefthead section{display:flex;justify-content:space-between;align-items:center}.lefthead h3{margin:0}.new{border:0;background:var(--b);color:#fff;width:34px;height:34px;border-radius:9px}.filters{display:grid;grid-template-columns:1fr 96px;gap:6px;margin-top:10px}.filters input,.filters select{min-width:0;padding:8px;border:1px solid var(--l);border-radius:8px;font-size:11px}.chatlist{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;overscroll-behavior:contain}.chatitem{display:grid;grid-template-columns:42px 1fr auto;gap:9px;padding:12px;border-bottom:1px solid #edf1f5;cursor:pointer}.chatitem:hover,.chatitem.active{background:#edf6ff}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#ddebfa;color:var(--n);font-weight:900}.chatitem b{font-size:12px}.preview{font-size:10px;color:var(--m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.tag{font-size:8px;background:#edf2f7;border-radius:5px;padding:3px 5px}.count{background:var(--b);color:#fff;border-radius:20px;padding:3px 6px;font-size:9px}
.center{display:flex;flex-direction:column;background:#edf4f2}.chatheader{height:65px;background:#fff;border-bottom:1px solid var(--l);padding:10px 13px;display:flex;justify-content:space-between;align-items:center}.contact{display:flex;gap:9px;align-items:center}.contact h3{margin:0;font-size:13px}.contact small{color:var(--m)}.chatheader select{padding:7px;border:1px solid var(--l);border-radius:8px;font-size:10px}.messages{flex:1;overflow:auto;padding:17px}.message{max-width:74%;background:#fff;border-radius:11px;padding:9px 11px;margin:7px 0;box-shadow:0 2px 5px #00000010;font-size:12px;white-space:pre-wrap}.message.out{margin-left:auto;background:#d9f8ca}.message small{display:block;text-align:right;color:var(--m);font-size:8px;margin-top:5px}.composerbox{background:#fff;border-top:1px solid var(--l)}.quick{display:flex;gap:5px;padding:7px 9px 0;overflow:auto}.quick button{white-space:nowrap;border:1px solid var(--l);background:#f8fafc;border-radius:18px;padding:5px 8px;font-size:8px}.composer{display:grid;grid-template-columns:auto 1fr auto;gap:7px;padding:8px}.composer input[type=file]{display:none}.attach{width:38px;height:38px;display:grid;place-items:center;background:#edf2f7;border-radius:9px}.composer input[type=text]{min-width:0;border:1px solid var(--l);border-radius:9px;padding:10px}.btn{border:0;border-radius:9px;padding:9px 12px;font-weight:800}.primary{background:var(--b);color:#fff}.yellow{background:var(--y);color:var(--n)}.ghost{background:#edf2f7}.danger{background:#ffe4e4;color:#a22}
.profile{border-left:1px solid var(--l);overflow:auto;background:#fff}.profilehead{text-align:center;padding:17px;border-bottom:1px solid var(--l)}.profilehead .avatar{width:62px;height:62px;margin:auto;font-size:20px}.profilehead h3{margin:9px 0 2px}.profilehead p{margin:0;color:var(--m);font-size:10px}.profilegroup{padding:13px;border-bottom:1px solid var(--l)}.profilegroup h4{font-size:9px;letter-spacing:1px;color:var(--m)}.field{margin:8px 0}.field label{display:block;font-size:8px;font-weight:900;color:var(--m);margin-bottom:4px}.field input,.field select,.field textarea{width:100%;padding:8px;border:1px solid var(--l);border-radius:8px;font-size:10px}.field textarea{min-height:70px}.two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pipeline{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:10px;overflow:auto}.stage{background:#e9eff5;border-radius:13px;padding:9px;min-height:calc(100vh - 130px)}.stagehead{display:flex;justify-content:space-between;padding:5px}.stagehead h3{font-size:11px;margin:0}.stagehead span{background:#fff;border-radius:15px;padding:3px 7px;font-size:9px}.pcard{background:#fff;border:1px solid var(--l);border-radius:10px;padding:10px;margin:7px 0;cursor:grab}.pcard h4{margin:0;font-size:11px}.pcard p{margin:4px 0;color:var(--m);font-size:9px}
.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid var(--l);font-size:11px;text-align:left}th{font-size:9px;color:var(--m)}.formgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.formgrid label{display:block;font-size:10px;font-weight:800;margin-bottom:4px}.formgrid input,.formgrid select,.formgrid textarea{width:100%;padding:9px;border:1px solid var(--l);border-radius:8px}.templates{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.tpl{background:#fff;border:1px solid var(--l);border-radius:13px;padding:14px}.tpl h3{margin:0 0 6px;font-size:13px}.tpl code{background:#edf2f7;padding:3px 5px;border-radius:5px;font-size:9px}.tpl p{font-size:11px;line-height:1.5}.qr{text-align:center;max-width:680px;margin:auto}.qr img{max-width:300px;width:100%}.toast{position:fixed;right:18px;top:18px;background:#172033;color:#fff;padding:12px 16px;border-radius:9px;z-index:99}
.modalback{position:fixed;inset:0;background:#00182f99;display:grid;place-items:center;z-index:90}.modal{width:min(430px,92vw);background:#fff;border-radius:15px;padding:18px}.actions{text-align:right;margin-top:13px}
@media(max-width:1200px){.inbox{grid-template-columns:290px 1fr}.profile{display:none}.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:750px){.app{grid-template-columns:70px 1fr}nav span,.brand span,.userbox section{display:none}.brand b{font-size:13px}.inbox{display:block;height:auto}.left{height:300px}.center{height:600px}.grid{grid-template-columns:1fr 1fr}.templates,.formgrid{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr}.login-info{display:none}}

.status-chip{display:inline-block;margin-top:5px;padding:4px 7px;border-radius:7px;font-size:8px;font-weight:900}
.status-REGISTRADO{background:#dff7e9;color:#08784c}
.status-MENOS-DE-30-D-AS{background:#fff1bd;color:#806000}
.status-TIENE-DEUDA{background:#ffdede;color:#a12c2c}
.status-MISMO-OPERADOR{background:#ffe7c8;color:#a35a00}
.status-NO-DESEA{background:#e8e8ec;color:#444}
.status-NO-CONTESTA{background:#dcecff;color:#175ca6}
.status-SIN-COBERTURA{background:#eadfff;color:#6932a8}
.status-AGENDADO{background:#dff7ef;color:#08784c}
.status-ES-EXTRANJERO{background:#f0f0f0;color:#555}
.management-section h3{margin:0 0 12px}
.management-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.management-card{background:#fff;border:1px solid var(--l);border-radius:14px;padding:17px;cursor:pointer;box-shadow:0 8px 22px #082f560d}
.management-card span{display:block;font-size:11px;font-weight:800}
.management-card b{display:block;font-size:30px;margin-top:8px}
.call-summary{background:#f3f6fa;border:1px solid var(--l);padding:10px;border-radius:9px;font-size:10px;line-height:1.6}

.status-counters{display:flex;gap:5px;margin-top:8px;overflow:auto}
.status-counters button{border:1px solid var(--l);background:#fff;border-radius:8px;padding:5px 7px;font-size:8px;white-space:nowrap}
.status-counters b{margin-left:5px;background:var(--n);color:#fff;border-radius:10px;padding:2px 5px}
.profile-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--l);position:sticky;top:0;background:#fff;z-index:2}
.profile-tabs button{border:0;background:#fff;padding:10px 3px;font-size:9px;color:var(--m)}
.profile-tabs button.active{color:var(--b);font-weight:900;border-bottom:2px solid var(--b)}
.profile-tab{display:none}
.profile-tab.active{display:block}
.profile-save{position:sticky;bottom:0;background:#fff;padding:10px 13px;border-top:1px solid var(--l)}
.history-item{padding:10px 0;border-bottom:1px solid var(--l)}
.history-item b,.history-item span{display:block}
.history-item b{font-size:10px}
.history-item span{font-size:8px;color:var(--m);margin-top:4px}
.alert-box{position:fixed;right:18px;bottom:18px;width:330px;max-height:360px;overflow:auto;background:#fff;border:1px solid var(--l);border-radius:14px;padding:14px;z-index:80;box-shadow:0 18px 50px #00182f33}
.alert-box>button{float:right;border:0;background:#edf2f7;border-radius:50%;width:25px;height:25px}
.alert-box h4{margin:2px 0 10px}
.alert-box>div{padding:9px;border-top:1px solid var(--l);cursor:pointer}
.alert-box>div b,.alert-box>div span{display:block}
.alert-box>div span{font-size:9px;color:var(--m);margin-top:3px}
.alert-box>div.overdue{background:#fff0f0}

.avatar-img{object-fit:cover;display:block}
.profile-avatar{width:62px;height:62px;margin:auto}
.profilehead small{display:block;color:var(--m);font-size:9px;margin:5px 15px}
.refresh-profile{margin-top:9px;font-size:9px;padding:7px 9px}
.chat-media{display:block;max-width:100%;border-radius:8px;margin-bottom:5px}
.chat-media.image{max-height:330px}
.chat-media.video{max-height:330px}
.chat-media.sticker{width:150px;background:transparent}
.message audio{width:min(290px,100%)}
.message a{color:#075fbd;text-decoration:none;font-weight:700}
.message.out a{color:#064f9a}

.diagnostic-summary p{margin:8px 0;font-size:12px}
.diag-error{color:#a22;font-weight:800}
.diagnostic-log{max-height:420px;overflow:auto;border:1px solid var(--l);border-radius:10px}
.log-row{display:grid;grid-template-columns:125px 55px 220px 1fr;gap:8px;padding:8px 10px;border-bottom:1px solid var(--l);font-size:10px;align-items:start}
.log-row b{font-size:9px}
.log-row code{font-size:9px;color:#0b4d80}
.log-row small{word-break:break-word;color:var(--m)}
.log-row.error{background:#fff0f0}
.log-row.warn{background:#fff8e5}
.log-row.info{background:#f8fbfe}
@media(max-width:900px){.log-row{grid-template-columns:1fr}.diagnostic-log{max-height:520px}}

.chatlist::-webkit-scrollbar{width:10px}
.chatlist::-webkit-scrollbar-track{background:#f1f4f7}
.chatlist::-webkit-scrollbar-thumb{background:#aebdca;border-radius:10px;border:2px solid #f1f4f7}
.chatlist::-webkit-scrollbar-thumb:hover{background:#879aaa}
.chatitem-main{min-width:0}
.chatitem-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:38px}
.chatitem-side small{font-size:8px;color:var(--m);white-space:nowrap}
.last-preview{max-width:100%;font-size:9px}
.status-SIN-GESTIONAR{background:#fff1bd;color:#806000}

.chatitem{cursor:pointer;user-select:none}
.chatitem:active{transform:translateY(1px)}
.chat-loading,.chat-open-error{
  margin:auto;
  text-align:center;
  color:var(--m);
  padding:30px;
}
.chat-loading b,.chat-loading span{display:block;margin-top:8px}
.spinner-small{
  width:32px;height:32px;border-radius:50%;
  border:4px solid #dce6ef;border-top-color:var(--b);
  animation:crm-spin .8s linear infinite;margin:auto;
}
@keyframes crm-spin{to{transform:rotate(360deg)}}
.chat-open-error>div{font-size:42px}
.chat-open-error h3{color:var(--t);margin:10px 0 5px}
.chat-open-error p{max-width:480px;margin:0 auto 14px}
.empty-chat{text-align:center;color:var(--m);padding:35px 15px}
.older-notice{
  display:block;margin:0 auto 14px;border:1px solid var(--l);
  background:#fff;border-radius:18px;padding:7px 12px;font-size:10px;
  cursor:pointer;
}
.profile-error{padding:20px;text-align:center;color:#a22}
.profile-error b,.profile-error span{display:block;margin-top:7px}
.loading-history{opacity:.78}

#visibleChatCount{font-size:10px;color:var(--m);font-weight:600}
.chatitem{contain:layout paint}
.messages{contain:layout}

.chat-placeholder{margin:auto;text-align:center;color:#6f7a8b}
.chat-placeholder>div{font-size:45px}
.chat-list-loading,.chat-list-empty,.chat-list-error{
  padding:24px 14px;text-align:center;color:var(--m)
}
.chat-list-error b,.chat-list-error span{display:block;margin-bottom:9px}
.chat-list-error button{
  border:0;border-radius:8px;background:var(--b);color:#fff;
  padding:8px 13px;font-weight:700;cursor:pointer
}
.chatitem{cursor:pointer}

/* V10.1: barra permanente de contactos */
.lefthead{
  flex:0 0 auto;
}
.chatlist{
  flex:1 1 auto;
  height:0;
  min-height:0;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable;
  overscroll-behavior-y:contain;
}
.chatlist::-webkit-scrollbar{
  display:block;
  width:12px;
}
.chatlist::-webkit-scrollbar-track{
  background:#edf1f5;
  border-left:1px solid #dde5ec;
}
.chatlist::-webkit-scrollbar-thumb{
  background:#8fa4b7;
  border-radius:10px;
  border:3px solid #edf1f5;
}
.chatlist::-webkit-scrollbar-thumb:hover{
  background:#647f96;
}

/* El chat y el cuadro de respuesta no salen de la pantalla */
.center{
  min-height:0;
  height:100%;
  overflow:hidden;
}
.chatheader{
  flex:0 0 65px;
}
.messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}
.composerbox{
  flex:0 0 auto;
  position:relative;
  z-index:3;
  background:#fff;
}
.composer input[type=text]{
  height:40px;
}
.composer button:disabled,
.quick button:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.attach.disabled{
  opacity:.55;
  cursor:not-allowed;
}


/* V12 MULTI-QR: sesiones independientes por módulo */
.qr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px;align-items:start}
.qr-card{display:flex;flex-direction:column;min-height:430px}
.qr-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.qr-card-head h3{margin:3px 0 0}
.session-module{font-weight:800;letter-spacing:.06em;color:var(--m)}
.session-number{padding:8px 10px;border-radius:9px;background:#f4f7fa}
.qr-card img{width:min(260px,100%);height:auto;align-self:center;border-radius:12px;background:#fff;padding:8px}
.qr-empty{min-height:245px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;border:1px dashed #cbd5df;border-radius:12px;color:var(--m);padding:22px}
.qr-empty b{color:#263747}
.qr-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.session-error{color:#a22;background:#fff1f1;border-radius:8px;padding:9px}
.connection-help p{margin:6px 0}

/* V12.2 - bandejas separadas por sesión WhatsApp */
.wa-inbox-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding:10px;background:#fff;border:1px solid var(--l);border-radius:12px}
.wa-tab{border:1px solid #d8e0ea;background:#f7f9fc;color:#344054;padding:9px 14px;border-radius:9px;font-size:11px;font-weight:800;cursor:pointer}
.wa-tab:hover{background:#eef5ff}
.wa-tab.active{background:var(--b);border-color:var(--b);color:#fff}


/* V12.9 - indicador visible al cambiar de bandeja */
.wa-inbox-switch-loader{position:fixed;inset:0;z-index:9999;background:rgba(245,249,252,.78);backdrop-filter:blur(1px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#123b61;font-size:16px}
.wa-inbox-switch-loader span{font-size:12px;color:#6f8294;font-weight:600}
.wa-inbox-spinner{width:36px;height:36px;border:4px solid #dbe7f2;border-top-color:#0879e8;border-radius:50%;animation:waSpin .7s linear infinite}
@keyframes waSpin{to{transform:rotate(360deg)}}