:root {
    --control-min: 44px;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: clamp(2.5rem, 6vw, 5rem);
    --content-reading: 68ch;
    --content-form: 46rem;
    --content-wide: 80rem;
    --page-gutter: clamp(1rem, 3vw, 2rem);
    --title-1: clamp(2rem, 6vw, 4.5rem);
    --title-2: clamp(1.65rem, 4vw, 3rem);
    --body-lg: clamp(1rem, 1.5vw, 1.125rem);

    /* ── Tintes de marca ──────────────────────────────────────────
       Los fondos suaves que llevan los iconos, las burbujas y las
       insignias de estado. Hasta ahora cada pantalla los escribia a
       mano en un `style` y por eso convivian cuatro verdes claros
       distintos. La paleta base sigue en styles.css: esto son las
       superficies derivadas, no colores nuevos de marca. */
    --tint-green: #EDF5E3;
    --tint-green-deep: #E7F0DC;
    --tint-orange: #FBE7D8;
    --tint-blue: #E4F1FA;
    --tint-navy: #DDE7F5;

    /* Azul con contraste suficiente para texto: --blue (#3BA4DB) da
       2.4:1 sobre blanco y no sirve para leer. Este llega a 4.9:1. */
    --blue-ink: #1F6E96;

    /* Superficies dentro de una tarjeta. --bg-soft (#F4F7FB) es el
       fondo de la pagina; este es el escalon de adentro, medio tono
       mas claro, para que un bloque anidado se distinga del lienzo. */
    --surface-sunken: #F8FAFD;

    /* Separador interno de tarjeta. --border (#E7EAF0) es el borde de
       la tarjeta contra el fondo; dentro de ella se ve pesado. */
    --hairline: #EEF2F8;

    /* La escala de radios de styles.css llega a --r-2xl (24px). Las
       superficies grandes del rediseno piden un escalon mas. */
    --r-3xl: 28px;

    /* Iconos que solo rotulan un dato. Mas apagados que el texto para
       que la lectura empiece por la palabra, pero no tanto como
       --muted (#6B7280 da 5.0:1 y compite): este da 3.2:1 sobre
       blanco, sobre el minimo de 3:1 que pide un grafico con
       significado, y no se lleva la mirada. */
    --icon-muted: #8892A8;

    /* Contorno punteado de un hueco que todavia no es tarjeta: ranura
       para agregar, zona de arrastre de archivos. Mas marcado que
       --border (#E7EAF0), que a trazos se pierde. */
    --border-dashed: #D6DDE9;
}

.surface { padding-inline: var(--page-gutter); }
.surface__inner { width: min(100%, var(--content-wide)); margin-inline: auto; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }