/* Design Toolkit — Tabla responsive */

.wp-block-design-toolkit-responsive-table,
.dtk-rt {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.dtk-rt {
	position: relative;
	/* Móvil: --dtk-rt-col-count (JS) × --dtk-rt-column-pct (bloque). */
	--dtk-rt-col-count: 4;
}

.dtk-rt__scroll {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	/* Mismo redondeo visual en desktop y móvil. */
	border-radius: var(--dtk-rt-scroll-border-radius, 16px);
}

/* Escritorio: sin carrusel */
.dtk-rt:not(.dtk-rt--layout-mobile) .dtk-rt__scroll {
	overflow-x: visible;
	overflow-y: hidden;
}

.dtk-rt:not(.dtk-rt--layout-mobile) .dtk-rt__scroll table thead th:first-child,
.dtk-rt:not(.dtk-rt--layout-mobile) .dtk-rt__scroll table tbody td:first-child {
	position: static;
	box-shadow: none;
}

.dtk-rt:not(.dtk-rt--layout-mobile) .dtk-rt-nav,
.dtk-rt:not(.dtk-rt--layout-mobile) .dtk-rt-dots {
	display: none !important;
}

/* Móvil: clase aplicada por JS (data-dtk-breakpoint) */
.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	/* Scroll táctil sin barra visible (igual que el track del carrusel) */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* El radio ya se define en .dtk-rt__scroll para mantener paridad desktop/móvil. */
}

.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll::-webkit-scrollbar {
	display: none;
	height: 0;
	width: 0;
}

/*
 * Móvil: cada columna ocupa como mínimo el 50% del ancho del bloque (.dtk-rt__scroll).
 * Ancho tabla = N × 50% del contenedor (figure 100%) → scroll horizontal + primera columna sticky.
 * Se anula width:100% del tema sobre la tabla.
 */
.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll .wp-block-table {
	overflow: visible !important;
	max-width: none !important;
	width: 100% !important;
	min-width: 100% !important;
	box-sizing: border-box;
	/* Radio heredado del tema; el recorte real lo aplica .dtk-rt__scroll */
	border-radius: inherit;
}

.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll .wp-block-table table,
.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll > table {
	width: calc(var(--dtk-rt-col-count, 4) * var(--dtk-rt-column-pct, 50%)) !important;
	min-width: calc(var(--dtk-rt-col-count, 4) * var(--dtk-rt-column-pct, 50%)) !important;
	max-width: none !important;
	table-layout: fixed !important;
	border-collapse: separate;
	border-spacing: 0;
}

.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll table thead th,
.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll table tbody td {
	word-break: break-word;
	overflow-wrap: anywhere;
	hyphens: auto;
	vertical-align: top;
	box-sizing: border-box;
}

/*
 * Primera columna sticky en móvil: debe tapar las columnas que pasan al hacer scroll.
 * - inherit en thead solía dejar el fondo transparente (tr/thead sin color) → se veía el slide debajo.
 * - z-index 0 en tbody igualaba el apilado del resto de celdas → a veces el contenido scrolleado quedaba encima.
 */
.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll table thead th:first-child,
.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll table tbody td:first-child,
.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll table tbody th:first-child,
.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll table tfoot td:first-child,
.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll table tfoot th:first-child {
	position: sticky;
	left: 0;
	box-shadow: var(--dtk-rt-sticky-shadow, 2px 0 6px rgba(0, 0, 0, 0.08));
	background-color: var(--dtk-rt-sticky-bg, transparent);
	/* Degradados o capas del tema con alpha dejan ver el carrusel si no se anulan aquí. */
	background-image: none;
}

.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll table thead th:first-child {
	z-index: calc(var(--dtk-rt-sticky-z, 0) + 2);
}

.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll table tbody td:first-child,
.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll table tbody th:first-child,
.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll table tfoot td:first-child,
.dtk-rt.dtk-rt--layout-mobile .dtk-rt__scroll table tfoot th:first-child {
	z-index: calc(var(--dtk-rt-sticky-z, 0) + 1);
}

