/* ===========================================================================
   LA PIZARRA DE PRECIOS — la piel de la zona «Precios» de la ficha de producto
   (docs\central\pizarra-de-precios-2026-09-18.md)

   Va DESPUES de app.css en el indice, y por eso no necesita `!important` ni
   selectores inflados: es la ultima palabra sobre una region que solo existe
   aqui. No redefine ni una ficha: todas las que usa son las `--plano-*` de
   plano.css, que es la fuente de verdad del sistema.

   DOS GRAMATICAS EN EL MISMO COMPONENTE, y el corte esta en 900 px:
     - por encima, LA MATRIZ: presentaciones en filas, listas de precios en
       columnas, y se escribe como una hoja de calculo;
     - por debajo, LA LISTA: una lista de precios a la vez, elegida en una tira
       de pastillas, y las presentaciones como filas de etiqueta.

   Las dos estan SIEMPRE en el marcado y es el ancho el que enseña una y
   esconde la otra. No hay deteccion de ancho en JavaScript: en esta web la
   unica pieza que pregunta por el ancho de la ventana es `MudTable`, y lo que
   contesta en un servidor es «pequeño» (ver `EnAnchoDeEscritorio` del banco).
   Con dos ramas de marcado y una `@media`, lo que se ve no depende de nadie.
   =========================================================================== */


/* 1. LA ZONA ------------------------------------------------------------- */

.precios-pizarra {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* Cuantas listas de precios hay. Lo escribe el componente en el `style`
       del elemento: es un dato de los datos, no del diseño. */
    --precios-columnas: 1;
}

/* LA BARRA DE AYUDAS: pastillas de texto, no botones rellenos. Las tres
   ayudas y el «Deshacer» son atajos, no la accion principal de la pantalla
   -esa es «Guardar», que vive en la barra de la ficha-, asi que van en la
   familia mas floja que tiene el sistema. */
.precios-ayudas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.precios-ayuda {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-block-size: var(--plano-toque);
    padding: 0.3rem 0.9rem;
    border: none;
    border-radius: var(--plano-radio-control);
    background-color: rgba(42, 26, 62, 0.05);
    color: var(--plano-tinta);
    font-family: var(--plano-familia);
    font-size: var(--plano-t-13);
    font-weight: 540;
    cursor: pointer;
    transition: background-color var(--plano-tiempo) var(--plano-curva),
        color var(--plano-tiempo) var(--plano-curva);
}

.precios-ayuda:hover:not(:disabled) {
    background-color: var(--plano-morado-aguada);
    color: var(--plano-morado);
}

/* Deshabilitado SE TRAMA, no se vela (§«la regla de la trama»): el rotulo de
   «Deshacer» sin nada que deshacer tiene que seguir leyendose. */
.precios-ayuda:disabled {
    background-color: var(--plano-papel-hondo);
    background-image: var(--plano-trama-suave);
    color: var(--plano-tinta-2);
    cursor: default;
}

.precios-ayuda[aria-expanded="true"] {
    background-color: var(--plano-tinta);
    color: var(--plano-papel);
}

/* El tirador del menú del móvil NO existe en el escritorio: ahí las tres ayudas están a la
   vista en la barra y una cuarta pastilla que abre las mismas tres sería un duplicado. */
.precios-ayuda-movil { display: none; }


/* 2. EL RESUMEN DE ERRORES ----------------------------------------------- */

/* Aguada al fondo y ni banda lateral ni canto de color (§«Avisos»). Lleva a
   la primera celda con error, que es lo unico que hace falta: de ahi en
   adelante se recorren con el teclado. */
.precios-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-radius: var(--plano-esquina-muro);
    background-color: var(--plano-arcilla-aguada);
    color: var(--plano-tinta);
    font-size: var(--plano-t-13);
}

.precios-resumen button {
    border: none;
    background: none;
    padding: 0;
    color: var(--plano-arcilla-honda);
    font-family: var(--plano-familia);
    font-size: var(--plano-t-13);
    font-weight: 560;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}


