/* @overa/ui-kit 0.10.0 · LA NAVEGACIÓN DE LA SUITE IT (suite-shell.js): la barra negra (selector de aplicaciones,
   logo «overa NOMBRE», usuario), la pestaña del área abierta, las migas y el menú lateral (plegable a iconos, con
   el panel del área, y cajón en el móvil). Sale de app-atlas (`inventario-comun/menu.js`, 2026-10-13) para que
   Atlas, Iris, Talos, Helios y Hestia naveguen IGUAL (Francisco: «barra superior, menú, breadcrumb… todo igual»).
   La marca de cada aplicación: GlobalProjects/SUITE-BRAND.md. Sin `style=` en el marcado (la CSP de la suite). */

:root {
  --ov-sh-bar-h: 70px;
  --ov-sh-tabs-h: 46px;
  --ov-sh-crumbs-h: 40px;
  --ov-sh-head: calc(var(--ov-sh-bar-h) + var(--ov-sh-tabs-h) + var(--ov-sh-crumbs-h));
  --ov-sh-side-w: 236px;
  --ov-sh-side-rail: 60px;
  --ov-sh-side: 0px;
  /* los colores, los de la barra de Overa (software.overa.net) y la paleta de atlas */
  --ov-sh-bar-bg: #282828;
  --ov-sh-bar-ink: #f5f5f5;
  --ov-sh-bar-line: #474747;
  --ov-sh-bar-control: #3a3a3a;
  --ov-sh-bar-muted: #b5b5b5;
  --ov-sh-panel: #fff;
  --ov-sh-bg: #fff;
  --ov-sh-ink: #282828;
  --ov-sh-ink2: #474747;
  --ov-sh-ink3: #6b6b6b;
  --ov-sh-rule: #e0e0e0;
  --ov-sh-hover: #f5f5f5;
  --ov-sh-primary: #4a8bd4;
  --ov-sh-primary-text: #3f75b5;
  --ov-sh-primary-soft: #edf4fb;
  --ov-sh-danger: #c4432d;
  --ov-sh-danger-soft: #fdecea;
  --ov-sh-warn: #e0a000;
  --ov-sh-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  --ov-sh-font: "Geist", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* el color de cada aplicación (las hojas de su V): el de la píldora del logo */
  --ov-sh-app: #58b0ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ov-sh-panel: #1f1f1f; --ov-sh-bg: #181818; --ov-sh-ink: #ececec; --ov-sh-ink2: #c9c9c9; --ov-sh-ink3: #9a9a9a;
    --ov-sh-rule: #333; --ov-sh-hover: #2a2a2a; --ov-sh-primary-soft: #1d2a3a; --ov-sh-primary-text: #8ab8ec; --ov-sh-danger-soft: #3a1f1c;
  }
}
:root[data-theme="dark"] {
  --ov-sh-panel: #1f1f1f; --ov-sh-bg: #181818; --ov-sh-ink: #ececec; --ov-sh-ink2: #c9c9c9; --ov-sh-ink3: #9a9a9a;
  --ov-sh-rule: #333; --ov-sh-hover: #2a2a2a; --ov-sh-primary-soft: #1d2a3a; --ov-sh-primary-text: #8ab8ec; --ov-sh-danger-soft: #3a1f1c;
}
.ov-sh[data-app="atlas"], body[data-ov-app="atlas"] { --ov-sh-app: #58b0ff; }
.ov-sh[data-app="iris"], body[data-ov-app="iris"] { --ov-sh-app: #68c36d; }
.ov-sh[data-app="talos"], body[data-ov-app="talos"] { --ov-sh-app: #b296ff; }
.ov-sh[data-app="helios"], body[data-ov-app="helios"] { --ov-sh-app: #fb817a; }
.ov-sh[data-app="hestia"], body[data-ov-app="hestia"] { --ov-sh-app: #e19b1b; }
.ov-sh[data-app="ariadne"], body[data-ov-app="ariadne"] { --ov-sh-app: #e484d0; }

/* `hidden` manda sobre cualquier `display` de estas piezas (0.10.1: `.ov-sh-iconbtn{display:inline-flex}` lo pisaba
   y el selector de aplicaciones salía con una sola aplicación; lo encontró app-talos) */
.ov-sh [hidden], .ov-sh[hidden], .ov-sh-user[hidden], .ov-sh-apps[hidden], .ov-sh-user-box[hidden] { display: none !important; }
body.ov-shell { --ov-sh-side: 0px; }
body.ov-shell.ov-shell-side { --ov-sh-side: var(--ov-sh-side-w); }
body.ov-shell.ov-shell-side.ov-shell-compact { --ov-sh-side: var(--ov-sh-side-rail); }
/* el contenido deja sitio (lo pide la app con `layout: 'pad'`) */
body.ov-shell-pad { padding-top: var(--ov-sh-head); }
@media (min-width: 901px) { body.ov-shell-pad.ov-shell-side { padding-left: var(--ov-sh-side); } }

/* ── LA BARRA NEGRA ─────────────────────────────────────────────────────── */
.ov-sh-bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--ov-sh-bar-h); z-index: 1001;
  display: flex; align-items: center; gap: 10px; padding: 0 12px; box-sizing: border-box;
  background: var(--ov-sh-bar-bg); color: var(--ov-sh-bar-ink); font-family: var(--ov-sh-font);
}
.ov-sh-bar * { box-sizing: border-box; }
.ov-sh-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; line-height: 0; }
.ov-sh-logo:hover { text-decoration: none; }
.ov-sh-logo:focus-visible { outline: 2px solid #afcfec; outline-offset: 4px; border-radius: 4px; }
.ov-sh-logo img { height: 25px; width: auto; display: block; }
/* el logotipo en línea (0.16.1): un <svg> sin ancho no lo saca de su viewBox como un <img>; 403×91 a 25 px de alto */
.ov-sh-logo svg { height: 25px; width: 111px; display: block; }
.ov-sh-pill {
  display: inline-block; padding: 0 9px; border: 1.6px solid var(--ov-sh-app); border-radius: 999px;
  color: var(--ov-sh-app); font: 600 13px/22px var(--ov-sh-font); letter-spacing: .08em; text-transform: uppercase;
}
.ov-sh-spacer { flex: 1; }
.ov-sh-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--ov-sh-bar-ink); cursor: pointer;
}
.ov-sh-iconbtn:hover, .ov-sh-iconbtn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.ov-sh-iconbtn:focus-visible { outline: 2px solid #afcfec; outline-offset: 1px; }
.ov-sh-iconbtn svg { width: 20px; height: 20px; display: block; }
.ov-sh-drawer-btn { display: none; }
@media (max-width: 900px) { .ov-sh-drawer-btn { display: inline-flex; } }
@media (max-width: 600px) { .ov-sh-logo img { height: 20px; } .ov-sh-logo svg { height: 20px; width: 89px; } .ov-sh-pill { font-size: 11px; line-height: 19px; padding: 0 7px; } }

/* ── EL SELECTOR DE APLICACIONES ────────────────────────────────────────── */
.ov-sh-apps {
  position: fixed; z-index: 1100; top: calc(var(--ov-sh-bar-h) - 8px); left: 12px; width: 372px; max-width: calc(100vw - 24px);
  padding: 14px 14px 16px; border: 1px solid var(--ov-sh-rule); border-radius: 14px; box-sizing: border-box;
  background: var(--ov-sh-panel); color: var(--ov-sh-ink); box-shadow: 0 16px 48px rgba(0, 0, 0, .2); font-family: var(--ov-sh-font);
}
.ov-sh-apps[hidden] { display: none; }
.ov-sh-apps-search { position: relative; margin: 0 2px 14px; }
.ov-sh-apps-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ov-sh-ink3); }
.ov-sh-apps-search input {
  width: 100%; box-sizing: border-box; padding: 9px 12px 9px 36px; border: 1px solid var(--ov-sh-rule); border-radius: 20px;
  background: var(--ov-sh-hover); color: inherit; font: inherit; font-size: 13.5px; outline: none;
}
.ov-sh-apps-search input:focus { border-color: var(--ov-sh-primary); background: var(--ov-sh-panel); }
.ov-sh-apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ov-sh-app {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 12px;
  border: 2px solid transparent; text-decoration: none; color: inherit; text-align: center;
}
.ov-sh-app:hover { background: var(--ov-sh-hover); text-decoration: none; }
.ov-sh-app.current { border-color: var(--ov-sh-ink); }
.ov-sh-app-ico {
  width: 48px; height: 48px; border-radius: 13px; background: var(--ov-sh-bar-bg); box-shadow: 0 3px 8px rgba(0, 0, 0, .14);
  display: flex; align-items: center; justify-content: center;
}
.ov-sh-app-ico img, .ov-sh-app-ico svg { width: 30px; height: 30px; display: block; }
.ov-sh-app-name { font-size: 12.5px; color: var(--ov-sh-ink2); line-height: 1.25; }
.ov-sh-apps-empty { grid-column: 1 / -1; padding: 14px; text-align: center; font-size: 13px; color: var(--ov-sh-ink3); }

/* ── QUIÉN ESTÁ CONECTADO ───────────────────────────────────────────────── */
.ov-sh-user { position: relative; font: 13px/1.2 var(--ov-sh-font); }
.ov-sh-user-btn {
  display: flex; align-items: center; gap: 8px; height: 32px; max-width: 230px; padding: 0 10px 0 4px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ov-sh-bar-ink); border: 1px solid var(--ov-sh-bar-line); font: inherit;
}
.ov-sh-user-btn:hover, .ov-sh-user-btn[aria-expanded="true"] { background: var(--ov-sh-bar-control); border-color: var(--ov-sh-bar-muted); }
.ov-sh-user-ini {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 600; font-size: 12px;
  background: var(--ov-sh-bar-ink); color: var(--ov-sh-bar-bg);
}
.ov-sh-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-sh-user-box {
  position: absolute; right: 0; top: 40px; min-width: 250px; max-width: 320px; padding: 12px 14px; border-radius: 10px; z-index: 1100;
  background: var(--ov-sh-panel); color: var(--ov-sh-ink); border: 1px solid var(--ov-sh-rule); box-shadow: var(--ov-sh-shadow);
}
.ov-sh-user-box[hidden] { display: none; }
.ov-sh-user-box p { margin: 0 0 6px; white-space: normal; word-break: break-word; }
.ov-sh-user-box .ov-sh-dim { color: var(--ov-sh-ink3); font-size: 12px; }
.ov-sh-signout {
  display: block; width: 100%; margin-top: 10px; padding: 7px 10px; border-radius: 8px; text-align: center; text-decoration: none; font: 600 13px var(--ov-sh-font);
  color: var(--ov-sh-danger); background: transparent; border: 1px solid var(--ov-sh-rule); cursor: pointer;
}
.ov-sh-signout:hover { background: var(--ov-sh-danger-soft); text-decoration: none; }
@media (max-width: 700px) { .ov-sh-user-name { display: none; } .ov-sh-user-btn { padding: 0 4px; } }
/* lo que la app ponga a la derecha (el selector de inquilino, ajustes…), antes del usuario */
.ov-sh-extra { display: flex; align-items: center; gap: 8px; }

/* ── LA PESTAÑA DEL ÁREA Y LAS MIGAS ────────────────────────────────────── */
.ov-sh-tabs {
  position: fixed; top: var(--ov-sh-bar-h); left: var(--ov-sh-side); right: 0; height: var(--ov-sh-tabs-h); z-index: 999;
  display: flex; align-items: flex-end; gap: 2px; padding: 0 16px; box-sizing: border-box; overflow: hidden;
  background: var(--ov-sh-panel); border-bottom: 1px solid var(--ov-sh-rule); font-family: var(--ov-sh-font);
}
.ov-sh-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: calc(var(--ov-sh-tabs-h) - 6px); padding: 0 14px; white-space: nowrap;
  color: var(--ov-sh-ink); font-size: 15px; font-weight: 500; text-decoration: none; border: 1px solid var(--ov-sh-rule); border-bottom: 0;
  border-radius: 6px 6px 0 0; background: var(--ov-sh-panel);
}
.ov-sh-tab:hover { text-decoration: none; background: var(--ov-sh-hover); }
.ov-sh-tab::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px; background: var(--ov-sh-primary); }
.ov-sh-tab .ov-sh-icon svg { width: 17px; height: 17px; }
.ov-sh-crumbs {
  position: fixed; top: calc(var(--ov-sh-bar-h) + var(--ov-sh-tabs-h)); left: var(--ov-sh-side); right: 0; height: var(--ov-sh-crumbs-h); z-index: 998;
  display: flex; align-items: center; gap: 0; padding: 0 24px; box-sizing: border-box; overflow: hidden; white-space: nowrap;
  background: var(--ov-sh-bg); color: var(--ov-sh-ink3); font: 400 15px var(--ov-sh-font);
}
.ov-sh-crumbs a { color: var(--ov-sh-ink3); text-decoration: none; cursor: pointer; }
.ov-sh-crumbs a:hover, .ov-sh-crumbs a:focus-visible { color: var(--ov-sh-ink); text-decoration: none; }
.ov-sh-crumbs .ov-sh-crumb-here, .ov-sh-crumbs b { color: #254770; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.ov-sh-crumbs .ov-sh-crumb-fixed { color: var(--ov-sh-ink3); }
.ov-sh-crumb-sep { margin: 0 10px; color: var(--ov-sh-ink3); }
:root[data-theme="dark"] .ov-sh-crumbs .ov-sh-crumb-here { color: #8ab8ec; }
@media (max-width: 900px) { .ov-sh-tabs, .ov-sh-crumbs { left: 0; } }

/* ── EL MENÚ LATERAL ────────────────────────────────────────────────────── */
.ov-sh-nav {
  position: fixed; top: var(--ov-sh-bar-h); left: 0; bottom: 0; width: var(--ov-sh-side); z-index: 1000; display: flex; flex-direction: column;
  background: var(--ov-sh-panel); border-right: 1px solid var(--ov-sh-rule); transition: width .15s ease; font-family: var(--ov-sh-font); box-sizing: border-box;
}
.ov-sh-nav * { box-sizing: border-box; }
.ov-sh-nav-items { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 8px; scrollbar-width: thin; }
.ov-sh-group + .ov-sh-group { margin-top: 2px; }
.ov-sh-item {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 7px 10px; border: 0;
  border-radius: 8px; background: none; color: var(--ov-sh-ink2); font: inherit; font-size: 13.5px; font-weight: 500; text-align: left;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s;
}
.ov-sh-item:hover { background: var(--ov-sh-hover); color: var(--ov-sh-ink); text-decoration: none; }
.ov-sh-item:focus-visible { outline: 2px solid var(--ov-sh-primary); outline-offset: -2px; }
.ov-sh-item.active { background: var(--ov-sh-primary-soft); color: var(--ov-sh-primary-text); font-weight: 500; }
.ov-sh-parent { font-weight: 500; color: var(--ov-sh-ink); }
.ov-sh-parent.in-path .ov-sh-icon { color: var(--ov-sh-primary); }
.ov-sh-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ov-sh-caret { font-size: 10px; color: var(--ov-sh-ink3); transition: transform .15s; }
.ov-sh-group:not(.open) .ov-sh-caret { transform: rotate(-90deg); }
.ov-sh-children { display: none; margin: 2px 0 8px 28px; padding-left: 12px; border-left: 1px solid var(--ov-sh-rule); }
.ov-sh-group.open .ov-sh-children { display: block; }
.ov-sh-child { min-height: 30px; padding: 5px 10px; font-size: 13px; gap: 9px; font-weight: 400; }
.ov-sh-child.active { font-weight: 500; }
.ov-sh-sep { padding: 14px 10px 6px; font-size: 11.5px; font-weight: 400; letter-spacing: .07em; text-transform: uppercase; color: var(--ov-sh-ink3); }
.ov-sh-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ov-sh-ink3); }
.ov-sh-item:hover .ov-sh-icon, .ov-sh-item.active .ov-sh-icon { color: inherit; }
.ov-sh-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ov-sh-child .ov-sh-icon svg { width: 16px; height: 16px; }
.ov-sh-badge {
  flex-shrink: 0; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--ov-sh-danger); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.ov-sh-badge.important { background: var(--ov-sh-warn); color: #1d2731; }
.ov-sh-collapse {
  flex-shrink: 0; border: 0; border-top: 1px solid var(--ov-sh-rule); background: none; padding: 10px 16px; text-align: left;
  color: var(--ov-sh-ink3); font: inherit; font-size: 12.5px; cursor: pointer;
}
.ov-sh-collapse:hover { color: var(--ov-sh-ink); background: var(--ov-sh-hover); }
/* plegado: solo iconos */
body.ov-shell-compact .ov-sh-nav .ov-sh-item { justify-content: center; padding: 10px 0; gap: 0; width: 44px; height: 44px; margin: 4px auto; }
body.ov-shell-compact .ov-sh-nav .ov-sh-label, body.ov-shell-compact .ov-sh-nav .ov-sh-caret, body.ov-shell-compact .ov-sh-nav .ov-sh-children { display: none; }
body.ov-shell-compact .ov-sh-nav .ov-sh-icon svg { width: 20px; height: 20px; stroke-width: 1.6; }
body.ov-shell-compact .ov-sh-nav .ov-sh-parent.in-path { background: var(--ov-sh-primary); color: #fff; }
body.ov-shell-compact .ov-sh-nav .ov-sh-parent.in-path .ov-sh-icon { color: #fff; }
body.ov-shell-compact .ov-sh-nav .ov-sh-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; padding: 0 4px; line-height: 16px; font-size: 10px; }
body.ov-shell-compact .ov-sh-collapse { text-align: center; padding: 10px 0; }
/* el panel del área, con el menú plegado */
.ov-sh-flyout {
  display: none; position: fixed; z-index: 1050; min-width: 230px; max-width: 300px; max-height: 80vh; overflow-y: auto; padding: 6px;
  background: var(--ov-sh-panel); border: 1px solid var(--ov-sh-rule); border-radius: 10px; box-shadow: var(--ov-sh-shadow); font-family: var(--ov-sh-font);
}
.ov-sh-flyout.open { display: block; }
.ov-sh-flyout .ov-sh-item, .ov-sh-flyout .ov-sh-sep { margin-left: 10px; width: calc(100% - 10px); }
.ov-sh-flyout-title { padding: 6px 10px 4px; font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ov-sh-ink3); }
/* el cajón del móvil */
.ov-sh-backdrop { display: none; }
@media (max-width: 900px) {
  .ov-sh-nav { width: 270px; transform: translateX(-100%); transition: transform .2s ease; }
  body.ov-shell-open .ov-sh-nav { transform: none; box-shadow: 0 0 24px rgba(0, 0, 0, .2); }
  body.ov-shell-open .ov-sh-backdrop { display: block; position: fixed; inset: var(--ov-sh-bar-h) 0 0 0; z-index: 999; background: rgba(0, 0, 0, .3); }
  body.ov-shell-compact .ov-sh-nav .ov-sh-item { justify-content: flex-start; padding: 8px 10px; gap: 10px; width: 100%; height: auto; margin: 0; }
  body.ov-shell-compact .ov-sh-nav .ov-sh-label, body.ov-shell-compact .ov-sh-nav .ov-sh-caret { display: inline; }
  body.ov-shell-compact .ov-sh-nav .ov-sh-group.open .ov-sh-children { display: block; }
  body.ov-shell-compact .ov-sh-nav .ov-sh-badge { position: static; }
  .ov-sh-collapse { display: none; }
}