/* willbö · Backups — la paleta sale del logotipo: negro #231F20 y cian #00AEEF.
   Tokens en :root; el oscuro SOLO los redefine (y respeta data-theme si algún día se fuerza). */
:root{
  --bg:#f3f6f9; --panel:#ffffff; --panel2:#eef3f7; --line:#dde5ec;
  --tx:#231f20; --tx2:#5b6b78; --accent:#00aeef; --accent-ink:#007db0; --accent-soft:#e0f4fd;
  --side:#231f20; --side-tx:#c9d3db; --side-line:#3a3536;
  --ok:#1f9254; --ok-soft:#e2f4ea; --warn:#b06a00; --warn-soft:#fdf1dc; --bad:#c33b3b; --bad-soft:#fbe6e6;
  --sombra:0 1px 2px rgba(35,31,32,.05),0 8px 24px rgba(35,31,32,.07);
  --tipo:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:12px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121011; --panel:#1b1819; --panel2:#231f20; --line:#332e2f;
    --tx:#f1f3f5; --tx2:#9aa7b2; --accent:#19b9f5; --accent-ink:#5fd0fa; --accent-soft:#0d2a36;
    --side:#0d0b0c; --side-line:#2a2526;
    --ok:#3dbf7c; --ok-soft:#10281b; --warn:#e0a03a; --warn-soft:#2e2310; --bad:#ef6a6a; --bad-soft:#341515;
    --sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.5 var(--tipo);-webkit-font-smoothing:antialiased}
h1,h2{margin:0;font-weight:650;letter-spacing:-.01em}
a{color:var(--accent-ink);text-decoration:none}
code{font-family:var(--mono);background:var(--panel2);padding:1px 6px;border-radius:6px;font-size:.88em}
.muted{color:var(--tx2);font-size:.9em}
.grow{flex:1}
.error{color:var(--bad);min-height:1.3em;margin:.4rem 0}

