/* ==========================================================================
   CÓDIGO N°23
   TABLAS RESPONSIVE CON DESPLAZAMIENTO AUTOMÁTICO
   Archivo: 23-desplazamiento-tablas-responsive.css
   ========================================================================== */

/* ==========================================================================
   1. CONTENEDOR RESPONSIVE DE TABLAS
   ========================================================================== */

.tabla-responsive {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	display: block;
	margin: 24px auto 28px auto !important;
	padding: 0 !important;
	text-align: center;
	scrollbar-gutter: stable both-edges;
	box-sizing: border-box;
	border-radius: 12px;
}

/* Evita que la tabla genere desbordes internos innecesarios */
.tabla-responsive * {
	box-sizing: border-box;
}

/* ==========================================================================
   2. TABLA BASE
   ========================================================================== */

.tabla-responsive table {
	width: 100%;
	max-width: 100%;
	border-collapse: separate !important;
	border-spacing: 0;
	margin: 0 auto;
	background: #ffffff;
	color: #1f2933;
	font-size: 14px;
	line-height: 1.45;
	border: 1px solid rgba(1, 113, 122, 0.22);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.045);
}

/* ==========================================================================
   3. CELDAS GENERALES
   ========================================================================== */

.tabla-responsive th,
.tabla-responsive td {
	text-align: center;
	vertical-align: middle;
	padding: 13px 14px;
	border-right: 1px solid rgba(1, 113, 122, 0.18);
	border-bottom: 1px solid rgba(1, 113, 122, 0.18);
	color: #1f2933;
	background: #ffffff;
	box-sizing: border-box;
}

.tabla-responsive tr th:last-child,
.tabla-responsive tr td:last-child {
	border-right: none;
}

.tabla-responsive tbody tr:last-child td {
	border-bottom: none;
}

/* ==========================================================================
   4. FILA SUPERIOR / NOTA PRINCIPAL
   ========================================================================== */

.tabla-responsive table tr:first-child td[colspan],
.tabla-responsive table tr:first-child th[colspan] {
	background: #01717a !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	text-align: center !important;
	padding: 14px 18px !important;
	letter-spacing: 0.1px;
}

/* ==========================================================================
   5. ENCABEZADO DE COLUMNAS
   ========================================================================== */

.tabla-responsive thead,
.tabla-responsive thead tr,
.tabla-responsive thead th {
	background: #f7f9fa !important;
}

.tabla-responsive th {
	color: #003b7a;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1px;
}

/* Cuando las tablas no usan thead y tienen encabezados en segunda fila */
.tabla-responsive table tr:nth-child(2) th,
.tabla-responsive table tr:nth-child(2) td {
	background: #f7f9fa !important;
	color: #003b7a !important;
	font-weight: 700 !important;
}

/* ==========================================================================
   6. CUERPO DE LA TABLA
   ========================================================================== */

.tabla-responsive tbody td {
	font-weight: 500;
}

.tabla-responsive tbody tr:nth-child(even) td {
	background: #fcfcfc;
}

.tabla-responsive tbody tr:hover td {
	background: #f4fbfb;
}

/* Primera columna */
.tabla-responsive tbody td:first-child {
	color: #003b7a;
	font-weight: 700;
}

/* Última columna / valores */
.tabla-responsive tbody td:last-child {
	color: #003b7a;
	font-weight: 700;
}

/* ==========================================================================
   7. FILA FINAL / NOTA DE VALORES REFERENCIALES
   ========================================================================== */

.tabla-responsive table tr:last-child td[colspan],
.tabla-responsive table tr:last-child th[colspan] {
	background: #f7f9fa !important;
	color: #003b7a !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	text-align: center !important;
	padding: 13px 16px !important;
}

/* ==========================================================================
   8. TEXTOS DESTACADOS
   ========================================================================== */

.tabla-responsive strong,
.tabla-responsive b {
	color: #003b7a;
	font-weight: 700;
}

/* ==========================================================================
   9. LINKS DENTRO DE TABLAS
   ========================================================================== */

.tabla-responsive a {
	color: #01717a !important;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tabla-responsive a:hover {
	color: #005f66 !important;
}

/* ==========================================================================
   10. ESCRITORIO Y TABLET HORIZONTAL
   ========================================================================== */

@media only screen and (min-width: 601px) {
	.tabla-responsive table {
		display: table !important;
		table-layout: fixed !important;
		white-space: normal !important;
	}

	.tabla-responsive th,
	.tabla-responsive td {
		width: auto !important;
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: auto !important;
	}
}

/* ==========================================================================
   11. MÓVIL
   ========================================================================== */

@media only screen and (max-width: 600px) {
	.tabla-responsive {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		margin: 20px auto 24px auto !important;
		border-radius: 12px;
	}

	.tabla-responsive table {
		display: table !important;
		width: max-content !important;
		min-width: 720px !important;
		max-width: none !important;
		white-space: nowrap !important;
		table-layout: auto !important;
		border-radius: 12px;
	}

	.tabla-responsive th,
	.tabla-responsive td {
		white-space: nowrap !important;
		padding: 12px 14px !important;
		font-size: 13px !important;
		overflow: visible !important;
		text-overflow: clip !important;
	}

	.tabla-responsive::-webkit-scrollbar {
		height: 8px;
	}

	.tabla-responsive::-webkit-scrollbar-track {
		background: #f0f4f5;
		border-radius: 20px;
	}

	.tabla-responsive::-webkit-scrollbar-thumb {
		background-color: #01717a;
		border-radius: 20px;
	}

	.tabla-responsive::-webkit-scrollbar-thumb:hover {
		background-color: #005f66;
	}
}

/* ==========================================================================
   12. AJUSTE ESPECÍFICO EN PRODUCTOS WOOCOMMERCE
   ========================================================================== */

.single-product .tabla-responsive {
	clear: both;
}

.single-product .woocommerce-product-details__short-description .tabla-responsive,
.single-product .entry-summary .tabla-responsive,
.single-product #tab-description .tabla-responsive,
.single-product .woocommerce-Tabs-panel--description .tabla-responsive {
	width: 100%;
}

/* Evita espacios excesivos entre tabla, selector de pasajeros y botones */
.single-product .tabla-responsive + form,
.single-product .tabla-responsive + .cart,
.single-product .tabla-responsive + .variations_form,
.single-product form.variations_form,
.single-product .woocommerce-product-form,
.single-product .variations {
	margin-top: 18px !important;
}