/**
 * La ficha de producto.
 *
 * La pieza central es la grilla del formulario. WooCommerce reemplaza el HTML
 * de .single_variation en cada cambio de color, así que nada se ubica moviendo
 * nodos por JS: los dos contenedores de WooCommerce pasan a display:contents y
 * sus hijos se ubican por CSS, que sobrevive a cada repintado.
 *
 * Mapa de filas de .is-ficha__grid:
 *   1 label del precio (todo el ancho; se esconde cuando lote.js arma la 2)
 *   2 los dos precios, pieza | caja, cada uno con su rótulo (todo el ancho)
 *   3 + IVA, solo mayorista (todo el ancho)
 *   4 divisor
 *   5 stock (col 1) | colores (col 2)
 *   6 lote, de toda la audiencia (col 1) | total del lote (col 2)
 *   7 cantidad y botón (todo el ancho)
 *   8 descripción de la variación (todo el ancho)
 *   9 aviso de "combinación no disponible" (todo el ancho)
 */

.is-ficha__grid {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	/* row-gap en cero es deliberado: con row-gap, la fila 3 (+ IVA, solo
	   mayorista) se cobra su espacio aunque esté vacía, que es lo que ve un
	   invitado, y queda un hueco muerto que nadie sabe de dónde sale. La fila
	   6 (lote) ya no tiene este problema: la ve toda la audiencia, así que
	   nunca está vacía. La separación la pone cada elemento con su propio
	   margen. */
	gap: 0 16px;
}

/* Los contenedores de WooCommerce desaparecen como caja y dejan pasar a sus
   hijos como items de la grilla de arriba. */
.is-ficha .single_variation_wrap,
.is-ficha .woocommerce-variation.single_variation {
	display: contents;
}

.is-ficha__label-precio {
	grid-column: 1 / -1;
	grid-row: 1;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 9px;
	color: #666;
}

.is-ficha .woocommerce-variation-price {
	grid-column: 1 / -1;
	grid-row: 2;
	margin-top: 8px;
}

/* Los dos precios (10/09/2026): a la izquierda el de la pieza con el rótulo
   de la audiencia, a la derecha el de la caja cerrada, separados por una
   línea vertical. Los arma lote.js (pintarPrecios) adentro del contenedor de
   WooCommerce, y cada uno trae su rótulo arriba: el label de la fila 1 queda
   repetido y se esconde. El > es a propósito: los rótulos nuevos llevan la
   misma clase (para heredar los estilos que Oxygen le da al label) y viven
   más adentro, así que esta regla no los alcanza. */
.is-ficha__grid--precios > .is-ficha__label-precio {
	display: none;
}

.is-ficha__grid--precios .woocommerce-variation-price {
	display: flex;
	align-items: stretch;
	/* El aire que había entre el label de la fila 1 y el número ahora lo pone
	   el rótulo de cada columna. */
	margin-top: 0;
}

.is-ficha__precio .is-ficha__label-precio {
	display: block;
	margin-bottom: 8px;
}

/* Un precio no se parte en dos renglones. */
.is-ficha__precio .price {
	white-space: nowrap;
}

.is-ficha__precio--caja {
	margin-left: 36px;
	padding-left: 36px;
	border-left: 1px solid #ddd;
}

.is-ficha__divisor {
	grid-column: 1 / -1;
	grid-row: 4;
	width: 100%;
	margin: 12px 0;
	border: 0;
	border-top: 1px solid #ddd;
}

.is-ficha .woocommerce-variation-availability {
	grid-column: 1;
	grid-row: 5;
	margin: 0;
}

.is-ficha .woocommerce-variation-availability p {
	margin: 0;
	font-size: 11px;
}

.is-ficha__colores {
	grid-column: 2;
	grid-row: 5;
	display: flex;
	align-items: center;
	gap: 12px;
}

/**
 * Neutralizar el estilo de tabla que WooCommerce le aplica a .variations.
 *
 * La clase hace falta para su JavaScript (ver el comentario en variable.php),
 * pero el estilo que la acompaña está pensado para la <table> del original:
 * "margin-bottom: 1em" mete 16px de aire entre la fila de stock y la del botón,
 * que nadie declaró y que no se ve leyendo este archivo.
 *
 * El selector largo NO es capricho: hay que ganarle por especificidad al de
 * WooCommerce. Una regla sobre .is-ficha__colores pelada pierde.
 */
.woocommerce div.product form.cart .is-ficha__colores.variations {
	width: auto;
	margin-bottom: 0;
	border: 0;
}

.is-ficha__colores-label {
	font-size: 11px;
	color: #666;
}

/* El select nativo de color ya lo oculta swatches.css con el patrón de clip
   de abajo (position:absolute + clip), que a propósito lo deja en el árbol de
   accesibilidad en vez de sacarlo con display:none. Una regla acá con
   display:none le ganaba por especificidad y lo sacaba del todo, justo lo
   contrario de lo que se buscaba: el JS de WooCommerce solo hace .val() sobre
   ese select, así que no hace falta nada más. */

