/* ─────────────────────────────────────────────────────────────
   Loopa · consola interna de Black&WhiteIA — admin.blackwhiteia.cloud
   Panel del proveedor: clientes en Loopa, consumo, facturación,
   estado de la API de Anthropic, equipo interno e integraciones.

   Sistema visual de Black&WhiteIA: glow naranja sobre negro. El color
   nunca comunica solo — siempre va con texto. Todo dato numérico en
   JetBrains Mono; interfaz en Inter; títulos en Space Grotesk.
   ───────────────────────────────────────────────────────────── */
:root{
  --bg:#050507;
  --surface:#0C0C10;
  --card:#111116;
  --border:#1C1C24;
  --border-soft:#14141A;
  --accent:#FF6A1A;
  --accent-glow:rgba(255,106,26,.12);
  --white:#F2F2F0;
  --muted:#8A8A94;
  --muted2:#4A4A54;
  --green:#00E699;
  --amber:#FFB020;
  --red:#FF5C5C;

  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg);}
body{
  font-family:var(--sans);
  color:var(--white);
  font-size:13px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
}
a{color:var(--accent);text-decoration:none;}
a:hover{color:#FF8A4A;}
input,button,select,textarea{font-family:inherit;}
button{cursor:pointer;}

/* Glow ambiental de fondo — CSS puro, fijo al viewport, detrás de todo. */
.glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(640px 420px at 12% -8%, rgba(255,106,26,.16), transparent 60%),
    radial-gradient(520px 360px at 92% 4%,  rgba(255,106,26,.10), transparent 60%),
    radial-gradient(760px 520px at 50% 118%, rgba(255,106,26,.07), transparent 60%);
}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

/* ── SHELL ─────────────────────────────────────────────────── */
.shell{
  position:relative;z-index:1;
  display:grid;grid-template-columns:248px 1fr;
  min-height:100vh;
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
.side{
  border-right:1px solid var(--border);
  background:rgba(12,12,16,.72);
  padding:22px 16px;
  display:flex;flex-direction:column;gap:20px;
  position:sticky;top:0;height:100vh;
}
.side-brand{display:flex;flex-direction:column;gap:3px;}
.side-brand .name{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em;}
.side-brand .name .dot{color:var(--accent);}
.side-brand .name .sub{color:var(--muted);font-weight:600;}
.side-brand .host{font-family:var(--mono);font-size:10px;color:var(--muted2);}

.side-nav{display:flex;flex-direction:column;gap:18px;overflow-y:auto;flex:1;}
.nav-group{display:flex;flex-direction:column;gap:3px;}
.nav-group-label{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted2);padding:0 8px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:8px;border-radius:9px;border:1px solid transparent;background:transparent;
  color:var(--muted);font-size:12.5px;font-weight:500;text-align:left;
  transition:.15s;
}
.nav-item:hover{color:var(--white);border-color:rgba(255,106,26,.3);}
.nav-item.active{border-color:var(--accent);background:var(--accent-glow);color:var(--accent);}
.nav-item .ic{
  width:24px;height:24px;border-radius:6px;background:rgba(255,106,26,.08);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.nav-item .ic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;}
.nav-item .lbl{flex:1;}
.nav-item .badge-count{
  font-family:var(--mono);font-size:9.5px;color:var(--red);
  border:1px solid rgba(255,92,92,.35);border-radius:20px;padding:1px 7px;
}
.nav-item .badge-view{font-family:var(--mono);font-size:9.5px;color:var(--muted2);}

.nav-hidden{
  font-family:var(--mono);font-size:10px;color:var(--muted2);line-height:1.5;
  padding:10px;border:1px dashed var(--border);border-radius:8px;
}

