/* =========================================================
   APP SWITCHER — trigger "Apps" + panel flotante del header
   Dueño de: .app-switcher · .app-switcher-trigger ·
   .app-switcher-panel · .switcher-item (y breakpoints).

   Mismo lenguaje visual y patrón de JS que iptv/css/app-switcher.css
   (copiado, NO enlazado — proyectos independientes). Los
   breakpoints son PROPIOS del Portal (900px / 480px, los mismos
   donde ya reacciona .shell/.env-tag en portal.css) — los de
   IPTV (1099px / 650px) no aplican acá, son layouts distintos.

   Carga después de css/tokens.css y css/base.css.
========================================================= */

/* ---------- COMPOSICIÓN DEL HEADER (Opción B aprobada) ----------
   .topbar y .env-tag son de css/portal.css, pero el alcance
   aprobado para esta tarea es únicamente este archivo — así que el
   ajuste de composición vive acá (carga después de portal.css, así
   que gana en la cascada) en vez de tocar ese archivo.

   Antes: .topbar con "space-between" repartía marca / switcher /
   "Uso interno" en 3 tercios — el botón quedaba matemáticamente
   centrado en el header. Ahora: marca y switcher quedan en el
   mismo grupo izquierdo (deja de repartirse en tercios), pero con
   una separación propia deliberada entre ambos — ni pegado al
   logo ni centrado en la ventana — y "Uso interno" se empuja al
   extremo derecho con margin-left:auto. */
.topbar {
  justify-content: flex-start;
}

/* Separación propia respecto a la marca — escalada al ancho
   disponible (no un valor fijo) para que el trigger caiga
   aproximadamente en la zona del 35-40% del header en escritorio
   y se achique de forma proporcional en pantallas angostas, en
   vez de sentirse pegado al branding o quedar clavado a un valor
   que no escala. Los topes (min/max) evitan extremos: nunca menos
   de 64px (angosto) ni más de 300px (pantallas muy anchas). */
.app-switcher {
  margin-left: calc(clamp(64px, 20vw, 300px) + 8px);
}

.env-tag {
  margin-left: auto;
}


.app-switcher {
  position: relative;
  flex: 0 0 auto;
}


/* ---------- TRIGGER ("Apps") ---------- */

.app-switcher-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-2);

  padding: 10px var(--sp-4);

  border: 1px solid var(--border-brand);
  border-radius: var(--r-pill);

  color: var(--on-brand);
  background: var(--grad-brand);

  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.03em;

  transition:
    transform var(--dur-1) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease);
}

.app-switcher-trigger svg {
  width: 16px;
  height: 16px;
}

.app-switcher-trigger:hover {
  transform: translateY(-1px);
  background: var(--grad-brand-hover);
  box-shadow: var(--sh-2), var(--glow-brand);
}

.app-switcher-trigger:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 2px;
}

.app-switcher-trigger[aria-expanded="true"] {
  box-shadow: var(--sh-2), var(--glow-brand);
}


/* ---------- PANEL FLOTANTE ---------- */

.app-switcher-panel {
  position: absolute;
  top: calc(100% + var(--sp-4));
  left: 0;
  z-index: 40;

  width: max-content;
  min-width: 260px;

  padding: var(--sp-2);

  display: flex;
  flex-direction: column;
  gap: 2px;

  border: 1px solid var(--border-brand);
  border-radius: var(--r-lg);
  background: var(--surface);

  box-shadow: var(--sh-3), var(--glow-brand);
}

.switcher-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);

  padding: 9px 10px;

  border: 1px solid transparent;
  border-radius: var(--r-sm);

  color: var(--text-2);
  text-decoration: none;

  transition:
    background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

a.switcher-item:hover,
a.switcher-item:focus-visible {
  background: var(--surface-2);
  color: var(--text);
  outline: none;
}

.switcher-icon {
  flex: 0 0 auto;

  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.switcher-icon svg {
  width: 16px;
  height: 16px;
  color: var(--brand-cyan);
}

.switcher-text {
  min-width: 0;
  flex: 1 1 auto;
}

.switcher-text strong {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.switcher-text em {
  display: block;
  margin-top: 1px;

  font-style: normal;
  color: var(--text-3);
  font-size: var(--fs-xs);
}

/* ToviGamboa Tools — la app actual acá en el Portal: destacada,
   sin navegar (equivalente a IPTV en el switcher de iptv/). */
.switcher-item.is-current {
  background: var(--surface-2);
  border-color: var(--border-brand);
  cursor: default;
}

.switcher-badge {
  flex: 0 0 auto;
  margin-left: auto;

  padding: 3px 10px;

  border-radius: var(--r-pill);
  background: var(--grad-brand);

  color: var(--on-brand);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* VPN / FlujoTV — visuales, deshabilitados, sin acción */
.switcher-item.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.switcher-soon {
  flex: 0 0 auto;
  margin-left: auto;

  color: var(--text-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
  white-space: nowrap;
}


/* =========================================================
   RESPONSIVE — breakpoints propios del Portal
========================================================= */

/* Bajo 900px (mismo punto donde .shell pasa a 1 columna en
   portal.css): el trigger sigue agrupado junto a la marca (no
   pegado al borde — "Uso interno" queda más a la derecha).
   Anclar el panel con "right" contra .app-switcher (el propio
   botón) lo desborda por la izquierda en pantallas angostas —
   se ancla contra .topbar completo en su lugar, con el mismo
   margen que ya usa el padding del header (var(--sp-4)) para
   que no quede pegado al borde de la pantalla. */
@media (max-width: 900px) {

  .topbar {
    position: relative;
  }

  .app-switcher {
    position: static;
  }

  .app-switcher-panel {
    left: auto;
    right: var(--sp-4);
    top: calc(100% + var(--sp-4));
  }
}

/* Bajo 480px (mismo punto donde .env-tag ya se oculta en
   portal.css): trigger compacto, solo ícono. */
@media (max-width: 480px) {

  .app-switcher-trigger span {
    display: none;
  }

  .app-switcher-trigger {
    padding: 10px;
  }

  .app-switcher-panel {
    min-width: 0;
    width: min(300px, calc(100vw - 2 * var(--sp-4)));
  }
}