@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--bg0:#080b12;--bg1:#0e1320;--bg2:#141b2b;--bg3:#1b2438;--bgH:#212c44;--brd:#232f48;--brdL:#31405f;--t1:#eef2fa;--t2:#93a1bd;--t3:#5f6f8c;--acc:#4f8cff;--accH:#3b78f0;--accG:rgba(79,140,255,.22);--grn:#22c78a;--grnG:rgba(34,199,138,.18);--red:#f4636e;--redG:rgba(244,99,110,.18);--org:#f5b040;--orgG:rgba(245,176,64,.18);--pur:#9d7bff;--purG:rgba(157,123,255,.18);--cyn:#38cdd6;--pnk:#ec4899;--r:10px;--rs:6px;--rl:16px;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 30px -10px rgba(0,0,0,.5);--shL:0 24px 60px -12px rgba(0,0,0,.6);--mono:'JetBrains Mono',monospace;--sans:'DM Sans',sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg0);color:var(--t1);min-height:100vh;overflow-x:hidden}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg1)}::-webkit-scrollbar-thumb{background:var(--brdL);border-radius:3px}

.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(ellipse at 30% 20%,rgba(59,130,246,.08) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(139,92,246,.06) 0%,transparent 50%),var(--bg0)}
.login-box{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--rl);padding:48px 40px;width:420px;box-shadow:var(--shL)}
.login-box h1{font-size:28px;font-weight:700;margin-bottom:6px;letter-spacing:-.5px}
.login-box .subtitle{color:var(--t3);font-size:14px;margin-bottom:32px}
.login-box .logo-icon{width:56px;height:56px;margin-bottom:20px;background:linear-gradient(135deg,var(--acc),var(--pur));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff}

