/**
 * Las tablas de la política de cookies, con la piel de la tienda.
 *
 * Una ficha de cristal por categoría y, dentro, la tabla de servicios con el
 * mismo lenguaje que el resto de la web: cabeceras en oro y versales —como la
 * tabla del pedido—, y en móvil cada celda dice lo que es con `data-titulo`
 * —como las líneas del carrito—. Nada nuevo que aprender.
 *
 * **Los colores salen de los tokens del tema**, con un valor de reserva detrás
 * por si algún día la hoja llega antes o el tema cambia: una página de legales
 * no puede quedarse en blanco por eso.
 */

.bxg-politica,
.bxg-politica__pie {
	--bxg-p-borde: var(--bx-borde, rgba(255, 255, 255, .08));
	--bxg-p-linea: var(--bx-panel-linea, rgba(255, 255, 255, .10));
	--bxg-p-texto: var(--bx-texto, #fff);
	--bxg-p-texto-2: var(--bx-texto-2, rgba(255, 255, 255, .72));
	--bxg-p-texto-3: var(--bx-texto-3, rgba(255, 255, 255, .56));
	--bxg-p-radio: var(--bx-r-l, 20px);

}

.bxg-politica {
	display: grid;
	gap: var(--bx-e-4, 24px);
	margin: var(--bx-e-4, 24px) 0;
}

/* ------------------------------------------------------ La ficha de cristal */

.bxg-ficha {
	/* Un color de la casa por categoría: se distinguen de un vistazo sin tener
	   que leer el título. Ninguno es inventado, los cuatro son tokens. */
	--bxg-acento: var(--bx-accent, #38d6f5);

	position: relative;
	padding: var(--bx-e-4, 24px);
	border: 1px solid var(--bxg-p-borde);
	border-radius: var(--bxg-p-radio);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 42%),
		var(--bx-surface, rgba(13, 18, 36, .66));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
	overflow: hidden;
}

/* El filo de color arriba: dice de qué va la ficha antes de leerla. */
.bxg-ficha::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--bxg-acento), transparent 72%);
	opacity: .85;
}

