/* TechAgents Leads — Data Drift sobrio: negro + acento verde, mono. */
:root{
  --bg:#0a0a0a; --bg2:#111312; --panel:#141714; --line:#1f241f;
  --ink:#e8efe8; --dim:#7f8c7f; --dimmer:#566056;
  --green:#3ddc6e; --green2:#2bbd5a; --greenDk:#16331f;
  --amber:#e0b341; --red:#e0594f; --blue:#5ab0e0;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--mono); font-size:13px; line-height:1.45;
}
.hidden{display:none !important}
.accent{color:var(--green)}
.money{color:#0a0a0a; background:var(--green); padding:0 5px; border-radius:3px; font-weight:700}

/* Topbar */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; border-bottom:1px solid var(--line); background:var(--bg2);
  position:sticky; top:0; z-index:5;
}
.brand{display:flex; align-items:center; gap:12px}
.qmark{
  font-size:30px; color:var(--green); line-height:1;
  text-shadow:0 0 14px rgba(61,220,110,.5);
}
.title{font-size:17px; font-weight:700; letter-spacing:.5px}
.sub{font-size:11px; color:var(--dim)}
.topactions{display:flex; align-items:center; gap:10px}
.pill{font-size:10px; padding:3px 9px; border-radius:20px; border:1px solid var(--line); color:var(--dim)}
.pill.ok{color:var(--green); border-color:var(--greenDk)}
.pill.bad{color:var(--red); border-color:#3a1f1d}

button,.ghost{font-family:var(--mono); cursor:pointer}
.ghost{
  background:transparent; border:1px solid var(--line); color:var(--ink);
  padding:7px 12px; border-radius:6px; font-size:12px; text-decoration:none; display:inline-block;
}
.ghost:hover{border-color:var(--green2); color:var(--green)}
.primary{
  background:var(--green); color:#06140b; border:0; padding:9px 16px;
  border-radius:6px; font-weight:700; font-size:13px;
}
.primary:hover{background:var(--green2)}
.primary:disabled{opacity:.5; cursor:wait}

/* Panel extracción */
.panel{padding:16px 20px; border-bottom:1px solid var(--line); background:var(--panel)}
.extract-form{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.field{display:flex; flex-direction:column; gap:4px}
.field.grow{flex:1; min-width:160px}
.field.narrow{width:90px}
.field label{font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px}
.field .opt{text-transform:none; color:var(--dimmer)}
select,input{
  background:#0d100d; border:1px solid var(--line); color:var(--ink);
  padding:8px 10px; border-radius:6px; font-family:var(--mono); font-size:13px;
}
select:focus,input:focus{outline:none; border-color:var(--green2)}
.hint{font-size:11px; color:var(--dim); margin:10px 2px 0}

/* Feed vivo */
.feed{padding:12px 20px; background:#0c120d; border-bottom:1px solid var(--greenDk)}
.feed-head{color:var(--green); font-weight:700; margin-bottom:6px}
.spin{display:inline-block}
.feed-log{max-height:140px; overflow:auto; font-size:12px; color:var(--dim)}
.feed-log div{padding:1px 0}
.feed-log .ok{color:var(--green)}
.feed-log .err{color:var(--red)}

/* Board */
.board{padding:14px 20px 60px}
.filters{display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap}
.filters input{min-width:200px}
.count{margin-left:auto; color:var(--dim); font-size:12px}

.table-wrap{border:1px solid var(--line); border-radius:8px; overflow:hidden}
table{width:100%; border-collapse:collapse}
thead th{
  text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--dim); padding:9px 10px; background:#0f120f; border-bottom:1px solid var(--line);
  position:sticky; top:0;
}
tbody td{padding:8px 10px; border-bottom:1px solid #161a16; vertical-align:middle}
tbody tr:hover{background:#0e120e}
.neg{font-weight:600; color:var(--ink)}
.maps{color:var(--dimmer); text-decoration:none; font-size:11px}
.maps:hover{color:var(--green)}
.tel{color:var(--ink)}
.web-no{color:var(--amber); font-size:11px}
.web-yes a{color:var(--blue); text-decoration:none; font-size:11px}
.nicho{color:var(--dim); font-size:11px}
.rate{color:var(--amber)}
.notas-inp{width:140px; background:transparent; border:1px solid transparent; padding:4px 6px; color:var(--dim); font-size:11px}
.notas-inp:hover,.notas-inp:focus{border-color:var(--line); color:var(--ink)}
.del{background:transparent; border:0; color:var(--dimmer); font-size:14px}
.del:hover{color:var(--red)}

/* status select coloreado */
.st{border-radius:5px; padding:5px 6px; font-size:11px; font-weight:600; border:1px solid var(--line)}
.st-nuevo{color:var(--dim)}
.st-contactado{color:var(--blue)}
.st-respondio{color:var(--green)}
.st-interesado{color:var(--green); background:var(--greenDk)}
.st-cerrado{color:#06140b; background:var(--green)}
.st-no_interesado{color:var(--dimmer)}
.st-descartado{color:var(--red)}

.empty{padding:40px; text-align:center; color:var(--dim)}

/* etapa select coloreado */
.ep{border-radius:5px; padding:5px 6px; font-size:11px; font-weight:600; border:1px solid var(--line)}
.ep-lead{color:var(--dim)}
.ep-calificado{color:var(--blue)}
.ep-propuesta{color:var(--amber)}
.ep-negociacion{color:var(--green); background:var(--greenDk)}
.ep-cerrado-ganado{color:#06140b; background:var(--green)}
.ep-cerrado-perdido{color:var(--red)}

/* ticket inline */
.ticket-wrap{display:flex; gap:3px; align-items:center}
.ticket-monto{width:72px; background:transparent; border:1px solid transparent; padding:4px 5px; color:var(--dim); font-size:11px; font-family:var(--mono); border-radius:4px}
.ticket-monto:hover,.ticket-monto:focus{border-color:var(--line); color:var(--ink); outline:none}
.ticket-mon{font-size:11px; padding:4px 5px; border-radius:4px}

/* encargado select */
.enc{font-size:11px; padding:4px 6px; border-radius:4px}

/* botón comentarios */
.btn-cmt{background:transparent; border:1px solid var(--line); color:var(--dimmer); font-size:10px; padding:3px 7px; border-radius:4px; cursor:pointer}
.btn-cmt:hover{color:var(--green); border-color:var(--green2)}
.btn-cmt.has-cmt{color:var(--amber); border-color:var(--amber)}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; z-index:20}
.modal-box{background:var(--panel); border:1px solid var(--greenDk); border-radius:10px; width:min(720px,92vw); max-height:84vh; display:flex; flex-direction:column}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line)}
.x{background:transparent; border:0; color:var(--dim); font-size:16px}
.x:hover{color:var(--ink)}
.modal-body{padding:18px; overflow:auto; white-space:pre-wrap; font-size:13px; color:var(--ink); margin:0; line-height:1.6}

/* modal comentarios */
.cmt-list{padding:14px 18px; overflow-y:auto; max-height:260px; display:flex; flex-direction:column; gap:10px}
.cmt-item{background:#0d110d; border:1px solid var(--line); border-radius:6px; padding:9px 12px}
.cmt-meta{font-size:10px; color:var(--dimmer); margin-bottom:4px}
.cmt-texto{font-size:12px; color:var(--ink); white-space:pre-wrap}
.cmt-form{padding:12px 18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.cmt-textarea{background:#0d110d; border:1px solid var(--line); color:var(--ink); padding:8px 10px; border-radius:6px; font-family:var(--mono); font-size:12px; resize:vertical; min-height:60px}
.cmt-textarea:focus{outline:none; border-color:var(--green2)}
.cmt-autor{background:#0d110d; border:1px solid var(--line); color:var(--ink); padding:7px 10px; border-radius:6px; font-family:var(--mono); font-size:12px}
.cmt-autor:focus{outline:none; border-color:var(--green2)}
.cmt-footer{display:flex; gap:8px; align-items:center; justify-content:flex-end}
.cmt-vacio{padding:18px; text-align:center; color:var(--dimmer); font-size:12px}

/* Metricas modal — tablas y secciones */
.met-section{margin-bottom:18px}
.met-section h3{font-size:12px; color:var(--green); text-transform:uppercase; letter-spacing:.5px; margin:0 0 8px}
.met-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; margin-bottom:12px}
.met-card{background:#0d110d; border:1px solid var(--line); border-radius:6px; padding:10px 12px}
.met-card .val{font-size:22px; font-weight:700; color:var(--ink)}
.met-card .lbl{font-size:10px; color:var(--dimmer); margin-top:2px}
.met-money{font-size:12px; color:var(--amber)}
.met-table{width:100%; border-collapse:collapse; font-size:11px}
.met-table th{text-align:left; color:var(--dimmer); padding:4px 8px; border-bottom:1px solid var(--line)}
.met-table td{padding:5px 8px; border-bottom:1px solid #161a16; color:var(--ink)}
.met-table tr:last-child td{border-bottom:0}

/* Overlay de login */
.overlay-login{
  position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:1000;
  display:flex; align-items:center; justify-content:center;
}
.login-box{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:32px 28px; width:min(360px,90vw); display:flex; flex-direction:column; gap:20px;
}
.login-brand{display:flex; align-items:center; gap:12px}
.login-error{
  background:#3a1f1d; color:var(--red); border:1px solid #5a2f2c;
  border-radius:5px; padding:8px 12px; font-size:12px;
}
#form-login{display:flex; flex-direction:column; gap:10px}
#login-pass{
  background:#0d110d; border:1px solid var(--line); color:var(--ink);
  font-family:var(--mono); font-size:13px; padding:10px 12px;
  border-radius:6px; outline:none; width:100%;
}
#login-pass:focus{border-color:var(--green); box-shadow:0 0 0 2px rgba(61,220,110,.12)}

/* Botón Extraer deshabilitado por extraccionOff */
#btn-extraer[data-off]{opacity:.4; cursor:not-allowed; pointer-events:none}