/* PAQSA – Selector de tonos Polycrom */
:root {
	--paqsa-rosa: #C8336E;
	--paqsa-rosa-claro: #E9A3C0;
	--paqsa-azul: #0B6FBF;
	--paqsa-texto: #2B2B2B;
	--paqsa-gris: #6B6B6B;
	--paqsa-borde: #D9DDE3;
}

/* ================= Formulario de compra ================= */

/* La cantidad va por tono; ocultamos la general de WooCommerce. */
.paqsa-form-tonos .quantity { display: none !important; }

.paqsa-form-tonos .woocommerce-variation-add-to-cart,
form.cart.paqsa-form-tonos:not(.variations_form) {
	display: flex !important; flex-wrap: wrap; gap: 12px; align-items: stretch;
}

.paqsa-multi { flex: 1 1 100%; width: 100%; margin: 0 0 8px; }
.paqsa-multi__cabecera {
	display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 12px;
	font-weight: 600; color: var(--paqsa-texto); margin-bottom: 8px; font-size: .95rem;
}
.paqsa-multi.varias .paqsa-multi__cabecera { grid-template-columns: minmax(0, 1fr) 132px 28px; }
.paqsa-multi.varias .paqsa-multi__cabecera::after { content: ''; }

.paqsa-fila { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 12px; align-items: center; margin-bottom: 10px; }
.paqsa-multi.varias .paqsa-fila { grid-template-columns: minmax(0, 1fr) 132px 28px; }

