style.css

/* HTScanner — Tema CLARO (fondo blanco, texto negro) */
:root{
  --bg:#ffffff; --ink:#111111; --sub:#333333;
  --cyan:#2563EB; --green:#16a34a; --mag:#7c3aed;
  --warn:#b58900; --red:#cc0000; --panel:#f4f4f4; --line:#d0d0d0;
}

/* Tema OSCURO (modo noche) — UNICO bloque, sin verde neon fijo */
body.neon{
  --bg:#0d1117; --ink:#e6edf7; --sub:#9aa4b2;
  --cyan:#60a5fa; --green:#4ade80; --mag:#a78bfa;
  --warn:#fbbf24; --red:#f87171; --panel:#161b22; --line:#30363d;
}
body.neon{background:#0d1117; color:#e6edf7}
body.neon header, body.neon .panel, body.neon input, body.neon select,
body.neon .log, body.neon .findings, body.neon .metric, body.neon .fitem,
body.neon .reconitem, body.neon .aiitem, body.neon .ctrl, body.neon .fsel,
body.neon .fsearch, body.neon .report a, body.neon .authbox{
  background:#161b22; color:#e6edf7; border-color:#30363d;
}
body.neon .log .line, body.neon .fitem, body.neon .reconitem, body.neon .aiitem{
  border-left-color:var(--cyan);
}
body.neon .banner-title, body.neon .banner-status{color:#9aa4b2}
body.neon .logo span{color:var(--cyan)}
body.neon .ctrl{background:#161b22; color:#e6edf7}
body.neon .btn-theme{background:#161b22; color:var(--cyan); border:1px solid var(--cyan)}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:#ffffff;
  color:var(--ink); font-family:'Segoe UI',system-ui,sans-serif; min-height:100vh;
  overflow-x:hidden;
}
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; border-bottom:2px solid var(--line);
  background:#ffffff;
}
.logo{font-family:'Segoe UI',sans-serif; font-weight:800; font-size:26px; letter-spacing:1px;
  color:var(--ink); text-shadow:none}
.logo span{color:var(--cyan)}
header{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:10px 16px; border-bottom:1px solid var(--line); background:#fff}
.banner-right{text-align:right; margin-left:auto}
.banner-title{font-size:11px; letter-spacing:1px; color:#222; text-transform:uppercase; font-weight:700}
.banner-status{font-size:11px; letter-spacing:.5px; color:#444; margin-top:2px}
.banner-status #bannerState{font-weight:800; color:var(--green)}
.banner-status #bannerState.scanning{color:var(--warn)}
.tag{color:var(--sub); font-size:13px}
main{max-width:980px; margin:26px auto; padding:0 18px; display:flex; flex-direction:column; gap:18px}
main{max-width:980px; margin:26px auto; padding:0 18px; display:flex; flex-direction:column; gap:18px}
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px;
}
.panel h2{color:var(--ink); margin-bottom:10px; font-size:16px}
.auth p{color:var(--sub); line-height:1.5; font-size:13px; margin-bottom:12px}
.check{display:flex; gap:10px; align-items:flex-start; color:#222; font-size:13px; cursor:pointer}
.check input{margin-top:3px; accent-color:var(--green); width:18px; height:18px}
.control .inputrow{display:flex; gap:10px; flex-wrap:wrap}
#target{
  flex:1; min-width:240px; background:#ffffff; border:1px solid var(--line);
  color:var(--ink); padding:12px; border-radius:6px; font-family:inherit; font-size:14px;
  outline:none;
}
#target:focus{border-color:var(--cyan); box-shadow:0 0 6px rgba(0,102,204,.3)}
#startBtn{
  background:var(--cyan); color:#ffffff; border:none;
  padding:12px 22px; border-radius:6px; font-weight:700;
  letter-spacing:1px; cursor:pointer; transition:.2s;
}
#startBtn:hover{box-shadow:0 0 10px rgba(0,102,204,.4); transform:translateY(-1px)}
.mods{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.chip{
  border:1px solid var(--line); color:#333; padding:5px 12px; border-radius:20px;
  font-size:12px; background:#fff; transition:all .25s ease;
}
.chip.active{border-color:var(--cyan); color:var(--cyan); font-weight:700}
/* modulo corriendo: ambar pulsante */
.chip-run{border-color:#f59e0b; color:#b45309; font-weight:700;
  background:#fffbeb; animation:pulseRun 1s infinite}
@keyframes pulseRun{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.5)}50%{box-shadow:0 0 0 6px rgba(245,158,11,0)}}
/* modulo terminado: rojo claro (lo que pidio el usuario) */
.chip-done{border-color:#ef4444; color:#b91c1c; font-weight:700;
  background:#fee2e2; animation:pulseDone 1.2s ease}
@keyframes pulseDone{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}100%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
.chip-wait{border-color:#9ca3af; color:#6b7280; background:#f3f4f6}
.barwrap{position:relative; height:30px; background:#eaeaea; border:1px solid var(--line);
  border-radius:6px; overflow:hidden}
.bar{height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--green));
  transition:width .3s}
.barpct{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#111; font-weight:700; font-size:13px}

/* === Medidor OOKLA (gauge circular) === */
.ookla{display:flex; gap:24px; align-items:center; flex-wrap:wrap}
.gauge{position:relative; width:180px; height:180px; flex:0 0 auto}
.gauge svg{transform:rotate(-90deg); display:block}
.g-track{fill:none; stroke:#e6e6e6; stroke-width:14}
.g-fill{fill:none; stroke:url(#noop); stroke:var(--cyan); stroke-width:14; stroke-linecap:round;
  stroke-dasharray:540; stroke-dashoffset:540;
  filter:drop-shadow(0 0 6px rgba(0,102,204,.45));
  transition:stroke-dashoffset .25s linear, stroke .4s}
.g-center{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center}
.g-pct{font-size:40px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums;
  letter-spacing:-1px}
.g-sub{font-size:11px; color:var(--sub); margin-top:2px; max-width:120px}
.ookla-side{flex:1; min-width:240px; display:flex; flex-direction:column; gap:12px}
.ookla-stats{display:flex; gap:10px}
.ookla-stats>div{flex:1; text-align:center; background:#fff; border:1px solid var(--line);
  border-radius:8px; padding:8px 4px}
.ookla-stats span{display:block; font-size:22px; font-weight:800; color:var(--cyan);
  font-variant-numeric:tabular-nums}
.ookla-stats label{font-size:10px; color:var(--sub); letter-spacing:1px}
.ookla-mod{background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px 12px;
  font-size:13px; color:var(--ink); min-height:20px}
.ookla-mod b{color:var(--cyan)}
.nodes{display:flex; gap:10px; justify-content:space-between; margin-top:14px}
.node{flex:1; text-align:center; border:1px solid var(--line); border-radius:8px;
  padding:8px 4px; font-size:11px; color:#444; transition:.3s; position:relative}
.node .nicon{font-size:18px; display:block; margin-bottom:4px}
.node.running{border-color:var(--warn); color:var(--warn); box-shadow:0 0 10px rgba(181,137,0,.25);
  animation:pulse 1s infinite}
.node.done{border-color:var(--green); color:var(--green)}
@keyframes pulse{50%{opacity:.5}}
.loghead{color:#222; font-size:12px; letter-spacing:1px; margin-bottom:8px; font-weight:600}
.log{height:200px; overflow-y:auto; font-size:12.5px; line-height:1.55; color:#222; background:#fff;
  border:1px solid var(--line); border-radius:6px; padding:8px}
.log .line{white-space:pre-wrap; border-left:2px solid var(--line); padding:2px 0 2px 8px; margin-bottom:2px}
.log .hi{color:var(--green); border-color:var(--green); font-weight:600}
.log .warn{color:var(--warn); border-color:var(--warn)}
.findings{height:200px; overflow-y:auto; font-size:12.5px; line-height:1.55; color:#222; background:#fff;
  border:1px solid var(--line); border-radius:6px; padding:8px; display:flex; flex-direction:column; gap:8px}
.fitem{border-left:3px solid var(--cyan); background:#fff; padding:8px 12px; border-radius:4px;
  font-size:12.5px; color:#222; border:1px solid var(--line);
}
.fitem.high{border-left-color:var(--red)}
.fitem.medium{border-left-color:var(--warn)}
.fitem.low{border-left-color:var(--cyan)}
.fitem.info{border-left-color:var(--cyan)}
.fitem.high .finding-evidence, .fitem.critical .finding-evidence{border-left-color:var(--red)}
.finding-evidence{font-size:.85em;margin-top:4px;padding:6px 8px;background:#f7f9fb;border-left:2px solid var(--cyan);border-radius:3px}
.finding-evidence code{background:#fff;padding:1px 4px;border-radius:3px;font-size:.9em}
.fconf{display:inline-block;padding:1px 6px;border-radius:10px;font-size:.8em;text-transform:uppercase;letter-spacing:.04em}
.fconf.confirmed{background:#d4edda;color:#155724}
.fconf.sospechoso{background:#fff3cd;color:#856404}
.graphpanel svg{width:100%;height:160px}
.gnode{fill:#ffffff;stroke:var(--line);stroke-width:2;transition:.3s}
.gnode.running{stroke:var(--warn);filter:drop-shadow(0 0 6px var(--warn));animation:pulse 1s infinite}
.gnode.done{stroke:var(--green);filter:drop-shadow(0 0 6px var(--green))}
.gedge{stroke:var(--line);stroke-width:2;stroke-dasharray:4 4;opacity:.4}
.glabel{fill:#333;font-family:'Segoe UI',sans-serif;font-size:11px;text-anchor:middle}
.gcenter{fill:var(--cyan);stroke:#fff;stroke-width:2}
.center-label{fill:#fff;font-family:'Segoe UI',sans-serif;font-weight:700;font-size:12px;text-anchor:middle}
.blink{animation:blink 1s step-start infinite}
@keyframes blink{50%{opacity:0}}
.upload{display:block; color:#333; font-size:12px; margin-top:10px; cursor:pointer}
.upload input{color:#111; font-size:11px}
.mode{display:block; color:#333; font-size:12px; margin-top:10px}
.mode select{background:#fff; color:var(--ink); border:1px solid var(--line);
  padding:4px 8px; border-radius:6px; font-family:inherit; font-size:12px}
.controls{display:flex; gap:8px; margin-top:12px}
.ctrl{background:#fff; border:1px solid var(--line); color:var(--ink);
  padding:8px 14px; border-radius:6px; font-family:inherit;
  font-size:12px; cursor:pointer; transition:.2s}
.ctrl:hover{border-color:var(--cyan); box-shadow:0 0 8px rgba(0,102,204,.25)}
.ctrl:disabled{opacity:.3; cursor:not-allowed; box-shadow:none}
.ctrl.danger{border-color:var(--red); color:var(--red)}
.ctrl.danger:hover{box-shadow:0 0 8px rgba(204,0,0,.3)}

/* Dashboard SOC */
.dash .metrics{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.metric{flex:1; min-width:80px; text-align:center; padding:10px; border-radius:8px;
  border:1px solid var(--line); background:#fff}
.metric span{display:block; font-size:28px; font-weight:700; font-family:inherit}
.metric label{font-size:10px; letter-spacing:1px; opacity:.8}
.metric.crit{border-color:var(--red); color:var(--red)}
.metric.high{border-color:var(--warn); color:var(--warn)}
.metric.med{border-color:#d4a017; color:#d4a017}
.metric.low{border-color:var(--green); color:var(--green)}
.metric.info{border-color:var(--cyan); color:var(--cyan)}
.bargraph{margin-top:8px}
.barrow{display:flex; align-items:center; gap:8px; margin:4px 0; font-size:11px}
.blbl{width:70px; opacity:.8}
.bval{height:16px; line-height:16px; padding-left:6px; border-radius:3px; color:#000; font-weight:700; font-size:10px; min-width:24px}

/* Recon / IA */
.reconlist,.ailist{display:flex; flex-direction:column; gap:6px; max-height:200px; overflow:auto}
.reconitem,.aiitem{padding:8px; border-left:3px solid var(--cyan); background:#fff; border-radius:4px; font-size:12px; border:1px solid var(--line)}
.aiitem{border-left-color:var(--mag)}
.reconitem code{color:var(--green); font-size:11px; margin-right:4px}
.authbox{margin-top:10px; border:1px solid var(--line); border-radius:6px; padding:8px; background:#fff}
.authbox summary{cursor:pointer; color:#222; font-size:12px; font-weight:600}
.authbox .mods input{margin:4px}
.report a{display:inline-block; margin:4px 6px 0 0; padding:6px 10px; border:1px solid var(--line);
  border-radius:6px; color:var(--cyan); text-decoration:none; font-size:12px; background:#fff}
.report a:hover{border-color:var(--cyan); box-shadow:0 0 8px rgba(0,102,204,.25)}

/* Filtros y busqueda de hallazgos */
.findcount{font-size:11px; color:#333; opacity:.7; margin-left:8px}
.filterbar{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; align-items:center}
.fsel{background:#fff; border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:5px 8px; font-size:12px}
.fsearch{flex:1; min-width:200px; background:#fff; border:1px solid var(--line); color:#111; border-radius:6px; padding:6px 10px; font-size:12px}
.fsearch:focus{border-color:var(--cyan); outline:none; box-shadow:0 0 6px rgba(0,102,204,.25)}
.ctrl.small{padding:4px 10px; font-size:12px; margin-left:auto}
.conf{display:inline-block; font-size:10px; padding:1px 6px; border-radius:10px; margin-left:6px; vertical-align:middle; font-weight:600}
.conf.confirmed{background:rgba(10,125,0,.12); color:#0a7d00; border:1px solid #0a7d00}
.conf.sospechoso{background:rgba(181,137,0,.12); color:#b58900; border:1px solid #b58900}

/* Comparador de escaneos */
.cmprow{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:8px 0}
.cmprow label{font-size:12px; color:#333}
.cmpout{margin-top:10px; display:flex; flex-direction:column; gap:6px}
.cmphead{font-size:13px; color:var(--green); margin-bottom:6px}
.cmpstat{margin:4px 0 10px}
.badge{display:inline-block; font-size:12px; padding:3px 10px; border-radius:12px; margin-right:8px}
.badge.new{background:rgba(204,0,0,.12); color:#cc0000; border:1px solid #cc0000}
.badge.fixed{background:rgba(10,125,0,.12); color:#0a7d00; border:1px solid #0a7d00}
.cmpsub{font-size:12px; color:var(--warn); margin:8px 0 4px; font-weight:bold}

/* Pantalla de bloqueo (contrasena de uso) */
.lockscreen{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(2px);
}
.lockscreen.hidden{display:none}
.lockbox{
  background:#fff; border:1px solid var(--cyan); border-radius:12px;
  padding:28px 30px; width:min(440px,92vw); text-align:center;
  box-shadow:0 0 24px rgba(0,102,204,.18);
}
.lockbox h2{color:var(--ink); font-size:18px; margin:14px 0 6px}
.lockbox p{color:#333; font-size:13px; margin-bottom:18px; line-height:1.5}
.lockbox .logo{margin-bottom:6px}
.lockrow{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.lockrow input{
  flex:1; min-width:200px; background:#fff; border:1px solid var(--line);
  color:var(--ink); border-radius:6px; padding:10px 12px; font-size:14px; font-family:inherit;
}
.lockrow input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 8px rgba(0,102,204,.3)}
.lockrow button{
  background:var(--cyan); border:1px solid var(--cyan);
  color:#fff; border-radius:6px; padding:10px 18px; font-size:14px; cursor:pointer;
  font-weight:700; letter-spacing:1px;
}
.lockrow button:hover{box-shadow:0 0 12px rgba(0,102,204,.4)}
.lockmsg{margin-top:12px; min-height:18px; font-size:13px; color:var(--warn)}
.lockmsg.ok{color:var(--green)}

/* ---- Dispositivos / Workers ---- */
.devices-wrap{overflow:auto}
.devices-table{width:100%;border-collapse:collapse;font-size:13px;color:var(--ink)}
.devices-table th,.devices-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.devices-table th{color:var(--sub);font-weight:600;letter-spacing:.3px;text-transform:uppercase;font-size:11px}
.dev-badge{padding:2px 6px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase}
.dev-badge.active{background:#d1fae5;color:#065f46}
.dev-badge.offline{background:#fee2e2;color:#991b1b}
.dev-badge.unknown{background:#e5e7eb;color:#374151}

/* ---- Footer + botón Update (abajo-derecha) ---- */
footer{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; font-size:12px; color:#7d8590;
  border-top:1px solid #21262d; background:#0d1117;
}
.foot-spacer{flex:1}
.btn-update{
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,#1f6feb,#a371f7);
  color:#fff; border:1px solid #388bfd; border-radius:8px;
  padding:8px 14px; font-size:13px; font-weight:700; letter-spacing:.4px;
  cursor:pointer; box-shadow:0 0 14px rgba(31,111,235,.35); white-space:nowrap;
}
.btn-update:hover{box-shadow:0 0 20px rgba(163,113,247,.55); transform:translateY(-1px)}
.btn-update:disabled{opacity:.6; cursor:wait}
.btn-update .up-ico{font-size:14px}
.btn-update.has-update{
  background:linear-gradient(135deg,#238636,#2ea043);
  border-color:#3fb950; animation:pulseUp 1.6s ease-in-out infinite;
}
@keyframes pulseUp{0%,100%{box-shadow:0 0 10px rgba(46,160,67,.4)}50%{box-shadow:0 0 22px rgba(46,160,67,.8)}}
.update-pop{
  position:fixed; right:16px; bottom:56px; width:320px; max-width:90vw;
  background:#161b22; border:1px solid #30363d; border-radius:10px;
  padding:14px; font-size:13px; color:#c9d1d9; z-index:9999;
  box-shadow:0 12px 40px rgba(0,0,0,.6);
}
.update-pop h4{margin:0 0 8px; color:#fff; font-size:14px}
.update-pop .up-row{display:flex; justify-content:space-between; margin:4px 0; color:#8b949e}
.update-pop .up-row b{color:#c9d1d9}
.update-pop .up-actions{margin-top:10px; display:flex; gap:8px; justify-content:flex-end}
.update-pop button{
  border-radius:6px; padding:6px 12px; font-size:12px; cursor:pointer; font-weight:700;
  border:1px solid #30363d; background:#21262d; color:#c9d1d9;
}
.update-pop button.primary{background:#238636; border-color:#3fb950; color:#fff}

/* ---- Repositorios (estilo dashboard dark del PDF) ---- */
.repos .repo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:10px}
.repo-card{
  position:relative; background:#161b22; border:1px solid #30363d; border-radius:10px;
  padding:14px 14px 14px 16px; overflow:hidden;
}
.repo-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#1f6feb,#a371f7);
}
.repo-card .rc-top{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.repo-card .rc-ico{font-size:18px}
.repo-card .rc-name{font-size:15px; font-weight:700; color:#fff}
.repo-card .rc-desc{font-size:12.5px; color:#8b949e; line-height:1.5; min-height:38px}
.repo-card .rc-meta{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.repo-card .rc-tag{font-size:11px; color:#7d8590; background:#21262d; border:1px solid #30363d; border-radius:999px; padding:2px 8px}
.repo-card .rc-url{display:block; margin-top:8px; font-size:11.5px; color:#58a6ff; word-break:break-all; text-decoration:none}
.repo-card .rc-url:hover{text-decoration:underline}
.repo-note{margin-top:12px; font-size:11.5px; color:#6e7681; font-style:italic}