/* apps/web/public/tactil.css
 *
 * Objetivos de toque de 44 x 44 px (WCAG 2.5.5, guia de Apple) en pantallas tactiles. Los botones del ADS miden
 * 32 px, buenos para un raton y pequenos para un dedo. Solo se carga con `media="(pointer: coarse)"` (index.html):
 * en un escritorio con raton no se aplica y el aspecto no cambia.
 *
 * Hoja estatica y no cssMap: `@atlaskit/css` solo admite sus media queries (cortes de ancho, tema, movimiento) y
 * rechaza `(pointer: coarse)`; y los botones son del ADS, asi que hay que llegar a ellos desde fuera. Se alcanzan por
 * su sitio: la barra superior y el menu lateral del layout del ADS (`header`/`nav` con `data-layout-slot`) y las
 * acciones de la cabecera de una pagina, que llevan `data-objetivos-tactiles`. Solo minimos: lo que ya mide 44 o mas
 * no cambia, y el contenido del boton sigue centrado como en el ADS.
 */
header[data-layout-slot] :is(button, a[href]),
nav[data-layout-slot] :is(button, a[href]),
[data-objetivos-tactiles] :is(button, a[href]) {
  min-block-size: 44px;
  min-inline-size: 44px;
}
/* Los botones con texto del ADS alinean su etiqueta arriba: al crecer, «Crear» quedaba pegado al borde superior. */
header[data-layout-slot] button,
nav[data-layout-slot] button,
[data-objetivos-tactiles] button {
  align-items: center;
}
/* Con los botones a 44 px la barra de un iPhone (390 px) se pasaba por 1 px: el logo ya mide mas de 44 de ancho y su
 * relleno lateral (de escritorio, para el anillo de foco) es lo que sobra. */
header[data-layout-slot] a[href='/'] {
  padding-inline: 0;
}
/* Las entradas del menu lateral (side-nav-items) son una rejilla de 2rem de alto fija cuyo enlace hereda las filas
 * (subgrid): crecer el enlace no basta, hay que crecer la fila que lo contiene. */
nav[data-layout-slot] :has(> :is(button, a[href])) {
  min-block-size: 44px;
}