@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:#0a0e17;--bg1:#111827;--bg2:#1a2236;--bg3:#1f2b42;--bgH:#253352;--brd:#2a3650;--brdL:#374766;--t1:#e8edf5;--t2:#8896b0;--t3:#5a6a84;--acc:#3b82f6;--accH:#2563eb;--accG:rgba(59,130,246,.3);--grn:#10b981;--grnG:rgba(16,185,129,.3);--red:#ef4444;--redG:rgba(239,68,68,.3);--org:#f59e0b;--orgG:rgba(245,158,11,.3);--pur:#8b5cf6;--purG:rgba(139,92,246,.3);--cyn:#06b6d4;--pnk:#ec4899;--r:10px;--rs:6px;--rl:16px;--sh:0 4px 24px rgba(0,0,0,.4);--shL:0 8px 40px 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;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:32px;width:400px;transform:translateY(20px);transition:transform .3s}
.disp-modal.active .disp-box{transform:translateY(0)}.disp-box h3{margin-bottom:20px;font-size:16px}
.disp-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.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;text-align:center}
.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}}