:root{--primary: #2f6df6;--primary-bright: #4f9cff;--bg: #070b16;--card: #0e1626;--card-2: #0b1322;--border: #1b2740;--text: #e8eef9;--muted: #8a98b5;--st-available: #22c55e;--st-talking: #3b82f6;--st-wrap: #06b6d4;--st-break: #ef4444;--st-training: #b91c1c;--st-notready: #64748b;--st-ringing: #f59e0b;--st-offline: #475569}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:radial-gradient(1100px 620px at 50% 38%,rgba(47,109,246,.2),transparent 62%),radial-gradient(900px 500px at 85% 90%,rgba(79,156,255,.1),transparent 60%),var(--bg);background-attachment:fixed;min-height:100vh}button{cursor:pointer;border:none;border-radius:9px;padding:8px 14px;font-size:14px;font-weight:600;color:#fff}.btn-primary{background:linear-gradient(180deg,var(--primary-bright),var(--primary));box-shadow:0 4px 16px #2f6df659}.btn-danger{background:var(--st-break)}.btn-success{background:var(--st-available)}.btn-ghost{background:#1a2440;color:var(--text);border:1px solid var(--border)}button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}input,select,textarea{padding:8px 10px;border:1px solid var(--border);border-radius:9px;font-size:14px;background:var(--card-2);color:var(--text)}input::placeholder,textarea::placeholder{color:var(--muted)}.topbar{display:flex;align-items:center;gap:16px;background:#0b1322d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:12px 22px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}.brand{font-weight:800;font-size:19px;color:#fff;letter-spacing:.3px}.brand-dot{color:var(--primary-bright)}.spacer{flex:1}.module-switcher{display:flex;gap:6px;align-items:center}.module-switcher .mod{font-size:13px;padding:6px 12px;border-radius:8px;background:#ffffff0d;border:1px solid var(--border);color:#c7cddb;cursor:pointer;white-space:nowrap}.module-switcher .mod:hover:not(:disabled){background:#ffffff1f;color:#fff}.module-switcher .mod:disabled{opacity:.4;cursor:not-allowed}.module-switcher .mod.active{background:linear-gradient(135deg,var(--primary),#8b5cf6);color:#fff;border-color:transparent;font-weight:600;cursor:default}.module-switcher .mod.soon{opacity:.55;border-style:dashed}.module-switcher .mod.soon:hover{opacity:.8}.container{padding:22px;max-width:1200px;margin:0 auto}.card{background:linear-gradient(180deg,var(--card),var(--card-2));border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:16px;box-shadow:0 10px 40px #00000059}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.muted{color:var(--muted);font-size:13px}h2{margin:0 0 12px}h3{margin:0 0 10px}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}.login-card{width:350px}.login-card input{width:100%;margin-bottom:12px}.login-card button{width:100%}.hint{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.7}.error{color:#fca5a5;font-size:13px;margin-bottom:10px}.badge{display:inline-block;padding:4px 12px;border-radius:999px;color:#fff;font-weight:700;font-size:13px;text-transform:capitalize}.st-available{background:var(--st-available)}.st-talking{background:var(--st-talking)}.st-wrap_up{background:var(--st-wrap)}.st-break{background:var(--st-break)}.st-training{background:var(--st-training)}.st-not_ready{background:var(--st-notready)}.st-ringing{background:var(--st-ringing);color:#1a1300}.st-offline{background:var(--st-offline)}.dev{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--border)}.dev-registered{color:#86efac;border-color:#15532e;background:#22c55e1f}.dev-registering{color:#fcd34d;border-color:#5b4708;background:#f59e0b1f}.dev-error{color:#fca5a5;border-color:#5b1414;background:#ef444424}.dev-off{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:12px}.metric{border-radius:14px;padding:15px;color:#fff;box-shadow:0 6px 20px #0000004d}.metric .n{font-size:30px;font-weight:800;line-height:1}.metric .l{font-size:13px;opacity:.95;margin-top:6px}.m-acw{background:linear-gradient(180deg,#0891b2,#06b6d4)}.m-libre{background:linear-gradient(180deg,#16a34a,#22c55e)}.m-inactivo{background:linear-gradient(180deg,#475569,#64748b)}.m-pausa{background:linear-gradient(180deg,#dc2626,#ef4444)}.m-ring{background:linear-gradient(180deg,#d97706,#f59e0b)}.m-scan{background:linear-gradient(180deg,#0369a1,#0ea5e9)}.m-cola{background:linear-gradient(180deg,#ea580c,#f97316)}.m-hablando{background:linear-gradient(180deg,#1d4ed8,#3b82f6)}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--border);font-size:14px}th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px}.agent-row td:first-child{font-weight:600}.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.tab{background:#16203a;color:var(--text);border:1px solid var(--border)}.tab.active{background:linear-gradient(180deg,var(--primary-bright),var(--primary));border-color:transparent;box-shadow:0 4px 16px #2f6df659}.softphone{text-align:center;padding:30px}.softphone .phone{font-size:30px;font-weight:800;margin:10px 0;color:#fff}.softphone .sub{color:var(--muted);margin-bottom:20px}.call-actions{display:flex;gap:12px;justify-content:center}.disp-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:14px 0}.disp-list button{text-align:left;background:#16203a;color:var(--text);border:1px solid var(--border)}.disp-list button.sel{background:linear-gradient(180deg,var(--primary-bright),var(--primary));border-color:transparent}.pulse{animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.orb{width:130px;height:130px;border-radius:50%;margin:6px auto 20px;position:relative;background:radial-gradient(circle at 35% 30%,#d6ecff,#4f9cff 42%,#1d4ed8 74%,#0b2a6b);box-shadow:0 0 42px #4f9cff99,0 0 90px #2f6df666;animation:orbpulse 1.8s ease-in-out infinite}.orb:after{content:"";position:absolute;top:-14px;right:-14px;bottom:-14px;left:-14px;border-radius:50%;border:2px solid rgba(79,156,255,.35);animation:orbring 1.8s ease-out infinite}@keyframes orbpulse{0%,to{transform:scale(1);box-shadow:0 0 42px #4f9cff99,0 0 90px #2f6df659}50%{transform:scale(1.08);box-shadow:0 0 66px #4f9cfff2,0 0 130px #2f6df68c}}@keyframes orbring{0%{transform:scale(.9);opacity:.8}to{transform:scale(1.5);opacity:0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes shimmer{0%{background-position:-420px 0}to{background-position:420px 0}}@keyframes spin{to{transform:rotate(360deg)}}button,.tab,.badge,.chip,.metric,.card,input,select,textarea,.disp-list button,.dev{transition:transform .18s cubic-bezier(.2,.8,.25,1),box-shadow .22s ease,background .22s ease,border-color .2s ease,filter .18s ease,opacity .2s ease}.card{animation:fadeInUp .45s cubic-bezier(.2,.8,.25,1) both}.container>.card:nth-child(1){animation-delay:.02s}.container>.card:nth-child(2){animation-delay:.08s}.container>.card:nth-child(3){animation-delay:.14s}.container>.card:nth-child(4){animation-delay:.2s}.card:hover{transform:translateY(-3px);box-shadow:0 16px 50px #00000073,0 0 0 1px #4f9cff26;border-color:#4f9cff4d}button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.1)}button:active:not(:disabled){transform:translateY(0) scale(.97);filter:brightness(.95)}.btn-primary:hover:not(:disabled){box-shadow:0 8px 26px #2f6df68c}.metric{position:relative;overflow:hidden;animation:popIn .5s cubic-bezier(.2,.8,.25,1) both}.metric:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 45%);pointer-events:none}.metric:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 14px 34px #00000073}.cards .metric:nth-child(1){animation-delay:.03s}.cards .metric:nth-child(2){animation-delay:.07s}.cards .metric:nth-child(3){animation-delay:.11s}.cards .metric:nth-child(4){animation-delay:.15s}.cards .metric:nth-child(5){animation-delay:.19s}.cards .metric:nth-child(6){animation-delay:.23s}.cards .metric:nth-child(7){animation-delay:.27s}.cards .metric:nth-child(8){animation-delay:.31s}.tab{position:relative}.tab:hover:not(.active){background:#1d2a48;transform:translateY(-1px)}.tab.active{transform:translateY(-1px)}tbody tr{transition:background .15s ease}tbody tr:hover td{background:#4f9cff12}.badge:hover,.chip:hover{transform:translateY(-1px);filter:brightness(1.08)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary-bright);box-shadow:0 0 0 3px #4f9cff2e}.brand{background:linear-gradient(90deg,#fff 0%,#bcd6ff 60%,var(--primary-bright) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.login-card{animation:popIn .55s cubic-bezier(.2,.8,.25,1) both}.modal-backdrop{animation:fadeIn .2s ease both;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal-pop{animation:popIn .32s cubic-bezier(.2,.8,.25,1) both!important}.play-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:50%;background:#1a2440;color:var(--primary-bright);border:1px solid var(--border)}.play-btn:hover:not(:disabled){background:linear-gradient(180deg,var(--primary-bright),var(--primary));color:#fff;box-shadow:0 4px 16px #2f6df673}.play-btn.playing{background:linear-gradient(180deg,var(--primary-bright),var(--primary));color:#fff;box-shadow:0 0 0 3px #4f9cff38}.play-btn.playing:after{content:"";position:absolute;width:34px;height:34px;border-radius:50%;border:2px solid rgba(79,156,255,.5);animation:orbring 1.4s ease-out infinite}.play-btn svg{display:block}.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:var(--primary-bright);animation:spin .6s linear infinite;display:inline-block}.skeleton{background:linear-gradient(90deg,#121d33 25%,#1b2740 37%,#121d33 63%);background-size:840px 100%;animation:shimmer 1.4s infinite linear;border-radius:8px}*{scrollbar-width:thin;scrollbar-color:#2a3a5f transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2a3a5f,#1b2740);border-radius:10px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:#34507f;background-clip:padding-box}::-webkit-scrollbar-track{background:transparent}@media (prefers-reduced-motion: reduce){*,.card,.metric,.login-card,.modal-pop,.modal-backdrop{animation:none!important;transition:none!important}}