:root{
  --bg:#f4f5f8; --card:#ffffff; --line:#e7e9ef; --line-soft:#f0f2f6;
  --ink:#12151b; --text:#39414d; --muted:#767e8b;
  --emerald:#0f9d6a; --emerald-d:#0b7d54; --emerald-soft:#0f9d6a16;
  --wonder:#0f9d6a; --baydu:#c07d0a; --novo:#2f6bff;
  --red:#c8372a; --red-soft:#c8372a15;
  --slate:#7d8593; --slate-soft:#7d859320;
  --amber-soft:#c07d0a16; --blue-soft:#2f6bff14;
  --radius:15px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(18,21,27,.04), 0 6px 22px rgba(18,21,27,.05);
  --font:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;font-size:14.5px;line-height:1.5}
.hidden{display:none !important}
.muted{color:var(--muted);font-size:.85rem}
.error{color:var(--red);font-size:.83rem;min-height:1em;margin:.4rem 0 0}
b,strong{font-weight:600}

/* botones */
.btn{font:inherit;font-weight:600;border:0;border-radius:10px;padding:.6rem 1rem;
  cursor:pointer;transition:background .15s,box-shadow .15s,transform .05s;letter-spacing:-.01em}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--emerald);color:#fff;box-shadow:0 1px 2px #0f9d6a40}
.btn-primary:hover{background:var(--emerald-d)}
.btn-primary:disabled{background:#cdd2da;color:#fff;box-shadow:none;cursor:not-allowed}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:#f6f7f9;border-color:#d9dce3}
.btn-sm{padding:.45rem .8rem;font-size:.85rem;border-radius:9px}
.btn-block{width:100%}
.link{background:none;border:0;color:var(--emerald);font:inherit;font-weight:600;cursor:pointer;padding:0}
input,select{font:inherit;padding:.55rem .7rem;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{outline:0;border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-soft)}

/* marca (3 puntos = 3 empresas) */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:-3px}
.dot-w{background:var(--wonder)} .dot-b{background:var(--baydu)} .dot-n{background:var(--novo)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:1rem;
  background:radial-gradient(120% 80% at 50% -10%, #ffffff 0%, var(--bg) 55%)}
.login-card{width:350px;background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:2rem 1.8rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.55rem}
.login-mark{display:flex;gap:2px;margin-bottom:.3rem}
.login-mark .dot{width:12px;height:12px}
.login-card h1{margin:.2rem 0 0;font-size:1.5rem;color:var(--ink);letter-spacing:-.02em}
.login-card .muted{margin:0 0 .8rem}
.login-card label{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;color:var(--muted);font-weight:500}
.login-card .btn{margin-top:.6rem}

/* shell */
.shell{display:grid;grid-template-columns:238px 1fr;min-height:100vh}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:1.3rem 1rem;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:.7rem;padding:.2rem .5rem 1.3rem}
.side-mark{display:flex;gap:2px}
.side-brand strong{display:block;color:var(--ink);font-size:1.02rem;letter-spacing:-.02em;line-height:1.1}
.side-brand span{display:block;color:var(--muted);font-size:.72rem}
.side-nav{display:flex;flex-direction:column;gap:2px}
.nav-item{position:relative;text-align:left;background:none;border:0;color:var(--muted);
  font:inherit;font-weight:600;font-size:.92rem;padding:.6rem .75rem;border-radius:10px;cursor:pointer;transition:.15s}
.nav-item:hover{background:var(--line-soft);color:var(--text)}
.nav-item.active{background:var(--emerald-soft);color:var(--emerald-d)}
.nav-item.active::before{content:"";position:absolute;left:-1rem;top:20%;bottom:20%;width:3px;
  border-radius:0 3px 3px 0;background:var(--emerald)}
.side-foot{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.side-user{display:flex;align-items:center;gap:.55rem;min-width:0}
.side-user #userName{font-size:.85rem;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--emerald);color:#fff;
  display:grid;place-items:center;font-size:.8rem;font-weight:700;flex:none}

/* contenido */
.content{padding:2rem 2.4rem;max-width:1180px;width:100%}
.pagehead{margin-bottom:1.3rem}
.pagehead h2{margin:0;font-size:1.5rem;color:var(--ink);letter-spacing:-.02em}
.pagehead p{margin:.25rem 0 0;color:var(--muted);font-size:.9rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1.4rem;box-shadow:var(--shadow);margin-bottom:1.3rem}
.step{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.step-between{justify-content:space-between;flex-wrap:wrap;gap:.7rem}
.step h3{margin:0;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.step-n{width:24px;height:24px;border-radius:8px;background:var(--emerald-soft);color:var(--emerald-d);
  display:grid;place-items:center;font-size:.82rem;font-weight:700;font-family:var(--mono)}
.row-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}

/* drop */
.drop{border:1.5px dashed #d5d9e0;border-radius:12px;padding:1.8rem 1rem;text-align:center;
  transition:.15s;background:#fcfcfd}
.drop.hover{border-color:var(--emerald);background:var(--emerald-soft)}
.drop-ico{width:40px;height:40px;border-radius:50%;background:var(--emerald-soft);color:var(--emerald-d);
  display:grid;place-items:center;font-size:1.2rem;font-weight:700;margin:0 auto .6rem}
.drop p{margin:.2rem 0;color:var(--text)}
.pill-file{display:inline-block;margin-top:.6rem;padding:.3rem .7rem;background:var(--line-soft);
  border-radius:20px;font-family:var(--mono);font-size:.8rem;color:var(--ink)}
.row-actions{margin-top:1rem}

/* resumen por empresa */
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin-bottom:1.2rem}
.sum-card{border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;border-left:3px solid var(--slate)}
.sum-card.e-WONDER{border-left-color:var(--wonder)}
.sum-card.e-BAYDU{border-left-color:var(--baydu)}
.sum-card.e-NOVO{border-left-color:var(--novo)}
.sum-emp{font-weight:700;color:var(--ink);font-size:.9rem;letter-spacing:-.01em}
.sum-line{display:flex;justify-content:space-between;margin-top:.35rem;font-size:.8rem;color:var(--muted)}
.sum-line b{font-family:var(--mono);color:var(--ink);font-weight:500}

/* tabla */
.table-wrap{overflow-x:auto;margin:0 -.3rem}
.grid{width:100%;border-collapse:collapse;font-size:.85rem}
.grid th,.grid td{padding:.55rem .5rem;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.grid th:first-child,.grid td:first-child{padding-left:.2rem}
.grid th:last-child,.grid td:last-child{padding-right:.2rem}
.grid thead th{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:600;border-bottom:1px solid var(--line);background:#fff}
.grid tbody tr:hover{background:#fafbfc}
.grid td.num,.grid th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:.83rem;color:var(--ink)}
.grid th.num{font-family:var(--font)}
.c-check,.c-exp{width:1%}
.emp{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ink)}
.emp::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--slate)}
.emp.e-WONDER::before{background:var(--wonder)} .emp.e-BAYDU::before{background:var(--baydu)} .emp.e-NOVO::before{background:var(--novo)}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--emerald);cursor:pointer}

