/* ==========================================================================
   Advanced Table Field — Estilos del Frontend
   Cargado vía Elementor widget (get_style_depends).

   Arquitectura de bordes (importante):
   - El BORDE EXTERIOR vive en el WRAPPER (.adv-table-wrapper / .adv-info-wrapper)
   - Los DIVISORES INTERNOS viven en las celdas (border-right / border-bottom)
   - Las celdas en las aristas exteriores NO tienen borde (se elimina via :last-child)
   - Así, cuando el usuario aplica un borde via Elementor al wrapper, no se duplica
     con los bordes internos de las celdas.
   ========================================================================== */

/* ── Placeholder en Elementor Editor (sin datos) ──────────────────────── */
.adv-table-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: 20px;
	border: 2px dashed #c8cfd8;
	border-radius: 8px;
	background: #f8f9fb;
	color: #888fa0;
	font-size: 13.5px;
	font-style: italic;
	text-align: center;
}

/* ── Wrapper de colección (cuando se muestran varias tablas) ──────────── */
.adv-table-collection-wrapper {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
	box-sizing: border-box;
}

/* Título de cada tabla en modo "todas las tablas" */
.adv-table-label {
	margin: 0 0 8px;
	font-weight: 600;
	line-height: 1.3;
}

/* ── Wrapper único — gestiona border, radius, shadow Y scroll horizontal ──
   Arquitectura simplificada: un solo wrapper en lugar de wrapper + inner.
   - El border vive aquí (Elementor lo sobreescribe via control table_border)
   - El border-radius se aplica aquí (con clip-path para coexistir con scroll)
   - El scroll-x vive aquí (en modo --scroll)
   - En modo --cards el border se quita; cada card lleva el suyo
   ───────────────────────────────────────────────────────────────────────── */
.adv-table-wrapper {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #dde1e7;
}

/* Modo scroll horizontal — el comportamiento SOLO aplica en mobile (≤767px).
   En desktop la tabla se renderiza normalmente (texto envuelve si hace falta).
   En mobile: nowrap + min-width + overflow-x:auto → el texto no se rompe,
   la tabla crece y el wrapper scrollea.

   `!important` en overflow-x: cuando el user aplica border-radius via
   Elementor, su CSS pone `overflow: hidden` (que clipa también el eje X) y
   mata el scroll. Forzamos overflow-x: auto para que radius + scroll coexistan. */
@media (max-width: 767px) {
	.adv-table-wrapper--scroll {
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		/* Scrollbar visible — sin esto, iOS/macOS lo ocultan y el user no
		   sabe que se puede scrollear. */
		scrollbar-width: thin;
		scrollbar-color: #aaa #f0f0f0;
	}

	.adv-table-wrapper--scroll::-webkit-scrollbar {
		height: 8px;
		-webkit-appearance: none;
	}

	.adv-table-wrapper--scroll::-webkit-scrollbar-track {
		background: #f0f0f0;
		border-radius: 4px;
	}

	.adv-table-wrapper--scroll::-webkit-scrollbar-thumb {
		background: #aaa;
		border-radius: 4px;
	}

	/* table-layout: fixed → respeta las widths de celdas ESTRICTAMENTE
	   (con auto, max-width en celdas es inconsistente entre navegadores). */
	.adv-table-wrapper--scroll .adv-table {
		table-layout: fixed;
		width: auto;
	}

	/* Cada celda ancho fijo (configurable via Elementor). El texto envuelve.
	   La tabla total = cell_width × num_cols → si supera el wrapper, scroll. */
	.adv-table-wrapper--scroll .adv-table th,
	.adv-table-wrapper--scroll .adv-table td {
		width: var(--adv-scroll-cell-max, 220px);
		min-width: var(--adv-scroll-cell-max, 220px);
		word-break: break-word;
		white-space: normal;
	}
}

/* ── Tabla base ─────────────────────────────────────────────────────────── */
.adv-table {
	width: 100%;
	margin: 0;          /* FIX: anular margin que muchos themes ponen al <table> */
	border: 0 !important; /* FIX: anular border que algunos themes inyectan a <table> */
	border-collapse: collapse;
	border-spacing: 0;
	font-size: inherit;
	line-height: 1.5;
	/* table-layout: fixed → las widths que pone el user via Elementor SÍ se respetan.
	   Sin esto, el browser usa el contenido como minimum-width e ignora width inferior. */
	table-layout: fixed;
	/* --adv-th-bg se setea inline desde PHP por tabla */
}

