/* Pa los detalles — variaciones como pills.
   Radios reales (accesibles con teclado y lector de pantalla); el <select>
   original queda oculto pero funcional para el script de variaciones de Woo. */
.pld-pills {
	/* --pld-pill: color elegido en Ajustes (inline); si no, contraste del tema. */
	--pld-pc: var(--pld-pill, var(--wp--preset--color--contrast, #111));
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 2px 0 6px;
}

/* Modo lista multi-atributo: la tabla de selects entera se oculta
   (los selects siguen vivos para el script de variaciones de Woo). */
form.variations_form.pld-list-active table.variations {
	display: none;
}

/* El select se oculta sin sacarlo del flujo de eventos. */
select.pld-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.pld-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	margin: 0;
}

.pld-pill input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.pld-pill span {
	display: inline-block;
	padding: 8px 18px;
	border: 1.5px solid var(--pld-pc);
	border-radius: 999px;
	font-size: 0.9em;
	font-weight: 500;
	line-height: 1.2;
	color: var(--pld-pc);
	background: var(--wp--preset--color--base, #fff);
	transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
	user-select: none;
}

.pld-pill:hover span {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Seleccionado: relleno con el color elegido. */
.pld-pill input:checked + span {
	background: var(--pld-pc);
	border-color: var(--pld-pc);
	color: var(--wp--preset--color--base, #fff);
	font-weight: 600;
}

/* Foco con teclado. */
.pld-pill input:focus-visible + span {
	outline: 2px solid var(--pld-pc);
	outline-offset: 2px;
}

/* No disponible con la combinación actual: tachado y atenuado,
   pero clicable (Woo permite elegirlo y reajusta el resto). */
.pld-pill.pld-off span {
	opacity: 0.35;
	text-decoration: line-through;
	border-style: dashed;
}

/* ── Pills con carátula ─────────────────────────────────────────────────────
   Cuando las variaciones tienen imágenes distintas, cada pill muestra la
   portada en miniatura con el nombre debajo. */
.pld-pill.pld-has-img span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 14px;
}

.pld-pill.pld-has-img img {
	display: block;
	height: 72px;
	width: auto;
	max-width: 90px;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.pld-pill.pld-has-img em {
	font-style: normal;
	font-size: 0.85em;
}

/* Seleccionada: la carátula no se invierte, solo el marco y el texto. */
.pld-pill.pld-has-img input:checked + span img {
	box-shadow: 0 0 0 2px var(--wp--preset--color--base, #fff);
}

/* ── Modo "lista" (una fila por variación: radio + carátula + título + precio)
   Tarjetas suaves a lo ancho de la columna (lmco centra el form de compra en
   flex: la lista toma la fila entera para arrancar en el borde izquierdo).
   La seleccionada se marca con el color de la casa, sin saltos de tamaño. ── */
.pld-pills.pld-style-list {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	width: 100%;
	flex-basis: 100%;
}

/* Encabezado pequeño del grupo ("Formato"). */
.pld-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6b7280;
	margin: 0 0 2px;
}

.pld-style-list .pld-pill {
	display: flex;
	align-items: center;
}

.pld-style-list .pld-pill input {
	position: static;
	opacity: 1;
	width: 18px;
	height: 18px;
	margin: 0 12px 0 2px;
	flex-shrink: 0;
	accent-color: var(--pld-pc);
	cursor: pointer;
}

.pld-style-list .pld-pill span {
	display: flex;
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: 14px;
	flex: 1;
	padding: 10px 14px;
	border: 1.5px solid #e5e7eb;
	border-radius: 14px;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #111);
}

.pld-style-list .pld-pill img {
	display: block;
	height: 60px;
	width: auto;
	max-width: 48px;
	object-fit: contain;
	/* Sin marcos: se anula cualquier borde/fondo/sombra que el tema
	   le ponga a las imágenes. */
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	border-radius: 3px;
	box-shadow: none !important;
	flex-shrink: 0;
}

.pld-style-list .pld-row-info strong {
	display: block;
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast, #111);
}

.pld-style-list .pld-row-price {
	font-size: 0.95em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	margin-top: 2px;
}

/* Seleccionada: borde y lavado suave del color de la casa; los textos se
   quedan en tinta (mismo padding que sin elegir → nada brinca). */
.pld-style-list .pld-pill input:checked + span {
	padding: 10px 14px;
	border-radius: 14px;
	border-color: var(--pld-pc);
	background: rgba(173, 21, 49, 0.05);
	box-shadow: inset 0 0 0 0.5px var(--pld-pc);
}

.pld-style-list .pld-pill input:checked + span strong {
	color: var(--wp--preset--color--contrast, #111);
}

.pld-style-list .pld-pill input:checked + span .pld-row-price {
	color: var(--pld-pc);
	font-weight: 700;
}

.pld-style-list .pld-pill:hover span {
	transform: none;
	box-shadow: none;
}

.pld-style-list .pld-pill:hover input:not(:checked) + span {
	border-color: #cbd5e1;
}

.pld-style-list .pld-pill:hover input:checked + span {
	box-shadow: inset 0 0 0 0.5px var(--pld-pc);
}

.pld-style-list .pld-pill input:focus-visible {
	outline: 2px solid var(--pld-pc);
	outline-offset: 2px;
}

.pld-style-list .pld-pill input:focus-visible + span {
	outline: none;
}

/* ── Modo "radios clásicos" (Ajustes → Estilo de variaciones) ──────────────
   Circulito nativo visible + texto plano; el color sale de accent-color. */
.pld-pills.pld-style-radios {
	flex-direction: column;
	gap: 6px;
}

.pld-style-radios .pld-pill input {
	position: static;
	opacity: 1;
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--pld-pc);
	cursor: pointer;
}

.pld-style-radios .pld-pill span {
	border: 0;
	border-radius: 0;
	padding: 0 0 0 9px;
	background: transparent;
	color: var(--wp--preset--color--contrast, #111);
}

.pld-style-radios .pld-pill:hover span {
	transform: none;
	box-shadow: none;
	text-decoration: underline;
}

.pld-style-radios .pld-pill input:checked + span {
	background: transparent;
	color: var(--pld-pc);
	font-weight: 600;
}

.pld-style-radios .pld-pill input:focus-visible + span {
	outline: none;
}

.pld-style-radios .pld-pill input:focus-visible {
	outline: 2px solid var(--pld-pc);
	outline-offset: 2px;
}

/* ── Selector «Papel | Ebook» (Pa-ficha 1.1.0) ──────────────────────────────
   Solo en los libros con las dos variaciones de Formato. Dos segmentos lado a
   lado; el radio sigue ahí (accesible con teclado) pero no se ve. La tabla y
   el <select> de Woo quedan como siempre (ocultos y vivos). El form variable
   es GRID: aquí solo se toca el grupo de pills, nunca el form. */
.pld-pills.pld-style-list.pld-formato {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
}

.pld-style-list.pld-formato .pld-eyebrow {
	grid-column: 1 / -1;
	padding: 8px 12px 6px;
	margin: 0;
	border-bottom: 1px solid #e5e7eb;
}

.pld-style-list.pld-formato .pld-pill {
	position: relative;
	display: flex;
	min-width: 0;
	margin: 0;
}

.pld-style-list.pld-formato .pld-pill + .pld-pill {
	border-left: 1px solid #e5e7eb;
}

.pld-style-list.pld-formato .pld-pill input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.pld-style-list.pld-formato .pld-pill span,
.pld-style-list.pld-formato .pld-pill input:checked + span {
	justify-content: center;
	text-align: center;
	min-height: 56px;
	padding: 10px 8px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--wp--preset--color--base, #fff);
	cursor: pointer;
}

.pld-style-list.pld-formato .pld-row-info strong {
	font-size: 15px;
	font-weight: 700;
}

.pld-style-list.pld-formato .pld-row-price {
	font-size: 14px;
}

.pld-style-list.pld-formato .pld-row-promesa {
	font-size: 12px;
	line-height: 1.3;
	color: #6b7280;
	margin-top: 2px;
}

/* Elegido: tinta llena (texto claro), como en la maqueta. */
.pld-style-list.pld-formato .pld-pill input:checked + span {
	background: #1f2937;
}

.pld-style-list.pld-formato .pld-pill input:checked + span strong,
.pld-style-list.pld-formato .pld-pill input:checked + span .pld-row-price,
.pld-style-list.pld-formato .pld-pill input:checked + span .pld-row-promesa {
	color: #fff;
}

.pld-style-list.pld-formato .pld-pill:hover input:not(:checked) + span {
	background: #f9fafb;
}

.pld-style-list.pld-formato .pld-pill input:focus-visible + span {
	outline: 2px solid var(--pld-pc);
	outline-offset: -4px;
}

.pld-style-list.pld-formato .pld-pill.pld-off span {
	opacity: 0.55;
}

/* lm-custom pone «body .pld-pill *:not(img) { background: transparent !important }»:
   para el segmento elegido hace falta ganarle con más especificidad. */
html body .pld-pills.pld-formato .pld-pill input:checked + span {
	background: #1f2937 !important;
}
html body .pld-pills.pld-formato .pld-pill:hover input:not(:checked) + span {
	background: #f9fafb !important;
}
html body .pld-pills.pld-formato .pld-pill input:checked + span,
html body .pld-pills.pld-formato .pld-pill input:checked + span strong,
html body .pld-pills.pld-formato .pld-pill input:checked + span .pld-row-price,
html body .pld-pills.pld-formato .pld-pill input:checked + span .pld-row-promesa {
	color: #fff !important;
}