/* badges */
.badge{display:inline-block;padding:.18rem .55rem;border-radius:20px;font-size:.73rem;font-weight:600;letter-spacing:-.01em}
.b-ok{background:var(--emerald-soft);color:var(--emerald-d)}
.b-dup{background:var(--slate-soft);color:#5a616d}
.b-block{background:var(--red-soft);color:var(--red)}
.det{cursor:pointer;color:var(--emerald-d);font-weight:600;font-size:.82rem;user-select:none;white-space:nowrap}
.det:hover{text-decoration:underline}

/* subtabla detalle */
.subrow>td{background:#fafbfc;padding:0;border-bottom:1px solid var(--line)}
.subtable{width:100%;border-collapse:collapse;font-size:.8rem}
.subtable td{padding:.35rem .6rem;border-bottom:1px solid #eef0f4;color:var(--text)}
.subtable tr:last-child td{border-bottom:0}
.subhead td{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.subtable td.n{font-family:var(--mono);text-align:right;color:var(--ink)}
.remap{background:var(--emerald-soft)}
.badrow{background:var(--red-soft)}
.warnline td{color:var(--red);font-weight:600;background:var(--red-soft)}

/* resultados */
.results{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.5rem}
.results li{padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;font-size:.88rem;
  display:flex;align-items:center;gap:.5rem}
.results a{color:var(--emerald-d);font-weight:600;text-decoration:none;font-family:var(--mono);font-size:.82rem}
.results a:hover{text-decoration:underline}

/* usuarios */
.userform{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1.2rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--line-soft)}

/* responsive */
@media(max-width:760px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:.5rem;
    border-right:0;border-bottom:1px solid var(--line)}
  .side-brand{padding:.2rem .3rem;border:0}
  .side-nav{flex-direction:row;flex:1;justify-content:center}
  .nav-item.active::before{display:none}
  .side-foot{margin:0;border:0;padding:0}
  .content{padding:1.3rem 1.1rem}
}