/**
 * La Daurada Cookies — tabla del catálogo (`[cookie_table]`).
 *
 * Hasta ahora el plugin no traía estilo propio para esta tabla y el aspecto lo decidía, sin
 * saberlo, la hoja de la página legal del tema. Allí `.mt-legal-content table` llevaba
 * `display: block` para conseguir scroll horizontal, y eso saca a la tabla del layout tabular:
 * las celdas dejan de alinearse en columnas y la tabla se despliega hacia abajo. El scroll de
 * una tabla ancha va en su CONTENEDOR, nunca en la propia tabla.
 *
 * Dos formas, un solo marcado:
 *   ANCHO   (> 640px)  tabla de verdad, con la cabecera repetida arriba de cada categoría.
 *   ESTRECHO(≤ 640px)  cada cookie es una ficha y cada dato lleva delante su etiqueta, sacada
 *                      del `data-label` que escribe `LDC_Cookie_Table`. Sin scroll horizontal:
 *                      en una tabla de cinco columnas, desplazarse a lo ancho para leer «cuánto
 *                      dura esta cookie» es justo lo que nadie hace.
 *
 * La semántica de tabla no depende del `display`: el marcado lleva `role` explícito en tabla,
 * filas y celdas, así que al pasar a fichas el lector de pantalla las sigue anunciando como
 * tabla y cada celda mantiene su columna.
 *
 * Colores y medidas salen de los tokens `--mt-*` del tema cuando existen, con el literal como
 * reserva, igual que en banner.css.
 */

