/* Reset mínimo, tipografía autoalojada, cifras tabulares y accesibilidad de
   teclado. Nada de esto depende de un CDN. */

/* `hidden` significa escondido, y punto.
 *
 * El navegador ya trae `[hidden] { display: none }`, pero es una regla
 * flojísima: CUALQUIER clase que declare su propio `display` le gana. Como
 * media interfaz es flex o grid, esconder algo con `hidden` fallaba en
 * silencio una y otra vez, y por eso hay treinta y cuatro parches
 * `.lo-que-sea[hidden] { display: none }` repartidos por las hojas — uno por
 * cada vez que alguien lo descubrió a la mala.
 *
 * Es una trampa que se rearma sola: la próxima clase con `display` nace ya
 * rota y nadie lo nota hasta verlo en pantalla. Con esta regla deja de
 * existir. Los parches viejos quedan de sobra, pero no estorban.
 */
[hidden] {
  display: none !important;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fuentes/ibm-plex-sans-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../../fuentes/ibm-plex-sans-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* La tercera familia, y la única. Es para TÍTULOS, no para leer:
   «falta ponerle otro tipo de letra, algo más elegante».

   CLAUDE.md pide todo en IBM Plex Sans y Mono, y esto se sale de ahí. Se
   eligió Plex Serif y no otra por eso mismo: es la hermana de las que ya
   están, del mismo diseñador y con las mismas proporciones, así que combina
   sin que parezcan dos sistemas pegados. Un peso, subconjunto latino, 20 KB
   —menos que cualquiera de las otras tres— y solo la piden las pantallas de
   acceso. */
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../../fuentes/ibm-plex-serif-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../../fuentes/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  /* El fondo va en los DOS y no solo en body.
     Por regla del navegador, el fondo de body se propaga al lienzo cuando
     html no trae ninguno, así que esto normalmente sobra. Pero un navegador
     que oscurece por su cuenta mira el fondo para decidir si la página es
     clara u oscura, y un html transparente lo deja adivinando. Aquí no se
     le deja adivinar nada. */
  background: var(--papel);
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-interfaz);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Ningún enlace se ve como un link de navegador por defecto (azul,
   subrayado): cada componente que use <a> decide su propio color y si
   lleva subrayado (normalmente solo en :hover/:focus-visible). */
a {
  color: inherit;
  text-decoration: none;
}

/* Dinero y cantidades: sin esto los totales bailan al actualizarse. */
.tm-cifra,
.tm-vista-reloj {
  font-variant-numeric: tabular-nums;
}

/* ---------- Que se sienta app y no página ----------
 *
 * Al tocar cualquier cosa, Chrome de Android pinta encima un recuadro azul
 * suyo. El dueño lo dijo mirando su teléfono: «al tocar algo sale un
 * subrayado azul del navegador, ¿se puede quitar para que parezca más app?».
 *
 * Se quita, pero NO se puede quitar y ya: ese recuadro, por feo que sea,
 * está contestando el toque. Sin nada en su lugar los botones se sienten
 * muertos, que es peor. Por eso abajo va el `:active` propio.
 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* La respuesta al toque, en el estilo de la casa: el control se hunde un
   pelo y se apaga un instante. Se nota con el dedo encima y desaparece al
   soltar, igual que en una aplicación.

   Va en lo que SE TOCA para hacer algo. Un texto cualquiera no se hunde. */
.tm-boton:active,
.tm-nav-enlace:active,
.tm-chip:active,
.tm-depto:active,
.tm-fila-boton:active,
button:not(:disabled):active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* Mantener pulsado un botón sacaba el menú de «copiar» y dejaba el texto
   seleccionado en azul — otra cosa que delata que es una página. En los
   controles no hay nada que copiar. El texto de verdad —precios, nombres,
   la CLABE— se sigue pudiendo seleccionar. */
.tm-boton,
.tm-nav-enlace,
.tm-chip,
.tm-depto,
.tm-menu-boton,
button {
  -webkit-user-select: none;
  user-select: none;
  /* Y de paso quita el retardo de un cuarto de segundo que algunos
     navegadores dejan por si el toque era un doble toque para acercar. */
  touch-action: manipulation;
}

/* El foco de teclado NO se toca: es otra cosa y hace falta.
   Quien navega con teclado o lector tiene que ver dónde está parado. */
:focus-visible {
  outline: 2px solid var(--accion);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tm-boton:active,
  .tm-nav-enlace:active,
  .tm-chip:active,
  .tm-depto:active,
  .tm-fila-boton:active,
  button:not(:disabled):active {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}