/* Page tabs under the header and the full-page analysis view (Gráficas, Eventos, Gráficas + eventos,
   Señales) of one compressor. */
.topnav { border-bottom: 1px solid var(--rule); background: transparent; }
.topnav__row { position: relative; display: flex; gap: 2px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
.topnav__row::-webkit-scrollbar { display: none; }
.topnav__tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 12px 12px 10px; border-bottom: 2px solid transparent; font: 600 12.5px/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.topnav__tab:hover { color: var(--ink); }
.topnav__tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.topnav__count { min-width: 18px; padding: 2px 5px; border-radius: 9px; background: var(--st-alarm); color: var(--on-accent); font: 700 11px/1 var(--font); letter-spacing: 0; text-align: center; }
.topnav__count[hidden] { display: none; }
@media (min-width: 960px) { .topnav__row { padding: 0 20px; } }

/* Analysis page: replaces the room in the stage; the 3D keeps running unseen, so coming back is instant. */
.analysis { grid-area: scene; min-width: 0; padding: 0 var(--gutter) 32px; }
.analysis[hidden] { display: none; }
.app.is-analysis .scene-cell { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.app.is-analysis .wires, .app.is-analysis .kpis { display: none; }
.analysis__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 18px 0 6px; }
.analysis__title { position: relative; margin: 0; padding-bottom: 8px; font: 600 26px/1.15 var(--font-serif); }
.analysis__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 52px; height: 2px; background: var(--accent); }
.analysis__units { margin-left: auto; }
.unit-chip { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.unit-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--ink-3)); }
.unit-chip[aria-pressed="true"] .unit-chip__dot { box-shadow: 0 0 0 2px var(--on-accent); }

/* The embedded detail is a plain block (never the phone sheet) and its title is the page title. */
.detail--embedded { position: static !important; inset: auto; z-index: auto; overflow: visible; padding: 0; background: none; box-shadow: none; border-radius: 0; animation: none; }
.detail--embedded .detail__name { display: none; }
.detail--embedded .detail__head { padding-top: 6px; }
#apanel-charts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 22px 32px; }

@media (min-width: 960px) {
  .app.is-analysis { grid-template-rows: auto auto minmax(0, 1fr); }
  .analysis { overflow-y: auto; overscroll-behavior: contain; padding: 0 32px 40px; }
}

/* Conjunto page */
.fleet__summary { margin: 0; font: 600 15px/1.3 var(--font-cond); color: var(--ink-2); }
.fleet__charts { display: grid; gap: 8px 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .fleet__charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fleet__block--wide { grid-column: 1 / -1; } }
.fleet__block { padding: 16px 0 6px; border-top: 1px solid var(--rule); min-width: 0; }
.fleet__hint { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-3); }
.fleet.is-nohistory .fleet__charts { display: none; }
.chart__band { fill: var(--tone); opacity: 0.85; }
.chart__legend li[class*="state-"] i.is-dot, .chart__tip-row[class*="state-"] i.is-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tone); }