/* ═══════════════════════════════════════════════
   NexoIA Broadcast Dialer · Stylesheet
   ═══════════════════════════════════════════════ */

:root{
  --primary:#00a8e8; --primary-dim:#0086b8; --primary-glow:rgba(0,168,232,.15);
  --accent:#ff0066; --accent-dim:#cc0052; --accent-glow:rgba(255,0,102,.15);
  --black:#06080c; --dark:#0d1117; --card:#111820; --card2:#161f2b;
  --border:#1e2d3d; --border2:#2a3a4d;
  --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --purple:#a855f7;
  --text:#e2e8f0; --muted:#4a6080; --white:#ffffff;
  --mono:'DM Mono',monospace; --display:'Barlow Condensed',sans-serif; --body:'Inter',sans-serif;
  --radius:12px; --radius-sm:8px; --radius-xs:6px;
  --shadow:0 4px 24px rgba(0,0,0,.3);
  --transition:all .2s ease;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--black);color:var(--text);min-height:100vh;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(0,168,232,.06) 0%,transparent 60%);pointer-events:none;z-index:0}
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0;opacity:.5}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--text)}
img{max-width:100%;display:block}

/* ── Navigation ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px 40px;background:rgba(6,8,12,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-left{display:flex;align-items:center;gap:14px}
.nav-logo{height:28px;width:auto}
.nav-brand{font-family:var(--display);font-size:16px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.nav-brand span{color:var(--primary)}
.nav-badge{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--primary);border:1px solid rgba(0,168,232,.4);padding:3px 8px;border-radius:4px}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-user{font-family:var(--mono);font-size:11px;color:var(--muted)}
.nav-user span{color:var(--primary)}

/* ── Nav Buttons ── */
.btn-nav{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:var(--radius-xs);cursor:pointer;transition:var(--transition);text-decoration:none;display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;background:none;color:var(--text)}
.btn-nav:hover{transform:translateY(-1px)}
.btn-reload{color:var(--primary);background:rgba(0,168,232,.08);border-color:rgba(0,168,232,.3)}
.btn-reload:hover{background:rgba(0,168,232,.18);border-color:var(--primary)}
.btn-logout{color:var(--muted);border-color:var(--border)}
.btn-logout:hover{color:var(--accent);border-color:var(--accent)}

