/* Layout and breakpoints. Values mirror the --bp-* tokens (tokens.css):
   phone ≤480 · tablet ≤1024 · laptop ≤1440 · desktop ≤1920 · monitor >1920.
   test/tokens.test.js fails if a @media width here is not one of them. */

/* ---------- Atlas landing: the map only ---------- */
.atlas { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 45% 50%, var(--night) 0%, var(--abyss) 70%); }
.atlas-map { position: absolute; top: var(--header-h); left: var(--gutter); right: var(--gutter); bottom: calc(var(--space-6) * 2); }
.atlas-map svg.atlas-svg { width: 100%; height: 100%; display: block; }
.atlas-dep { stroke: var(--abyss); stroke-width: .8; vector-effect: non-scaling-stroke; transition: filter .2s; }
.atlas-dep:hover { filter: brightness(1.18); }
.atlas-dep[data-region="andina"] { fill: var(--region-andina); }
.atlas-dep[data-region="caribe"] { fill: var(--region-caribe); }
.atlas-dep[data-region="pacifica"] { fill: var(--region-pacifica); }
.atlas-dep[data-region="orinoquia"] { fill: var(--region-orinoquia); }
.atlas-dep[data-region="amazonia"] { fill: var(--region-amazonia); }
.atlas-dep[data-region="insular"] { fill: var(--region-insular); }
/* Selection (Atlas map rule): 1.8 px sky outline, fill unchanged; painted last by map.js. */
.atlas-dep.is-selected { stroke: var(--sky); stroke-width: 1.8; stroke-linejoin: round; }
.atlas-dep.is-selected:hover { filter: none; }
.atlas-neighbor { fill: var(--neighbor); stroke: var(--rule); stroke-width: .6; vector-effect: non-scaling-stroke; }
.atlas-neighbor-label { fill: var(--mist); opacity: .22; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.atlas-map.is-zoomed .atlas-neighbor-label, .atlas-map.is-zoomed .atlas-inset-g { display: none; }
.atlas-grat { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.atlas-grat-fine { display: none; stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.atlas-inset { fill: var(--abyss); stroke: var(--rule); vector-effect: non-scaling-stroke; }
.atlas-inset-label { fill: var(--fog); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; }

/* MapPin: the whole card is the link to the Sede 3D. */
.atlas-pin { position: absolute; width: 0; height: 0; z-index: 5; color: var(--mist); text-decoration: none; }
.atlas-pin:focus-visible { outline: none; }
.atlas-pin:focus-visible .atlas-pin-card { outline: 2px solid var(--sky); outline-offset: 2px; }
.atlas-pin-mark { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; overflow: visible; }
.atlas-pin-line { position: absolute; top: -48px; width: 72px; height: 48px; overflow: visible; }
.atlas-pin-card {
  position: absolute; bottom: 48px; padding: 10px 12px; min-width: 196px; white-space: nowrap; cursor: pointer;
  background: var(--panel); border: 1px solid var(--sky); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.atlas-pin-card strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.atlas-pin-card .ar-label { display: block; font-size: 10px; }
.atlas-pin-card .ar-label.is-accent { color: var(--sky); }
.atlas-pin-card .ar-label.is-sub { color: var(--fog); margin-top: 2px; }
.atlas-pin[data-side="left"] .atlas-pin-line { left: -72px; }
.atlas-pin[data-side="left"] .atlas-pin-card { right: 72px; }
.atlas-pin[data-side="right"] .atlas-pin-line { left: 0; transform: scaleX(-1); }
.atlas-pin[data-side="right"] .atlas-pin-card { left: 72px; }
/* No room beside the pin (map.js pinSide): card centred above with a short vertical guide. */
.atlas-pin[data-side="above"] .atlas-pin-card { left: 0; transform: translateX(-50%); bottom: 40px; }
.atlas-pin[data-side="above"] .atlas-pin-line { left: 0; top: -40px; width: 1px; height: 26px; }
.atlas-pin:hover .atlas-pin-card { background: var(--night); }

/* Status-only overlay: equipment OK, alarms, data health. */
.atlas-status { position: absolute; z-index: 6; left: var(--gutter); bottom: calc(var(--space-4) + 28px); display: flex; }
.atlas-status-item { display: grid; gap: 2px; align-content: start; padding: 10px var(--space-4); min-width: 0; }
.atlas-status-item + .atlas-status-item { border-left: 1px solid var(--rule); }
.atlas-status-item .ar-label { font-size: 10px; }
.atlas-status-item b { font-family: var(--font-display); font-weight: var(--type-figure-weight); font-size: var(--type-figure-size); line-height: var(--type-figure-line); font-variant-numeric: tabular-nums; }
.atlas-status-item b.is-alarm { color: var(--state-alarm); }
.atlas-status-health { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: 22px; }
.atlas-foot { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); margin: 0; bottom: var(--space-4); pointer-events: none; font-size: 10.5px; }

/* ---------- Login: styles live in login/login.css (branded split layout) ---------- */

/* ---------- Monitor > 1920 ---------- */
@media (min-width: 1921px) {
  :root { --header-h: 72px; }
}

/* ---------- Laptop ≤ 1440 ---------- */
@media (max-width: 1440px) {
  :root { --gutter: calc(var(--space-6) * 2); }
}

/* ---------- Tablet ≤ 1024 ---------- */
@media (max-width: 1024px) {
  :root { --gutter: var(--space-6); }
  .ar-header { gap: var(--space-4); }
  .ar-header-drawer, .ar-nav { gap: var(--space-4); }
  .ar-brand-sub { display: none; }
  .ar-panel h1 { font-size: 30px; }
}

/* ---------- Phone ≤ 480 ---------- */
@media (max-width: 480px) {
  :root { --gutter: var(--space-4); --header-h: 56px; }
  .ar-header { gap: var(--space-2); }
  .ar-wordmark { font-size: 17px; }
  .ar-menu-btn { display: inline-flex; }
  .ar-header-drawer {
    display: none; position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-4);
    background: var(--night); border-bottom: 1px solid var(--rule);
  }
  .ar-header-drawer.is-open { display: flex; }
  .ar-nav { flex-direction: column; gap: 0; }
  .ar-nav-link { padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
  .ar-user-panel { position: static; margin-top: var(--space-2); }

  /* Map on top, status overlay as a full-width strip at the bottom. */
  .atlas-map { left: var(--space-2); right: var(--space-2); bottom: 96px; top: var(--header-h); }
  .atlas-status { left: var(--space-2); right: var(--space-2); bottom: var(--space-2); }
  .atlas-status-item { flex: 1 1 0; padding: var(--space-2) var(--space-3); }
  .atlas-foot { display: none; }
  .ar-panel h1 { font-size: 26px; }
  .ar-dl { grid-template-columns: 104px 1fr; }
  .ar-dl dt { padding-left: var(--space-4); }
  .ar-dl dd { padding-right: var(--space-4); }
  .ar-section { padding: var(--space-4); }
  .atlas-pin-card { min-width: 0; padding: 8px 10px; }
  .atlas-pin-card strong { font-size: 13px; }

}