/**
 * Tabla (widget de Elementor).
 *
 * Colores en las variables de .acc-table; también se cambian desde la pestaña
 * Estilo del widget. Los selectores llevan dos clases para ganar a los estilos
 * de tabla del tema (borde en cada tr, padding y margen).
 *
 * Si la tabla no cabe se desliza en horizontal dentro de .acc-table. En móvil
 * cada columna mide al menos --acc-table-col-min, para que no se aplasten y
 * haya que deslizar en vez de partir el texto en muchas líneas.
 */
.acc-table {
	--acc-table-head-bg: #faf8f4;
	--acc-table-head-color: #928570;
	--acc-table-head-border: #c9920e;
	--acc-table-head-border-width: 2px;
	--acc-table-row-bg: #fff;
	--acc-table-row-alt-bg: #faf8f4;
	--acc-table-color: #2a251f;
	--acc-table-border: #d9d9d9;
	--acc-table-col-min: 0px;

	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;

	.acc-table__table {
		width: 100%;
		margin: 0;
		border: 0;
		border-bottom: 1px solid var(--acc-table-border);
		border-collapse: collapse;
		color: var(--acc-table-color);
	}

	.acc-table__row {
		border: 0;
	}

	.acc-table__cell {
		min-width: var(--acc-table-col-min);
		padding: 18px 24px;
		border: 0;
		background: var(--acc-table-row-bg);
		font-size: 15px;
		line-height: 1.4;
		text-align: left;
		vertical-align: middle;
	}

	.acc-table__body .acc-table__row:nth-child(even) .acc-table__cell {
		background: var(--acc-table-row-alt-bg);
	}

	.acc-table__head .acc-table__cell {
		padding: 14px 24px;
		border-bottom: var(--acc-table-head-border-width) solid var(--acc-table-head-border);
		background: var(--acc-table-head-bg);
		color: var(--acc-table-head-color);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	&:focus-visible {
		outline: 2px solid var(--acc-table-head-border);
		outline-offset: 2px;
	}
}

@media (max-width: 767px) {
	.acc-table {
		--acc-table-col-min: 160px;

		.acc-table__cell {
			padding: 14px 16px;
		}

		.acc-table__head .acc-table__cell {
			padding: 12px 16px;
		}
	}
}