.form-group{margin-bottom:18px}.form-group label{display:block;font-size:13px;font-weight:500;color:var(--t2);margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:11px 14px;background:var(--bg1);border:1px solid var(--brd);border-radius:var(--rs);color:var(--t1);font-size:14px;font-family:var(--sans);transition:border-color .2s,box-shadow .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--accG)}
.form-group textarea{resize:vertical;min-height:60px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:none;border-radius:var(--rs);font-size:14px;font-weight:600;font-family:var(--sans);cursor:pointer;transition:all .2s}
.btn-primary{background:var(--acc);color:#fff}.btn-primary:hover{background:var(--accH);transform:translateY(-1px);box-shadow:0 4px 16px var(--accG)}
.btn-success{background:var(--grn);color:#fff}.btn-success:hover{box-shadow:0 4px 16px var(--grnG)}
.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{box-shadow:0 4px 16px var(--redG)}
.btn-secondary{background:var(--bg3);color:var(--t2);border:1px solid var(--brd)}.btn-secondary:hover{background:var(--bgH);color:var(--t1)}
.btn-sm{padding:6px 12px;font-size:12px}.btn-lg{padding:14px 28px;font-size:16px}.btn-block{width:100%;justify-content:center}.btn:disabled{opacity:.5;cursor:not-allowed}

.topbar{position:fixed;top:0;left:0;right:0;z-index:1000;height:64px;padding:0 24px;background:var(--bg1);border-bottom:1px solid var(--brd);display:flex;align-items:center;gap:16px}
.topbar .agent-name{font-weight:600;font-size:15px;white-space:nowrap}.topbar .divider{width:1px;height:32px;background:var(--brd)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}

.state-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono)}
.state-ready{background:rgba(16,185,129,.15);color:var(--grn);border:1px solid rgba(16,185,129,.3)}
.state-call{background:rgba(59,130,246,.15);color:var(--acc);border:1px solid rgba(59,130,246,.3);animation:pcall 2s infinite}
.state-calling{background:rgba(245,158,11,.15);color:var(--org);border:1px solid rgba(245,158,11,.3);animation:pcall 1.5s infinite}
.state-acw{background:rgba(139,92,246,.15);color:var(--pur);border:1px solid rgba(139,92,246,.3)}
.state-pause{background:rgba(90,106,132,.15);color:var(--t3);border:1px solid rgba(90,106,132,.3)}
.state-offline{background:rgba(90,106,132,.1);color:var(--t3);border:1px solid rgba(90,106,132,.2)}
.state-dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.state-call .state-dot,.state-calling .state-dot{animation:blink 1s infinite}
@keyframes pcall{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 12px var(--accG)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.timer{font-family:var(--mono);font-size:20px;font-weight:700;min-width:80px;text-align:center}
.ctrl-btn{width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .2s}
.ctrl-play{background:var(--grn);color:#fff}.ctrl-play:hover{box-shadow:0 0 20px var(--grnG);transform:scale(1.08)}
.ctrl-pause{background:var(--org);color:#fff}.ctrl-pause:hover{box-shadow:0 0 20px var(--orgG)}
.ctrl-hangup{background:var(--red);color:#fff}.ctrl-hangup:hover{box-shadow:0 0 20px var(--redG);transform:scale(1.08)}
.ctrl-call{background:var(--bg3);color:var(--grn);border:1px solid var(--brd)}.ctrl-call:hover{background:var(--grn);color:#fff}

.main-content{margin-top:64px;padding:24px}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--r);padding:20px;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.stat-card.blue::before{background:var(--acc)}.stat-card.green::before{background:var(--grn)}.stat-card.orange::before{background:var(--org)}.stat-card.red::before{background:var(--red)}.stat-card.purple::before{background:var(--pur)}.stat-card.cyan::before{background:var(--cyn)}
.stat-card .stat-label{font-size:12px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.stat-card .stat-value{font-size:32px;font-weight:700;font-family:var(--mono)}.stat-card .stat-sub{font-size:12px;color:var(--t2);margin-top:4px}

.table-wrap{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--r);overflow:hidden}
.table-header{padding:16px 20px;border-bottom:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.table-header h3{font-size:16px;font-weight:600}
.table-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.table-filters input,.table-filters select{padding:7px 12px;background:var(--bg1);border:1px solid var(--brd);border-radius:var(--rs);color:var(--t1);font-size:13px;font-family:var(--sans)}
.table-filters input:focus,.table-filters select:focus{outline:none;border-color:var(--acc)}
table{width:100%;border-collapse:collapse}
thead th{padding:12px 16px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);background:var(--bg1);border-bottom:1px solid var(--brd)}
tbody td{padding:12px 16px;font-size:13px;border-bottom:1px solid var(--brd);color:var(--t2)}
tbody tr:hover{background:var(--bgH)}tbody tr:last-child td{border-bottom:none}

.disp-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600}
.disp-venta{background:rgba(16,185,129,.15);color:var(--grn)}.disp-agendado{background:rgba(59,130,246,.15);color:var(--acc)}
.disp-no_interesa,.disp-no_interesado{background:rgba(245,158,11,.15);color:var(--org)}.disp-no_receptivo{background:rgba(239,68,68,.15);color:var(--red)}
.disp-datos_erroneos{background:rgba(139,92,246,.15);color:var(--pur)}.disp-moroso{background:rgba(236,72,153,.15);color:var(--pnk)}

/* Overlays - never cover topbar */
.call-overlay,.disp-modal,.dial-overlay{position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.call-overlay.active,.disp-modal.active,.dial-overlay.active{opacity:1;pointer-events:all}
.call-card{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--rl);padding:36px;width:500px;max-width:95vw;max-height:calc(100dvh - 88px);overflow-y:auto;box-shadow:var(--shL);transform:translateY(20px) scale(.95);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.call-overlay.active .call-card{transform:translateY(0) scale(1)}
.call-card h2{font-size:18px;margin-bottom:24px;display:flex;align-items:center;gap:10px}
.call-card .client-info{display:grid;grid-template-columns:100px 1fr;gap:12px;margin-bottom:28px}
.call-card .client-info .label{font-size:12px;color:var(--t3);text-transform:uppercase;letter-spacing:.3px;padding-top:8px}
.call-card .client-info .value{font-size:15px;font-weight:500;color:var(--t1)}
.call-card .client-info input{font-size:14px;padding:8px 10px;background:var(--bg1);border:1px solid var(--brd);border-radius:var(--rs);color:var(--t1);width:100%;font-family:var(--sans)}
.call-card .client-info input:focus{outline:none;border-color:var(--acc)}
.call-card .client-info input:disabled{opacity:.6;cursor:not-allowed}
.call-card .call-actions{display:flex;gap:12px;justify-content:center}

.disp-box{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--rl);padding:24px;width:400px;max-width:95vw;max-height:calc(100dvh - 88px);display:flex;flex-direction:column;overflow:hidden;transform:translateY(20px);transition:transform .3s}
.disp-modal.active .disp-box{transform:translateY(0)}.disp-box h3{margin-bottom:16px;font-size:16px;flex:none}
.disp-box>.btn{flex:none}
.disp-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow-y:auto;flex:1 1 auto;min-height:0;margin:0 -6px;padding:2px 6px}
.disp-opt{padding:12px;border:1px solid var(--brd);border-radius:var(--rs);background:var(--bg1);cursor:pointer;text-align:center;font-size:13px;font-weight:500;transition:all .2s;color:var(--t2)}
.disp-opt:hover{border-color:var(--acc);color:var(--acc);background:rgba(59,130,246,.08)}
.disp-opt.selected{border-color:var(--acc);background:rgba(59,130,246,.15);color:var(--acc)}

.dial-box{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--rl);padding:32px;width:340px;max-width:95vw;text-align:center;max-height:calc(100dvh - 88px);overflow-y:auto}
.dial-input{font-family:var(--mono);font-size:28px;font-weight:700;text-align:center;width:100%;padding:12px;background:var(--bg1);border:1px solid var(--brd);border-radius:var(--rs);color:var(--t1);margin-bottom:20px}
.dial-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.dial-key{width:64px;height:52px;border-radius:var(--rs);background:var(--bg3);border:1px solid var(--brd);color:var(--t1);font-size:20px;font-weight:600;cursor:pointer;transition:all .15s;margin:0 auto;font-family:var(--mono)}
.dial-key:hover{background:var(--bgH)}.dial-key:active{transform:scale(.95)}

.layout-with-sidebar{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--bg1);border-right:1px solid var(--brd);padding:20px 0;flex-shrink:0;position:fixed;top:0;bottom:0;left:0;z-index:50;display:flex;flex-direction:column}
.sidebar .logo{padding:0 20px 20px;border-bottom:1px solid var(--brd);margin-bottom:12px}
.sidebar .logo h2{font-size:18px;font-weight:700}.sidebar .logo span{font-size:11px;color:var(--t3)}
.sidebar nav{flex:1;overflow-y:auto}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:12px 20px;color:var(--t2);text-decoration:none;font-size:14px;font-weight:500;transition:all .2s;border-left:3px solid transparent}
.sidebar nav a:hover{background:var(--bgH);color:var(--t1)}
.sidebar nav a.active{background:rgba(59,130,246,.08);color:var(--acc);border-left-color:var(--acc)}
.sidebar-bottom{padding:16px 20px;border-top:1px solid var(--brd)}
.sidebar-content{margin-left:240px;flex:1;padding:24px}

.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.agent-tile{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--r);padding:16px;cursor:pointer;transition:all .2s;position:relative}
.agent-tile:hover{border-color:var(--brdL);transform:translateY(-2px)}
.agent-tile .agent-tile-name{font-weight:600;font-size:14px;margin-bottom:8px}
.agent-tile .agent-tile-state{display:flex;align-items:center;gap:8px}
.agent-tile .agent-tile-time{font-family:var(--mono);font-size:12px;color:var(--t3);margin-top:6px}

.ctx-menu{position:fixed;z-index:500;background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rs);padding:6px 0;box-shadow:var(--shL);min-width:180px;display:none}
.ctx-menu.show{display:block}
.ctx-menu-item{padding:10px 16px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:8px;color:var(--t2);transition:all .15s}
.ctx-menu-item:hover{background:var(--bgH);color:var(--t1)}

.big-number{font-size:56px;font-weight:700;font-family:var(--mono);line-height:1}

