/* Capa shell: pestañas de sección dentro de cada unidad. Dueño: 03-05. Solo tokens.
   La activa de la página va por aria-current; la de un ancla (#por-asignar, #sin-atender, #por-rtc)
   se marca con :has(:target), sin JS. El color de a{} de legado se neutraliza en .pestana. */
@layer shell{
  .pestanas{padding:0 var(--esp-4);background:var(--sup-app);border-bottom:2px solid var(--pestana-linea)}
  .pestanas-lista{display:flex;flex-wrap:nowrap;gap:var(--esp-1);margin:0;padding:0;list-style:none}
  .pestanas-lista > li{margin:0;padding:0}

  /* Objetivo táctil de 44 px de alto en todos los anchos (2.5.5, 06-02). */
  .pestana{display:inline-flex;align-items:center;gap:var(--esp-2);min-height:44px;padding:var(--esp-2) var(--esp-3);margin-bottom:-2px;color:var(--pestana-tx);font-weight:600;text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent;border-radius:var(--r-sm) var(--r-sm) 0 0}
  .pestana:hover{color:var(--pestana-activa-tx)}
  .pestana:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:calc(-1 * var(--foco-ancho))}
  .pestana[aria-current="page"]{color:var(--pestana-activa-tx);border-bottom-color:var(--pestana-activa-borde);font-weight:700}

  /* Salto a una sección del tablero: el servidor no ve el #, así que la pestaña del ancla
     se marca con :has(:target) y Resumen (aria-current en /jefe/<u>) deja de verse activa.
     Sin soporte de :has() queda marcada Resumen y el salto funciona igual. */
  .app:has(#por-asignar:target) .pestana[data-seccion="por-asignar"],
  .app:has(#sin-atender:target) .pestana[data-seccion="sin-atender"],
  .app:has(#por-rtc:target) .pestana[data-seccion="por-rtc"]{color:var(--pestana-activa-tx);border-bottom-color:var(--pestana-activa-borde);font-weight:700}
  .app:has(#por-asignar:target) .pestana[data-seccion="resumen"],
  .app:has(#sin-atender:target) .pestana[data-seccion="resumen"],
  .app:has(#por-rtc:target) .pestana[data-seccion="resumen"]{color:var(--pestana-tx);border-bottom-color:transparent;font-weight:600}

  .pestana-cuenta{display:inline-block;min-width:1.5em;padding:0 var(--esp-2);border-radius:var(--r-pill);background:var(--cuenta-fondo);color:var(--cuenta-tx);font-size:var(--t-chico);font-weight:700;line-height:1.5;text-align:center}

  /* Móvil: varias líneas, nunca scroll interno ni desborde de página. */
  @media (max-width: 1023.98px){
    .pestanas{padding:0 var(--esp-3)}
    .pestanas-lista{flex-wrap:wrap;row-gap:var(--esp-1)}
  }
}