/* ── Page Layout ── */
.page{padding:100px 40px 60px;max-width:1280px;margin:0 auto;position:relative;z-index:1}
.page-label{font-family:var(--mono);font-size:10px;color:var(--primary);letter-spacing:.25em;text-transform:uppercase;margin-bottom:10px}
.page-title{font-family:var(--display);font-size:clamp(36px,4.5vw,56px);font-weight:900;line-height:.95;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.page-title .cyan{color:var(--primary)}
.page-title .accent{color:var(--accent)}
.page-sub{font-size:14px;color:var(--muted);margin-bottom:36px}

/* ── Stats Grid ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px 2px 0 0}
.stat-card.cyan::before{background:var(--primary)} .stat-card.green::before{background:var(--green)}
.stat-card.amber::before{background:var(--amber)} .stat-card.accent::before{background:var(--accent)}
.stat-card.purple::before{background:var(--purple)} .stat-card.red::before{background:var(--red)}
.stat-num{font-family:var(--display);font-size:38px;font-weight:900;line-height:1}
.stat-num.cyan{color:var(--primary)} .stat-num.green{color:var(--green)}
.stat-num.amber{color:var(--amber)} .stat-num.accent{color:var(--accent)}
.stat-num.purple{color:var(--purple)} .stat-num.red{color:var(--red)}
.stat-label{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:5px}

/* ── Cards ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--primary),transparent)}
.card-title{font-family:var(--display);font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--radius-sm);font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;padding:14px 28px;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 55%);pointer-events:none}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.btn-primary{background:var(--primary);color:var(--white)}
.btn-primary:hover:not(:disabled){background:#00bfff;box-shadow:0 8px 28px rgba(0,168,232,.4)}
.btn-accent{background:var(--accent);color:var(--white)}
.btn-accent:hover:not(:disabled){background:#ff1a75;box-shadow:0 8px 28px rgba(255,0,102,.4)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-outline:hover:not(:disabled){border-color:var(--primary);color:var(--primary);background:rgba(0,168,232,.06)}
.btn-danger{background:var(--red);color:var(--white)}
.btn-danger:hover:not(:disabled){box-shadow:0 8px 28px rgba(239,68,68,.4)}
.btn-sm{padding:8px 16px;font-size:12px;letter-spacing:1px}
.btn-lg{padding:18px 36px;font-size:17px}
.btn-block{width:100%}

/* ── Inputs ── */
.label{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
.inp{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;color:var(--text);font-family:var(--body);font-size:14px;outline:none;transition:var(--transition);-webkit-appearance:none}
.inp:focus{border-color:var(--primary);background:rgba(0,168,232,.04);box-shadow:0 0 0 3px rgba(0,168,232,.1)}
.inp::placeholder{color:rgba(255,255,255,.2)}
select.inp{cursor:pointer}
.inp-group{margin-bottom:16px}

/* ── Drop Zone ── */
.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:48px 24px;text-align:center;cursor:pointer;transition:var(--transition);background:rgba(255,255,255,.01)}
.dropzone:hover,.dropzone.dragover{border-color:var(--primary);background:rgba(0,168,232,.04)}
.dropzone.has-file{border-color:var(--green);background:rgba(34,197,94,.04)}
.dropzone-icon{font-size:36px;margin-bottom:12px;opacity:.5}
.dropzone-text{font-family:var(--mono);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.dropzone-text span{color:var(--primary);text-decoration:underline;cursor:pointer}
.dropzone-info{font-family:var(--mono);font-size:11px;color:var(--green);margin-top:8px}

/* ── Table ── */
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
table{width:100%;border-collapse:collapse}
thead{border-bottom:1px solid var(--border)}
th{padding:11px 14px;text-align:left;font-family:var(--mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;white-space:nowrap}
td{padding:12px 14px;font-size:12px;border-bottom:1px solid rgba(30,45,61,.5);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(0,168,232,.04)}

/* ── Badges ── */
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-family:var(--mono);font-size:10px;letter-spacing:.04em}
.badge-active{background:rgba(34,197,94,.1);color:var(--green);border:1px solid rgba(34,197,94,.25)}
.badge-paused{background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.25)}
.badge-completed{background:rgba(74,96,128,.1);color:var(--muted);border:1px solid var(--border)}
.badge-scheduled{background:rgba(0,168,232,.1);color:var(--primary);border:1px solid rgba(0,168,232,.25)}
.badge-audio{background:rgba(168,85,247,.1);color:var(--purple);border:1px solid rgba(168,85,247,.25)}
.badge-retell{background:rgba(0,168,232,.1);color:var(--primary);border:1px solid rgba(0,168,232,.25)}

/* ── Wizard Steps ── */
.wizard-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:36px}
.wizard-step{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);transition:var(--transition)}
.wizard-step.active{color:var(--primary)}
.wizard-step.done{color:var(--green)}
.wizard-num{width:30px;height:30px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;transition:var(--transition)}
.wizard-step.active .wizard-num{border-color:var(--primary);background:rgba(0,168,232,.15);color:var(--primary)}
.wizard-step.done .wizard-num{border-color:var(--green);background:rgba(34,197,94,.15);color:var(--green)}
.wizard-line{width:40px;height:2px;background:var(--border);margin:0 8px}
.wizard-line.done{background:var(--green)}
.wizard-panel{display:none}
.wizard-panel.active{display:block}
.wizard-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:28px}

/* ── Toggle Switch ── */
.toggle-group{display:flex;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:20px}
.toggle-opt{flex:1;padding:14px 20px;text-align:center;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:var(--transition);color:var(--muted)}
.toggle-opt.active{background:var(--primary);color:var(--white)}
.toggle-opt:hover:not(.active){background:rgba(0,168,232,.06)}

/* ── Day Selector ── */
.days-grid{display:flex;gap:8px;flex-wrap:wrap}
.day-btn{width:48px;height:42px;border:1px solid var(--border);border-radius:var(--radius-xs);background:transparent;color:var(--muted);font-family:var(--mono);font-size:11px;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center}
.day-btn.active{background:var(--primary);border-color:var(--primary);color:var(--white)}
.day-btn:hover:not(.active){border-color:var(--primary);color:var(--primary)}

/* ── Progress Bar ── */
.progress{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-bar{height:100%;border-radius:3px;transition:width .5s ease}
.progress-bar.cyan{background:var(--primary)}
.progress-bar.green{background:var(--green)}
.progress-bar.accent{background:var(--accent)}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;right:24px;z-index:999;background:var(--card);border:1px solid var(--primary);border-radius:var(--radius-sm);padding:12px 18px;font-family:var(--mono);font-size:11px;color:var(--primary);opacity:0;transform:translateY(12px);transition:var(--transition);pointer-events:none;max-width:360px}
.toast.error{border-color:var(--red);color:var(--red)}
.toast.success{border-color:var(--green);color:var(--green)}
.toast.show{opacity:1;transform:translateY(0)}

/* ── Error Box ── */
.err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-xs);color:#ff7b8a;font-size:12px;padding:10px 12px;margin-top:12px;display:none;font-family:var(--body)}

