/* Texxai — sistema visual
   Concepto: consola de operaciones sobria, densa cuando hace falta, con los
   identificadores técnicos (settingDefinitionId, OMA-URI, cron) en monoespaciada.
   Tres navegaciones (barra lateral, barra superior, raíl compacto) comparten tokens. */

:root {
  /* Neutros fríos con sesgo azul */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --surface-3: #e4e9f1;
  --border: #d9dfe8;
  --border-strong: #c3ccd9;
  --text: #162033;
  --muted: #586378;
  --faint: #8a94a6;
  /* Acento (variante «fluent» por defecto) */
  --accent: #1f5fd1;
  --accent-hover: #184fb0;
  --accent-soft: #e5edfc;
  --on-accent: #ffffff;
  /* Semánticos */
  --ok: #1a7f4b;      --ok-soft: #e3f4ea;
  --warn: #a8670e;    --warn-soft: #fbf0dc;
  --err: #c2353a;     --err-soft: #fbe6e6;
  --conf: #7d3fc4;    --conf-soft: #efe6fb;
  /* Estados en gráficos: validados para daltonismo en el orden éxito-pendiente-conflicto-error */
  --st-ok: #008a76; --st-pend: #b9780f; --st-conf: #7d3fc4; --st-err: #c2353a; --st-na: #8a94a6;
  --pend: #6b7a90;    --pend-soft: #e9edf3;
  --info: var(--accent); --info-soft: var(--accent-soft);
  --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 4px 16px rgb(16 24 40 / 6%);
  --shadow-pop: 0 12px 40px rgb(16 24 40 / 18%);
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  /* Tipografía */
  --font-ui: "Instrument Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .875rem; --fs-lg: 1rem; --fs-xl: 1.25rem; --fs-2xl: 1.625rem;
  /* Forma y ritmo */
  --radius-sm: 6px; --radius: 9px; --radius-lg: 14px;
  --space: 16px;
  --row-h: 44px;
  --nav-w: 272px;
  --rail-w: 72px;
  --header-h: 56px;
  color-scheme: light;
}

