/* perfectPulse — lo INNEGOCIABLE. Declara el orden de las capas (guard → base → skin) y fija lo que ningún skin puede cambiar.
   Va primero y con !important: en una cascada con capas, lo importante de la capa más temprana gana a todo lo demás, así que un
   skin no puede deshacerlo (y test/skin-boundary.test.mjs le prohíbe usar !important). Solo entra aquí lo que protege la mecánica
   o la accesibilidad; el aspecto va en base.css (estructura) y en el skin (decoración). */
@layer guard, base, skin;

@layer guard {
  [x-cloak] { display: none !important; }
  .sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }

  /* el canvas a pantalla completa recibe el dibujo: sin gestos del navegador y sin tapas encima */
  #stage { position: fixed !important; inset: 0 !important; display: block !important; touch-action: none !important; }
  #crt, .skin-badge { pointer-events: none !important; }   /* ni el efecto de pantalla ni la etiqueta de skin reciben toques */

  /* objetivos táctiles de al menos 44 px: es un SUELO, no un tamaño. Un control que quiera más lo pide con --hit-h / --hit-w
     (p. ej. .act { --hit-h: 56px }); un skin puede subirlos o bajarlos, pero nunca por debajo de 44 px */
  :is(button, input, select, textarea, a[href]) {
    min-width: max(44px, var(--hit-w, 0px)) !important;
    min-height: max(44px, var(--hit-h, 0px)) !important;
  }
  /* LA ÚNICA excepción al suelo: el selector de idioma (ES · EN · PT) es compacto, 33 px de alto (un 25 % menos que 44) y sigue a 44 px
     de ancho. Pasa de sobra el mínimo de WCAG 2.2 AA (24 px). Va más específica que la regla de arriba (`:is()` toma la especificidad de
     `a[href]`, y un `.lang` suelto perdería); test/skin.test.mjs fija que no haya ninguna otra. */
  .langs > button.lang { min-height: 33px !important; }

  /* modo ligero (assets/js/lite.js): la capa de efecto de pantalla es solo decoración y cubre toda la pantalla, así que se oculta con cualquier skin */
  html[data-lite] #crt { display: none !important; }

  /* sin animaciones ni transiciones si la persona lo pidió */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}