/* ============================================================
   HRZN VIEW SWITCH — Bridge <-> Classic

   El Dashboard tiene dos vistas de los mismos datos: el Bridge
   (el motor visual) y el Classic View (la lista rankeada). El
   control es UNO y vive en el mismo lugar en las dos pantallas:
   ultima linea del bloque de texto del hero, debajo de la bajada.

   Por que ahi y no en la pastilla de utilidad: la pastilla del
   Bridge ya venia llena. Con el switch adentro, su borde izquierdo
   se le mete 211px encima del titular a 1280 y 51px a 1440 (el
   titular es nowrap, no cede). En el hero el switch flota sobre el
   texto, que es justamente lo que nombra.

   Esta hoja la cargan bridge.html y bridge-classic.html. No
   depende de horizon-pages.css ni de horizon-2050-shell.css: se
   estiliza sola y usa los tokens --hz-* con fallback, porque cada
   pagina trae los suyos desde una hoja distinta.
   ============================================================ */

.hz-viewswitch {
  display: flex;
  flex: none;
  width: max-content;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(220, 228, 245, .95);
  border-radius: var(--hz-r-input, 10px);
  box-shadow: 0 1px 2px rgba(10, 30, 70, .06);
  backdrop-filter: blur(10px);
}

.hz-viewswitch > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--hz-ink-3, #3A4A66);
  border-radius: var(--hz-r-tag, 8px);
  transition: background .16s cubic-bezier(.22, .61, .36, 1),
              color .16s cubic-bezier(.22, .61, .36, 1);
}

.hz-viewswitch > a:hover {
  color: var(--hz-blue, #2450E4);
  background: rgba(234, 240, 251, .92);
}

/* La vista en la que estas: azul lleno, como cualquier seleccion
   del sistema. Un solo activo, siempre. */
.hz-viewswitch > a.is-active,
.hz-viewswitch > a.is-active:hover {
  color: #fff;
  background: var(--hz-blue, #2450E4);
}

/* Los iconos se estilizan aca y no via .hz-ico: bridge.html no
   carga la hoja que la define. */
.hz-viewswitch svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hz-viewswitch > a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(88, 169, 244, .42);
}

/* En el hero: una linea propia debajo de la bajada. */
.hz-viewswitch.is-hero { margin-top: 15px; }

/* El hero del Bridge mide 156px y su texto llega hasta 91: el
   switch necesita una linea mas. Los 44px salen del iframe, que es
   flex:1 — por eso el override vive aca y no en la hoja del
   diseñador, que se reemplaza con cada entrega del Bridge. */
.bridge-main.antigravity-host .hero-coast { height: 200px; }

/* Angosto: quedan los dos iconos, que ya distinguen las vistas. */
@media (max-width: 720px) {
  .hz-viewswitch > a { padding: 0 9px; }
  .hz-viewswitch > a > span { display: none; }
}