.listen-bar{position:fixed;bottom:0;left:240px;right:0;background:var(--bg3);border-top:2px solid var(--grn);padding:14px 24px;display:flex;align-items:center;gap:16px;z-index:100;transform:translateY(100%);transition:transform .3s}
.listen-bar.active{transform:translateY(0)}
.listen-bar .wave-icon{display:flex;align-items:center;gap:2px}
.listen-bar .wave-icon span{width:3px;background:var(--grn);border-radius:2px;animation:wave .8s ease-in-out infinite}
.listen-bar .wave-icon span:nth-child(1){height:12px;animation-delay:0s}
.listen-bar .wave-icon span:nth-child(2){height:20px;animation-delay:.1s}
.listen-bar .wave-icon span:nth-child(3){height:16px;animation-delay:.2s}
.listen-bar .wave-icon span:nth-child(4){height:24px;animation-delay:.3s}
.listen-bar .wave-icon span:nth-child(5){height:14px;animation-delay:.4s}
@keyframes wave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* Audio player bar */
.audio-bar{position:fixed;bottom:0;left:240px;right:0;background:var(--bg3);border-top:2px solid var(--acc);padding:12px 24px;display:flex;align-items:center;gap:16px;z-index:100;transform:translateY(100%);transition:transform .3s}
.audio-bar.active{transform:translateY(0)}
.audio-bar .audio-info{font-size:13px;color:var(--t2);min-width:200px}
.audio-bar audio{flex:1;height:36px;max-width:500px}
.audio-bar .btn{flex-shrink:0}
/* Agent bar on comercial (no sidebar) */
.audio-bar.no-sidebar{left:0}

.ring-indicator{display:flex;align-items:center;gap:8px;margin:20px 0;justify-content:center}
.ring-dot{width:10px;height:10px;border-radius:50%;background:var(--org);animation:rpulse 1.4s ease-in-out infinite}
.ring-dot:nth-child(2){animation-delay:.2s}.ring-dot:nth-child(3){animation-delay:.4s}
@keyframes rpulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

.top-list{list-style:none}.top-list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--brd)}
.top-list li:last-child{border-bottom:none}
.top-rank{width:28px;height:28px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:var(--mono);color:var(--t3)}
.top-rank.gold{background:rgba(245,158,11,.2);color:var(--org)}.top-rank.silver{background:rgba(148,163,184,.2);color:#94a3b8}.top-rank.bronze{background:rgba(180,83,9,.2);color:#b45309}
.top-name{flex:1;font-weight:500;font-size:14px}.top-value{font-family:var(--mono);font-weight:700;font-size:16px;color:var(--grn)}

.tab-bar{display:flex;gap:0;margin-bottom:24px;border-bottom:2px solid var(--brd)}
.tab-btn{padding:12px 24px;background:none;border:none;color:var(--t3);font-size:14px;font-weight:500;cursor:pointer;position:relative;font-family:var(--sans);transition:color .2s}
.tab-btn:hover{color:var(--t2)}.tab-btn.active{color:var(--acc)}
.tab-btn.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--acc)}
.tab-content{display:none}.tab-content.active{display:block}

.toast{position:fixed;top:80px;right:24px;z-index:1000;background:var(--bg3);border:1px solid var(--brd);border-radius:var(--r);padding:14px 20px;box-shadow:var(--shL);transform:translateX(120%);transition:transform .3s;font-size:14px;max-width:360px}
.toast.show{transform:translateX(0)}.toast.success{border-left:3px solid var(--grn)}.toast.error{border-left:3px solid var(--red)}

.pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px}
.pagination button{padding:6px 12px;background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rs);color:var(--t2);cursor:pointer;font-size:13px}
.pagination button:hover{background:var(--bgH)}.pagination button.active{background:var(--acc);color:#fff;border-color:var(--acc)}

/* Progress bar */
.progress-bar{height:8px;background:var(--bg1);border-radius:4px;overflow:hidden;margin-top:6px}
.progress-fill{height:100%;border-radius:4px;transition:width .3s;background:linear-gradient(90deg,var(--acc),var(--grn))}
.processing-stats{display:flex;gap:16px;font-size:12px;margin-top:6px}
.processing-stats span{display:inline-flex;align-items:center;gap:4px}
.ps-ok{color:var(--grn)}.ps-inv{color:var(--red)}.ps-rob{color:var(--org)}

/* Checkbox style */
.chk-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.chk-row input[type=checkbox]{accent-color:var(--acc);width:16px;height:16px}

/* Empty state */
.empty-state{text-align:center;padding:40px 20px;color:var(--t3)}
.empty-state .empty-icon{font-size:48px;margin-bottom:12px}

/* Robot visual */
.robot-visual{display:flex;align-items:center;gap:20px;padding:20px;background:var(--bg1);border-radius:var(--r);margin-bottom:20px}
.robot-icon{font-size:64px;line-height:1}
.robot-status{flex:1}
.robot-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}
.robot-stat{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--rs);padding:12px;text-align:center}
.robot-stat .rs-val{font-size:24px;font-weight:700;font-family:var(--mono)}
.robot-stat .rs-lbl{font-size:11px;color:var(--t3);text-transform:uppercase;margin-top:4px}

@media(max-width:768px){.sidebar{width:60px}.sidebar nav a span{display:none}.sidebar .logo h2,.sidebar .logo span{display:none}.sidebar-content{margin-left:60px}.stats-row{grid-template-columns:1fr 1fr}.listen-bar,.audio-bar{left:60px}}

/* ══════════════════════════════════════════════════════════
   PULIDO PROFESIONAL — controles de formulario y detalles
   ══════════════════════════════════════════════════════════ */