/* ── Celdas: solo border-right + border-bottom para divisores internos ───
   Las celdas en las aristas exteriores NO tienen border-width → no hay
   gap de 1px transparente entre el contenido y el border del wrapper.

   `!important` en border-block-start/border-inline-start vence resets muy
   específicos de themes (ej: `table thead:first-child tr:first-child th
   { border-block-start: ... }` tiene specificity 0,2,4).

   No hay "shift" entre celdas porque DENTRO de la misma columna/fila todas
   las celdas tienen el MISMO border-width — el shift solo ocurriría si
   celdas adyacentes en el mismo borde tuvieran widths distintos. */
.adv-table th,
.adv-table td {
	padding: 10px 14px;
	vertical-align: middle;
	text-align: left;
	border: 0;
	border-right: 1px solid #dde1e7;        /* divisor vertical interno */
	border-bottom: 1px solid #dde1e7;       /* divisor horizontal interno */
	/* Bloquear bordes lógicos del theme (mapean a border-top / border-left) */
	border-block-start: 0 !important;
	border-inline-start: 0 !important;
	word-break: break-word;
}

/* Última celda de cada fila → sin divisor derecho (el wrapper provee el borde) */
.adv-table th:last-child,
.adv-table td:last-child {
	border-right: 0;
}

/* Última fila → sin divisor inferior (el wrapper provee el borde) */
.adv-table tbody tr:last-child th,
.adv-table tbody tr:last-child td {
	border-bottom: 0;
}

/* ── Reset zebra del theme + colores de header con especificidad alta ────
   Themes ponen reglas como `table tbody>tr:nth-child(odd)>td/th` con
   specificity (0,1,3) que vence a `.adv-table td` (0,1,2). Usamos selectores
   con specificity (0,2,3) o (0,1,3) que ganan o empatan + source order.

   td → transparent (Elementor's zebra_even_bg lo sobreescribe vía {{WRAPPER}})
   th → var(--adv-th-bg) (color de cabecera, override por header_bg_override) */
.adv-table tbody tr:nth-child(odd) td,
.adv-table tbody tr:nth-child(even) td {
	background-color: transparent;
}

