:root{
  --bg:#F2F4F3; --panel:#FFFFFF; --panel2:#F8FAF9; --ink:#17201C; --ink2:#46534E; --muted:#76847E; --line:#DAE1DD;
  --accent:#12607A; --accent-soft:#DFEDF2; --bar:#6E9DAE;
  --crit:#B42318; --crit-soft:#FCE9E6; --warn:#A65A06; --warn-soft:#FBEEDC; --idle:#56636B; --idle-soft:#E9EDEF; --good:#1E7548; --good-soft:#E2F2E8;
  --worst:#FBEEDC;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cond:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#0E1412; --panel:#151D1A; --panel2:#1A2320; --ink:#E4EBE8; --ink2:#B2BEB9; --muted:#85938D; --line:#2A3531;
    --accent:#62B6CF; --accent-soft:#15313A; --bar:#3F7486;
    --crit:#F08A7E; --crit-soft:#3A1916; --warn:#EDB068; --warn-soft:#382813; --idle:#A9B5BC; --idle-soft:#222B2F; --good:#72CC98; --good-soft:#15301F;
    --worst:#382813;
  }
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45;padding-inline:16px;padding-block:14px 32px}
.wrap{max-width:1440px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.num,td.n,th.n{font-variant-numeric:tabular-nums}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Header */
.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px}
.brand h1{font-family:var(--cond);font-weight:700;font-size:26px;letter-spacing:-.01em;margin:0;text-wrap:balance}
.brand p{margin:2px 0 0;color:var(--ink2);font-size:13px}
.src{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--warn-soft);color:var(--warn);margin-left:6px;vertical-align:middle}
.src.real{background:var(--good-soft);color:var(--good)}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{border:1px solid var(--line);background:var(--panel);padding:7px 12px;border-radius:6px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--panel)}
.btn.primary:hover{filter:brightness(1.08);color:var(--panel)}

/* Params */
.params{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 14px}
.params label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}
.params input[type=number]{width:62px;padding:4px 6px;border:1px solid var(--line);border-radius:5px;background:var(--panel2);text-align:right;font-variant-numeric:tabular-nums}
.params .sep{width:1px;height:22px;background:var(--line)}
.params .hint{font-size:12px;color:var(--muted);margin-left:auto}

