/*
 * Precifilm Volume Pricing · assets/css/pfvp-frontend.css
 *
 * Reutiliza los tokens de diseño del child theme de Precifilm (colores,
 * tipografía, radios) con valores de repuesto por si el plugin se activa
 * sin ese tema puesto. Ninguna regla depende de que exista `.p-buybox` ni
 * ninguna otra clase del tema: si no está, este bloque se ve igual de bien
 * suelto dentro del resumen del producto.
 */

.pfvp-volume {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--p-border, #e2dfd8);
}

.pfvp-volume__head {
	margin-bottom: 10px;
}

.pfvp-volume__title {
	font-family: var(--p-font-ui, system-ui, -apple-system, sans-serif);
	font-size: 14px;
	font-weight: 600;
	color: var(--p-text, #1a2545);
}

/* ——— Tabla de tramos ——— */

.pfvp-tiers-table {
	width: 100%;
	border: 1px solid var(--p-border, #e2dfd8);
	border-radius: var(--p-radius-lg, 12px);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	table-layout: fixed;
}

.pfvp-tiers-table th,
.pfvp-tiers-table td {
	padding: 9px 12px;
	text-align: left;
}

.pfvp-tiers-table thead th {
	width: 40%;
	background: var(--p-surface, #f7f6f4);
	color: var(--p-text-2, #5b6171);
	font-family: var(--p-font-mono, ui-monospace, monospace);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.pfvp-tiers-table thead th:nth-child(2),
.pfvp-tiers-table thead th:nth-child(3) {
	width: 30%;
}

.pfvp-tiers-row {
	cursor: pointer;
}

.pfvp-tiers-row td {
	border-top: 1px solid var(--p-border, #e2dfd8);
	font-family: var(--p-font-mono, ui-monospace, monospace);
	font-size: 12.5px;
}

.pfvp-tiers-row:hover {
	background: var(--p-surface, #f7f6f4);
}

.pfvp-col-range {
	font-family: var(--p-font-ui, system-ui, -apple-system, sans-serif) !important;
	font-weight: 600;
	font-size: 13px !important;
	word-break: break-word;
}

/* El tramo activo se marca con color Y con un texto ("Tu tramo"), para no
   depender solo del contraste navy/blanco. */
.pfvp-flag {
	display: none;
	margin-right: 5px;
	padding: 2px 6px;
	border-radius: var(--p-radius-sm, 5px);
	background: var(--p-orange, #eb654e);
	color: #fff;
	font-family: var(--p-font-ui, system-ui, -apple-system, sans-serif);
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	vertical-align: middle;
}

.pfvp-tiers-row.is-active {
	background: var(--p-navy, #1a2545);
	color: #fff;
}

.pfvp-tiers-row.is-active td {
	border-top-color: transparent;
}

.pfvp-tiers-row.is-active .pfvp-flag {
	display: inline-block;
}

.pfvp-tiers-row.is-active .pfvp-col-save {
	color: var(--p-orange, #eb654e);
	font-weight: 600;
}

/* ——— Calculadora en tiempo real ———
   Solo visual: los números que aquí se ven se recalculan siempre en el
   servidor en cuanto el producto llega al carrito (ver Cart::apply_prices
   en includes/class-cart.php). */

.pfvp-live {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: var(--p-radius-md, 8px);
	background: var(--p-surface, #f7f6f4);
}

.pfvp-live__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pfvp-live__label {
	font-family: var(--p-font-mono, ui-monospace, monospace);
	font-size: 9.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--p-text-2, #5b6171);
}

.pfvp-live__value {
	font-family: var(--p-font-display, Georgia, serif);
	font-weight: 600;
	font-size: 16px;
	color: var(--p-text, #1a2545);
}

.pfvp-live__item--save .pfvp-live__value {
	color: var(--p-orange, #eb654e);
}

@media (max-width: 480px) {
	.pfvp-tiers-table th,
	.pfvp-tiers-table td {
		padding: 8px 6px;
		font-size: 11.5px !important;
	}

	.pfvp-col-range {
		font-size: 12px !important;
	}

	/* Se mantiene visible: es la marca del tramo activo que no depende del
	   color, solo se reduce para que quepa en una columna estrecha. */
	.pfvp-flag {
		display: none;
		margin: 0 0 3px;
		font-size: 8.5px;
		padding: 1px 4px;
	}

	.pfvp-tiers-row.is-active .pfvp-flag {
		display: inline-block;
	}

	.pfvp-live {
		gap: 12px;
	}
}