.side-session{
  border-top:1px solid var(--border);padding-top:14px;
  display:flex;align-items:center;gap:9px;
}
.side-session .avatar{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  background:rgba(255,106,26,.14);border:1px solid rgba(255,106,26,.3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:11px;color:var(--accent);
}
.side-session .who{min-width:0;}
.side-session .who .n{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side-session .who .r{font-family:var(--mono);font-size:9.5px;color:var(--muted);}

/* ── MAIN ──────────────────────────────────────────────────── */
.main{min-width:0;display:flex;flex-direction:column;}

.topbar{
  border-bottom:1px solid var(--border);
  background:rgba(5,5,7,.7);backdrop-filter:blur(8px);
  padding:16px 28px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  position:sticky;top:0;z-index:20;
}
.topbar-title{flex:1;min-width:220px;}
.crumbline{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.crumb{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.crumb-back{
  font-family:var(--mono);font-size:10px;padding:2px 8px;border-radius:20px;
  border:1px solid var(--border);background:var(--card);color:var(--muted);
}
.crumb-back:hover{color:var(--white);border-color:rgba(255,106,26,.3);}
.screen-title{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:-.02em;}

.topbar-search{
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:9px 12px;color:var(--white);font-size:12.5px;width:180px;
}
.topbar-search:focus{outline:none;border-color:var(--accent);}
.topbar-search::placeholder{color:var(--muted2);}

.topbar-role{
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:9px 10px;color:var(--white);font-size:12px;
}
.topbar-role:focus{outline:none;border-color:var(--accent);}

.demo-btn{
  font-family:var(--mono);font-size:11px;padding:9px 14px;border-radius:8px;
  border:1px solid var(--border);background:var(--card);color:var(--muted);transition:.15s;
}
.demo-btn:hover{color:var(--white);border-color:rgba(255,106,26,.3);}
.demo-btn.on{border-color:var(--accent);background:var(--accent-glow);color:var(--accent);}

/* ── BANNERS / BLOCK ───────────────────────────────────────── */
.readonly-banner{
  margin:18px 28px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border-radius:10px;
  background:rgba(255,176,32,.06);border:1px solid rgba(255,176,32,.28);
  color:var(--amber);font-size:12px;
}
.readonly-banner .tag{font-family:var(--mono);font-size:10px;}
.readonly-banner .msg{color:var(--muted);}

.blocked{
  background:var(--surface);border:1px dashed var(--border);border-radius:12px;
  padding:70px 30px;text-align:center;
}
.blocked h2{font-family:var(--display);font-weight:800;font-size:17px;margin-bottom:8px;}
.blocked p{font-size:12.5px;color:var(--muted);max-width:400px;margin:0 auto;}

/* ── CONTENT ───────────────────────────────────────────────── */
.content{padding:22px 28px 64px;display:flex;flex-direction:column;gap:18px;}

/* ── PRIMITIVES ────────────────────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;}
.panel-pad{padding:20px 22px;}
.panel-head{
  padding:14px 18px;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.panel-head h3{font-family:var(--display);font-weight:700;font-size:14px;}
.panel-head .note{font-family:var(--mono);font-size:10px;color:var(--muted);}
.panel-head .sub{font-size:11.5px;color:var(--muted);margin-top:2px;}

.eyebrow{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
}
.eyebrow.dim{color:var(--muted2);}
.section-note{font-family:var(--mono);font-size:9.5px;color:var(--muted2);}

.num{font-family:var(--mono);}

/* KPI grid */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:17px 19px;}
.kpi.warn{border-color:rgba(255,92,92,.3);}
.kpi .k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted2);margin-bottom:8px;
}
.kpi .v{font-family:var(--display);font-size:26px;font-weight:800;line-height:1;}
.kpi .v.sm{font-size:20px;}
.kpi .d{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:6px;}
.kpi.warn .d{color:var(--red);}

/* Pills — color set inline (color nunca comunica solo → siempre con texto).
   justify-self:start evita que se estiren cuando son celda de una grilla. */
.pill{
  font-family:var(--mono);font-size:10px;padding:3px 10px;border-radius:20px;
  border:1px solid var(--border);white-space:nowrap;
  display:inline-block;justify-self:start;
}

/* Bars */
.bar{display:block;height:5px;border-radius:3px;background:var(--card);border:1px solid var(--border);overflow:hidden;}
.bar.lg{height:7px;border-radius:4px;}
.bar.xl{height:9px;border-radius:5px;}
.bar > i{display:block;height:100%;border-radius:inherit;}
.bar > i.empty{
  width:100%;
  background-image:repeating-linear-gradient(90deg,var(--border) 0 6px,transparent 6px 12px);
}

/* Grid tables — every table sets --cols on the wrapper */
.tbl{--cols:1fr;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.tbl .thead,
.tbl .trow{display:grid;grid-template-columns:var(--cols);gap:12px;align-items:center;}
.tbl .thead{
  padding:11px 18px;border-bottom:1px solid var(--border);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);
}
.tbl .trow{
  padding:13px 18px;border-bottom:1px solid var(--border-soft);
  font-size:12px;color:var(--white);width:100%;text-align:left;background:transparent;border-left:0;border-right:0;border-top:0;
}
.tbl .trow:last-child{border-bottom:none;}
button.trow{transition:.15s;}
button.trow:hover{background:rgba(255,106,26,.04);}
button.trow:hover .cell-title{color:var(--white);}
.tbl .empty{padding:44px;text-align:center;color:var(--muted2);font-size:12.5px;}

.cell-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cell-sub{font-family:var(--mono);font-size:9.5px;color:var(--muted2);margin-top:3px;}
.cell-mono{font-family:var(--mono);font-size:10.5px;color:var(--muted);}
.cell-mono.strong{font-size:11px;color:var(--white);}
.cell-stack .lead{font-family:var(--mono);font-size:11px;color:var(--white);margin-bottom:5px;}

/* Buttons */
.btn{
  font-family:var(--mono);font-size:11.5px;padding:9px 16px;border-radius:8px;
  border:1px solid var(--border);background:var(--card);color:var(--muted);transition:.15s;
}
.btn:hover{color:var(--white);border-color:rgba(255,106,26,.3);}
.btn-accent{border-color:var(--accent);background:var(--accent-glow);color:var(--accent);}
.btn-accent:hover{background:rgba(255,106,26,.2);color:var(--accent);}
.btn-sm{font-size:10.5px;padding:5px 11px;border-radius:20px;}
.btn-pill{font-size:10px;padding:4px 10px;border-radius:20px;}

.chip-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.spacer{flex:1;}

.filter{
  font-family:var(--mono);font-size:11px;padding:7px 14px;border-radius:20px;
  border:1px solid var(--border);background:var(--card);color:var(--muted);transition:.15s;
}
.filter:hover{color:var(--white);border-color:rgba(255,106,26,.3);}
.filter.on{border-color:var(--accent);background:var(--accent-glow);color:var(--accent);}

/* Two-column layouts */
.cols{display:grid;gap:14px;align-items:start;}
.cols.home{grid-template-columns:1.35fr 1fr;}
.cols.ficha{grid-template-columns:1fr 300px;}
.cols.api{grid-template-columns:1fr 300px;}
.cols.onb{grid-template-columns:1fr 320px;}
.cols.half{grid-template-columns:1fr 1fr;}
.stack{display:flex;flex-direction:column;gap:14px;}

/* Rows list (attention / agenda / tasks / activity / timeline) */
.list-row{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:14px 18px;border:none;border-bottom:1px solid var(--border-soft);background:transparent;
}
.list-row:last-child{border-bottom:none;}
button.list-row{transition:.15s;}
button.list-row:hover{background:rgba(255,106,26,.04);}
.list-row .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.list-row .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.list-row .body .t{font-size:12.5px;font-weight:600;color:var(--white);}
.list-row .body .d{font-size:11.5px;color:var(--muted);}
.list-row .when{font-family:var(--mono);font-size:10px;color:var(--muted2);white-space:nowrap;}

.mini-row{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--border-soft);}
.mini-row:last-child{border-bottom:none;}
.mini-row .time{font-family:var(--mono);font-size:11px;color:var(--accent);width:44px;flex-shrink:0;}
.mini-row .time.wide{width:70px;font-size:10px;color:var(--muted2);}
.mini-row .mt{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-row .md{font-size:11px;color:var(--muted);}
.mini-row .mx{font-size:12px;color:var(--white);}

.task-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-soft);}
.task-row:last-child{border-bottom:none;}
.task-row .box{width:13px;height:13px;border-radius:4px;flex-shrink:0;border:1px solid var(--border);background:var(--card);}
.task-row .box.done{border-color:var(--accent);background:rgba(255,106,26,.3);}
.task-row .tt{flex:1;font-size:12px;min-width:0;}
.task-row .tdb{font-family:var(--mono);font-size:9.5px;color:var(--muted2);white-space:nowrap;}

