/**
 * Reset y estilos base. Depende de tokens.css (debe cargarse primero).
 */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-tinta);
    font: var(--texto-cuerpo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p {
    margin: 0;
}

h1 { font: var(--texto-titulo); text-wrap: balance; }
h2 { font: var(--texto-subtitulo); text-wrap: balance; }

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

/* Estado de foco visible siempre — requisito de accesibilidad, y en
   exteriores con sol el usuario a veces navega por teclado externo o
   lector de accesibilidad, no solo por tacto. */
:focus-visible {
    outline: 3px solid var(--color-agua);
    outline-offset: 2px;
}

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

/* Cifras alineadas en columna: precios, pesos, fechas. */
.numerico {
    font-variant-numeric: tabular-nums;
}

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

/* Layout raíz de una pantalla operativa: dejar espacio para la barra de
   acción inferior fija, para que el último elemento de la lista nunca
   quede tapado detrás de ella. */
.pantalla {
    min-height: 100dvh;
    padding-bottom: calc(var(--altura-barra-inferior) + var(--espacio-4));
}

.contenedor {
    max-width: 480px;
    margin-inline: auto;
    padding-inline: var(--espacio-4);
}