:root{
  --bg:#141414;
  --surface:#2B2B2B;
  --surface2:#2B2B2B;
  --line:rgba(201,162,39,.30);
  --text:#F6F1E4;
  --muted:rgba(246,241,228,.68);
  --accent:#C9A227;
  --ok:#C9A227;
  --warn:#C9A227;
  --danger:#F6F1E4;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}
button,select{font:inherit}
.shell{display:grid;grid-template-columns:258px 1fr;min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;
  border-right:1px solid var(--line);
  background:#141414;
  padding:20px 16px;
  display:flex;flex-direction:column;
}
.brand-row{display:flex;align-items:center;gap:12px;padding:2px 6px 20px}
.brand-mark{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:#C9A227;color:#141414;font-weight:900;font-size:12px
}
.brand-row strong,.brand-row span{display:block}
.brand-row strong{font-size:14px;letter-spacing:.12em}
.brand-row span{font-size:11px;color:var(--muted);margin-top:3px}
.company-box{padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:15px}
.company-box small{display:block;color:var(--muted);font-size:9px;letter-spacing:.14em;margin-bottom:8px}
.company-box select{width:100%;background:transparent;border:0;color:var(--text);outline:0;font-size:12px}
nav{display:flex;flex-direction:column;gap:3px;overflow:auto;padding-right:2px}
.nav-item{
  width:100%;border:0;background:transparent;color:var(--muted);
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;text-align:left;cursor:pointer
}
.nav-item:hover,.nav-item.active{background:var(--surface2);color:var(--text)}
.nav-item span{font-size:13px}
.back-link{margin-top:auto;padding:16px 10px 2px;color:var(--muted);font-size:12px;text-decoration:none}
.main{min-width:0;padding:30px 34px 70px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.eyebrow{margin:0 0 6px;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.16em}
h1{margin:0;font-size:30px;letter-spacing:-.035em}
.top-actions{display:flex;align-items:center;gap:9px}
.ghost,.primary{height:38px;padding:0 14px;border-radius:9px;cursor:pointer}
.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.primary{background:var(--text);color:#141414;border:1px solid var(--text);font-weight:800}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#2B2B2B;font-size:11px;font-weight:800}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.kpi,.panel{
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(43,43,43,.98),rgba(20,20,20,.98));
  border-radius:14px;
}
.kpi{padding:18px}
.kpi span{display:block;color:var(--muted);font-size:11px;margin-bottom:12px}
.kpi strong{display:block;font-size:24px;letter-spacing:-.03em}
.kpi small{display:block;margin-top:7px;font-size:10px}
.good{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--danger)}
.grid2{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}
.panel{padding:20px}
.panel h2{margin:0 0 4px;font-size:16px}
.panel-sub{margin:0 0 18px;color:var(--muted);font-size:12px}
.table{width:100%;border-collapse:collapse;font-size:12px}
.table th{color:var(--muted);font-weight:600;text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.table td{padding:12px 8px;border-bottom:1px solid rgba(201,162,39,.14)}
.tag{display:inline-flex;padding:4px 8px;border-radius:999px;background:rgba(201,162,39,.14);font-size:10px}
.alert-list{display:flex;flex-direction:column;gap:9px}
.alert{padding:12px;border:1px solid var(--line);border-radius:10px;background:rgba(246,241,228,.02)}
.alert strong,.alert span{display:block}.alert strong{font-size:12px}.alert span{font-size:11px;color:var(--muted);margin-top:4px}
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.module-card{padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);min-height:145px}
.module-card h3{margin:0 0 8px;font-size:15px}
.module-card p{margin:0;color:var(--muted);font-size:12px}
.module-card button{margin-top:18px;border:0;background:transparent;color:var(--accent);padding:0;cursor:pointer;font-weight:700;font-size:11px}
.placeholder{
  padding:34px;border:1px dashed rgba(201,162,39,.35);border-radius:16px;background:rgba(255,255,255,.015)
}
.placeholder h2{margin:0 0 8px;font-size:20px}
.placeholder p{margin:0;color:var(--muted);max-width:780px}
@media(max-width:1050px){
  .shell{grid-template-columns:86px 1fr}
  .brand-row>div:last-child,.company-box small,.company-box select,.nav-item span,.back-link{display:none}
  .brand-row{justify-content:center}.company-box{height:45px}.nav-item{justify-content:center}
  .kpis{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}
}
@media(max-width:720px){
  .shell{display:block}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .brand-row{justify-content:flex-start}.brand-row>div:last-child{display:block}.company-box{display:none}
  nav{display:grid;grid-template-columns:repeat(4,1fr)}.nav-item{justify-content:center}.main{padding:22px 16px 50px}
  .topbar{align-items:flex-start}.top-actions .ghost{display:none}.kpis{grid-template-columns:1fr}.module-grid{grid-template-columns:1fr}
}

/* OPERIUMX Black & Gold identity */
.nav-item:hover,.nav-item.active{background:rgba(201,162,39,.12);color:#C9A227}
.primary{background:#C9A227!important;color:#141414!important;border-color:#C9A227!important}
.ghost:hover{border-color:#C9A227;color:#C9A227}
.avatar{border:1px solid rgba(201,162,39,.35);color:#C9A227}
.kpi,.panel{box-shadow:0 18px 50px rgba(0,0,0,.16)}
.table th{color:#C9A227}
.module-card button{color:#C9A227}

/* OPERIUMX v0.4.0 integrated operations */
.form-grid select{
  width:100%;
  height:42px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#141414;
  color:var(--text);
  padding:0 12px;
  outline:0;
}
.form-grid select:focus{border-color:var(--accent)}
.row-action{
  border:1px solid rgba(201,162,39,.45);
  background:rgba(201,162,39,.10);
  color:#C9A227;
  border-radius:8px;
  padding:7px 10px;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.row-action:hover{background:#C9A227;color:#141414}
.quick-create{grid-template-columns:repeat(3,1fr)}
@media(max-width:720px){.quick-create{grid-template-columns:1fr}}

/* Provisional OPERIUMX logo */
.brand-row{padding:0 4px 18px}
.app-logo{display:block;width:210px;max-width:100%;height:auto;object-fit:contain}
@media(max-width:1050px){
  .app-logo{width:56px}
}
@media(max-width:720px){
  .app-logo{width:190px}
}

/* OPERIUMX v0.5.0 */
.form-grid .wide{grid-column:1/-1}
.table td.good{color:#C9A227}
.table td.bad{color:#F6F1E4}
.nav-item[data-view="cotizaciones"].active,
.nav-item[data-view="pedidos"].active,
.nav-item[data-view="movimientos"].active,
.nav-item[data-view="conciliacion"].active{background:rgba(201,162,39,.14);color:#C9A227}

/* v0.5.1 logo visibility fix */
.brand-row{
  background:#F6F1E4;
  border:1px solid rgba(201,162,39,.55);
  border-radius:10px;
  padding:7px 10px 14px;
  margin-bottom:12px;
}
.app-logo{
  width:100%;
  height:44px;
  object-fit:contain;
}
@media(max-width:1050px){
  .brand-row{padding:6px}
  .app-logo{width:100%;height:40px}
}
@media(max-width:720px){
  .brand-row{width:210px}
  .app-logo{height:42px}
}

/* v0.5.2 logo sizing */
.brand-row{overflow:hidden;padding:4px 8px;margin-bottom:12px}
.app-logo{width:100%;height:54px;object-fit:cover;object-position:center}
@media(max-width:1050px){.app-logo{height:42px}}
@media(max-width:720px){.brand-row{width:230px}.app-logo{height:50px}}

/* v0.5.3 stable provisional wordmark */
.brand-row{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:62px;
  padding:0 12px;
  margin-bottom:14px;
  background:#F6F1E4;
  border:1px solid rgba(201,162,39,.60);
  border-radius:10px;
  overflow:visible;
}
.brand-wordmark{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  font-family:"Arial Black","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  font-size:26px;
  font-weight:900;
  line-height:1;
  letter-spacing:-1.6px;
  color:#141414;
}
.brand-o,.brand-x{color:#C9A227}
.brand-x{font-size:1.08em;margin-left:1px}
.app-wordmark{max-width:100%}
@media(max-width:1050px){
  .brand-row{min-height:52px;padding:0 5px}
  .app-wordmark{font-size:14px;letter-spacing:-1px}
}
@media(max-width:720px){
  .brand-row{width:230px;min-height:58px;padding:0 10px}
  .app-wordmark{font-size:24px}
}

/* v0.5.6 exact app logo cleanup */
.brand-row{
  width:100%!important;
  min-height:54px!important;
  padding:6px 8px!important;
  margin:0 0 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:#F6F1E4!important;
  border:1px solid rgba(201,162,39,.55)!important;
  border-radius:8px!important;
}
.app-logo{
  width:100%!important;
  height:40px!important;
  object-fit:contain!important;
  object-position:center!important;
}
@media(max-width:1050px){.app-logo{height:32px!important}}
@media(max-width:720px){.brand-row{width:188px!important}.app-logo{height:36px!important}}

/* v0.5.7 exact verified logo */
.brand-row{min-height:54px!important;padding:6px 8px!important;background:#F6F1E4!important;border:1px solid rgba(201,162,39,.55)!important;border-radius:8px!important;overflow:hidden!important}
.app-logo{display:block!important;width:100%!important;height:40px!important;object-fit:contain!important;object-position:center!important}

/* v0.5.8 emergency: remove broken raster asset entirely */
.operiumx-app-wordmark{
 width:auto!important;min-height:0!important;height:auto!important;padding:0!important;margin:0 0 16px!important;
 background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important;
 color:#F6F1E4!important;font-family:Arial,Helvetica,sans-serif!important;font-size:22px!important;
 font-weight:900!important;letter-spacing:.14em!important;line-height:1!important;justify-content:flex-start!important;
}

/* v0.6.0 exact provisional OPERIUMX logo asset */
.operiumx-app-logo-shell{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:56px!important;
  height:56px!important;
  padding:6px 8px!important;
  margin:0 0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:#F6F1E4!important;
  border:1px solid rgba(201,162,39,.55)!important;
  border-radius:8px!important;
}
.operiumx-app-logo-shell .app-logo{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
@media(max-width:1050px){
  .operiumx-app-logo-shell{height:48px!important;padding:5px!important}
}
@media(max-width:720px){
  .operiumx-app-logo-shell{width:204px!important;height:52px!important;padding:5px 7px!important}
}

/* v0.6.1 engineering release identity */
.release-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.release-line .eyebrow{margin:0}
.sandbox-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border:1px solid rgba(201,162,39,.55);
  border-radius:999px;
  background:rgba(201,162,39,.10);
  color:#C9A227;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  white-space:nowrap;
}
@media(max-width:720px){
  .release-line{gap:7px}
  .sandbox-badge{font-size:8px;padding:4px 7px}
}

/* v0.6.2 identity, tenant and RBAC foundation */
.foundation-server-badge{display:inline-flex;align-items:center;padding:7px 10px;border:1px solid rgba(201,162,39,.45);border-radius:999px;background:rgba(201,162,39,.08);color:#C9A227;font-size:9px;font-weight:900;letter-spacing:.08em}
.foundation-loading,.foundation-error{min-height:120px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}.foundation-error strong{color:#C9A227}.foundation-error span{color:var(--muted);font-size:12px}
.foundation-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.foundation-card{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 18px 50px rgba(0,0,0,.16)}.foundation-card span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.foundation-card strong{display:block;margin:8px 0 5px;color:var(--text);font-size:18px}.foundation-card small{color:#C9A227}
.foundation-panel{margin-top:16px}.foundation-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.foundation-panel-head>span{color:#C9A227;font-size:11px;font-weight:800}.permission-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.permission-chip{display:inline-flex;padding:7px 9px;border-radius:8px;border:1px solid rgba(201,162,39,.28);background:rgba(201,162,39,.07);color:#F6F1E4;font-size:10px}
.foundation-control{margin-top:16px}.foundation-control-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}.foundation-control-grid>div{padding:13px;border:1px solid var(--line);border-radius:10px;background:#141414}.foundation-control-grid strong{display:block;color:#C9A227;font-size:11px;margin-bottom:5px}.foundation-control-grid span{display:block;color:var(--muted);font-size:11px;line-height:1.45}.foundation-warning{margin-top:16px;padding:12px 14px;border-left:3px solid #C9A227;background:rgba(201,162,39,.06);color:var(--muted);font-size:11px}.foundation-warning strong{color:#F6F1E4}
@media(max-width:1050px){.foundation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foundation-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.foundation-grid,.foundation-control-grid{grid-template-columns:1fr}.foundation-panel-head{flex-direction:column}.foundation-server-badge{margin-top:8px}}

.nav-item{text-decoration:none}