/* ════════════════════════════════════════════════════════════════
   METABUILD BIM · Design system
   Marca Meta Build City (Manual de Marca 2026)
   Navy #000031 · Cyan #2BF7D4 · Sora (display) · Manrope (texto)
   Estética: Digital Twin / HUD · premium · industria construcción
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --navy: #000031;
  --cyan: #2bf7d4;
  --accent: #2bf7d4;
  --accent-dark: #1dd4b5;

  --bg: #000014;
  --bg-2: #05051f;
  --panel: #08082a;
  --panel-2: #0c0c33;
  --fg: #eef2f6;

  --ink-900: #000031;
  --ink-800: #0a0a3d;
  --ink-700: #15154f;
  --ink-600: #242463;
  --ink-500: #3a3a7a;
  --ink-400: #6a6a9c;
  --ink-300: #9a9abf;
  --ink-200: #c7c7dd;

  --line: rgba(120,130,200,0.14);
  --line-strong: rgba(120,130,200,0.26);

  /* semánticos disciplina BIM */
  --c-estructura: #6a7cff;
  --c-arquitectura: #2bf7d4;
  --c-mep: #ff7ac2;
  --c-fachada: #ffc24b;
  --c-cubierta: #8b5cf6;

  /* estados 4D */
  --s-done: #2bf7d4;
  --s-doing: #ffc24b;
  --s-todo: #3a3a7a;

  --ok: #2bf7d4;
  --warn: #ffc24b;
  --bad: #ff5d73;

  --sidebar-w: 248px;
  --rail-w: 360px;
  --radius: 10px;
  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}

/* ── Tema dark-gris (neutro, cómodo para la vista) ─── */
html.theme-gris {
  --navy: #15171c;
  --bg: #16181d;
  --bg-2: #1c1f25;
  --panel: #20242b;
  --panel-2: #272c34;
  --fg: #e9ebef;
  --ink-900: #15171c;
  --ink-800: #22262e;
  --ink-700: #2d323b;
  --ink-600: #3b414c;
  --ink-500: #515863;
  --ink-400: #6e7783;
  --ink-300: #9aa2ae;
  --ink-200: #c5cad2;
  --line: rgba(160,172,194,0.13);
  --line-strong: rgba(160,172,194,0.24);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::selection { background: rgba(43,247,212,0.3); color: var(--navy); }

.font-display { font-family: var(--font-display); }
.mono { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ── Layout shell ─────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--rail-w);
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "sidebar topbar topbar"
    "sidebar stage  rail";
  height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────── */
.sidebar {
  grid-area: sidebar;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; height: 56px;
  border-bottom: 1px solid var(--line);
}
.brand img { height: 22px; width: auto; }
.brand .pname { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -0.02em; }
.brand .pname b { color: var(--accent); }
.brand .ptag { font-size: 9px; color: var(--ink-400); letter-spacing: 0.18em; text-transform: uppercase; }

.proj-switch {
  margin: 14px 14px 6px; padding: 11px 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer;
  transition: border-color .25s;
}
.proj-switch:hover { border-color: var(--line-strong); }
.proj-switch .lbl { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400); }
.proj-switch .val { font-family: var(--font-display); font-weight: 600; font-size: 13px; margin-top: 3px; display:flex; align-items:center; justify-content:space-between; }
.proj-switch .val span { color: var(--accent); font-size: 11px; }
.proj-switch .meta { font-size: 10px; color: var(--ink-300); margin-top: 5px; }

.nav { padding: 10px 10px; overflow-y: auto; flex: 1; min-height: 0; }
.nav-group { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); padding: 14px 12px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  color: var(--ink-200); font-size: 13px; font-weight: 500;
  border: 1px solid transparent; position: relative;
  transition: background .18s, color .18s;
}
.nav-item:hover { background: rgba(120,130,200,0.07); color: var(--fg); }
.nav-item.active { background: rgba(43,247,212,0.09); color: var(--accent); border-color: rgba(43,247,212,0.18); }
.nav-item.active::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; background: var(--accent); border-radius: 0 3px 3px 0;
}
.nav-item .ic { width: 18px; height: 18px; flex: 0 0 18px; color: currentColor; opacity: .9; }
.nav-item .dim { font-size: 9px; font-family: var(--font-display); color: var(--ink-500); margin-left: auto; }
.nav-item.active .dim { color: var(--accent); }

.sb-foot { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 10px; color: var(--ink-400); }
.sb-foot b { color: var(--ink-200); font-weight: 600; }

/* ── Topbar ───────────────────────────────────────── */
.topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.crumb { font-size: 12px; color: var(--ink-300); display: flex; align-items: center; gap: 8px; }
.crumb b { color: var(--fg); font-weight: 600; }
.crumb .sep { color: var(--ink-500); }
.tb-spacer { flex: 1; }
.tb-status { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-300); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.tb-btn {
  height: 32px; padding: 0 13px; border-radius: 8px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-200);
  font-size: 12px; font-weight: 600; font-family: var(--font-sans);
  display: inline-flex; align-items: center; gap: 7px; transition: all .2s;
}
.tb-btn:hover { border-color: var(--accent); color: var(--accent); }
.tb-btn.primary { background: var(--accent); color: var(--navy); border-color: var(--accent); }
.tb-btn.primary:hover { background: var(--accent-dark); }

/* segmented control (toggles de color / nivel de curva S) */
.seg { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 9px; padding: 3px; }
.seg-b { flex: 1; height: 28px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--ink-300); font-size: 11px; font-weight: 600;
  font-family: var(--font-sans); transition: all .18s; white-space: nowrap; }
.seg-b:hover { color: var(--accent); }
.seg-b.on { background: var(--accent); color: var(--navy); box-shadow: 0 2px 8px rgba(43,247,212,.22); }
/* select de sub-nodo (fase / proceso / zona) */
.mb-select { width: 100%; margin-top: 8px; height: 32px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-100, var(--fg));
  font-size: 12px; font-family: var(--font-sans); padding: 0 10px; cursor: pointer; }
.mb-select:focus { outline: none; border-color: var(--accent); }
.mb-select option { background: var(--panel-2); color: var(--fg); }
.avatar {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ink-700), var(--ink-600));
  font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--accent);
  border: 1px solid var(--line);
}

/* ── Stage (3D + overlays) ────────────────────────── */
.stage { grid-area: stage; position: relative; background:
  radial-gradient(1200px 700px at 60% 12%, #0a0a3a 0%, var(--bg) 62%); overflow: hidden; }
#viewport { position: absolute; inset: 0; }
.hud-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(43,247,212,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,247,212,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 45%, #000 30%, transparent 78%);
}
.stage-top {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  pointer-events: none; z-index: 5;
}
.mode-title { pointer-events: auto; }
.mode-title .k { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.mode-title .t { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.mode-title .d { font-size: 11.5px; color: var(--ink-300); margin-top: 3px; max-width: 420px; line-height: 1.5; }

.legend {
  pointer-events: auto;
  background: rgba(8,8,42,0.72); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px;
  min-width: 168px;
}
.legend .lh { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 8px; }
.legend .row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-200); padding: 3px 0; }
.legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 11px; }
.legend .row .v { margin-left: auto; font-family: var(--font-display); color: var(--ink-300); font-size: 10.5px; }

.viewcube {
  position: absolute; bottom: 16px; left: 16px; z-index: 5;
  display: flex; gap: 6px; pointer-events: auto;
}
.vc-btn {
  height: 30px; padding: 0 11px; border-radius: 7px; cursor: pointer;
  background: rgba(8,8,42,0.72); backdrop-filter: blur(10px);
  border: 1px solid var(--line); color: var(--ink-200);
  font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
  transition: all .18s;
}
.vc-btn:hover { border-color: var(--accent); color: var(--accent); }
.vc-btn.on { background: rgba(43,247,212,0.12); border-color: rgba(43,247,212,0.3); color: var(--accent); }

/* 4D timeline scrubber */
.timeline {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 6;
  width: min(560px, 60%); pointer-events: auto;
  background: rgba(8,8,42,0.78); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 16px 13px;
  display: none;
}
.timeline.show { display: block; }
.timeline .tl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.timeline .tl-head .w { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; }
.timeline .tl-head .w span { color: var(--accent); }
.timeline .tl-head .pct { font-family: var(--font-display); font-size: 12px; color: var(--ink-300); }
.timeline input[type=range] { width: 100%; accent-color: var(--accent); height: 4px; }
.timeline .ticks { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--ink-400); margin-top: 7px; font-family: var(--font-display); }
.tl-play { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; font-weight:700; font-family: var(--font-display); }

.loading {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 20;
  background: var(--bg); transition: opacity .6s; gap: 14px;
}
.loading .ring { width: 38px; height: 38px; border: 2px solid var(--ink-700); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
.loading .lt { font-family: var(--font-display); font-size: 12px; color: var(--ink-300); letter-spacing: 0.08em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Right rail ───────────────────────────────────── */
.rail {
  grid-area: rail;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-left: 1px solid var(--line);
  overflow-y: auto; min-height: 0;
  padding: 16px 16px 28px;
}
.rail-h { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.rail-h .k { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.rail-sub { font-size: 11.5px; color: var(--ink-300); margin-bottom: 16px; line-height: 1.5; }

.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 16px; }
.kpi {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; position: relative; overflow: hidden;
}
.kpi::after { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background: var(--accent); opacity:.5; }
.kpi .kl { font-size: 10px; color: var(--ink-400); letter-spacing: 0.04em; }
.kpi .kv { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.03em; margin-top: 5px; }
.kpi .kv small { font-size: 11px; color: var(--ink-300); font-weight: 500; }
.kpi .kd { font-size: 10px; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.kpi .kd.up { color: var(--ok); } .kpi .kd.down { color: var(--bad); } .kpi .kd.flat { color: var(--ink-400); }
.kpi.wide { grid-column: 1 / -1; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 14px; margin-bottom: 12px;
}
.card .ch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.card .ch .t { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; }
.card .ch .x { font-size: 10px; color: var(--ink-400); }

/* progress bars / partidas */
.bar-row { margin-bottom: 11px; }
.bar-row:last-child { margin-bottom: 2px; }
.bar-row .br-top { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 5px; }
.bar-row .br-top .nm { color: var(--ink-200); }
.bar-row .br-top .vl { font-family: var(--font-display); color: var(--ink-300); font-size: 11px; }
.bar { height: 6px; background: var(--ink-800); border-radius: 4px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }

/* element property panel */
.prop-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.prop-row:last-child { border-bottom: none; }
.prop-row .pk { color: var(--ink-400); }
.prop-row .pv { font-family: var(--font-display); color: var(--fg); font-weight: 500; text-align: right; }
.tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px;
  font-size: 10.5px; font-weight: 600; font-family: var(--font-display);
}
.tag.done { background: rgba(43,247,212,0.12); color: var(--s-done); }
.tag.doing { background: rgba(255,194,75,0.14); color: var(--s-doing); }
.tag.todo { background: rgba(120,130,200,0.12); color: var(--ink-300); }
.tag .dt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.empty-pick {
  text-align: center; padding: 26px 14px; color: var(--ink-400); font-size: 12px; line-height: 1.6;
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.empty-pick svg { color: var(--ink-500); margin-bottom: 8px; }

/* AR phone mock */
.phone {
  width: 184px; margin: 4px auto 10px; aspect-ratio: 9/19; border-radius: 26px;
  border: 6px solid #1a1a36; background: #04041a; position: relative; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.phone .site {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,20,0) 40%, rgba(0,0,20,0.55) 100%),
    repeating-linear-gradient(115deg, #1b1d24 0 14px, #16181e 14px 28px);
}
.phone .ghost {
  position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%);
  width: 116px; height: 120px; border: 1.5px solid var(--accent);
  background: linear-gradient(180deg, rgba(43,247,212,0.18), rgba(43,247,212,0.04));
  box-shadow: 0 0 26px rgba(43,247,212,0.4);
  clip-path: polygon(50% 0, 100% 26%, 100% 100%, 0 100%, 0 26%);
  animation: floaty 3.6s ease-in-out infinite;
}
@keyframes floaty { 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(-6px);} }
.phone .pin { position: absolute; top: 12px; left: 12px; right: 12px; display:flex; justify-content:space-between; font-size: 8.5px; color: var(--accent); font-family: var(--font-display); }
.phone .reticle { position:absolute; top:46%; left:50%; width:26px; height:26px; transform:translate(-50%,-50%); border:1px solid rgba(43,247,212,0.5); border-radius:50%; }
.phone .scan { position:absolute; left:8px; right:8px; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); box-shadow:0 0 12px var(--accent); animation:scanline 3.2s ease-in-out infinite; }
@keyframes scanline { 0%,100%{ top:20%; } 50%{ top:80%; } }
.phone .corner { position:absolute; width:16px; height:16px; border:2px solid var(--accent); opacity:.75; }
.phone .corner.tl { top:40px; left:16px; border-right:none; border-bottom:none; }
.phone .corner.tr { top:40px; right:16px; border-left:none; border-bottom:none; }
.phone .corner.bl { bottom:58px; left:16px; border-right:none; border-top:none; }
.phone .corner.br { bottom:58px; right:16px; border-left:none; border-top:none; }
.qr { display:grid; grid-template-columns:repeat(13,1fr); width:104px; height:104px; background:#fff; padding:7px; border-radius:9px; margin:0 auto; }
.qr i { width:100%; aspect-ratio:1; }
.qr-card { text-align:center; }
.qr-card .qt { font-size:11.5px; color:var(--ink-300); margin-top:11px; line-height:1.5; }

/* IoT sensor mini */
.sensor { display:flex; align-items:center; gap:10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sensor:last-child { border-bottom:none; }
.sensor .si { width:30px; height:30px; border-radius:8px; background: var(--panel-2); border:1px solid var(--line); display:grid; place-items:center; color: var(--accent); flex:0 0 30px; }
.sensor .sn { font-size: 12px; font-weight:600; color: var(--ink-100); }
.sensor .sx { font-size: 10px; color: var(--ink-400); }
.sensor .sv { margin-left:auto; text-align:right; }
.sensor .sv b { font-family: var(--font-display); font-size: 14px; }
.sensor .sv small { font-size: 9px; color: var(--ink-400); display:block; }

/* meby chat */
.meby-msg { display:flex; gap:9px; margin-bottom: 12px; }
.meby-msg .mav { width:26px; height:26px; border-radius:7px; flex:0 0 26px; display:grid; place-items:center; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: var(--navy); font-weight:800; font-family: var(--font-display); font-size:12px; }
.meby-msg .mb { background: var(--panel); border:1px solid var(--line); border-radius: 4px 12px 12px 12px; padding: 10px 12px; font-size: 12px; line-height: 1.55; color: var(--ink-100); }
.meby-msg .mb b { color: var(--accent); }
.meby-msg.user { flex-direction: row-reverse; }
.meby-msg.user .mav { background: var(--ink-700); color: var(--accent); }
.meby-msg.user .mb { border-radius: 12px 4px 12px 12px; background: var(--panel-2); }

/* spark bars (mini chart) */
.spark { display:flex; align-items:flex-end; gap:3px; height: 46px; margin-top: 4px; }
.spark i { flex:1; background: linear-gradient(180deg, var(--accent), rgba(43,247,212,0.15)); border-radius: 2px 2px 0 0; min-height: 3px; opacity:.85; }
.spark i.hl { background: linear-gradient(180deg, #fff, var(--accent)); opacity:1; }

/* table */
.tbl { width:100%; border-collapse: collapse; font-size: 11.5px; }
.tbl th { text-align:left; font-size: 9.5px; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-400); font-weight:600; padding: 6px 6px; border-bottom:1px solid var(--line); }
.tbl td { padding: 8px 6px; border-bottom: 1px solid var(--line); color: var(--ink-200); }
.tbl td.n { font-family: var(--font-display); text-align:right; }
.tbl tr:last-child td { border-bottom:none; }

/* ── Centro de Integraciones (fullpanel) ──────────────── */
.fullpanel {
  position: absolute; inset: 0; z-index: 8; overflow-y: auto;
  padding: 78px 28px 32px; display: none;
  background:
    radial-gradient(900px 500px at 70% 0%, #0a0a36 0%, transparent 60%), var(--bg);
}
.fullpanel.show { display: block; }
.intg-cat { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-400); margin: 22px 0 12px; display:flex; align-items:center; gap:10px; }
.intg-cat::after { content:""; flex:1; height:1px; background: var(--line); }
.intg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
.intg-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; transition: border-color .2s, transform .2s; position: relative;
}
.intg-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.intg-top { display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.intg-logo { width:40px; height:40px; border-radius:9px; flex:0 0 40px; display:grid; place-items:center;
  font-family: var(--font-display); font-weight:700; font-size:13px; color:#fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.intg-name { font-family: var(--font-display); font-weight:600; font-size:13.5px; }
.intg-cat-s { font-size: 10px; color: var(--ink-400); }
.intg-desc { font-size: 11.5px; color: var(--ink-300); line-height:1.5; min-height: 34px; margin-bottom: 12px; }
.intg-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.intg-pill { font-size:10px; font-weight:600; font-family:var(--font-display); padding:3px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:5px; }
.intg-pill .d { width:6px; height:6px; border-radius:50%; background:currentColor; }
.intg-pill.conectado { background: rgba(43,247,212,0.12); color: var(--ok); }
.intg-pill.disponible { background: rgba(106,124,255,0.14); color: #8a98ff; }
.intg-pill.proximamente { background: rgba(120,130,200,0.1); color: var(--ink-400); }
.intg-btn { font-size:11px; font-weight:600; font-family:var(--font-sans); padding:6px 12px; border-radius:7px;
  border:1px solid var(--line); background: var(--panel-2); color: var(--ink-200); cursor:pointer; transition: all .18s; }
.intg-btn:hover { border-color: var(--accent); color: var(--accent); }
.intg-btn.on { background: var(--accent); color: var(--navy); border-color: var(--accent); }
.fp-head { margin-bottom: 6px; }
.fp-head .t { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing:-0.02em; }
.fp-head .d { font-size: 12.5px; color: var(--ink-300); margin-top: 4px; max-width: 620px; line-height:1.55; }

/* ── Capas / disciplinas ──────────────────────────── */
.layer-row { display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid var(--line); }
.layer-row:last-child { border-bottom:none; }
.layer-row .sw { width:10px; height:10px; border-radius:3px; flex:0 0 10px; }
.layer-row .nm { font-size:12px; color:var(--ink-100); }
.layer-row .ct { margin-left:auto; font-family:var(--font-display); font-size:10.5px; color:var(--ink-400); }
.layer-row.off .nm, .layer-row.off .ct { color:var(--ink-500); opacity:.5; }
.eye, .iso { background:none; border:none; cursor:pointer; color:var(--ink-400); display:grid; place-items:center; padding:2px; border-radius:5px; }
.eye:hover, .iso:hover { color:var(--accent); }
.eye.off { color:var(--ink-600); }
.layer-tools { display:flex; gap:8px; margin-top:10px; }
.layer-tools button { flex:1; }

/* ── Corte de sección ─────────────────────────────── */
.section-ctl {
  position:absolute; right:16px; top:50%; transform:translateY(-50%); z-index:6;
  display:none; flex-direction:column; align-items:center; gap:8px;
  background:rgba(8,8,42,0.78); backdrop-filter:blur(12px); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 8px;
}
.section-ctl.show { display:flex; }
.section-ctl .lbl { font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-400); writing-mode:vertical-rl; }
.section-ctl input[type=range] { writing-mode:vertical-lr; direction:rtl; width:6px; height:160px; accent-color:var(--accent); }

/* ── Dashboard / Resumen ──────────────────────────── */
.dash { display:grid; gap:16px; }
.dash-sec { font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:0.04em; color:var(--ink-200); margin:8px 0 -2px; }
.dash-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:12px; }
.dash-2 { display:grid; grid-template-columns:1.1fr 1fr; gap:14px; }
@media (max-width:1320px){ .dash-2 { grid-template-columns:1fr; } }
.health { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:1100px){ .health { grid-template-columns:repeat(2,1fr); } }
.health-card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; border-left:3px solid var(--ink-500); }
.health-card.ok { border-left-color:var(--ok); } .health-card.warn { border-left-color:var(--warn); } .health-card.bad { border-left-color:var(--bad); }
.health-card .hl { font-size:11px; color:var(--ink-400); letter-spacing:0.04em; }
.health-card .hs { font-family:var(--font-display); font-weight:700; font-size:16px; margin-top:7px; }
.health-card.ok .hs { color:var(--ok); } .health-card.warn .hs { color:var(--warn); } .health-card.bad .hs { color:var(--bad); }
.health-card .hd { font-size:10.5px; color:var(--ink-400); margin-top:5px; }
.dash-big { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; align-items:center; gap:20px; }
.gauge { --p:60; width:92px; height:92px; border-radius:50%; flex:0 0 92px;
  background:conic-gradient(var(--accent) calc(var(--p)*1%), var(--ink-800) 0); display:grid; place-items:center; position:relative; }
.gauge::before { content:""; position:absolute; inset:9px; background:var(--panel); border-radius:50%; }
.gauge .gv { position:relative; font-family:var(--font-display); font-weight:700; font-size:22px; }
.dash-big .bigtxt .t { font-family:var(--font-display); font-size:15px; font-weight:700; }
.dash-big .bigtxt .s { font-size:12px; color:var(--ink-300); margin-top:4px; line-height:1.5; max-width:340px; }

/* ── Medición ─────────────────────────────────────── */
.measure-badge {
  position:absolute; bottom:58px; left:50%; transform:translateX(-50%); z-index:7;
  display:none; background:rgba(8,8,42,0.85); backdrop-filter:blur(10px);
  border:1px solid var(--accent); border-radius:8px; padding:8px 14px;
  font-family:var(--font-display); font-size:13px; color:var(--accent); font-weight:600;
}
.measure-badge.show { display:block; }

/* ── Observaciones (BCF) ──────────────────────────── */
.obs-item { background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:11px 12px; margin-bottom:9px; cursor:pointer; transition:border-color .18s; }
.obs-item:hover { border-color:var(--line-strong); }
.obs-item.sel { border-color:var(--accent); }
.obs-top { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.obs-prio { width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.obs-title { font-family:var(--font-display); font-weight:600; font-size:12.5px; color:var(--ink-100); flex:1; }
.obs-meta { font-size:10.5px; color:var(--ink-400); display:flex; gap:10px; }
.obs-st { font-size:9.5px; font-weight:600; font-family:var(--font-display); padding:2px 8px; border-radius:12px; }
.obs-st.abierta { background:rgba(255,93,115,0.15); color:#ff8a9b; }
.obs-st.revision { background:rgba(255,194,75,0.15); color:var(--warn); }
.obs-st.resuelta { background:rgba(43,247,212,0.13); color:var(--ok); }
.obs-form input, .obs-form select, .obs-form textarea {
  width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:7px;
  padding:8px 10px; color:var(--fg); font-family:var(--font-sans); font-size:12px; outline:none; margin-bottom:8px;
}
.obs-form textarea { resize:vertical; min-height:50px; }
.obs-form label { font-size:10px; color:var(--ink-400); letter-spacing:0.08em; text-transform:uppercase; display:block; margin-bottom:4px; }

/* ════════════════════════════════════════════════════════════════
   POLISH · Mi corte — micro-interacciones, glow, atmósfera
   ════════════════════════════════════════════════════════════════ */
/* fondo animado del stage (blobs) */
.stage::before, .stage::after {
  content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(80px); opacity:.55;
}
.stage::before { width:620px; height:620px; top:-12%; left:-6%;
  background:radial-gradient(circle, rgba(43,247,212,0.11), transparent 70%); animation:blobA 19s ease-in-out infinite; }
.stage::after { width:540px; height:540px; bottom:-14%; right:-6%;
  background:radial-gradient(circle, rgba(106,124,255,0.12), transparent 70%); animation:blobB 24s ease-in-out infinite; }
@keyframes blobA { 0%,100%{transform:translate(0,0)} 50%{transform:translate(70px,55px)} }
@keyframes blobB { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-65px,-45px)} }
#viewport { z-index:1; }
.hud-grid-bg { z-index:1; }

/* topbar línea de luz */
.topbar { box-shadow: 0 1px 0 rgba(43,247,212,0.07); }
.brand img { transition: filter .3s; }
.brand:hover img { filter: drop-shadow(0 0 8px rgba(43,247,212,0.5)); }

/* nav glow */
.nav-item { transition: background .18s, color .18s, box-shadow .25s, transform .15s; }
.nav-item:hover { transform: translateX(2px); box-shadow: inset 0 0 0 1px rgba(43,247,212,0.07); }
.nav-item.active { box-shadow: inset 0 0 22px rgba(43,247,212,0.06); }
.nav-item .ic { transition: transform .25s; }
.nav-item:hover .ic { transform: scale(1.12); }

/* KPI brillo superior + lift */
.kpi { transition: transform .22s cubic-bezier(.22,1,.36,1), border-color .22s, box-shadow .22s; overflow:hidden; }
.kpi:hover { transform: translateY(-3px); border-color: rgba(43,247,212,0.28); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.kpi::before { content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(43,247,212,0.45), transparent); opacity:0; transition:opacity .25s; }
.kpi:hover::before { opacity:1; }

/* cards e intg-card hover */
.card, .intg-card, .obs-item, .health-card, .dash-big { transition: border-color .22s, box-shadow .22s, transform .22s; }
.card:hover { box-shadow: 0 8px 26px rgba(0,0,0,0.25); }
.health-card:hover, .dash-big:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }

/* botón primario shimmer */
.tb-btn.primary { position:relative; overflow:hidden; }
.tb-btn.primary::after { content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%); transform:translateX(-130%); }
.tb-btn.primary:hover::after { animation:shimmer .85s ease; }
@keyframes shimmer { to { transform:translateX(130%); } }

/* viewcube / vc-btn glow al activar */
.vc-btn.on { box-shadow: 0 0 18px rgba(43,247,212,0.25); }

/* gauge glow */
.gauge { box-shadow: 0 0 30px rgba(43,247,212,0.12); }

/* mode title entrada */
.mode-title .t { animation: titleIn .5s cubic-bezier(.22,1,.36,1); }
@keyframes titleIn { from { opacity:0; transform: translateY(8px); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }

/* loader cinemático */
.loading { background: radial-gradient(800px 500px at 50% 40%, #0a0a36 0%, var(--bg) 70%); }
.loading .ring { box-shadow: 0 0 30px rgba(43,247,212,0.3); }
.loading .lt { background:linear-gradient(90deg, var(--ink-400), var(--accent), var(--ink-400)); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:sheen 2.2s linear infinite; }
@keyframes sheen { to { background-position:200% center; } }

/* stage-top legend glow border */
.legend { box-shadow: 0 8px 30px rgba(0,0,0,0.3); }

/* hover tooltip 3D */
.hovertip { position:fixed; z-index:50; pointer-events:none; background:rgba(8,8,42,0.92); backdrop-filter:blur(8px);
  border:1px solid var(--accent); border-radius:7px; padding:5px 10px; font-size:11.5px; font-family:var(--font-display);
  font-weight:600; color:var(--fg); display:none; box-shadow:0 6px 22px rgba(0,0,0,0.45); white-space:nowrap; }
.hovertip.show { display:block; }
.hovertip .dd { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; vertical-align:middle; }

/* búsqueda de elementos */
.search-box { display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:8px; padding:8px 11px; margin-bottom:12px; transition:border-color .2s; }
.search-box:focus-within { border-color:var(--accent); }
.search-box input { flex:1; background:none; border:none; outline:none; color:var(--fg); font-family:var(--font-sans); font-size:12.5px; }
.search-box .sc { font-size:10px; color:var(--accent); font-family:var(--font-display); white-space:nowrap; }
.search-box svg { color:var(--ink-400); flex:0 0 15px; }

/* command palette ⌘K */
.cmdk-overlay { position:fixed; inset:0; z-index:200; background:rgba(0,0,15,0.62); backdrop-filter:blur(7px);
  display:none; align-items:flex-start; justify-content:center; padding-top:13vh; }
.cmdk-overlay.show { display:flex; animation:fadeIn .18s ease; }
.cmdk { width:min(560px,92vw); background:var(--panel); border:1px solid var(--line-strong); border-radius:14px;
  overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,0.65); animation:cmdkIn .22s cubic-bezier(.22,1,.36,1); }
@keyframes cmdkIn { from { opacity:0; transform:translateY(-12px) scale(.98); } to { opacity:1; transform:none; } }
.cmdk-input { display:flex; align-items:center; gap:11px; padding:15px 18px; border-bottom:1px solid var(--line); }
.cmdk-input svg { color:var(--accent); flex:0 0 18px; }
.cmdk-input input { flex:1; background:none; border:none; outline:none; color:var(--fg); font-family:var(--font-sans); font-size:15px; }
.cmdk-input input::placeholder { color:var(--ink-400); }
.cmdk-input .k { font-size:10px; color:var(--ink-400); border:1px solid var(--line); border-radius:5px; padding:2px 7px; font-family:var(--font-display); }
.cmdk-list { max-height:52vh; overflow-y:auto; padding:8px; }
.cmdk-group { font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-500); padding:11px 12px 5px; }
.cmdk-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; cursor:pointer;
  color:var(--ink-100); font-size:13.5px; transition:background .12s; }
.cmdk-item .ci { width:18px; height:18px; color:var(--ink-400); flex:0 0 18px; }
.cmdk-item.active { background:rgba(43,247,212,0.1); color:var(--accent); }
.cmdk-item.active .ci { color:var(--accent); }
.cmdk-item .dim { margin-left:auto; font-size:9px; font-family:var(--font-display); color:var(--ink-500); }
.cmdk-empty { padding:24px; text-align:center; color:var(--ink-400); font-size:12.5px; }

/* toast rediseñado */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(12px); z-index:120;
  background:var(--panel); border:1px solid var(--accent); color:var(--fg); padding:12px 18px; border-radius:11px;
  font-size:13px; font-family:var(--font-sans); box-shadow:0 16px 50px rgba(0,0,0,0.5); display:flex; align-items:center; gap:11px;
  opacity:0; transition:opacity .3s, transform .3s cubic-bezier(.22,1,.36,1); max-width:min(440px,90vw); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast .ti { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 9px var(--accent); flex:0 0 8px; }

/* ── Sidebar colapsable ───────────────────────────── */
.app { transition: grid-template-columns .28s cubic-bezier(.22,1,.36,1); }
.app.sb-collapsed { grid-template-columns: 66px 1fr var(--rail-w); }
.sb-collapsed .brand { padding:16px 0; justify-content:center; }
.sb-collapsed .brand > div { display:none; }
.sb-collapsed .proj-switch { display:none; }
.sb-collapsed .nav { padding:10px 8px; }
.sb-collapsed .nav-group { font-size:0; padding:12px 0 4px; text-align:center; }
.sb-collapsed .nav-group::after { content:"•"; font-size:11px; color:var(--ink-600); }
.sb-collapsed .nav-item { justify-content:center; padding:11px 0; }
.sb-collapsed .nav-item > span { display:none; }
.sb-toggle { width:100%; display:flex; align-items:center; gap:9px; justify-content:center; background:var(--panel);
  border:1px solid var(--line); color:var(--ink-300); border-radius:8px; padding:8px; cursor:pointer; font-size:12px;
  font-family:var(--font-sans); margin-bottom:10px; transition:all .2s; }
.sb-toggle:hover { border-color:var(--accent); color:var(--accent); }
.sb-toggle svg { transition:transform .3s; flex:0 0 16px; }
.sb-collapsed .sb-toggle svg { transform:rotate(180deg); }
.sb-collapsed .sb-toggle .foot-txt2, .sb-collapsed .foot-txt { display:none; }

/* ── Animaciones de barras y KPIs ─────────────────── */
.bar > i { transform-origin:left; animation: barGrow .9s cubic-bezier(.22,1,.36,1); }
@keyframes barGrow { from { transform:scaleX(0); } }
.kpi-grid .kpi, .dash-kpis .kpi { animation: kpiIn .55s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes kpiIn { from { opacity:0; transform:translateY(12px); } }
.kpi-grid .kpi:nth-child(2), .dash-kpis .kpi:nth-child(2) { animation-delay:.05s; }
.kpi-grid .kpi:nth-child(3), .dash-kpis .kpi:nth-child(3) { animation-delay:.10s; }
.kpi-grid .kpi:nth-child(4), .dash-kpis .kpi:nth-child(4) { animation-delay:.15s; }
.dash-kpis .kpi:nth-child(5) { animation-delay:.20s; }
.dash-kpis .kpi:nth-child(6) { animation-delay:.25s; }
.health-card { animation: kpiIn .55s cubic-bezier(.22,1,.36,1) backwards; }
.health-card:nth-child(2){animation-delay:.06s} .health-card:nth-child(3){animation-delay:.12s} .health-card:nth-child(4){animation-delay:.18s}

/* ── Brújula de orientación ───────────────────────── */
.compass { position:absolute; bottom:16px; right:16px; z-index:6; width:56px; height:56px; border-radius:50%;
  background:rgba(8,8,42,0.74); backdrop-filter:blur(10px); border:1px solid var(--line);
  box-shadow:0 6px 22px rgba(0,0,0,0.35); }
.compass-dial { position:absolute; inset:0; transition:transform .1s linear; }
.compass-dial span { position:absolute; font-size:9px; font-family:var(--font-display); font-weight:700; color:var(--ink-300); }
.compass-dial .cn { top:5px; left:50%; transform:translateX(-50%); color:var(--accent); }
.compass-dial .cs { bottom:5px; left:50%; transform:translateX(-50%); }
.compass-dial .ce { right:6px; top:50%; transform:translateY(-50%); }
.compass-dial .cw { left:6px; top:50%; transform:translateY(-50%); }
.compass-needle { position:absolute; top:50%; left:50%; width:0; height:0; transform:translate(-50%,-50%);
  border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:16px solid var(--accent);
  margin-top:-8px; filter:drop-shadow(0 0 4px rgba(43,247,212,0.5)); }
.compass::after { content:""; position:absolute; top:50%; left:50%; width:4px; height:4px; border-radius:50%;
  background:var(--ink-300); transform:translate(-50%,-50%); }

/* ── Campana / centro de actividad ────────────────── */
.bell { position:relative; width:36px; height:36px; border-radius:9px; background:var(--panel); border:1px solid var(--line);
  color:var(--ink-200); cursor:pointer; display:grid; place-items:center; transition:all .2s; }
.bell:hover { border-color:var(--accent); color:var(--accent); }
.bell-dot { position:absolute; top:7px; right:8px; min-width:14px; height:14px; padding:0 3px; border-radius:8px;
  background:var(--bad); color:#fff; font-size:9px; font-weight:700; font-family:var(--font-display);
  display:grid; place-items:center; box-shadow:0 0 0 2px var(--bg-2); }
.bell-dot.hide { display:none; }
.activity { position:absolute; top:52px; right:18px; z-index:90; width:360px; max-height:70vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:13px; box-shadow:0 24px 70px rgba(0,0,0,0.6);
  display:none; animation:cmdkIn .2s cubic-bezier(.22,1,.36,1); }
.activity.show { display:block; }
.activity-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); }
.activity-head .t { font-family:var(--font-display); font-weight:600; font-size:13.5px; }
.activity-head button { background:none; border:none; color:var(--accent); font-size:11px; cursor:pointer; font-family:var(--font-sans); }
.act-item { display:flex; gap:11px; padding:12px 16px; border-bottom:1px solid var(--line); transition:background .15s; cursor:default; }
.act-item:hover { background:rgba(120,130,200,0.05); }
.act-item:last-child { border-bottom:none; }
.act-item.unread { background:rgba(43,247,212,0.04); }
.act-ic { width:30px; height:30px; border-radius:8px; flex:0 0 30px; display:grid; place-items:center; }
.act-body .at { font-size:12px; color:var(--ink-100); line-height:1.45; }
.act-body .at b { color:var(--fg); font-weight:600; }
.act-body .am { font-size:10px; color:var(--ink-400); margin-top:4px; display:flex; gap:8px; align-items:center; }
.act-body .am .tag2 { font-family:var(--font-display); }
.act-unread-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex:0 0 6px; align-self:center; }

/* ── VR goggles (estereoscópico) ──────────────────── */
.vr-goggles { display:flex; gap:6px; justify-content:center; padding:7px; background:#04041a; border-radius:18px;
  border:1px solid var(--line); margin-bottom:12px; box-shadow:inset 0 2px 14px rgba(0,0,0,0.5); }
.vr-lens { width:50%; aspect-ratio:1/1; border-radius:50%; overflow:hidden; position:relative;
  background:radial-gradient(circle at 50% 30%, #0b3540 0%, #061026 55%, #02021a 100%); box-shadow:inset 0 0 22px rgba(0,0,0,0.7); }
.vr-lens .sun { position:absolute; top:14%; left:50%; transform:translateX(-50%); width:46%; height:46%; border-radius:50%;
  background:radial-gradient(circle, rgba(43,247,212,0.35), transparent 70%); filter:blur(4px); }
.vr-lens .floor { position:absolute; bottom:-6%; left:-30%; right:-30%; height:48%;
  background-image:linear-gradient(rgba(43,247,212,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(43,247,212,0.25) 1px, transparent 1px);
  background-size:14px 14px; transform:perspective(110px) rotateX(62deg); opacity:.6; }
.vr-lens .bldg { position:absolute; bottom:40%; left:50%; transform:translateX(-50%); width:30%; height:38%;
  background:linear-gradient(180deg, var(--accent), rgba(43,247,212,0.15)); box-shadow:0 0 18px rgba(43,247,212,0.5);
  clip-path:polygon(20% 30%, 50% 8%, 80% 30%, 80% 100%, 20% 100%); animation:vrfloat 4s ease-in-out infinite; }
.vr-lens .bldg2 { position:absolute; bottom:40%; left:34%; width:16%; height:24%; background:rgba(106,124,255,0.5); box-shadow:0 0 12px rgba(106,124,255,0.4); }
@keyframes vrfloat { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-3px)} }
.vr-hud { position:absolute; top:8%; left:0; right:0; text-align:center; font-size:8px; font-family:var(--font-display); color:var(--accent); letter-spacing:0.1em; }

/* ── Skeleton loaders ─────────────────────────────── */
.skel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:13px; margin-bottom:12px; }
.skel-line { height:11px; border-radius:6px; margin-bottom:9px;
  background:linear-gradient(90deg, var(--ink-800) 25%, var(--ink-700) 37%, var(--ink-800) 63%); background-size:400% 100%; animation:shimmerSkel 1.4s ease infinite; }
.skel-line:last-child { margin-bottom:0; }
@keyframes shimmerSkel { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ── Login / Auth ─────────────────────────────────── */
.login-overlay { position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center;
  background:radial-gradient(900px 600px at 50% 28%, #0a0a36 0%, var(--bg) 70%); }
.login-overlay.show { display:flex; }
.login-card { width:min(382px,90vw); background:var(--panel); border:1px solid var(--line-strong); border-radius:16px;
  padding:34px 30px; text-align:center; box-shadow:0 30px 90px rgba(0,0,0,0.6); animation:cmdkIn .3s cubic-bezier(.22,1,.36,1); }
.login-logo { height:30px; margin-bottom:16px; }
.login-title { font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-0.02em; }
.login-title b { color:var(--accent); }
.login-sub { font-size:12px; color:var(--ink-300); margin:7px 0 22px; line-height:1.5; }
.login-card label { display:block; text-align:left; font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-400); margin:13px 0 5px; }
.login-card input { width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:11px 12px;
  color:var(--fg); font-family:var(--font-sans); font-size:13px; outline:none; transition:border-color .2s; }
.login-card input:focus { border-color:var(--accent); }
.login-btn { width:100%; margin-top:20px; background:var(--accent); color:var(--navy); border:none; border-radius:8px;
  padding:12px; font-family:var(--font-sans); font-weight:600; font-size:13.5px; cursor:pointer; transition:background .2s; }
.login-btn:hover { background:var(--accent-dark); }
.login-sso { width:100%; margin-top:9px; background:var(--panel-2); color:var(--ink-200); border:1px solid var(--line);
  border-radius:8px; padding:11px; font-family:var(--font-sans); font-size:12.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; transition:border-color .2s; }
.login-sso:hover { border-color:var(--accent); color:var(--accent); }
.login-err { color:var(--bad); font-size:11px; margin-top:11px; min-height:14px; }
.login-foot { font-size:10px; color:var(--ink-500); margin-top:20px; display:flex; align-items:center; justify-content:center; gap:7px; }
.login-foot .dot { width:6px; height:6px; }

/* ── Meby · indicador de escritura ────────────────── */
.typing { display:inline-flex; gap:4px; padding:3px 0; }
.typing i { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:typingDot 1s infinite; }
.typing i:nth-child(2){ animation-delay:.16s; } .typing i:nth-child(3){ animation-delay:.32s; }
@keyframes typingDot { 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

/* ── Asistencia & MO · zonificación + mapa de calor ── */
.hh { display:grid; gap:16px; }
.hh-sec { font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--ink-200); margin:8px 0 -4px; }
.zonemap { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; }
.zonemap svg { width:100%; height:auto; display:block; border-radius:8px; }
.zone-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(156px,1fr)); gap:10px; margin-top:14px; }
.zone-card { background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--ink-500); border-radius:9px; padding:11px 12px; cursor:pointer; transition:transform .18s, border-color .18s; }
.zone-card:hover { transform:translateY(-2px); border-color:var(--line-strong); }
.zone-card .zn { font-family:var(--font-display); font-weight:600; font-size:12.5px; display:flex; align-items:center; gap:7px; }
.zone-card .zc { font-family:var(--font-display); font-weight:700; font-size:23px; margin-top:6px; letter-spacing:-0.03em; }
.zone-card .zc small { font-size:11px; color:var(--ink-400); font-weight:500; }
.zone-card .zp { font-size:10.5px; margin-top:4px; }
.zt { font-size:9px; font-weight:700; font-family:var(--font-display); padding:2px 8px; border-radius:10px; }
.zt.ok { background:rgba(43,247,212,0.13); color:var(--ok); }
.zt.low { background:rgba(106,124,255,0.16); color:#8a98ff; }
.zt.high { background:rgba(255,93,115,0.15); color:var(--bad); }

/* métricas rediseñadas */
.metrics-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:1100px){ .metrics-row { grid-template-columns:repeat(2,1fr); } }
.metric { display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:15px 16px; transition:border-color .2s, transform .2s, box-shadow .2s; }
.metric:hover { border-color:var(--line-strong); transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,0.28); }
.metric .mi { width:44px; height:44px; border-radius:12px; flex:0 0 44px; display:grid; place-items:center; }
.metric .mv { font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-0.03em; line-height:1; }
.metric .ml { font-size:11.5px; color:var(--ink-300); margin-top:6px; }
.metric .md { font-size:10px; margin-top:3px; }
.metric .md.up { color:var(--ok); } .metric .md.down { color:var(--bad); } .metric .md.flat { color:var(--ink-400); }

/* ── Tarjeta KPI premium (Asistencia & MO) ── */
.hh-metric { position:relative; display:flex; flex-direction:column; gap:9px; overflow:hidden;
  background:linear-gradient(180deg, color-mix(in srgb, var(--mc) 6%, var(--panel)), var(--panel));
  border:1px solid var(--line); border-radius:14px; padding:16px 17px;
  transition:border-color .22s, transform .22s, box-shadow .22s; }
.hh-metric::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--mc); opacity:.85; }
.hh-metric:hover { border-color:color-mix(in srgb, var(--mc) 45%, var(--line)); transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(0,0,0,.32), 0 0 0 1px color-mix(in srgb, var(--mc) 18%, transparent); }
.hh-metric .hm-top { display:flex; align-items:center; gap:9px; }
.hh-metric .mi { width:30px; height:30px; border-radius:9px; flex:0 0 30px; display:grid; place-items:center; }
.hh-metric .hm-label { font-size:10.5px; color:var(--ink-300); font-weight:600; letter-spacing:.005em; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hh-metric .hm-chip { font-size:9px; font-weight:700; padding:2px 6px; border-radius:999px; white-space:nowrap;
  background:color-mix(in srgb, var(--mc) 14%, transparent); color:var(--mc); }
.hh-metric .hm-chip.up { background:rgba(43,247,212,.13); color:var(--ok); }
.hh-metric .hm-chip.down { background:rgba(255,93,115,.14); color:var(--bad); }
.hh-metric .hm-chip.flat { background:rgba(120,130,200,.13); color:var(--ink-300); }
.hh-metric .hm-val { font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:-0.035em; line-height:.95; }
.hh-metric .hm-val small { font-size:17px; font-weight:600; color:var(--ink-400); letter-spacing:0; }
.hh-metric .hm-viz { min-height:14px; }
.hh-metric .hm-sub { font-size:10.5px; color:var(--ink-400); }
.hm-bar { height:7px; border-radius:4px; background:var(--ink-700); overflow:hidden; }
.hm-bar i { display:block; height:100%; border-radius:4px; transition:width .6s cubic-bezier(.2,.8,.2,1); }
.hm-gauge { position:relative; height:7px; border-radius:4px; background:var(--ink-700); overflow:visible; }
.hm-gauge i { display:block; height:100%; border-radius:4px; }
.hm-gauge .tg { position:absolute; top:-3px; width:2px; height:13px; background:var(--ink-200); border-radius:2px; transform:translateX(-1px); }
.hm-dots { display:flex; gap:7px; align-items:center; height:14px; }
.hm-dots .dot { width:12px; height:12px; border-radius:50%; background:var(--ink-600); transition:background .3s; }

/* chips de fase */
.phase-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.phase-chip { display:inline-flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:6px 13px; font-size:11.5px; color:var(--ink-200); }
.phase-chip b { font-family:var(--font-display); color:var(--fg); margin-left:3px; }

/* heat map jerárquico (fase ▸ proceso) */
.heat2 { border-spacing:2px; }
.heat2 th.dh { width:24px; }
.heat2 td.hcell { width:24px; height:21px; border-radius:3px; text-align:center; font-family:var(--font-display); font-size:10px; font-weight:600; transition:transform .1s; }
.heat2 td.hcell:hover { transform:scale(1.2); outline:1px solid var(--accent); position:relative; z-index:1; }
.heat2 td.hcell.wknd { opacity:.5; }
.heat2 td.hcell.today { box-shadow:0 0 0 1.5px var(--accent); }
.heat2 td.hcell.pcell { font-weight:700; }
.heat2 th.wk.phase { cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:12px; padding-top:9px; }
.heat2 th.wk.phase .caret { display:inline-block; width:15px; color:var(--ink-400); }
.heat2 th.wk.phase small { color:var(--ink-400); font-weight:500; margin-left:7px; font-size:10px; }
.heat2 th.wk.proc { padding-left:22px; font-size:11px; color:var(--ink-200); font-weight:400; }
.heat2 th.wk.proc small { color:var(--ink-500); font-size:9.5px; margin-left:5px; }
.heat2 tr.phase-row:hover th.wk.phase .caret, .heat2 tr.phase-row:hover th.wk.phase { color:var(--accent); }

.heatmap-wrap { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; overflow-x:auto; }
.heatmap { border-collapse:separate; border-spacing:2px; }
.heatmap th.wk { text-align:left; position:sticky; left:0; z-index:2; background:var(--panel); font-size:11px; color:var(--ink-100); padding:0 10px 0 2px; white-space:nowrap; font-weight:500; height:21px; }
.heatmap th.wk small { color:var(--ink-400); font-weight:400; }
.heatmap th.dh { font-size:8px; color:var(--ink-400); font-family:var(--font-display); width:17px; text-align:center; font-weight:500; }
.heatmap td.cell { width:17px; height:17px; border-radius:3px; transition:transform .1s; }
.heatmap td.cell:hover { transform:scale(1.25); outline:1px solid var(--accent); }
.heatmap td.cell.wknd { opacity:.35; }
.heatmap th.dh.we { color:var(--ink-600); }
.heatmap th.dh.today { color:var(--accent); font-weight:700; }
.heatmap td.cell.today { box-shadow:0 0 0 1.5px var(--accent); }
.heatmap .zsep td { height:4px; }
.hm-legend { display:flex; align-items:center; gap:10px; font-size:10.5px; color:var(--ink-400); margin-top:12px; flex-wrap:wrap; }
.hm-legend .sw { width:13px; height:13px; border-radius:3px; display:inline-block; vertical-align:middle; margin-right:5px; }
.worker-dot { transition:r .2s; }

/* ── Ficha de trabajador ──────────────────────────── */
.ficha-overlay { position:fixed; inset:0; z-index:250; background:rgba(0,0,15,0.6); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; animation:fadeIn .18s; }
.ficha-card { width:min(420px,92vw); max-height:88vh; overflow-y:auto; background:var(--panel); border:1px solid var(--line-strong); border-radius:15px; padding:20px; box-shadow:0 30px 80px rgba(0,0,0,0.6); animation:cmdkIn .22s cubic-bezier(.22,1,.36,1); }
.ficha-head { display:flex; align-items:center; gap:13px; }
.ficha-av { width:48px; height:48px; border-radius:12px; flex:0 0 48px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:16px; border:1px solid; }
.ficha-name { font-family:var(--font-display); font-weight:700; font-size:16px; }
.ficha-id { font-size:11px; color:var(--ink-400); margin-top:3px; }
.ficha-x { background:none; border:none; color:var(--ink-400); font-size:16px; cursor:pointer; padding:4px; }
.ficha-x:hover { color:var(--fg); }

/* ── Pulido modo gris (sin restos navy) ───────────── */
html.theme-gris .stage { background:radial-gradient(1200px 700px at 60% 12%, #20242c 0%, var(--bg) 62%); }
html.theme-gris .fullpanel { background:radial-gradient(900px 500px at 70% 0%, #22262f 0%, transparent 60%), var(--bg); }
html.theme-gris .loading { background:radial-gradient(800px 500px at 50% 40%, #22262f 0%, var(--bg) 70%); }
html.theme-gris .login-overlay { background:radial-gradient(900px 600px at 50% 28%, #22262f 0%, var(--bg) 70%); }
html.theme-gris .stage::before { background:radial-gradient(circle, rgba(43,247,212,0.07), transparent 70%); }
html.theme-gris .stage::after { background:radial-gradient(circle, rgba(150,160,180,0.09), transparent 70%); }
html.theme-gris .hud-grid-bg { background-image:linear-gradient(rgba(160,172,194,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(160,172,194,0.04) 1px, transparent 1px); }
html.theme-gris .nav-item.active { background:rgba(43,247,212,0.08); }

.hide { display: none !important; }
.fade-in { animation: fadeIn .4s ease; }
@keyframes fadeIn { from { opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }

/* mobile fallback */
.mobile-note { display: none; }
@media (max-width: 1024px) {
  .app { display: none; }
  .mobile-note {
    display: grid; place-items: center; height: 100vh; padding: 32px; text-align: center;
    gap: 12px;
  }
  .mobile-note img { height: 26px; }
  .mobile-note p { color: var(--ink-300); font-size: 14px; max-width: 320px; line-height: 1.6; }
}