/*
 * La BASE del aspecto de serie de Iris para la cara pública (v1.6,
 * 2026-10-13): el reset, la tipografía y los colores del documento, y
 * las dos pantallas que Iris pinta por su cuenta —la 404 y la de inicio
 * de un pago—.
 *
 * Hasta la v1.6 vivía en `public.css`, junto a lo que necesita CUALQUIER
 * página. Se separó porque una web con su propio diseño —una plantilla
 * comprada sobre Bootstrap, con su propio reset— la cargaba en cada
 * página sin usarla: es el aspecto de las plantillas de serie, no el de
 * esa web. Ahora una web puede traer la suya en
 * `public/assets/site/base.css`, y entonces Iris carga esa en su lugar,
 * o ninguna si el archivo no tiene ni una regla (`Assets::stylesheets()`).
 *
 * Lo que sigue en `public.css`, y se carga siempre, es lo que ninguna
 * web debe poder quitarse sin darse cuenta: el aviso de cookies, el
 * cartel de un vídeo retenido, el campo trampa de los formularios, el
 * foco visible, el texto solo para lectores de pantalla y el respeto al
 * movimiento reducido.
 *
 * La 404 y la página de pago cargan SIEMPRE esta hoja, aunque la web
 * traiga la suya: las pinta Iris con sus plantillas, no la web.
 *
 * Todo dentro de `@layer`, como el resto del CSS del núcleo: cualquier
 * regla que una web escriba sin capa gana.
 */

/* El mismo orden de capas que `public.css`: lo declaran las dos porque
 * esta puede no cargarse, y el orden no debe depender de cuál llegue. */
@layer iris.tokens, iris.reset, iris.base, iris.layout, iris.components;

@layer iris.reset {

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

    body,
    h1, h2, h3, h4,
    p, figure, blockquote, dl, dd {
        margin: 0;
    }

    /* Los medios nunca desbordan su contenedor ni arrastran el espacio
     * fantasma que deja `display: inline`.
     *
     * `audio` va aparte (2026-09-08): el reproductor nativo tiene un
     * ancho por defecto de unos 300px que NO se encoge solo, así que en
     * un móvil de 390 se sale de un contenedor con márgenes. Con
     * `width: 100%` ocupa lo que le den, que es lo que espera quien mete
     * un audio en mitad de un texto. No se le fija altura: cada
     * navegador dibuja su propio control. */
    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
    }

    audio {
        display: block;
        width: 100%;
    }

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

@layer iris.base {

    body {
        /* Las tres líneas que faltaban: sin ellas los tokens del sitio
         * están definidos pero no los consume nadie. */
        background: var(--color-surface, #ffffff);
        color: var(--color-text, #1a1a1e);
        font-family: var(--font-sans, system-ui, sans-serif);

        font-size: var(--text-base, 1rem);
        line-height: 1.6;
        -webkit-text-size-adjust: 100%;

        /* El `body` NO limita el ancho (cambiado el 2026-08-13).
         *
         * Antes ponía aquí `max-width` + `margin-inline: auto`, y con un
         * solo tipo de bloque de contenido tenía sentido. Con la
         * biblioteca de bloques de diseño deja de tenerlo: una sección
         * con fondo de color tiene que llegar a los dos bordes de la
         * pantalla, y con el contenedor en el `body` era imposible —se
         * veía una banda blanca con márgenes a los lados en vez de una
         * franja completa.
         *
         * Ahora cada bloque gestiona su propio ancho: pinta su fondo a
         * todo lo ancho y centra su CONTENIDO con `max-width:
         * var(--layout-max)` por dentro (ver `__interior` en hero,
         * tarjetas y presentacion). El bloque `html`, que no tenía
         * contenedor propio, lo estrena en su hoja (`.iris-bloque-html`).
         *
         * Es además lo que ya anticipaba el comentario que había aquí:
         * «una web que quiera secciones a sangre lo cambia». Resultó no
         * ser cosa de una web, sino de cualquiera que use bloques. */
        margin: 0;
    }

    h1, h2, h3, h4 {
        line-height: 1.2;
        text-wrap: balance;
    }

    a {
        color: var(--color-accent, #2563eb);
    }
}

/* ── La página de inicio de un pago (2026-09-23) ─────────────────────
   `core/templates/pago.hbs`: una caja centrada con el importe y el
   botón que envía el formulario firmado al TPV. Solo tokens, dentro de
   la capa: lo que un sitio escriba sin capa gana. */
@layer iris.base {
    .iris-pago {
        min-height: 100vh;
        display: grid;
        place-content: center;
        padding: var(--space-6, 2rem) var(--space-4, 1rem);
        background: var(--color-surface-alt, #f5f5f5);
        color: var(--color-text, #1b1b1b);
    }

    .iris-pago__caja {
        max-width: 28rem;
        display: grid;
        gap: var(--space-3, 0.75rem);
        text-align: center;
        padding: var(--space-6, 2rem);
        border: 1px solid var(--color-border, #e5e5e5);
        border-radius: var(--radius-md, 0.5rem);
        background: var(--color-surface, #fff);
    }

    .iris-pago__sitio {
        margin: 0;
        font-size: var(--text-sm, 0.875rem);
        color: var(--color-text-muted, #666);
    }

    .iris-pago__titulo {
        margin: 0;
        font-size: var(--text-lg, 1.25rem);
    }

    .iris-pago__importe {
        margin: 0;
        font-size: var(--text-h2, 2rem);
        font-weight: 700;
    }

    .iris-pago__texto,
    .iris-pago__aviso {
        margin: 0;
        color: var(--color-text-muted, #666);
    }

    .iris-pago__aviso {
        padding: var(--space-2, 0.5rem);
        border-radius: var(--radius-md, 0.5rem);
        background: color-mix(in srgb, var(--color-accent, #2563eb) 12%, transparent);
        color: var(--color-text, #1b1b1b);
    }

    .iris-pago__form {
        display: grid;
        gap: var(--space-2, 0.5rem);
    }

    .iris-pago__boton {
        min-height: 44px;
        padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
        border: 0;
        border-radius: var(--radius-md, 0.5rem);
        background: var(--color-accent, #2563eb);
        color: var(--color-accent-contrast, #fff);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    .iris-pago__boton:focus-visible {
        outline: 2px solid var(--color-accent, #2563eb);
        outline-offset: 2px;
    }

    .iris-pago__volver {
        color: var(--color-text-muted, #666);
        font-size: var(--text-sm, 0.875rem);
    }
}

/*
 * La página 404 del núcleo (2026-10-05): una columna centrada con el
 * nombre de la web, el titular y la salida a la portada. Solo tokens,
 * con su valor de respaldo, como el resto de esta hoja.
 */
@layer iris.layout {

    .iris-error {
        display: grid;
        gap: var(--space-4, 1.5rem);
        max-width: 40rem;
        min-height: 100vh;
        margin-inline: auto;
        padding: var(--space-6, 3rem) var(--layout-gutter, 1.5rem);
        align-content: center;
    }

    .iris-error__sitio a {
        color: var(--color-text-muted, #5e5e5e);
        font-weight: 600;
        text-decoration: none;
    }

    .iris-error__titulo {
        font-size: var(--text-h1, 2.5rem);
        line-height: 1.1;
    }

    .iris-error__texto {
        color: var(--color-text-muted, #5e5e5e);
    }

    .iris-error__volver {
        font-weight: 600;
    }
}