.kv{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:8px 0;border-bottom:1px solid var(--border-soft);}
.kv:last-child{border-bottom:none;}
.kv .kk{color:var(--muted);}
.kv .kvv{font-family:var(--mono);font-size:11px;color:var(--white);text-align:right;}
.kv-note{font-family:var(--mono);font-size:9.5px;color:var(--muted2);margin-top:12px;line-height:1.5;}

/* Ficha quota + metrics */
.quota{margin-bottom:16px;}
.quota-head{display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:6px;}
.quota-head .qk{color:var(--muted);}
.quota-head .qv{font-family:var(--mono);font-size:11px;color:var(--white);}
.mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;}
.mini-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:13px 15px;}
.mini-card .mk{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-bottom:6px;}
.mini-card .mv{font-family:var(--display);font-size:18px;font-weight:800;}

.chan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:9px;}
.chan{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:11px 13px;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.chan .cn{font-size:12px;font-weight:600;}

/* Ficha tabs */
.tabs{display:flex;gap:8px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.tab{
  font-family:var(--mono);font-size:11.5px;padding:10px 16px;background:transparent;
  border:none;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--muted);transition:.15s;
}
.tab:hover{color:var(--white);}
.tab.active{border-bottom-color:var(--accent);color:var(--accent);}

/* Notas */
.note-area{
  width:100%;height:78px;resize:vertical;
  background:var(--card);border:1px solid var(--border);border-radius:9px;
  padding:12px 14px;color:var(--white);font-size:12.5px;line-height:1.55;
}
.note-area:focus{outline:none;border-color:var(--accent);}
.note-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:10px;}
.hr{height:1px;background:var(--border);margin:20px 0;}
.note-item{padding:13px 0;border-bottom:1px solid var(--border-soft);}
.note-item:last-child{border-bottom:none;}
.note-item .meta{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px;}
.note-item .meta .by{font-family:var(--mono);font-size:10px;color:var(--accent);}
.note-item .meta .at{font-family:var(--mono);font-size:10px;color:var(--muted2);}
.note-item .txt{font-size:12.5px;line-height:1.55;}

