/* ===========================================================
   Forja 3D — global styles (Direction A industrial + B KPIs)
   =========================================================== */
:root{
  --bg:#14110f; --panel:#1d1916; --panel-2:#221d19; --panel-3:#272019;
  --line:#2c2723; --line-2:#3a342e;
  --orange:#FF6A1A; --orange-d:color-mix(in srgb, var(--orange) 82%, #000); --orange-soft:color-mix(in srgb, var(--orange) 14%, transparent);
  --text:#ece8e2; --muted:#8a827a; --muted-2:#6a635b;
  --green:#3ec06b; --green-soft:rgba(62,192,107,.15);
  --red:#e0533b; --red-soft:rgba(224,83,59,.15);
  --blue:#5aa9e0;
  --sans:'Archivo',sans-serif; --cond:'Archivo Narrow',sans-serif; --mono:'JetBrains Mono',monospace;
  --r:12px; --rs:8px;
  --mark:url("../assets/revision-mark.png");
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--orange);color:#14110f}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:236px;flex-shrink:0;background:#100d0b;border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sb-brand{display:flex;align-items:center;gap:12px;padding:22px 18px 16px}
.brand-lockup{width:184px;max-width:100%;height:auto;display:block;mix-blend-mode:screen}
.sb-logo{width:42px;height:42px;background-image:var(--mark);background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0;background-color:transparent;display:block}
.sb-name{font-weight:900;font-size:18px;letter-spacing:.5px;text-transform:uppercase;line-height:1}
.sb-sub{font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-top:3px}
.sb-stripe{height:5px;margin:0 20px 14px;background:repeating-linear-gradient(45deg,var(--orange) 0 10px,#100d0b 10px 20px)}
.sb-nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:4px 12px;overflow-y:auto}
.sb-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--rs);color:var(--muted);font-weight:600;font-size:14px;transition:.12s;position:relative}
.sb-item:hover{background:var(--panel);color:var(--text)}
.sb-item.on{background:var(--orange-soft);color:var(--orange)}
.sb-item.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--orange);border-radius:0 3px 3px 0}
.sb-item svg{flex-shrink:0}
.sb-foot{padding:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:none}
.page{padding:26px 32px 60px;max-width:1280px;width:100%;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.page-title{font-weight:900;font-size:30px;letter-spacing:-.5px;line-height:1}
.page-sub{color:var(--muted);font-size:14px;margin-top:7px;max-width:60ch}
.page-stripe{height:6px;margin-bottom:22px;background:repeating-linear-gradient(45deg,var(--orange) 0 12px,transparent 12px 24px);border-top:1.5px solid var(--orange);border-bottom:1.5px solid var(--orange);opacity:.85}

/* ---------- Panels & cards ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.panel-pad{padding:22px}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.panel-t{font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:1px;display:flex;align-items:center;gap:9px}
.panel-t .mark{width:8px;height:8px;background:var(--orange)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}

/* ---------- KPI cards (B style) ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:17px 18px 14px;position:relative;overflow:hidden}
.kpi-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.kpi-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange);flex-shrink:0}
.kpi-dot.g{background:var(--green);box-shadow:0 0 8px var(--green)}
.kpi-dot.r{background:var(--red);box-shadow:0 0 8px var(--red)}
.kpi-dot.b{background:var(--blue);box-shadow:0 0 8px var(--blue)}
.kpi-val{font-weight:800;font-size:28px;margin-top:11px;letter-spacing:-.8px;line-height:1}
.kpi-val small{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:0}
.kpi-delta{font-family:var(--mono);font-size:11px;margin-top:7px;color:var(--muted)}
.kpi-delta.up{color:var(--green)} .kpi-delta.dn{color:var(--red)}
.kpi-spark{margin-top:10px;display:flex;align-items:flex-end;gap:3px;height:24px}
.kpi-spark i{flex:1;border-radius:2px;min-height:2px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--rs);font-weight:700;font-size:13.5px;transition:.12s;white-space:nowrap;border:1px solid transparent}
.btn svg{flex-shrink:0}
.btn-primary{background:var(--orange);color:#14110f}
.btn-primary:hover{background:#ff7d35}
.btn-ghost{background:var(--panel);border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--line-2);background:var(--panel-2)}
.btn-danger{background:var(--red-soft);color:var(--red)}
.btn-danger:hover{background:rgba(224,83,59,.25)}
.btn-sm{padding:7px 12px;font-size:12.5px}
.btn-icon{padding:9px;border-radius:var(--rs)}
.iconbtn{width:32px;height:32px;display:grid;place-items:center;border-radius:7px;color:var(--muted);transition:.12s}
.iconbtn:hover{background:var(--panel-2);color:var(--text)}
.iconbtn.danger:hover{background:var(--red-soft);color:var(--red)}

/* ---------- Pills / tags ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px}
.pill.g{background:var(--green-soft);color:var(--green)}
.pill.r{background:var(--red-soft);color:var(--red)}
.pill.o{background:var(--orange-soft);color:var(--orange)}
.pill.n{background:var(--panel-3);color:var(--muted)}
.pill.b{background:rgba(90,169,224,.15);color:var(--blue)}

/* ---------- Progress ---------- */
.bar{height:12px;background:#14110f;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--orange) 0 8px,var(--orange-d) 8px 16px)}
.bar.thin{height:7px;border-radius:99px}
.bar.thin i{background:var(--orange)}

/* ---------- Tables / lists ---------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line)}
.tbl th.r,.tbl td.r{text-align:right}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--panel-2)}
.tbl .num{font-family:var(--mono);font-weight:500}

.row-list{display:flex;flex-direction:column}
.lrow{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:none}
.lrow-main{flex:1;min-width:0}
.lrow-t{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow-s{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
.lrow-v{font-family:var(--mono);font-weight:700;font-size:14px;white-space:nowrap}
.lrow-v.in{color:var(--green)} .lrow-v.out{color:var(--red)}
.tag-ico{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-weight:800}
.tag-ico.in{background:var(--green-soft);color:var(--green)}
.tag-ico.out{background:var(--red-soft);color:var(--red)}

/* ---------- Spool chip ---------- */
.spool{width:30px;height:30px;border-radius:50%;flex-shrink:0;border:3px solid var(--line-2);position:relative;display:grid;place-items:center}
.spool::after{content:'';width:9px;height:9px;border-radius:50%;background:#14110f;border:1px solid var(--line)}

/* ---------- Forms / modal ---------- */
.modal-ov{position:fixed;inset:0;background:rgba(8,6,5,.72);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;z-index:200;overflow-y:auto;animation:fade .15s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;width:100%;max-width:480px;margin:auto;box-shadow:0 24px 60px rgba(0,0,0,.5);animation:pop .18s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal.wide{max-width:760px}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal-h h3{font-weight:800;font-size:17px}
.modal-b{padding:22px}
.modal-f{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;border-top:1px solid var(--line)}

.field{margin-bottom:15px}
.field-l{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:7px}
.field-hint{font-size:11.5px;color:var(--muted-2);margin-top:6px}
.inp{width:100%;background:#14110f;border:1px solid var(--line-2);border-radius:var(--rs);padding:11px 13px;color:var(--text);font-size:14.5px;transition:.12s}
.inp:focus{outline:none;border-color:var(--orange)}
.inp::placeholder{color:var(--muted-2)}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238a827a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.inp-wrap{position:relative;display:flex;align-items:center}
.inp-prefix{position:absolute;left:13px;font-family:var(--mono);color:var(--muted);font-size:13px;pointer-events:none}
.inp-wrap .inp.has-prefix{padding-left:42px}
.inp-suffix{position:absolute;right:13px;font-family:var(--mono);color:var(--muted);font-size:13px;pointer-events:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

.seg{display:inline-flex;background:#14110f;border:1px solid var(--line);border-radius:var(--rs);padding:3px}
.seg button{padding:7px 14px;border-radius:6px;font-size:13px;font-weight:700;color:var(--muted)}
.seg button.on{background:var(--orange);color:#14110f}

.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty-ic{width:54px;height:54px;border-radius:12px;background:var(--panel-2);display:grid;place-items:center;margin:0 auto 14px;color:var(--muted-2)}
.empty h4{font-weight:700;font-size:16px;color:var(--text);margin-bottom:6px}

.section-gap{display:flex;flex-direction:column;gap:14px}
.grid-2c{display:grid;grid-template-columns:1.45fr 1fr;gap:14px;align-items:start}
.grid-3c{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .spacer{flex:1}
.search{position:relative;flex:1;max-width:300px}
.search .inp{padding-left:38px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}

/* ---------- Responsive ---------- */
.menu-btn{display:none}
.scrim{display:none}
@media (max-width:880px){
  .sidebar{position:fixed;left:0;top:0;z-index:300;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .sidebar.open{transform:none}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:250}
  .topbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:#100d0b;position:sticky;top:0;z-index:100}
  .menu-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--panel);border:1px solid var(--line)}
  .topbar .tb-name{font-weight:900;text-transform:uppercase;letter-spacing:.5px}
  .topbar .tb-logo{width:34px;height:24px;background-image:var(--mark);background-size:contain;background-repeat:no-repeat;background-position:left center;mix-blend-mode:screen}
  .page{padding:18px 16px 80px}
  .page-title{font-size:24px}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .grid-2c{grid-template-columns:1fr}
  .grid-3c{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .hide-sm{display:none}
}
@media (max-width:480px){
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
}

/* ---------- Tweak: stripes off (solid accents) ---------- */
body[data-stripes="off"] .page-stripe{background:var(--orange);opacity:.9}
body[data-stripes="off"] .sb-stripe{background:var(--orange)}
body[data-stripes="off"] .bar i{background:var(--orange)!important}