/* Página combinada: pestañas de elección y ajustes de encabezado. */
.brand-line { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; row-gap: 6px; }

.tabs {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--panel);
}
.tabs button {
  border: 0;
  border-radius: 6px;
  padding: 5px 12px;
  background: none;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--control); color: var(--control-ink); }
.tabs .tab-short { display: none; }

/* las secciones de la elección no activa se ocultan aunque su CSS fije display */
[hidden] { display: none !important; }

/* el panel lateral se fija justo debajo del encabezado, sea cual sea su altura */
@media (min-width: 901px) {
  .panel {
    top: calc(env(safe-area-inset-top, 0px) + var(--bar-h, 128px) + 12px);
    max-height: calc(100vh - var(--bar-h, 128px) - 30px);
  }
}
.foot p + p { margin-top: 8px; }

@media (max-width: 560px) {
  /* título y pestañas ocupan su propia fila y pueden encogerse: si no, la fila toma
     el ancho natural de las pestañas (~410 px) y la página se desplaza en horizontal */
  .brand { flex: 1 1 100%; min-width: 0; }
  .brand-line { gap: 10px; }
  .tabs { width: 100%; }
  /* cada pestaña ocupa según su texto (las tres etiquetas cortas no miden lo mismo) */
  .tabs button { position: relative; flex: 1 1 auto; min-width: 0; padding-inline: 6px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
  /* etiqueta corta a la vista; la larga queda para lectores de pantalla */
  .tabs .tab-short { display: inline; }
  .tabs .tab-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* el reloj baja a su propia línea para que el slider no desborde la pantalla */
  .bar-time { flex-wrap: wrap; row-gap: 2px; }
  .time-track { flex-basis: calc(100% - 50px); }
  .time-readout { order: 3; flex-basis: 100%; text-align: left; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
}
@media (max-width: 360px) {
  .tabs button { padding-inline: 4px; font-size: 12px; }
}