/* Fallbacks de navegación (sobrescritos por variables inline del bloque) */
.dtk-rt {
	--dtk-rt-nav-size: 44px;
	--dtk-rt-nav-bg: var(--wp--preset--color--white, #ffffff);
	--dtk-rt-nav-border-width: 2px;
	--dtk-rt-nav-border-color: var(--wp--preset--color--primary, #003a9e);
	--dtk-rt-nav-color: var(--wp--preset--color--primary, #003a9e);
	--dtk-rt-nav-hover-bg: var(--wp--preset--color--primary, #003a9e);
	--dtk-rt-nav-hover-color: var(--wp--preset--color--white, #ffffff);
	--dtk-rt-nav-offset: 12px;
	--dtk-rt-nav-top: 50%;
	--dtk-rt-dot-inactive-color: rgba(0, 0, 0, 0.25);
	--dtk-rt-dot-active-color: var(--wp--preset--color--primary, #003a9e);
	--dtk-rt-dot-size: 8px;
	--dtk-rt-dots-gap: 16px;
	--dtk-rt-dots-wrapper-gap: 8px;
	--dtk-rt-nav-transition-ms: 160ms;
	--dtk-rt-dot-transition-ms: 200ms;
	--dtk-rt-nav-font-weight: 700;
	--dtk-rt-nav-disabled-opacity: 0.45;
	--dtk-rt-scroll-border-radius: 16px;
	--dtk-rt-column-pct: 50%;
	--dtk-rt-sticky-z: 0;
}

.dtk-rt .dtk-rt-nav {
	position: absolute;
	top: var(--dtk-rt-nav-top, 50%);
	transform: translateY(-50%);
	width: var(--dtk-rt-nav-size);
	height: var(--dtk-rt-nav-size);
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--dtk-rt-nav-bg) !important;
	border: var(--dtk-rt-nav-border-width) solid var(--dtk-rt-nav-border-color) !important;
	border-radius: 50%;
	color: var(--dtk-rt-nav-color) !important;
	/* Por encima de th sticky (+2) y td sticky (+1) del bloque */
	z-index: calc(var(--dtk-rt-sticky-z, 0) + 3);
	cursor: pointer;
	transition:
		transform var(--dtk-rt-nav-transition-ms, 160ms) ease,
		background var(--dtk-rt-nav-transition-ms, 160ms) ease,
		color var(--dtk-rt-nav-transition-ms, 160ms) ease;
	font-weight: var(--dtk-rt-nav-font-weight, 700);
	font-size: calc(var(--dtk-rt-nav-size) * 0.41);
	line-height: 1;
	box-sizing: border-box;
}

.dtk-rt.dtk-rt--layout-mobile .dtk-rt-nav {
	display: inline-flex;
}

.dtk-rt .dtk-rt-nav:hover:not(:disabled) {
	transform: translateY(-50%) scale(1.05);
	background: var(--dtk-rt-nav-hover-bg) !important;
	color: var(--dtk-rt-nav-hover-color) !important;
}

.dtk-rt .dtk-rt-nav:disabled {
	opacity: var(--dtk-rt-nav-disabled-opacity, 0.45);
	cursor: default;
}

.dtk-rt .dtk-rt-nav--prev {
	left: var(--dtk-rt-nav-offset);
}

.dtk-rt .dtk-rt-nav--next {
	right: var(--dtk-rt-nav-offset);
}

.dtk-rt-dots {
	display: none;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	justify-content: center;
	margin-top: var(--dtk-rt-dots-gap);
	padding: 0 8px;
	box-sizing: border-box;
	overflow: hidden;
}

.dtk-rt.dtk-rt--layout-mobile .dtk-rt-dots {
	display: flex;
}

.dtk-rt-dots__wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--dtk-rt-dots-wrapper-gap, 8px);
	row-gap: var(--dtk-rt-dots-wrapper-gap, 8px);
	max-width: 100%;
	overflow: hidden;
}

.dtk-rt-dot {
	width: var(--dtk-rt-dot-size);
	height: var(--dtk-rt-dot-size);
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--dtk-rt-dot-inactive-color);
	cursor: pointer;
	flex-shrink: 0;
	transition:
		transform var(--dtk-rt-dot-transition-ms, 200ms) ease,
		background var(--dtk-rt-dot-transition-ms, 200ms) ease;
}

.dtk-rt-dot--active {
	background: var(--dtk-rt-dot-active-color);
	transform: scale(1.25);
}

/* Editor: vista previa de scroll opcional */
.dtk-rt--editor .dtk-rt__scroll {
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.dtk-rt--editor .dtk-rt__scroll::-webkit-scrollbar {
	display: none;
	height: 0;
	width: 0;
}