/* FleetDesk — aplicación. Sin cajas: espacio y filetes finos. Un acento, puntos de estado. */
:root { --bar-h: 64px; --tab-h: 62px; --c1: var(--brand-text); --c2: #8A9894; --page-w: 1120px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c2: #8EA29E; } }
:root[data-theme="dark"] { --c2: #8EA29E; }
body.no-scroll { overflow: hidden; }
.boot { display: grid; place-items: center; min-height: 100dvh; color: var(--ink-2); }
.mt-s { margin-top: .6rem; } .mt-m { margin-top: 1rem; }
.center { justify-content: center; }
.nowrap { white-space: nowrap; }
.mono, .mono-sm { font-family: var(--f-mono); }
.mono-sm { font-size: var(--t-xs); overflow-wrap: anywhere; }
.txt-warn { color: var(--warn); } .txt-crit { color: var(--crit); }
.btn--block { width: 100%; }
.pre { white-space: pre-wrap; }
.link-quiet { color: var(--ink-2); font-size: var(--t-sm); }
.soon { display: inline-block; padding: .1em .6em; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); font-weight: 700; font-size: var(--t-xs); white-space: nowrap; }

/* ——— Barra superior ——— */
.bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar__in { display: flex; align-items: center; gap: .4rem; height: var(--bar-h); width: min(var(--page-w), 100% - 32px); margin: 0 auto; }
.bar .brand { margin-right: 1.6rem; }
.bar__nav { display: flex; gap: .2rem; }
.bar__a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .8rem; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: var(--t-sm); }
.bar__a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.bar__a[aria-current="page"] { color: var(--ink); background: var(--sunken); }
.bar__sp { flex: 1; }
.bar__install { margin-right: .4rem; }
.bar__install svg { width: 16px; height: 16px; }
.content { width: min(var(--page-w), 100% - 32px); margin: 0 auto; padding: 2.4rem 0 5rem; outline: none; }
.tabbar { display: none; }
@media (max-width: 860px) {
  .bar__in { width: auto; margin: 0; padding: 0 8px 0 16px; }
  .bar__nav { display: none; }
  .bar .brand { margin-right: 0; }
  .bar__install { width: 40px; padding: 0; }
  .bar__install-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .content { width: auto; margin: 0 16px; padding: 1.5rem 0 calc(var(--tab-h) + 2.5rem + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset: auto 0 0 0; z-index: 25; height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg); border-top: 1px solid var(--line); }
  .tabbar__a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink-3); text-decoration: none; font-size: .75rem; font-weight: 700; }
  .tabbar__a svg { width: 22px; height: 22px; }
  .tabbar__a[aria-current="page"] { color: var(--brand-text); }
}