/* 3. LA MATRIZ (>= 900 px) ----------------------------------------------- */

.precios-matriz {
    display: grid;
    /* La primera columna es la de las presentaciones; el resto, una por lista
       de precios. `minmax(0, …)` en todas para que una celda larga no estire
       la rejilla y saque la tabla de la pantalla. */
    grid-template-columns:
        minmax(0, 13rem)
        repeat(var(--precios-columnas), minmax(0, 1fr));
    /* Hueco cero y reglas finas: es una tabla, no una fila de tarjetas. */
    gap: 0;
    /* SIN `overflow`, y a propósito: todas las columnas son `minmax(0, 1fr)`, así que la
       rejilla no puede salirse de su caja por mucha lista de precios que haya (lo que no
       cabe se corta con puntos suspensivos dentro de su celda). Un `overflow-x: auto` aquí
       no serviría de nada Y ADEMAS recortaría el detalle de celda, que es un hijo absoluto
       de la celda y tiene que poder salirse por el canto. */
}

/* Las filas son `contents` para que las celdas cuelguen de la rejilla de
   arriba. El `role="row"` sigue en su sitio y los lectores de pantalla
   modernos lo respetan con `display: contents`. */
.precios-fila { display: contents; }

.precios-cabecera-esquina,
.precios-cabecera {
    padding: 0.5rem 0.6rem 0.55rem;
    border-block-end: 1.5px solid var(--plano-linea);
    background-color: transparent;
    text-align: start;
}

.precios-cabecera-nombre {
    display: block;
    font-family: var(--plano-familia);
    font-size: var(--plano-t-12);
    font-weight: 600;
    font-stretch: 75%;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--plano-tinta-2);
    line-height: 1.3;
}

.precios-cabecera-iva {
    display: block;
    margin-block-start: 0.15rem;
    font-size: var(--plano-t-11);
    font-weight: 420;
    font-stretch: 100%;
    letter-spacing: 0;
    text-transform: none;
    color: var(--plano-tinta-2);
}

/* LA PRESENTACION, a la izquierda de su fila. */
.precios-presentacion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-block-end: 1px solid var(--plano-linea-fina);
}

.precios-presentacion-nombre {
    font-size: var(--plano-t-15);
    font-weight: 560;
    color: var(--plano-tinta);
}

.precios-presentacion-razon {
    font-size: var(--plano-t-13);
    color: var(--plano-tinta-2);
}

/* LA CELDA. `position: relative` porque el detalle se ancla a ella. */
.precios-celda {
    position: relative;
    padding: 0.4rem 0.35rem;
    border-block-end: 1px solid var(--plano-linea-fina);
    border-inline-start: 1px solid var(--plano-linea-fina);
}

.precios-celda:hover { background-color: var(--plano-morado-aguada); }

/* La celda de una lista en la que este producto no se vende: trama y palabra.
   El color solo nunca vale (§«la regla de la palabra»). */
.precios-celda-sinventa {
    background-color: var(--plano-papel-hondo);
    background-image: var(--plano-trama-suave);
}

.precios-celda-sinventa:hover {
    background-color: var(--plano-papel-hondo);
}

/* EL CAMPO DE CIFRA. No es un `MudNumericField`: es un `input` pelado con la
   piel de campo relleno del sistema. Las flechitas sobran (se escribe, no se
   incrementa), la coma es la decimal de es-ES y el teclado del movil tiene
   que salir con numeros. */
.precios-cifra {
    inline-size: 100%;
    min-block-size: 36px;
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: var(--plano-radio-control);
    background-color: rgba(42, 26, 62, 0.05);
    color: var(--plano-tinta);
    font-family: var(--plano-familia);
    font-size: var(--plano-t-15);
    font-weight: 520;
    font-variant-numeric: tabular-nums;
    text-align: end;
    transition: background-color var(--plano-tiempo) var(--plano-curva),
        box-shadow var(--plano-tiempo) var(--plano-curva);
}