.ticket-item{padding:10px 0;border-bottom:1px solid var(--border-soft);}
.ticket-item:last-child{border-bottom:none;}
.ticket-item .th{display:flex;justify-content:space-between;gap:8px;margin-bottom:3px;}
.ticket-item .tid{font-family:var(--mono);font-size:10px;color:var(--muted);}
.ticket-item .ts{font-size:11.5px;}

/* Consumo — segmented bar */
.seg{display:flex;gap:3px;height:26px;}
.seg > div{
  border-radius:6px;border:1px solid;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;overflow:hidden;
}
.seg-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;}
.seg-legend .li{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);}
.seg-legend .sw{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.seg-legend .tp{font-family:var(--mono);font-size:10.5px;color:var(--muted2);}

/* API gauges + histogram */
.gauge{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 22px;}
.gauge-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;}
.gauge-head .gk{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);}
.gauge .gv{font-family:var(--display);font-size:26px;font-weight:800;line-height:1;}
.gauge .gsub{font-size:11.5px;color:var(--muted);margin-top:5px;}
.gauge .bar{margin-top:16px;}
.gauge-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--muted2);margin-top:7px;}

.histo{display:flex;align-items:flex-end;gap:5px;height:120px;}
.histo .col{flex:1;height:100%;display:flex;align-items:flex-end;min-width:0;}
.histo .col > i{display:block;width:100%;border-radius:4px 4px 2px 2px;}
.histo .col > i.empty{height:100%;background-image:repeating-linear-gradient(0deg,var(--border-soft) 0 5px,transparent 5px 10px);border-radius:4px;}

