/* Estructura de página y rejillas. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  flex-wrap: wrap;
}

.brand {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.brand__mark {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

/*
 * Tira de pestañas: en vez de partirse en varias filas cuando no cabe
 * (que empuja el contenido y cambia de alto según cuántos labs haya),
 * se desliza en una sola fila. El degradado del borde derecho insinúa que
 * hay más pestañas sin necesitar una barra de scroll visible; solo se activa
 * cuando de verdad sobran pestañas fuera de vista (clase .has-overflow,
 * la pone js/main.js), para no recortar la última pestaña cuando todas caben.
 */
.nav {
  display: flex;
  gap: var(--space-1);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  /* Estrecho: las pestañas ocupan su propia fila (debajo de marca y acciones) y se deslizan. */
  order: 2;
  flex: 1 0 100%;
  min-width: 0;
}

.nav.has-overflow {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav__link {
  flex: none;
  white-space: nowrap;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 550;
  font-size: 0.92rem;
}

.nav__link:hover {
  color: var(--text);
  background: var(--panel-2);
}

.nav__link.is-current {
  color: var(--on-accent);
  background: var(--accent);
}

.site-header__actions {
  order: 1;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Ancho: marca · pestañas (ocupan lo que sobra y se deslizan) · acciones, en una sola fila. */
@media (min-width: 900px) {
  .nav {
    order: 1;
    flex: 1 1 0;
  }

  .site-header__actions {
    order: 2;
  }
}

/* Móvil: la cabecera ocupa menos y marca, guía y acciones caben en la primera fila. */
@media (max-width: 480px) {
  .site-header__inner {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }

  .brand {
    font-size: 1rem;
  }
}

/*
 * Acciones compactas: el selector sin etiqueta visible (la lleva en
 * aria-label) y los botones solo con icono; el texto queda como tooltip.
 */
/*
 * Selector de fabricante: una sola «píldora» con dos partes (familia | plataforma).
 * La plataforma solo existe en familias con varias (Cisco: ASA / IOS).
 */
.vendor-select {
  display: inline-flex;
  align-items: stretch;
  font-size: 0.82rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--bg-elev);
  overflow: hidden;
}

.vendor-select[hidden] {
  display: none;
}

.vendor-select:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.vendor-select__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.vendor-select__variant[hidden] {
  display: none;
}

.vendor-select__input {
  width: auto;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text);
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  padding: 4px 10px;
  cursor: pointer;
}

.vendor-select__input:hover {
  background-color: var(--accent-soft);
}

/* La plataforma es secundaria: separada por una línea y con menos peso. */
.vendor-select__variant {
  border-left: 1px solid var(--border-strong);
  font-weight: 500;
  color: var(--text-muted);
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s, border-color 0.15s;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--accent);
}

.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-5);
  /*
   * Los puntos de ruptura del banco de trabajo miran el ANCHO DEL CONTENIDO, no el de la ventana
   * (@container main …): con una barra lateral fija el contenido es más estrecho que la ventana.
   * Equivalen a los de antes sin barra: ancho de ventana − 2 × 24 px de margen.
   */
  container: main / inline-size;
}

/* El contenido recibe el foco al cambiar de página o con «Saltar al contenido»: no es un control, sin contorno. */
.site-main:focus {
  outline: none;
}

.site-footer {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.8rem;
  padding: var(--space-4) var(--space-5);
}