.precios-cifra::-webkit-outer-spin-button,
.precios-cifra::-webkit-inner-spin-button { appearance: none; margin: 0; }

.precios-cifra:hover { background-color: rgba(42, 26, 62, 0.08); }

/* Subrayado interior de 2 px y NO anillo: es lo que hace el resto de campos
   rellenos de la web, y asi la caja no se mueve al enfocar. */
.precios-cifra:focus {
    outline: none;
    box-shadow: inset 0 -2px 0 0 var(--plano-morado);
}

.precios-cifra:disabled {
    background-color: transparent;
    color: var(--plano-tinta-2);
}

.precios-cifra-error { box-shadow: inset 0 -2px 0 0 var(--plano-arcilla-honda); }

/* LA LINEA DE DEBAJO: lo que la celda tiene ademas del precio principal
   -extra, carta digital, IVA propio- y el margen. Tinta-2, 12 px, una sola
   linea que se corta con puntos suspensivos si no cabe. */
.precios-detalles {
    display: block;
    margin-block-start: 0.2rem;
    padding-inline: 0.15rem;
    font-size: var(--plano-t-12);
    color: var(--plano-tinta-2);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* EL MARGEN. En reposo es una cifra más de la línea de debajo, en tinta-2 como el resto.
   Cuando dice algo —un margen justo, una pérdida— pasa a LA REGLA DEL TONO AL FONDO: la
   aguada posee la pieza entera y el texto va en tinta (o en el tono hondo, que sobre su
   propia aguada sí llega a AA).

   Y ES ASI Y NO UN TEXTO TEÑIDO porque el texto teñido no llegaba. La mostaza honda sobre
   el papel del plano da 4,17:1 medidos en el navegador, por debajo del 4,5:1 de AA a 12 px
   —la ficha del sistema la mide sobre BLANCO, donde da 4,60:1, y aquí el fondo es el papel
   frío con su punto de lila—. Con la aguada detrás y la tinta encima son 13:1, y además es
   exactamente lo que el sistema dice que hay que hacer con un estado. La palabra sigue ahí
   («margen 42 %», «pierde 0,30 €»): el color no es la única señal. */
.precios-margen { font-weight: 540; }

.precios-margen-justo,
.precios-margen-perdida {
    padding: 0.05rem 0.35rem;
    border-radius: var(--plano-pildora);
}

.precios-margen-justo {
    background-color: var(--plano-mostaza-aguada);
    color: var(--plano-tinta);
}

.precios-margen-perdida {
    background-color: var(--plano-arcilla-aguada);
    color: var(--plano-arcilla-honda);
}

/* SOLO LECTURA (precios P3): con el modelo de precios nuevo la pizarra enseña y no edita. El aviso
   va en la aguada morada de lo que es del sistema y no un error; las cifras, sin la caja de campo. */
.precios-solo-lectura {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--plano-radio-zona);
    background: var(--plano-morado-aguada);
    color: var(--plano-tinta);
    font-size: var(--plano-t-12);
    line-height: 1.45;
}

.precios-cifra[readonly] {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

.precios-error {
    display: block;
    margin-block-start: 0.15rem;
    padding-inline: 0.15rem;
    font-size: var(--plano-t-12);
    color: var(--plano-arcilla-honda);
    line-height: 1.35;
}

/* EL PUNTO DE «SIN GUARDAR»: 6 px de morado en el canto de la celda. Es el
   unico adorno de la pizarra y dice un dato -esta celda ha cambiado y todavia
   no ha subido-, que es lo que el sistema pide de cualquier color. */
.precios-celda-tocada::before {
    content: "";
    position: absolute;
    inset-block-start: 0.55rem;
    inset-inline-start: 0.4rem;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background-color: var(--plano-morado);
}

.precios-sinventa-texto {
    display: block;
    padding: 0.45rem 0.15rem 0.2rem;
    font-size: var(--plano-t-13);
    color: var(--plano-tinta-2);
    text-align: end;
}

/* El boton de «⋯» que abre el detalle. En la matriz solo se ve al pasar, con
   el foco dentro o en la celda activa; sin raton (`hover: none`) se ve
   siempre, que es la regla del sistema. */
.precios-mas {
    position: absolute;
    inset-block-start: 0.35rem;
    inset-inline-start: 0.3rem;
    inline-size: 26px;
    block-size: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--plano-tinta-2);
    font-size: var(--plano-t-15);
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--plano-tiempo) var(--plano-curva);
}

