/* AEHCH - Marcador HEMA
   base.css : lo unico que comparten de verdad las dos ventanas.

   Aqui NO hay colores. Cada ventana tiene los suyos, con dos temas cada una
   (oscuro y claro), y los declara en su propia hoja: `control.css` para el
   panel y `pantalla.css` para la proyeccion. Antes la paleta vivia aqui, pero
   los nombres eran de color —`--negro`, `--oro`— y no de papel, asi que al
   anadir el tema claro habrian quedado cosas como `--negro: #f4f1ea`.

   El fondo se pinta solo en `body`, sin tocar `html`, a proposito: asi el
   navegador lo propaga al lienzo entero y el tema claro llega hasta abajo
   aunque la pagina sea mas corta que la ventana.
*/
:root {
  --radio: 10px;
  --tipo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--tipo);
}

/* Las cifras del marcador van tabulares: sin esto, al pasar de 9 a 10 el
   numero "salta" de sitio porque cada digito mide distinto. */
.cifra { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Ocultar con el atributo 'hidden' tiene que funcionar SIEMPRE.

   El navegador aplica [hidden]{display:none} desde su hoja por defecto, y
   cualquier regla nuestra que fije un 'display' le gana, aunque sea menos
   especifica: la hoja del autor pesa mas que la del navegador. Eso ya mordio
   una vez —'.reloj-num{display:block}' dejaba visible el reloj que el JS
   creia haber ocultado, y salian dos numeros a la vez—, asi que se zanja aqui
   de una vez y no elemento por elemento. */
[hidden] { display: none !important; }

button { font-family: inherit; cursor: pointer; }
button:disabled { opacity: .4; cursor: not-allowed; }