/* ═══════════════════ LA MAQUETA, EN CASA ═══════════════════
 *
 * Lo justo para que el presupuesto vivo conviva con el sistema de la web. Se
 * carga la ÚLTIMA, después de las hojas de la maqueta, y no debería crecer:
 * si algo de aquí se repite, es que toca arreglarlo en su sitio.
 *
 * Los tokens NO se tocan: la maqueta ya está hecha con los de la casa (84 de
 * 88 son idénticos, y los cuatro que bailaban se han dejado en manos de
 * `app.css`). Lo que sí hace falta es apagar lo que la web añade por debajo.
 */

/* EL ARO AZUL DE TAILWIND FORMS. El plugin le pone a todo input, al enfocarlo,
 * un aro de su azul-600 con `box-shadow`. Aquí el foco no lo lleva el input:
 * lo pinta el campo que lo envuelve, con el aro rosa de la casa. Así que el del
 * plugin sobra, y encima desentona con todo lo demás. */
.c input:focus,
.c textarea:focus,
.c select:focus,
.c input:focus-visible,
.c textarea:focus-visible,
.c select:focus-visible { box-shadow: none; }

/* La cabecera de la web es más alta que la que traía la maqueta y es fija: el
 * alto lo manda `--alto-cabecera` de `app.css`, y la escena ya cuenta con él. */

/* EL TECLADO DEL MÓVIL (04-10-2026). Con el teclado fuera, la escena entra en
 * «modo teclado» (`.c--teclado`, ver _c.js) y la cabecera de la web se aparta
 * hacia arriba: en un iPhone el teclado deja unos 400 px y los 68 de la
 * cabecera se los comía a los campos. Vuelve sola al cerrar el teclado. */
#app > header:has(+ .c) {
    transition: translate var(--dur-corto) var(--ease-salida), opacity var(--dur-corto) var(--ease-salida);
}
#app > header:has(+ .c--teclado-sube) {
    translate: 0 -150%;
    opacity: 0;
}

/* LA ESCENA SE ENSEÑA CUANDO LLEGA SU ROPA (P-15, 05-10-2026). `PresupuestoVivo.vue`
 * esconde la escena, la hoja y el pase (`visibility: hidden`) hasta que esta hoja,
 * que es la última de las del configurador, ha cargado: antes, entre el HTML y las
 * hojas se veían «Atrás», «Siguiente» y una ▶ negra enorme sin vestir. El fondo
 * rosa no espera: es de la página. */
#c .c-arriba,
#c .c-escena,
#c .c-panel {
    visibility: visible;
}

/* EL HUECO DE LA PRIMERA PANTALLA, RESERVADO (16-10-2026). El servidor pinta la
 * hoja con `#cuerpo` vacío y Cuca sin dibujar; `_c.js` monta la primera pantalla
 * («¿Qué celebramos?»: las opciones y el botón de empresa) y a Cuca al cargar, y
 * como la hoja está anclada abajo todo lo de encima subía de golpe: +212 px la
 * hoja y +71 la escena en el teléfono (CLS 0,16), +220 la hoja a 1280 (0,04).
 * Medido en producción con la fuente ya cargada. Mientras el cuerpo está vacío,
 * un pseudoelemento ocupa lo que medirá la pantalla (el relleno lo sigue
 * poniendo `_c.css`, por eso es contenido y no `min-height`); en cuanto `_c.js`
 * lo rellena, `:empty` deja de casar y manda el contenido. La escala de Cuca,
 * igual: el dibujo pequeño mide 100 × 104 (`--c-cuca-ancho` por 1,04). Si la
 * primera pantalla cambia de piezas, cambian estos dos números. */
#c .c-cuerpo:empty::before {
    content: '';
    display: block;
    height: 13.25rem;
}
@media (width >= 64rem) {
    #c .c-cuerpo:empty::before {
        height: 13.75rem;
    }
}
@media (width < 64rem) {
    #c .c-cuca__escala:empty::before {
        content: '';
        display: block;
        width: var(--c-cuca-ancho);
        height: calc(var(--c-cuca-ancho) * 1.04);
    }
}