/* ── Checkboxes y radios personalizados (toda la app) ── */
input[type=checkbox],input[type=radio]{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;
  width:18px;height:18px;min-width:18px;flex:none;margin:0;
  border:1.5px solid var(--brdL);border-radius:5px;background:var(--bg1);
  cursor:pointer;display:inline-grid;place-content:center;vertical-align:-4px;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
input[type=radio]{border-radius:50%}
input[type=checkbox]::before{content:'';width:10px;height:10px;transform:scale(0);transition:transform .12s ease;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
input[type=radio]::before{content:'';width:8px;height:8px;border-radius:50%;transform:scale(0);transition:transform .12s ease;box-shadow:inset 1em 1em #fff}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--acc)}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--acc);border-color:var(--acc)}
input[type=checkbox]:checked::before,input[type=radio]:checked::before{transform:scale(1)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accG)}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:not-allowed}

/* ── Toggle switch: pon class="switch" en un checkbox de on/off ── */
input.switch{
  width:42px;height:24px;min-width:42px;border-radius:24px;border:1px solid var(--brd);
  background:var(--bg3);display:inline-block;position:relative;vertical-align:-7px;
}
input.switch::before{content:none}
input.switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--t2);transition:transform .2s,background .2s}
input.switch:checked{background:var(--grn);border-color:var(--grn)}
input.switch:checked::after{transform:translateX(18px);background:#fff}

/* ── Selects con flecha propia ── */
.form-group select,.table-filters select,select.sel{
  appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238896b0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
}

/* ── Pulido de inputs / hover ── */
.form-group input:hover:not(:focus),.form-group select:hover:not(:focus),.form-group textarea:hover:not(:focus){border-color:var(--brdL)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--t3)}

/* ── Tarjetas y tablas con más aire ── */
.card{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--r);box-shadow:0 1px 3px rgba(0,0,0,.25)}
tbody tr{transition:background .12s}
thead th{position:sticky;top:0}

/* ── Botones: micro-interacción ── */
.btn{letter-spacing:.2px}
.btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.btn-sm{border-radius:var(--rs)}

/* ── Scrollbar más fina y elegante ── */
*{scrollbar-width:thin;scrollbar-color:var(--brdL) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--brdL);border-radius:8px;border:2px solid var(--bg0)}
::-webkit-scrollbar-thumb:hover{background:var(--t3)}

/* ── Chips/etiquetas de ayuda ── */
code{background:var(--bg1);border:1px solid var(--brd);border-radius:4px;padding:1px 6px;font-family:var(--mono);font-size:.9em;color:var(--cyn)}
summary{user-select:none}
summary:hover{color:var(--t1)}

/* ══════════════════════════════════════════════════════════
   PULIDO DE VISTAS (login, dashboard, sidebar, tipografía)
   ══════════════════════════════════════════════════════════ */

/* ── Tipografía y jerarquía ── */
h1,h2,h3,h4{letter-spacing:-.02em}
h2{font-size:21px;font-weight:700;line-height:1.2}
h3{font-size:16px;font-weight:600;line-height:1.3}
.page-section p{line-height:1.5}

/* ── Login premium ── */
.login-box{position:relative;overflow:hidden;animation:loginIn .5s cubic-bezier(.16,1,.3,1)}
.login-box::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--acc),var(--pur),var(--cyn))}
.login-box .logo-icon{box-shadow:0 10px 30px var(--accG)}
@keyframes loginIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Tarjetas de stats: hover con elevación ── */
.stat-card{transition:transform .2s,border-color .2s,box-shadow .2s}
.stat-card:hover{transform:translateY(-3px);border-color:var(--brdL);box-shadow:var(--sh)}
.stat-card .stat-value{letter-spacing:-.5px}
.stat-card::before{opacity:.9}

/* ── Sidebar más elegante ── */
.sidebar nav a{border-radius:0 8px 8px 0;margin-right:10px}
.sidebar nav a.active{background:linear-gradient(90deg,rgba(59,130,246,.16),rgba(59,130,246,.03))}
.sidebar .logo h2{letter-spacing:-.3px}

/* ── Tarjeta genérica: cabecera y aire ── */
.card{transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:var(--brdL)}

/* ── Badges/estados: borde interior sutil ── */
.disp-badge{letter-spacing:.2px}
.state-badge{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}

/* ── Filas de tabla con separador más fino y hover claro ── */
tbody tr:hover{background:var(--bg3)}
tbody td{border-bottom-color:rgba(255,255,255,.04)}

/* ── Toasts con icono de color y entrada suave ── */
.toast{border-radius:var(--r);font-weight:500}

/* ── Modales: sombra y borde superior de acento ── */
.disp-box,.dial-box,.call-card{position:relative}
.disp-box::before,.call-card::before{content:'';position:absolute;top:0;left:24px;right:24px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--acc),var(--pur));opacity:.7}

