:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Acotado a #app > header por lo mismo que la regla del fondo: sin acotar, el foco dentro del
   encabezado de pestaña (que también es un <header>) salía blanco sobre fondo blanco. */
#app > header :focus-visible,.mr-bar :focus-visible{outline-color:#fff}
@supports not selector(:focus-visible){
  a:focus,button:focus,select:focus,input:focus,textarea:focus,[tabindex]:focus{outline:2px solid var(--accent);outline-offset:2px}
  header a:focus,header button:focus,.mr-bar button:focus{outline-color:#fff}
}
/* Targets táctiles: en pantalla táctil los controles densos llegan a 44px de alto. Se hace solo
   con (pointer:coarse) para no perder densidad en el escritorio, donde se usan con mouse. */
@media(pointer:coarse){
  /* .side-item y .side-gtrig son la barra lateral; antes eran .tab y .famtrig, las pestañas del
     encabezado. Si esta lista se queda con los nombres viejos, los ítems del menú vuelven a medir
     menos de 44px en pantalla táctil y no se nota mirando la pantalla. */
  .iconbtn,.prail a,.mr-open,.side-item,.side-gtrig{min-height:44px;display:inline-flex;align-items:center}
  .acts{gap:8px}
}
/* 16px/1.5 es el default accesible: todo texto que no declare tamaño propio nace legible.
   Los tamaños menores del tablero son deliberados y explícitos (texto secundario, chips, ejes). */