/* ::::bastion::admin:::: — sistema visual compartido (página ganadora)
   templates: ndi (default) · tablero · jade profundo · formatum · sonicforge · sanctuary
   jerarquía de color: cian = estructura · fushia = secundario · amarillo = terciario · verde = valores */

:root { --ob:#000000; --gr:#000000; --val:#00ffc8; --fm:var(--fs); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }

/* ---- ndi :: control room — default ---- */
html[data-theme="ndi"], html:not([data-theme]) {
  --ob:#000000; --gr:#000000; --s1:#0b0b0d; --s2:#101013; --s3:#17171b;
  --gl:#2e383c; --gl2:rgba(46,56,60,0.45); --gl-active:rgba(0,218,248,0.6);
  --jade:#00daf8; --cyan:#00daf8;
  --gold:#f4c757; --magenta:#ff4fd8; --purple:#9B7FE8; --amber:#edc152;
  --alert:#ffb4ab;
  --tp:#e2e2e7; --ts:#bac9cd; --tm:#859397;
  --fs:'Hanken Grotesk',system-ui,sans-serif;
  --r-sm:0px; --r-md:0px; --r-full:9999px;
  --dur:200ms; --ease:cubic-bezier(0.16,1,0.3,1);
  --sh-md:0 4px 16px rgba(0,0,0,.55);
}
html[data-theme="ndi"] body, html:not([data-theme]) body {
  background-image:
    linear-gradient(rgba(0,218,248,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,218,248,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
html[data-theme="jade-profundo"] {
  --ob:#000000; --gr:#0c1511; --s1:#141d19; --s2:#18221d; --s3:#232c28;
  --gl:rgba(192,192,200,0.14); --gl2:rgba(192,192,200,0.07); --gl-active:rgba(0,255,194,0.5);
  --jade:#00ffc2; --cyan:#00ffc2; --gold:#c9a84c; --magenta:#d44fa0; --purple:#9b7fe8; --amber:#e0903a;
  --alert:#ffb4ab;
  --tp:#dbe5de; --ts:#b9cbc1; --tm:#83958c;
  --fs:'Hanken Grotesk',system-ui,sans-serif;
  --r-sm:4px; --r-md:8px; --r-full:9999px;
  --dur:200ms; --ease:cubic-bezier(0.16,1,0.3,1);
  --sh-md:0 4px 16px rgba(0,0,0,.45);
}
html[data-theme="formatum"] {
  --ob:#000000; --gr:#000000; --s1:#0d0d0d; --s2:#111111; --s3:#161616;
  --gl:rgba(255,255,255,0.10); --gl2:rgba(255,255,255,0.05); --gl-active:rgba(0,255,194,0.45);
  --jade:#00ffc2; --cyan:#00ffc2; --gold:#c9a84c; --magenta:#d44fa0; --purple:#9b7fe8; --amber:#e0903a;
  --alert:#ffb4ab;
  --tp:#f5f5f5; --ts:#d6d6d6; --tm:#8a8a8a;
  --fs:'Hanken Grotesk',system-ui,sans-serif;
  --r-sm:0px; --r-md:0px; --r-full:9999px;
  --dur:200ms; --ease:cubic-bezier(0.16,1,0.3,1);
  --sh-md:0 4px 16px rgba(0,0,0,.55);
}
html[data-theme="sonicforge"] {
  --ob:#0a0b0d; --gr:#0d0e11; --s1:#1a1d22; --s2:#22252b; --s3:#2b2f36;
  --gl:rgba(255,255,255,0.07); --gl2:rgba(255,255,255,0.04); --gl-active:rgba(61,230,224,0.55);
  --jade:#3de6e0; --cyan:#3de6e0; --gold:#9aa3ad; --magenta:#e85f8a; --purple:#9b7fe8; --amber:#e8b15f;
  --alert:#ff8a80;
  --tp:#e8eaee; --ts:#aab0b8; --tm:#697078;
  --fs:'IBM Plex Mono',monospace;
  --r-sm:8px; --r-md:16px; --r-full:9999px;
  --dur:200ms; --ease:cubic-bezier(0.16,1,0.3,1);
  --sh-md:0 8px 22px rgba(0,0,0,.6);
}
html[data-theme="sanctuary"] {
  --ob:#e5e9ec; --gr:#f6fafd; --s1:rgba(255,255,255,0.72); --s2:#ffffff; --s3:#eef3f6;
  --gl:rgba(23,28,31,0.14); --gl2:rgba(23,28,31,0.07); --gl-active:rgba(0,103,131,0.5);
  --jade:#006783; --cyan:#00566e; --gold:#7b414e; --magenta:#a8367e; --purple:#5e4a9e; --amber:#8a5b22;
  --alert:#ba1a1a;
  --tp:#171c1f; --ts:#3e484e; --tm:#6e797f;
  --val:#006d4f;
  --fs:'Hanken Grotesk',system-ui,sans-serif;
  --r-sm:6px; --r-md:12px; --r-full:9999px;
  --dur:200ms; --ease:cubic-bezier(0.16,1,0.3,1);
  --sh-md:0 4px 16px rgba(23,28,31,.10);
}
html[data-theme="sanctuary"] body {
  background-image:
    radial-gradient(560px 420px at 12% 8%, rgba(91,206,250,0.22), transparent 70%),
    radial-gradient(520px 440px at 88% 14%, rgba(255,178,193,0.20), transparent 70%);
}

body {
  font-family: var(--fs);
  background: var(--gr);
  color: var(--ts);
  font-size: 13px;
  line-height: 1.55;
  text-transform: lowercase;
  -webkit-font-smoothing: antialiased;
}

/* logo bastion (octágonos) atrás de los frames :: marca de agua 30% */
html:not([data-theme="sanctuary"]) body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("bastion-logo.jpg") center 52% / min(78vh, 720px) no-repeat;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
.shell { position: relative; z-index: 1; }

/* ---------- shell ---------- */
.shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 24px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--s1);
  border: 1px solid rgba(0,218,248,0.32);
  border-radius: var(--r-md);
  padding: 10px 16px;
  flex-wrap: wrap;
  box-shadow: 0 0 12px rgba(0,218,248,0.14), 0 0 36px rgba(0,218,248,0.05);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand h1 {
  font-family: var(--fs);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--tp);
  white-space: nowrap;
}
.brand h1 .jd { color: var(--cyan); text-shadow: 0 0 10px rgba(0,218,248,0.4); }
.brand .sigil { font-family: var(--fs); font-size: 10px; letter-spacing: 0.06em; color: var(--tm); }
.brand .sigil .wm-w { color: #ffffff; }
html[data-theme="sanctuary"] .brand .sigil .wm-w { color: var(--tp); }
.brand .sigil .wm-b { color: var(--cyan); text-shadow: 0 0 10px rgba(0,218,248,0.45); }
.tb-spacer { flex: 1; }

.backlink {
  font-family: var(--fs);
  font-weight: 700;
  font-size: 11px;
  text-transform: lowercase;
  color: var(--ts);
  text-decoration: none;
  border: 1px solid var(--gl);
  border-radius: var(--r-sm);
  padding: 5px 11px;
  background: var(--s2);
  white-space: nowrap;
}
.backlink:hover { border-color: var(--gl-active); color: var(--tp); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--gl);
  border-radius: var(--r-sm);
  font-family: var(--fs);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: var(--ts);
  background: var(--s2);
  white-space: nowrap;
}
.chip-port { border-color: rgba(0,218,248,0.35); color: var(--cyan); }
.chip-user { border-color: var(--gl); color: var(--tm); }
.chip-mod  { border-color: var(--mod-c, var(--magenta)); color: var(--mod-c, var(--magenta)); }
.clock { font-family: var(--fs); font-size: 11px; color: var(--tm); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* template selector */
.tpl { position: relative; display: flex; }
.tpl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fs); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: lowercase;
  background: var(--s2); color: var(--ts);
  border: 1px solid var(--gl); border-radius: var(--r-sm);
  padding: 5px 11px; cursor: pointer;
}
.tpl-btn:hover { border-color: var(--gl-active); color: var(--tp); }
.tpl-btn .diamond { color: var(--magenta); font-size: 9px; text-shadow: 0 0 10px rgba(255,79,216,0.6); }
.tpl-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  min-width: 250px;
  background: var(--s2); border: 1px solid var(--gl); border-radius: var(--r-md);
  box-shadow: var(--sh-md); padding: 6px;
  display: none; flex-direction: column; gap: 2px;
}
.tpl-panel.open { display: flex; }
.tpl-head { font-family: var(--fs); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--tm); padding: 5px 8px 7px 8px; text-transform: lowercase; }
.tpl-opt {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  font-family: var(--fs); font-size: 11px; font-weight: 600; text-transform: lowercase;
  background: transparent; color: var(--ts);
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 8px 10px; cursor: pointer;
}
.tpl-opt:hover { border-color: var(--gl); background: var(--s3); }
.tpl-opt.active { border-color: var(--cyan); color: var(--tp); }
.tpl-opt .tdot { width: 7px; height: 7px; border-radius: 9999px; background: var(--gl); flex: none; }
.tpl-opt.active .tdot { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

/* ---------- grid + cards ---------- */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.card {
  background: var(--s1);
  border: 1px solid var(--gl);
  border-radius: var(--r-md);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
/* contorno con luz :: brillo cian en el marco de cada frame */
html:not([data-theme="sanctuary"]) .card {
  border-color: rgba(0,218,248,0.32);
  box-shadow:
    0 0 12px rgba(0,218,248,0.14),
    0 0 36px rgba(0,218,248,0.05);
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-theme="sanctuary"]) .card { animation: cardbreathe 3.6s ease-in-out infinite; }
}
@keyframes cardbreathe {
  0%, 100% {
    border-color: rgba(0,218,248,0.24);
    box-shadow: 0 0 8px rgba(0,218,248,0.10), 0 0 26px rgba(0,218,248,0.04);
  }
  50% {
    border-color: rgba(0,218,248,0.50);
    box-shadow: 0 0 18px rgba(0,218,248,0.24), 0 0 52px rgba(0,218,248,0.09);
  }
}
.card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fs);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: var(--tm);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.card-head .tok { font-size: 10px; margin-left: auto; color: var(--mod-c, var(--magenta)); }

