/**
 * Cubrecanto - Puertas a Medida
 * Estilos de la vista previa.
 *
 * ALCANCE DELIBERADAMENTE MINIMO: salvo la tarifa, el bloque del total y las
 * tres secciones del final (los widgets de ShopEngine escondidos, MOVIL, que
 * apila la fila del carrito debajo de 480px, y ESCRITORIO, que le ensena a
 * envolver desde 481px), todas las reglas cuelgan de #cubre-pm-preview. Y esta
 * hoja solo se encola en la ficha del producto a medida, asi que nada de aqui
 * alcanza al resto de la tienda.
 *
 * REPARTO DE TAREAS CON EL JAVASCRIPT
 * El tamano de la puerta va en pixeles y lo calcula assets/cubre-pm.js, que es
 * quien mide el hueco. Este archivo pone los colores, la caja y el reparto en
 * dos columnas, y se encarga de CENTRAR la puerta con un translate para que un
 * cambio de ancho no la descoloque aunque el JS no llegue a medir de nuevo.
 */

/*
 * #############################################################################
 * ##  COLORES DE RESPALDO, MIENTRAS LA FOTO NO HA CARGADO                    ##
 * #############################################################################
 *
 * La puerta es la foto real del producto recortada en 9 rebanadas. Estos dos
 * colores solo se ven en el instante anterior a que la foto llegue, y para
 * siempre si la descarga falla: asi el hueco nunca esta vacio. El aspecto de
 * verdad lo pone assets/panel-puerta.jpg.
 *
 * El producto se ofrece en vidrio AHUMADO y en CLARO, y esa opcion se anadira
 * despues. Cuando llegue, lo que cambia es la FOTO (una por acabado); de estos
 * colores basta con ajustar el del vidrio:
 *
 *   vidrio claro:  --cubre-pm-vidrio-plano: #c3ced7;
 * #############################################################################
 */
#cubre-pm-preview {
	--cubre-pm-vidrio-plano: #9a9ea3;
	--cubre-pm-marco-plano: #1a1a1c;

	/*
	 * El acento de los campos: borde y anillo de foco. Un solo mando, para que
	 * cambiarlo al color de marca de la tienda sea tocar estas dos lineas.
	 */
	--cubre-pm-acento: #2271b1;
	--cubre-pm-acento-suave: rgba( 34, 113, 177, 0.18 );

	margin: 1.4em 0;
	max-width: 100%;
}

/*
 * -----------------------------------------------------------------------------
 * EL REPARTO: PUERTA A LA IZQUIERDA, FICHAS A LA DERECHA
 * -----------------------------------------------------------------------------
 */
#cubre-pm-preview .cubre-pm-escena {
	display: flex;
	align-items: stretch;
	gap: 1.1em;
}

/*
 * El area de dibujo. El ALTO SE DECIDE AQUI y el JavaScript lo lee: no esta
 * escrito en dos sitios. Si por lo que sea midiera cero, el JS no dibuja (ver
 * la guarda contra colapso) en vez de meterse en un hueco imposible.
 *
 * ---- POR QUE ESTOS DOS NUMEROS, Y QUE PASA SI SE TOCAN ----
 *
 * max-width recorta el aire lateral. La puerta es alta y estrecha (la estandar
 * mide 1 de ancho por 3,25 de alto), asi que en un area ancha quedaba perdida
 * en el centro con enormes franjas vacias a los lados. Con el tope, el area se
 * cine a la puerta y el ancho que sobra se lo quedan las fichas, que respiran
 * mejor.
 *
 * height es lo unico que hace la puerta MAS GRANDE. Ojo con esto, porque es
 * contraintuitivo: la puerta se dibuja limitada por el ALTO, no por el ancho,
 * asi que estrechar el area no la agranda ni un pixel, solo le quita el aire.
 * Subir el alto de 340 a 420 px es lo que da el 27 % de tamano; el bloque crece
 * lo mismo.
 *
 * Si hay que devolver altura a la pagina, se baja este numero y la puerta se
 * encoge en la misma proporcion. Es el mando que regula el tamano del dibujo.
 */
#cubre-pm-preview .cubre-pm-lienzo {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 320px;
	height: 420px;
}

/*
 * La puerta y su tinte van centrados con translate, no con margenes. Asi, si la
 * columna cambia de ancho, siguen centrados solos aunque el JavaScript todavia
 * no haya vuelto a medir.
 */
#cubre-pm-preview .cubre-pm-puerta,
#cubre-pm-preview .cubre-pm-alerta {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	box-sizing: border-box;
}

/*
 * El marco es la foto en 9 rebanadas, que el JS enchufa al cargar. Aqui solo
 * quedan los respaldos: el color del vidrio como fondo y el del aluminio como
 * color de borde.
 *
 * box-sizing: border-box es imprescindible. El ancho y el alto que calcula el
 * JS son los de FUERA del marco; el marco se come hacia adentro, como en la
 * puerta de verdad.
 */