.precios-celda:hover .precios-mas,
.precios-celda:focus-within .precios-mas,
.precios-celda-activa .precios-mas { opacity: 1; }

.precios-mas:hover { background-color: var(--plano-morado-aguada); color: var(--plano-morado); }

@media (hover: none) {
    .precios-mas { opacity: 1; }
}


/* 4. EL DETALLE DE CELDA -------------------------------------------------- */

/* En la matriz es un AVISO EMERGENTE anclado a la derecha de su celda: sombra
   alzada, esquina de muro y la hoja de fondo. No es un modal y no corta el
   paso: el resto de la pizarra se sigue leyendo y se sigue pudiendo pulsar. */
.precios-detalle {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(100% + 8px);
    z-index: 30;
    inline-size: 17rem;
    padding: 0.9rem 1rem 1rem;
    border-radius: var(--plano-esquina-muro);
    background-color: var(--plano-hoja);
    box-shadow: var(--plano-sombra-alzada);
}

/* La ultima columna abre a la IZQUIERDA: anclado siempre a la derecha, el
   detalle de la ultima lista de precios se salia de la pantalla. */
.precios-celda:last-child .precios-detalle {
    inset-inline-start: auto;
    inset-inline-end: calc(100% + 8px);
}

/* ENTRE 900 Y 1200 px EL DETALLE CAE DEBAJO de su celda, alineado por su canto
   derecho, en vez de al lado.

   Medido: a 900 px de ventana la columna de contenido son 876 px, la de
   presentaciones se lleva 208 y las tres listas de precios quedan en 222 cada
   una. Un detalle de 272 px anclado a la derecha de la columna del medio acaba
   en 944 px, o sea fuera de la ventana y con desplazamiento horizontal de
   pagina. Debajo y alineado por la derecha de su celda cabe siempre: el
   detalle es mas ancho que una columna, asi que se come hacia la IZQUIERDA,
   que es donde hay sitio. Sigue siendo el mismo aviso emergente anclado a su
   celda, y no un modal. */
@media (min-width: 900px) and (max-width: 1199.98px) {
    .precios-celda .precios-detalle,
    .precios-celda:last-child .precios-detalle {
        inset-block-start: calc(100% - 2px);
        inset-inline-start: auto;
        inset-inline-end: 0;
    }
}

.precios-detalle-titulo {
    margin: 0 0 0.1rem;
    font-size: var(--plano-t-15);
    font-weight: 600;
    color: var(--plano-tinta);
}

.precios-detalle-sub {
    margin: 0 0 0.75rem;
    font-size: var(--plano-t-13);
    color: var(--plano-tinta-2);
}

