/**
 * Render de marco y paspartú — geometría pura, sin imágenes.
 *
 * TODA la geometría sale de `padding` en PORCENTAJE. Eso no es un truco: en
 * CSS el padding en % SIEMPRE se resuelve contra el ANCHO del contenedor,
 * incluso el de arriba y abajo. Por eso un `padding: 2.94%` da una banda del
 * MISMO grosor absoluto en los cuatro lados — que es exactamente lo que es un
 * marco real. El JS sólo escribe los porcentajes; el navegador hace la regla
 * de tres, y se mantiene al redimensionar sin una línea de JS de por medio.
 *
 * Los COLORES no viven acá: entran como custom properties que el JS toma de
 * los términos de pa_marco. Este archivo no conoce ningún color de marca.
 *
 * ★ ACÁ NO HAY ESTILOS DE CONTROLES, y es a propósito: los selectores son los
 *   NATIVOS de WooCommerce. Si vuelve a aparecer una clase `.cmmr-swatch`,
 *   `.cmmr-chip` o `.cmmr-controls`, es una regresión.
 */

/* Aire transparente alrededor del conjunto.
   Lo pidió Mauricio —«que no toque los bordes»— y además es lo que le da lugar
   a la sombra: sin aire, la sombra se recorta contra el borde del contenedor.
   ★ El valor sale de la ESCALA DE ESPACIADO del grupo (múltiplos y divisores
   de 16). Lo fija PHP en `--cmmr-aire`; el 48 de acá es sólo el respaldo. */
.cmmr-escena {
	box-sizing: border-box;
	padding: var(--cmmr-aire, 48px);
	background: transparent;
}

.cmmr-stage {
	--cmmr-marco-color: #000;
	/* BLANCO, no crema. Instruccion de Mauricio 2026-09-19. Este valor es el
	   FALLBACK: el JS lo sobreescribe con Data::color_mat(). Si se cambia
	   alla, se cambia aca — si no, hay un parpadeo crema antes del JS, y un
	   paspartu crema permanente si el JS no corre. */
	--cmmr-mat-color: #ffffff;
	--cmmr-marco-pad: 0%;
	/* DOS paddings: el paspartú es asimétrico porque el sobrante de un marco
	   de catálogo no reparte parejo entre los dos ejes. */
	--cmmr-mat-pad-x: 0%;
	--cmmr-mat-pad-y: 0%;
	--cmmr-sombra: none;
	--cmmr-sombra-paspartu: none;
	--cmmr-sombra-obra: none;

	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	aspect-ratio: var(--cmmr-ratio, 1);

	/* ★ TOPE DE ALTURA AL VIEWPORT (Mauricio: «las obras no pueden ser mas
	   altas que el vh»).

	   Se cappea el ANCHO, no el alto, y no es un rodeo: con `width:100%` ya
	   declarado, un `max-height` NO encoge el ancho — gana el ancho explicito
	   y la pieza sale APLASTADA, con la proporcion del marco mintiendo. Como
	   `aspect-ratio` es ancho/alto, limitar el ancho a `alto_max x ratio`
	   limita el alto a `alto_max` conservando la proporcion exacta.

	   Del viewport se descuenta el aire de la escena (arriba y abajo) y una
	   RESERVA para el encabezado pegajoso. Los dos valores salen de la escala
	   del grupo (multiplos de 16) y son ajustables por custom property. */
	--cmmr-reserva: 96px;
	--cmmr-alto-max: calc(100vh - (2 * var(--cmmr-aire, 48px)) - var(--cmmr-reserva));
	max-width: calc(var(--cmmr-alto-max) * var(--cmmr-ratio, 1));
}

/* En movil `100vh` cuenta la barra de direcciones que se esconde al scrollear,
   asi que la pieza se pasa del alto util. `svh` es el viewport CHICO —el que
   de verdad se ve— y por eso manda donde exista. */
@supports (height: 100svh) {
	.cmmr-stage {
		--cmmr-alto-max: calc(100svh - (2 * var(--cmmr-aire, 48px)) - var(--cmmr-reserva));
	}
}

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

/* El marco. Su grosor es `--cmmr-marco-pad`, que el JS calcula como
   el ancho real del marco ÷ ancho total de la pieza.

   La SOMBRA va acá, sobre el marco, no sobre la escena: es el objeto físico el
   que proyecta. ⚠️ Es PROPUESTA —no sale de ningún dato de Woo— y se apaga con
   add_filter( 'cmmr_sombra', '__return_empty_string' ). Tiene función
   representacional (un marco colgado proyecta sombra), no es adorno. */
.cmmr-marco {
	width: 100%;
	height: 100%;
	padding: var(--cmmr-marco-pad);
	background: var(--cmmr-marco-color);
	box-shadow: var(--cmmr-sombra);
}

/* El paspartú. Mismo mecanismo, un nivel adentro, pero con DOS paddings.

   La sombra `inset` es el REBAJO DEL MARCO proyectando sobre el cartón. Sin
   ella, marco blanco + paspartú blanco son un solo rectángulo indistinguible.
   ⚠️ PROPUESTA de render, apagable con `cmmr_sombra_paspartu`. La luz viene
   de arriba, igual que la sombra exterior del conjunto. */
.cmmr-mat {
	width: 100%;
	height: 100%;
	padding: var(--cmmr-mat-pad-y) var(--cmmr-mat-pad-x);
	background: var(--cmmr-mat-color);
	box-shadow: var(--cmmr-sombra-paspartu);
}

/* La obra. `overflow:hidden` + la imagen posicionada adentro permite recortar
   sin tocar el archivo. Con la imagen limpia esto es un no-op.

   La sombra `inset` es el BISEL DE LA VENTANA del paspartú proyectando sobre
   la impresión — el caso de una obra de fondo claro dentro de un paspartú
   blanco. Más corta que la del paspartú a propósito: es un canto de cartón,
   no un rebajo de madera. ⚠️ PROPUESTA, apagable con `cmmr_sombra_obra`.

   Va en un `::after` y no en el elemento: la imagen está posicionada absoluta
   adentro y taparía un `box-shadow` del propio contenedor. */
.cmmr-obra {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.cmmr-obra::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: var(--cmmr-sombra-obra);
}

.cmmr-obra img {
	position: absolute;
	display: block;
	max-width: none; /* anula el `max-width:100%` global de los temas */
}

/* Sin marco (pliego suelto): marco, paspartú y sombra colapsan.
   Un pliego suelto no cuelga de la pared, así que tampoco proyecta. */
.cmmr-stage.is-suelto .cmmr-marco,
.cmmr-stage.is-suelto .cmmr-mat {
	padding: 0;
	background: transparent;
}

/* Un pliego suelto no tiene marco ni paspartú: las TRES sombras se apagan.
   La exterior porque no cuelga de la pared; las dos interiores porque no hay
   dos superficies que separar. Se declaran las tres para que agregar una
   sombra nueva arriba no deje un residuo dibujado acá abajo. */
.cmmr-stage.is-suelto .cmmr-marco,
.cmmr-stage.is-suelto .cmmr-mat {
	box-shadow: none;
}

.cmmr-stage.is-suelto .cmmr-obra::after {
	box-shadow: none;
}

/* La foto original queda en el DOM (para no romper el zoom/lightbox de Woo),
   sólo se oculta a la vista mientras el render está puesto. Cuando la
   variación tiene foto propia, esta clase se quita y la galería vuelve. */
.cmmr-oculto {
	display: none !important;
}

/* ==========================================================================
   FICHA: medidas visibles + desglose de precio   (0.5.0)
   ==========================================================================

   ⚠️ ESTO NO CONTRADICE la regla de «acá no hay estilos de controles». No hay
   ningún control: es LECTURA. Nada de esto se toca, se envía ni cambia el
   pedido. Los selectores siguen siendo los nativos de Woo.

   ★ ESTILOS MÍNIMOS Y HEREDADOS (regla dura del grupo). Acá NO se define ni
   una sola familia tipográfica, ni un tamaño de fuente, ni un color: todo se
   hereda del tema. El único color que aparece es `currentColor`, que ES el
   color del tema. Las distancias salen de la ESCALA del grupo —múltiplos y
   divisores de 16— y son 4, 8 y 16; un 6 o un 10 estarían mal aunque se
   vieran bien.

   El único `border` es la línea del total, y es ESTRUCTURAL: separa la suma
   de sus sumandos. Sin ella la última fila se lee como una línea más. */

.cmmr-ficha {
	/* Alineada con el aire de la escena, para que la ficha caiga bajo la
	   pieza y no bajo el borde del contenedor.
	   ★ Esto vale SOLO en el respaldo —la ficha colgada bajo la obra—. En su
	   hogar bueno manda `.cmmr-ficha--resumen`, abajo. */
	padding: 0 var(--cmmr-aire, 48px) 16px;
}

/* La ficha MUDADA a la columna de compra (Mauricio 2026-09-20: «pasa la tabla
   arriba del boton de add to cart, la izquierda es solo para la foto»).
   El aire lateral se va: ahi la referencia de alineacion son los swatches y el
   boton, no el borde de la foto. El `margin` de abajo separa del boton con la
   escala del grupo (multiplos de 16), nunca con un valor a ojo. */
.cmmr-ficha--resumen {
	padding: 0;
	margin: 0 0 16px;
}

/* ---- Desglose de precio ----------------------------------------------- */
.cmmr-desglose {
	width: 100%;
	border-collapse: collapse;
}

.cmmr-desglose th,
.cmmr-desglose td {
	padding: 4px 0;
	text-align: left;
	vertical-align: baseline;
}

/* El rótulo de cada línea no es un encabezado de sección: es texto corrido.
   Se usa <th scope="row"> por semántica, no por énfasis. */
.cmmr-desglose tbody th {
	font-weight: inherit;
}

.cmmr-desglose td {
	text-align: right;
	white-space: nowrap;
	padding-left: 16px;
}

/* La línea del total. `currentColor` = el color del texto del tema. */
.cmmr-desglose tfoot th,
.cmmr-desglose tfoot td {
	border-top: 1px solid currentColor;
	padding-top: 8px;
}

/* Un hueco de precio NO se disfraza de número: va en el mismo renglón, con el
   texto que lo explica, y sin nada que lo haga parecer una cifra. */
.cmmr-desglose .cmmr-sin-precio {
	white-space: normal;
	font-style: italic;
}

.cmmr-nota {
	margin: 8px 0 0;
}

/* Apostilla en el mismo renglón de una cifra. Hoy sin consumidor: la usaba la
   línea del paspartú, que dejó de llevar monto (v0.5.1). Se conserva porque
   `filaPrecio()` sigue aceptando el parámetro y el día que una línea lo use,
   ya tiene su estilo. Sin color propio: solo tamaño relativo heredado. */
.cmmr-desglose .cmmr-apostilla {
	font-size: 0.875em;
}

/* «incluido» NO es un hueco: es una afirmación. Por eso NO hereda la itálica
   de `.cmmr-sin-precio`, que significa «no sé». Va en texto normal, como
   cualquier otro dato cierto de la tabla. */
.cmmr-desglose .cmmr-incluido {
	white-space: normal;
}