/* La clase la escribe el JS de WooCommerce (ver el aviso que limpia la
   selección en variable.php), pero la define WooCommerce, no nosotros: si
   Oxygen tiene sus hojas de estilo apagadas, ese texto para lectores de
   pantalla se ve. Mismo patrón de clip que ya usa swatches.css para su select
   oculto, acotado acá a nuestro formulario para no pisar la definición de
   WooCommerce en el resto del sitio. */
.is-ficha .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.is-ficha .woocommerce-variation-add-to-cart {
	grid-column: 1 / -1;
	grid-row: 7;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

/* La plantilla JS de WooCommerce siempre imprime este bloque, tenga texto o
   no, y con display:contents en el padre pasa a ser item de la grilla. Sin
   fila propia se auto-ubica: vacío deja un hueco después del botón, y con
   texto aparecería debajo del botón de comprar en vez de donde corresponde. */
.is-ficha .woocommerce-variation-description {
	grid-column: 1 / -1;
	grid-row: 8;
}

.is-ficha .woocommerce-variation-description:not(:empty) {
	margin-top: 12px;
}

/**
 * El aviso de "esta combinación no está disponible".
 *
 * Sin fila propia el auto-placement lo manda a la fila 3, que es la del
 * "+ IVA" del mayorista, y los dos se superponen. Va al final, que es donde el
 * cliente lo espera.
 *
 * Comparte la fila 9 con .woocommerce-variation-description (en mobile la 10,
 * donde toda la grilla corre una fila más por el bloque de lote): WooCommerce
 * reemplaza entero el contenido de .single_variation en cada cambio de color,
 * así que pinta una plantilla o la otra, nunca las dos a la vez. No es un
 * choque de filas, es el mismo lugar para dos estados que no coexisten.
 */
.is-ficha .woocommerce-variation p[role="alert"] {
	grid-column: 1 / -1;
	grid-row: 9;
	margin: 12px 0 0;
}

.is-ficha__cantidad {
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
	height: 28px;
}

.is-ficha__cantidad .quantity input {
	width: 34px;
	border: 0;
	text-align: center;
	background: transparent;
	appearance: textfield;
	-moz-appearance: textfield;
}

.is-ficha__cantidad .quantity input::-webkit-outer-spin-button,
.is-ficha__cantidad .quantity input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.is-ficha__qty {
	width: 28px;
	height: 26px;
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: 1;
}

.is-ficha__qty[disabled] {
	opacity: .3;
	cursor: not-allowed;
}

.is-ficha__boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 28px;
	padding: 0 20px;
}

.is-ficha__boton-icono {
	flex: 0 0 auto;
}

.is-ficha__iva {
	grid-column: 1 / -1;
	grid-row: 3;
	font-size: 10px;
	color: #666;
	margin-top: 2px;
}

.is-ficha__specs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px 24px;
	margin: 0;
}

.is-ficha__specs dt {
	font-weight: 600;
	margin: 0;
}

.is-ficha__specs dd {
	margin: 0;
	color: #666;
}

/* El bloque de los dos precios (Tarea 8): la caja y el unitario de
   referencia. Ocupa la fila 6, la que dejaba libre el cartelito viejo, y el
   total va al lado en la columna 2, igual que la fila 5 hace con stock y
   colores. En columna se apilan el número grande, su rótulo y, cuando hace
   falta, el unitario. Vacío (colores sin caja uniforme, antes de elegir uno)
   no ocupa nada: no hay spans adentro y el div no rompe el layout.
   IS_Lote_Precio::bloque() es quien decide qué spans imprime; acá solo se
   les da estilo. */
.is-lote {
	grid-column: 1;
	grid-row: 6;
	display: flex;
	flex-direction: column;
	font-size: 14px;
	color: #666;
	margin-top: 2px;
}

/* En la ficha el div ya no dibuja nada: solo lleva data-unidades para que
   lote.js calcule el unitario. Sin esto seguiría reservando su fila de la
   grilla y dejaría un hueco de margen arriba del botón de comprar. El :empty
   es exacto acá porque el div no lleva ni un espacio adentro; en la grilla del
   listado el mismo nombre de clase sí tiene hijos y esta regla no lo alcanza. */
.is-ficha .is-lote:empty {
	display: none;
}

/* Las dos reglas de abajo van prefijadas, y no como clases peladas, para
   ganarle en especificidad a universal.css de Oxygen sin !important: shop.css
   y ficha.css cargan ANTES que universal.css, así que con un solo selector los
   dos empatan y gana Oxygen. */

/* El aviso de caja cerrada, debajo de la descripción del producto. Es la regla
   de venta, no un precio: por eso va como texto y no compite con ningún
   número. */