/* ---- Variantes de acento ---- */
:root[data-accent="pino"]    { --accent: #0d7563; --accent-hover: #0a5f50; --accent-soft: #ddf3ee; }
:root[data-accent="grafito"] { --accent: #a4560a; --accent-hover: #87470a; --accent-soft: #f8ecdc; }
:root[data-accent="ciruela"] { --accent: #7340b3; --accent-hover: #5f3496; --accent-soft: #efe6fa; }

/* ---- Tema oscuro ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e131b; --surface: #151b25; --surface-2: #1b2330; --surface-3: #232d3c;
    --border: #283244; --border-strong: #354156; --text: #e5eaf2; --muted: #9aa6b9; --faint: #6c788c;
    --accent: #6f9fff; --accent-hover: #8bb2ff; --accent-soft: #1b2a47; --on-accent: #0b1220;
    --ok: #49c287; --ok-soft: #15301f; --warn: #e5a948; --warn-soft: #33270f; --err: #f2777a; --err-soft: #3a1b1d;
    --conf: #b39af7; --conf-soft: #2a2240; --pend: #93a2b8; --pend-soft: #222b38;
    --st-ok: #2a9c8f; --st-pend: #b47a22; --st-conf: #8c6fdc; --st-err: #d94a50; --st-na: #6c788c;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 18px rgb(0 0 0 / 25%);
    --shadow-pop: 0 16px 48px rgb(0 0 0 / 50%);
    color-scheme: dark;
  }
  :root:not([data-theme="light"])[data-accent="pino"]    { --accent: #4fcfb5; --accent-hover: #74ddc8; --accent-soft: #112e29; }
  :root:not([data-theme="light"])[data-accent="grafito"] { --accent: #f0a54a; --accent-hover: #f6bb71; --accent-soft: #33240f; }
  :root:not([data-theme="light"])[data-accent="ciruela"] { --accent: #b893f2; --accent-hover: #caacf6; --accent-soft: #2a1f3d; }
}
:root[data-theme="dark"] {
  --bg: #0e131b; --surface: #151b25; --surface-2: #1b2330; --surface-3: #232d3c;
  --border: #283244; --border-strong: #354156; --text: #e5eaf2; --muted: #9aa6b9; --faint: #6c788c;
  --accent: #6f9fff; --accent-hover: #8bb2ff; --accent-soft: #1b2a47; --on-accent: #0b1220;
  --ok: #49c287; --ok-soft: #15301f; --warn: #e5a948; --warn-soft: #33270f; --err: #f2777a; --err-soft: #3a1b1d;
    --conf: #b39af7; --conf-soft: #2a2240; --pend: #93a2b8; --pend-soft: #222b38;
    --st-ok: #2a9c8f; --st-pend: #b47a22; --st-conf: #8c6fdc; --st-err: #d94a50; --st-na: #6c788c;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 18px rgb(0 0 0 / 25%);
  --shadow-pop: 0 16px 48px rgb(0 0 0 / 50%);
  color-scheme: dark;
}
:root[data-theme="dark"][data-accent="pino"]    { --accent: #4fcfb5; --accent-hover: #74ddc8; --accent-soft: #112e29; }
:root[data-theme="dark"][data-accent="grafito"] { --accent: #f0a54a; --accent-hover: #f6bb71; --accent-soft: #33240f; }
:root[data-theme="dark"][data-accent="ciruela"] { --accent: #b893f2; --accent-hover: #caacf6; --accent-soft: #2a1f3d; }

:root[data-density="compact"] { --row-h: 36px; --space: 12px; }

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
#ias-root { min-height: 100%; display: flex; flex-direction: column; }
#ias-root > .app, #ias-root > .auth-wrap { flex: 1; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-md)/1.5 var(--font-ui); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; text-wrap: balance; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: var(--fs-2xl); letter-spacing: -.02em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0; }
a { color: var(--accent); }
code, .mono { font-family: var(--font-mono); font-size: .92em; }
code { overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.svg-icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; }
.svg-icon.lg { width: 22px; height: 22px; }
.svg-icon.xl { width: 32px; height: 32px; stroke-width: 1.5; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.stack { display: flex; flex-direction: column; gap: var(--space); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* =================================================================== shell */
.app { display: grid; min-height: 100%; grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-rows: var(--header-h) 1fr; }
.app > .nav { grid-row: 1 / span 2; }
.app > .header { grid-column: 2; }
.app > .main { grid-column: 2; min-width: 0; }

.nav { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column;
  position: sticky; top: env(safe-area-inset-top, 0px); height: 100vh; height: 100dvh; z-index: 30; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 18px; height: var(--header-h); flex: none;
  font-weight: 600; letter-spacing: -.01em; text-decoration: none; color: var(--text); }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); flex: none; }
.brand-mark svg { width: 18px; height: 18px; stroke-width: 2; }
.brand small { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.nav-scroll { overflow-y: auto; padding: 8px 10px 16px; flex: 1; }
/* Áreas: cabecera desplegable con subramas y páginas */
.nav-area { margin-top: 2px; }
.nav-area.solo { margin-bottom: 6px; }
.nav-area-head { width: 100%; display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border: 0; background: none; cursor: pointer;
  color: var(--text); font: inherit; font-weight: 600; text-align: left; border-radius: var(--radius-sm); }
.nav-area-head:hover { background: var(--surface-2); }
.nav-area-head > .svg-icon:first-child { color: var(--muted); }
.nav-area-head > .svg-icon:last-child { margin-left: auto; width: 14px; height: 14px; color: var(--faint); transition: transform .15s; flex: none; }
.nav-area-head .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-area-head .area-count { margin-left: auto; }
.nav-area-head .area-count + .svg-icon { margin-left: 6px; }
.nav-area.collapsed > .nav-area-head > .svg-icon:last-child { transform: rotate(-90deg); }
.nav-area.has-active > .nav-area-head, .nav-area.has-active > .nav-area-head > .svg-icon:first-child { color: var(--accent); }
.nav-area-body { margin: 2px 0 8px 17px; padding-left: 6px; border-left: 1px solid var(--border); }
.nav-area-body .nav-link .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nav-area.collapsed > .nav-area-body { display: none; }
.nav-area:not(.collapsed) .area-count { display: none; }
.nav-area-desc { display: none; }
.nav-sub + .nav-sub { margin-top: 6px; }
.nav-sub-label { padding: 6px 10px 3px; font-size: var(--fs-xs); color: var(--faint); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.nav-area-body .nav-link { height: 34px; }
.nav-area-body .nav-link.active::before { left: -7px; }
.nav-link { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--muted); font-weight: 500; position: relative; }
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.active { background: var(--accent-soft); color: var(--accent); }
.nav-link.active::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav-link .count { margin-left: auto; font-size: var(--fs-xs); background: var(--surface-3); color: var(--muted);
  border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.nav-foot { border-top: 1px solid var(--border); padding: 10px; }
.tenant-switch { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; text-align: left; }
.tenant-switch:hover { border-color: var(--border-strong); }
.tenant-switch .grow small { display: block; font-size: var(--fs-xs); color: var(--muted); }

.header { display: flex; align-items: center; gap: 12px; padding: 0 24px; height: var(--header-h);
  border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-sm); min-width: 0; }
.crumbs strong { color: var(--text); font-weight: 600; }
.search-trigger { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px;
  min-width: 220px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface);
  color: var(--faint); cursor: pointer; }
.search-trigger kbd { margin-left: auto; font: 500 var(--fs-xs) var(--font-mono); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; color: var(--muted); }
.header .menu-btn { display: none; }
.main { padding: 24px; padding-bottom: 64px; }
.page { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head p { color: var(--muted); max-width: 70ch; margin-top: 4px; }

/* ---- Variante: barra superior (cada área es un menú con sus subramas en columnas) ---- */
:root[data-layout="topbar"] .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
:root[data-layout="topbar"] .app > .nav { grid-row: 1; height: auto; flex-direction: row; align-items: center;
  border-right: 0; border-bottom: 1px solid var(--border); background: var(--text); color: var(--bg); }
:root[data-layout="topbar"] .app > .header { grid-column: 1; grid-row: 2; top: 0; }
:root[data-layout="topbar"] .app > .main { grid-column: 1; grid-row: 3; }
:root[data-layout="topbar"] .brand { color: var(--bg); }
:root[data-layout="topbar"] .brand small { color: color-mix(in srgb, var(--bg) 60%, transparent); }
:root[data-layout="topbar"] .nav-scroll { display: flex; align-items: center; gap: 2px; padding: 0 8px; overflow: visible; flex: 1; min-width: 0; flex-wrap: wrap; }
:root[data-layout="topbar"] .nav-area { position: relative; margin: 0; }
:root[data-layout="topbar"] .nav-area.solo .nav-link, :root[data-layout="topbar"] .nav-area-head { height: var(--header-h); padding: 0 10px; border-radius: 0; white-space: nowrap;
  color: color-mix(in srgb, var(--bg) 72%, transparent); font-weight: 500; font-size: var(--fs-md); background: none; }
:root[data-layout="topbar"] .nav-area.solo { margin: 0; }
:root[data-layout="topbar"] .nav-area.solo .nav-link.active::before { display: none; }
:root[data-layout="topbar"] .nav-area-head > .svg-icon:first-child { color: inherit; }
:root[data-layout="topbar"] .nav-area-head > .svg-icon:last-child { transform: none !important; color: inherit; margin-left: 2px; }
:root[data-layout="topbar"] .nav-area-head .area-count { display: none; }
:root[data-layout="topbar"] .nav-area-head:hover, :root[data-layout="topbar"] .nav-area.pop > .nav-area-head,
:root[data-layout="topbar"] .nav-area.solo .nav-link:hover { color: var(--bg); background: color-mix(in srgb, var(--bg) 10%, transparent); }
:root[data-layout="topbar"] .nav-area.has-active > .nav-area-head, :root[data-layout="topbar"] .nav-area.solo .nav-link.active { color: var(--bg); box-shadow: inset 0 -3px 0 var(--accent); }
:root[data-layout="topbar"] .nav-area-body { display: none !important; position: absolute; top: 100%; left: 0; margin: 0; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 10px; z-index: 40;
  flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; width: max-content; max-width: min(960px, calc(100vw - 32px)); }
:root[data-layout="topbar"] .nav-area.pop > .nav-area-body { display: flex !important; }
:root[data-layout="topbar"] .nav-area:nth-last-child(-n+4) > .nav-area-body { left: auto; right: 0; }
:root[data-layout="topbar"] .nav-area-desc { display: block; flex: 0 0 100%; margin: 0 0 4px; padding: 0 10px 8px; color: var(--muted);
  font-size: var(--fs-sm); border-bottom: 1px solid var(--border); max-width: none; white-space: normal; }
:root[data-layout="topbar"] .nav-sub { margin: 0 !important; min-width: 200px; }
:root[data-layout="topbar"] .nav-area-body .nav-link .label { overflow: visible; text-overflow: clip; }
:root[data-layout="topbar"] .nav-area-body .nav-link { color: var(--muted); height: 36px; border-radius: var(--radius-sm); padding: 0 10px; white-space: nowrap; }
:root[data-layout="topbar"] .nav-area-body .nav-link:hover { background: var(--surface-2); color: var(--text); }
:root[data-layout="topbar"] .nav-area-body .nav-link.active { background: var(--accent-soft); color: var(--accent); }
:root[data-layout="topbar"] .nav-area-body .nav-link.active::before { display: none; }
:root[data-layout="topbar"] .nav-link .count { display: none; }
:root[data-layout="topbar"] .nav-foot { border: 0; margin-left: auto; padding: 0 12px; }
:root[data-layout="topbar"] .tenant-switch { background: color-mix(in srgb, var(--bg) 10%, transparent);
  border-color: color-mix(in srgb, var(--bg) 20%, transparent); color: var(--bg); width: auto; }
:root[data-layout="topbar"] .tenant-switch small { color: color-mix(in srgb, var(--bg) 60%, transparent); }
@media (min-width: 861px) and (max-width: 1720px) {
  :root[data-layout="topbar"] .nav-area-head .label { font-size: 0; }
  :root[data-layout="topbar"] .nav-area-head .label::after { content: attr(data-short); font-size: var(--fs-md); }
  :root[data-layout="topbar"] .nav-area-head, :root[data-layout="topbar"] .nav-area.solo .nav-link { padding: 0 8px; }
  :root[data-layout="topbar"] .tenant-switch { max-width: 210px; }
  :root[data-layout="topbar"] .tenant-switch .grow { min-width: 0; }
  :root[data-layout="topbar"] .tenant-switch .grow > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 861px) and (max-width: 1500px) {
  :root[data-layout="topbar"] .nav-area-head > .svg-icon:first-child, :root[data-layout="topbar"] .nav-area.solo .nav-link > .svg-icon { display: none; }
}

/* ---- Variante: raíl compacto (iconos de área; las páginas del área activa debajo) ---- */
:root[data-layout="rail"] .app { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
:root[data-layout="rail"] .brand { justify-content: center; padding: 0; }
:root[data-layout="rail"] .brand > span, :root[data-layout="rail"] .nav-sub-label, :root[data-layout="rail"] .nav-area-head > .svg-icon:last-child,
:root[data-layout="rail"] .nav-link .count, :root[data-layout="rail"] .tenant-switch .grow,
:root[data-layout="rail"] .tenant-switch > .svg-icon:last-child { display: none; }
:root[data-layout="rail"] .nav-scroll { padding: 8px; }
:root[data-layout="rail"] .nav-area { margin: 0; }
:root[data-layout="rail"] .nav-area-head, :root[data-layout="rail"] .nav-link { flex-direction: column; justify-content: center; height: 52px; gap: 3px; padding: 0;
  font-size: 10.5px; text-align: center; line-height: 1.1; font-weight: 500; }
:root[data-layout="rail"] .nav-area-head .label, :root[data-layout="rail"] .nav-link .label { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0; }
:root[data-layout="rail"] .nav-area-head .label::after, :root[data-layout="rail"] .nav-link .label::after { content: attr(data-short); font-size: 11px; }
:root[data-layout="rail"] .nav-area-head { position: relative; }
:root[data-layout="rail"] .nav-area-head .area-count { position: absolute; top: 4px; right: 6px; margin: 0; font-size: 10px; padding: 0 5px;
  background: var(--err); color: #fff; border-radius: 999px; }
:root[data-layout="rail"] .nav-area-body { display: none; margin: 0 0 6px; padding: 4px 0 0; border-left: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--surface-2); border-radius: var(--radius-sm); }
:root[data-layout="rail"] .nav-area.has-active > .nav-area-body { display: block; }
:root[data-layout="rail"] .nav-area.has-active .area-count { display: none; }
:root[data-layout="rail"] .nav-area-body .nav-link { height: 48px; }
:root[data-layout="rail"] .nav-link.active::before { left: -8px; }
:root[data-layout="rail"] .tenant-switch { justify-content: center; padding: 8px 0; }

/* ---- Móvil: todas las variantes pasan a cajón lateral ---- */
@media (max-width: 860px) {
  .app, :root[data-layout] .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--header-h) 1fr; }
  .app > .header, :root[data-layout] .app > .header { grid-column: 1; grid-row: 1; padding: 0 16px; top: env(safe-area-inset-top, 0px); }
  .app > .main, :root[data-layout] .app > .main { grid-column: 1; grid-row: 2; padding: 16px; padding-bottom: 72px; }
  .app > .nav, :root[data-layout] .app > .nav {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100%; transform: translateX(-102%);
    transition: transform .22s ease; box-shadow: var(--shadow-pop); flex-direction: column; align-items: stretch;
    background: var(--surface); color: var(--text); border-right: 1px solid var(--border);
    padding-top: env(safe-area-inset-top, 0px);
  }
  :root[data-layout] .brand, :root[data-layout] .nav-link { color: var(--text); }
  :root[data-layout] .brand { justify-content: flex-start; padding: 0 18px; }
  :root[data-layout] .brand > span { display: block; }
  :root[data-layout] .nav-scroll { display: block; overflow-y: auto; padding: 8px 10px; }
  :root[data-layout] .nav-area { position: static; margin: 2px 0 0; }
  :root[data-layout] .nav-area-head { flex-direction: row; justify-content: flex-start; height: 42px; padding: 0 10px; color: var(--text);
    font-weight: 600; font-size: var(--fs-md); background: none; box-shadow: none !important; border-radius: var(--radius-sm); text-align: left; }
  :root[data-layout] .nav-area-head .label { font-size: inherit; max-width: none; }
  :root[data-layout] .nav-area-head .label::after { content: none; }
  :root[data-layout] .nav-area-head > .svg-icon:last-child { display: block; margin-left: auto; transform: none; }
  :root[data-layout] .nav-area.collapsed > .nav-area-head > .svg-icon:last-child { transform: rotate(-90deg); }
  :root[data-layout] .nav-area-head .area-count { position: static; display: inline-block; }
  :root[data-layout] .nav-area:not(.collapsed) .area-count { display: none; }
  :root[data-layout] .nav-area-body { display: block !important; position: static; box-shadow: none; border: 0; border-left: 1px solid var(--border);
    margin: 2px 0 8px 18px; padding: 0 0 0 8px; background: none; border-radius: 0; }
  :root[data-layout] .nav-area.collapsed > .nav-area-body { display: none !important; }
  :root[data-layout] .nav-area-desc { display: none !important; }
  :root[data-layout] .nav-sub-label { display: block; }
  :root[data-layout] .nav-link .label { font-size: inherit; max-width: none; }
  :root[data-layout] .nav-link .label::after { content: none; }
  :root[data-layout] .nav-link { flex-direction: row; justify-content: flex-start; height: 42px; padding: 0 10px;
    font-size: var(--fs-md); border-radius: var(--radius-sm); color: var(--muted); }
  :root[data-layout] .nav-link.active { background: var(--accent-soft); color: var(--accent); }
  :root[data-layout] .nav-link.active::before { left: -10px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  :root[data-layout] .nav-foot { margin: 0; border-top: 1px solid var(--border); padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  :root[data-layout] .tenant-switch { width: 100%; justify-content: flex-start; background: var(--surface-2); color: var(--text); border-color: var(--border); }
  :root[data-layout] .tenant-switch .grow { display: block; }
  :root[data-layout] .tenant-switch small { color: var(--muted); }
  body.nav-open .app > .nav, :root[data-layout] body.nav-open .app > .nav { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgb(8 12 20 / 45%); z-index: 25; }
  .header .menu-btn { display: inline-flex; }
  .search-trigger { min-width: 0; width: 38px; padding: 0; justify-content: center; }
  .search-trigger .label, .search-trigger kbd { display: none; }
  .crumbs .crumb-parent { display: none; }
  .crumbs { flex: 1 1 auto; overflow: hidden; }
  .crumbs strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============================================================= componentes */
.btn { --b-bg: var(--surface); --b-fg: var(--text); --b-bd: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg);
  font-weight: 600; font-size: var(--fs-md); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .12s, border-color .12s, transform .06s; }
.btn:hover { --b-bg: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { --b-bg: var(--accent); --b-fg: var(--on-accent); --b-bd: var(--accent); }
.btn.primary:hover { --b-bg: var(--accent-hover); --b-bd: var(--accent-hover); }
.btn.soft { --b-bg: var(--accent-soft); --b-fg: var(--accent); --b-bd: transparent; }
.btn.soft:hover { --b-bd: color-mix(in srgb, var(--accent) 30%, transparent); }
.btn.ghost { --b-bg: transparent; --b-bd: transparent; --b-fg: var(--muted); }
.btn.ghost:hover { --b-bg: var(--surface-2); --b-fg: var(--text); }
.btn.danger { --b-bg: var(--err); --b-fg: #fff; --b-bd: var(--err); }
.btn.danger-outline { --b-fg: var(--err); --b-bd: color-mix(in srgb, var(--err) 45%, transparent); }
.btn.danger-outline:hover { --b-bg: var(--err-soft); }
.btn.sm { height: 30px; padding: 0 10px; font-size: var(--fs-sm); gap: 5px; }
.btn.lg { height: 44px; padding: 0 20px; font-size: var(--fs-lg); }
.btn.icon { width: 36px; padding: 0; }
.btn.icon.sm { width: 30px; }
.btn .spinner { width: 14px; height: 14px; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.btn-group .btn + .btn { margin-left: -1px; }
.split { display: inline-flex; }
.split .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.split .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 1px solid color-mix(in srgb, var(--on-accent) 30%, transparent); width: 32px; padding: 0; }
.fab { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; border-radius: 16px;
  box-shadow: var(--shadow-pop); z-index: 15; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-head h3 { font-size: var(--fs-md); }
.card-body { padding: 18px; }
.card-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.panel { background: var(--surface-2); border-radius: var(--radius); padding: 14px 16px; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid.kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.grid > * { min-width: 0; }

.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.kpi .value { font-size: 1.875rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .value small { font-size: var(--fs-md); color: var(--muted); font-weight: 500; letter-spacing: 0; }
.kpi .delta { font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi .meter { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; display: flex; }
.kpi .meter > span { display: block; height: 100%; }

/* chips, badges y estados */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.err { background: var(--err-soft); color: var(--err); }
.badge.info { background: var(--accent-soft); color: var(--accent); }
.badge.outline { background: transparent; border: 1px solid var(--border-strong); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-sm); max-width: 100%; }
.chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button { border: 0; background: none; padding: 2px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--muted); }
.chip button:hover { background: var(--surface-3); color: var(--text); }
.chip.exclude { border-style: dashed; color: var(--err); }
.chip.static { padding-right: 10px; }
.kind { font: 600 10.5px/1 var(--font-mono); letter-spacing: .02em; padding: 4px 6px; border-radius: 4px;
  background: var(--surface-3); color: var(--muted); text-transform: uppercase; }
.kind.catalog { background: var(--accent-soft); color: var(--accent); }
.kind.oma { background: var(--warn-soft); color: var(--warn); }

/* formularios */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-size: var(--fs-sm); font-weight: 600; }
.field .help { font-size: var(--fs-xs); color: var(--muted); }
.field .error-text { font-size: var(--fs-xs); color: var(--err); }
.input, .select, .textarea { width: 100%; height: 36px; padding: 0 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); transition: border-color .12s, box-shadow .12s; min-width: 0; }
.textarea { height: auto; min-height: 84px; padding: 9px 11px; resize: vertical; line-height: 1.45; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.input.mono, .textarea.mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.input.invalid { border-color: var(--err); }
.input-icon { position: relative; }
.input-icon > .svg-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.input-icon > .input { padding-left: 34px; }
.form-grid { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.form-grid .span-all { grid-column: 1 / -1; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { appearance: none; width: 36px; height: 20px; border-radius: 999px; background: var(--border-strong);
  position: relative; cursor: pointer; transition: background .15s; flex: none; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgb(0 0 0 / 25%); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(16px); }
.check { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); flex-wrap: wrap; }
.segmented button { border: 0; background: transparent; height: 30px; padding: 0 12px; border-radius: 6px; font-weight: 600;
  font-size: var(--fs-sm); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.segmented button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.radio-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.radio-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.radio-card input { margin-top: 3px; accent-color: var(--accent); }
.radio-card small { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }

/* tablas */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.table th { text-align: left; font-weight: 600; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .05em; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.table td { padding: 0 12px; height: var(--row-h); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.table tr.is-off td { opacity: .5; }
.table tr.has-error td:first-child { box-shadow: inset 3px 0 0 var(--err); }
.table tr.has-warning td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.table .mono { font-size: var(--fs-xs); }
.table .id-cell { max-width: 360px; }
.table td.actions { text-align: right; white-space: nowrap; }
.table .inline-input { height: 30px; font-size: var(--fs-sm); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.toolbar .input-icon { flex: 1; min-width: 200px; max-width: 360px; }

/* pestañas */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button, .tabs a { border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; text-decoration: none; }
.tabs .on { color: var(--accent); border-bottom-color: var(--accent); }

/* asistente */
.stepper { display: flex; gap: 0; counter-reset: step; overflow-x: auto; }
.stepper .step { flex: 1; min-width: 150px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; position: relative;
  border-bottom: 3px solid var(--border); color: var(--muted); background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; text-align: left; }
.stepper .step .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
  background: var(--surface-3); color: var(--muted); flex: none; }
.stepper .step strong { display: block; color: inherit; font-size: var(--fs-sm); }
.stepper .step small { display: block; font-size: var(--fs-xs); color: var(--faint); }
.stepper .step.done { border-bottom-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }
.stepper .step.done .n { background: var(--accent-soft); color: var(--accent); }
.stepper .step.current { border-bottom-color: var(--accent); color: var(--text); }
.stepper .step.current .n { background: var(--accent); color: var(--on-accent); }
.stepper .step[disabled] { cursor: default; }

.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 36px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .svg-icon { color: var(--accent); }

.profile-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); display: flex; flex-direction: column; min-width: 0; }
.profile-card.off { opacity: .55; }
.profile-card.issue { border-color: color-mix(in srgb, var(--err) 50%, var(--border)); }
.profile-card header { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 8px; }
.profile-card .name-input { font-weight: 600; font-size: var(--fs-lg); height: 38px; }
.profile-card .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.profile-card .settings-list { border-top: 1px solid var(--border); padding: 8px 16px; max-height: 190px; overflow: auto; }
.profile-card .settings-list li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: var(--fs-sm); min-width: 0; }
.profile-card .settings-list ul { list-style: none; margin: 0; padding: 0; }
.profile-card .settings-list .v { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card footer { border-top: 1px solid var(--border); padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }

.name-preview { font-family: var(--font-mono); font-size: var(--fs-sm); background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; overflow-wrap: anywhere; }

/* resultados y registros */
.result-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.result-row:last-child { border-bottom: 0; }
.result-row .grow strong { display: block; }
.status-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.status-icon.ok { background: var(--ok-soft); color: var(--ok); }
.status-icon.err { background: var(--err-soft); color: var(--err); }
.status-icon.warn { background: var(--warn-soft); color: var(--warn); }
.status-icon.info { background: var(--accent-soft); color: var(--accent); }
.log { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--surface-2); border-radius: var(--radius); padding: 10px 0; max-height: 460px; overflow: auto; }
.log-line { display: grid; grid-template-columns: 72px 92px 1fr; gap: 10px; padding: 3px 14px; }
.log-line .ts { color: var(--faint); }
.log-line .st { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.log-line.error { background: var(--err-soft); color: var(--err); }
.log-line.warning { color: var(--warn); }
.log-line.success .msg { color: var(--ok); }
pre.code { margin: 0; font: var(--fs-xs)/1.55 var(--font-mono); background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; overflow: auto; max-height: 420px; white-space: pre; }

/* flujos */
.wf-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.wf-card .steps-mini { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.wf-card .steps-mini .s { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
.wf-card .steps-mini .arrow { color: var(--faint); }
.trigger-line { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--muted); }
.step-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.step-card > header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.step-card .step-n { font: 600 var(--fs-xs) var(--font-mono); background: var(--surface-3); border-radius: 5px; padding: 3px 6px; color: var(--muted); }
.step-card .step-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.step-card .step-ico.danger { background: var(--err-soft); color: var(--err); }
.step-card > .body { padding: 14px; }
.connector { width: 2px; height: 18px; background: var(--border-strong); margin: 0 auto; }
.palette-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.palette-item { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.palette-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.palette-item small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; margin-top: 2px; }

/* gráficos */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr 40px; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.bar-row .track { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 5px; background: var(--accent); }
.bar-row .fill.warn { background: var(--warn); }
.bar-row .fill.err { background: var(--err); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* superposiciones */
.modal-back { position: fixed; inset: 0; background: rgb(8 12 20 / 50%); display: grid; place-items: center; z-index: 60; padding: 16px; }
.modal { width: min(560px, 100%); max-height: calc(100% - 32px); overflow: auto; background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop); border: 1px solid var(--border); display: flex; flex-direction: column; }
.modal.wide { width: min(880px, 100%); }
.modal > header { padding: 18px 20px 6px; display: flex; gap: 12px; align-items: flex-start; }
.modal > .body { padding: 10px 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.modal > footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.drawer-back { position: fixed; inset: 0; background: rgb(8 12 20 / 40%); z-index: 55; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100%); background: var(--surface); z-index: 56; box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }
.drawer > header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.drawer > .body { padding: 20px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; }
.drawer > .body > * { flex-shrink: 0; }
.toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; z-index: 80; max-width: calc(100% - 32px); }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: var(--text); color: var(--bg);
  box-shadow: var(--shadow-pop); min-width: 260px; max-width: 420px; animation: toast-in .2s ease; font-size: var(--fs-sm); }
.toast.ok .svg-icon { color: var(--ok-soft); }
.toast.err { background: var(--err); color: #fff; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
.palette { width: min(620px, 100%); align-self: start; margin-top: 10vh; }
.palette .input { height: 48px; font-size: var(--fs-lg); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none !important; }
.palette ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.palette li button { width: 100%; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.palette li button:hover, .palette li button.sel { background: var(--accent-soft); color: var(--accent); }
.palette li small { margin-left: auto; color: var(--faint); font-size: var(--fs-xs); }

.empty { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); }
.empty .ill { width: 64px; height: 64px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.empty h3 { color: var(--text); }
.callout { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--accent-soft); color: var(--text); font-size: var(--fs-sm); align-items: flex-start; }
.callout > .svg-icon { color: var(--accent); margin-top: 1px; }
.callout.warn { background: var(--warn-soft); } .callout.warn > .svg-icon { color: var(--warn); }
.callout.err { background: var(--err-soft); } .callout.err > .svg-icon { color: var(--err); }
.callout.ok { background: var(--ok-soft); } .callout.ok > .svg-icon { color: var(--ok); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: spin .7s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* login */
.auth-wrap { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-side { background: var(--text); color: var(--bg); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; overflow: hidden; position: relative; }
.auth-side h1 { font-size: 2.4rem; max-width: 16ch; text-wrap: balance; }
.auth-side p { color: color-mix(in srgb, var(--bg) 70%, transparent); max-width: 46ch; }
.auth-foot { display: flex; flex-direction: column; gap: 18px; }
.auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); }
.auth-points li { display: flex; gap: 10px; align-items: flex-start; color: color-mix(in srgb, var(--bg) 82%, transparent); max-width: 52ch; }
.auth-points .svg-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.auth-side .auth-note { font-size: var(--fs-xs); letter-spacing: .02em; color: color-mix(in srgb, var(--bg) 50%, transparent);
  padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--bg) 14%, transparent); max-width: none; }
.auth-form { display: grid; place-items: center; padding: 32px 16px; }
.auth-form form { width: min(380px, 100%); display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { padding: 28px 20px; } .auth-side h1 { font-size: 1.7rem; } .auth-foot { display: none; } }

/* galería de diseño */
.swatch { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); }
.swatch i { height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; }
.icon-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.icon-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: var(--radius); font-size: 10.5px; color: var(--muted); font-family: var(--font-mono); text-align: center; overflow-wrap: anywhere; }
.icon-cell:hover { background: var(--surface-2); color: var(--text); }
.nav-preview { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; height: 150px; display: grid; background: var(--bg); }
.nav-preview .np-side { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; }
.nav-preview .np-top { background: var(--text); display: flex; gap: 6px; padding: 8px; align-items: center; }
.nav-preview i { display: block; height: 8px; border-radius: 4px; background: var(--surface-3); }
.nav-preview i.a { background: var(--accent); }
.nav-preview .np-top i { background: color-mix(in srgb, var(--bg) 25%, transparent); width: 28px; }
.nav-preview .np-top i.a { background: var(--accent); }
.nav-preview .np-main { padding: 10px; display: grid; gap: 6px; align-content: start; }
.nav-preview .np-main i { height: 22px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); }
.demo-banner { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--warn); background: var(--warn-soft); border-radius: 999px; padding: 3px 10px; }

.editor-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
.editor-grid > * { min-width: 0; }
@media (max-width: 1080px) { .editor-grid { grid-template-columns: minmax(0, 1fr); } }

.menu { min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 6px; display: flex; flex-direction: column; }
.menu button { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; text-align: left; font-size: var(--fs-sm); }
.menu button:hover { background: var(--surface-2); }
.menu button.danger { color: var(--err); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }

/* ===================================================== v2: análisis e informes */
.badge.conf { background: var(--conf-soft); color: var(--conf); }
.badge.pend { background: var(--pend-soft); color: var(--pend); }
.sev-alta { --sev: var(--err); } .sev-media { --sev: var(--conf); } .sev-baja { --sev: var(--warn); } .sev-info { --sev: var(--faint); }
.finding { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; box-shadow: inset 4px 0 0 var(--sev, var(--border)); }
.finding.ignored { opacity: .6; }
.finding > header { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 10px 20px; flex-wrap: wrap; }
.finding > header .grow h3 { font-size: var(--fs-md); }
.finding .why { padding: 0 16px 10px 20px; font-size: var(--fs-sm); color: var(--muted); }
.finding .occ { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.finding .occ td { padding: 9px 12px; border-top: 1px solid var(--border); vertical-align: middle; }
.finding .occ td:first-child { padding-left: 20px; }
.finding .occ .val { font-family: var(--font-mono); font-size: var(--fs-xs); padding: 3px 8px; border-radius: 5px; background: var(--surface-2); display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.finding .occ .val.minor { background: var(--conf-soft); color: var(--conf); font-weight: 600; }
.finding .occ .val.major { background: var(--ok-soft); color: var(--ok); }
.finding .occ td.acts { text-align: right; white-space: nowrap; }
.occ-wrap { overflow-x: auto; }
.sevdot { width: 10px; height: 10px; border-radius: 50%; background: var(--sev); display: inline-block; flex: none; }
.stack-bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-2); min-width: 80px; }
.stack-bar > span { display: block; height: 100%; }
.stack-bar.lg { height: 16px; border-radius: 8px; }
.st-succeeded { background: var(--st-ok); } .st-error { background: var(--st-err); } .st-conflict { background: var(--st-conf); }
.st-pending { background: var(--st-pend); } .st-unknown, .st-not_applicable { background: var(--st-na); }
.stack-bar > span:first-child { border-radius: 5px 0 0 5px; } .stack-bar > span:last-child { border-radius: 0 5px 5px 0; }
.hm { border-collapse: separate; border-spacing: 3px; font-size: var(--fs-xs); }
.hm th { font-weight: 500; color: var(--muted); padding: 2px 4px; white-space: nowrap; }
.hm th.col { writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; max-height: 170px; overflow: hidden; text-overflow: ellipsis; height: 170px; vertical-align: bottom; }
.hm th.rowh { text-align: left; font-family: var(--font-mono); position: sticky; left: 0; background: var(--surface); z-index: 1; }
.hm td.cell { width: 22px; height: 22px; min-width: 22px; border-radius: 5px; cursor: pointer; padding: 0; }
.hm td.cell.none { background: var(--surface-2); cursor: default; }
.hm td.cell:not(.none):hover { outline: 2px solid var(--text); outline-offset: 1px; }
.ov-cell { min-width: 44px; height: 38px; text-align: center; border-radius: 6px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.ov-cell.self { background: var(--surface-2); color: var(--faint); cursor: default; font-weight: 400; }
.ov-cell.zero { color: var(--faint); font-weight: 400; cursor: default; }
.ov-cell.dup { background: var(--accent-soft); color: var(--accent); }
.ov-cell.conf { background: var(--conf-soft); color: var(--conf); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--conf) 45%, transparent); }
.cmp-row.different td { background: color-mix(in srgb, var(--conf-soft) 55%, transparent); }
.cmp-row .v { font-family: var(--font-mono); font-size: var(--fs-xs); }
.trend svg { width: 100%; height: auto; display: block; }
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li { display: flex; gap: 10px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--border); min-width: 0; }
.mini-list li:first-child { border-top: 0; }
.mini-list li.click { cursor: pointer; }
.mini-list li.click:hover { background: var(--surface-2); }
.pol-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(90px, 1.3fr) 56px; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--border); cursor: pointer; }
.pol-row:hover { background: var(--surface-2); }
.pol-row:first-child { border-top: 0; }
.expander { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.expander > button { width: 100%; display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--surface); border: 0; cursor: pointer; text-align: left; }
.expander > button:hover { background: var(--surface-2); }
.expander > .inner { border-top: 1px solid var(--border); }
.big-rate { font-size: 2.6rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ===================================================== v3: ramas */
.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 16px; font-size: var(--fs-sm); margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.progress { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .4s ease; }
.progress.lg { height: 12px; border-radius: 6px; }
.progress.ok > span { background: var(--st-ok); } .progress.warn > span { background: var(--st-pend); } .progress.err > span { background: var(--st-err); }
.menu-wrap { position: relative; display: inline-flex; }
.menu-wrap > .menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; }
.score-ring { position: relative; width: 120px; height: 120px; flex: none; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring .v { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-weight: 700; font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.score-ring .v small { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; margin-top: 4px; }
.svc-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.svc-card { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 6px; cursor: pointer; text-align: left; }
.svc-card:hover { border-color: var(--border-strong); }
.svc-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.svc-card .n { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.svc-card .v { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.check-row { border-top: 1px solid var(--border); }
.check-row:first-child { border-top: 0; }
.check-row > button { width: 100%; display: grid; grid-template-columns: 18px 64px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 18px;
  border: 0; background: none; cursor: pointer; text-align: left; }
.check-row > button:hover { background: var(--surface-2); }
.check-row .body { padding: 4px 18px 16px 112px; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); }
.check-row .sid { font: 600 var(--fs-xs) var(--font-mono); color: var(--muted); }
.sev-pill { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); white-space: nowrap; }
.sev-pill::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--sev, var(--faint)); vertical-align: 0; }
.src-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; text-align: left; }
.src-card:hover { border-color: var(--accent); }
.src-card.on { border-color: var(--accent); background: var(--accent-soft); }
.src-card small { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 3px; line-height: 1.4; }
.wave-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.file-list { display: flex; flex-direction: column; gap: 2px; }
.file-list button { display: flex; gap: 8px; align-items: center; border: 0; background: none; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; font: var(--fs-sm) var(--font-mono); color: var(--muted); }
.file-list button:hover { background: var(--surface-2); color: var(--text); }
.file-list button.on { background: var(--accent-soft); color: var(--accent); }
.split-pane { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .split-pane { grid-template-columns: minmax(0, 1fr); } .check-row .body { padding-left: 18px; } .check-row > button { grid-template-columns: 18px minmax(0, 1fr) auto; } .check-row > button .sid, .check-row > button .sev-pill { display: none; } }
.wizard-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.wizard-steps span { font-size: var(--fs-xs); padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 600; }
.wizard-steps span.on { background: var(--accent); color: var(--on-accent); }
.wizard-steps span.done { background: var(--accent-soft); color: var(--accent); }
.rule-row { display: grid; gap: 8px; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: start; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); }
@media (max-width: 700px) { .rule-row { grid-template-columns: minmax(0, 1fr); } }
.branch-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.branch { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
.branch:hover { border-color: var(--accent); transform: translateY(-1px); }
.branch .head { display: flex; gap: 10px; align-items: center; }
.branch .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.branch .metric { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.branch .sub { font-size: var(--fs-sm); color: var(--muted); }
.branch .links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.tl { width: 100%; }
.tl text { font-family: var(--font-ui); }
.storage { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-2); }
.storage span { background: var(--accent); }
.shadow-report { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; max-height: 70vh; overflow: auto; }
@media (min-width: 900px) { .tabs.wrap { flex-wrap: wrap; overflow: visible; } .tabs.wrap a, .tabs.wrap button { padding: 10px 11px; } }

/* ===================================================================== v4: agentes */
.online-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--st-na); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-na) 18%, transparent); }
.online-dot.on { background: var(--st-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-ok) 22%, transparent); }
.host-cell { display: flex; gap: 10px; align-items: center; min-width: 0; }
.host-cell .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.tagpill { font-size: 11px; line-height: 18px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; }
.mm { display: grid; grid-template-columns: 34px 54px; align-items: center; gap: 6px; font: 600 var(--fs-xs) var(--font-mono); color: var(--muted); }
.mm .bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.mm .bar > span { display: block; height: 100%; background: var(--st-ok); }
.mm.warn .bar > span { background: var(--st-pend); } .mm.err .bar > span { background: var(--st-err); } .mm.err { color: var(--st-err); }
.alert-dots { display: inline-flex; gap: 4px; }
.alert-dots i { width: 8px; height: 8px; border-radius: 2px; background: var(--st-na); display: inline-block; }
.alert-dots i.critical { background: var(--st-err); } .alert-dots i.warning { background: var(--st-pend); } .alert-dots i.info { background: var(--accent); }
.gauge-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.gauge { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.gauge .lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.gauge .val { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.gauge .val small { font-size: .8rem; color: var(--muted); font-weight: 500; }
/* Terminal remoto: siempre oscuro, en ambos temas, como una consola real. */
.term { --t-bg: #0f1419; --t-fg: #d7dde5; --t-dim: #7d8794; --t-ok: #6fd3a8; --t-err: #ff8a8a; --t-acc: #7fb0ff;
  background: var(--t-bg); color: var(--t-fg); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; min-height: 420px; border: 1px solid #222b35; }
.term .out { flex: 1; overflow: auto; padding: 14px 16px; font: 12.5px/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 58vh; }
.term .out .cmd { color: var(--t-acc); } .term .out .err { color: var(--t-err); } .term .out .meta { color: var(--t-dim); } .term .out .ok { color: var(--t-ok); }
.term form { display: flex; gap: 8px; align-items: center; border-top: 1px solid #222b35; padding: 8px 10px; background: #0b0f13; }
.term form .prompt { font: 600 12.5px var(--font-mono); color: var(--t-ok); white-space: nowrap; }
.term form input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--t-fg); font: 12.5px var(--font-mono); outline: none; padding: 6px 2px; }
.term form select { background: #151b22; color: var(--t-fg); border: 1px solid #2a3440; border-radius: 6px; font: 12px var(--font-mono); padding: 4px 6px; }
.term form button { background: #1d2a38; color: var(--t-fg); border: 1px solid #2a3440; border-radius: 6px; padding: 5px 10px; font: 600 12px var(--font-sans, inherit); cursor: pointer; }
.term form button:focus-visible, .term form input:focus-visible, .term form select:focus-visible { outline: 2px solid var(--t-acc); outline-offset: 1px; }
.script-list { display: flex; flex-direction: column; gap: 2px; }
.script-list .cat { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 700; padding: 12px 10px 4px; }
.script-list button { display: flex; gap: 10px; align-items: center; border: 0; background: none; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; color: var(--text); font: inherit; font-size: var(--fs-sm); }
.script-list button:hover { background: var(--surface-2); }
.script-list button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.target-pick { display: flex; flex-direction: column; gap: 10px; }
.target-pick .agents-box { max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 2px; }
.target-pick .agents-box label { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 6px; font: var(--fs-xs) var(--font-mono); cursor: pointer; }
.target-pick .agents-box label:hover { background: var(--surface-2); }
.job-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-2); min-width: 120px; }
.job-bar > span { display: block; height: 100%; }
.howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.howto > div { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); background: var(--surface); }
.howto strong { font-size: var(--fs-md, 1rem); }
.flow-svg { width: 100%; height: auto; max-width: 860px; }
@media (max-width: 640px) {
  .term form { flex-wrap: wrap; }
  .term form input { flex: 1 1 60%; }
  .term form select, .term form button { flex: 1 1 auto; }
  .term .out { max-height: 50vh; }
}

/* =================================================================== v0.6: componentes compartidos */
.card.kpi.click { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.card.kpi.click:hover { border-color: var(--accent); }
.card.kpi .eyebrow .svg-icon { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
.count-pill { font-size: 11px; background: var(--surface-3); color: var(--muted); border-radius: 999px; padding: 0 6px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.dt-table th { cursor: pointer; user-select: none; white-space: nowrap; }
.dt-table th .sort::after { content: "↕"; margin-left: 4px; opacity: .25; font-size: 10px; }
.dt-table th[aria-sort="ascending"] .sort::after { content: "↑"; opacity: .9; }
.dt-table th[aria-sort="descending"] .sort::after { content: "↓"; opacity: .9; }
.dt-table td { height: auto; padding-top: 8px; padding-bottom: 8px; }
.dt-table th.num, .dt-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dt-foot { padding: 8px 14px; font-size: var(--fs-xs); border-top: 1px solid var(--border); color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.src-cell { white-space: nowrap; }
.hbars { display: flex; flex-direction: column; gap: 8px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 34%) 1fr 60px; gap: 10px; align-items: center; font-size: var(--fs-sm); }
.hbar .t { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.hbar .t > span { display: block; height: 100%; border-radius: 5px; }
.hbar .v { text-align: right; }
svg.chart { width: 100%; height: auto; display: block; }
svg.spark { flex: none; }
.legend { margin-top: 8px; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px 18px; }
.kv-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv-grid > div > span { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.kv-grid > div > strong { font-weight: 500; overflow-wrap: anywhere; }
.issue-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); }
.issue-list li.click { cursor: pointer; list-style: none; margin-left: -18px; }
.tagpill.strong { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.tagpill.off { text-decoration: line-through; opacity: .6; }
.badge.acc { background: color-mix(in srgb, #7d3fc4 14%, transparent); color: #7d3fc4; }
:root[data-theme="dark"] .badge.acc { color: #b993ff; }
.code-block { display: flex; flex-direction: column; gap: 6px; }
.code-block pre.code { white-space: pre-wrap; word-break: break-word; }
.detail-table { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.detail-table .table td { height: auto; padding: 6px 10px; }
.chip-btn { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: var(--fs-xs); cursor: pointer; white-space: nowrap; }
.chip-btn:hover { color: var(--text); border-color: var(--border-strong); }
.chip-btn.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.flag { display: inline-block; font-size: 11px; line-height: 18px; padding: 0 7px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); white-space: nowrap; margin: 1px 0; }
.flag-privileged, .flag-not_required, .flag-no_preauth, .flag-reversible, .flag-delegation, .flag-cpassword, .flag-unsupported, .flag-unsupported_os, .flag-noncompliant, .flag-unencrypted { background: var(--err-soft); color: var(--err); }
.flag-disabled, .flag-ad_disabled, .flag-empty, .flag-distribution, .flag-dc, .flag-server, .flag-enforced, .flag-recent, .flag-stale { background: var(--surface-2); color: var(--muted); }
.flag-locked, .flag-alerts { background: var(--accent-soft); color: var(--accent); }

/* ---- Active Directory ---- */
.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.dc-card { cursor: pointer; transition: border-color .15s; }
.dc-card:hover { border-color: var(--accent); }
.trend-mini { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* ---- Datos ---- */
.src-pill { display: inline-block; font-size: 10.5px; line-height: 18px; padding: 0 6px; border-radius: 4px; margin-right: 3px; background: var(--surface-2); color: var(--faint); border: 1px dashed var(--border); }
.src-pill.on { background: var(--ok-soft); color: var(--ok); border: 1px solid transparent; font-weight: 600; }
.srcbox-grid { gap: 10px; }
.srcbox { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); }
.srcbox strong { display: flex; align-items: center; gap: 6px; }
.srcbox.off { opacity: .6; border-style: dashed; }
.srcbox a { margin-top: 4px; font-size: var(--fs-xs); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.timeline li { position: relative; display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-sm); }
.timeline li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.timeline .when { font-size: var(--fs-xs); color: var(--faint); }
.timeline .old { text-decoration: line-through; color: var(--muted); }
.tbl-group { padding: 10px 18px; border-top: 1px solid var(--border); }
.tbl-group:first-of-type { border-top: 0; }
.tbl-row { display: grid; grid-template-columns: 1fr 90px 80px; gap: 10px; font-size: var(--fs-sm); padding: 3px 0; }
.tbl-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.export-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.export-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.export-card:hover { border-color: var(--accent); }
.export-card > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.export-card small { color: var(--muted); font-size: var(--fs-xs); }

/* ---- Informes ---- */
.rep-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); flex: none; margin-right: 8px; vertical-align: middle; }
.rep-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 10px; padding: 14px 18px 18px; }
.rep-list.wide { padding: 0; }
.rep-card { display: flex; align-items: center; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.rep-card:hover { border-color: var(--accent); }
.rep-card > .grow { display: flex; flex-direction: column; gap: 2px; }
.rep-card .muted { font-size: var(--fs-sm); }
.rep-card > .svg-icon:last-child { color: var(--faint); }

/* ---- Soporte ---- */
.help-hero { padding: 28px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.help-hero p { color: var(--muted); max-width: 70ch; }
.help-search { max-width: 640px; margin-top: 8px; }
.help-search .input { height: 44px; font-size: var(--fs-lg); }
.search-results { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 760px; }
.search-results li { padding: 10px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); cursor: pointer; }
.search-results li:hover { border-color: var(--accent); }
.search-results p { margin: 4px 0 0; font-size: var(--fs-sm); }
.help-tile { padding: 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.help-tile:hover { border-color: var(--accent); }
.help-tile > .svg-icon { color: var(--accent); }
.doc-page { max-width: 1440px; }
.doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 200px; gap: 20px; align-items: start; }
.doc-nav { position: sticky; top: calc(var(--header-h) + 16px); padding: 12px; max-height: calc(100vh - var(--header-h) - 40px); overflow: auto; }
.doc-nav-head { display: flex; flex-direction: column; gap: 6px; padding: 4px 6px 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.doc-nav-head a { font-size: var(--fs-xs); text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
.doc-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: doc; }
.doc-nav ol a { display: block; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-size: var(--fs-sm); line-height: 1.35; }
.doc-nav ol a:hover { background: var(--surface-2); color: var(--text); }
.doc-nav ol a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.doc-nav-foot { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--border); }
.doc-main { padding: 26px 34px; min-width: 0; }
.doc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-xs); margin-bottom: 8px; }
.doc-pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.doc-toc { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 2px; }
.doc-toc .eyebrow { margin-bottom: 6px; }
.doc-toc button { border: 0; background: none; text-align: left; font: inherit; font-size: var(--fs-xs); color: var(--muted); padding: 4px 8px; border-left: 2px solid var(--border); cursor: pointer; }
.doc-toc button:hover { color: var(--accent); border-left-color: var(--accent); }
.doc-toc button.lvl3 { padding-left: 18px; }
.md { font-size: var(--fs-lg); line-height: 1.7; color: var(--text); max-width: 78ch; overflow-wrap: break-word; }
.md td:first-child, .md th:first-child { min-width: 9em; }
.md h1 { font-size: var(--fs-2xl); margin: 0 0 14px; letter-spacing: -.015em; line-height: 1.25; }
.md h2 { font-size: var(--fs-xl); margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 20px); }
.md h3 { font-size: var(--fs-lg); margin: 22px 0 8px; scroll-margin-top: calc(var(--header-h) + 20px); }
.md h4 { font-size: var(--fs-md); margin: 18px 0 6px; }
.md p { margin: 0 0 12px; }
.md ul, .md ol { margin: 0 0 14px; padding-left: 24px; }
.md li { margin: 3px 0; }
.md code { font: .86em var(--font-mono); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.md pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; overflow: auto; margin: 0 0 14px; }
.md pre code { background: none; padding: 0; font-size: var(--fs-sm); line-height: 1.55; }
.md .md-table { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.md table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.md th { text-align: left; background: var(--surface-2); padding: 8px 10px; font-weight: 600; }
.md td { padding: 8px 10px; border-top: 1px solid var(--border); vertical-align: top; }
.md blockquote { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--border-strong); background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; }
.md blockquote p:last-child { margin: 0; }
.md blockquote.info { border-color: var(--accent); background: var(--accent-soft); }
.md blockquote.warn { border-color: var(--warn); background: var(--warn-soft); }
.md blockquote.err { border-color: var(--err); background: var(--err-soft); }
.md blockquote.ok { border-color: var(--ok); background: var(--ok-soft); }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
.drawer .md { font-size: var(--fs-md); }
.drawer .md h1 { font-size: var(--fs-xl); }
.md-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.md-preview { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; max-height: 470px; overflow: auto; font-size: var(--fs-md); }

/* ---- Inicio por áreas ---- */
.area-block { display: flex; flex-direction: column; gap: 12px; }
.area-title { display: flex; align-items: center; gap: 12px; }
.area-title .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.area-title h3 { margin: 0; font-size: var(--fs-lg); }
.area-title .muted { font-size: var(--fs-sm); }

/* ---- Instalación: selector de producto ---- */
.product-switch { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.product-switch button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.product-switch button > span { display: flex; flex-direction: column; gap: 2px; }
.product-switch button small { color: var(--muted); font-size: var(--fs-xs); }
.product-switch button .svg-icon { color: var(--muted); }
.product-switch button.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft); }
.product-switch button.on .svg-icon { color: var(--accent); }

@media (max-width: 1180px) {
  .doc-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .doc-toc { display: none; }
}
@media (max-width: 860px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-nav { position: static; max-height: none; }
  .doc-main { padding: 18px; }
  .md { font-size: var(--fs-md); }
  .md-editor { grid-template-columns: 1fr; }
  .hbar { grid-template-columns: minmax(80px, 40%) 1fr 48px; }
  .help-hero { padding: 18px; }
}

.kpi .value.txt { font-size: 1.35rem; line-height: 1.25; }

/* =====================================================================================================
   v0.7 · Registro público, Comercial y Suscripción
   ===================================================================================================== */
/* ---- utilidades comunes ---- */
.badge.sm { height: 19px; padding: 0 7px; font-size: 11px; }
.chip.sm { height: 22px; padding: 0 8px; font-size: var(--fs-xs); }
.chip.on { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 500; }
.chip .svg-icon { width: 14px; height: 14px; }
.danger-text { color: var(--err) !important; }
.warn-text { color: var(--warn); font-weight: 500; }
.req { color: var(--err); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--err); box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 18%, transparent); }
.field-error { color: var(--err); font-size: var(--fs-sm); }
.form-grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.dl { display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: 6px 14px; margin: 8px 0 0; font-size: var(--fs-md); }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv-grid.compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 10px 14px; }
.chips-radio, .chips-check { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-radio label, .chips-check label { position: relative; cursor: pointer; }
.chips-radio input, .chips-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips-radio span, .chips-check span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-md); color: var(--text); transition: background .12s, border-color .12s; }
.chips-radio input:checked + span, .chips-check input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.chips-radio input:focus-visible + span, .chips-check input:focus-visible + span { box-shadow: var(--focus); }
.check-line { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; line-height: 1.45; }
.check-line input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.next-steps { list-style: none; counter-reset: ns; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.next-steps li { counter-increment: ns; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; row-gap: 1px; }
.next-steps li::before { content: counter(ns); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: var(--fs-sm); }
.next-steps li strong { font-weight: 600; }
.next-steps li span { color: var(--muted); font-size: var(--fs-sm); }
.next-steps.compact li { grid-template-columns: 24px 1fr; }
.next-steps.compact li::before { width: 24px; height: 24px; font-size: var(--fs-xs); }

/* ---- página de acceso: enlace de registro ---- */
.auth-form { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; }
.auth-signup { width: min(380px, 100%); display: flex; flex-direction: column; gap: 10px; align-items: stretch; padding-top: 18px; border-top: 1px solid var(--border); }
.auth-signup > span { color: var(--muted); font-size: var(--fs-sm); text-align: center; display: flex; flex-direction: column; gap: 2px; }
.auth-signup > span strong { color: var(--text); font-weight: 600; }
.auth-signup .btn { justify-content: center; }

/* ---- registro público ---- */
.signup { min-height: 100%; background: var(--bg); display: flex; flex-direction: column; }
.signup-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--border); background: var(--surface); }
.signup-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); text-decoration: none; }
.signup-top-link { font-size: var(--fs-sm); color: var(--muted); }
.signup-hero { max-width: 1120px; width: 100%; margin: 0 auto; padding: 36px 24px 8px; display: flex; flex-direction: column; gap: 8px; }
.signup-hero h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); line-height: 1.15; max-width: 26ch; text-wrap: balance; letter-spacing: -.01em; }
.signup-hero p { color: var(--muted); max-width: 62ch; font-size: var(--fs-lg); }
.signup-body { max-width: 1120px; width: 100%; margin: 0 auto; padding: 20px 24px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.signup-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.signup-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.signup-steps li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--muted); min-width: 0; }
.signup-steps li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.signup-steps li small { font-size: var(--fs-xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signup-steps .sn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; font-size: var(--fs-sm);
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--muted); }
.signup-steps .sn .svg-icon { width: 15px; height: 15px; }
.signup-steps li.on { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px var(--accent-soft); }
.signup-steps li.on .sn { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.signup-steps li.done .sn { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.signup-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 22px; box-shadow: var(--shadow); }
.su-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.su-group legend { font-size: var(--fs-lg); font-weight: 700; padding: 0; margin-bottom: 2px; float: left; width: 100%; }
.su-group legend + * { clear: both; }
.su-group > .muted { margin-top: -6px; font-size: var(--fs-sm); }
.su-group + .su-group { padding-top: 22px; border-top: 1px solid var(--border); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; padding-top: 6px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius); border: 1.5px solid var(--border-strong); background: var(--surface); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.plan-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.plan-card strong { font-size: var(--fs-lg); }
.plan-card .muted { font-size: var(--fs-sm); line-height: 1.45; }
.plan-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plan-card:has(input:focus-visible) { box-shadow: var(--focus); }
.plan-card.featured { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 30%, var(--conf))) border-box; border-color: transparent; }
.plan-flag { position: absolute; top: -10px; right: 12px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; }
.plan-svcs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 4px; }
.plan-svcs span { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.svc-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.svc-opt { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.svc-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.svc-opt .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.svc-opt .muted { font-size: var(--fs-sm); line-height: 1.4; }
.svc-ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--muted); }
.svc-check { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex: none; color: transparent; }
.svc-check .svg-icon { width: 14px; height: 14px; }
.svc-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.svc-opt:has(input:checked) .svc-ic { background: var(--accent); color: var(--on-accent); }
.svc-opt:has(input:checked) .svc-check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.svc-opt:has(input:focus-visible) { box-shadow: var(--focus); }
.su-group.has-error .svc-pick .svc-opt { border-color: color-mix(in srgb, var(--err) 50%, var(--border)); }
.su-group.consent { gap: 10px; }
.privacy { font-size: var(--fs-sm); color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; background: var(--surface-2); }
.privacy summary { cursor: pointer; color: var(--text); font-weight: 500; }
.privacy p { margin: 8px 0 0; line-height: 1.5; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; }
.signup-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.signup-aside { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
.signup-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.signup-summary h3 { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.signup-summary dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.signup-summary dl > div { display: grid; grid-template-columns: 86px 1fr; gap: 8px; font-size: var(--fs-md); }
.signup-summary dt { color: var(--muted); }
.signup-summary dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.sum-svcs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sum-svcs li { display: flex; gap: 6px; align-items: center; }
.sum-svcs .svg-icon { width: 15px; height: 15px; color: var(--accent); }
.signup-note { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); padding: 0 4px; }
.signup-note .svg-icon { flex: none; margin-top: 2px; }
.signup-foot { margin-top: auto; padding: 18px 24px; text-align: center; font-size: var(--fs-sm); color: var(--faint); border-top: 1px solid var(--border); }
.signup-narrow, .signup-loading { max-width: 640px; width: 100%; margin: 40px auto; padding: 0 16px; }
.signup-done { max-width: 620px; width: 100%; margin: 48px auto; padding: 32px 24px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.signup-done h1 { font-size: 1.9rem; }
.signup-done .next-steps { text-align: left; width: 100%; max-width: 420px; margin: 6px 0 8px; }
.done-mark { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.done-mark .svg-icon { width: 30px; height: 30px; stroke-width: 2.2; }
.done-ref { display: flex; flex-direction: column; gap: 2px; padding: 10px 20px; border-radius: var(--radius); background: var(--surface-2); border: 1px dashed var(--border-strong); }
.done-ref strong { font-size: 1.3rem; letter-spacing: .04em; }
@media (max-width: 900px) {
  .signup-body { grid-template-columns: 1fr; }
  .signup-aside { position: static; order: 2; }
}
@media (max-width: 560px) {
  .signup-hero, .signup-body { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .signup-card { padding: 16px; }
  .signup-steps li { padding: 8px; }
  .signup-steps li > span:last-child small { display: none; }
  .signup-steps { grid-template-columns: auto auto auto; justify-content: start; }
  .signup-steps li:not(.on) > span:last-child { display: none; }
  .signup-actions .btn.lg { flex: 1; justify-content: center; }
}

/* ---- navegación: servicios no contratados y aviso de suscripción ---- */
.nav-link .lock-mark { display: none; margin-left: auto; color: var(--faint); }
.nav-link .lock-mark .svg-icon { width: 13px; height: 13px; }
.nav-link.locked { color: var(--faint); }
.nav-link.locked .lock-mark { display: inline-flex; }
.nav-link.locked .count { display: none; }
:root[data-layout="rail"] .nav-link .lock-mark, :root[data-layout="topbar"] .nav-link .lock-mark { position: absolute; right: 6px; top: 6px; }
:root[data-layout="rail"] .nav-link.locked .lock-mark, :root[data-layout="topbar"] .nav-area-body .nav-link.locked .lock-mark { display: inline-flex; position: static; }
.nav-area.locked > .nav-area-head { opacity: .72; }
.lic-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.lic-chip .svg-icon { width: 15px; height: 15px; }
.lic-chip.trial { background: var(--accent-soft); color: var(--accent); }
.lic-chip.warn { background: var(--warn-soft); color: var(--warn); }
.lic-chip.err { background: var(--err-soft); color: var(--err); }
@media (max-width: 700px) { .lic-chip span { display: none; } .lic-chip { padding: 0 8px; } }

/* ---- Sistema › Suscripción ---- */
.sub-hero { display: flex; gap: 16px; align-items: center; padding: 20px 22px; border-left: 4px solid var(--accent); }
.sub-hero h2 { font-size: var(--fs-xl); }
.sub-hero p { color: var(--muted); margin-top: 2px; }
.sub-hero.ok { border-left-color: var(--ok); } .sub-hero.ok .sub-hero-ic { background: var(--ok-soft); color: var(--ok); }
.sub-hero.warn { border-left-color: var(--warn); } .sub-hero.warn .sub-hero-ic { background: var(--warn-soft); color: var(--warn); }
.sub-hero.err { border-left-color: var(--err); } .sub-hero.err .sub-hero-ic { background: var(--err-soft); color: var(--err); }
.sub-hero-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.sub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.svc-tile { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.svc-tile-head { display: flex; gap: 12px; align-items: flex-start; }
.svc-tile-head .grow { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.svc-tile-head .badge { white-space: normal; height: auto; min-height: 22px; padding: 3px 9px; line-height: 1.3; max-width: 100%; border-radius: 11px; }
.svc-tile-head .badge .dot { flex: none; }
.svc-tile .svc-ic { background: var(--accent-soft); color: var(--accent); }
.svc-tile > .muted { font-size: var(--fs-sm); line-height: 1.45; }
.svc-tile.off { background: var(--surface-2); }
.svc-tile.off .svc-ic { background: var(--surface-3); color: var(--faint); }
.feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.feat li { display: flex; gap: 6px; align-items: center; }
.feat .svg-icon { width: 14px; height: 14px; color: var(--ok); flex: none; }
.svc-tile.off .feat .svg-icon { color: var(--faint); }
.feat.inline { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.seat { display: flex; flex-direction: column; gap: 6px; }
.meter { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.meter.high span { background: var(--st-pend); }
.meter.over span { background: var(--st-err); }
.install-id { font: 600 var(--fs-md) var(--font-mono); letter-spacing: .06em; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.vendor { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-sm); }
.provider-card .svg-icon.lg, .provider-setup .svg-icon.lg { color: var(--accent); flex: none; }
.provider-setup h2 { font-size: var(--fs-xl); margin-bottom: 4px; }
.lic-preview { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); }
.lp-head { display: flex; gap: 12px; align-items: center; }
.lp-head .svg-icon { color: var(--ok); flex: none; }
.lp-head > div { display: flex; flex-direction: column; }
.lp-head .muted { font-size: var(--fs-sm); }
.lp-svcs { display: flex; flex-wrap: wrap; gap: 6px; }
.key-input { font-size: var(--fs-sm); letter-spacing: .02em; }
pre.key-block { white-space: pre-wrap; word-break: break-all; font-size: var(--fs-sm); line-height: 1.6; }
.locked-page { max-width: 640px; margin: 48px auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 0 8px; }
.locked-page h1 { font-size: var(--fs-2xl); text-wrap: balance; }
.locked-page > .muted { max-width: 52ch; }
.locked-ic { position: relative; width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.locked-ic > .svg-icon { width: 32px; height: 32px; }
.locked-badge { position: absolute; right: -8px; bottom: -8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--warn); color: #fff; border: 3px solid var(--bg); }
.locked-badge .svg-icon { width: 14px; height: 14px; }

/* ---- Comercial: solicitudes, tablero y fichas ---- */
.prio { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.prio::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--faint); }
.prio-alta { color: var(--err); } .prio-alta::before { background: var(--err); }
.prio-media { color: var(--warn); } .prio-media::before { background: var(--warn); }
.table tr.row-attn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; padding: 14px; overflow-x: auto; }
.kb-col { background: var(--surface-2); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 220px; border: 1px dashed transparent; transition: border-color .12s, background .12s; }
.kb-col.drop { border-color: var(--accent); background: var(--accent-soft); }
.kb-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; }
.kb-list { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 10px; }
.kb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; cursor: grab; box-shadow: 0 1px 2px rgb(16 24 40 / 6%); }
.kb-card:hover { border-color: var(--border-strong); }
.kb-card:focus-visible { box-shadow: var(--focus); outline: none; }
.kb-card.dragging { opacity: .5; }
.kb-card .chip.sm { height: 20px; }
.kb-empty { color: var(--faint); font-size: var(--fs-sm); text-align: center; padding: 20px 8px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.lead-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.lead-head .field { margin: 0; }
.lead-need { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius); background: var(--surface-2); }
.lead-svcs { display: flex; flex-wrap: wrap; gap: 6px; }
.lead-msg { margin: 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text); white-space: pre-wrap; font-size: var(--fs-md); }
.consent-box { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border); font-size: var(--fs-sm); }
.consent-box > div { display: flex; flex-direction: column; gap: 2px; }
.consent-box .svg-icon { color: var(--ok); flex: none; margin-top: 2px; }
.note-form { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.note-form .input { flex: 1; min-width: 180px; }
.timeline li.tl-status::before, .timeline li.tl-customer::before, .timeline li.tl-license::before { border-color: var(--ok); }
.timeline li.tl-email::before, .timeline li.tl-call::before, .timeline li.tl-meeting::before { border-color: var(--conf); }
.timeline li { flex-direction: row; gap: 8px; }
.timeline .tl-ic { color: var(--muted); flex: none; margin-top: 1px; }
.timeline .tl-ic .svg-icon { width: 15px; height: 15px; }
.tl-mail summary { cursor: pointer; font-size: var(--fs-xs); color: var(--accent); }
.tl-mail pre { white-space: pre-wrap; font: var(--fs-sm)/1.5 var(--font-ui); background: var(--surface-2); padding: 10px; border-radius: var(--radius-sm); margin-top: 6px; }
.lic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lic-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.lic-list li:hover { border-color: var(--border-strong); background: var(--surface-2); }
.branch.locked { background: var(--surface-2); border-style: dashed; }
.branch.locked .head .svg-icon:last-child { margin-left: auto; color: var(--faint); width: 15px; height: 15px; }
.branch.locked .ico { color: var(--faint); }
.rep-cat.locked .rep-list { opacity: .55; pointer-events: none; }
.rep-cat.locked .badge .svg-icon { width: 12px; height: 12px; }
.nowrap { white-space: nowrap; }
.kb-card .row { flex-wrap: nowrap; gap: 8px; } .kb-card .row > strong { min-width: 0; }

/* ============================================================= v0.8 · portal del proveedor y SaaS */
.realm-foot { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--muted); }
.realm-foot .grow { display: flex; flex-direction: column; min-width: 0; font-weight: 600; color: var(--text); font-size: var(--fs-sm); }
.realm-foot small { color: var(--faint); font-weight: 400; font-size: var(--fs-xs); }
:root[data-layout="topbar"] .realm-foot { color: color-mix(in srgb, var(--bg) 70%, transparent); }
:root[data-layout="topbar"] .realm-foot .grow { color: var(--bg); }
:root[data-layout="topbar"] .realm-foot small { display: none; }
:root[data-layout="rail"] .realm-foot { justify-content: center; padding: 8px 0; }
:root[data-layout="rail"] .realm-foot .grow { display: none; }
.notif-btn { position: relative; }
.notif-count { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--st-err);
  color: #fff; font: 700 10px/17px var(--font-sans, inherit); text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.att-list, .notif-list { list-style: none; margin: 0; padding: 0; }
.att-list li + li, .notif-list li + li { border-top: 1px solid var(--border); }
.att-list a, .notif-list a { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: inherit; text-decoration: none; }
.att-list a:hover, .notif-list a:hover { background: var(--surface-2); }
.att-list .grow, .notif-list .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.att-list .muted, .notif-list .muted { font-size: var(--fs-sm); }
.notif-list li.unread strong::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 1px; }
.notif-list.compact a { padding: 10px 4px; }
.drawer .notif-list.compact a { padding: 10px 0; }
.plan-pick { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.plan-pick .radio-card { flex-direction: column; gap: 2px; text-align: left; cursor: pointer; background: var(--surface); }
.plan-pick .radio-card.on { border-color: var(--accent); background: var(--accent-soft); }
fieldset.fs { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
fieldset.fs legend { float: left; width: 100%; padding: 0 0 6px; margin: 0; font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); border-bottom: 1px solid var(--border); }
fieldset.fs legend + * { clear: both; }
.meter-row { display: flex; flex-direction: column; gap: 6px; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--surface-2); }
.segmented.wrap { flex-wrap: wrap; }
.brand > span:last-child { min-width: 0; }
.brand small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.tenant-switch .grow { min-width: 0; }
.tenant-switch .grow > * { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-list { list-style: none; margin: 0; padding: 0; }
.user-list li { display: flex; align-items: center; gap: 10px; padding: 10px 18px; }
.user-list li + li { border-top: 1px solid var(--border); }
.user-list .grow { display: flex; flex-direction: column; min-width: 0; }
.user-list .grow > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-list .mono { font-size: var(--fs-xs); }
.user-list .badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; font-size: var(--fs-xs); }

/* ---------------------------------------------------------------- v0.9 · páginas por categoría, opción y pestaña */
.nav-area-overview { display: flex; align-items: center; gap: 11px; height: 32px; padding: 0 10px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--faint); font-size: var(--fs-sm); font-weight: 500; position: relative; }
.nav-area-overview .svg-icon { width: 16px; height: 16px; }
.nav-area-overview:hover { background: var(--surface-2); color: var(--text); }
.nav-area-overview.active { background: var(--accent-soft); color: var(--accent); }
.nav-area-overview.active::before { content: ""; position: absolute; left: -7px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
:root[data-layout="rail"] .nav-area-overview { display: none; }
:root[data-layout="topbar"] .nav-area-body .nav-area-overview { white-space: nowrap; }
.crumb-link { color: var(--muted); text-decoration: none; white-space: nowrap; }
.crumb-link:hover { color: var(--accent); text-decoration: underline; }
.area-group { display: flex; flex-direction: column; gap: 10px; }
.area-group-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 600; margin: 4px 0 0; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.area-card { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); transition: border-color .15s, box-shadow .15s; min-width: 0; }
.area-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); }
.area-card.locked { opacity: .72; }
.area-card-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.area-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.area-card-body .muted { font-size: var(--fs-sm); }
.area-card-link { color: var(--text); text-decoration: none; }
.area-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.area-card-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; position: relative; z-index: 1; }
.area-card-tabs a { font-size: var(--fs-xs); padding: 2px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); text-decoration: none; }
.area-card-tabs a:hover { color: var(--accent); border-color: var(--accent); }
.area-card > .badge, .area-card > .count-pill { flex: none; }
.auth-realm { margin-left: 10px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--bg); font-weight: 600; }
.auth-wrap.prov .auth-side { background: linear-gradient(160deg, var(--text), color-mix(in srgb, var(--text) 80%, var(--accent))); }
.crumbs { flex-wrap: nowrap; overflow: hidden; }
.crumbs > * { white-space: nowrap; }
.crumbs > .crumb-link { overflow: hidden; text-overflow: ellipsis; min-width: 2ch; }
.crumbs > strong { overflow: hidden; text-overflow: ellipsis; }