.pop-wrap { position: relative; }
.popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 240px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
.bell { position: relative; }
.bell__n { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--crit-fill); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.bell-panel { width: min(380px, calc(100vw - 24px)); max-height: min(70dvh, 560px); overflow-y: auto; }
@media (max-width: 860px) { .bell-panel { position: fixed; top: calc(var(--bar-h) + 4px); right: 12px; left: 12px; width: auto; } }
.bell-panel__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1rem .5rem; position: sticky; top: 0; background: var(--bg); }
.bell-panel__head h2 { font-size: 1rem; }
.bell-panel__perm { margin: 0 1rem .6rem; padding: .7rem; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--t-sm); display: grid; gap: .5rem; justify-items: start; }
.bell-panel__empty { padding: 1rem; color: var(--ink-2); }
.bell-panel__all { display: block; padding: .8rem 1rem; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif a { display: grid; gap: .1rem; padding: .7rem 1rem .7rem 1.6rem; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; position: relative; font-size: var(--t-sm); }
.notif a:hover { background: var(--surface-2); }
.notif span { color: var(--ink-2); }
.notif time { color: var(--ink-3); font-size: var(--t-xs); }
.notif--unread a::before { content: ""; position: absolute; left: .75rem; top: 1.1rem; width: 7px; height: 7px; border-radius: 50%; background: var(--ok-fill); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sunken); color: var(--ink); font-size: .8rem; font-weight: 700; }
.user-menu { padding: .4rem; }
.user-menu__who { display: grid; gap: .1rem; padding: .5rem .6rem .7rem; margin-bottom: .3rem; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.user-menu__who span { color: var(--ink-2); }
.menu-wrap { position: relative; display: inline-block; }
.menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 35; min-width: 210px; padding: .3rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
.menu__i { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 38px; padding: .4rem .6rem; border: 0; border-radius: var(--r-xs); background: none; color: var(--ink); text-align: left; text-decoration: none; font-size: var(--t-sm); cursor: pointer; }
.menu__i svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.menu__i:hover, .menu__i:focus-visible { background: var(--surface-2); text-decoration: none; }
.menu__i--danger, .menu__i--danger svg { color: var(--crit); }

/* ——— Página ——— */
.page { display: grid; gap: 2rem; }
.page--narrow { max-width: 720px; }
.page-head { display: grid; gap: .4rem; }
.page-back { display: inline-flex; align-items: center; gap: .3rem; width: max-content; color: var(--ink-3); font-size: var(--t-sm); text-decoration: none; }
.page-back svg { width: 15px; height: 15px; }
.page-back:hover { color: var(--ink); }
.page-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.page-head__t { min-width: 0; }
.page-head h1, .dhead h1 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); letter-spacing: -.025em; outline: none; overflow-wrap: anywhere; }
.page-sub { margin-top: .25rem; color: var(--ink-2); }
.sec { display: grid; gap: .6rem; }
.sec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.sec__t { font-size: var(--t-sm); color: var(--ink-3); font-weight: 700; letter-spacing: 0; }
.inline-note { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; color: var(--ink-2); font-size: var(--t-sm); }
.sub-h { margin: 1.6rem 0 .4rem; font-size: var(--t-sm); color: var(--ink-3); }
.empty { display: grid; justify-items: center; gap: .5rem; padding: 3rem 1rem; text-align: center; }
.empty__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); margin-bottom: .2rem; }
.empty__ic svg { width: 22px; height: 22px; }
.empty h3 { font-size: 1.2rem; }
.empty p { color: var(--ink-2); max-width: 46ch; }
.empty .btn-row { margin-top: .6rem; justify-content: center; }
.loading { display: grid; justify-items: center; gap: .6rem; padding: 2.5rem; color: var(--ink-3); font-size: var(--t-sm); }
.loading__bar { width: 96px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--brand) 0 30%, var(--sunken) 30% 100%); background-size: 200% 100%; animation: load 1.1s linear infinite; }
@keyframes load { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ——— Resumen ——— */
.overview { display: grid; gap: 2.6rem; }
.state { display: flex; align-items: flex-start; gap: 1.1rem; padding-top: .5rem; }
.state__dot { width: 18px; height: 18px; border-radius: 50%; margin-top: .85rem; flex: none; background: var(--ok-fill); box-shadow: 0 0 0 6px var(--ok-soft); }
.state--warn .state__dot { background: var(--warn-fill); box-shadow: 0 0 0 6px var(--warn-soft); }
.state--crit .state__dot, .state--offline .state__dot { background: var(--crit-fill); box-shadow: 0 0 0 6px var(--crit-soft); }
.state__t { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.state__s { margin-top: .4rem; color: var(--ink-2); font-size: 1.05rem; }
.welcome { display: grid; gap: .8rem; justify-items: start; padding: 2rem 0; }
.welcome h2 { font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -.03em; }
.welcome p { color: var(--ink-2); max-width: 48ch; font-size: 1.1rem; }

/* Lista de filas (atención, clientes, alertas) */
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.list > li { border-bottom: 1px solid var(--line); }
.list__item { display: flex; align-items: center; gap: .5rem; }
.list__item .list__row { flex: 1; min-width: 0; }
.list__row { display: grid; grid-template-columns: 12px minmax(0, 15rem) minmax(0, 1fr) auto; align-items: center; gap: .3rem 1.2rem; padding: .95rem .2rem; color: var(--ink); text-decoration: none; }
.list__row:hover { background: var(--surface-2); text-decoration: none; }
.list__main { display: grid; min-width: 0; }
.list__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__muted { color: var(--ink-3); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__what { color: var(--ink-2); min-width: 0; }
.list__when { color: var(--ink-3); font-size: var(--t-sm); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.list__edit { flex: none; }
.list__row--client { grid-template-columns: 12px minmax(0, 1fr) auto auto; }
.list__row.is-acked { opacity: .65; }
@media (max-width: 700px) {
  .list__row, .list__row--client { grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-areas: "d m w" ". t t"; }
  .list__row > .dot { grid-area: d; }
  .list__row > .list__main { grid-area: m; }
  .list__row > .list__when { grid-area: w; }
  .list__row > .list__what { grid-area: t; font-size: var(--t-sm); }
}

/* ——— Máquinas ——— */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; }
.filters__q { position: relative; flex: 1 1 260px; }
.filters__s { flex: 0 1 220px; min-width: 0; }
@media (max-width: 600px) { .filters__s { flex: 1 1 40%; } }
.filters__ic { position: absolute; left: .8rem; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.filters__q .input { padding-left: 2.4rem; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tbl th, .tbl td { padding: .85rem .6rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.tbl th:first-child, .tbl td:first-child { padding-left: .2rem; }
.tbl thead th { color: var(--ink-3); font-weight: 700; font-size: var(--t-xs); white-space: nowrap; border-bottom-color: var(--line-strong); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.dev { position: relative; }
.dev:hover { background: var(--surface-2); }
.dev__link { font-weight: 700; font-size: var(--t-md); color: var(--ink); text-decoration: none; }
.dev__link::after { content: ""; position: absolute; inset: 0; }
.dev__link:focus-visible { outline: none; }
.dev:has(.dev__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.dev__os { display: block; color: var(--ink-3); font-size: var(--t-xs); }
.dev__client { color: var(--ink-2); }
.dev__seen { color: var(--ink-3); white-space: nowrap; }
.dev__approve { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .tbl--devices thead { display: none; }
  .tbl--devices, .tbl--devices tbody { display: block; }
  .tbl--devices tr { display: grid; grid-template-columns: 22px 10px minmax(0, 1fr) auto auto auto; column-gap: .7rem; row-gap: .15rem; padding: .85rem .2rem; border-bottom: 1px solid var(--line); }
  .tbl--devices td { display: block; padding: 0; border: 0; }
  .tbl--devices td.dev__sel { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .tbl--devices .dev__state { grid-column: 2; grid-row: 1; align-self: center; }
  .tbl--devices .dev__state .status__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tbl--devices .dev__name { grid-column: 3 / 6; grid-row: 1; padding-left: 0; min-width: 0; }
  .tbl--devices .dev__name .dev__os, .tbl--devices .dev__ic { display: none; }
  .tbl--devices .dev__seen { grid-column: 6; grid-row: 1; align-self: center; font-size: var(--t-xs); }
  .tbl--devices .dev__client { grid-column: 3; grid-row: 2; font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tbl--devices .dev__m { grid-row: 2; font-size: var(--t-xs); color: var(--ink-3); text-align: right; white-space: nowrap; }
  .tbl--devices td:nth-child(5) { grid-column: 4; } .tbl--devices td:nth-child(6) { grid-column: 5; } .tbl--devices td:nth-child(7) { grid-column: 6; }
  .tbl--devices .dev__m.txt-crit { color: var(--crit); } .tbl--devices .dev__m.txt-warn { color: var(--warn); }
  .tbl--devices .dev__m::before { content: attr(data-l) " "; }
  .tbl--devices .dev__act { display: none; }
}

/* ——— Detalle ——— */
.dhead { display: grid; gap: .5rem; }
.dhead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.dhead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem; margin-top: .4rem; color: var(--ink-2); font-size: var(--t-sm); }
.dhead__act { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.dhead__why { color: var(--ink-3); font-size: var(--t-sm); display: flex; flex-wrap: wrap; gap: .6rem; }
.dalerts { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.dalerts li { display: flex; align-items: center; gap: .8rem; padding: .5rem .8rem; border-radius: var(--r-sm); background: var(--surface-2); }
.dalerts__m { flex: 1; min-width: 0; }
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
@media (max-width: 760px) { .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; } }
.fig { display: grid; gap: .1rem; }
.fig__l { color: var(--ink-3); font-size: var(--t-sm); }
.fig__v { font-size: clamp(2rem, 4.4vw, 2.8rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fig__s { color: var(--ink-3); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-ctl { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--sunken); }
.seg-ctl__b { min-height: 30px; padding: 0 .8rem; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-size: var(--t-xs); font-weight: 700; cursor: pointer; white-space: nowrap; }
.seg-ctl__b[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.seg-ctl--lg .seg-ctl__b { min-height: 40px; padding: 0 1.3rem; font-size: var(--t-sm); }
.chart { margin: 0; min-width: 0; }
.chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .3rem; }
.chart__legend { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; font-size: var(--t-xs); color: var(--ink-2); }
.chart__legend li { display: inline-flex; align-items: center; gap: .4rem; }
.swatch { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.chart__area { position: relative; }
.chart__c { width: 100%; height: 200px; touch-action: pan-y; }
.chart__tip { position: absolute; top: 4px; left: var(--x, 0); display: grid; gap: .1rem; padding: .45rem .6rem; min-width: 150px; background: var(--ink); color: var(--bg); border-radius: var(--r-sm); font-size: var(--t-xs); pointer-events: none; z-index: 2; }
.chart__tip span { display: inline-flex; align-items: center; gap: .35rem; }
.remote-soon { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; color: var(--ink-2); font-size: var(--t-sm); }
.more { border-top: 1px solid var(--line); }
.more > summary { display: flex; align-items: center; gap: .5rem; padding: 1rem 0; cursor: pointer; font-weight: 700; list-style: none; width: max-content; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: .2rem; }
.more[open] > summary::before { transform: rotate(45deg); }
.more__body { padding-bottom: 1rem; display: grid; gap: .5rem; }
.more__grid { display: grid; gap: 0 3rem; }
@media (min-width: 860px) { .more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.more__grid > div > .sub-h:first-child { margin-top: .4rem; }
.kv { margin: 0; display: grid; }
.kv > div { display: grid; grid-template-columns: minmax(8rem, 40%) minmax(0, 1fr); gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.disks { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.disk { display: grid; gap: .25rem; font-size: var(--t-sm); }
.disk__h { display: flex; justify-content: space-between; gap: .5rem; }
.disk__p { font-variant-numeric: tabular-nums; font-weight: 700; }
.meter { display: block; position: relative; height: 5px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.meter__fill { position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--ok-fill); border-radius: 3px; }
.meter--warn .meter__fill { background: var(--warn-fill); }
.meter--crit .meter__fill { background: var(--crit-fill); }
.meter--off .meter__fill { background: transparent; }
.fp { color: var(--ink-3); font-size: var(--t-xs); margin-top: 1rem; }
.agent-notes { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--ink-2); font-size: var(--t-sm); }

/* ——— Instalar ——— */
.install-main { display: grid; gap: .7rem; }
.install-main .cmd code { font-size: .95rem; padding: 1rem 1.1rem; white-space: pre-wrap; word-break: break-all; }
.page--narrow > .seg-ctl { justify-self: start; }
.install-help { color: var(--ink-2); }
.adv-item { display: grid; gap: .5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.adv-item:last-child { border-bottom: 0; }
.adv-item h3 { font-size: var(--t-md); }
.adv-item__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.adv-item .btn { justify-self: start; }
.keys { list-style: none; margin: 0; padding: 0; }
.keys li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: .3rem 1rem; padding: .6rem 0; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.keys__n { display: grid; min-width: 0; }
@media (max-width: 600px) { .keys li { grid-template-columns: minmax(0, 1fr) auto; } .keys li > code { display: none; } }
.num-list { margin: 0; padding-left: 1.3rem; display: grid; gap: .35rem; font-size: var(--t-sm); color: var(--ink-2); }

/* ——— Ajustes ——— */
.subnav { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-top: -.8rem; }
.subnav__a { padding: .6rem .8rem; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: var(--t-sm); white-space: nowrap; }
.subnav__a:hover { color: var(--ink); text-decoration: none; }
.subnav__a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand-text); }
.tab-page { display: grid; gap: 2.6rem; }
.tab-page > .stack, .tab-page form.stack { gap: 2.6rem; }
.tab-body.stack, .tab-body > .stack { display: grid; gap: 2rem; }
.tab-intro { color: var(--ink-2); }
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs__b { min-height: 40px; padding: .5rem .8rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ink-2); font-weight: 700; font-size: var(--t-sm); white-space: nowrap; cursor: pointer; }
.tabs__b:hover { color: var(--ink); }
.tabs__b[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand-text); }
.tabs__n { margin-left: .3rem; color: var(--ink-3); }
.stack { display: grid; gap: 2rem; }
.grid-2 { display: grid; gap: 2rem; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.grid-2--tight { gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-2--tight .field + .field { margin-top: 0; }
.grid-3 { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.panel { min-width: 0; }
.panel__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .4rem 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.panel__head h2 { font-size: 1.1rem; }
.panel__head .hint { margin-top: .2rem; max-width: 64ch; }
.panel__body { padding-top: 1rem; min-width: 0; }
.narrow { max-width: 420px; }
.sticky-save { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .8rem; padding: .8rem 0; background: linear-gradient(to top, var(--bg) 70%, transparent); }
@media (max-width: 860px) { .sticky-save { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); } }
.modal-danger { margin-top: 1.4rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.modal-danger .btn { color: var(--crit); }
dialog.modal--wide { width: min(640px, calc(100vw - 24px)); }

/* Tablas de ajustes (equipo, auditoría): en móvil, filas apiladas */
.table-wrap { overflow: hidden; }
.cell-sub { display: block; color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; }
.cell-act { width: 1%; text-align: right; }
.is-muted { opacity: .6; }
@media (max-width: 760px) {
  .tbl--stack thead { display: none; }
  .tbl--stack, .tbl--stack tbody { display: block; }
  .tbl--stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .tbl--stack td, .tbl--stack th { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; grid-column: 1 / -1; padding: 0; border: 0; text-align: left; }
  .tbl--stack td[data-label]::before { content: attr(data-label); min-width: 7.5rem; color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; }
  .tbl--stack tr > :first-child { grid-column: 1; display: block; font-size: var(--t-md); }
  .tbl--stack tr > :first-child::before { display: none; }
  .tbl--stack .cell-act { grid-column: 2; grid-row: 1; width: auto; }
}
.rows { list-style: none; margin: 0; padding: 0; }
.row-item { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.row-item__main { flex: 1; min-width: 0; display: grid; }
.row-item__t { font-weight: 700; overflow-wrap: anywhere; }
.row-item__s { color: var(--ink-2); font-size: var(--t-sm); }
.row-item__ic { width: 18px; height: 18px; color: var(--ink-3); flex: none; }

/* Reglas */
.rules-grid { display: grid; gap: 0 2.5rem; }
@media (min-width: 900px) { .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rule { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.rule label { display: grid; gap: .05rem; font-size: var(--t-sm); }
.rule__in { display: flex; align-items: center; gap: .4rem; flex: none; }
.rule__in select { width: auto; min-width: 10rem; }
.rule__u { color: var(--ink-3); font-size: var(--t-sm); min-width: 2rem; }
.input--num { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.rule--bool { display: block; }
.override { padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--surface-2); }
.override .rule { border-bottom-color: color-mix(in srgb, var(--line-strong) 50%, transparent); }
.override__h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.override__h h3 { font-size: 1rem; }
.add-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.add-row select { width: auto; flex: 1 1 14rem; max-width: 22rem; }

/* Equipo, seguridad, plan */
.roles { margin: 0; display: grid; }
.roles div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.roles dt { font-weight: 700; }
.roles dd { margin: 0; color: var(--ink-2); }
.radios { margin: 1rem 0 0; padding: 0; border: 0; display: grid; gap: .6rem; }
.scope-list { display: grid; gap: .5rem; max-height: 220px; overflow-y: auto; margin-left: 1.8rem; padding: .6rem; border: 1px solid var(--line); border-radius: var(--r-sm); }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; color: var(--ink-2); }
.setup-steps { gap: 1rem; font-size: var(--t-md); color: var(--ink); }
.qr-wrap { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: .6rem; }
.qr { border-radius: var(--r-sm); }
.qr-alt { flex: 1 1 200px; display: grid; gap: .4rem; min-width: 0; }
.setup-steps .input--code { margin-top: .4rem; }
.codes { list-style: none; margin: 1rem 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.codes code { display: block; padding: .4rem .6rem; background: var(--sunken); border-radius: var(--r-xs); text-align: center; }
.plan-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.plan-now__n { font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.usage { display: grid; }
.usage__r { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.usage__r span { color: var(--ink-2); }
.usage__r--m .meter { flex-basis: 100%; }
.plan-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pcard { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.1rem; border-radius: var(--r-md); background: var(--surface-2); }
.pcard--cur { background: var(--brand-soft); }
.pcard h3 { font-size: 1.05rem; }
.pcard__price { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.pcard ul { margin: .5rem 0 .9rem; padding-left: 1.1rem; font-size: var(--t-sm); color: var(--ink-2); display: grid; gap: .25rem; }
.pcard__act { margin-top: auto; }

/* ——— Entrar / crear cuenta ——— */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 16px; }
.auth__side { display: none; }
.auth__main { width: min(400px, 100%); display: grid; gap: 1.4rem; outline: none; }
.auth__mobile-brand { margin-bottom: 1rem; }
.auth__card h1 { font-size: 2rem; letter-spacing: -.03em; }
.auth__sub { margin-top: .4rem; color: var(--ink-2); }
.auth__form { margin-top: 1.8rem; display: grid; gap: 1rem; }
.auth__form .field + .field { margin-top: 0; }
.auth__card .notice { margin-top: 1.2rem; }
.auth__alt { margin-top: 1rem; font-size: var(--t-sm); }
.auth__foot { color: var(--ink-2); font-size: var(--t-sm); }
fd-style { display: none; }
.input--sm { width: auto; min-height: 32px; padding: .2em .5em; font-size: var(--t-xs); }
/* Modo demo */
.demo-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .2rem .8rem; padding: .45rem 16px; background: var(--ink); color: var(--bg); font-size: var(--t-sm); }
.demo-band a { color: inherit; font-weight: 700; }

/* ——— Nombre de máquina: alias grande + nombre real del equipo ——— */
.dev__host { display: block; color: var(--ink-3); font-size: var(--t-xs); }
.dev__act { width: 1%; text-align: right; }
.dev .menu-wrap, .dev__act .btn { position: relative; z-index: 1; }
.dhead__row { align-items: center; }
.dhead__img { width: 72px; height: 52px; object-fit: contain; flex: none; }
.dhead__t { flex: 1; min-width: 12rem; }
.dname__row { display: flex; align-items: center; gap: .3rem; }
.dname__host { color: var(--ink-3); font-size: var(--t-sm); margin-top: .1rem; }
.dname__form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.dname__input { font-size: 1.4rem; font-weight: 700; max-width: 22rem; min-height: 44px; }
.dname__hint { flex-basis: 100%; color: var(--ink-3); font-size: var(--t-xs); }
.desc { display: flex; align-items: center; gap: .3rem; margin-top: .4rem; min-height: 0; }
.desc__t { color: var(--ink-2); }
.desc__edit { width: 28px; padding: 0; min-height: 28px; color: var(--ink-3); }
.desc__edit svg { width: 15px; height: 15px; }
.desc__add { width: auto; padding: 0 .5rem; gap: .3rem; font-weight: 400; }
.desc__form { display: flex; flex-wrap: wrap; gap: .4rem; width: 100%; position: relative; z-index: 2; }
.desc__input { flex: 1 1 14rem; width: auto; }
.kind-field { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding-bottom: .6rem; font-size: var(--t-sm); color: var(--ink-2); }
.kind-field select { width: auto; }

/* ——— Tarjetas de máquinas ——— */
.dcards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.dcard { position: relative; display: grid; gap: .9rem; align-content: start; padding: 1.1rem 1.15rem 1rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.dcard:hover { border-color: var(--line-strong); }
.dcard--crit { box-shadow: inset 3px 0 0 var(--crit-fill); }
.dcard--warn { box-shadow: inset 3px 0 0 var(--warn-fill); }
.dcard:has(.dcard__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.dcard__head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: .8rem; }
.dcard__img { width: 56px; height: 40px; object-fit: contain; }
.dcard__id { min-width: 0; }
.dcard__name { display: flex; align-items: center; gap: .45rem; font-size: 1.1rem; min-width: 0; }
.dcard__link { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcard__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
.dcard__link:focus-visible { outline: none; }
.dcard__sub { color: var(--ink-3); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcard__link-speed { align-self: start; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.dcard .desc { margin: 0; position: relative; z-index: 1; }
.dcard .desc__t { flex: 1; min-width: 0; padding: .35rem .6rem; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcard .desc__add { opacity: 0; transition: opacity .12s; }
.dcard:hover .desc__add, .dcard .desc__add:focus-visible { opacity: 1; }
@media (hover: none) { .dcard .desc__add { opacity: .8; } }
.dcard .desc:has(.desc__add):not(:has(.desc__t)) { margin-top: -.6rem; margin-bottom: -.6rem; }
.dcard__figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: 0; text-align: center; }
.dcard__fig dt { color: var(--ink-3); font-size: var(--t-xs); }
.dcard__fig dd { margin: .1rem 0 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dcard__store { display: grid; gap: .35rem; }
.dcard__store-t { display: flex; justify-content: space-between; gap: .5rem; font-size: var(--t-sm); color: var(--ink-2); }
.dcard__store .meter { height: 6px; }
.dcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; padding-top: .7rem; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); }
.dcard__net { flex: 1 1 auto; white-space: nowrap; }
.dcard__smart { padding: .1rem .5rem; border: 1px solid var(--ok); border-radius: 999px; color: var(--ok); font-weight: 600; white-space: nowrap; }
.dcard__smart--fail { border-color: var(--crit); color: var(--crit); }

/* ——— Iconos de máquina ——— */
.dev__id { display: flex; align-items: center; gap: .7rem; }
.dev__ic { width: 40px; height: 32px; object-fit: contain; flex: none; }
.dev__sel, td.dev__sel { width: 1%; }
.selbox { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-text); position: relative; z-index: 2; cursor: pointer; }
.dcard > .selbox { position: absolute; top: .7rem; left: .7rem; }
.dcard:has(> .selbox) .dcard__head { padding-left: 1.4rem; }
.dcard__img { width: 64px; height: 51px; object-fit: contain; }
.dcard__head { grid-template-columns: 64px minmax(0, 1fr) auto; }
.dcard__tr { display: flex; align-items: center; gap: .2rem; align-self: start; position: relative; z-index: 1; }
.dcard__os { margin-top: -.6rem; }
.os-chip { display: inline-block; padding: .05rem .45rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font-size: .72rem; font-weight: 700; }
.dhead__icbtn { position: relative; flex: none; padding: .2rem; border: 1px solid transparent; border-radius: var(--r-md); background: none; cursor: pointer; }
.dhead__icbtn:hover { border-color: var(--line-strong); background: var(--surface); }
.dhead__icedit { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2); }
.dhead__icedit svg { width: 12px; height: 12px; }
.dhead__img { width: 80px; height: 64px; }

/* Selector de icono */
.ipick__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem; border-bottom: 1px solid var(--line); }
.ipick__bar .tabs { border-bottom: 0; }
.ipick__q { width: 12rem; margin-bottom: .3rem; }
.ipick__panel { max-height: min(56dvh, 460px); overflow-y: auto; padding: .8rem 0 .2rem; display: grid; gap: .9rem; }
.ipick__cat h3 { font-size: var(--t-xs); color: var(--ink-3); margin-bottom: .4rem; }
.ipick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .4rem; }
.ipick__o { display: grid; justify-items: center; gap: .2rem; padding: .5rem .3rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font-size: .72rem; color: var(--ink-2); text-align: center; }
.ipick__o img { width: 64px; height: 51px; object-fit: contain; }
.ipick__o:hover { border-color: var(--line-strong); }
.ipick__o[aria-pressed="true"] { border: 2px solid var(--brand-text); background: var(--brand-soft); color: var(--ink); }
.ipick__panel > .ipick__o { grid-auto-flow: column; justify-content: start; align-items: center; gap: .7rem; justify-self: start; padding: .4rem .8rem; }
.ipick__auto { display: grid; place-items: center; width: 64px; height: 51px; color: var(--ink-3); }
.ipick__up { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.ipick__empty { padding: 1rem 0; }

/* Bandeja «Nuevas por asignar» */
.tray { display: grid; gap: .7rem; padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--brand-soft); }
.tray__head h2 { font-size: 1.05rem; }
.tray__head .hint { margin-top: .15rem; }
.tray__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.tray__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: .3rem .9rem; padding: .55rem 0; border-top: 1px solid color-mix(in srgb, var(--brand-text) 18%, transparent); }
.tray__row:first-child { border-top: 0; }
.tray__ic { width: 48px; height: 38px; object-fit: contain; }
.tray__main { display: grid; min-width: 0; }
.tray__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; }
.tray__act select { width: auto; max-width: 15rem; background: var(--surface); }
.tray__new { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .4rem; }
.tray__new .input { width: auto; flex: 1 1 12rem; background: var(--surface); }
@media (max-width: 600px) { .tray__row { grid-template-columns: 40px minmax(0, 1fr); } .tray__act { grid-column: 1 / -1; justify-content: flex-start; } .tray__new { grid-column: 1 / -1; } }

/* Selección múltiple */
.selrow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; min-height: 36px; }
.check--inline { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-sm); color: var(--ink-2); }
.check--inline input { margin: 0; }
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .3rem .4rem .3rem .8rem; border-radius: 999px; background: var(--ink); color: var(--bg); }
.bulk .btn { --b-bg: transparent; --b-fg: var(--bg); --b-line: color-mix(in srgb, var(--bg) 35%, transparent); }
.bulk .btn:hover { --b-bg: color-mix(in srgb, var(--bg) 12%, transparent); }
.bulk__n { font-weight: 700; font-size: var(--t-sm); margin-right: .3rem; }
.install-note { color: var(--ink-2); font-size: var(--t-sm); max-width: 64ch; margin-top: -1.2rem; }
@media (max-width: 600px) { .list__edit-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* Ningún hijo de rejilla puede ensanchar la página en móvil */
.page > *, .overview > *, .dcards > *, .tray__row > *, .dcard > *, .tab-page > * { min-width: 0; }
.dcard__net { white-space: normal; }

/* Botón «Instalar agente» con menú (Añadir NAS) */
.split { display: inline-flex; align-items: center; margin-right: .4rem; }
.split .bar__install { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split .menu-wrap { display: flex; }
.split__more.btn { --b-bg: var(--brand); --b-fg: var(--brand-ink); --b-line: var(--brand); width: 30px; min-height: 40px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid color-mix(in srgb, var(--brand-ink) 25%, transparent); }
.split__more.btn:hover { --b-bg: var(--brand-hover); }
.split .menu { min-width: 250px; }

/* Postura de seguridad */
.posture { display: flex; flex-wrap: wrap; gap: .3rem 1rem; list-style: none; margin: 0; padding: 0; font-size: var(--t-xs); color: var(--ink-2); }
.posture__i { display: inline-flex; align-items: center; gap: .35rem; cursor: help; }
.posture__i--crit { color: var(--crit); font-weight: 700; } .posture__i--warn { color: var(--warn); font-weight: 700; }
.posture-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.posture-list__r { display: grid; grid-template-columns: 12px 10rem minmax(0, 1fr); align-items: baseline; gap: .8rem; padding: .6rem .2rem; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.posture-list__r .dot { align-self: center; }
.posture-list__t { color: var(--ink-2); }
@media (max-width: 600px) { .posture-list__r { grid-template-columns: 12px minmax(0, 1fr); } .posture-list__t { grid-column: 2; } }
.filter-chip { display: inline-flex; align-items: center; gap: .3rem; justify-self: start; padding: .1rem .2rem .1rem .8rem; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: var(--t-sm); font-weight: 700; }
.os-chip--vendor { background: var(--ink); color: var(--bg); margin-right: .3rem; }

/* NAS: detalle */
.nas__via { color: var(--ink-3); font-size: var(--t-sm); }
.nas__vols { display: grid; gap: .8rem; }
.nas__vol { display: grid; gap: .3rem; font-size: var(--t-sm); }
.nas__disks { margin-top: .4rem; }
.nas__env { margin-top: .4rem; }

/* Asistente «Añadir NAS» */
.nasw { display: grid; gap: 1rem; }
.nasw__steps { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; margin: 0; padding: 0 0 .6rem; border-bottom: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-3); }
.nasw__st { display: inline-flex; align-items: center; gap: .45rem; }
.nasw__n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sunken); font-weight: 700; font-size: var(--t-xs); }
.nasw__st.is-on { color: var(--ink); font-weight: 700; } .nasw__st.is-on .nasw__n { background: var(--ink); color: var(--bg); }
.nasw__st.is-done .nasw__n { background: var(--ok-fill); color: #0E1F1C; }
.nasw__h { font-size: 1.1rem; }
.nasw__content { display: grid; gap: .8rem; min-width: 0; }
.nasw__tut { display: grid; gap: .8rem; padding-top: .8rem; }
.nasw__tutgrid { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 640px) { .nasw__tutgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.nasw__list { font-size: var(--t-sm); color: var(--ink); }
.nasw__fig { margin: 0; display: grid; gap: .3rem; }
.nasw__tip { display: flex; gap: .5rem; align-items: flex-start; padding: .6rem .8rem; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--t-sm); }
.nasw__tip svg { width: 18px; height: 18px; flex: none; color: var(--brand-text); }
.nasw__foot { display: flex; justify-content: space-between; gap: .5rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.nasw__result:empty { display: none; }
dialog.modal--wide:has(.nasw) { width: min(760px, calc(100vw - 24px)); }
.sch { width: 100%; height: auto; }
.sch__frame { fill: var(--surface); stroke: var(--line-strong); }
.sch__bar { fill: var(--sunken); }
.sch__dot { fill: var(--line-strong); }
.sch__side { fill: var(--surface-2); }
.sch__hi { fill: var(--brand-soft); stroke: var(--brand-text); stroke-width: 1; }
.sch__t { fill: var(--ink-2); font: 9px var(--f-text); }
.sch__t--sm { font-size: 8px; } .sch__t--on { fill: var(--ink); font-weight: 700; } .sch__t--h { fill: var(--ink); font-weight: 700; font-size: 11px; }
.sch__t--muted { fill: var(--ink-3); } .sch__t--btn { fill: var(--brand-ink); font-weight: 700; }
.sch__toggle { fill: var(--ok-fill); } .sch__knob { fill: #fff; }
.sch__field { fill: var(--bg); stroke: var(--line-strong); }
.sch__btn { fill: var(--brand); }

/* Demo: comando de ejemplo */
.cmd-demo { display: grid; gap: .5rem; min-width: 0; }
.cmd-demo__band { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: 0; padding: .55rem .8rem; border-radius: var(--r-s, 8px); background: var(--ink); color: var(--bg); font-size: var(--t-sm); }
.cmd-demo__band > span { flex: 1 1 14rem; min-width: 0; }
.cmd-demo__band .btn--primary { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.cmd--demo code { color: var(--ink-3); }

/* ——— Análisis por empresa ——— */
.subnav--top { margin-top: 0; margin-bottom: .4rem; }
.tabs-slot:empty { display: none; }
.an { display: grid; gap: 2rem; min-width: 0; }
.an > *, .an-body > * { min-width: 0; }
.an-scope { margin: -.6rem 0 0; }
.an-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.an-body { display: grid; gap: 2.4rem; }
.an-verdict { display: flex; gap: 1rem; align-items: flex-start; }
.an-verdict > .dot { width: 18px; height: 18px; margin-top: .75rem; flex: none; }
.an-verdict__t { font-size: clamp(1.9rem, 4.6vw, 2.8rem); line-height: 1.08; letter-spacing: -.03em; margin: 0; }
.an-verdict__s { margin: .5rem 0 0; color: var(--ink-2); font-size: var(--t-lg); max-width: 60ch; }
.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1.4rem 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.an-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.an-kpi { padding: 0 1.4rem; border-left: 1px solid var(--line); min-width: 0; }
.an-kpi:first-child { border-left: 0; }
.an-kpi p { margin: 0; }
.an-kpi__l { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.an-kpi__v { margin-top: .55rem !important; font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.an-kpi__of { display: inline-block; font-size: .5em; color: var(--ink-3); letter-spacing: 0; white-space: nowrap; }
.an-kpi__s { margin-top: .45rem !important; color: var(--ink-2); font-size: var(--t-sm); }
.an-kpi--att .an-kpi__v { color: var(--warn); }
@media (max-width: 900px) {
  .an-kpis, .an-kpis--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .an-kpi { padding: 1.1rem 1rem; border-left: 0; border-top: 1px solid var(--line); }
  .an-kpi:nth-child(-n+2) { border-top: 0; }
  .an-kpi:nth-child(even) { border-left: 1px solid var(--line); }
  .an-kpis--5 .an-kpi:last-child { grid-column: 1 / -1; border-left: 0; }
}
.an-recs { list-style: none; margin: 0; padding: 0; display: grid; }
.an-rec { display: flex; align-items: center; gap: .9rem; padding: .9rem .2rem; border-bottom: 1px solid var(--line); }
.an-rec__ic { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; }
.an-rec__ic svg { width: 18px; height: 18px; }
.an-rec--crit .an-rec__ic { background: var(--crit-soft); color: var(--crit); }
.an-rec--warn .an-rec__ic { background: var(--warn-soft); color: var(--warn); }
.an-rec--info .an-rec__ic { background: var(--sunken); color: var(--ink-2); }
.an-rec__m { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.an-rec__d { color: var(--ink-2); font-size: var(--t-sm); }
.an-rec__go { flex: none; }
@media (max-width: 600px) { .an-rec { flex-wrap: wrap; } .an-rec__go { margin-left: calc(32px + .9rem); } }
.an-tblwrap { min-width: 0; }
.an-tbl th[scope="row"] a { font-weight: 700; color: var(--ink); }
.an-tbl th[scope="row"] { display: table-cell; }
.an-tbl th[scope="row"] .list__muted { display: block; font-weight: 400; }
.an-sort { display: inline-flex; align-items: center; gap: .25rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.an-sort__ic { width: 14px; height: 14px; opacity: .35; transition: transform .15s; }
th[aria-sort="ascending"] .an-sort__ic { opacity: 1; transform: rotate(180deg); }
th[aria-sort="descending"] .an-sort__ic { opacity: 1; }
.an-cell { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.an-cell__t { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); font-size: var(--t-xs); }
.mbar { position: relative; flex: none; width: 72px; height: 6px; border-radius: 3px; background: var(--sunken); }
.mbar__f { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--ok-fill); }
.mbar--warn .mbar__f { background: var(--warn-fill); }
.mbar--crit .mbar__f { background: var(--crit-fill); }
.mbar__p { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.an-disk { display: grid; gap: .05rem; }
@media (max-width: 760px) {
  .an-tbl thead { display: none; }
  .an-tbl, .an-tbl tbody { display: block; }
  .an-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 1rem; padding: .9rem .2rem; border-bottom: 1px solid var(--line); }
  .an-tbl th[scope="row"] { display: flex; justify-content: space-between; gap: .5rem; grid-column: 1 / -1; padding: 0; border: 0; }
  .an-tbl td { display: grid; gap: .25rem; padding: 0; border: 0; }
  .an-tbl td::before { content: attr(data-l); color: var(--ink-3); font-size: var(--t-xs); font-weight: 700; }
}

/* Informe imprimible (siempre en «papel» claro) */
.report-open { overflow: hidden; }
.report-view { position: fixed; inset: 0; z-index: 200; overflow: auto; background: var(--sunken); padding: 0 16px 3rem; }
.rep-bar { position: sticky; top: 0; display: flex; justify-content: space-between; gap: .8rem; max-width: 210mm; margin: 0 auto; padding: .8rem 0; background: var(--sunken); }
.rep { max-width: 210mm; margin: 0 auto; padding: 18mm 16mm; background: #fff; color: #0E1F1C; box-shadow: var(--shadow); border-radius: 4px; font-size: 11pt; line-height: 1.45; }
.rep p { margin: 0; }
.rep__brand { font-family: var(--f-logo); font-weight: 800; color: #0F8A5C; font-size: 12pt; }
.rep__t { margin: .6rem 0 .2rem; font-size: 20pt; line-height: 1.15; letter-spacing: -.02em; color: #0E1F1C; outline: none; }
.rep__co { font-size: 14pt; font-weight: 700; }
.rep__meta { color: #4A5A57; font-size: 10pt; }
.rep__head { padding-bottom: 6mm; border-bottom: 1px solid #D5DEDB; }
.rep__verdict { margin: 7mm 0 6mm; padding: 5mm 6mm; border-radius: 8px; border-left: 5px solid #8A9895; background: #F5F7F6; }
.rep__verdict h2 { margin: 0 0 .3rem; font-size: 14pt; color: #0E1F1C; }
.rep__verdict--ok { border-left-color: #2BD08A; } .rep__verdict--warn { border-left-color: #E09B12; } .rep__verdict--crit { border-left-color: #D2394A; }
.rep__figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4mm; margin-bottom: 7mm; }
.rep__fig { padding: 3mm 0; border-top: 2px solid #0E1F1C; }
.rep__fl { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .06em; color: #4A5A57; font-weight: 700; }
.rep__fv { font-size: 18pt; font-weight: 700; margin-top: 1mm !important; }
.rep__fs { font-size: 9pt; color: #4A5A57; }
.rep__h { font-size: 13pt; margin: 6mm 0 3mm; color: #0E1F1C; }
.rep__recs { margin: 0; padding-left: 1.3em; display: grid; gap: 2.5mm; }
.rep__recs li span { display: block; color: #4A5A57; font-size: 10pt; }
.rep__tbl { width: 100%; border-collapse: collapse; font-size: 10pt; }
.rep__tbl th, .rep__tbl td { padding: 2mm 2mm; border-bottom: 1px solid #D5DEDB; text-align: left; }
.rep__tbl thead th { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .05em; color: #4A5A57; border-bottom-color: #0E1F1C; }
.rep__tbl tbody tr { break-inside: avoid; }
.rep__foot { margin-top: 8mm; padding-top: 3mm; border-top: 1px solid #D5DEDB; color: #4A5A57; font-size: 9pt; }
@media (max-width: 700px) { .rep { padding: 8mm 6mm; } .rep__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rep__tbl { font-size: 9pt; } }
@media print {
  @page { size: A4; margin: 14mm; }
  body.report-open > *:not(.report-view) { display: none !important; }
  body.report-open { background: #fff !important; overflow: visible; }
  .report-view { position: static; overflow: visible; padding: 0; background: #fff; }
  .rep-bar { display: none; }
  .rep { max-width: none; margin: 0; padding: 0; box-shadow: none; border-radius: 0; }
  .rep__figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rep section { break-inside: avoid-page; }
  .rep__verdict { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Pie legal de la app */
.app-foot { border-top: 1px solid var(--line); }
.app-foot__in { width: min(var(--page-w), 100% - 32px); margin: 0 auto; padding: 1.2rem 0 1.6rem; display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; font-size: var(--t-xs); }
.app-foot a { color: var(--ink-3); }
.app-foot a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .content { padding-bottom: 2.5rem; }
  .app-foot__in { width: auto; margin: 0 16px; padding-bottom: calc(var(--tab-h) + 1.5rem + env(safe-area-inset-bottom)); }
}
.install-data { margin-top: .4rem; font-size: var(--t-sm); }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.an-sortsel { display: none; }
@media (max-width: 760px) { .an-sortsel { display: flex; align-items: center; gap: .6rem; font-size: var(--t-sm); color: var(--ink-2); margin-bottom: .4rem; } .an-sortsel select { width: auto; } }

/* Correos: interruptores */
.np { display: grid; gap: 1rem; }
.switch { display: flex; align-items: flex-start; gap: .8rem; cursor: pointer; }
.switch__in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__ui { flex: none; position: relative; width: 40px; height: 24px; margin-top: 1px; border-radius: 999px; background: var(--line-strong); transition: background .15s; }
.switch__ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch__in:checked + .switch__ui { background: var(--ok); }
.switch__in:checked + .switch__ui::after { transform: translateX(16px); }
.switch__in:focus-visible + .switch__ui { outline: 3px solid var(--focus, var(--brand-text)); outline-offset: 2px; }
.switch__in:disabled + .switch__ui { opacity: .6; }
.switch__t { display: grid; gap: .15rem; }
.np-usage { display: flex; align-items: center; gap: .5rem; }
.np-usage svg { width: 16px; height: 16px; flex: none; }
.rule__mail { display: inline-flex !important; align-items: center; gap: .3rem; margin-top: .2rem; color: var(--brand-text) !important; font-size: var(--t-xs); font-weight: 700; }
.rule__mail svg { width: 14px; height: 14px; }

/* Pagos «Pronto» */
.soon-note { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }