:root{
    --steel-950:#0E1216; --steel-900:#161B21; --steel-800:#1F262E;
    --steel-600:#3C4750; --steel-400:#7C868E;
    --alum-300:#C7CDD2; --alum-200:#DCE0E3;
    --canvas:#E7EAEC; --paper:#FFFFFF; --line:#D5DADE;
    --signal:#E0A024; --signal-deep:#B97D12; --blueprint:#2FB6CE;
    --ink:#161B21; --ink-soft:#5A656E;
    --display:'Space Grotesk',sans-serif;
    --body:'IBM Plex Sans',sans-serif;
    --mono:'IBM Plex Mono',monospace;
    --side:248px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:var(--body); color:var(--ink); background:var(--canvas);
    -webkit-font-smoothing:antialiased; line-height:1.5;
  }
  /* ---------- Layout ---------- */
  .app{display:grid; grid-template-columns:var(--side) 1fr; min-height:100vh}
  .side{
    background:var(--steel-900); color:var(--alum-200);
    display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
    border-right:1px solid #000;
  }
  .brand{padding:22px 22px 18px; border-bottom:1px solid #000}
  .mark{
    width:38px; height:38px; border-radius:7px; background:var(--alum-300);
    color:var(--steel-900); font-family:var(--display); font-weight:700;
    font-size:18px; display:grid; place-items:center; letter-spacing:-.5px;
    box-shadow:inset 0 -2px 0 #9aa1a7, inset 0 2px 0 #eef0f1;
  }
  .brand h1{font-family:var(--display); font-size:15px; font-weight:600; margin-top:12px; color:#fff; letter-spacing:.2px}
  .brand .sub{font-family:var(--mono); font-size:10.5px; color:var(--steel-400); margin-top:3px; text-transform:uppercase; letter-spacing:1.5px}
  .nav{padding:14px 12px; flex:1}
  .nav-lbl{font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--steel-400); padding:6px 12px; text-transform:uppercase}
  .nav button{
    width:100%; display:flex; align-items:center; gap:11px; background:none; border:none;
    color:var(--alum-200); font-family:var(--body); font-size:14px; font-weight:500;
    padding:10px 12px; border-radius:8px; cursor:pointer; text-align:left;
    transition:background .14s, color .14s;
  }
  .nav button .ico{width:17px; height:17px; flex:none; color:var(--steel-400); transition:color .14s}
  .nav button:hover{background:var(--steel-800)}
  .nav button.on{background:var(--steel-800); color:#fff; box-shadow:inset 3px 0 0 var(--signal)}
  .nav button.on .ico{color:var(--signal)}
  .side-foot{padding:16px 22px; border-top:1px solid #000; font-family:var(--mono); font-size:10.5px; color:var(--steel-400); line-height:1.7}
  .badge-int{display:inline-block; background:var(--signal); color:var(--steel-950); font-weight:600; padding:2px 8px; border-radius:4px; letter-spacing:.5px; font-size:10px; margin-bottom:8px}

  .main{padding:0; overflow-x:hidden}
  .topline{
    height:54px; display:flex; align-items:center; justify-content:space-between;
    padding:0 32px; border-bottom:1px solid var(--line); background:rgba(231,234,236,.85);
    backdrop-filter:blur(8px); position:sticky; top:0; z-index:20;
  }
  .crumb{font-family:var(--mono); font-size:12px; color:var(--ink-soft); letter-spacing:.5px}
  .crumb b{color:var(--ink); font-weight:600}
  .who{font-family:var(--mono); font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:9px}
  .who .dot{width:8px; height:8px; border-radius:50%; background:#43b04a; box-shadow:0 0 0 3px rgba(67,176,74,.18)}
  .view{padding:34px 32px 64px; max-width:1080px}
  section.page{display:none; animation:fade .4s ease both}
  section.page.active{display:block}
  @keyframes fade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

  .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--signal-deep); font-weight:500}
  h2.title{font-family:var(--display); font-size:30px; font-weight:600; letter-spacing:-.5px; margin:6px 0 6px}
  .lead{color:var(--ink-soft); font-size:15px; max-width:60ch}

  /* ---------- Inicio ---------- */
  .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:26px 0 30px}
  .stat{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:18px 18px 16px}
  .stat .n{font-family:var(--display); font-size:34px; font-weight:600; letter-spacing:-1px}
  .stat .k{font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); margin-top:2px}
  .stat .meta{font-family:var(--mono); font-size:12px; color:var(--signal-deep); margin-top:9px}
  .quick{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .qcard{
    background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:22px;
    cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s; text-align:left;
    font-family:inherit; color:inherit;
  }
  .qcard:hover{transform:translateY(-3px); box-shadow:0 10px 26px -16px rgba(20,24,28,.4); border-color:var(--steel-400)}
  .qcard h3{font-family:var(--display); font-size:17px; font-weight:600; margin-bottom:5px}
  .qcard p{color:var(--ink-soft); font-size:13.5px}
  .qcard .go{font-family:var(--mono); font-size:12px; color:var(--signal-deep); margin-top:14px; display:inline-flex; align-items:center; gap:6px}

  .notice{
    background:#FBF3E1; border:1px solid #ECD9A8; border-left:3px solid var(--signal);
    border-radius:9px; padding:13px 16px; font-size:13px; color:#6b5418; margin-bottom:24px;
    display:flex; gap:10px; align-items:flex-start;
  }
  .notice b{color:#4d3c10}

  /* ---------- Catálogo ---------- */
  .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px}
  .card{
    background:var(--paper); border:1px solid var(--line); border-radius:13px; overflow:hidden;
    cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s; text-align:left;
    font-family:inherit; color:inherit; display:flex; flex-direction:column;
  }
  .card:hover{transform:translateY(-4px); box-shadow:0 14px 30px -18px rgba(20,24,28,.5); border-color:var(--steel-400)}
  .thumb{
    height:150px; position:relative; display:grid; place-items:center;
    background:
      linear-gradient(125deg, rgba(255,255,255,.06) 0%, transparent 40%),
      repeating-linear-gradient(115deg,#202831 0 2px,#1b222a 2px 4px);
  }
  .thumb svg{width:78px; height:78px; color:var(--alum-300); filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
  .thumb .tag{position:absolute; top:11px; left:11px; font-family:var(--mono); font-size:10px; letter-spacing:1px; color:var(--steel-950); background:var(--alum-300); padding:2px 7px; border-radius:4px}
  .thumb .cube{position:absolute; bottom:10px; right:11px; font-family:var(--mono); font-size:10px; letter-spacing:1px; color:#9fb6bb; border:1px solid #41525a; padding:2px 7px; border-radius:4px}
  .card .body{padding:15px 16px 17px}
  .card .ref{font-family:var(--mono); font-size:12px; color:var(--signal-deep); font-weight:500}
  .card .nm{font-family:var(--display); font-size:16px; font-weight:600; margin:3px 0 9px}
  .chips{display:flex; gap:6px; flex-wrap:wrap}
  .chip{font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); background:#EEF1F3; border:1px solid var(--line); padding:2px 8px; border-radius:20px}

  /* ---------- Documentos ---------- */
  .docgroup{margin-top:26px}
  .docgroup h3{font-family:var(--mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px; display:flex; align-items:center; gap:8px}
  .docgroup h3::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--signal)}
  .doclist{background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden}
  .docrow{display:grid; grid-template-columns:118px 1fr auto auto; align-items:center; gap:16px; padding:13px 18px; border-bottom:1px solid var(--line); transition:background .12s}
  .docrow:last-child{border-bottom:none}
  .docrow:hover{background:#F4F6F7}
  .docrow .code{font-family:var(--mono); font-size:12px; color:var(--signal-deep)}
  .docrow .t{font-size:14px; font-weight:500}
  .docrow .v{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft)}
  .docrow .open{font-family:var(--mono); font-size:12px; color:var(--steel-600); border:1px solid var(--line); background:#fff; padding:6px 12px; border-radius:7px; cursor:pointer; transition:.12s}
  .docrow .open:hover{border-color:var(--steel-600); color:var(--ink)}

  /* ---------- Visor 3D (overlay) ---------- */
  .overlay{position:fixed; inset:0; z-index:60; background:rgba(14,18,22,.55); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:24px}
  .overlay.on{display:flex; animation:fade .25s ease both}
  .viewer{
    width:min(960px,100%); max-height:90vh; background:var(--paper); border-radius:16px; overflow:hidden;
    display:grid; grid-template-columns:1.5fr 1fr; box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  }
  .stage{position:relative; background:radial-gradient(120% 120% at 50% 20%, #232c34 0%, #0E1216 75%); min-height:440px}
  #gl{display:block; width:100%; height:100%}
  .stage .hint{position:absolute; bottom:12px; left:14px; font-family:var(--mono); font-size:10.5px; color:#7e8b93; letter-spacing:.5px; pointer-events:none}
  .vtools{position:absolute; top:13px; left:14px; display:flex; gap:7px}
  .vtools button{
    font-family:var(--mono); font-size:11px; color:#cdd4d9; background:rgba(31,38,46,.82); border:1px solid #39444d;
    padding:6px 11px; border-radius:7px; cursor:pointer; transition:.12s; letter-spacing:.3px;
  }
  .vtools button:hover{border-color:#6b7780; color:#fff}
  .vtools button.act{background:var(--signal); color:var(--steel-950); border-color:var(--signal); font-weight:600}
  .vtools button.act.cy{background:var(--blueprint); border-color:var(--blueprint)}
  .vclose{position:absolute; top:13px; right:14px; width:30px; height:30px; border-radius:8px; background:rgba(31,38,46,.82); border:1px solid #39444d; color:#cdd4d9; cursor:pointer; font-size:16px; line-height:1; display:grid; place-items:center}
  .vclose:hover{color:#fff; border-color:#6b7780}
  .specs{padding:26px 26px 22px; overflow-y:auto}
  .specs .ref{font-family:var(--mono); font-size:12px; color:var(--signal-deep)}
  .specs h3{font-family:var(--display); font-size:22px; font-weight:600; margin:4px 0 4px; letter-spacing:-.3px}
  .specs .desc{font-size:13.5px; color:var(--ink-soft); margin-bottom:18px}
  table.sp{width:100%; border-collapse:collapse; font-size:13px}
  table.sp td{padding:9px 0; border-bottom:1px solid var(--line); vertical-align:top}
  table.sp td:first-child{color:var(--ink-soft); width:46%}
  table.sp td:last-child{font-family:var(--mono); text-align:right; color:var(--ink); font-weight:500}
  .loading{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--mono); font-size:12px; color:#7e8b93}

  /* ---------- Toast ---------- */
  .toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--steel-900); color:#fff; padding:12px 20px; border-radius:10px; font-size:13px; font-family:var(--mono); opacity:0; pointer-events:none; transition:.25s; z-index:80; box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
  .toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

  /* ---------- Acceso restringido ---------- */
  .lock{position:fixed; inset:0; z-index:200; background:var(--steel-900); display:flex; align-items:center; justify-content:center; padding:24px;
    background-image:linear-gradient(125deg,rgba(255,255,255,.03) 0%,transparent 45%),repeating-linear-gradient(115deg,#161b21 0 3px,#13181e 3px 6px)}
  .lock.hidden{display:none}
  .lockcard{width:min(380px,100%); text-align:center; animation:fade .35s ease both}
  .lockcard .mark{margin:0 auto 18px; width:46px; height:46px; font-size:21px}
  .lockcard h1{font-family:var(--display); color:#fff; font-size:23px; font-weight:600; letter-spacing:-.3px}
  .lockcard .sub{font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--steel-400); margin-top:7px}
  .lockform{margin-top:26px; display:flex; flex-direction:column; gap:10px}
  .lockform input{font-family:var(--mono); font-size:14px; padding:13px 15px; border-radius:9px; border:1px solid var(--steel-600); background:var(--steel-800); color:#fff; text-align:center; letter-spacing:1px}
  .lockform input:focus{outline:none; border-color:var(--signal); box-shadow:0 0 0 3px rgba(224,160,36,.18)}
  .lockform input::placeholder{color:var(--steel-400); letter-spacing:.5px}
  .lockform button{font-family:var(--body); font-weight:600; font-size:14px; padding:13px; border-radius:9px; border:none; background:var(--signal); color:var(--steel-950); cursor:pointer; transition:background .14s}
  .lockform button:hover{background:#eaae3a}
  .lockerr{font-family:var(--mono); font-size:12px; color:#ec8f7e; min-height:16px; margin-top:2px}
  .lockhint{font-family:var(--mono); font-size:11px; color:var(--steel-600); margin-top:20px; line-height:1.6}
  .logout{font-family:var(--mono); font-size:12px; color:var(--ink-soft); background:none; border:1px solid var(--line); cursor:pointer; padding:5px 11px; border-radius:7px; margin-left:6px; transition:.12s}
  .logout:hover{color:var(--ink); border-color:var(--steel-600)}

  /* ---------- Responsive ---------- */
  @media(max-width:860px){
    .app{grid-template-columns:1fr}
    .side{position:static; height:auto; flex-direction:column}
    .nav{display:flex; gap:6px; overflow-x:auto; padding:10px}
    .nav-lbl,.side-foot{display:none}
    .nav button{width:auto; white-space:nowrap}
    .stats,.quick,.grid{grid-template-columns:1fr}
    .viewer{grid-template-columns:1fr; max-height:94vh; overflow-y:auto}
    .stage{min-height:300px}
    .docrow{grid-template-columns:1fr auto; gap:6px 14px}
    .docrow .v{display:none}
    .view{padding:26px 18px 60px}
    .topline{padding:0 18px}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important; transition:none!important}
  }