/* ── Empty State ── */
.empty-state{padding:72px 40px;text-align:center;font-family:var(--mono);font-size:13px;color:var(--muted);line-height:2}
.empty-state .icon{display:block;font-size:36px;margin-bottom:10px;opacity:.3}

/* ── Summary Card ── */
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.summary-item{background:var(--dark);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px}
.summary-key{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin-bottom:4px}
.summary-val{font-size:14px;color:var(--text);font-weight:500}

/* ── Campaign Controls ── */
.controls{display:flex;gap:10px;margin-bottom:24px}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ── Login Page ── */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.login-box{width:100%;max-width:400px;position:relative;z-index:1}
.login-logo{text-align:center;margin-bottom:40px}
.login-logo img{height:48px;margin:0 auto 16px}
.login-logo h1{font-family:var(--display);font-size:32px;font-weight:900;text-transform:uppercase;letter-spacing:2px;color:var(--white)}
.login-logo h1 span{color:var(--primary)}
.login-logo p{font-family:var(--mono);font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--muted);margin-top:8px}
.login-nota{text-align:center;margin-top:20px;font-size:11px;color:rgba(255,255,255,.15);font-family:var(--mono);letter-spacing:1px;text-transform:uppercase}

/* ── CSV Preview ── */
.csv-preview{background:var(--dark);border:1px solid var(--border);border-radius:var(--radius-sm);overflow-x:auto;margin-top:12px;max-height:200px;overflow-y:auto}
.csv-preview table{font-family:var(--mono);font-size:11px}
.csv-preview th{background:var(--card);position:sticky;top:0;font-size:9px;padding:8px 10px}
.csv-preview td{padding:6px 10px;white-space:nowrap;border-bottom-color:rgba(30,45,61,.3)}

/* ── Audio Player ── */
.audio-preview{margin-top:12px;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--dark);border:1px solid var(--border);border-radius:var(--radius-sm)}
.audio-preview audio{flex:1;height:32px;accent-color:var(--primary)}
.audio-info{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ── Charts Container ── */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.chart-title{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin-bottom:14px}

/* ── Responsive ── */
@media(max-width:768px){
  nav{padding:12px 16px}
  .nav-user,.nav-badge{display:none}
  .page{padding:78px 16px 40px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .charts-grid{grid-template-columns:1fr}
  .summary-grid{grid-template-columns:1fr}
  .wizard-steps{flex-wrap:wrap;gap:4px}
  .wizard-line{width:20px}
  .controls{flex-wrap:wrap}
  .days-grid{justify-content:center}
  thead th:nth-child(n+5){display:none}
  td:nth-child(n+5){display:none}
}

@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .toggle-group{flex-direction:column}
  .wizard-actions{flex-direction:column}
  .wizard-actions .btn{width:100%}
}

/* ═══════════════════════════════════════════════
   MODO CLARO — override de variables + hardcodeados
   ═══════════════════════════════════════════════ */
:root[data-theme="light"]{
  --primary:#0087bd; --primary-dim:#006a97; --primary-glow:rgba(0,135,189,.12);
  --accent:#e11d64; --accent-dim:#b3164f; --accent-glow:rgba(225,29,100,.12);
  --black:#eef1f6; --dark:#e4e9f0; --card:#ffffff; --card2:#f5f7fa;
  --border:#dce3ea; --border2:#c6d0db;
  --green:#16a34a; --amber:#c2740a; --red:#dc2626; --purple:#9333ea;
  --text:#16202e; --muted:#5b6b7f; --white:#ffffff;
  --shadow:0 4px 20px rgba(20,30,50,.08);
  color-scheme:light;
}
:root[data-theme="light"] body::before{background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(0,135,189,.05) 0%,transparent 60%)}
:root[data-theme="light"] body::after{opacity:.18}
:root[data-theme="light"] nav{background:rgba(255,255,255,.9)}
:root[data-theme="light"] .btn::before{background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 55%)}
:root[data-theme="light"] .inp{background:#f5f7fa}
:root[data-theme="light"] .inp:focus{background:#ffffff}
:root[data-theme="light"] .inp::placeholder{color:rgba(20,30,50,.35)}
:root[data-theme="light"] .dropzone{background:rgba(20,30,50,.015)}
:root[data-theme="light"] td{border-bottom-color:rgba(20,30,50,.08)}
:root[data-theme="light"] .csv-preview td{border-bottom-color:rgba(20,30,50,.06)}
:root[data-theme="light"] .login-logo h1{color:var(--text)}
:root[data-theme="light"] .login-nota{color:rgba(20,30,50,.35)}
:root[data-theme="light"] .chip{background:rgba(20,30,50,.02)}
:root[data-theme="light"] ::-webkit-scrollbar-thumb{background:#c6d0db}