#cubre-pm-preview .cubre-pm-puerta {
	border-style: solid;
	border-color: var( --cubre-pm-marco-plano, #1a1a1c );
	border-width: 3px;
	background-color: var( --cubre-pm-vidrio-plano, #9a9ea3 );
	background-clip: padding-box;
}

/* Tinte de fuera de rango, calcado sobre la puerta y su marco. */
#cubre-pm-preview .cubre-pm-alerta {
	display: none;
	background-color: rgba( 192, 57, 43, 0.45 );
	pointer-events: none;
}

/*
 * Sombra proyectada, solo para despegar la puerta del fondo. Es un degradado
 * radial y no un filter: blur, que costaria mucho mas de pintar y obligaria a
 * recalcular el radio en cada resize.
 */
#cubre-pm-preview .cubre-pm-sombra {
	position: absolute;
	left: 50%;
	transform: translateX( -50% );
	background: radial-gradient( ellipse at center, rgba( 0, 0, 0, 0.30 ) 0%, rgba( 0, 0, 0, 0 ) 72% );
	pointer-events: none;
}

/*
 * -----------------------------------------------------------------------------
 * LAS COTAS
 * -----------------------------------------------------------------------------
 * Dos lineas acotadas como en un plano tecnico: la del ALTO a la izquierda de la
 * puerta y la del ANCHO debajo, cada una con topes perpendiculares en los dos
 * extremos y la medida escrita al lado.
 *
 * ---- QUE PONE EL CSS Y QUE PONE EL JAVASCRIPT ----
 *
 * El JavaScript solo pone POSICION y LARGO, en pixeles: donde empieza la cota y
 * cuanto mide. Todo lo demas (la linea, los topes, el grosor, la letra) vive
 * aqui y no depende del tamano de la puerta.
 *
 * Esa division es lo que hace que el grosor y el texto se mantengan CONSTANTES
 * en cualquier proporcion. Es el mismo criterio que el marco, pero al reves: el
 * marco escala porque representa 45 mm reales de aluminio, y la cota no escala
 * porque no representa nada fisico, es notacion.
 *
 * ---- COMO SE DIBUJA UNA COTA SIN NODOS DE SOBRA ----
 *
 * La linea es el BORDE de la caja: border-left en la vertical y border-top en la
 * horizontal, con la caja de grosor cero. Los dos topes son ::before y ::after.
 * Asi cada cota son dos nodos en total, el de la caja y el del texto.
 */
#cubre-pm-preview .cubre-pm-cota {
	position: absolute;
	color: rgba( 127, 127, 127, 0.9 );
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
}

/* Los topes de los extremos, perpendiculares a la linea. */
#cubre-pm-preview .cubre-pm-cota::before,
#cubre-pm-preview .cubre-pm-cota::after {
	content: '';
	position: absolute;
	background-color: currentColor;
}

/* ---- La del ALTO: linea vertical, topes horizontales ---- */
#cubre-pm-preview .cubre-pm-cota-alto {
	width: 0;
	border-left: 1px solid currentColor;
}

#cubre-pm-preview .cubre-pm-cota-alto::before,
#cubre-pm-preview .cubre-pm-cota-alto::after {
	left: -4px;
	width: 9px;
	height: 1px;
}

#cubre-pm-preview .cubre-pm-cota-alto::before {
	top: 0;
}

#cubre-pm-preview .cubre-pm-cota-alto::after {
	bottom: 0;
}

/* ---- La del ANCHO: linea horizontal, topes verticales ---- */
#cubre-pm-preview .cubre-pm-cota-ancho {
	height: 0;
	border-top: 1px solid currentColor;
}

#cubre-pm-preview .cubre-pm-cota-ancho::before,
#cubre-pm-preview .cubre-pm-cota-ancho::after {
	top: -4px;
	width: 1px;
	height: 9px;
}

#cubre-pm-preview .cubre-pm-cota-ancho::before {
	left: 0;
}

#cubre-pm-preview .cubre-pm-cota-ancho::after {
	right: 0;
}

/*
 * El texto de la cota del ALTO va girado y leyendose de abajo arriba, que es la
 * convencion de los planos. Se hace con writing-mode y un giro de media vuelta,
 * no con rotate(-90deg) y un origen calculado a mano: asi el navegador reserva
 * el hueco de verdad y el texto queda centrado en la linea sin cuentas.
 */
#cubre-pm-preview .cubre-pm-cota-texto {
	position: absolute;
}

#cubre-pm-preview .cubre-pm-cota-alto .cubre-pm-cota-texto {
	display: flex;
	top: 0;
	right: 6px;
	align-items: center;
	justify-content: center;
	height: 100%;
	transform: rotate( 180deg );
	writing-mode: vertical-rl;
}

/*
 * La del ANCHO no necesita giro. El texto va DEBAJO de la linea, no encima:
 * encima cae en el hueco entre la puerta y la cota, y con 8 px de separacion se
 * monta sobre el marco, que es oscuro. Debajo, la linea queda entre el marco y
 * el numero y los dos se leen.
 */
#cubre-pm-preview .cubre-pm-cota-ancho .cubre-pm-cota-texto {
	top: 6px;
	left: 0;
	width: 100%;
	text-align: center;
}