/* botones y campos */
.btn{font:inherit;font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--tx);padding:.55rem 1rem;border-radius:9px;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#04202c}
.btn.primary:hover{filter:brightness(1.08);color:#04202c}
.btn.danger{color:var(--bad)} .btn.danger:hover{border-color:var(--bad);color:var(--bad)}
.btn.small{padding:.3rem .7rem;font-size:.85rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,.linklike:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=password],input[type=search],input:not([type]),select{font:inherit;color:var(--tx);background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:.55rem .8rem;width:100%}
select{width:auto}
.linklike{background:none;border:0;color:var(--side-tx);font:inherit;cursor:pointer;padding:0;text-align:left}
.linklike:hover{color:#fff}

/* acceso */
.login{min-height:100vh;display:grid;place-items:center;align-content:center;gap:1rem;
  background:radial-gradient(900px 500px at 80% -10%,rgba(0,174,239,.18),transparent),var(--bg);padding:1rem}
.login-card{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sombra);padding:2rem}
.login-card h1{font-size:1.35rem;margin:.6rem 0 .1rem}
.login-card label{display:block;margin:1.2rem 0 .35rem;font-weight:600;font-size:.9rem}
.login-card .btn{width:100%;margin-top:.4rem}
.login-logo{height:60px;display:block;background:#fff;border-radius:10px;padding:6px 16px;border:1px solid var(--line)}
.login-foot{color:var(--tx2);font-size:.82rem}

/* esqueleto */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.side{background:var(--side);color:var(--side-tx);padding:1.4rem 1rem;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:.2rem .6rem 1.4rem;border-bottom:1px solid var(--side-line);margin-bottom:1rem}
.brand-logo{height:38px;display:block;background:#fff;border-radius:8px;padding:4px 10px}
.brand-sub{display:block;margin-top:.55rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
nav a{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:9px;color:var(--side-tx);font-weight:500;margin-bottom:2px}
nav a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
nav a:hover{background:rgba(255,255,255,.06);color:#fff}
nav a.on{background:rgba(0,174,239,.16);color:#fff;box-shadow:inset 3px 0 var(--accent)}
nav a.soon{opacity:.62}
.pill{margin-left:auto;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--side-line);border-radius:99px;padding:1px 7px}
.nav-title{margin:1.2rem .7rem .4rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#7d8a94}
.side-foot{margin-top:auto;padding:.8rem .7rem 0;border-top:1px solid var(--side-line);display:flex;flex-direction:column;gap:.3rem}
.side-foot .muted{color:#6c7882;font-size:.78rem}

.main{padding:0 2rem 6rem;min-width:0}
.topbar{display:flex;align-items:center;gap:1rem;padding:1.4rem 0 1.1rem}
.topbar h1{font-size:1.55rem}
.top-right{margin-left:auto}
.chip{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent-soft);color:var(--accent-ink);border-radius:99px;padding:.3rem .8rem;font-weight:600;font-size:.85rem;cursor:pointer}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulso 1.2s infinite}
@keyframes pulso{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.chip::before{animation:none}}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sombra);margin-bottom:1.1rem}
.panel-h{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem .4rem}
.panel-h h2{font-size:1.02rem}
.intro{max-width:78ch;color:var(--tx2);margin-bottom:.4rem}
.intro p{margin:.2rem 0 .9rem}
.banner{background:var(--warn-soft);border:1px solid var(--warn);border-left-width:5px;border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:1.1rem}
.banner .codigo{font:700 1.7rem var(--mono);letter-spacing:.12em;color:var(--tx);margin:.3rem 0}

/* tarjetas */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-bottom:1.1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--sombra);border-top:3px solid var(--accent)}
.card .k{color:var(--tx2);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.card .v{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;margin:.15rem 0}
.card .s{color:var(--tx2);font-size:.88rem}
.card.warn{border-top-color:var(--warn)} .card.bad{border-top-color:var(--bad)} .card.ok{border-top-color:var(--ok)}
.bar{height:6px;background:var(--panel2);border-radius:9px;overflow:hidden;margin-top:.5rem}
.bar i{display:block;height:100%;background:var(--accent)}

/* tabla */
.toolbar{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:.9rem}
.toolbar input[type=search]{width:260px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel)}
.seg button{font:inherit;font-weight:600;border:0;background:none;color:var(--tx2);padding:.5rem 1rem;cursor:pointer}
.seg button.on{background:var(--accent);color:#04202c}
.tabla-wrap{overflow:auto}
table{border-collapse:collapse;width:100%}
th,td{padding:.65rem .9rem;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:var(--tx2);background:var(--panel2);position:sticky;top:0;cursor:pointer;user-select:none}
th.c,td.c{width:40px;text-align:center;cursor:default}
.r{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--panel2)}
tbody tr.sel{background:var(--accent-soft)}
td a{font-size:.85rem}
.tag{display:inline-block;border-radius:99px;padding:1px 9px;font-size:.76rem;font-weight:600;background:var(--panel2);color:var(--tx2)}
.tag.old{background:var(--warn-soft);color:var(--warn)}
.tag.ok{background:var(--ok-soft);color:var(--ok)} .tag.bad{background:var(--bad-soft);color:var(--bad)} .tag.run{background:var(--accent-soft);color:var(--accent-ink)}
.vacio{padding:2.5rem;text-align:center;color:var(--tx2)}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent)}

.actionbar{position:fixed;left:260px;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(35,31,32,.1);
  padding:.8rem 2rem;display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;z-index:5}
.actionbar>div:first-child{margin-right:auto}
.chk{display:inline-flex;gap:.45rem;align-items:center;cursor:pointer}
.chk.danger{color:var(--bad);font-weight:600}

