/* ══════════════════════════════════════════════════════════════════
   ADMIN.OSCORP.INK · COMPONENTES
   Regla de marca: --acc (lima) es para selección/foco/estado activo,
   NUNCA fondo de botón primario ni texto de cuerpo. Botón primario es
   tinta sólida (--ink). Ver brand.css.
   ══════════════════════════════════════════════════════════════════ */

.topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.topbar__orb { width: 26px; height: 26px; flex: 0 0 auto; }
.topbar__title { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.01em; }
.topbar__sub {
  font-size: var(--fs-micro); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase;
  margin-left: auto;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }

.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.page-head h1 { font-size: var(--fs-display); font-weight: 700; letter-spacing: -.02em; }
.page-head p { font-size: var(--fs-small); color: var(--ink-2); max-width: 56ch; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.stats div { background: var(--surface); padding: var(--sp-3) var(--sp-4); }
.stats b { display: block; font-size: 20px; font-weight: 700; font-feature-settings: 'tnum' 1; }
.stats span { font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-2);
  font-size: var(--fs-small); padding: 7px 12px; border-radius: var(--r-full);
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }

.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.card-pad { padding: var(--sp-4); }

.map-shell { position: relative; height: 480px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hairline); }
#mapa { position: absolute; inset: 0; }

.legend {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3); z-index: 2;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-micro); color: var(--ink-2); backdrop-filter: blur(4px);
}
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--r-sm); font-size: var(--fs-small); font-weight: 500;
  border: 1px solid transparent;
}
.btn-primary { background: var(--ink); color: var(--surface); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--hairline); }
.btn-accent { background: color-mix(in srgb, var(--acc) 18%, var(--surface)); color: var(--ink); border-color: color-mix(in srgb, var(--acc) 45%, transparent); }

.ruta-bar {
  display: none; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4); background: var(--ink); color: var(--bg); border-radius: var(--r-md);
}
.ruta-bar.is-active { display: flex; }
.ruta-bar__step { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 80%, white); }
.ruta-bar h2 { font-size: 18px; color: var(--bg); }
.ruta-bar__meta { font-size: var(--fs-small); opacity: .72; }
.ruta-bar__acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.ruta-bar__acts a, .ruta-bar__acts button {
  font-size: var(--fs-small); padding: 8px 12px; border-radius: var(--r-sm);
  border: 1px solid rgba(245,244,240,.3); color: var(--bg);
}
.ruta-bar__acts .fill { background: var(--accent); color: var(--acc-ink); border-color: var(--accent); }

.panel-note { font-size: var(--fs-micro); color: var(--ink-3); line-height: 1.5; max-width: 68ch; }