.paqsa-multi .paqsa-fila__tono,
.paqsa-multi .paqsa-fila__tono:hover,
.paqsa-multi .paqsa-fila__tono:focus {
	display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin: 0;
	padding: 0 14px !important; border-radius: 6px !important; cursor: pointer;
	font: inherit; font-size: .95rem !important; font-weight: 600; line-height: 1.1; letter-spacing: normal; text-transform: none;
	background: #fff !important; color: var(--paqsa-azul) !important; border: 1.5px solid var(--paqsa-azul) !important;
	box-shadow: none !important; text-decoration: none !important; white-space: nowrap; overflow: hidden;
}
.paqsa-multi .con-tono .paqsa-fila__tono,
.paqsa-multi .con-tono .paqsa-fila__tono:hover,
.paqsa-multi .con-tono .paqsa-fila__tono:focus { background: var(--paqsa-azul) !important; color: #fff !important; }
.paqsa-multi .paqsa-fila__tono:hover { filter: brightness(.95); }
.paqsa-fila__punto { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 16px; box-shadow: 0 0 0 2px #fff; }
.paqsa-fila__txt { overflow: hidden; text-overflow: ellipsis; }
.paqsa-multi.con-error .paqsa-fila:not(.con-tono) .paqsa-fila__tono { border-color: #B3261E !important; color: #B3261E !important; }

.paqsa-cant {
	display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; height: 44px;
	border: 1.5px solid var(--paqsa-borde); border-radius: 6px; overflow: hidden; background: #fff;
}
.paqsa-multi .paqsa-cant__btn,
.paqsa-multi .paqsa-cant__btn:hover,
.paqsa-multi .paqsa-cant__btn:focus {
	border: 0 !important; background: none !important; color: var(--paqsa-texto) !important; box-shadow: none !important;
	font-size: 1.25rem !important; line-height: 1; padding: 0 !important; margin: 0; cursor: pointer; min-height: 0;
}
.paqsa-multi .paqsa-cant__input {
	width: 100% !important; height: 100% !important; border: 0 !important; text-align: center; padding: 0 !important; margin: 0;
	font: inherit; font-size: 1rem !important; color: var(--paqsa-texto); background: transparent !important; box-shadow: none !important;
	-moz-appearance: textfield; appearance: textfield; min-height: 0;
}
.paqsa-cant__input::-webkit-outer-spin-button, .paqsa-cant__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.paqsa-multi .paqsa-fila__quitar,
.paqsa-multi .paqsa-fila__quitar:hover,
.paqsa-multi .paqsa-fila__quitar:focus {
	width: 28px; height: 28px; border-radius: 50% !important; border: 0 !important; padding: 0 !important; margin: 0;
	background: #F1F2F4 !important; color: #5E646C !important; font-size: 18px !important; line-height: 1; cursor: pointer; box-shadow: none !important;
}

.paqsa-multi .paqsa-multi__agregar,
.paqsa-multi .paqsa-multi__agregar:hover,
.paqsa-multi .paqsa-multi__agregar:focus {
	background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 2px 0 0;
	color: var(--paqsa-azul) !important; font: inherit; font-size: .9rem !important; font-weight: 500; cursor: pointer;
	text-transform: none; letter-spacing: normal; text-decoration: none !important; min-height: 0;
}
.paqsa-multi .paqsa-multi__agregar:hover { text-decoration: underline !important; }
.paqsa-multi__agregar span { font-size: 1.1em; font-weight: 600; margin-right: 2px; }
.paqsa-multi__aviso { margin: 8px 0 0; color: #B3261E; font-size: .9rem; }

/* Botones de compra */
.paqsa-form-tonos .single_add_to_cart_button,
.paqsa-form-tonos .single_add_to_cart_button:hover,
.paqsa-form-tonos .single_add_to_cart_button:focus,
.paqsa-form-tonos .paqsa-comprar-ahora,
.paqsa-form-tonos .paqsa-comprar-ahora:hover,
.paqsa-form-tonos .paqsa-comprar-ahora:focus {
	flex: 1 1 0; min-width: 160px; height: 48px; margin: 0 !important; float: none !important;
	border-radius: 999px !important; padding: 0 20px !important; box-shadow: none !important;
	font: inherit; font-size: 1rem !important; font-weight: 600; letter-spacing: normal; text-transform: none; text-decoration: none !important;
	display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; line-height: 1.1;
}
.paqsa-form-tonos .single_add_to_cart_button,
.paqsa-form-tonos .single_add_to_cart_button:hover,
.paqsa-form-tonos .single_add_to_cart_button:focus {
	background: #fff !important; color: var(--paqsa-rosa) !important; border: 1.5px solid var(--paqsa-rosa) !important;
}
.paqsa-form-tonos .paqsa-comprar-ahora,
.paqsa-form-tonos .paqsa-comprar-ahora:hover,
.paqsa-form-tonos .paqsa-comprar-ahora:focus {
	background: var(--paqsa-rosa) !important; color: #fff !important; border: 1.5px solid var(--paqsa-rosa) !important;
}
.paqsa-form-tonos .single_add_to_cart_button:hover, .paqsa-form-tonos .paqsa-comprar-ahora:hover { filter: brightness(.96); }
.paqsa-form-tonos .woocommerce-variation-add-to-cart-disabled .paqsa-comprar-ahora { opacity: .5; cursor: not-allowed; }

/* ================= Muestra bajo la imagen ================= */
.paqsa-galeria-tonos { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; max-width: 100%; }
.paqsa-galeria-tonos[hidden] { display: none; }
.paqsa-galeria-tonos.varios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.paqsa-galeria-tonos__muestra {
	position: relative; height: 112px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
	transition: background .2s;
}
.paqsa-galeria-tonos.varios .paqsa-galeria-tonos__muestra { height: 84px; border-radius: 12px; }
.paqsa-galeria-tonos__muestra span {
	position: absolute; left: 16px; bottom: 12px; font-weight: 700; font-size: 1.1rem; letter-spacing: .01em;
}
.paqsa-galeria-tonos.varios .paqsa-galeria-tonos__muestra span { font-size: .95rem; left: 12px; bottom: 9px; }

/* ================= Modal (sin oscurecer la pantalla) ================= */
.paqsa-modal[hidden] { display: none !important; }
.paqsa-modal {
	position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center;
	padding: 16px; font-family: inherit; color: var(--paqsa-texto); pointer-events: none;
}
.paqsa-modal *, .paqsa-modal *::before, .paqsa-modal *::after { box-sizing: border-box; }
.paqsa-modal__fondo { position: absolute; inset: 0; background: transparent; pointer-events: auto; }
.paqsa-modal__caja {
	position: relative; background: #fff; border-radius: 18px; width: min(1040px, 100%); pointer-events: auto;
	max-height: calc(100vh - 32px); overflow: auto; padding: 28px 32px 24px;
	box-shadow: 0 18px 50px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
}
.paqsa-modal__titulo { font-size: 1.05rem; font-weight: 700; margin: 0 48px 20px 0; line-height: 1.3; color: var(--paqsa-texto); }
.paqsa-modal__cuerpo { display: grid; grid-template-columns: 240px minmax(0, 1fr) 260px; gap: 0; align-items: stretch; }
.paqsa-modal__cuerpo > * { min-width: 0; }

.paqsa-familias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; padding-right: 20px; }
.paqsa-modal .paqsa-familia {
	height: 46px; border-radius: 10px; border: 0 !important; cursor: pointer; font-size: .74rem; font-weight: 600;
	padding: 0 4px !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); transition: opacity .15s, transform .15s, box-shadow .15s;
}
.paqsa-modal .paqsa-familia:hover { transform: translateY(-1px); }
.paqsa-familias.hay-activa .paqsa-familia { opacity: .45; }
.paqsa-familias.hay-activa .paqsa-familia.activa { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--paqsa-texto); }

.paqsa-tonos { border-left: 1px solid #EEE; border-right: 1px solid #EEE; padding: 0 20px; display: flex; flex-direction: column; }
.paqsa-rejilla {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-content: start;
	height: 330px; overflow-y: auto; padding: 2px 6px 2px 2px; border-radius: 14px;
}
.paqsa-modal:not(.con-tonos) .paqsa-rejilla { border: 1.5px dashed var(--paqsa-borde); }
.paqsa-modal .paqsa-tono {
	position: relative; height: 62px; border: 0 !important; border-radius: 4px; cursor: pointer; padding: 0 !important;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); transition: transform .1s;
}
.paqsa-tono span { position: absolute; left: 6px; bottom: 4px; font-size: .64rem; font-weight: 600; letter-spacing: .01em; }
.paqsa-modal .paqsa-tono:hover { transform: scale(1.03); }
.paqsa-modal .paqsa-tono.activo { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--paqsa-texto); z-index: 1; }
.paqsa-nota { font-size: .66rem; color: var(--paqsa-gris); margin: 10px 0 0; }

.paqsa-vista { padding-left: 20px; display: flex; flex-direction: column; gap: 18px; }
.paqsa-vista__muestra { flex: 1; min-height: 220px; border-radius: 22px; border: 1.5px dashed var(--paqsa-borde); position: relative; transition: background .2s; }
.paqsa-vista__muestra.lleno { border: 0; }
.paqsa-vista__muestra span { position: absolute; left: 18px; bottom: 14px; font-size: 1.3rem; font-weight: 700; }

/* Botones del modal, blindados contra estilos del tema */
.paqsa-modal button { font-family: inherit; text-transform: none; letter-spacing: normal; text-decoration: none; min-height: 0; margin: 0; line-height: 1.2; text-shadow: none; }
.paqsa-modal button:focus, .paqsa-multi button:focus { outline: none; }
.paqsa-modal button:focus-visible, .paqsa-multi button:focus-visible { outline: 3px solid var(--paqsa-rosa) !important; outline-offset: 2px; }
.paqsa-modal .paqsa-modal__cerrar,
.paqsa-modal .paqsa-modal__cerrar:hover,
.paqsa-modal .paqsa-modal__cerrar:focus {
	position: absolute; top: 12px; right: 16px; width: 40px; height: 40px; cursor: pointer;
	background: none !important; color: #333 !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
	font-size: 34px; line-height: 1;
}
.paqsa-modal .paqsa-confirmar,
.paqsa-modal .paqsa-confirmar:hover,
.paqsa-modal .paqsa-confirmar:focus {
	width: 100%; cursor: pointer; font-weight: 600; font-size: .95rem;
	background: var(--paqsa-rosa) !important; color: #fff !important; border: 0 !important; box-shadow: none !important;
	border-radius: 999px !important; padding: 12px 18px !important;
}
.paqsa-modal .paqsa-confirmar:hover:not(:disabled) { filter: brightness(.94); }
.paqsa-modal .paqsa-confirmar:disabled,
.paqsa-modal .paqsa-confirmar:disabled:hover { background: var(--paqsa-rosa-claro) !important; cursor: not-allowed; opacity: 1 !important; }