.lab,
.intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.grid {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.grid--main {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
}

.grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Banco de trabajo del laboratorio: acciones | ① dónde está el paquete |
 * ② qué pasa en el equipo + ③ cómo va el paquete. En pantallas anchas las
 * tres columnas caben en una sola vista; más estrecho, el panel del equipo
 * baja a todo el ancho bajo el escenario.
 */
.lab__col--left {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}

.lab__side {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/*
 * Banco de trabajo, por el ANCHO DEL CONTENIDO (no el de la ventana: una guía fija le quita sitio):
 *  - ≥ 1100 px: tres columnas (acciones | escenario | equipo), todas del alto de una pantalla;
 *  - 1033–1099 px: dos columnas (acciones | escenario) y el panel del equipo baja a todo el ancho;
 *  - menos: una columna.
 * Las columnas laterales miden lo mismo que el escenario (--stage-h lo pone la vista) y su contenido
 * se desplaza dentro de cada panel, no la página.
 */
@container main (min-width: 1033px) {
  .grid--main.lab__start {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  }

  .lab__col--left {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    height: var(--stage-h, auto);
    max-height: var(--stage-h, none);
  }

  .lab__col--left > .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .lab__col--left .panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--space-2);
  }

  /*
   * Barra de scroll siempre visible: en macOS las barras se ocultan solas y
   * no se nota que hay más contenido. Con ::-webkit-scrollbar Chrome/Safari
   * la dibujan fija; Firefox usa las propiedades estándar.
   */
  .lab__col--left .panel__body::-webkit-scrollbar {
    width: 8px;
  }

  .lab__col--left .panel__body::-webkit-scrollbar-track {
    background: var(--panel-2);
    border-radius: 999px;
  }

  .lab__col--left .panel__body::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
  }

  .lab__col--left .panel__body::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
  }

  @supports not selector(::-webkit-scrollbar) {
    .lab__col--left .panel__body {
      scrollbar-width: thin;
      scrollbar-color: var(--border-strong) var(--panel-2);
    }
  }

  /* La cabecera de escenarios se queda arriba mientras se desplaza la lista. */
  .lab__col--left .presets__head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--panel);
  }

  /* Izquierda: escenarios ~55 %, retos el resto. */
  .lab__col--left > .panel--send { flex: 0 1 55%; }
  .lab__col--left > .panel--challenges { flex: 1 1 0; }

  /* Plegar un panel le da su espacio al hermano. */
  .lab__col--left > .panel.is-collapsed { flex: none; min-height: 0; }
  .lab__col--left > .panel:not(.is-collapsed):has(+ .panel.is-collapsed),
  .lab__col--left > .panel.is-collapsed + .panel:not(.is-collapsed) { flex: 1 1 0; }

  /* Con los dos paneles de la izquierda plegados, la columna es un riel vertical y el escenario gana ancho. */
  .grid--main.lab__start:has(> .lab__col--left > .panel--send.is-collapsed):has(> .lab__col--left > .panel--challenges.is-collapsed) {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .lab__col--left:has(> .panel--send.is-collapsed):has(> .panel--challenges.is-collapsed) > .panel {
    padding: var(--space-3) 0;
  }

  .lab__col--left:has(> .panel--send.is-collapsed):has(> .panel--challenges.is-collapsed) > .panel--challenges {
    flex: 1 1 0;
  }

  .lab__col--left:has(> .panel--send.is-collapsed):has(> .panel--challenges.is-collapsed) .panel__head {
    flex-direction: column-reverse;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--space-3);
  }

  .lab__col--left:has(> .panel--send.is-collapsed):has(> .panel--challenges.is-collapsed) .panel__actions {
    margin: 0;
  }

  .lab__col--left:has(> .panel--send.is-collapsed):has(> .panel--challenges.is-collapsed) .panel__title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0;
    white-space: nowrap;
  }

  .lab__start .legend {
    gap: var(--space-1) var(--space-3);
  }

  /*
   * El banco de trabajo mide justo una pantalla (menos la cabecera fija):
   * el escenario fija la altura y el recorrido estira para rellenarla; las
   * columnas laterales la copian (--stage-h). Así el paquete y su contexto
   * tienen sitio sin que nada se salga de la vista.
   */
  .lab__start > .panel--stage {
    display: flex;
    flex-direction: column;
    height: max(540px, calc(100vh - 104px));
  }

  .lab__start > .panel--stage > :not(.stage__trace) {
    flex: none;
  }

  .lab__start .stage__trace {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .lab__start .panel--stage .trace-wrap {
    flex: 1;
    height: auto;
    min-height: 90px;
  }

  /*
   * Tope de alto del diagrama: al plegar los paneles laterales el escenario se
   * ensancha y, sin tope, el dibujo crecería hasta sacar el banco de trabajo de
   * la pantalla. El resto del escenario ocupa unos 420px (cabecera incluida);
   * el dibujo se encaja centrado en el alto que queda.
   */
  .lab__start .topo {
    max-height: max(260px, calc(100vh - 420px));
  }
}

