/* ─────────────────────────────────────────────────────────────────────────────
   Torre - Estilos
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root{
  --bg:#0b0c0e; --panel:#131619; --panel2:#101315; --rail:#0e1013;
  --bd:#23282e; --bdsoft:#1a1e23;
  --fg:#e8eaec; --dim:#8a9299; --faint:#596069; --ghost:#454b52;
  --lime:#d0ec4f; --limebg:#1b2010; --limebd:#2f3a17;
  --amber:#f2b134; --amberbg:#221b0c; --amberbd:#42360f;
  --red:#e5484d; --redbg:#1f1214; --redbd:#3a2326;
  --blue:#7fb3d8;
  --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* ── Reset y base ──────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--sans);height:100%}
body{overflow:hidden}
a{color:var(--lime);text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{border:none;background:none;cursor:pointer}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--bd);border-radius:10px;border:3px solid var(--bg)}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-button{display:none;height:0;width:0}

/* ── Animaciones ───────────────────────────────────────────────────────────── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pulse{animation:pulse 1.8s ease-in-out infinite}
.fade{animation:fade .3s ease both}

/* ── Gate (login / alta) ───────────────────────────────────────────────────── */
#gate{display:none;height:100%;place-items:center;padding:24px}
#gate.on{display:grid}
.gatecard{width:100%;max-width:360px}
.mark{width:38px;height:38px;border:2px solid var(--lime);border-radius:9px;display:grid;place-items:center;margin:0 auto 14px}
.mark i{width:9px;height:9px;background:var(--lime);border-radius:2px;display:block}
.field{width:100%;background:#0d0f11;border:1px solid var(--bd);border-radius:8px;padding:10px 12px;font-size:13px;outline:none;margin-bottom:11px}
.field:focus{border-color:#3d434a}
.passfield{position:relative;margin-bottom:11px}
.passfield .field{margin-bottom:0;padding-right:38px}
.passeye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:4px;cursor:pointer;color:var(--dim);display:flex;align-items:center;justify-content:center}
.passeye:hover{color:var(--text)}
.passeye svg{width:18px;height:18px}
.passeye .eye-hide{display:none}
.passfield.visible .passeye .eye-show{display:none}
.passfield.visible .passeye .eye-hide{display:block}
.passbar{height:4px;background:var(--bdsoft);border-radius:4px;margin-top:6px;overflow:hidden;display:none}
.passbar.on{display:block}
.passbar i{height:100%;display:block;border-radius:4px;transition:width .2s,background .2s}
.passbar.weak i{width:33%;background:var(--red)}
.passbar.medium i{width:66%;background:#e5a21a}
.passbar.strong i{width:100%;background:var(--lime)}
.passlabel{font-size:11px;margin-top:4px;display:none}
.passlabel.on{display:block}
.passlabel.weak{color:var(--red)}
.passlabel.medium{color:#e5a21a}
.passlabel.strong{color:var(--lime)}
.primary{width:100%;text-align:center;padding:10px;border-radius:8px;font-size:13px;font-weight:600;background:var(--lime);color:#0b0c0e}
.primary[disabled]{background:var(--bdsoft);color:var(--faint);cursor:default}

/* ── Shell ─────────────────────────────────────────────────────────────────── */
#app{display:none;height:100%;flex-direction:column}
#app.on{display:flex}
.top{height:46px;flex:none;display:flex;align-items:center;gap:14px;padding:0 14px;background:var(--rail);border-bottom:1px solid var(--bdsoft)}
.brand{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600}
.brand .m{width:16px;height:16px;border:1.5px solid var(--lime);border-radius:3px;display:grid;place-items:center}
.brand .m i{width:4px;height:4px;background:var(--lime);border-radius:1px;display:block}
.sep{width:1px;height:16px;background:var(--bd)}
.srv{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.dot{width:6px;height:6px;border-radius:50%;flex:none}
.cta{display:flex;align-items:center;gap:7px;padding:6px 12px;background:var(--lime);color:#0b0c0e;border-radius:7px;font-size:12px;font-weight:600}
.body{flex:1;display:flex;min-height:0}

/* ── Rail (sidebar) ───────────────────────────────────────────────────────── */
.rail{width:228px;flex:none;background:var(--rail);border-right:1px solid var(--bdsoft);display:flex;flex-direction:column;padding:12px 10px;min-height:0}
.railscroll{flex:1;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px}
.kicker{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.navitem{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;font-size:12.5px;color:var(--dim);cursor:pointer;margin-bottom:1px}
.navitem:hover{color:var(--fg)}
.navitem.on{background:#191d21;color:var(--fg);font-weight:500}
.navitem .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.sesscard{padding:9px 10px;border-radius:8px;cursor:pointer;margin-bottom:3px;border:1px solid transparent}
.sesscard:hover{background:#15181b}
.sesscard.on{background:#191d21;border-color:#262c32}
.sesscard .p{font-family:var(--mono);font-size:11.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sesscard .t{font-size:11px;color:var(--dim);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip{display:inline-block;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:500;border:1px solid}

/* ── Main content ──────────────────────────────────────────────────────────── */
.main{flex:1;min-width:0;overflow-y:auto}
.pad{padding:26px 30px 40px}
h1{margin:0 0 4px;font-size:21px;font-weight:600;letter-spacing:-.02em}
.sub{font-size:13px;color:var(--dim);margin-bottom:22px}

/* ── Grid y cards ──────────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:13px}
.card{padding:15px 16px;background:var(--panel2);border:1px solid var(--bdsoft);border-radius:11px;cursor:pointer}
.card:hover{border-color:#2a3036}
.card .name{font-family:var(--mono);font-size:13.5px;font-weight:500}
.meta{display:flex;gap:14px;margin-top:13px;font-size:11.5px;color:var(--dim)}
.foot{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:11px;border-top:1px solid var(--bdsoft);font-family:var(--mono);font-size:11px;color:var(--faint)}

/* ── Detail view ───────────────────────────────────────────────────────────── */
.det{display:flex;flex-direction:column;height:100%}
.dethead{flex:none;padding:22px 30px 18px;border-bottom:1px solid var(--bdsoft)}
.crumb{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-bottom:9px}
.detbody{flex:1;display:flex;min-height:0}
.detmain{flex:1;min-width:0;display:flex;flex-direction:column}
.detscroll{flex:1;overflow-y:auto;padding:20px 26px 8px}
.side{width:296px;flex:none;border-left:1px solid var(--bdsoft);background:#0d0f11;overflow-y:auto;padding:20px 18px}
.box{padding:12px 13px;background:var(--panel);border:1px solid var(--bdsoft);border-radius:9px}
.kv{display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px}
.kv:last-child{margin-bottom:0}
.kv span:first-child{color:var(--dim)}
.kv span:last-child{font-family:var(--mono)}

/* ── Steps ─────────────────────────────────────────────────────────────────── */
.step{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-radius:8px}
.step.on{background:#151a10}
.step .mk{width:19px;height:19px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;font-weight:600;margin-top:1px;border:1.4px solid var(--ghost);color:var(--ghost)}
.step.done .mk{background:#6f7a58;border:none;color:#0b0c0e}
.step.on .mk{border-color:var(--lime);color:var(--lime)}
.step .lb{font-size:13px;color:var(--dim);text-wrap:pretty}
.step.on .lb{color:var(--fg);font-weight:500}
.step.done .lb{color:#7d858c}

/* ── Log rows ──────────────────────────────────────────────────────────────── */
.logrow{display:flex;gap:12px;align-items:baseline;padding:5px 8px;border-radius:6px;font-family:var(--mono);font-size:11.5px}
.logrow .tm{color:var(--ghost);flex:none}
.logrow .vb{flex:none;width:52px;font-weight:500}
.logrow .tx{color:#9aa1a8;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Composer ──────────────────────────────────────────────────────────────── */
.composer{flex:none;padding:12px 26px 18px;border-top:1px solid var(--bdsoft);background:#0d0f11}
.cbox{border:1px solid var(--bd);background:var(--panel);border-radius:10px;padding:11px 13px}
.cbox input{width:100%;border:none;outline:none;background:transparent;font-size:13px}

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modalbg{position:fixed;inset:0;background:rgba(6,7,8,.72);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding-top:13vh;z-index:50}
.modalbg.on{display:flex}
.modal{width:min(620px,92vw);background:var(--panel);border:1px solid #2a3036;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.6);overflow:hidden;animation:fade .18s ease both}
.seg{display:flex;gap:2px;padding:2px;background:#0f1113;border:1px solid #1f2429;border-radius:7px}
.seg button{flex:1;padding:5px 10px;border-radius:6px;font-size:11.5px;font-weight:500;color:var(--dim);white-space:nowrap}
.seg button.on{background:var(--bd);color:var(--fg);font-weight:600}
.pill{padding:5px 11px;border-radius:7px;font-family:var(--mono);font-size:11.5px;cursor:pointer;border:1px solid var(--bd);color:var(--dim)}
.pill.on{border-color:#3f4a1f;background:#181d10;color:var(--lime)}

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.toast{position:fixed;right:16px;bottom:16px;z-index:99;display:flex;flex-direction:column;gap:8px}
.toast div{background:var(--panel);border:1px solid var(--bd);border-radius:10px;padding:11px 14px;font-size:12.5px;animation:fade .2s ease both;max-width:320px}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width:820px){
  .rail{display:none}
  .side{display:none}
  .pad{padding:18px 16px 40px}
  .dethead{padding:16px 16px 14px}
  .detscroll{padding:16px 16px 8px}
  .composer{padding:10px 16px 20px}
  .grid{grid-template-columns:1fr}
  #mobilenav{display:flex!important}
}
#mobilenav{display:none;flex:none;border-top:1px solid var(--bdsoft);background:var(--rail);padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
#mobilenav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--faint);padding:4px}
#mobilenav button.on{color:var(--lime)}
#mobilenav i{width:15px;height:15px;border:1.4px solid currentColor;border-radius:4px;display:block}