/*
 * Version compacta, para cuando el lienzo se queda justo. Encoge la letra y los
 * topes, nunca la puerta. Por debajo de un lienzo de 150 px el JavaScript
 * directamente no dibuja las cotas: mas vale ninguna que una ilegible o, peor,
 * una que se salga del contenedor.
 */
#cubre-pm-preview .cubre-pm-cotas-compactas .cubre-pm-cota {
	font-size: 9px;
}

#cubre-pm-preview .cubre-pm-cotas-compactas .cubre-pm-cota-alto::before,
#cubre-pm-preview .cubre-pm-cotas-compactas .cubre-pm-cota-alto::after {
	left: -3px;
	width: 7px;
}

#cubre-pm-preview .cubre-pm-cotas-compactas .cubre-pm-cota-ancho::before,
#cubre-pm-preview .cubre-pm-cotas-compactas .cubre-pm-cota-ancho::after {
	top: -3px;
	height: 7px;
}

#cubre-pm-preview .cubre-pm-cotas-compactas .cubre-pm-cota-alto .cubre-pm-cota-texto {
	right: 5px;
}

#cubre-pm-preview .cubre-pm-cotas-compactas .cubre-pm-cota-ancho .cubre-pm-cota-texto {
	top: 5px;
}

/*
 * -----------------------------------------------------------------------------
 * LAS FICHAS
 * -----------------------------------------------------------------------------
 * Desde el commit 24 son DOS, Alto y Ancho, y las dos son campos de verdad: la
 * del area se fue a la frase del bloque de precio. Cada ficha es la etiqueta
 * arriba ("Alto (mm)"), la caja blanca del campo con sus botones - y +, y
 * debajo el rango permitido y el error si lo hay. Encima de las dos, la linea
 * que invita a escribir.
 */
/*
 * El max-width importa: los textos de rango y de error son frases con
 * white-space normal, y sin tope la columna crece hasta el max-content de la
 * frase mas larga, aplastando el lienzo de la puerta justo cuando hay un error
 * que leer. Con el tope, la frase envuelve y la puerta conserva su sitio.
 */
#cubre-pm-preview .cubre-pm-fichas {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: center;
	gap: 0.8em;
	min-width: 11em;
	max-width: 16em;
}

/* La invitacion a escribir, encima de los dos campos. */
#cubre-pm-preview .cubre-pm-fichas-titulo {
	margin: 0;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.3;
}

#cubre-pm-preview .cubre-pm-ficha {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	line-height: 1.2;
}

/*
 * La etiqueta, en minuscula normal y con la unidad dentro. Se acabaron las
 * VERSALITAS con letter-spacing del commit 11: aquello leia como el rotulo de
 * un dato ensenado, y estos son campos que se rellenan.
 */
#cubre-pm-preview .cubre-pm-ficha-rotulo {
	margin-bottom: 0.3em;
	color: rgba( 127, 127, 127, 0.95 );
	font-size: 0.72em;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* El label tiene que verse pulsable: enfoca su campo. */
#cubre-pm-preview label.cubre-pm-ficha-rotulo {
	cursor: pointer;
}

/*
 * ---- LA CAJA DEL CAMPO ----
 *
 * ##  FONDO BLANCO Y BORDE VISIBLE EN REPOSO, Y NO ES UN CAPRICHO  ##
 *
 * Hasta el commit 23 la ficha era una caja gris translucida con el numero
 * dentro, y en las pruebas leia como dato mostrado o directamente como campo
 * deshabilitado: el gris es el uniforme del "no se puede tocar". Un campo se
 * reconoce por fondo blanco + borde + cursor de texto, y eso es lo que hay.
 *
 * El texto va en color fijo oscuro PORQUE el fondo es blanco fijo: heredar el
 * color del tema dejaria numeros claros sobre blanco en un tema oscuro. Blanco
 * y #1a1a1c van juntos o no va ninguno.
 *
 * min-height de 2.75em: con la letra del tema en 16px son 44 px, el area
 * tactil minima que recomiendan Apple y Android. Los botones - / + se estiran
 * a esa altura (align-items: stretch), asi que heredan el area tactil sin
 * declararla.
 *
 * overflow: hidden para que los botones, que van a sangre dentro de la caja,
 * queden recortados por las esquinas redondeadas sin duplicar el radio.
 */
#cubre-pm-preview .cubre-pm-ficha-valor {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	min-height: 2.75em;
	border: 1px solid #b8bcc0;
	border-radius: 6px;
	background-color: #ffffff;
	color: #1a1a1c;
	font-size: 1.05em;
	font-weight: 600;
	white-space: nowrap;
	cursor: text;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* En foco: borde de acento mas anillo suave. El indicador vive en la caja
   porque el input de dentro va sin borde propio (ver mas abajo). */
#cubre-pm-preview .cubre-pm-ficha-valor:focus-within {
	border-color: var( --cubre-pm-acento, #2271b1 );
	box-shadow: 0 0 0 3px var( --cubre-pm-acento-suave, rgba( 34, 113, 177, 0.18 ) );
}