.is-ficha__caja,
p.is-ficha__caja {
	margin: 10px 0 0;
	font-size: 13px;
	letter-spacing: 0.01em;
	color: var(--is-texto, #1A1814);
}

/* El peso va aparte y con .woocommerce adelante (una clase del <body> en
   toda la tienda) porque universal.css de Oxygen tiene su propio
   `p.is-ficha__caja` con font-weight 300, carga después y empata en
   especificidad: con el peso en la regla de arriba ganaba siempre Oxygen.
   Solo el peso: el margen y el color de Oxygen se respetan (400 pedido por
   Leandro el 10/09/2026, igual para minorista y mayorista). */
.woocommerce p.is-ficha__caja {
	font-weight: 400;
}

/* El párrafo sale vacío en los 3 productos cuya caja cambia entre colores: el
   servidor no puede afirmar un número todavía y lote.js lo completa al elegir
   uno. Vacío no tiene que ocupar ni su margen, o abre un hueco arriba del
   formulario que se cierra solo unos milisegundos después. */
.is-ficha__caja:empty {
	display: none;
}

.is-ficha__cantidad .is-lote__cajas,
.is-ficha__cantidad .is-lote__unidades {
	font-size: 13px;
	color: #666;
}

/* "(6 unidades)" es el dato de apoyo de "1 caja": va más chico (24/09/2026,
   13px el principal y 10px el paréntesis). */
.is-ficha__cantidad .is-lote__unidades {
	font-size: 10px;
}

/* Salvo cuando está solo. Un Set que mira quien no es mayorista se compra de a
   set: el contador dice "2 sets" y nada más, y ese SÍ es el número que se
   compra, no un dato de apoyo. Va al tamaño del principal (25/09/2026). */
.is-ficha__cantidad .is-lote__unidades:only-child {
	font-size: 13px;
}

/* El aviso del primer render, cuando ningún color tiene stock. No lleva
   tipografía ni color propios: usa la clase de WooCommerce, así que le caen
   las dos reglas de acá arriba y se ve igual que el aviso que aparece al
   elegir un color. Lo único suyo es esconder el de WooCommerce mientras
   está, o dirían lo mismo dos veces. */
.is-ficha--sin-stock .single_variation_wrap .woocommerce-variation-availability {
	display: none;
}

/* El contador de cajas. En los modos B y C reemplaza al campo, que sigue
   existiendo en el formulario porque es el que guarda las unidades de verdad.
   Se esconde con clip y no con display:none, para que siga siendo un campo de
   formulario válido y accesible. */
.is-lote__contador {
	font-size: 14px;
	color: var(--is-texto, #1A1814);
	white-space: nowrap;
}

.is-ficha__cantidad:not(.is-lote--cajas) .is-lote__contador {
	font-size: 13px;
	color: #666;
	margin-left: 8px;
}

.is-ficha__cantidad.is-lote--cajas input.qty {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ Mobile */

/* Mismo corte que usa la grilla de /productos. */
@media ( max-width: 768px ) {

	/* En 360px no entran cinco círculos más dos textos sin que algo se
	   apriete, así que los círculos bajan a su propia línea. Eso corre una fila
	   a todo lo que sigue, por eso se renumera de la 5 en adelante. El mapa de
	   filas del desktop está documentado arriba de .is-ficha__grid. */
	.is-ficha .woocommerce-variation-availability {
		grid-column: 1 / -1;
		grid-row: 5;
	}

	.is-ficha__colores {
		grid-column: 1 / -1;
		grid-row: 6;
		flex-wrap: wrap;
		margin-top: 8px;
	}

	/* El div queda vacío y sin alto, pero sigue ocupando su celda de la grilla
	   si no se le dice lo contrario, y eso abre un hueco arriba del botón. */
	.is-lote {
		grid-column: 1 / -1;
		grid-row: 7;
	}

	/* En 360px los dos precios entran lado a lado si la línea del medio
	   come menos aire. */
	.is-ficha__precio--caja {
		margin-left: 20px;
		padding-left: 20px;
	}

	.is-ficha .woocommerce-variation-add-to-cart {
		grid-row: 9;
	}

	.is-ficha .woocommerce-variation-description {
		grid-row: 10;
	}

	/* Sin esto hereda la fila 9 del desktop, que acá ya es la del botón de
	   comprar. Comparte la 10 con la descripción por el mismo motivo que en
	   desktop (ver el docblock de la regla de arriba): WooCommerce pinta una
	   plantilla o la otra, nunca las dos, así que no es un choque real. */
	.is-ficha .woocommerce-variation p[role="alert"] {
		grid-row: 10;
	}

	/* El botón ocupa lo que sobra y nunca baja del alto cómodo para el dedo. */
	.is-ficha__boton {
		flex: 1;
		min-height: 44px;
	}

	.is-ficha__cantidad {
		height: 44px;
		width: 100%;
	}

	.is-ficha__qty {
		width: 40px;
		height: 42px;
	}

	/* En desktop el rótulo y el valor de cada especificación van lado a lado.
	   Acá se apilan en una sola columna para que entren en el ancho angosto. */
	.is-ficha__specs {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.is-ficha__specs dd {
		margin-bottom: 12px;
	}

	.is-lote__contador {
		font-size: 15px;
	}
}

/* El aviso de la ficha (.is-aviso) vive en shop.css desde la 1.35.0: lo
   comparte con los errores del checkout. */