.api-alert{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 16px;border-radius:10px;border:1px solid var(--border);
}
.api-alert .tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;}
.api-alert .msg{color:var(--muted);font-size:12px;}
.api-pressure{display:flex;gap:6px;align-items:center;}
.api-pressure .lbl{font-family:var(--mono);font-size:9px;color:var(--muted2);text-transform:uppercase;letter-spacing:.1em;}

/* Integraciones */
.banner-accent{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 16px;border-radius:10px;font-size:12px;color:var(--muted);
  background:rgba(255,106,26,.05);border:1px solid rgba(255,106,26,.2);
}
.banner-accent .tag{font-family:var(--mono);font-size:10px;color:var(--accent);}

.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.int-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:17px 19px;display:flex;flex-direction:column;gap:10px;}
.int-card .ih{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.int-card .iname{font-family:var(--display);font-weight:700;font-size:13.5px;}
.int-card .itype{font-family:var(--mono);font-size:9.5px;color:var(--muted2);margin-top:3px;}
.int-card .idesc{font-size:11.5px;color:var(--muted);line-height:1.55;}
.int-card .iscopes{display:flex;gap:6px;flex-wrap:wrap;}
.scope{font-family:var(--mono);font-size:9.5px;padding:3px 9px;border-radius:20px;border:1px solid var(--border);color:var(--muted);}
.int-card .ifoot{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:auto;padding-top:10px;border-top:1px solid var(--border-soft);
}
.int-card .isync{font-family:var(--mono);font-size:9.5px;color:var(--muted2);}
.int-btn{font-family:var(--mono);font-size:10.5px;padding:6px 13px;border-radius:7px;border:1px solid var(--border);background:var(--card);color:var(--muted);}
.int-btn:hover{color:var(--white);border-color:rgba(255,106,26,.3);}
.int-btn.accent{border-color:var(--accent);background:var(--accent-glow);color:var(--accent);}

/* Onboarding */
.onb-item{padding:16px 18px;border-bottom:1px solid var(--border-soft);}
.onb-item:last-child{border-bottom:none;}
.onb-item .oh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.onb-item .oname{font-family:var(--display);font-weight:700;font-size:13.5px;}
.onb-item .oprog{font-family:var(--mono);font-size:10px;color:var(--muted2);}
.steps{display:flex;gap:6px;flex-wrap:wrap;}
.step{font-family:var(--mono);font-size:10px;padding:5px 11px;border-radius:7px;border:1px solid var(--border);background:var(--card);color:var(--muted2);}
.step.done{border-color:rgba(255,106,26,.4);background:rgba(255,106,26,.1);color:var(--accent);}

.check-item{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--border-soft);}
.check-item:last-child{border-bottom:none;}
.check-item .cn{font-family:var(--mono);font-size:10px;color:var(--accent);width:18px;flex-shrink:0;}
.check-item .ck{font-size:12px;font-weight:600;}
.check-item .cd{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5;}

/* Roles matrix */
.matrix{min-width:620px;}
.matrix .mrow{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:10px;align-items:center;}
.matrix .mrow.head{padding:0 0 10px;border-bottom:1px solid var(--border);}
.matrix .mrow:not(.head){padding:11px 0;border-bottom:1px solid var(--border-soft);}
.matrix .mrow:last-child{border-bottom:none;}
.matrix .mhk{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);}
.matrix .mhr{font-family:var(--display);font-weight:700;font-size:12px;text-align:center;}
.matrix .mlabel{font-size:12px;}
.matrix .mcell{
  justify-self:center;font-family:var(--mono);font-size:10px;padding:3px 10px;border-radius:20px;
  border:1px solid transparent;
}
.matrix .mcell.edit{color:var(--accent);border-color:rgba(255,106,26,.4);background:rgba(255,106,26,.08);}
.matrix .mcell.view{color:var(--muted);border-color:var(--border);}
.matrix .mcell.none{color:var(--muted2);}
.scroll-x{overflow-x:auto;}