/*
 * -----------------------------------------------------------------------------
 * LOS CAMPOS, YA DENTRO DE SU CAJA
 * -----------------------------------------------------------------------------
 * La caja del campo es .cubre-pm-ficha-valor; el input va desnudo dentro, sin
 * borde ni fondo propios, heredando la tipografia. Asi el borde, el foco y el
 * error se pintan UNA vez, en la caja, y valen para el numero y los botones a
 * la vez.
 */
#cubre-pm-preview .cubre-pm-ficha input.cubre-pm-input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 2.5em;
	margin: 0;
	padding: 0.3em 0.6em;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	cursor: text;
	-moz-appearance: textfield;
	appearance: textfield;
}

/*
 * Las flechitas nativas del type=number se quitan porque los botones - y + las
 * sustituyen con un area tactil decente. Dos pares de flechas para lo mismo
 * seria un control repetido. Escribir y las flechas del teclado siguen igual.
 */
#cubre-pm-preview .cubre-pm-ficha input.cubre-pm-input::-webkit-outer-spin-button,
#cubre-pm-preview .cubre-pm-ficha input.cubre-pm-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

/*
 * Al quitarle el borde al input hay que devolver el foco por otro lado, o
 * navegar con teclado se vuelve imposible. La caja del campo hace de indicador
 * con su :focus-within de arriba.
 */
#cubre-pm-preview .cubre-pm-ficha input.cubre-pm-input:focus {
	outline: none;
}

/*
 * ---- LOS BOTONES - Y + ----
 *
 * A la derecha del numero, dentro de la misma caja, separados por un filete.
 * El ancho de 2.5em (40 px) mas la altura de la caja (44 px) les da el area
 * tactil; touch-action: manipulation evita que un toque rapido repetido se
 * interprete como zoom en el movil.
 *
 * Se resetea todo lo que un tema suele poner a los button (padding, fondo,
 * borde, sombra): estos son parte del campo, no botones de tema.
 */
#cubre-pm-preview .cubre-pm-paso {
	flex: 0 0 auto;
	width: 2.5em;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid rgba( 26, 26, 28, 0.14 );
	border-radius: 0;
	background: #f4f5f6;
	box-shadow: none;
	color: #3c4045;
	font-size: 1em;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}

#cubre-pm-preview .cubre-pm-paso:hover {
	background: #e9ebed;
	color: #1a1a1c;
}

#cubre-pm-preview .cubre-pm-paso:active {
	background: #dde0e3;
}

/* Foco de teclado en el propio boton, hacia adentro para no salirse de la caja. */
#cubre-pm-preview .cubre-pm-paso:focus-visible {
	outline: 2px solid var( --cubre-pm-acento, #2271b1 );
	outline-offset: -2px;
}

/*
 * El rango permitido, bajo el campo. Sale de las constantes de PHP y desde el
 * commit 24 explica de que depende ("entre 300 y 1700 para un alto de 1300"),
 * asi que es una frase: se deja envolver, nada de nowrap.
 */
#cubre-pm-preview .cubre-pm-ficha-rango {
	margin-top: 0.35em;
	opacity: 0.65;
	font-size: 0.7em;
	font-weight: 400;
	line-height: 1.35;
	white-space: normal;
}

/*
 * -----------------------------------------------------------------------------
 * ERROR EN SU SITIO
 * -----------------------------------------------------------------------------
 * El mensaje sale bajo la ficha del campo que lo provoca, no en un aviso
 * general arriba. Vacio no ocupa nada, asi que no mueve el resto del diseno
 * mientras no haya nada que decir.
 */
#cubre-pm-preview .cubre-pm-ficha-error {
	color: #c0392b;
	font-size: 0.72em;
	font-weight: 500;
	line-height: 1.3;
	white-space: normal;
}

#cubre-pm-preview .cubre-pm-ficha-error:not( :empty ) {
	margin-top: 0.4em;
}

/*
 * Con error, lo que se tine es la CAJA DEL CAMPO, que es donde el cliente tiene
 * que mirar, y el anillo de foco pasa a rojo para no decir "acento" y "error" a
 * la vez sobre el mismo borde.
 */
#cubre-pm-preview .cubre-pm-ficha-con-error .cubre-pm-ficha-valor {
	border-color: rgba( 192, 57, 43, 0.75 );
}

#cubre-pm-preview .cubre-pm-ficha-con-error .cubre-pm-ficha-valor:focus-within {
	border-color: #c0392b;
	box-shadow: 0 0 0 3px rgba( 192, 57, 43, 0.16 );
}

/*
 * -----------------------------------------------------------------------------
 * LO QUE QUEDO VACIO EN LA FILA DE COMPRA
 * -----------------------------------------------------------------------------
 * La clase la pone el JavaScript SOLO despues de comprobar que los dos campos
 * se movieron y que el navegador reconoce el atributo form. Si el movimiento no
 * sale, esta clase no se pone y los campos siguen viendose donde los dejo PHP.
 */
.cubre-pm-medidas.cubre-pm-campos-movidos,
.cubre-pm-campo.cubre-pm-campos-movidos {
	display: none;
}