/* métricas */
/* métricas :: recuadros muy delgados — etiqueta izquierda, valor derecha */
.metric {
  grid-column: span 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 7px 13px;
  justify-content: flex-start;
}
.metric .m-label { font-family: var(--fs); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: lowercase; color: var(--tm); }
.metric .m-value {
  font-family: var(--fs);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255,255,255,0.22);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
html[data-theme="sanctuary"] .metric .m-value { color: var(--tp); text-shadow: none; }
.metric .m-sub { display: none; }

/* kv rows */
.kv { display: flex; flex-direction: column; gap: 7px; }
.kv-row { display: flex; align-items: center; gap: 10px; font-family: var(--fs); font-size: 11px; text-transform: lowercase; }
.kv-row .k { color: var(--tm); min-width: 96px; flex: none; font-weight: 700; }
.kv-row .v { color: var(--tp); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-row .v.val { color: #ffffff; text-shadow: 0 0 8px rgba(255,255,255,0.20); font-weight: 700; }
html[data-theme="sanctuary"] .kv-row .v.val { color: var(--tp); text-shadow: none; }

/* dots */
.dot { width: 6px; height: 6px; border-radius: 9999px; display: inline-block; flex: none; }
.dot--active { background: var(--val); box-shadow: 0 0 6px var(--val); }
.dot--blocked { background: var(--alert); box-shadow: 0 0 6px var(--alert); }

/* botones */
.btn {
  font-family: var(--fs);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  background: var(--s2);
  color: var(--ts);
  border: 1px solid var(--gl);
  border-radius: var(--r-sm);
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  flex: none;
}
.btn:hover { border-color: var(--gl-active); color: var(--tp); }
.btn.primary { border-color: rgba(0,255,200,0.55); color: var(--val); }
.btn.primary:hover { box-shadow: 0 0 14px rgba(0,255,200,0.3); }
.btn.danger:hover { border-color: var(--alert); color: var(--alert); }

/* inputs */
.inp, select.inp {
  font-family: var(--fs);
  font-size: 12px;
  font-weight: 600;
  text-transform: lowercase;
  background: var(--s2);
  color: var(--tp);
  border: 1px solid var(--gl);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  outline: none;
}
.inp:focus { border-color: var(--cyan); box-shadow: 0 0 10px rgba(0,218,248,0.2); }
select.inp option { background: var(--s2); color: var(--tp); }

/* tabla */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-family: var(--fs); font-size: 11.5px; }
table.tbl th {
  text-align: left;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--tm);
  border-bottom: 1px solid var(--gl);
  padding: 7px 10px;
  white-space: nowrap;
}
table.tbl td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--gl2);
  color: var(--ts);
  white-space: nowrap;
}
table.tbl td.val { color: #ffffff; font-weight: 700; text-shadow: 0 0 8px rgba(255,255,255,0.18); }
html[data-theme="sanctuary"] table.tbl td.val { color: var(--tp); text-shadow: none; }
table.tbl td.hi { color: var(--tp); font-weight: 700; }
table.tbl tr:hover td { background: var(--s2); }

/* tag */
.tag {
  font-family: var(--fs);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--gl);
  color: var(--ts);
  display: inline-block;
}
.tag.ok    { border-color: rgba(0,255,200,0.45);  color: var(--val); }
.tag.warn  { border-color: rgba(244,199,87,0.5);  color: var(--gold); }
.tag.bad   { border-color: rgba(255,180,171,0.5); color: var(--alert); }
.tag.cy    { border-color: rgba(0,218,248,0.4);   color: var(--cyan); }
.tag.mg    { border-color: rgba(255,79,216,0.4);  color: var(--magenta); }