.bxg-ficha--necesarias {
	--bxg-acento: var(--bx-gold, #d3a85f);
}

.bxg-ficha--preferencias {
	--bxg-acento: var(--bx-accent, #38d6f5);
}

.bxg-ficha--analiticas {
	--bxg-acento: var(--bx-accent-2, #8b5cf6);
}

.bxg-ficha--marketing {
	--bxg-acento: var(--bx-naranja, #e0603a);
}

/* --------------------------------------------------------- Su cabecera */

.bxg-ficha__cabecera {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bx-e-2, 12px);
	align-items: center;
	margin-bottom: var(--bx-e-2, 12px);
}

.bxg-ficha__icono {
	display: grid;
	flex: none;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid color-mix(in srgb, var(--bxg-acento) 38%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--bxg-acento) 12%, transparent);
	color: var(--bxg-acento);
}

.bxg-ficha__svg {
	width: 22px;
	height: 22px;
}

.bxg-politica .bxg-ficha__titulo {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	color: var(--bxg-p-texto);
	font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
	line-height: 1.2;
	/* Sin `text-transform`: el tema ya pone en versales los títulos de la
	   prosa, y forzarlo aquí lo dejaba a dos alturas distintas. */
}

/* La píldora de estado. Dice lo que importa —si se puede apagar o no— sin
   colgarlo del título. */
.bxg-ficha__marca {
	flex: none;
	padding: 5px 12px;
	border: 1px solid var(--bxg-p-borde);
	border-radius: var(--bx-r-pill, 999px);
	background: rgba(255, 255, 255, .05);
	color: var(--bxg-p-texto-3);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bxg-ficha__marca--fija {
	border-color: color-mix(in srgb, var(--bxg-acento) 42%, transparent);
	background: color-mix(in srgb, var(--bxg-acento) 14%, transparent);
	color: var(--bxg-acento);
}

.bxg-politica .bxg-ficha__resumen {
	margin: 0 0 var(--bx-e-3, 16px);
	color: var(--bxg-p-texto-2);
	font-size: .95rem;
	line-height: 1.65;
}

/* -------------------------------------------------------------- La tabla */

.bxg-politica .bxg-tabla {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	font-size: .92rem;
	table-layout: fixed;
}

.bxg-politica .bxg-tabla th,
.bxg-politica .bxg-tabla td {
	border: 0;
	background: none;
	vertical-align: top;
}

/* Las cabeceras, en oro y versales: es como se leen las de la tabla del
   pedido, y dos maneras de encabezar una tabla en la misma web serían una de
   más. */
.bxg-politica .bxg-tabla thead th {
	padding: 0 var(--bx-e-2, 12px) 10px;
	border-bottom: 1px solid var(--bxg-p-linea);
	color: var(--bx-gold, #d3a85f);
	font-family: var(--bx-ui, inherit);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
}

.bxg-politica .bxg-tabla tbody tr + tr th,
.bxg-politica .bxg-tabla tbody tr + tr td {
	border-top: 1px solid var(--bxg-p-linea);
}

.bxg-politica .bxg-tabla tbody th,
.bxg-politica .bxg-tabla tbody td {
	padding: 14px var(--bx-e-2, 12px);
	line-height: 1.55;
}

/* Quién la pone: el dato con el que se busca, así que va en blanco y con
   peso. Se le deja el ancho suficiente para que no parta los nombres. */
.bxg-politica .bxg-tabla tbody .bxg-tabla__quien {
	width: 30%;
	color: var(--bxg-p-texto);
	font-weight: 600;
	text-align: left;
}

.bxg-politica .bxg-tabla .bxg-tabla__para {
	color: var(--bxg-p-texto-2);
}

.bxg-politica .bxg-tabla .bxg-tabla__dura {
	width: 22%;
	text-align: right;
}

/* La duración, en píldora: es un valor, no una frase, y así se lee de un
   golpe al recorrer la columna. */
.bxg-duracion {
	display: inline-block;
	padding: 4px 11px;
	border: 1px solid var(--bxg-p-borde);
	border-radius: var(--bx-r-pill, 999px);
	background: rgba(255, 255, 255, .05);
	color: var(--bxg-p-texto-2);
	font-size: .8rem;
	line-height: 1.45;
	white-space: nowrap;
}

/* ------------------------------------------------- Móvil: fichas apiladas */

/*
 * Tres columnas en 331 px no caben: partían «The / Black / Box / Shop» en
 * cuatro líneas y la tercera columna se salía por la derecha. Debajo de 782
 * —el corte de la casa— cada servicio pasa a ser una ficha y **cada celda dice
 * lo que es**, igual que las líneas del carrito. La tabla sigue siendo una
 * tabla; solo cambia cómo se dibuja.
 */
@media (max-width: 781px) {
	.bxg-ficha {
		padding: var(--bx-e-3, 16px);
	}

	/* La píldora de estado, siempre en su propia línea. Con el título a tamaño
	   de móvil unas veces cabía al lado y otras no, y las cuatro fichas se leían
	   distintas según lo largo que fuera el rótulo. */
	.bxg-ficha__marca {
		width: 100%;
		text-align: center;
	}

	.bxg-politica .bxg-tabla,
	.bxg-politica .bxg-tabla tbody,
	.bxg-politica .bxg-tabla tr,
	.bxg-politica .bxg-tabla th,
	.bxg-politica .bxg-tabla td {
		display: block;
		width: auto;
	}

	/* La cabecera de columnas sobra cuando cada celda ya se nombra sola. Se
	   esconde solo a la vista: el lector de pantalla la sigue teniendo. */
	.bxg-politica .bxg-tabla thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		clip-path: inset(50%);
		overflow: hidden;
		white-space: nowrap;
	}

	.bxg-politica .bxg-tabla tbody tr {
		margin-top: var(--bx-e-2, 12px);
		padding: var(--bx-e-2, 12px) var(--bx-e-3, 16px);
		border: 1px solid var(--bxg-p-borde);
		border-radius: var(--bx-r-m, 14px);
		background: rgba(255, 255, 255, .035);
	}

	.bxg-politica .bxg-tabla tbody tr:first-child {
		margin-top: 0;
	}

	.bxg-politica .bxg-tabla tbody tr + tr th,
	.bxg-politica .bxg-tabla tbody tr + tr td {
		border-top: 0;
	}

	.bxg-politica .bxg-tabla tbody th,
	.bxg-politica .bxg-tabla tbody td {
		padding: 0;
	}

	.bxg-politica .bxg-tabla tbody .bxg-tabla__quien {
		width: auto;
		font-size: 1rem;
	}

	.bxg-politica .bxg-tabla .bxg-tabla__para {
		margin: 6px 0 10px;
		font-size: .9rem;
	}

	.bxg-politica .bxg-tabla .bxg-tabla__dura {
		width: auto;
		text-align: left;
	}

	/* Solo la duración necesita presentarse: el nombre se lee solo, y el «para
	   qué» va justo debajo de él. */
	.bxg-politica .bxg-tabla .bxg-tabla__dura::before {
		content: attr(data-titulo) ": ";
		margin-right: 6px;
		color: var(--bxg-p-texto-3);
		font-size: .78rem;
	}
}

/* Entre 782 y 1000 la columna del «para qué» se queda estrecha; se le quita
   sitio a las otras dos antes que dejar que parta palabras. */
@media (min-width: 782px) and (max-width: 1000px) {
	.bxg-politica .bxg-tabla tbody .bxg-tabla__quien {
		width: 26%;
	}

	.bxg-politica .bxg-tabla .bxg-tabla__dura {
		width: 20%;
	}
}

/* ------------------------------------------------------ El botón de volver */

.bxg-politica__pie {
	margin: var(--bx-e-3, 16px) 0;
}

/*
 * Con el párrafo y la etiqueta delante: el subrayado de la prosa lo pone
 * `.hentry .entry-content a`, y una regla más floja perdía. Los botones de esta
 * casa no llevan subrayado en ningún estado (doc 03), tampoco dentro de un
 * texto legal.
 *
 * Y **sin colgar de `.bxg-politica`**: este botón es su propio shortcode y vive
 * fuera del bloque de las fichas —arriba de la página, mientras el listado va
 * abajo—, así que una regla que empezara por el bloque no le llegaba nunca.
 */
p.bxg-politica__pie a.bxg-politica__cambiar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid color-mix(in srgb, var(--bx-accent, #38d6f5) 45%, transparent);
	border-radius: var(--bx-r-pill, 999px);
	background: color-mix(in srgb, var(--bx-accent, #38d6f5) 12%, transparent);
	color: var(--bx-accent, #38d6f5);
	font-size: .9rem;
	font-weight: 600;
	/* Es un botón, y los botones de esta casa no llevan subrayado en ningún
	   estado (doc 03). */
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

p.bxg-politica__pie a.bxg-politica__cambiar::before {
	content: "🍪";
	font-size: 1rem;
}

p.bxg-politica__pie a.bxg-politica__cambiar:hover,
p.bxg-politica__pie a.bxg-politica__cambiar:focus {
	border-color: color-mix(in srgb, var(--bx-accent, #38d6f5) 70%, transparent);
	background: color-mix(in srgb, var(--bx-accent, #38d6f5) 20%, transparent);
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	p.bxg-politica__pie a.bxg-politica__cambiar {
		transition: none;
	}
}