/*
 * -----------------------------------------------------------------------------
 * COLUMNA ESTRECHA: LA PUERTA ARRIBA Y LAS FICHAS DEBAJO
 * -----------------------------------------------------------------------------
 * La clase la pone el JavaScript midiendo el CONTENEDOR, no la ventana. Una
 * media query no serviria: la vista previa vive en una columna cuyo ancho no
 * tiene por que parecerse al del navegador.
 */
#cubre-pm-preview.cubre-pm-preview-apilado .cubre-pm-escena {
	flex-direction: column;
	gap: 0.9em;
}

#cubre-pm-preview.cubre-pm-preview-apilado .cubre-pm-lienzo {
	max-width: none;
	height: 320px;
}

/*
 * En columna estrecha los dos campos van en fila, y la linea de invitacion
 * ocupa su propia linea completa gracias al wrap. Si el hueco no da ni para
 * dos campos de 9.5em, el wrap los apila uno por linea a lo ancho: los botones
 * - / + conservan siempre sus 2.5em de area tactil, es el numero el que cede.
 */
#cubre-pm-preview.cubre-pm-preview-apilado .cubre-pm-fichas {
	flex-direction: row;
	flex-wrap: wrap;
	min-width: 0;
	max-width: none;
	gap: 0.6em;
}

#cubre-pm-preview.cubre-pm-preview-apilado .cubre-pm-fichas-titulo {
	flex: 0 0 100%;
}

#cubre-pm-preview.cubre-pm-preview-apilado .cubre-pm-ficha {
	flex: 1 1 9.5em;
	min-width: 0;
}

/*
 * -----------------------------------------------------------------------------
 * LA TARIFA (ARRIBA) Y EL TOTAL (SOBRE EL BOTON)
 * -----------------------------------------------------------------------------
 * Son las unicas reglas fuera de #cubre-pm-preview, y todas van sobre clases
 * propias. Desde el commit 25 el precio de la ficha son DOS bloques con
 * papeles distintos, y cada cifra vive en uno solo:
 *
 *   ARRIBA, donde el tema pinta el precio     .cubre-pm-tarifa, ESTATICA
 *     $6,000.00 / m2                          20px, seminegrita
 *     Precio por metro cuadrado sobre ...     12px, gris
 *
 *   DENTRO DEL FORMULARIO, sobre el boton     .cubre-pm-total, EN VIVO
 *     Precio de esta puerta                   12px, gris
 *     $3,120.00                               28px, la unica negrita
 *     400 x 1300 mm . 0,52 m2                 13px, gris
 *
 * La tarifa pesa 600 y mide 20px: por encima de su nota, por debajo del total.
 * El unico numero gordo de la pagina sigue siendo lo que se paga.
 *
 * Los tamanos van en PIXELES, como en el commit 24 y por lo mismo: la
 * jerarquia es el diseno pedido, y colgarla del font-size del contenedor del
 * tema (un p.price arriba, el form.cart abajo, cada uno con su letra) la
 * desfiguraria. El gris es opacidad sobre el color del tema, como en el resto
 * del archivo: gris de verdad en claro y en oscuro.
 *
 * ---- POR QUE LOS DOS IMPORTES REPITEN SU PROPIA CLASE ----
 *
 * Leccion del commit 23, resumida: el tema pinta los importes de wc_price()
 * con reglas del calibre de `.woocommerce div.product p.price
 * .woocommerce-Price-amount` (0,0,4,2), y cada importe viene envuelto en su
 * propio span, al que una regla directa le gana SIEMPRE a lo que herede del
 * padre. Asi que hay que alcanzar al span, y con mas clases que el tema: tres
 * repeticiones mas el padre dan (0,0,4,0) para la linea y (0,0,5,0) para el
 * span, que gana en la columna de clases, la que se compara antes que la de
 * elementos. Sin !important, como siempre: esa escalada no la empieza un
 * plugin en la tienda de otro.
 */

/* ---- LA TARIFA ---- */
.cubre-pm-tarifa {
	display: block;
	line-height: 1.3;
}

.cubre-pm-tarifa-importe {
	display: block;
}