/* footer + toast */
footer {
  text-align: center;
  font-family: var(--fs);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--tm);
  padding: 14px 0 0 0;
}
footer .gd { color: var(--magenta); text-shadow: 0 0 10px rgba(255,79,216,0.4); }

.toast {
  position: fixed; left: 50%; bottom: 22px;
  transform: translate(-50%, 12px);
  z-index: 100;
  background: var(--s2); border: 1px solid var(--cyan); border-radius: var(--r-sm);
  color: var(--tp); font-family: var(--fs); font-size: 11px;
  padding: 9px 16px;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms, transform 200ms;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1020px) {
  .metric { grid-column: span 4; }
  .main8 { grid-column: span 12 !important; }
  .rail4 { grid-column: span 12 !important; }
}
@media (max-width: 720px) {
  .metric { grid-column: span 6; }
}

/* ══ octobar :: 4 octagonos de navegación + centro jaguar ══ */
.topbar { border-bottom-color: rgba(0,218,248,0.55); }
.octobar-row { width: 100%; display: flex; align-items: center; justify-content: center; gap: 72px; padding: 6px 0 4px 0; flex-wrap: wrap; }
.octo-side { display: flex; align-items: center; gap: 52px; }
.octo-menu { position: relative; }
.octo-btn { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; padding: 0; filter: drop-shadow(0 0 10px color-mix(in oklab, var(--oc) 45%, transparent)); transition: filter 180ms; }
.octo-btn:hover { filter: drop-shadow(0 0 20px color-mix(in oklab, var(--oc) 85%, transparent)); }
.oshape { position: relative; width: 58px; height: 58px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: linear-gradient(135deg, var(--oc) 0%, color-mix(in oklab, var(--oc) 30%, #000) 75%); display: flex; align-items: center; justify-content: center; }
.oshape::before { content: ""; position: absolute; inset: 4px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: #07080a; }
.oshape .oring { position: absolute; inset: 8px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: color-mix(in oklab, var(--oc) 70%, transparent); }
.oshape .ocore { position: absolute; inset: 9.5px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: color-mix(in oklab, var(--oc) 12%, #050507); }
.oshape .olabel { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
.oshape .olabel svg { width: 24px; height: 24px; stroke: #ffffff; filter: drop-shadow(0 0 7px var(--oc)); }
.omenu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 215px; background: #000000; border: 1px solid color-mix(in oklab, var(--oc) 60%, transparent); box-shadow: 0 0 18px color-mix(in oklab, var(--oc) 30%, transparent), 0 18px 40px rgba(0,0,0,0.8); padding: 8px; display: none; flex-direction: column; gap: 2px; z-index: 90; }
.octo-menu.open .omenu { display: flex; }
.omenu .ohead { font-family: var(--fs); font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: lowercase; color: var(--oc); padding: 4px 10px 7px 10px; }
.omenu a, .omenu .mi { font-family: var(--fs); font-size: 11.5px; font-weight: 600; text-transform: lowercase; color: var(--ts); text-decoration: none; background: none; border: 1px solid transparent; padding: 7px 10px; text-align: left; cursor: pointer; }
.omenu a:hover, .omenu .mi:hover { border-color: var(--oc); color: #ffffff; }
.omenu .chip-user { margin: 4px 10px; }
.omenu .tpl { margin: 4px 10px; }
.omenu .chip { margin: 4px 10px; }
.octo-center { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 180px; }
.octo-center img { width: 48px; height: 48px; border-radius: 9999px; object-fit: cover; filter: drop-shadow(0 0 12px rgba(0,218,248,0.45)); }
.octo-center .oc-b { font-family: var(--fs); font-size: 16px; font-weight: 800; text-transform: lowercase; color: #e2e2e7; line-height: 1.2; }
.octo-center .oc-g { font-family: var(--fs); font-size: 12px; font-weight: 800; text-transform: lowercase; color: #e2e2e7; line-height: 1.2; }
.octo-center .oc-b .jd, .octo-center .oc-g .jd { color: var(--cyan); text-shadow: 0 0 10px rgba(0,218,248,0.4); }
.octo-center .oc-u { font-family: var(--fs); font-size: 10px; font-weight: 700; text-transform: lowercase; color: #ffffff; }
.octo-center .oc-u .nd { color: var(--cyan); text-shadow: 0 0 10px rgba(0,218,248,0.45); }
.octo-center .oc-u .clock { font-size: 10px; margin-left: 6px; }

/* ══ subnav :: pantallas del módulo (screen_xxx) ══ */
.subnav { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
.subnav .sn { font-family: var(--fs); font-size: 10.5px; font-weight: 700; text-transform: lowercase; letter-spacing: 0.04em; color: var(--tm); background: var(--s2); border: 1px solid var(--gl); border-radius: var(--r-sm); padding: 6px 12px; cursor: pointer; transition: color 160ms, border-color 160ms, box-shadow 160ms; }
.subnav .sn:hover { color: var(--tp); border-color: var(--mod-c, var(--cyan)); }
.subnav .sn.active { color: #ffffff; border-color: var(--mod-c, var(--cyan)); box-shadow: 0 0 10px color-mix(in oklab, var(--mod-c, #00daf8) 35%, transparent); }
.subnav .sn .sid { color: var(--mod-c, var(--cyan)); margin-right: 5px; }

/* ══ botones octagonales :: acciones en el color del módulo ══ */
.btn, .subnav .sn {
  border: none;
  border-radius: 0;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%, 0 50%);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  background: linear-gradient(180deg, color-mix(in oklab, var(--mod-c, #00daf8) 16%, #050507), color-mix(in oklab, var(--mod-c, #00daf8) 7%, #050507));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--mod-c, #00daf8) 45%, transparent),
    inset 0 0 14px color-mix(in oklab, var(--mod-c, #00daf8) 16%, transparent);
  color: #dfe7ea;
  padding: 7px 16px;
}
.btn:hover, .subnav .sn:hover {
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--mod-c, #00daf8) 80%, transparent),
    inset 0 0 18px color-mix(in oklab, var(--mod-c, #00daf8) 30%, transparent);
}
.btn.primary {
  background: linear-gradient(180deg, color-mix(in oklab, var(--mod-c, #00daf8) 42%, #050507), color-mix(in oklab, var(--mod-c, #00daf8) 20%, #050507));
  color: #ffffff;
}
.subnav .sn.active {
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px var(--mod-c, var(--cyan)),
    inset 0 0 18px color-mix(in oklab, var(--mod-c, #00daf8) 35%, transparent);
}

/* ══ tags de estado :: tonos del color del módulo (familiarización cromática) ══ */
.tag.ok {
  border-color: color-mix(in oklab, var(--mod-c, #1de9b6) 80%, transparent);
  color: color-mix(in oklab, var(--mod-c, #1de9b6) 80%, #ffffff);
  background: color-mix(in oklab, var(--mod-c, #1de9b6) 14%, transparent);
}
.tag.warn {
  border-color: color-mix(in oklab, var(--mod-c, #ffe14d) 45%, transparent);
  color: color-mix(in oklab, var(--mod-c, #ffe14d) 58%, #c9d2d5);
}
.tag.bad {
  border-color: color-mix(in oklab, var(--mod-c, #ff3860) 30%, transparent);
  color: color-mix(in oklab, var(--mod-c, #ff3860) 36%, #6e797f);
}

/* ══ bdial :: vista octagonal alterna de registros ══ */
.bdial { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 16px 0; }
.bdial-row3 { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.bdial-oct { position: relative; width: min(272px, 100%); aspect-ratio: 1; margin: 0 auto; display: flex; align-items: center; justify-content: center; --dc: color-mix(in oklab, var(--mod-c, #00daf8) 55%, #bfe3ff); }
.bdial-flds { --dc: var(--mod-c, #ff3860); }
.bdial-ring { position: absolute; inset: 0; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: linear-gradient(135deg, var(--dc) 0%, color-mix(in oklab, var(--dc) 25%, #000) 78%); transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); filter: drop-shadow(0 0 16px color-mix(in oklab, var(--dc) 50%, transparent)); }
.bdial-ring::before { content: ""; position: absolute; inset: 5px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: #050507; }
.bdial-ring::after { content: ""; position: absolute; left: 50%; top: 8px; width: 9px; height: 9px; transform: translateX(-50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--dc); box-shadow: 0 0 9px var(--dc); }
.bdial-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 86%; transition: opacity 240ms; }
.bdial-content.bdial-fade { opacity: 0; }
.bdial-row { font-family: var(--fs); font-size: 13.5px; font-weight: 700; text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffffff; text-align: center; width: var(--bw, 70%); padding: 2px 0 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.bdial-content .bdial-row:last-child { border-bottom: none; }
.bdial-flds .bdial-row { color: color-mix(in oklab, var(--dc) 72%, #fff); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; border-bottom-color: color-mix(in srgb, var(--dc) 18%, transparent); }
.bdial-vals .bdial-row:first-child { font-size: 15.5px; font-weight: 800; color: color-mix(in oklab, var(--mod-c, #00daf8) 60%, #fff); text-shadow: 0 0 10px color-mix(in srgb, var(--mod-c, #00daf8) 40%, transparent); }
.bdial-label { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-family: var(--fs); font-size: 10px; font-weight: 700; text-transform: lowercase; letter-spacing: 0.1em; color: var(--tm); white-space: nowrap; }
.bdial-center { position: relative; display: grid; grid-template-rows: 1fr auto 1fr; align-self: stretch; justify-items: center; min-width: 300px; padding: 0 8px; text-align: center; }
.bdial-top { display: flex; flex-direction: column; align-items: center; gap: 10px; align-self: end; padding-bottom: 14px; }
.bdial-bot { display: flex; flex-direction: column; align-items: center; gap: 9px; align-self: start; padding-top: 14px; }
.bdial-title { font-family: var(--fs); font-size: 14px; font-weight: 800; text-transform: lowercase; color: color-mix(in oklab, var(--mod-c, #00daf8) 78%, #fff); text-shadow: 0 0 12px color-mix(in oklab, var(--mod-c, #00daf8) 38%, transparent); }
.bdial-tok { font-family: var(--fs); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: lowercase; color: var(--tm); }
.bdial-mid { display: flex; align-items: center; justify-content: center; gap: 26px; }
.bdial-logo-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.bdial-tu { width: 190px; height: 190px; object-fit: contain; opacity: 1; pointer-events: none; filter: drop-shadow(0 0 18px rgba(0,218,248,0.30)); }
/* buscador transparente :: en medio del logo de terra */
.bdial-q {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  text-align: center;
  background: transparent !important;
  border: none !important;
  outline: none;
  box-shadow: none !important;
  font-family: var(--fs);
  font-size: 12px;
  font-weight: 700;
  text-transform: lowercase;
  color: #ffffff;
  z-index: 2;
}
.bdial-q::placeholder { color: rgba(186, 201, 205, 0.55); }
.bdial-q::-webkit-search-cancel-button { display: none; }
.bdial-sub { font-family: var(--fs); font-size: 10.5px; font-weight: 600; text-transform: lowercase; color: var(--tm); max-width: 270px; text-wrap: pretty; }
.bdial-foot { font-family: var(--fs); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: lowercase; color: color-mix(in oklab, var(--mod-c, #00daf8) 60%, #8a979c); }
/* caption :: título + nota centrados al frame, debajo del dial */
.bdial-caption {
  width: 100%;
  text-align: center;
  font-family: var(--fs);
  font-size: 13.5px;
  font-weight: 800;
  text-transform: lowercase;
  color: color-mix(in oklab, var(--mod-c, #00daf8) 78%, #fff);
  text-shadow: 0 0 12px color-mix(in oklab, var(--mod-c, #00daf8) 35%, transparent);
  text-wrap: pretty;
}
/* acciones centradas :: en todas las tarjetas */
.actions-row { justify-content: center !important; }
.card:has(.bdial) .actions-row { justify-content: center !important; }
.bdial-idx { font-family: var(--fs); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--tm); text-transform: lowercase; position: relative; z-index: 1; }
.bdial-name { font-family: var(--fs); font-size: 21px; font-weight: 800; text-transform: lowercase; color: #ffffff; text-shadow: 0 0 14px color-mix(in oklab, var(--mod-c, #00daf8) 40%, transparent); position: relative; z-index: 1; text-align: center; }
.bdial-nav { display: flex; gap: 14px; position: relative; z-index: 1; }
.bdial-btn { width: 50px; height: 50px; border: none; cursor: pointer; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%) !important; padding: 0 !important; color: #ffffff; font-size: 19px; font-weight: 200; transition: transform 160ms; background: linear-gradient(135deg, var(--dc, #00daf8) 0%, color-mix(in oklab, var(--dc, #00daf8) 28%, #000) 78%) !important; text-shadow: 0 0 10px var(--dc, #00daf8); box-shadow: none !important; filter: drop-shadow(0 0 10px color-mix(in oklab, var(--dc, #00daf8) 45%, transparent)); }
.bdial-btn:hover { transform: scale(1.1); }
.bdial-toggle { margin-left: 0; }
.card-head .bdial-toggle { margin-left: auto; }
.card-head .bdial-toggle + .tok { margin-left: 10px; }
@media (max-width: 900px) { .bdial-row3 { grid-template-columns: 1fr; } }

/* ══ bdial :: entrada giratoria de valores (manecillas) ══ */
@media (prefers-reduced-motion: no-preference) {
  .bdial-content.bdial-in-cw  { animation: bdialInCw 520ms cubic-bezier(0.16, 1, 0.3, 1); }
  .bdial-content.bdial-in-ccw { animation: bdialInCcw 520ms cubic-bezier(0.16, 1, 0.3, 1); }
}
@keyframes bdialInCw  { from { transform: rotate(42deg) scale(0.84); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bdialInCcw { from { transform: rotate(-42deg) scale(0.84); opacity: 0; } to { transform: none; opacity: 1; } }

/* ══ bdial v2 :: rayita interna (diseño de los octágonos de navegación) ══ */
.bdial-ring-line { position: absolute; inset: 9px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: color-mix(in oklab, var(--dc) 70%, transparent); }
.bdial-ring-line::before { content: ""; position: absolute; inset: 2px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: color-mix(in oklab, var(--dc) 12%, rgba(7, 9, 12, 0.78)); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }

/* ══ bdial v3 :: glass — brillo superior, reflejo diagonal y profundidad ══ */
.bdial-glass { position: absolute; inset: 11px; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); pointer-events: none; z-index: 1;
  background:
    linear-gradient(168deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.05) 22%, transparent 38%),
    radial-gradient(120% 60% at 50% -8%, color-mix(in srgb, var(--dc) 24%, transparent) 0%, transparent 55%),
    radial-gradient(140% 80% at 50% 112%, rgba(0,0,0,0.55) 0%, transparent 50%);
}
.bdial-glass::after { content: ""; position: absolute; inset: 0; clip-path: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 46%, rgba(255,255,255,0.02) 54%, transparent 68%);
  transform: translateX(-130%);
}
@media (prefers-reduced-motion: no-preference) {
  .bdial-glass::after { animation: bdialsheen 6.5s ease-in-out infinite; }
  .bdial-oct { animation: bdialbreathe 4.2s ease-in-out infinite; }
}
@keyframes bdialsheen {
  0%, 64%  { transform: translateX(-130%); }
  82%      { transform: translateX(130%); }
  100%     { transform: translateX(130%); }
}
@keyframes bdialbreathe {
  0%, 100% { filter: drop-shadow(0 14px 30px rgba(0,0,0,0.65)) drop-shadow(0 0 10px color-mix(in srgb, var(--dc) 22%, transparent)); }
  50%      { filter: drop-shadow(0 14px 30px rgba(0,0,0,0.65)) drop-shadow(0 0 22px color-mix(in srgb, var(--dc) 42%, transparent)); }
}

/* ══ layout general :: tabla centrada, minimódulos abajo ══ */
.shell > section.grid:has(.metric):not(:has(table)) { order: 8; }
.shell > footer { order: 10; }
.main8 { grid-column: 2 / span 10 !important; }
.rail4 { grid-column: 2 / span 10 !important; flex-direction: row !important; flex-wrap: wrap; }
.rail4 > .card { flex: 1 1 280px; }
@media (max-width: 1020px) {
  .main8, .rail4 { grid-column: span 12 !important; }
}

/* ohead clicable :: lleva al anillo del octágono */
a.ohead { display: block; text-decoration: none; cursor: pointer; }
a.ohead:hover { text-shadow: 0 0 9px var(--oc); }

/* octobar :: línea facta */
.octobar-facta { width: 100%; text-align: center; font-family: var(--fs, sans-serif); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: lowercase; color: #7e8d93; padding: 4px 0 0 0; }
.octobar-facta b { color: #ffffff; font-weight: 700; }
/* octágono grp :: multicolor (los 5 módulos) para no confundir con rh azul */
.octo-multi .oshape { background: conic-gradient(from -30deg, #2e6bff, #ffe14d, #1de9b6, #ff2bd1, #a855f7, #2e6bff); }
.octo-multi .oshape .oring { background: conic-gradient(from -30deg, rgba(46,107,255,0.85), rgba(255,225,77,0.85), rgba(29,233,182,0.85), rgba(255,43,209,0.85), rgba(168,85,247,0.85), rgba(46,107,255,0.85)); }
.octo-multi .octo-btn { filter: drop-shadow(0 0 7px rgba(29,233,182,0.35)) drop-shadow(0 0 7px rgba(255,43,209,0.3)); }
.octo-multi .octo-btn:hover { filter: drop-shadow(0 0 14px rgba(29,233,182,0.6)) drop-shadow(0 0 14px rgba(255,43,209,0.55)); }