.adv-table tbody tr:nth-child(odd) th,
.adv-table tbody tr:nth-child(even) th,
.adv-table thead tr th {
	font-weight: 600;
	background-color: var(--adv-th-bg, #D9D9D9);
}

/* Fallback para layouts sin nth-child match (defensivo) */
.adv-table th {
	font-weight: 600;
	background-color: var(--adv-th-bg, #D9D9D9);
}

/* ── Primera celda vacía en doble_entrada — sin color destacado ─────────── */
.adv-table thead tr th[aria-hidden="true"] {
	background: #f8f9fb;
}

/* ==========================================================================
   Modo TEXTO standalone (top-level type: text)
   ========================================================================== */

.adv-table-standalone-text {
	width: 100%;
	box-sizing: border-box;
	line-height: 1.7;
}

.adv-table-standalone-text p {
	margin: 0 0 1em;
}

.adv-table-standalone-text p:last-child {
	margin-bottom: 0;
}

.adv-table-standalone-text img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Contenido de texto (ítems tipo "texto" de la colección)
   ========================================================================== */

.adv-table-text-content {
	line-height: 1.7;
}

.adv-table-text-content p {
	margin: 0 0 0.8em;
}

.adv-table-text-content p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Colección: items individuales
   ========================================================================== */

.adv-table-collection-item {
	display: flex;
	flex-direction: column;
}

/* La tabla/texto ocupan todo el ancho disponible */
.adv-table-collection-item .adv-table-wrapper,
.adv-table-collection-item .adv-table-text-content {
	width: 100%;
}

/* ==========================================================================
   Info Sheet — Ficha de identidad (key-value table)
   ========================================================================== */

/* ── Wrapper general ────────────────────────────────────────────────────── */
.adv-info-wrapper {
	width: 100%;
	box-sizing: border-box;
	/* Borde exterior default — Elementor lo sobreescribe */
	border: 1px solid #dde1e7;
}

/* Scroll mode — solo aplica en mobile (≤767px). En desktop la tabla
   renderiza normal con texto envolviendo.
   `!important` overflow-x: vence al overflow:hidden que añade el border-radius. */
@media (max-width: 767px) {
	.adv-info-wrapper--scroll {
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: #aaa #f0f0f0;
	}

	.adv-info-wrapper--scroll::-webkit-scrollbar {
		height: 8px;
		-webkit-appearance: none;
	}

	.adv-info-wrapper--scroll::-webkit-scrollbar-track {
		background: #f0f0f0;
		border-radius: 4px;
	}

	.adv-info-wrapper--scroll::-webkit-scrollbar-thumb {
		background: #aaa;
		border-radius: 4px;
	}

	.adv-info-wrapper--scroll .adv-info-table {
		table-layout: fixed;
		width: auto;
	}

	.adv-info-wrapper--scroll .adv-info-table th,
	.adv-info-wrapper--scroll .adv-info-table td {
		width: var(--adv-scroll-cell-max, 260px);
		min-width: var(--adv-scroll-cell-max, 260px);
		word-break: break-word;
		white-space: normal;
	}
}

/* ── Tabla base — SIN borde propio (lo provee el wrapper) ────────────────── */
.adv-info-table {
	width: 100%;
	margin: 0;          /* FIX: anular margin del theme */
	border: 0 !important; /* FIX: anular border que algunos themes inyectan a <table> */
	border-collapse: collapse;
	border-spacing: 0;
	font-size: inherit;
	line-height: 1.5;
	table-layout: fixed; /* las widths del user se respetan literalmente */
}

/* Cells: solo border-bottom para divisor entre filas. Los lados exteriores
   tienen border-width 0 → no hay gap blanco entre el contenido y el wrapper.
   `!important` en propiedades lógicas → vence resets del theme. */
.adv-info-table th,
.adv-info-table td {
	padding: 10px 16px;
	vertical-align: middle;
	text-align: left;
	border: 0;
	border-bottom: 1px solid #dde1e7;     /* solo divisor horizontal interno */
	/* Bloquear bordes lógicos del theme (mapean a border-top / border-left) */
	border-block-start: 0 !important;
	border-inline-start: 0 !important;
	word-break: break-word;
}

/* Última fila → sin divisor inferior (el wrapper provee el borde) */
.adv-info-table tbody tr:last-child th,
.adv-info-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Columna de etiquetas (excepto fila NOMBRE):
   - SIN white-space:nowrap para que el slider de ancho funcione libre
   - Con border-right como divisor vertical interno */
.adv-info-table tbody tr:not(.adv-info-table__nombre) th {
	width: 30%;
	font-weight: 600;
	border-right: 1px solid #dde1e7;
}

/* ── Reset zebra del theme — solo NO-nombre rows ────────────────────────
   Specificity (0,3,3) vence a theme zebra (0,1,3).
   Elementor's value_bg / label_bg vía {{WRAPPER}} también dan (0,3,3) — empate,
   pero el CSS de Elementor se inyecta DESPUÉS del nuestro → Elementor gana. */
.adv-info-table tbody tr:not(.adv-info-table__nombre):nth-child(odd) td,
.adv-info-table tbody tr:not(.adv-info-table__nombre):nth-child(even) td,
.adv-info-table tbody tr:not(.adv-info-table__nombre):nth-child(odd) th,
.adv-info-table tbody tr:not(.adv-info-table__nombre):nth-child(even) th {
	background-color: transparent;
}

/* ── Fila NOMBRE: cada celda es independiente ──────────────────────────── */
/* Specificity alta para vencer al theme zebra + la regla simple */
.adv-info-table tr.adv-info-table__nombre .adv-info-table__nombre-label {
	background-color: #c0392b;
}

.adv-info-table__nombre-label {
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-right: 1px solid rgba(0, 0, 0, 0.12);
	border-bottom-color: rgba(0, 0, 0, 0.15);
	/* width: default 30% — el slider de Elementor lo sobreescribe en runtime.
	   Sin white-space:nowrap → el slider puede achicar la columna libremente. */
	width: 30%;
	overflow: hidden;
}

.adv-info-table__nombre-value {
	background-color: transparent;
	font-weight: 600;
	border-bottom-color: rgba(0, 0, 0, 0.10);
}

/* Componentes internos del valor NOMBRE */
.adv-info-table__title {
	font-weight: inherit;
}

.adv-info-table__separator {
	margin: 0 .1em;
	opacity: 0.7;
}

.adv-info-table__subtitle {
	font-weight: 400;
	opacity: 0.85;
}

/* ── Modo cards responsive para Info Sheet ─────────────────────────────── */
@media (max-width: 767px) {
	.adv-info-wrapper--cards .adv-info-table,
	.adv-info-wrapper--cards .adv-info-table tbody,
	.adv-info-wrapper--cards .adv-info-table tr,
	.adv-info-wrapper--cards .adv-info-table th,
	.adv-info-wrapper--cards .adv-info-table td {
		display: block;
		width: 100% !important;
		border-right: none !important;
		box-sizing: border-box;
	}

	/* FIX: tanto th como td pierden el border-bottom — el divider lo provee
	   la tr (sin esto se vería doble borde entre filas: bottom del td + bottom de la tr) */
	.adv-info-wrapper--cards .adv-info-table th,
	.adv-info-wrapper--cards .adv-info-table td {
		border-bottom: none !important;
		white-space: normal !important;
	}

	.adv-info-wrapper--cards .adv-info-table tr {
		border-bottom: 1px solid #dde1e7;
	}

	.adv-info-wrapper--cards .adv-info-table tr:last-child {
		border-bottom: none;
	}

	/* NOMBRE row también se apila */
	.adv-info-wrapper--cards .adv-info-table__nombre-label {
		border-right: none !important;
	}
}

/* ==========================================================================
   Modo Responsive: Scroll horizontal
   ========================================================================== */
@media (max-width: 767px) {
	.adv-table-wrapper--scroll {
		display: block;
	}
}

/* ==========================================================================
   Modo Responsive: Cards / Bloques (breakpoint 767px por defecto)
   Usa CSS Grid en cada <td> para evitar superposiciones de texto.
   ========================================================================== */
@media (max-width: 767px) {
	/* Romper la estructura de tabla */
	.adv-table-wrapper--cards .adv-table,
	.adv-table-wrapper--cards .adv-table tbody,
	.adv-table-wrapper--cards .adv-table tr,
	.adv-table-wrapper--cards .adv-table th {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	/* Resetear bordes en modo cards — los provee la card (tr) */
	.adv-table-wrapper--cards .adv-table th,
	.adv-table-wrapper--cards .adv-table td {
		border-right: none;
	}

	/* FIX: solo ocultar thead en layout "only_top" (donde las cabeceras
	   superiores son redundantes con los data-label de cada td en cards mode).
	   En doble_entrada / only_left / intercalado el thead puede contener la
	   celda esquina con texto del usuario → no la ocultamos. */
	.adv-table-wrapper--cards .adv-table--only_top thead {
		display: none;
	}

	/* En modo cards, el wrapper pierde su borde — cada card lleva el suyo */
	.adv-table-wrapper--cards {
		border: none !important;
		box-shadow: none !important;
		clip-path: none !important;
	}

	/* ── Cada <tr> = una Card ─────────────────────────────────────────────── */
	.adv-table-wrapper--cards .adv-table tbody tr {
		margin-bottom: 1.25em;
		border: 1px solid #dde1e7;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
	}

	/* ── <th scope="row"> = título / encabezado de la card ───────────────── */
	.adv-table-wrapper--cards .adv-table th[scope="row"] {
		border-bottom: 2px solid rgba(0, 0, 0, 0.10);
		font-size: 1em;
		white-space: normal;
		padding: 10px 14px;
		text-align: left;
	}

	/* ── <td> = fila de dato dentro de la card (CSS Grid label + valor) ──── */
	.adv-table-wrapper--cards .adv-table td {
		display: grid;
		grid-template-columns: minmax(90px, 38%) 1fr;
		gap: 12px;
		width: 100%;
		padding: 10px 14px;
		border: none;
		border-bottom: 1px solid #f0f2f5;
		box-sizing: border-box;
		align-items: start;
		text-align: left;
	}

	.adv-table-wrapper--cards .adv-table td:last-child {
		border-bottom: none;
	}

	/* ── Pseudo-elemento = label (columna izquierda del grid) ────────────── */
	.adv-table-wrapper--cards .adv-table td::before {
		content: attr(data-label);
		display: block;
		font-weight: 600;
		font-size: 0.85em;
		line-height: 1.4;
		color: #50575e;
		word-break: break-word;
		hyphens: auto;
	}

	/* Si el data-label está vacío, ocultar la columna del label visualmente */
	.adv-table-wrapper--cards .adv-table td[data-label=""] {
		grid-template-columns: 1fr;
	}

	.adv-table-wrapper--cards .adv-table td[data-label=""]::before {
		display: none;
	}
}