/* Aleph — armazón de centro de control: barra superior, banda de telemetría, consola y centro de control */
:root { --tm-h: 34px; --chrome-h: calc(var(--topbar-h) + var(--tm-h)); }
.app[data-role="guest"], .app[data-role="loading"] { --tm-h: 0px; }
.app[data-role="guest"] .telemetry, .app[data-role="loading"] .telemetry { display: none; }

.view-loading { padding: var(--gap-6); }

/* Marca */
.brand { gap: 10px; letter-spacing: 0; }
.brand svg { width: 28px; height: 28px; }
.brand-text { display: grid; line-height: 1.05; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: .16em; }
.brand-tag { font-size: 11px; color: var(--ink-3); letter-spacing: .01em; font-family: var(--font-ui); font-weight: 400; }

/* Navegación compacta con iconografía propia */
.nav a { gap: 7px; padding: 0 11px; font-size: var(--fs-13); }
.nav a svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); transition: color .15s var(--ease); }
.nav a:hover svg, .nav a[aria-current="page"] svg { color: var(--cyan); }
.status-cluster .conn .pill { cursor: default; }
.status-cluster a.pill { cursor: pointer; }
.pill svg { width: 16px; height: 16px; flex: none; }
.pill-icon { width: 30px; padding: 0; justify-content: center; }
.approvals-btn.has-pending { border-color: rgba(243, 154, 79, .5); color: var(--orange); }
.user-chip { display: flex; align-items: center; gap: 6px; }
.avatar.xs { width: 20px; height: 20px; font-size: 11px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--s3); color: var(--ink); font-family: var(--font-display); }
.light {
  --l: var(--ink-3);
  width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; background: var(--l);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--l) 18%, transparent), 0 0 8px color-mix(in srgb, var(--l) 60%, transparent);
}
.light.is-cyan { --l: var(--cyan); }
.light.is-cyan-dim { --l: var(--cyan-dim); box-shadow: 0 0 0 2px rgba(42, 127, 141, .2); }
.light.is-violet { --l: var(--violet); }
.light.is-gold { --l: var(--gold); }
.light.is-orange { --l: var(--orange); }
.light.is-red { --l: var(--red); }
.light.is-muted { --l: var(--ink-3); box-shadow: none; }
.light.is-live { animation: light-pulse 1.6s var(--ease) infinite; }
@keyframes light-pulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--l) 18%, transparent), 0 0 8px color-mix(in srgb, var(--l) 60%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--l) 0%, transparent), 0 0 14px color-mix(in srgb, var(--l) 80%, transparent); }
}

/* ---------- Banda de telemetría ---------- */
.telemetry {
  position: sticky; top: var(--topbar-h); z-index: 29;
  display: flex; align-items: stretch; height: var(--tm-h);
  background: #060a10; border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}
.tm-strip { flex: 1; display: flex; flex-wrap: wrap; align-items: stretch; overflow: hidden; height: var(--tm-h); min-width: 0; }
.tm-strip::-webkit-scrollbar { display: none; }
.tm-cell {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; border-right: 1px solid var(--line); white-space: nowrap; flex: none; height: var(--tm-h);
}
.tm-cell[data-alert="red"] .tm-value { color: var(--red); }
.tm-cell[data-alert="orange"] .tm-value { color: var(--orange); }
.tm-api { gap: 8px; color: var(--ink-2); font-weight: 600; }
.tm-label { color: var(--ink-3); }
.tm-read { display: inline-flex; align-items: baseline; gap: 3px; }
.tm-value { color: var(--ink); font-size: 12.5px; font-weight: 600; }
.tm-unit { color: var(--ink-3); }
.tm-spark { width: 54px; height: 18px; }
.telemetry.is-empty .tm-cell:not(.tm-api) { opacity: .35; }
.tm-actions { display: flex; align-items: center; gap: 2px; padding: 0 6px; border-left: 1px solid var(--line); flex: none; }
.tm-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 6px; border: 0;
  background: transparent; color: var(--ink-2); cursor: pointer; font-size: 11.5px; white-space: nowrap;
}
.tm-btn:hover, .tm-btn[aria-expanded="true"] { background: var(--s2); color: var(--ink); }
.tm-btn svg { width: 15px; height: 15px; }
.tm-copy { color: var(--ink-3); padding: 0 6px; white-space: nowrap; }
.tm-copy:hover { color: var(--ink-2); }

/* ---------- Centro de control ---------- */
.cc-backdrop { top: var(--chrome-h); }
.cc-sheet {
  position: fixed; left: 0; right: 0; top: var(--chrome-h); z-index: 61; max-height: calc(100vh - var(--chrome-h) - 24px); overflow-y: auto;
  background: #08101a; border-bottom: 1px solid var(--line-2); box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
  padding: var(--gap-4) var(--gap-5) var(--gap-5); animation: drop .2s var(--ease);
}
@keyframes drop { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap-3); margin-bottom: var(--gap-4); }
.cc-sys { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: var(--gap-4); }
.cc-kv { background: #0a121d; border: 1px solid var(--line); border-radius: var(--r-2); padding: 8px 12px; display: grid; gap: 2px; align-content: start; }
.cc-kv strong { font-size: 15px; font-weight: 600; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap-3); }
.cc-chart { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-2); padding: 10px 12px; min-width: 0; }
.cc-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.cc-chart-head h3 { font-size: var(--fs-13); font-family: var(--font-ui); font-weight: 600; }