/* ================= Tableta ================= */
@media (max-width: 900px) {
	.paqsa-modal__cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "fam fam" "tonos vista"; gap: 18px; }
	.paqsa-familias { grid-area: fam; grid-template-columns: repeat(6, 1fr); padding: 0; }
	.paqsa-tonos { grid-area: tonos; border: 0; padding: 0; }
	.paqsa-vista { grid-area: vista; padding: 0; }
}

/* ================= Textos/íconos que solo se usan en celular ================= */
.paqsa-txt-movil, .paqsa-icono-tono { display: none; }
.paqsa-galeria-tonos.vacio { display: none !important; }

/* La cantidad general de WooCommerce no se usa en Polycrom (va por tono). */
form.cart.paqsa-form-tonos .quantity,
form.cart.paqsa-form-tonos .quantity.paqsa-stepper { display: none !important; }

/* ================= Celular ================= */
@media (max-width: 600px) {
	/* ---- Ventana de tonos: familias en cuadrícula de 4, vista previa a lo ancho ---- */
	.paqsa-modal { padding: 0; align-items: flex-end; }
	.paqsa-modal__caja { border-radius: 16px 16px 0 0; max-height: 90vh; padding: 16px 14px 14px; box-shadow: 0 -10px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); }
	.paqsa-modal__titulo { font-size: .9rem; margin: 0 40px 12px 0; }
	.paqsa-modal .paqsa-modal__cerrar, .paqsa-modal .paqsa-modal__cerrar:hover, .paqsa-modal .paqsa-modal__cerrar:focus { top: 6px; right: 8px; font-size: 28px; }
	.paqsa-modal__cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fam" "tonos" "vista"; gap: 12px; }
	.paqsa-familias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0; }
	.paqsa-modal .paqsa-familia { height: 34px; font-size: .64rem; border-radius: 6px; padding: 0 2px !important; }
	.paqsa-tonos { border: 0; padding: 12px 0 0; border-top: 1px solid #EEE !important; }
	.paqsa-rejilla { height: 27vh; gap: 6px; padding-right: 4px; }
	.paqsa-modal .paqsa-tono { height: 42px; border-radius: 3px; }
	.paqsa-tono span { font-size: .56rem; left: 4px; bottom: 3px; }
	.paqsa-nota { font-size: .6rem; margin-top: 8px; }
	.paqsa-vista { flex-direction: column; gap: 10px; padding: 12px 0 0; border-top: 1px solid #EEE; }
	.paqsa-vista__muestra { flex: none; min-height: 0; height: 64px; border-radius: 12px; }
	.paqsa-vista__muestra span { left: 12px; bottom: 8px; font-size: 1rem; }
	.paqsa-modal .paqsa-confirmar, .paqsa-modal .paqsa-confirmar:hover, .paqsa-modal .paqsa-confirmar:focus { padding: 11px 16px !important; font-size: .9rem; }

	/* ---- Filas Color / Cantidad ---- */
	.paqsa-multi__cabecera { font-size: .9rem; margin-bottom: 6px; }
	.paqsa-multi__cabecera, .paqsa-fila { grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; }
	.paqsa-multi.varias .paqsa-multi__cabecera, .paqsa-multi.varias .paqsa-fila { grid-template-columns: minmax(0, 1fr) 112px 26px; }
	.paqsa-fila { margin-bottom: 8px; }
	.paqsa-cant { grid-template-columns: 32px minmax(0, 1fr) 32px; height: 40px; }
	.paqsa-multi .paqsa-fila__tono, .paqsa-multi .paqsa-fila__tono:hover, .paqsa-multi .paqsa-fila__tono:focus { height: 40px; padding: 0 8px !important; gap: 8px; font-size: .88rem !important; }
	.paqsa-fila__pre { display: none; }
	.paqsa-txt-escritorio { display: none; }
	.paqsa-txt-movil, .paqsa-icono-tono { display: inline; }
	.paqsa-icono-tono { display: inline-block; flex: 0 0 auto; }

	/* "Elige tu tono": contorno oscuro (como el diseño) */
	.paqsa-multi .paqsa-fila:not(.con-tono) .paqsa-fila__tono,
	.paqsa-multi .paqsa-fila:not(.con-tono) .paqsa-fila__tono:hover,
	.paqsa-multi .paqsa-fila:not(.con-tono) .paqsa-fila__tono:focus {
		background: #fff !important; color: #2B2B2B !important; border: 1.5px solid #2B2B2B !important; border-radius: 8px !important; font-weight: 600;
	}
	.paqsa-multi .paqsa-fila__quitar, .paqsa-multi .paqsa-fila__quitar:hover, .paqsa-multi .paqsa-fila__quitar:focus { width: 26px; height: 26px; font-size: 16px !important; }

	/* Línea divisoria después de "Añadir tono" */
	.paqsa-multi { padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid #E5E7EB; }
	.paqsa-multi .paqsa-multi__agregar, .paqsa-multi .paqsa-multi__agregar:hover, .paqsa-multi .paqsa-multi__agregar:focus { font-size: .85rem !important; }

	/* Botones de compra a lo ancho, uno debajo del otro */
	.paqsa-form-tonos .woocommerce-variation-add-to-cart,
	form.cart.paqsa-form-tonos:not(.variations_form) { gap: 10px; }
	.paqsa-form-tonos .single_add_to_cart_button, .paqsa-form-tonos .single_add_to_cart_button:hover, .paqsa-form-tonos .single_add_to_cart_button:focus,
	.paqsa-form-tonos .paqsa-comprar-ahora, .paqsa-form-tonos .paqsa-comprar-ahora:hover, .paqsa-form-tonos .paqsa-comprar-ahora:focus {
		flex: 1 1 100% !important; min-width: 0; height: 42px; font-size: .92rem !important;
	}

	/* Sin tono elegido: Cantidad y botones de compra en gris (como el diseño) */
	.paqsa-form-tonos.paqsa-sin-tono .paqsa-multi__cabecera span:last-child { color: #BDBDBD; }
	.paqsa-form-tonos.paqsa-sin-tono .paqsa-cant { opacity: .45; }
	.paqsa-form-tonos.paqsa-sin-tono .single_add_to_cart_button,
	.paqsa-form-tonos.paqsa-sin-tono .single_add_to_cart_button:hover { color: #9A9A9A !important; border-color: #BDBDBD !important; }
	.paqsa-form-tonos.paqsa-sin-tono .paqsa-comprar-ahora { opacity: .5; }

	/* Muestra bajo la foto: más baja; recuadro punteado sin tono */
	.paqsa-galeria-tonos.vacio { display: grid !important; }
	.paqsa-galeria-tonos__muestra { height: 52px; border-radius: 12px; }
	.paqsa-galeria-tonos.varios .paqsa-galeria-tonos__muestra { height: 44px; border-radius: 10px; }
	.paqsa-galeria-tonos__muestra span { left: 12px; bottom: 8px; font-size: .95rem; }
	.paqsa-galeria-tonos__vacio { background: #fff !important; box-shadow: none; border: 1.5px dashed #D9DDE3; }
}
@media (max-width: 380px) {
	.paqsa-fila__tono svg:not(.paqsa-icono-tono) { display: none; }
}

/* ================= v2.10: "Elige tu tono" negro con ícono en todos los tamaños ================= */
.paqsa-icono-tono { display: inline-block !important; width: 18px; height: 18px; flex: 0 0 18px; object-fit: contain; }
.paqsa-multi .paqsa-fila:not(.con-tono) .paqsa-fila__tono,
.paqsa-multi .paqsa-fila:not(.con-tono) .paqsa-fila__tono:hover,
.paqsa-multi .paqsa-fila:not(.con-tono) .paqsa-fila__tono:focus {
	background: #fff !important; color: #2B2B2B !important; border: 1.5px solid #2B2B2B !important; border-radius: 8px !important; gap: 8px;
}
.paqsa-multi .con-tono .paqsa-fila__tono { border-radius: 8px !important; }
/* Sin tono: Cantidad en gris también en computadora */
.paqsa-form-tonos.paqsa-sin-tono .paqsa-multi__cabecera span:last-child { color: #BDBDBD; }
.paqsa-form-tonos.paqsa-sin-tono .paqsa-cant { opacity: .45; }