/* ── Inputs numéricos y de tel con fuente mono para legibilidad ── */
input[type=number],input[type=tel]{font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════
   PULIDO VISTA COMERCIAL (softphone) y SUPERVISOR
   ══════════════════════════════════════════════════════════ */

/* ── Topbar del comercial: sombra sutil y profundidad ── */
.topbar{box-shadow:0 1px 0 rgba(255,255,255,.03),0 4px 20px rgba(0,0,0,.25)}

/* ── Botones de control (ready/pausa/colgar/llamar) ── */
.ctrl-btn{width:44px;height:44px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.ctrl-btn:hover{transform:translateY(-1px)}
.ctrl-btn:active{transform:scale(.94)}

/* ── Teclado del marcador ── */
.dial-key{border-radius:12px;transition:background .12s,transform .1s,box-shadow .12s}
.dial-key:hover{background:var(--bgH);border-color:var(--brdL);box-shadow:0 3px 10px rgba(0,0,0,.3)}
.dial-key:active{transform:scale(.92);background:var(--acc);color:#fff}

/* ── Ficha de llamada: etiqueta/valor con más jerarquía ── */
.call-card .client-info .label{font-weight:600;color:var(--t3)}
.call-card .client-info .value{letter-spacing:-.2px}

/* ── Opciones de disposición: efecto de selección más marcado ── */
.disp-opt{font-weight:600;padding:14px 12px}
.disp-opt.selected{box-shadow:0 0 0 1px var(--acc),0 4px 14px var(--accG)}

/* ── Tiles de agente (supervisor): acento e info ── */
.agent-tile{transition:transform .18s,border-color .18s,box-shadow .18s}
.agent-tile:hover{box-shadow:var(--sh)}
.agent-tile .agent-tile-name{letter-spacing:-.2px}

/* ── Número grande (supervisor): con brillo de acento ── */
.big-number{text-shadow:0 0 30px rgba(59,130,246,.25)}

/* ── Rankings top: fila con hover ── */
.top-list li{transition:background .12s;border-radius:8px;padding-left:8px;padding-right:8px;margin:0 -8px}
.top-list li:hover{background:var(--bg3)}
.top-value{letter-spacing:-.3px}

/* ── Barra de escucha (supervisor): borde de acento animado ── */
.listen-bar{box-shadow:0 -4px 24px rgba(0,0,0,.35)}

/* ── Selector de estado en topbar del comercial ── */
.state-badge{padding:6px 15px}


/* ═══════════ FICHA DE LLAMADA (Titular · Representante · Direcciones · Observaciones) ═══════════ */
#callOverlay .call-card.fichacard{width:720px;max-width:96vw;height:min(770px,calc(100dvh - 88px));padding:0;display:flex;flex-direction:column;overflow:hidden}
#callOverlay .call-card::before{display:none}
/* cabecera */
.call-top{display:flex;align-items:center;gap:15px;padding:18px 22px;border-bottom:1px solid var(--brd);background:linear-gradient(120deg,rgba(59,130,246,.10),transparent 62%)}
.call-top .avatar{width:50px;height:50px;border-radius:14px;flex:none;display:grid;place-items:center;font-weight:700;font-size:18px;color:#fff;background:linear-gradient(145deg,var(--acc),var(--pur))}
.call-top .who{flex:1;min-width:0}
.call-top .who .call-kind{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--t3)}
.call-top .who .n{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.call-top .who .m{font-size:13px;color:var(--t2)}
.call-top .who .m b{color:var(--t1);font-family:var(--mono);font-weight:600}
.call-top .who .m2{font-size:12.5px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.call-top .chip{font-size:12px;font-weight:600;color:var(--t2);background:var(--bg3);border:1px solid var(--brd);padding:5px 11px;border-radius:8px;white-space:nowrap}
.call-top .live{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:12px;letter-spacing:.03em;color:var(--grn);background:var(--grnG);padding:7px 12px;border-radius:9px;font-family:var(--mono)}
.call-top .live.done{color:var(--org);background:var(--orgG)}
.call-top .live .d{width:8px;height:8px;border-radius:50%;background:currentColor;animation:blink 1.4s infinite}
.call-top .live.done .d{animation:none}
.call-top .live .t{font-variant-numeric:tabular-nums}
/* pestañas */
.ftabs{display:flex;gap:2px;padding:7px 14px 0;border-bottom:1px solid var(--brd);overflow-x:auto;flex:none}
.ftabs .ficha-tab{appearance:none;border:0;background:transparent;color:var(--t2);font-family:var(--sans);font-size:13.5px;font-weight:600;padding:11px 15px 12px;border-radius:8px 8px 0 0;cursor:pointer;white-space:nowrap;position:relative;display:inline-flex;align-items:center;gap:7px}
.ftabs .ficha-tab:hover{color:var(--t1);background:var(--bg3)}
.ftabs .ficha-tab.active{color:var(--acc)}
.ftabs .ficha-tab.active::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2.5px;background:var(--acc);border-radius:2px}
.ftabs .cnt{font-size:11px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;background:var(--bg3);color:var(--t2)}
/* cuerpo */
.fbody{flex:1;min-height:0;overflow-y:auto;padding:20px 22px}
.ficha-panel{display:none}
.ficha-panel.active{display:block;animation:ffFade .2s ease}
@keyframes ffFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.fgrid .col2{grid-column:span 2}
.fbody .fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fbody .fld label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.03em}
.ff-req{color:var(--red);font-weight:700}
.ff-reqif{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--org);background:var(--orgG);padding:2px 7px;border-radius:5px}
.ff-lk{font-size:11px;opacity:.7}
.fbody .ff-in{width:100%;font-size:14px;padding:10px 12px;background:var(--bg1);border:1px solid var(--brd);border-radius:var(--rs);color:var(--t1);font-family:var(--sans);transition:border-color .15s,box-shadow .15s}
.fbody textarea.ff-in{resize:vertical}
.fbody .ff-in:hover:not([readonly]){border-color:var(--brdL)}
.fbody .ff-in:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--accG)}
.fbody .ff-in[readonly]{background:var(--bg0);color:var(--t2);border-style:dashed;cursor:not-allowed}
.ff-t-cups .ff-in,.cups .ff-in{font-family:var(--mono);letter-spacing:.4px;text-transform:uppercase}
.ff-note{font-size:12.5px;color:var(--t3);margin-bottom:14px}
.ff-sub{font-size:12px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 10px;display:flex;align-items:center;gap:8px}
.ff-sub::after{content:'';flex:1;height:1px;background:var(--brd)}
.errmsg{font-size:11.5px;color:var(--red);font-weight:600}
.fld.bad .ff-in{border-color:var(--red);box-shadow:0 0 0 3px var(--redG)}
/* direcciones (tarjetas) */
.gcard{border:1px solid var(--brd);border-radius:var(--r);background:var(--bg1);overflow:hidden;margin-bottom:12px}
.ghead{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--bg3);border-bottom:1px solid var(--brd)}
.ghead .idx{width:23px;height:23px;border-radius:7px;background:var(--accG);color:var(--acc);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.ghead .badge{font-size:11px;font-weight:600;color:var(--t2)}
.ghead .grow{flex:1}
.gbody{padding:15px}
.ff-rowdel{appearance:none;flex:none;width:28px;height:28px;border:1px solid var(--brd);background:var(--bg1);color:var(--t3);border-radius:var(--rs);cursor:pointer;font-size:13px;transition:.15s}
.ff-rowdel:hover{color:var(--red);border-color:var(--red)}
.ff-add-addr{appearance:none;width:100%;border:1px dashed var(--brdL);background:transparent;color:var(--t2);font-family:var(--sans);font-size:13px;font-weight:600;padding:11px;border-radius:var(--r);cursor:pointer;transition:.15s}
.ff-add-addr:hover{color:var(--acc);border-color:var(--acc)}
/* productos (checkboxes) */
.prods{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.prods.bad{outline:2px solid var(--red);outline-offset:4px;border-radius:var(--rs)}
.prod input:disabled{opacity:.5;cursor:not-allowed}
.prod:has(input:disabled){opacity:.65;cursor:default}
.prod{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--brd);border-radius:var(--rs);background:var(--bg2);cursor:pointer;font-size:13.5px;font-weight:600;transition:.15s}
.prod:hover{border-color:var(--brdL)}
.prod input{appearance:none;width:20px;height:20px;border:1.5px solid var(--brdL);border-radius:6px;display:grid;place-content:center;cursor:pointer;transition:.15s;flex:none}
.prod input::before{content:'';width:10px;height:10px;transform:scale(0);transition:transform .12s;background:#fff;clip-path:polygon(14% 44%,0 65%,43% 100%,100% 16%,80% 0,40% 62%)}
.prod input:checked{background:var(--acc);border-color:var(--acc)}
.prod input:checked::before{transform:scale(1)}
.prod:has(input:checked){border-color:var(--acc);background:var(--bg3)}
/* pie */
.call-foot{display:flex;align-items:center;gap:12px;padding:14px 22px;border-top:1px solid var(--brd);background:var(--bg2);flex:none}
.call-foot .vst{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--t2)}
.call-foot .vst .vd{width:9px;height:9px;border-radius:50%;background:var(--t3)}
.call-foot .vst.pend{color:var(--org)} .call-foot .vst.pend .vd{background:var(--org)}
@media(max-width:600px){#callOverlay .call-card.fichacard{width:96vw}.fgrid{grid-template-columns:1fr}.fgrid .col2{grid-column:auto}.prods{grid-template-columns:1fr}}
/* Pantallas bajas (portátil con escalado de Windows 125/150%): overlays a pantalla completa
   —ganan los 64px de la barra— y modales más compactos, con scroll interno. */
@media(max-height:640px){
  .call-overlay,.disp-modal,.dial-overlay{top:0}
  .disp-box{padding:16px;max-height:calc(100dvh - 20px)}
  .disp-box h3{margin-bottom:10px;font-size:15px}
  .dial-box{padding:20px;max-height:calc(100dvh - 20px)}
  .call-card{padding:22px;max-height:calc(100dvh - 20px)}
  #callOverlay .call-card.fichacard{height:calc(100dvh - 20px)}
  .call-top{padding:12px 18px}
  .call-top .avatar{width:42px;height:42px}
}

/* ═══════════ LAVADO VISUAL · componentes compartidos ═══════════ */
body{background-image:radial-gradient(1100px 550px at 88% -12%,rgba(59,130,246,.07),transparent 60%),radial-gradient(820px 460px at -6% 112%,rgba(139,92,246,.06),transparent 55%);background-attachment:fixed}
/* topbar tipo cristal */
.topbar{background:color-mix(in srgb,var(--bg1) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* tarjetas de estadística */
.stat-card{background:linear-gradient(180deg,var(--bg2),var(--bg1));box-shadow:var(--sh);transition:transform .18s ease,border-color .18s,box-shadow .18s}
.stat-card:hover{transform:translateY(-2px);border-color:var(--brdL);box-shadow:var(--shL)}
.stat-card::before{height:3px;opacity:.95;filter:saturate(1.15)}
.stat-card .stat-label{font-weight:600}
.stat-card .stat-value{letter-spacing:-.02em}
/* paneles y tablas */
.table-wrap{border-radius:var(--rl);box-shadow:var(--sh)}
.table-header h3{letter-spacing:-.01em}
thead th{letter-spacing:.06em;font-weight:600}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--bg3)}
tbody td b,tbody td strong{color:var(--t1)}
/* botones: microinteracción */
.btn{transition:transform .06s ease,filter .15s,box-shadow .2s,background .2s,color .2s,border-color .2s}
.btn-primary:hover,.btn-success:hover,.btn-danger:hover{filter:brightness(1.05)}
.btn-primary:active,.btn-success:active,.btn-danger:active,.btn-secondary:active{transform:translateY(1px)}
/* inputs: hover consistente y foco con halo */
.form-group input:hover,.form-group select:hover,.form-group textarea:hover,.table-filters input:hover,.table-filters select:hover{border-color:var(--brdL)}
.table-filters input:focus,.table-filters select:focus{box-shadow:0 0 0 3px var(--accG)}
/* sidebar admin/supervisor: item activo con acento */
.sidebar nav a{transition:background .15s,color .15s}
.sidebar nav a.active{background:linear-gradient(90deg,var(--accG),transparent);color:var(--t1);position:relative}
.sidebar nav a.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--acc)}
/* badges de disposición un poco más marcados */
.disp-badge{border:1px solid transparent}