.cubre-pm-tarifa .cubre-pm-tarifa-importe.cubre-pm-tarifa-importe.cubre-pm-tarifa-importe,
.cubre-pm-tarifa .cubre-pm-tarifa-importe.cubre-pm-tarifa-importe.cubre-pm-tarifa-importe .woocommerce-Price-amount {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

/* A que se aplica la tarifa. Es la unica explicacion, que no grite. */
.cubre-pm-tarifa-nota {
	display: block;
	margin-top: 0.15em;
	opacity: 0.7;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
}

/* ---- EL TOTAL ---- */

/*
 * flex-basis del 100% ademas del width: el form.cart de muchos temas es un
 * flex en fila para poner cantidad y boton juntos, y sin basis el bloque
 * acabaria APRETADO AL LADO de la cantidad en vez de encima. En un formulario
 * de bloques normal, el par no estorba.
 */
.cubre-pm-total {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	margin: 0 0 0.9em;
	line-height: 1.25;
}

.cubre-pm-total-etiqueta {
	display: block;
	opacity: 0.7;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}

.cubre-pm-total-importe {
	display: block;
}

.cubre-pm-total .cubre-pm-total-importe.cubre-pm-total-importe.cubre-pm-total-importe,
.cubre-pm-total .cubre-pm-total-importe.cubre-pm-total-importe.cubre-pm-total-importe .woocommerce-Price-amount {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

/*
 * La medida citada y el area, bajo el importe. Aqui no hay wc_price() dentro,
 * asi que no hace falta la repeticion de clases: es texto plano nuestro.
 */
.cubre-pm-total-medida {
	display: block;
	margin-top: 0.2em;
	opacity: 0.7;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
}

/*
 * Atenuado mientras se consulta el precio nuevo. Se atenua, NO se borra: dejar
 * el hueco vacio hace saltar el diseno y hace dudar de si hay precio.
 *
 * La linea de la medida se atenua junto al importe porque sus cifras se
 * refrescan en provisional antes de que el servidor conteste: mientras la
 * respuesta viaja, la linea entera queda en duda, no solo el importe.
 *
 * La transicion tiene retardo a proposito. Una consulta rapida termina antes de
 * que el atenuado llegue a verse, y asi escribir no produce un parpadeo.
 */
.cubre-pm-total-cargando .cubre-pm-total-importe,
.cubre-pm-total-cargando .cubre-pm-total-medida {
	opacity: 0.45;
	transition: opacity 0.15s ease 0.12s;
}

/* Aviso de que la red fallo y el precio en pantalla puede estar viejo. */
.cubre-pm-total-aviso {
	display: block;
	color: #b06a1f;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
}

.cubre-pm-total-aviso:not( :empty ) {
	margin-top: 0.3em;
}

/*
 * =============================================================================
 * EL CORAZON Y EL COMPARAR DE SHOPENGINE, FUERA EN TODOS LOS ANCHOS (COMMIT 28)
 * =============================================================================
 * Los widgets de favoritos y comparar que viven DENTRO del form.cart, entre
 * nuestro bloque del total y la cantidad, son de SHOPENGINE. El commit 26 los
 * escondia a ciegas apuntando a YITH, WPClever y TI, y por eso aquella lista
 * no aplico nunca, ni en movil: el plugin era otro. Las clases de abajo son
 * las REALES, leidas del marcado de produccion. La lista de suposiciones se
 * fue con este commit.
 *
 * Se esconden en TODOS los anchos, no solo en movil, y es decision del dueno:
 * nunca los pidio, le roban ancho a la unica fila que vende y no tienen
 * objeto en este producto (una puerta cotizada a medida no tiene con que
 * compararse, y "favoritos" compite con el boton de compra en su momento
 * critico). SOLO se esconden: nada de ShopEngine se desactiva, y como esta
 * hoja se encola unicamente en la ficha del producto a medida, en el resto de
 * la tienda siguen funcionando igual.
 *
 * Cada clase va doblada por el orden de impresion: "cubrecanto" va antes que
 * "shopengine" en el orden de plugins, asi que su CSS se imprime despues y un
 * empate lo perderiamos. Con la clase doblada, (0,3,1) o (0,2,1) contra las
 * reglas de contenedor tipicas de un widget, que no pasan de una o dos clases.
 */
form.cart .shopengine_add_to_list_action.shopengine_add_to_list_action,
form.cart .shopengine-wishlist.shopengine-wishlist,
form.cart .shopengine_comparison_add_to_list_action.shopengine_comparison_add_to_list_action,
form.cart .shopengine-comparison.shopengine-comparison {
	display: none;
}

/*
 * =============================================================================
 * MOVIL: LA FILA DE COMPRA SE APILA (COMMIT 26)
 * =============================================================================
 * En un iPhone de 375-414 px la fila del carrito venia horizontal: cantidad,
 * boton y los widgets de corazon y comparar de otro plugin repartiendose un
 * ancho que no alcanza, con el boton (lo unico que importa) estrujado. Debajo
 * del breakpoint todo se apila: cantidad arriba, boton a todo lo ancho en su
 * propia linea, y los widgets ajenos escondidos.
 *
 * ##  POR QUE AQUI HAY UNA MEDIA QUERY, SI EL APILADO DE LA VISTA PREVIA  ##
 * ##  SE DECIDE MIDIENDO EL CONTENEDOR                                    ##
 *
 * Son preguntas distintas. La vista previa pregunta "cuanto ancho tiene MI
 * columna", y eso lo mide el JavaScript porque una columna de Elementor no
 * tiene por que parecerse a la ventana. Lo de aqui pregunta "esto es un
 * TELEFONO": area tactil del boton, alto visible de la pantalla, widgets que
 * sobran en movil. Eso es del dispositivo, no de la columna, y es justo lo que
 * una media query sabe contestar.
 *
 * EL BREAKPOINT: 480px cubre todos los telefonos en vertical (375 SE, 390-430
 * los grandes) sin tocar tablets. La referencia del dueno es iPhone a 375-414.
 *
 * ##  LA ESPECIFICIDAD, REPITIENDO CLASE, COMO SIEMPRE  ##
 *
 * form.cart y .quantity son marcado del tema, no nuestro, y aqui no hay clase
 * propia que repetir: se repite .cart. Hace falta porque nuestro CSS se
 * imprime ANTES que el del tema (los add_action del plugin se registran antes
 * que los del tema, y a igual prioridad WordPress respeta ese orden), asi que
 * un empate de especificidad LO PIERDE este archivo. Cada regla va en dos
 * selectores: uno sin ancestros, que casa aunque la plantilla no tenga
 * .woocommerce ni div.product alrededor, y uno con ellos, que gana a los
 * selectores tipicos de tema sobre esos mismos ancestros. Sin !important,
 * como siempre.
 */
@media ( max-width: 480px ) {

	/*
	 * ---- 1. LA FILA DEL CARRITO, EN COLUMNA ----
	 *
	 * flex column sobre el form.cart apila TODO lo que viva dentro, en su
	 * orden natural del DOM: campos escondidos, bloque del total, cantidad,
	 * boton, y cualquier widget que otro plugin haya colgado del formulario.
	 * Eso ultimo es la red de este cambio: aunque un widget de corazon que no
	 * conozcamos se escape de la lista de abajo, ya no puede quitarle ancho al
	 * boton, como mucho ocupa su propia linea debajo.
	 *
	 * align-items stretch + width 100% en los hijos clave: el boton llena la
	 * linea entera. Los float de temas viejos mueren solos: en un flex, float
	 * no aplica.
	 */
	form.cart.cart.cart,
	.woocommerce div.product form.cart.cart {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	/* En columna, la base 100% del total mediria ALTO, no ancho. Fuera. */
	form.cart.cart.cart .cubre-pm-total,
	.woocommerce div.product form.cart.cart .cubre-pm-total {
		flex-basis: auto;
		margin: 0;
	}

	/* ---- La cantidad, ARRIBA del boton y en su propia linea ---- */
	form.cart.cart.cart .quantity,
	.woocommerce div.product form.cart.cart .quantity {
		width: 100%;
		float: none;
		margin: 0;
	}

	/*
	 * El input de cantidad, comodo al dedo. Los 16px de letra no son gusto:
	 * con menos, iOS hace zoom automatico al enfocar el campo, y esa es
	 * exactamente la clase de salto que este commit viene a quitar.
	 */
	form.cart.cart.cart .quantity .qty,
	.woocommerce div.product form.cart.cart .quantity .qty {
		width: 6em;
		min-height: 48px;
		font-size: 16px;
	}

	/*
	 * ---- El boton: ancho completo, una linea, altura tactil ----
	 * Las dos formas de nombrarlo: por name (siempre esta) y por la clase
	 * estandar de WooCommerce (por si un tema lo pinta como <a>).
	 */
	form.cart.cart.cart button[name="add-to-cart"],
	form.cart.cart.cart .single_add_to_cart_button,
	.woocommerce div.product form.cart.cart button[name="add-to-cart"],
	.woocommerce div.product form.cart.cart .single_add_to_cart_button {
		display: block;
		width: 100%;
		margin: 0;
		min-height: 48px;
		white-space: nowrap;
		text-align: center;
	}

	/*
	 * ---- 2. EL CORAZON Y EL COMPARAR ----
	 *
	 * Ya no viven aqui: desde el commit 28 se esconden en TODOS los anchos,
	 * con sus clases REALES de ShopEngine, en la seccion propia de antes de
	 * esta media query. La lista de familias adivinadas del commit 26 (YITH,
	 * WPClever, TI) se borro: nunca caso con nada, el plugin era otro.
	 */

	/*
	 * ---- 3. LA VISTA PREVIA, LIMITADA EN ALTO ----
	 *
	 * El lienzo se cine a un 45% del alto visible, con el tope de siempre de
	 * 320px para pantallas altas. El JavaScript no se toca: remedir() ya lee
	 * el alto REAL del lienzo y escala la puerta completa dentro, con el marco
	 * a sus 45 mm reales a esa escala y las cotas con sus umbrales de compacto
	 * y apagado. Encoger el lienzo por CSS es usar el mando que ya existia.
	 *
	 * Las dos declaraciones son el mismo valor en dos monedas: svh mide el
	 * alto visible CON la barra del navegador desplegada, que es como llega
	 * todo el mundo, pero es una unidad reciente; un navegador que no la
	 * entienda tira esa linea entera y se queda con la de vh, que sobreestima
	 * un poco y punto.
	 *
	 * El segundo selector repite el de apilado para ganarle por orden: a esta
	 * anchura la vista previa esta siempre apilada y aquella regla pone 320px.
	 */
	#cubre-pm-preview .cubre-pm-lienzo,
	#cubre-pm-preview.cubre-pm-preview-apilado .cubre-pm-lienzo {
		height: min( 320px, 45vh );
		height: min( 320px, 45svh );
	}
}

/*
 * =============================================================================
 * ESCRITORIO: LA FILA DE COMPRA APRENDE A ENVOLVER (COMMIT 27)
 * =============================================================================
 * En escritorio el boton de anadir al carrito salia CORTADO por la derecha.
 *
 * ##  EL DIAGNOSTICO, ANTES DEL PARCHE  ##
 *
 * El ladron de ancho no es la vista previa: es nuestro propio bloque del
 * total. El commit 25 lo metio dentro del form.cart con flex-basis 100%,
 * pensado para formularios flex que ENVUELVEN. Pero el layout "inline" del
 * widget de anadir al carrito pinta el form.cart como flex en fila con
 * flex-wrap NOWRAP, y en una fila que no puede envolver, 100% de total mas
 * cantidad mas boton suman mas que el contenedor: el sobrante se sale por la
 * derecha y el ultimo de la fila, el boton, es el que aparece cortado. En
 * movil no se veia porque la media query del commit 26 fuerza columna. Se
 * reprodujo en el arnes con un form.cart en nowrap: mismo sintoma exacto.
 *
 * La cura es ensenarle a la fila a envolver, no encoger a nadie: el total se
 * queda con su linea completa (que es el diseno del commit 25) y cantidad y
 * boton pasan juntos a la linea siguiente, con el boton creciendo hasta
 * llenarla y SIN PODER encogerse por debajo de su texto.
 *
 * min-width 481: el complemento exacto de la media query de movil, que queda
 * intacta. En un form.cart que no sea flex, todo lo de aqui es inerte.
 *
 * ##  LA ESPECIFICIDAD, MEDIDA EN PRODUCCION Y NO A OJO (COMMIT 28)  ##
 *
 * La primera version de esto (commit 27) repetia .cart tres veces y PERDIA.
 * En produccion la fila la manda el CSS del widget de Elementor con este
 * selector, leido del panel Computed:
 *
 *     :is(...) form.cart:not(.grouped_form):not(.variations_form)
 *
 * La cuenta: :is() aporta la especificidad de su argumento mas especifico
 * (3 clases y 1 elemento), y cada :not(.clase) cuenta como UNA clase mas.
 * Total: 3+1+1+1 = 6 clases y 2 elementos = (0,6,2), con flex-wrap nowrap.
 *
 *     lo que perdia            form.cart.cart.cart                  (0,3,1)
 *                              .woocommerce div.product
 *                              form.cart.cart                       (0,4,2)
 *     lo que gana ahora        form.cart x7                         (0,7,1)
 *
 * (0,7,1) contra (0,6,2): las columnas se comparan de izquierda a derecha y
 * la primera que difiere decide. Clases 7 > 6, y a la de elementos ni se
 * llega: no hace falta (0,7,2). Siete repeticiones es el MINIMO que gana,
 * seis empatarian en clases y perderian por elementos (6,1 contra 6,2).
 *
 * Se sube repitiendo NUESTRO selector y no copiando el :is() ni los :not()
 * de Elementor: su selector cambia con sus versiones (este es de la 3.28.2)
 * y el dia que lo reescriban, una copia dejaria de casar sin avisar. La
 * repeticion de .cart solo depende de que el formulario sea el form.cart de
 * WooCommerce, que es lo unico estable de todo esto. Sin !important, como
 * siempre.
 */
@media ( min-width: 481px ) {

	/* La fila envuelve. (0,7,1): gana a Elementor en la columna de clases. */
	form.cart.cart.cart.cart.cart.cart.cart {
		flex-wrap: wrap;
	}

	/*
	 * El boton: nunca mas corta su texto. Sin encoger (un flex row aprieta
	 * antes que envolver), en una linea, y creciendo para llenar la que le
	 * toque: al lado de la cantidad queda un boton ancho, que es como lo
	 * pintan las fichas de producto bien hechas.
	 *
	 * Mismo prefijo de 7 clases que la fila: si Elementor alcanza al form con
	 * (0,6,2), a su boton lo alcanzara con numeros parecidos, y estas dos
	 * declaraciones tienen que ganar por el mismo margen.
	 */
	form.cart.cart.cart.cart.cart.cart.cart button[name="add-to-cart"],
	form.cart.cart.cart.cart.cart.cart.cart .single_add_to_cart_button {
		flex: 1 0 auto;
		white-space: nowrap;
	}

	/*
	 * Y por si el contenedor del WIDGET fuera una fila flex (el otro camino
	 * por el que el reorden del commit 25 pudo poner la vista previa AL LADO
	 * del formulario en vez de encima): la vista previa exige la linea
	 * entera. En un contenedor normal de bloques, inerte.
	 */
	#cubre-pm-preview {
		flex: 0 0 100%;
		width: 100%;
	}

	/*
	 * ---- LOS CAMPOS, ALINEADOS ARRIBA CON LA PUERTA ----
	 *
	 * El justify-content center de la columna de fichas venia del commit 11,
	 * cuando eran tres cajas que llenaban el alto. Con dos campos y sus rangos
	 * quedaban flotando a media altura del lienzo de 420px: dos piezas
	 * sueltas. Arriba del todo, titulo y campos arrancan a la altura de la
	 * puerta y el conjunto se lee como un solo bloque. Solo en escritorio: en
	 * movil las fichas van en fila debajo de la puerta y ahi el eje de este
	 * justify es otro.
	 */
	#cubre-pm-preview .cubre-pm-fichas {
		justify-content: flex-start;
	}
}