.precios-detalle-campos {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.precios-detalle-campo {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.precios-detalle-campo > span {
    font-size: var(--plano-t-13);
    color: var(--plano-tinta-2);
}

.precios-detalle-campo input,
.precios-detalle-campo select {
    min-block-size: var(--plano-toque);
    padding: 0.3rem 0.6rem;
    border: none;
    border-radius: var(--plano-radio-control);
    background-color: rgba(42, 26, 62, 0.05);
    color: var(--plano-tinta);
    font-family: var(--plano-familia);
    font-size: var(--plano-t-15);
    font-variant-numeric: tabular-nums;
}

.precios-detalle-campo input { text-align: end; }

.precios-detalle-campo input:focus,
.precios-detalle-campo select:focus {
    outline: none;
    box-shadow: inset 0 -2px 0 0 var(--plano-morado);
}

.precios-detalle-campo input:disabled,
.precios-detalle-campo select:disabled {
    background-color: var(--plano-papel-hondo);
    background-image: var(--plano-trama-suave);
    color: var(--plano-tinta-2);
}

/* EL INTERRUPTOR de «No se vende en esta lista». Es una casilla de verdad con
   su etiqueta al lado: una pizarra que ya tiene doce campos por columna no
   necesita ademas una pieza nueva. */
.precios-detalle-traba {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: var(--plano-toque);
    font-size: var(--plano-t-13);
    color: var(--plano-tinta);
    cursor: pointer;
}

.precios-detalle-traba input { accent-color: var(--plano-morado); inline-size: 18px; block-size: 18px; }

.precios-detalle-pie {
    display: flex;
    justify-content: flex-end;
    margin-block-start: 0.85rem;
}


/* 5. EL PANEL DE «COPIAR DE OTRA LISTA…» ---------------------------------- */

/* Va EN LINEA, bajo la barra de ayudas, y no en un dialogo: lo que este panel
   enseña antes de aplicar es una VISTA PREVIA de lo que va a cambiar, y un
   modal que tapa la pizarra esconde justo aquello de lo que habla. */
.precios-panel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.15rem 1.15rem;
    border-radius: var(--plano-esquina-muro);
    background-color: var(--plano-hoja);
}

.precios-panel-titulo {
    margin: 0;
    font-size: var(--plano-t-15);
    font-weight: 600;
    color: var(--plano-tinta);
}

.precios-panel-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.precios-panel-campos label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: var(--plano-t-13);
    color: var(--plano-tinta-2);
}

.precios-panel-campos select,
.precios-panel-campos input {
    min-block-size: var(--plano-toque);
    padding: 0.3rem 0.6rem;
    border: none;
    border-radius: var(--plano-radio-control);
    background-color: rgba(42, 26, 62, 0.05);
    color: var(--plano-tinta);
    font-family: var(--plano-familia);
    font-size: var(--plano-t-15);
}

.precios-panel-campos select:focus,
.precios-panel-campos input:focus {
    outline: none;
    box-shadow: inset 0 -2px 0 0 var(--plano-morado);
}

.precios-previa {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-block-size: 11rem;
    overflow-y: auto;
    font-size: var(--plano-t-13);
    color: var(--plano-tinta);
}

.precios-previa li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.2rem;
    border-block-end: 1px solid var(--plano-linea-fina);
    font-variant-numeric: tabular-nums;
}

.precios-previa li:last-child { border-block-end: none; }

.precios-previa-vacia { font-size: var(--plano-t-13); color: var(--plano-tinta-2); margin: 0; }

.precios-panel-pie {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}


/* 6. LA LISTA DEL MOVIL (< 900 px) ---------------------------------------- */

/* Escondida por omision: por encima de 900 px manda la matriz. */
.precios-movil { display: none; }

/* LA TIRA DE LISTAS DE PRECIOS: la misma pieza visual que la tira del area
   (`plano-pastilla`), porque es el mismo gesto —elegir entre unas cuantas
   cosas cortas— y el sistema ya tiene una forma para eso. */
.precios-tira {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    /* La tira desplaza: `min-height: 0` y un `touch-action` compatible, que es
       lo que hace falta en una pantalla que entrega eventos de raton. */
    min-block-size: 0;
    touch-action: pan-x;
}

.precios-tira .plano-pastilla { min-block-size: var(--plano-toque); }

.precios-movil-filas {
    display: flex;
    flex-direction: column;
}

.precios-movil-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.5rem var(--plano-toque);
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.6rem;
    border-block-end: 1px solid var(--plano-linea-fina);
}

.precios-movil-nombre {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-inline-size: 0;
}

