/**
 * Tabla comparativa de serie (módulo series_specs).
 *
 * CSS autónomo: define sus propias variables con un fallback que toma, si
 * existen, las del tema (paleta CPS). Así el módulo se ve correcto en cualquier
 * sitio y se integra de forma natural cuando el tema está presente.
 *
 * Sin uso de `!important` en ninguna regla: la especificidad se gobierna
 * acotando todo bajo `.wck-series-specs`.
 */

.wck-series-specs {
	--wckss-accent: var(--green, #f4d300);
	--wckss-accent-soft: var(--green-soft, #fdfce9);
	--wckss-accent-line: var(--green-25, rgba(244, 211, 0, .35));
	--wckss-ink: var(--ink, #181715);
	--wckss-ink-3: var(--ink-3, #4d4a46);
	--wckss-muted: var(--muted, #73706a);
	--wckss-line: var(--line, #e6e4df);
	--wckss-zebra: var(--ink-sh-04, rgba(24, 23, 21, .035));
	--wckss-head-bg: var(--ink, #181715);
	--wckss-head-fg: #fff;
	--wckss-radius: var(--r-md, 12px);

	overflow-x: auto;
	border: 1px solid var(--wckss-line);
	border-radius: var(--wckss-radius);
}

.wck-series-specs table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: var(--text-sm, .9375rem);
	color: var(--wckss-ink);
}

.wck-series-specs th,
.wck-series-specs td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--wckss-line);
	border-right: 1px solid var(--wckss-line);
	vertical-align: top;
	line-height: 1.45;
}

.wck-series-specs th:last-child,
.wck-series-specs td:last-child {
	border-right: none;
}

.wck-series-specs tbody tr:last-child th,
.wck-series-specs tbody tr:last-child td {
	border-bottom: none;
}

/* Cabeceras de columna (la fila superior del thead). */
.wck-series-specs thead th {
	background: var(--wckss-head-bg);
	color: var(--wckss-head-fg);
	font-weight: 600;
	font-size: var(--text-xs, .8125rem);
	letter-spacing: .02em;
	text-align: center;
	white-space: nowrap;
}

/* Cabeceras de fila (th con scope="row" o th de la primera columna del body). */
.wck-series-specs tbody th {
	background: var(--wckss-zebra);
	color: var(--wckss-ink);
	font-weight: 600;
}

.wck-series-specs tbody tr:nth-child(even) td {
	background: var(--wckss-zebra);
}

/* Notas finas dentro de celdas. */
.wck-series-specs td span,
.wck-series-specs th span {
	display: inline;
}

.wck-series-specs .mininote,
.wck-series-specs td > span.mininote {
	display: block;
	margin-top: 4px;
	font-size: var(--text-2xs, .6875rem);
	font-weight: 400;
	color: var(--wckss-muted);
	line-height: 1.3;
}

/* ---- Columna del producto actual: resaltada, sin enlace ---- */
.wck-series-specs thead th.is-current {
	background: var(--wckss-accent);
	color: var(--wckss-ink);
	position: relative;
}

.wck-series-specs .wck-series-specs__badge {
	display: block;
	margin-bottom: 4px;
	font-size: var(--text-2xs, .6875rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .85;
}

/* ---- Columnas de hermanos: enlace navegable ---- */
.wck-series-specs thead th.is-linked {
	cursor: pointer;
	transition: background-color .15s ease;
}

.wck-series-specs thead th.is-linked:hover {
	background: var(--wckss-ink-3);
}

.wck-series-specs .wck-series-specs__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.wck-series-specs .wck-series-specs__link:hover {
	text-decoration: underline;
}

/* ---- Columna no disponible (ID no resoluble) ---- */
.wck-series-specs thead th.is-unavailable {
	opacity: .55;
}

/* Responsivo: en pantallas estrechas la tabla scrollea horizontalmente
   (el contenedor ya tiene overflow-x:auto). Reducimos padding para ganar aire. */
@media (max-width: 600px) {
	.wck-series-specs th,
	.wck-series-specs td {
		padding: 10px 12px;
	}
}