/* ═══════════ REDISEÑO COMERCIAL (topbar segmentada, saludo, stat-cards con icono) ═══════════ */
.brand{display:flex;align-items:center;gap:10px}
.brand .brand-mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:16px;background:linear-gradient(145deg,var(--acc),var(--pur));box-shadow:0 4px 14px -2px var(--accG)}
.brand .agent-name{font-weight:700;letter-spacing:-.01em}
.state-seg{display:inline-flex;background:var(--bg3);border:1px solid var(--brd);border-radius:10px;padding:3px;gap:2px}
.state-seg button{appearance:none;border:0;background:transparent;color:var(--t2);font-family:var(--sans);font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap}
.state-seg button:hover{color:var(--t1);background:var(--bgH)}
.state-seg button.on-ready{background:var(--grn);color:#04140d;box-shadow:0 2px 8px -2px var(--grnG)}
.state-seg button.on-pause{background:var(--org);color:#1a1204}
.hello{margin:0 0 18px}
.hello h1{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.hello .hello-sub{font-size:13px;color:var(--t3)}
.stat-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.stat-top .stat-label{margin-bottom:0}
.stat-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:15px;background:var(--bg3);flex:none}
.stat-card.green .stat-ic{background:var(--grnG)}
.stat-card.blue .stat-ic{background:var(--accG)}
.stat-card.orange .stat-ic{background:var(--orgG)}
.stat-card.red .stat-ic{background:var(--redG)}

/* botón de cancelación de ruido: neutro por defecto, tinte verde suave cuando está activo */
#btnNoise{background:var(--bg3);border:1px solid var(--brd);color:var(--t2)}
#btnNoise:hover{border-color:var(--brdL);color:var(--t1)}
#btnNoise.mic-active{background:var(--grnG);border-color:transparent;color:var(--grn)}

/* topbar derecha: los tres botones (ruido, agenda, llamar) homogéneos y neutros */
.topbar-right .ctrl-btn{width:38px;height:38px;border-radius:10px;background:var(--bg2);border:1px solid var(--brd);color:var(--t2);font-size:16px;transition:.15s}
.topbar-right .ctrl-btn:hover{border-color:var(--brdL);color:var(--t1);transform:translateY(-1px);box-shadow:none}
#btnNoise{position:relative;background:var(--bg2);border:1px solid var(--brd);color:var(--t2)}
#btnNoise.mic-active{background:var(--bg2);border-color:var(--brd);color:var(--t1)}
#btnNoise.mic-active::after{content:'';position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--grn);border:2px solid var(--bg1)}

/* estado del botón de cancelación de ruido: activo = icono nítido + punto verde; inactivo = atenuado */
#btnNoise svg{display:block}
#btnNoise:not(.mic-active){color:var(--t3)}
#btnNoise.mic-active{color:var(--t1)}

/* indicador de calidad de conexión (barras de señal) */
.conn{display:inline-flex;align-items:flex-end;gap:2px;height:18px;padding:0 2px;cursor:default}
.conn i{width:3px;border-radius:1px;background:var(--t3);transition:background .25s,opacity .25s}
.conn i:nth-child(1){height:6px}.conn i:nth-child(2){height:11px}.conn i:nth-child(3){height:16px}
.conn.conn-good i{background:var(--grn)}
.conn.conn-warn i{background:var(--org)}
.conn.conn-warn i:nth-child(3){opacity:.35}
.conn.conn-bad i{background:var(--red)}
.conn.conn-bad i:nth-child(2),.conn.conn-bad i:nth-child(3){opacity:.3}

/* segmentado Ready/Pausa: bloqueado durante llamada / ACW (no se puede forzar estado) */
.state-seg.locked{opacity:.45;pointer-events:none;filter:grayscale(.35)}

/* cabecera de la ficha: más aire, menos apretado */
#callOverlay .call-top{gap:18px;padding:22px 26px}
#callOverlay .call-top .avatar{width:54px;height:54px}
#callOverlay .call-top .who{display:flex;flex-direction:column;gap:4px}
#callOverlay .call-top .who .call-kind{margin-bottom:3px}
#callOverlay .call-top .who .n{font-size:20px;line-height:1.3}
#callOverlay .call-top .who .m{font-size:13.5px}
#callOverlay .call-top .who .m2{margin-top:5px;max-width:460px}
#callOverlay .call-top .chip{margin-right:6px;padding:6px 13px}
#callOverlay .call-top .live{padding:8px 13px}

/* badge de estado en la cabecera de la ficha = mismos colores que el badge de la plataforma */
#callOverlay .call-top .live{color:var(--acc);background:rgba(59,130,246,.15)}
#callOverlay .call-top .live.live-call{color:var(--acc);background:rgba(59,130,246,.15)}
#callOverlay .call-top .live.live-calling{color:var(--org);background:rgba(245,158,11,.15)}
#callOverlay .call-top .live.live-acw{color:var(--pur);background:rgba(139,92,246,.15)}
#callOverlay .call-top .live .d{background:currentColor;animation:blink 1.4s infinite}
#callOverlay .call-top .live.live-acw .d{animation:none}

/* tag de estado editable en la ficha (modo edición) */
.edit-disp-tag{cursor:pointer;padding:7px 13px;border-radius:9px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;border:1px solid var(--brd);transition:filter .15s,border-color .15s;line-height:1.4}
.edit-disp-tag:hover{filter:brightness(1.12);border-color:var(--brdL)}

/* ─── Supervisor: iconos stat purple + tarjetas de agente con avatar y acento de estado ─── */
.stat-card.purple .stat-ic{background:var(--purG)}
.stat-card.cyan .stat-ic{background:rgba(6,182,212,.16)}
.agent-tile{background:linear-gradient(180deg,var(--bg2),var(--bg1));padding-left:19px;overflow:hidden}
.agent-tile-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.agent-av{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;font-weight:700;font-size:12.5px;color:#fff;background:linear-gradient(145deg,var(--acc),var(--pur))}
.agent-tile .agent-tile-name{margin-bottom:0}
.agent-tile::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--t3);transition:background .2s}
.agent-tile--ready::before{background:var(--grn)}
.agent-tile--call::before{background:var(--acc)}
.agent-tile--calling::before{background:var(--org)}
.agent-tile--acw::before{background:var(--pur)}
.agent-tile--pause::before{background:var(--org)}
.agent-tile--offline::before{background:var(--brd)}
.agent-tile--offline{opacity:.72}

/* ─── Supervisor: leaderboard con avatar + barra ─── */
.top-av{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;background:linear-gradient(145deg,var(--acc),var(--pur))}
.top-list li{gap:11px}
.top-list .top-name{display:flex;flex-direction:column;gap:2px}
.top-bar{display:block;height:5px;width:100%;max-width:170px;border-radius:3px;background:var(--bg3);overflow:hidden}
.top-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--grn),var(--cyn));border-radius:3px}