/* Tres columnas: las laterales se ajustan al ancho (en vez de fijarse) para que el escenario no se estreche. */
@container main (min-width: 1100px) {
  .grid--main.lab__start {
    grid-template-columns: clamp(220px, 20%, 280px) minmax(0, 1fr) clamp(310px, 28%, 380px);
  }

  .lab__side {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    height: var(--stage-h, auto);
    max-height: var(--stage-h, none);
  }

  .lab__side > .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .lab__side .panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--space-2);
  }

  /*
   * Barra de scroll siempre visible: en macOS las barras se ocultan solas y
   * no se nota que hay más contenido. Con ::-webkit-scrollbar Chrome/Safari
   * la dibujan fija; Firefox usa las propiedades estándar.
   */
  .lab__side .panel__body::-webkit-scrollbar {
    width: 8px;
  }

  .lab__side .panel__body::-webkit-scrollbar-track {
    background: var(--panel-2);
    border-radius: 999px;
  }

  .lab__side .panel__body::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
  }

  .lab__side .panel__body::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
  }

  @supports not selector(::-webkit-scrollbar) {
    .lab__side .panel__body {
      scrollbar-width: thin;
      scrollbar-color: var(--border-strong) var(--panel-2);
    }
  }

  /* Derecha: un solo panel (niveles 2 y 3 más el contexto). */
  .lab__side > .panel--device { flex: 1 1 0; }

  /* El contexto ocupa lo que deja el nivel 2 y desplaza su contenido por dentro. */
  .panel--device > .level-block:last-child {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* Panel derecho: nivel 2 y paquete a su tamaño; el contexto, lo que quede. */
  .panel--device > .level-block--packet {
    flex: none;
  }

  /* Detalle del paso más compacto en la columna lateral. */
  .lab__side .inspector__title {
    font-size: 0.92rem;
    margin-bottom: var(--space-1);
  }

  /* Con la columna izquierda plegada a riel, la lateral conserva su ancho. */
  .grid--main.lab__start:has(> .lab__col--left > .panel--send.is-collapsed):has(> .lab__col--left > .panel--challenges.is-collapsed) {
    grid-template-columns: 44px minmax(0, 1fr) clamp(310px, 28%, 380px);
  }
}

@container main (max-width: 1032px) {
  .grid--main,
  .grid--two {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel--stage {
    order: -1;
  }
}

@media (max-width: 640px) {
  .site-main {
    padding: var(--space-3);
  }
}

/* Panel del equipo a todo el ancho: el recuadro de contexto (reglas, estado,
   Internet, equipo) no crece con su contenido. El cuerpo entero es el área
   de scroll, así la tabla de conexiones se desplaza dentro del cuadro. */
@container main (max-width: 1099px) {
  .panel--device .level-block--context > .panel__body {
    min-height: 200px;
    max-height: min(460px, 55vh);
    overflow: auto;
    overscroll-behavior: contain;
  }

  @supports not selector(::-webkit-scrollbar) {
    .panel--device .level-block--context > .panel__body {
      scrollbar-width: thin;
      scrollbar-color: var(--border-strong) var(--panel-2);
    }
  }

  .panel--device .level-block--context > .panel__body::-webkit-scrollbar {
    width: 8px;
  }

  .panel--device .level-block--context > .panel__body::-webkit-scrollbar-track {
    background: var(--panel-2);
    border-radius: 999px;
  }

  .panel--device .level-block--context > .panel__body::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
  }

  .panel--device .level-block--context > .panel__body::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
  }
}

/* Riel (los dos paneles de la izquierda plegados): el abierto temporal sale a
   la derecha del riel, sobre el escenario, con el alto del banco de trabajo. */
@container main (min-width: 1033px) {
  /* El flotante se ancla a la columna (no a su riel): siempre empieza arriba
     y cabe en el alto del banco de trabajo, sea Enviar o Retos. */
  .lab__col--left:has(> .panel--send.is-collapsed):has(> .panel--challenges.is-collapsed) {
    position: relative;
  }

  .lab__col--left:has(> .panel--send.is-collapsed):has(> .panel--challenges.is-collapsed) > .panel.is-peek {
    position: static;
  }

  .lab__col--left:has(> .panel--send.is-collapsed):has(> .panel--challenges.is-collapsed) > .panel.is-peek > .panel__body {
    z-index: 40;
    top: 0;
    left: calc(100% + 8px);
    width: 300px;
    max-height: var(--stage-h, 70vh);
  }

  /* En el riel el panel temporal no hereda el giro vertical del título. */
  .lab__col--left:has(> .panel--send.is-collapsed):has(> .panel--challenges.is-collapsed) > .panel.is-peek > .panel__body .panel__title {
    writing-mode: horizontal-tb;
    transform: none;
  }
}