/* ---------- Consola de eventos ---------- */
.console {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: 236px; display: flex; flex-direction: column;
  background: #04070c; border-top: 1px solid var(--line-2); box-shadow: 0 -16px 40px rgba(0, 0, 0, .45);
}
body.has-console .main { padding-bottom: 236px; }
.console-head { display: flex; align-items: center; gap: var(--gap-3); padding: 6px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.console-head strong { font-size: var(--fs-13); }
.console-filters { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.console-filter { border: 0; background: transparent; color: var(--ink-3); padding: 3px 8px; border-radius: 5px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.console-filter[aria-pressed="true"] { background: var(--s2); color: var(--ink); }
.console-list { flex: 1; overflow-y: auto; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; padding: 4px 0; }
.cl { display: grid; grid-template-columns: 96px 128px 70px minmax(0, 1fr); gap: 10px; padding: 0 12px; white-space: nowrap; }
.cl:hover { background: #0a111b; }
.cl-time { color: #4c5a6c; font-variant-numeric: tabular-nums; }
.cl-type { overflow: hidden; text-overflow: ellipsis; }
.cl-who { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.cl-msg { color: #c6d0dc; overflow: hidden; text-overflow: ellipsis; }
.cl.tone-cyan .cl-type { color: var(--cyan); }
.cl.tone-violet .cl-type { color: var(--violet); }
.cl.tone-gold .cl-type { color: var(--gold); }
.cl.tone-orange .cl-type { color: var(--orange); }
.cl.tone-magenta .cl-type { color: #e07aa5; }
.cl.tone-blue .cl-type { color: #6ea6ee; }
.cl.tone-muted .cl-type { color: var(--ink-3); }

/* Ventanas emergentes pequeñas */
.popover {
  position: fixed; z-index: 80; width: 280px; max-height: 320px; overflow-y: auto; padding: 6px;
  background: #0d1520; border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  display: grid; gap: 2px;
}
.pop-opt { display: grid; gap: 1px; text-align: left; padding: 8px 10px; border-radius: 6px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.pop-opt:hover, .pop-opt:focus-visible { background: var(--s2); text-decoration: none; }
.pop-opt[aria-selected="true"] { background: var(--s3); box-shadow: inset 2px 0 0 var(--cyan); }

.linklike { background: none; border: 0; padding: 0; color: var(--cyan); cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 4px; }
.linklike:hover { text-decoration: underline; text-underline-offset: 3px; }
.linklike svg { width: 14px; height: 14px; }
.sub-h { font-size: var(--fs-14); font-family: var(--font-ui); font-weight: 600; color: var(--ink-2); margin: var(--gap-4) 0 var(--gap-2); }
.role-tag { color: var(--gold); }
.tab-count { margin-left: 6px; font-size: 11px; color: var(--ink-3); }
.list-empty { padding: var(--gap-4) var(--gap-5); list-style: none; }
.t-by { color: var(--violet); }
.fieldset { border: 1px solid var(--line-2); border-radius: var(--r-2); padding: var(--gap-3) var(--gap-4) var(--gap-4); margin: 0; min-width: 0; }
.fieldset legend { padding: 0 6px; color: var(--ink-2); font-size: var(--fs-13); font-weight: 600; }
.drawer-sub { font-size: var(--fs-13); color: var(--ink-3); margin-top: var(--gap-3); }
.md .al-center { text-align: center; }
.md .al-right { text-align: right; }
.md .md-check { color: var(--gold); }

@media (max-width: 1240px) {
  .nav .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav a[aria-current="page"] .nav-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .brand-tag { display: none; }
}
@media (max-width: 720px) {
  :root { --topbar-h: 92px; }
  .telemetry { top: var(--topbar-h); }
  .tm-cell { padding: 0 10px; }
  .tm-btn span { display: none; }
  .tm-copy { display: none; }
  .cl { grid-template-columns: 74px 96px minmax(0, 1fr); }
  .cl-who { display: none; }
  .console { height: 200px; }
  body.has-console .main { padding-bottom: 200px; }
  .cc-sheet { padding: var(--gap-3); }
  .nav .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav a[aria-current="page"] .nav-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* Integrantes: la ficha con nombre y gasto ocupa sitio; los rótulos del menú se pliegan antes. */
@media (max-width: 1500px) {
  .app[data-role="member"] .nav .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app[data-role="member"] .nav a[aria-current="page"] .nav-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .app[data-role="member"] .brand-tag { display: none; }
  .app[data-role="member"] .user-chip .btn .pill-text { display: none; }
}
@media (max-width: 720px) {
  .app[data-role="member"] .conn-text { display: none; }
}