/* ficha: <select> igual que los inputs (alto + flecha propia) y direcciones más compactas */
.fbody select.ff-in{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238896b0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.fbody .ff-sub{margin:12px 0 9px}
.gbody{padding:13px}
.fgrid{gap:12px 14px}

/* KPIs del supervisor: compactas como la maqueta (número más pequeño, menos vacío) */
.stat-card{padding:18px 18px 16px}
.stat-card .big-number{font-size:34px;letter-spacing:-.03em;line-height:1;text-shadow:none;font-weight:700}
.stat-card .stat-top{margin-bottom:10px}

/* SSelect dentro de filtros: ancho automático (no 100%) para que queden EN FILA, no apilados */
.table-filters .ss-wrap{width:auto !important;min-width:170px}
.table-filters > div{flex:0 0 auto}

/* ═══ SSelect con la estética de la maqueta (combobox) ═══ */
.ss-trigger{background:var(--bg2)!important;border:1px solid var(--brd)!important;border-radius:8px!important;padding:8px 12px!important;min-height:38px!important;font-size:13px!important;transition:border-color .15s,box-shadow .15s!important}
.ss-trigger:hover{border-color:var(--brdL)!important}
.ss-trigger.ss-open{border-color:var(--acc)!important;box-shadow:0 0 0 3px var(--accG)!important}
.ss-caret{color:var(--t3)!important;font-size:10px!important;transition:transform .15s!important}
.ss-trigger.ss-open .ss-caret{transform:rotate(180deg)!important}
.ss-drop{background:var(--bg2)!important;border:1px solid var(--brdL)!important;border-radius:11px!important;box-shadow:var(--sh)!important;padding:8px!important;margin-top:6px!important}
.ss-item{border-radius:8px!important;border-bottom:0!important;padding:8px 10px!important;font-weight:500!important}
.ss-item:hover,.ss-item.ss-hl{background:var(--bg3)!important;color:var(--t1)!important}
.ss-item.ss-sel-current{background:var(--bg3)!important;color:var(--acc)!important}
.ss-search{padding:0 0 6px 0!important}
.ss-search input{background:var(--bg1)!important;border:1px solid var(--brd)!important;border-radius:8px!important;padding:8px 10px!important}
.ss-search input:focus{border-color:var(--acc)!important;box-shadow:0 0 0 3px var(--accG)!important}
/* inputs de filtros y fecha con la misma forma que la maqueta */
.table-filters input{background:var(--bg2)!important;border-radius:8px!important;padding:8px 11px!important;font-size:13px!important}


/* ── Compartir pantalla: aviso de autorización y barra de "compartiendo" ── */
.scr-ask{position:fixed;inset:0;z-index:600;background:rgba(4,7,13,.66);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s}
.scr-ask.show{opacity:1;pointer-events:all}
.scr-ask-box{width:420px;max-width:92vw;background:var(--bg2);border:1px solid var(--brdL);border-radius:16px;padding:26px;text-align:center;box-shadow:var(--shL)}
.scr-ask-ic{width:54px;height:54px;margin:0 auto 16px;border-radius:15px;display:grid;place-items:center;font-size:24px;background:var(--accG);color:var(--acc)}
.scr-ask-box h3{font-size:17px;font-weight:700;margin-bottom:10px}
.scr-ask-box p{font-size:13.5px;color:var(--t2);line-height:1.6;margin-bottom:22px}
.scr-ask-actions{display:flex;gap:10px}
.scr-ask-actions .cfm-btn{flex:1;font-family:inherit;font-size:14px;font-weight:600;padding:11px;border-radius:10px;cursor:pointer;border:1px solid var(--brd)}
.scr-ask-actions .cancel{background:transparent;color:var(--t1)}
.scr-ask-actions .ok{background:var(--acc);color:#fff;border-color:transparent}
.scr-live{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:590;display:none;align-items:center;gap:12px;
  background:var(--bg2);border:1px solid var(--red);border-radius:12px;padding:11px 16px;font-size:13px;box-shadow:var(--shL)}
.scr-live.show{display:flex}
.scr-live .dot{width:9px;height:9px;border-radius:50%;background:var(--red);animation:blink 1.4s infinite}

/* ── Menú de modos de cancelación de ruido ── */
.ns-menu{position:fixed;z-index:1200;min-width:250px;background:var(--bg2);border:1px solid var(--brdL);border-radius:12px;
  box-shadow:var(--shL);padding:8px;display:none}
.ns-menu.show{display:block}
.ns-menu-h{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;padding:5px 10px 9px;border-bottom:1px solid var(--brd);margin-bottom:6px}
.ns-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;background:none;color:var(--t2);
  font-family:var(--sans);padding:9px 10px;border-radius:9px;cursor:pointer;transition:.15s}
.ns-item:hover{background:var(--bg3);color:var(--t1)}
.ns-item.on{background:var(--accG)}
.ns-item.on b{color:var(--acc)}
.ns-item b{display:block;font-size:13.5px;color:var(--t1);font-weight:600}
.ns-item span:last-child{font-size:11.5px;color:var(--t3)}
.ns-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;background:var(--bg3);flex:none}
/* barra de agresividad de la cancelación de ruido */
.ns-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 10px;font-size:13.5px;color:var(--t1);font-weight:600}
.ns-slider{padding:6px 10px 10px;border-top:1px solid var(--brd);margin-top:4px}
.ns-sl-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--t2);font-weight:600;margin-bottom:8px}
.ns-sl-top b{color:var(--acc);font-size:13px}
.ns-slider input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--grn),var(--org),var(--red));outline:none}
.ns-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;border:2px solid var(--acc);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.ns-slider input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid var(--acc);cursor:pointer}
.ns-sl-legend{display:flex;justify-content:space-between;font-size:10.5px;color:var(--t3);margin-top:5px}
.ns-hint{font-size:11.5px;color:var(--t3);margin-top:9px;line-height:1.45}
.ns-row .switch{position:relative;width:42px;height:23px;flex:none}
.ns-row .switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ns-row .switch .tk{position:absolute;inset:0;border-radius:999px;background:var(--brdL);transition:.2s}
.ns-row .switch .tk::after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.2s}
.ns-row .switch input:checked+.tk{background:var(--grn)}
.ns-row .switch input:checked+.tk::after{transform:translateX(19px)}
/* el menú de ruido mantiene su ancho aunque cambie el texto de ayuda */
.ns-menu{width:280px;min-width:280px;max-width:280px;box-sizing:border-box}
.ns-hint{min-height:32px}
/* indicador de conexión en la barra derecha del comercial */
.topbar-right .conn{margin-right:2px;padding:0 4px;height:18px;cursor:default}

/* Estado pedido durante una llamada: se aplicará al cerrarla */
.state-seg button.pendiente{position:relative;border-color:var(--org)!important;color:var(--org)!important}
.state-seg button.pendiente::after{content:'⏳';position:absolute;top:-6px;right:-4px;font-size:10px}

/* Campos de fecha/hora: usan controles NATIVOS del navegador. En un panel oscuro,
   el icono del calendario salía negro sobre fondo oscuro (casi invisible). Con
   color-scheme:dark el navegador los pinta en modo oscuro y el icono se ve claro. */
input[type="date"],input[type="datetime-local"],input[type="time"],
input[type="month"],input[type="week"]{color-scheme:dark}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{opacity:.9;cursor:pointer}