/* actividad */
.split{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:1.1rem;align-items:start}
.item{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:.8rem 1.2rem;font:inherit;color:inherit;cursor:pointer}
.item:hover,.item.on{background:var(--panel2)}
.item b{display:block}.item small{color:var(--tx2)}
.log{margin:0;padding:1rem 1.2rem;background:#0f0d0e;color:#cfe9f5;font:12.5px/1.55 var(--mono);height:min(62vh,640px);overflow:auto;white-space:pre-wrap;word-break:break-word;border-radius:0 0 var(--r) var(--r)}
.soon-card{padding:1.4rem 1.6rem;max-width:70ch}.soon-card p{color:var(--tx2)}
.row{display:flex;align-items:center;gap:.8rem;padding:.7rem 1.2rem;border-top:1px solid var(--line)}
.row .grow b{display:block}

dialog{border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--tx);box-shadow:0 20px 60px rgba(0,0,0,.35);width:min(520px,92vw);padding:1.6rem}
dialog::backdrop{background:rgba(18,16,17,.55)}
dialog h2{margin-bottom:.6rem} dialog label{display:block;margin:1rem 0 .35rem;font-weight:600;font-size:.9rem}
dialog ul{margin:.4rem 0;padding-left:1.2rem;max-height:160px;overflow:auto}
.aviso{background:var(--bad-soft);color:var(--bad);border-radius:9px;padding:.6rem .8rem;margin:.6rem 0;font-weight:600}
.dlg-btns{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem}
.toast{position:fixed;right:1.2rem;top:1.2rem;background:var(--side);color:#fff;padding:.7rem 1rem;border-radius:10px;opacity:0;transform:translateY(-8px);transition:.2s;pointer-events:none;z-index:50;max-width:380px}
.toast.on{opacity:1;transform:none}.toast.bad{background:var(--bad)}

@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:.7rem 1rem}
  .brand{border:0;margin:0;padding:0}.nav-title,.brand-sub,.side-foot .muted{display:none}
  nav{display:flex;gap:.2rem;flex-wrap:wrap;width:100%}nav a{padding:.45rem .6rem}nav a .pill{display:none}
  .side-foot{margin:0 0 0 auto;border:0;padding:0}
  .main{padding:0 1rem 9rem}.actionbar{left:0;padding:.8rem 1rem}.split{grid-template-columns:1fr}.toolbar input[type=search]{width:100%}
}

.btn.ms{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;margin-top:1.3rem;padding:.75rem 1rem}
#claveBox{margin-top:.8rem;color:var(--tx2);font-size:.9rem}
#claveBox summary{cursor:pointer}
#claveBox form .btn{width:100%;margin-top:.6rem}

/* ───── progreso amigable ───── */
.prog{padding:1.1rem 1.2rem}
.prog-body{padding:.4rem 1.2rem 1.2rem}
.prog-head{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.6rem}
.prog-head b{font-size:1.02rem}
.prog-head .grow{flex:1}
.pbar{height:8px;background:var(--panel2);border-radius:9px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--accent);border-radius:9px;transition:width .6s}
.pbar.indet i{width:35%;animation:desliza 1.4s ease-in-out infinite}
@keyframes desliza{0%{margin-left:-35%}100%{margin-left:100%}}
@media (prefers-reduced-motion:reduce){.pbar.indet i{animation:none;width:100%;opacity:.4}}
.scard{border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;margin-top:.8rem;background:var(--panel)}
.scard.completo{border-left:4px solid var(--ok)}.scard.error,.scard.incompleto{border-left:4px solid var(--bad)}.scard.en_curso{border-left:4px solid var(--accent)}
.scard-t{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.scard-t small{color:var(--tx2)}
.steps{display:flex;gap:.3rem;margin:.7rem 0 .2rem;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--tx2);padding:.25rem .6rem;border-radius:99px;background:var(--panel2)}
.step::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line)}
.step.ok{color:var(--ok);background:var(--ok-soft)}.step.ok::before{background:var(--ok)}
.step.run{color:var(--accent-ink);background:var(--accent-soft);font-weight:600}.step.run::before{background:var(--accent);animation:pulso 1.2s infinite}
.step.bad{color:var(--bad);background:var(--bad-soft)}.step.bad::before{background:var(--bad)}
.aviso-s{font-size:.86rem;color:var(--warn);margin:.4rem 0 0}
.resumen-fin{margin-top:.9rem;padding:.7rem 1rem;border-radius:10px;background:var(--panel2);font-weight:600}
.tecnico{border-top:1px solid var(--line)}
.tecnico summary{cursor:pointer;padding:.7rem 1.2rem;color:var(--tx2);font-size:.9rem}
.tecnico .log{height:300px}
.btn.mini{padding:.2rem .6rem;font-size:.8rem}
.actionbar #selAyuda{display:none}.actionbar.vacia #selAyuda{display:inline}