.precios-movil-nombre strong {
    font-size: var(--plano-t-15);
    font-weight: 600;
    color: var(--plano-tinta);
}

.precios-movil-nombre span {
    font-size: var(--plano-t-13);
    color: var(--plano-tinta-2);
}

.precios-movil-campo { display: flex; flex-direction: column; gap: 0.2rem; }

.precios-movil-campo .precios-cifra {
    min-block-size: var(--plano-toque-movil);
    font-size: var(--plano-t-17);
}

/* LA COMPARACION: lo que cuesta en las OTRAS listas, para no tener que
   cambiar de pastilla. Va a la anchura entera de la fila, bajo las tres
   columnas, porque es lo unico de la fila que puede ocupar dos renglones. */
.precios-movil-otras {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--plano-t-12);
    color: var(--plano-tinta-2);
    line-height: 1.4;
}

.precios-movil-mas {
    inline-size: var(--plano-toque);
    block-size: var(--plano-toque);
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(42, 26, 62, 0.05);
    color: var(--plano-tinta-2);
    font-size: var(--plano-t-17);
    line-height: 1;
    cursor: pointer;
}

.precios-movil-mas:hover { background-color: var(--plano-morado-aguada); color: var(--plano-morado); }

/* EL MENU DE AYUDAS DEL MOVIL: las mismas tres ayudas, apiladas bajo su
   tirador, para no meter cuatro pastillas mas en una pantalla de 390 px. */
.precios-ayudas-movil { display: none; flex-direction: column; gap: 0.4rem; }

.precios-ayudas-movil .precios-ayuda { justify-content: flex-start; }


/* 7. EL CORTE DE 900 px ---------------------------------------------------- */

@media (max-width: 899.98px) {
    .precios-matriz { display: none; }
    .precios-movil { display: flex; flex-direction: column; gap: 0.75rem; }

    /* Las ayudas pasan al menu y en la barra queda su tirador y el «Deshacer»,
       que es el unico que hace falta a un toque. */
    .precios-ayudas > .precios-ayuda-escritorio { display: none; }
    .precios-ayudas > .precios-ayuda-movil { display: inline-flex; }
    .precios-ayudas-movil[data-abierto="si"] { display: flex; }

    /* LA HOJA INFERIOR: el detalle de celda deja de ser un aviso anclado y
       entra por abajo a todo el ancho, como todas las hojas de esta web por
       debajo de 720 px (§«La hoja lateral»). */
    .precios-detalle {
        position: fixed;
        inset: auto 0 0 0;
        inline-size: auto;
        max-block-size: 88dvh;
        overflow-y: auto;
        border-radius: var(--plano-radio-zona) var(--plano-radio-zona) 0 0;
        box-shadow: var(--plano-sombra-hoja);
        padding-block-end: max(1rem, env(safe-area-inset-bottom));
        animation: precios-hoja-entra var(--plano-tiempo-bisagra) var(--plano-curva);
    }

    .precios-detalle-velo {
        position: fixed;
        inset: 0;
        z-index: 29;
        border: none;
        padding: 0;
        background-color: rgba(42, 26, 62, 0.35);
    }

    .precios-detalle-campo input,
    .precios-detalle-campo select { min-block-size: var(--plano-toque-movil); }

    .precios-ayuda { min-block-size: var(--plano-toque-movil); }
}

/* La bisagra de la hoja, sobre el eje X: es el gesto firmado del sistema y la
   hoja inferior lo hereda tal cual. */
@keyframes precios-hoja-entra {
    from { opacity: 0; transform: perspective(1200px) rotateX(14deg); }
    to { opacity: 1; transform: none; }
}

/* Se anula el MOVIMIENTO, no el cambio de estado: la hoja sigue apareciendo,
   pero sin giro y sin desvanecido. */
@media (prefers-reduced-motion: reduce) {
    .precios-detalle { animation: none; }
    .precios-ayuda,
    .precios-cifra,
    .precios-mas { transition: none; }
}