/* Drop */
.drop{border:1.5px dashed var(--line);border-radius:8px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;color:var(--ink2);font-size:13px;background:var(--panel2)}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop strong{color:var(--ink)}
details.files{background:var(--panel);border:1px solid var(--line);border-radius:8px}
details.files summary{cursor:pointer;padding:9px 14px;font-weight:600;font-size:13px}
.filelist{padding:0 14px 12px;display:flex;flex-direction:column;gap:10px}
.file{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.file .fn{font-family:var(--mono);font-size:12.5px;font-weight:500}
.file .fn span{color:var(--muted);font-family:var(--sans);font-weight:400}
.maps{display:flex;flex-wrap:wrap;gap:8px 14px}
.maps label{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.maps select,.maps input{text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink);padding:4px 6px;border:1px solid var(--line);border-radius:5px;background:var(--panel2);max-width:190px}
.warnline{font-size:12.5px;color:var(--warn)}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.kpi{background:var(--panel);padding:11px 14px;display:flex;flex-direction:column;gap:2px}
.kpi .l{font-family:var(--cond);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kpi .v{font-family:var(--cond);font-size:25px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi .s{font-size:12px;color:var(--ink2)}
.kpi.crit .v{color:var(--crit)} .kpi.warn .v{color:var(--warn)} .kpi.idle .v{color:var(--idle)} .kpi.acc .v{color:var(--accent)}

/* Main grid */
.main{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:1300px){.main{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;min-width:0}
.card-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.card-h h2{font-family:var(--cond);font-size:16px;font-weight:700;margin:0;letter-spacing:.01em}
.card-h .sub{font-size:12px;color:var(--muted)}
.scroll{overflow:auto;max-height:900px}
table{border-collapse:collapse;width:100%;font-size:13px}
th{font-family:var(--cond);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:8px 8px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:1;white-space:nowrap}
th.n,td.n{text-align:right}
th.sort{cursor:pointer;user-select:none}
th.sort:hover{color:var(--accent)}
th .ar{font-size:10px;margin-left:3px}
td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
#storeTbl tbody tr{cursor:pointer}
#storeTbl tbody tr:hover td{background:var(--panel2)}
#storeTbl tbody tr.sel td{background:var(--accent-soft)}
#storeTbl tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
td.worst{background:var(--worst);font-weight:600}
#storeTbl tbody tr.sel td.worst{background:var(--worst)}
tfoot td{font-weight:600;border-top:2px solid var(--line);border-bottom:0;background:var(--panel2)}
.st{font-weight:600;white-space:nowrap}
.rs{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-right:7px;vertical-align:1px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{border:0;background:var(--panel2);padding:4px 11px;cursor:pointer;font-weight:500;color:var(--ink2);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--panel)}
tr.sub td{font-weight:600;background:var(--panel2);color:var(--ink2);font-size:12.5px;cursor:default}
#storeTbl tbody tr.sub:hover td{background:var(--panel2)}
#storeTbl tbody tr.sub + tr td{border-top:2px solid var(--line)}
tfoot tr.tot td{border-top:2px solid var(--line)}
.barcell{display:flex;align-items:center;gap:8px;min-width:104px}
.barcell .track{flex:1;height:8px;border-radius:0 4px 4px 0;position:relative;min-width:36px}
.barcell .fill{position:absolute;left:0;top:0;bottom:0;background:var(--bar);border-radius:0 4px 4px 0}
.barcell .fill.hi{background:var(--warn)}
.barcell .mk{position:absolute;top:-3px;bottom:-3px;width:1.5px;background:var(--ink2);opacity:.55}
.barcell .val{width:38px;text-align:right;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);padding:9px 14px;border-top:1px solid var(--line)}
.legend i{display:inline-block;width:12px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:5px}

/* Detail */
.dsel{display:flex;align-items:center;gap:8px}
.dsel select{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);font-weight:600;max-width:220px}
.dstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel2)}
@media (max-width:520px){.dstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dstats div{display:flex;flex-direction:column}
.dstats .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-family:var(--cond);font-weight:600}
.dstats .v{font-family:var(--cond);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.dstats .r{font-size:11.5px;color:var(--ink2)}
.tabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{border:0;background:none;padding:7px 10px 8px;cursor:pointer;font-weight:500;color:var(--ink2);border-bottom:2px solid transparent;white-space:nowrap;display:flex;gap:6px;align-items:center}
.tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.tab .c{font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--idle-soft);color:var(--idle);font-variant-numeric:tabular-nums}
.tab .c.crit{background:var(--crit-soft);color:var(--crit)}
.tab .c.warn{background:var(--warn-soft);color:var(--warn)}
.tab .c.acc{background:var(--accent-soft);color:var(--accent)}
.dtools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:8px 14px}
.dtools input{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);min-width:0;flex:1;max-width:260px}
.dtools .note{font-size:12px;color:var(--muted)}
.sku{font-family:var(--mono);font-size:12px;white-space:nowrap}
.desc{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.chip.crit{background:var(--crit-soft);color:var(--crit)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.idle{background:var(--idle-soft);color:var(--idle)}
.chip.acc{background:var(--accent-soft);color:var(--accent)}
.chip.good{background:var(--good-soft);color:var(--good)}
.empty{padding:26px 14px;text-align:center;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:6px;font-size:13px;z-index:9}
.foot{font-size:12px;color:var(--muted);line-height:1.6}
.foot b{color:var(--ink2);font-weight:600}
@media (prefers-reduced-motion:no-preference){.fill{transition:width .25s ease}}

/* ---- app ---- */
html,body{min-height:100%}
.appbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding-block:4px 2px}
.appbar .who{font-size:13px;color:var(--ink2);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.nav button{border:0;background:none;padding:8px 12px 9px;cursor:pointer;font-weight:500;color:var(--ink2);border-bottom:2px solid transparent}
.nav button[aria-current=page]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.login{max-width:380px;margin:8vh auto 0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.login h1{font-family:var(--cond);font-size:24px;margin:0}
.login p{margin:0;color:var(--ink2);font-size:13px}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink2)}
.field input,.field select{padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);font-size:14px;color:var(--ink)}
.err{color:var(--crit);font-size:13px;min-height:1em}
.okmsg{color:var(--good);font-size:13px}
.statusline{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:var(--ink2);padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:8px;align-items:center}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:14px}
.pad{padding:14px;display:flex;flex-direction:column;gap:12px}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.slot{border:1.5px dashed var(--line);border-radius:8px;padding:14px;background:var(--panel2);display:flex;flex-direction:column;gap:6px;cursor:pointer}
.slot.over{border-color:var(--accent);background:var(--accent-soft)}
.slot.filled{border-style:solid;border-color:var(--good)}
.slot b{font-family:var(--cond);font-size:15px}
.slot .fname{font-family:var(--mono);font-size:12px;color:var(--good);word-break:break-all}
.slot .hint2{font-size:12px;color:var(--muted)}
.steps{margin:0;padding-left:20px;color:var(--ink2);font-size:13px;display:flex;flex-direction:column;gap:4px}
.muted{color:var(--muted)}
.small{font-size:12px}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.btn.sm{padding:3px 9px;font-size:12.5px}
.btn.danger:hover{border-color:var(--crit);color:var(--crit)}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.dmain{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:1300px){.dmain{grid-template-columns:1fr}}
#main{width:100%}
.kpis{gap:0;background:var(--panel)}
.kpi{box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.dtools input{min-width:150px}
/* Tablero: comparativo arriba y detalle abajo, a todo lo ancho */
.dmain{grid-template-columns:1fr}
.dmain .desc{max-width:420px}
.inline-in{border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:5px;font:inherit;color:var(--ink);width:100%;min-width:140px}
.inline-in:hover{border-color:var(--line)}
.inline-in:focus{border-color:var(--accent);background:var(--panel2);outline:none}
.brand h1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;letter-spacing:.02em}
.brand-sub{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.logo{font-family:var(--cond);font-weight:700;font-size:44px;letter-spacing:.06em;color:var(--accent);line-height:1}
.login .logo-sub{margin-top:-8px;font-weight:600;color:var(--ink2)}
.modbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.modbar button{border:1px solid var(--line);background:var(--panel);padding:6px 14px;border-radius:999px;cursor:pointer;font-weight:600;font-family:var(--cond);font-size:14px;letter-spacing:.02em;color:var(--ink2)}
.modbar button[aria-current=page]{background:var(--accent);border-color:var(--accent);color:var(--panel)}
.modbar button.sys{margin-left:auto;font-weight:500}

/* ---- versiones (pie de página y pantalla Versiones) ---- */
.pie{max-width:inherit;margin:18px auto 10px;padding:10px 16px 0;border-top:1px solid var(--line);font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11.5px;color:var(--muted);text-align:center}
.pie button{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:2px 4px}
.pie button:hover{color:var(--accent)}
.pie-aviso{color:var(--warn);font-weight:600;margin-left:6px}
.ver-n{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:13px;font-weight:500;color:var(--accent);background:var(--accent-soft);padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:middle}
.ver-body{padding:4px 16px 14px;font-size:13.5px;line-height:1.5}
.ver-h{font-family:var(--cond);font-size:14.5px;margin:14px 0 4px}
.ver-l{margin:4px 0;padding-left:20px}
.ver-l li{margin:2px 0}
.ver-avisos{border-color:var(--warn);background:var(--warn-soft)}
.ver-avisos .ver-l{padding:8px 16px 12px 34px;color:var(--warn)}