/* ── MODAL ─────────────────────────────────────────────────── */
.overlay{
  position:fixed;inset:0;z-index:60;
  background:rgba(5,5,7,.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal{
  width:520px;max-width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  max-height:88vh;display:flex;flex-direction:column;
}
.modal-head{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px;}
.modal-head .eyebrow{margin-bottom:4px;display:block;}
.modal-head .mt{font-family:var(--display);font-weight:800;font-size:17px;}
.modal-x{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--muted);font-size:14px;line-height:1;}
.modal-x:hover{color:var(--white);}
.modal-body{padding:22px 24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;}
.modal-foot{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:9px;}

.field-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:7px;}
.field-input{width:100%;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--white);font-size:12.5px;}
.field-input:focus{outline:none;border-color:var(--accent);}
.opt-grid{display:grid;gap:7px;}
.opt-grid.c2{grid-template-columns:1fr 1fr;}
.opt-grid.c4{grid-template-columns:repeat(4,1fr);}
.opt{font-family:var(--mono);font-size:11.5px;padding:10px 8px;border-radius:9px;border:1px solid var(--border);background:var(--card);color:var(--muted);transition:.15s;}
.opt:hover{color:var(--white);}
.opt.on{border-color:var(--accent);background:var(--accent-glow);color:var(--accent);}
.info-box{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
.info-box .ib-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:10px;}
.info-box .ib-chips{display:flex;flex-wrap:wrap;gap:6px;}
.info-box .ib-line{display:flex;justify-content:space-between;font-size:11.5px;}
.info-box .ib-line + .ib-line{margin-top:7px;}
.info-box .ib-line .il-k{color:var(--muted);}
.info-box .ib-line .il-v{font-family:var(--mono);font-size:11px;color:var(--accent);}
.perm-chip{font-family:var(--mono);font-size:10px;padding:4px 10px;border-radius:20px;border:1px solid var(--border);color:var(--muted);}
.perm-chip.edit{color:var(--accent);border-color:rgba(255,106,26,.35);}
.modal-note{font-size:11.5px;color:var(--muted);line-height:1.55;}

/* ── RESPONSIVE ────────────────────────────────────────────── */
/* Pensado para escritorio (≥1280px). Bajo ~1100px la barra lateral pasa a una
   tira horizontal desplazable arriba, los bloques de dos columnas se apilan y
   las tablas anchas hacen scroll horizontal dentro de su tarjeta. */
@media(max-width:1100px){
  .shell{display:block;}
  .side{
    position:relative;height:auto;width:100%;flex-direction:column;gap:12px;
    padding:14px 16px;border-right:0;border-bottom:1px solid var(--border);
  }
  .side-brand .host{display:none;}
  .side-session{position:absolute;top:12px;right:16px;border-top:0;padding-top:0;}
  .side-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;min-width:0;padding-bottom:2px;}
  .nav-group{flex-direction:row;flex-wrap:nowrap;gap:6px;flex-shrink:0;}
  .nav-group-label{display:none;}
  .nav-item{width:auto;flex-shrink:0;white-space:nowrap;}
  .nav-hidden{display:none;}

  .main{min-width:0;}
  .content{min-width:0;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .cols.home,.cols.ficha,.cols.api,.cols.onb,.cols.half{grid-template-columns:1fr;}
  .tbl{overflow-x:auto;}
  .tbl .thead,.tbl .trow{min-width:640px;}
  .mini-cards{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .kpi-grid{grid-template-columns:1fr;}
  .topbar{padding:14px 16px;gap:10px;}
  .topbar-title{min-width:140px;}
  .topbar-search{width:100%;order:5;}
  .content{padding:16px 16px 48px;}
  .readonly-banner{margin:12px 16px 0;}
}