.ldc-cookie-table {
	--ldc-ct-ink: var(--mt-color-text-heading, #063f47);
	--ldc-ct-fg: var(--mt-color-text-body, #333333);
	--ldc-ct-rule: var(--mt-color-border, #e0e0e0);
	--ldc-ct-brand: var(--mt-color-primary-dark, #0a7a87);
	--ldc-ct-tint: var(--mt-color-primary-subtle, #f4fbfc);
	--ldc-ct-paper: var(--mt-color-bg-white, #ffffff);
	--ldc-ct-radius: var(--mt-radius-lg, 14px);

	display: grid;
	gap: clamp(28px, 4vw, 44px);
}

/* === Tabla ancha ========================================================= */

.ldc-cookie-table__group {
	width: 100%;
	border-collapse: collapse;
	/* Que ninguna columna se coma el resto: el reparto lo decide la regla de abajo, no el texto
	   más largo de cada una. */
	table-layout: fixed;
	color: var(--ldc-ct-fg);
	font-size: var(--mt-font-size-sm, 0.9375rem);
	line-height: 1.55;
	/* Palabras largas (dominios, nombres de cookie con guiones bajos) parten antes que forzar
	   un scroll horizontal. */
	overflow-wrap: break-word;
}

/* El título de cada categoría se lee como un subtítulo más de la página legal, así que copia el
   de un `h3` del tema: misma familia, mismo cuerpo, mismo peso y mismo interlineado.

   El peso es lo que importa: Bebas Neue **solo existe en 400**. Pedirle 600, que es lo que había
   aquí, no le pone más grosor porque no hay otro corte que cargar -- el navegador lo finge
   engordando los trazos él mismo (*faux bold*), y en una tipografía de cartel como esta el
   resultado se ve emborronado, como si el texto llevara sombra. */
.ldc-cookie-table__group caption {
	caption-side: top;
	margin-bottom: 12px;
	color: var(--ldc-ct-ink);
	font-family: var(--mt-font-heading, inherit);
	font-size: var(--mt-font-size-lg, 1.25rem);
	font-weight: var(--mt-font-weight-regular, 400);
	line-height: var(--mt-line-height-snug, 1.35);
	letter-spacing: normal;
	text-align: left;
}

.ldc-cookie-table__group thead th {
	padding: 10px 14px;
	background: var(--ldc-ct-tint);
	border-bottom: 2px solid var(--ldc-ct-brand);
	color: var(--ldc-ct-ink);
	font-size: var(--mt-font-size-xs, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
	/* La hoja de la página legal del tema pone `white-space: nowrap` en todos los `th`. Aquí
	   sobra: con el reparto fijo de columnas, una cabecera que no puede partirse se sale de la
	   suya. */
	white-space: normal;
}

.ldc-cookie-table__group tbody th,
.ldc-cookie-table__group tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--ldc-ct-rule);
	text-align: left;
	vertical-align: top;
}

/* El nombre de la cookie es el identificador de la fila: monoespaciado, que es como se escribe
   en el navegador, y sin partirse por la mitad si cabe. */
.ldc-cookie-table__group tbody th {
	color: var(--ldc-ct-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	font-weight: 600;
	/* Mismo motivo que arriba: un nombre de cookie largo tiene que poder partirse. */
	white-space: normal;
}

.ldc-cookie-table__group tbody tr:nth-child(even) th,
.ldc-cookie-table__group tbody tr:nth-child(even) td {
	background: color-mix(in srgb, var(--ldc-ct-tint) 55%, transparent);
}

/* Reparto: la finalidad es lo que de verdad necesita sitio; duración y titularidad son cortas. */
.ldc-cookie-table__group thead th:nth-child(1) { width: 22%; }
.ldc-cookie-table__group thead th:nth-child(2) { width: 18%; }
.ldc-cookie-table__group thead th:nth-child(3) { width: 33%; }
.ldc-cookie-table__group thead th:nth-child(4) { width: 14%; }
/* «Pròpia/Tercer» es la cabecera más larga de las cortas: con menos sitio se partía por la
   mitad de «Tercer». */
.ldc-cookie-table__group thead th:nth-child(5) { width: 13%; }

.ldc-cookie-table__empty {
	color: var(--mt-color-text-secondary, #666666);
	font-style: italic;
}

/* === Fichas (pantalla estrecha) ==========================================
   El corte lo decide el viewport y no el contenedor porque esta tabla vive dentro del texto de
   una página legal, cuyo ancho ya lo fija el tema; aquí no hay una superficie propia que medir
   como en el banner. */
@media (max-width: 640px) {
	.ldc-cookie-table {
		gap: 32px;
	}

	.ldc-cookie-table__group,
	.ldc-cookie-table__group tbody,
	.ldc-cookie-table__group tr,
	.ldc-cookie-table__group tbody th,
	.ldc-cookie-table__group tbody td {
		display: block;
		width: auto;
	}

	/* La cabecera ya no encabeza nada: cada dato lleva su etiqueta al lado. Se oculta a la vista
	   pero no al lector de pantalla, que sigue usándola para nombrar cada celda. */
	.ldc-cookie-table__group thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.ldc-cookie-table__group tbody tr {
		margin-bottom: 14px;
		padding: 4px 16px 12px;
		border: 1px solid var(--ldc-ct-rule);
		border-radius: var(--ldc-ct-radius);
		background: var(--ldc-ct-paper);
	}

	.ldc-cookie-table__group tbody tr:nth-child(even) th,
	.ldc-cookie-table__group tbody tr:nth-child(even) td {
		background: none;
	}

	/* El nombre de la cookie hace de título de la ficha. */
	.ldc-cookie-table__group tbody th {
		padding: 12px 0 10px;
		border-bottom: 2px solid var(--ldc-ct-brand);
		font-size: 1rem;
	}

	.ldc-cookie-table__group tbody th::before {
		/* El título no necesita repetir «Galeta»: ya se ve que lo es. */
		display: none;
	}

	.ldc-cookie-table__group tbody td {
		display: grid;
		grid-template-columns: minmax(6.5rem, 34%) 1fr;
		gap: 4px 12px;
		padding: 9px 0;
		border-bottom: 1px solid var(--ldc-ct-rule);
	}

	.ldc-cookie-table__group tbody td:last-child {
		border-bottom: 0;
		padding-bottom: 2px;
	}

	.ldc-cookie-table__group tbody td::before {
		content: attr(data-label);
		color: var(--ldc-ct-ink);
		font-size: var(--mt-font-size-xs, 0.8125rem);
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	/* Muy estrecho: la etiqueta pasa encima del dato en vez de robarle la mitad del ancho. */
	@media (max-width: 400px) {
		.ldc-cookie-table__group tbody td {
			grid-template-columns: 1fr;
			gap: 2px;
		}
	}
}

/* Alto contraste del tema: bordes y filete de marca pasan al negro con el resto del sitio. */
:root.mt-high-contrast .ldc-cookie-table {
	--ldc-ct-rule: var(--mt-color-border, #000000);
	--ldc-ct-brand: var(--mt-color-primary-dark, #00232a);
}

@media (prefers-reduced-motion: reduce) {
	.ldc-cookie-table__group {
		scroll-behavior: auto;
	}
}