/**
 * Estilos del shortcode `[urra_tabla]`.
 *
 * Convención BEM: `.urra-tabla__elemento--modificador`.
 *
 * Estrategia de tematización:
 *   - Hereda `font-family` y `color` del contexto (Elementor).
 *   - Expone CSS variables (`--tabla-*`) con fallbacks neutros para que
 *     el tema o Elementor las pueda sobrescribir desde el inspector,
 *     un selector más específico, o globales (`--e-global-color-*`).
 *
 * Modos responsive:
 *   - scroll (default): tabla scrollable horizontalmente con columnas
 *     compactadas en mobile.
 *   - stack: cada fila se vuelve mini-card vertical (label + valor).
 *   - hide: oculta columnas con `mobile_visible=false`.
 *
 * El breakpoint mobile se trata en un único media query a 767px (alineado
 * con Elementor: tablet ≥ 768px conserva la tabla al 100%). La propiedad
 * `--tabla-mobile-bp` queda registrada en el DOM como hint informativo y
 * para futuras integraciones con container queries.
 */

/* ─── Variables y reset ─────────────────────────────────────────────── */

.urra-tabla {
	/* Hereda tipografía/color del contexto (Elementor). */
	font-family: inherit;
	color: inherit;
	box-sizing: border-box;

	/* Card — apariencia muy sutil, casi sin bordes, para no competir
	 * con la tabla en sí (alineado con los mockups del cliente). */
	--tabla-card-bg: #ffffff;
	--tabla-card-border: var(--e-global-color-blue-100, #CCE7F5);
	--tabla-card-radius: 16px;
	--tabla-card-shadow: none;
	--tabla-card-pad-x: 1.5rem;
	--tabla-card-pad-y: 1.25rem;

	/* Celdas. */
	--tabla-cell-pad-x: 1rem;
	--tabla-cell-pad-y: 0.875rem;
	--tabla-row-divider: var(--e-global-color-blue-100, #CCE7F5);
	--tabla-stripe-bg: var(--e-global-color-blue-50, #E6F3FA);

	/* Encabezados. */
	--tabla-header-color: #64748b;
	--tabla-header-size: 0.8125rem;
	--tabla-header-weight: 500;
	--tabla-header-letter-spacing: 0.01em;

	/* Título. */
	--tabla-titulo-size: 1.125rem;
	--tabla-titulo-weight: 600;

	/* Meta badge (junto al título) — verde URRÁ. */
	--tabla-meta-bg: var(--e-global-color-green-50, #E6F5EF);
	--tabla-meta-bg: color-mix(in srgb, var(--e-global-color-secondary, #009966) 12%, #ffffff);
	--tabla-meta-color: var(--e-global-color-secondary, #009966);
	--tabla-meta-border: var(--e-global-color-green-100, #CCEBDF);

	/* Pills — default (verde URRÁ: currency, badge, etc.). */
	--tabla-pill-default-bg: var(--e-global-color-green-50, #E6F5EF);
	--tabla-pill-default-color: var(--e-global-color-secondary, #009966);
	--tabla-pill-default-border: var(--e-global-color-green-100, #CCEBDF);
	--tabla-pill-default-dot: var(--e-global-color-secondary, #009966);

	/* Success (verde URRÁ). */
	--tabla-pill-success-bg: var(--e-global-color-green-50, #E6F5EF);
	--tabla-pill-success-color: var(--e-global-color-secondary, #009966);
	--tabla-pill-success-border: var(--e-global-color-green-100, #CCEBDF);

	/* Warning (ámbar). */
	--tabla-pill-warning-bg: #fef3c7;
	--tabla-pill-warning-color: #b45309;
	--tabla-pill-warning-border: #fde68a;

	/* Danger (rojo). */
	--tabla-pill-danger-bg: #fee2e2;
	--tabla-pill-danger-color: #dc2626;
	--tabla-pill-danger-border: #fecaca;

	/* Info (azul URRÁ). */
	--tabla-pill-info-bg: var(--e-global-color-blue-50, #E6F3FA);
	--tabla-pill-info-color: var(--e-global-color-primary, #3399CC);
	--tabla-pill-info-border: var(--e-global-color-blue-100, #CCE7F5);

	/* Neutral (gris). */
	--tabla-pill-neutral-bg: #f3f4f6;
	--tabla-pill-neutral-color: #4b5563;
	--tabla-pill-neutral-border: #e5e7eb;

	/* Hint informativo del breakpoint configurado por el editor. */
	--tabla-mobile-bp: 767px;
}

.urra-tabla,
.urra-tabla *,
.urra-tabla *::before,
.urra-tabla *::after {
	box-sizing: border-box;
}

/* ─── Reset defensivo contra temas / Elementor ──────────────────────────
 * Los temas y Elementor inyectan reglas globales sobre `table`, `thead`,
 * `tr`, `th`, `td` y `header` (border-collapse, padding, border, margins,
 * backgrounds…) que pisan a las nuestras por igual o mayor especificidad.
 * Aquí neutralizamos esas defaults dentro del bloque antes de aplicar
 * nuestros propios estilos, todos con selectores tag+clase para sumar
 * especificidad sin recurrir a !important. */

.urra-tabla header.urra-tabla__header,
.urra-tabla footer.urra-tabla__footer,
.urra-tabla table.urra-tabla__table,
.urra-tabla table.urra-tabla__table thead,
.urra-tabla table.urra-tabla__table tbody,
.urra-tabla table.urra-tabla__table tfoot,
.urra-tabla table.urra-tabla__table tr,
.urra-tabla table.urra-tabla__table th,
.urra-tabla table.urra-tabla__table td {
	border: 0;
	margin: 0;
	background: transparent;
	box-shadow: none;
}

.urra-tabla table.urra-tabla__table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Caption accesible: visualmente oculto, pero anunciable por screen
 * readers y procesable por crawlers/AI. */
.urra-tabla caption.urra-tabla__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* ─── Estructura principal ──────────────────────────────────────────── */

section.urra-tabla {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	margin: 0;
}

section.urra-tabla.urra-tabla--card {
	background: var(--tabla-card-bg);
	border: 1px solid var(--tabla-card-border);
	border-radius: var(--tabla-card-radius);
	box-shadow: var(--tabla-card-shadow);
	/* Sin padding global: el header, las celdas y el footer tienen sus
	 * propios paddings horizontales (--tabla-card-pad-x) para que estén
	 * verticalmente alineados y se sientan como secciones continuas.
	 * `overflow: hidden` clipea el radius contra la última fila. */
	padding: 0;
	overflow: hidden;
}

.urra-tabla__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* En modo card, el header se siente como una fila más: padding horizontal
 * igual al de las celdas extremas y un divider inferior coherente con los
 * separators de filas. Selector tag+clase para superar las reglas de
 * temas/Elementor sobre `header`. */
.urra-tabla.urra-tabla--card header.urra-tabla__header {
	padding: var(--tabla-card-pad-y) var(--tabla-card-pad-x);
	border-bottom: 1px solid var(--tabla-row-divider);
}

/* Sin card: el header mantiene un gap más sutil con la tabla. */
.urra-tabla:not(.urra-tabla--card) header.urra-tabla__header {
	padding-bottom: 0.75rem;
}

.urra-tabla__titulo {
	margin: 0;
	font-size: var(--tabla-titulo-size);
	font-weight: var(--tabla-titulo-weight);
	font-family: inherit;
	color: inherit;
	line-height: 1.3;
}

.urra-tabla__meta-badge {
	display: inline-flex;
	align-items: center;
	background: var(--tabla-meta-bg);
	color: var(--tabla-meta-color);
	border: 1px solid var(--tabla-meta-border);
	padding: 0.1875rem 0.625rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

.urra-tabla footer.urra-tabla__footer {
	border-top: 1px solid var(--tabla-row-divider);
	padding: 0.75rem 0 0 0;
}

.urra-tabla.urra-tabla--card footer.urra-tabla__footer {
	padding: 0.75rem var(--tabla-card-pad-x);
}

.urra-tabla__nota {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--tabla-header-color);
	line-height: 1.5;
}

/* ─── Wrapper scrollable + fades como cue de scroll ─────────────────── */

.urra-tabla__scroll {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.urra-tabla__scroll:focus-visible {
	outline: 2px solid var(--tabla-pill-info-color);
	outline-offset: 2px;
}

/* ─── Tabla base ────────────────────────────────────────────────────── */

.urra-tabla__table {
	width: 100%;
	border-collapse: collapse;
	font-family: inherit;
	color: inherit;
}

.urra-tabla th.urra-tabla__th,
.urra-tabla td.urra-tabla__td {
	padding: var(--tabla-cell-pad-y) var(--tabla-cell-pad-x);
	vertical-align: middle;
	text-align: left;
}

/* En modo card, la celda de la primera y última COLUMNA usan el
 * padding horizontal del card para alinearse verticalmente con el
 * header. Usamos clases dedicadas (`--col-first` / `--col-last`)
 * inyectadas por el renderer en lugar de `:first-child`/`:last-child`,
 * porque cuando una columna está agrupada por rowspan las filas
 * intermedias no contienen el td de la primera columna y `:first-child`
 * matchearía la columna equivocada (rompiendo la alineación). */
.urra-tabla.urra-tabla--card th.urra-tabla__th--col-first,
.urra-tabla.urra-tabla--card td.urra-tabla__td--col-first {
	padding-left: var(--tabla-card-pad-x);
}

.urra-tabla.urra-tabla--card th.urra-tabla__th--col-last,
.urra-tabla.urra-tabla--card td.urra-tabla__td--col-last {
	padding-right: var(--tabla-card-pad-x);
}

.urra-tabla table.urra-tabla__table th.urra-tabla__th {
	font-size: var(--tabla-header-size);
	font-weight: var(--tabla-header-weight);
	color: var(--tabla-header-color);
	letter-spacing: var(--tabla-header-letter-spacing);
	border-bottom: 1px solid var(--tabla-row-divider);
	white-space: nowrap;
}

.urra-tabla table.urra-tabla__table td.urra-tabla__td {
	border-bottom: 1px solid var(--tabla-row-divider);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.urra-tabla table.urra-tabla__table tr.urra-tabla__tr:last-child > td.urra-tabla__td {
	border-bottom: 0;
}

.urra-tabla__th--align-center,
.urra-tabla__td--align-center {
	text-align: center;
}

.urra-tabla__th--align-right,
.urra-tabla__td--align-right {
	text-align: right;
}

.urra-tabla.urra-tabla--striped table.urra-tabla__table tr.urra-tabla__tr:nth-of-type(odd) > td.urra-tabla__td {
	background: var(--tabla-stripe-bg);
}

/* ─── Texto con variante (text / percent) ──────────────────────────────
 * Cuando una celda de tipo `text` o `percent` define una variante o
 * un icono, no se renderiza como pill (se vería pesado en una columna
 * tipo "Servicio") sino como texto coloreado, opcionalmente prefijado
 * por un símbolo. Heredan la specificity con tag+clase para ganar a
 * estilos genéricos de tema/Elementor sobre `td span`. */

.urra-tabla span.urra-tabla__text {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.urra-tabla span.urra-tabla__text-icon {
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
}

.urra-tabla span.urra-tabla__text--success {
	color: var(--tabla-pill-success-color);
}

.urra-tabla span.urra-tabla__text--warning {
	color: var(--tabla-pill-warning-color);
}

.urra-tabla span.urra-tabla__text--danger {
	color: var(--tabla-pill-danger-color);
}

.urra-tabla span.urra-tabla__text--info {
	color: var(--tabla-pill-info-color);
}

.urra-tabla span.urra-tabla__text--neutral {
	color: var(--tabla-pill-neutral-color);
}

/* ─── Pills (currency / badge / categoria) ──────────────────────────── */

.urra-tabla span.urra-tabla__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	border: 1px solid transparent;
	font-family: inherit;
	background: transparent;
}

.urra-tabla span.urra-tabla__pill.urra-tabla__pill--default {
	background: var(--tabla-pill-default-bg);
	color: var(--tabla-pill-default-color);
	border-color: var(--tabla-pill-default-border);
}

.urra-tabla span.urra-tabla__pill.urra-tabla__pill--success {
	background: var(--tabla-pill-success-bg);
	color: var(--tabla-pill-success-color);
	border-color: var(--tabla-pill-success-border);
}

.urra-tabla span.urra-tabla__pill.urra-tabla__pill--warning {
	background: var(--tabla-pill-warning-bg);
	color: var(--tabla-pill-warning-color);
	border-color: var(--tabla-pill-warning-border);
}

.urra-tabla span.urra-tabla__pill.urra-tabla__pill--danger {
	background: var(--tabla-pill-danger-bg);
	color: var(--tabla-pill-danger-color);
	border-color: var(--tabla-pill-danger-border);
}

.urra-tabla span.urra-tabla__pill.urra-tabla__pill--info {
	background: var(--tabla-pill-info-bg);
	color: var(--tabla-pill-info-color);
	border-color: var(--tabla-pill-info-border);
}

.urra-tabla span.urra-tabla__pill.urra-tabla__pill--neutral {
	background: var(--tabla-pill-neutral-bg);
	color: var(--tabla-pill-neutral-color);
	border-color: var(--tabla-pill-neutral-border);
}

.urra-tabla__pill-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tabla-pill-default-dot);
	flex-shrink: 0;
}

.urra-tabla__pill--success .urra-tabla__pill-dot {
	background: var(--tabla-pill-success-color);
}

.urra-tabla__pill--warning .urra-tabla__pill-dot {
	background: var(--tabla-pill-warning-color);
}

.urra-tabla__pill--danger .urra-tabla__pill-dot {
	background: var(--tabla-pill-danger-color);
}

.urra-tabla__pill--info .urra-tabla__pill-dot {
	background: var(--tabla-pill-info-color);
}

.urra-tabla__pill--neutral .urra-tabla__pill-dot {
	background: var(--tabla-pill-neutral-color);
}

.urra-tabla__pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.75rem;
	line-height: 1;
	flex-shrink: 0;
}

.urra-tabla__pill-text {
	display: inline-block;
}

/* Estilo `categoria` — pill compacto con letra centrada. */
.urra-tabla__pill--estilo-categoria {
	padding: 0.125rem 0.5rem;
	font-size: 0.8125rem;
	min-width: 1.75rem;
	justify-content: center;
}

/* Estilo `currency` — el dot a la izquierda no debe afectar al centrado. */
.urra-tabla__pill--estilo-currency {
	padding-left: 0.625rem;
}

/* ─── Modo responsive: hide ─────────────────────────────────────────── */

.urra-tabla--responsive-hide .urra-tabla__th--mobile-oculta,
.urra-tabla--responsive-hide .urra-tabla__td--mobile-oculta {
	display: none;
}

/* ─── Mobile: scroll horizontal con columnas compactadas (default) ──── */

@media (max-width: 767px) {
	.urra-tabla {
		--tabla-card-pad-x: 0.75rem;
		--tabla-card-pad-y: 1rem;
		--tabla-cell-pad-x: 0.75rem;
		--tabla-cell-pad-y: 0.625rem;
		--tabla-titulo-size: 1rem;
	}

	.urra-tabla__td {
		font-size: 0.875rem;
	}

	.urra-tabla__th {
		font-size: 0.75rem;
	}

	.urra-tabla__pill {
		padding: 0.1875rem 0.5rem;
		font-size: 0.8125rem;
		gap: 0.25rem;
	}

	.urra-tabla__pill--estilo-categoria {
		padding: 0.0625rem 0.4375rem;
		font-size: 0.75rem;
	}

	.urra-tabla__pill-dot {
		width: 5px;
		height: 5px;
	}

	/* Modo scroll: la tabla se ensancha al contenido y el wrapper hace scroll. */
	.urra-tabla--responsive-scroll .urra-tabla__table {
		width: max-content;
		min-width: 100%;
	}

	.urra-tabla--responsive-scroll .urra-tabla__th,
	.urra-tabla--responsive-scroll .urra-tabla__td {
		min-width: var(--tabla-col-min, 110px);
		/* Anula el `width` desktop para que el min-width tome control. */
		width: auto;
	}

	/* Fades laterales como cue de scroll — solo en mobile, donde sí
	 * indican overflow real. Truco clásico con `background-attachment: local`. */
	.urra-tabla--responsive-scroll .urra-tabla__scroll {
		background:
			linear-gradient(to right, var(--tabla-card-bg), transparent) left center / 24px 100% no-repeat,
			linear-gradient(to left, var(--tabla-card-bg), transparent) right center / 24px 100% no-repeat,
			radial-gradient(ellipse at left, rgba(15, 23, 42, 0.08), transparent 70%) left center / 16px 100% no-repeat,
			radial-gradient(ellipse at right, rgba(15, 23, 42, 0.08), transparent 70%) right center / 16px 100% no-repeat;
		background-attachment: local, local, scroll, scroll;
	}

	/* Modo stack: cada fila se vuelve un mini-card vertical. */
	.urra-tabla--responsive-stack .urra-tabla__scroll {
		background: none;
	}

	.urra-tabla--responsive-stack .urra-tabla__table,
	.urra-tabla--responsive-stack .urra-tabla__thead,
	.urra-tabla--responsive-stack .urra-tabla__tbody,
	.urra-tabla--responsive-stack .urra-tabla__tr,
	.urra-tabla--responsive-stack .urra-tabla__td {
		display: block;
		width: 100%;
	}

	.urra-tabla--responsive-stack .urra-tabla__table > thead {
		/* Visualmente oculto, pero accesible. */
		position: absolute;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		width: 1px;
		height: 1px;
		overflow: hidden;
		white-space: nowrap;
	}

	.urra-tabla--responsive-stack .urra-tabla__tr {
		border: 1px solid var(--tabla-row-divider);
		border-radius: 8px;
		padding: 0.75rem;
		margin-bottom: 0.75rem;
	}

	.urra-tabla--responsive-stack .urra-tabla__td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		padding: 0.5rem 0;
		border-bottom: 1px dashed var(--tabla-row-divider);
		text-align: right;
	}

	.urra-tabla--responsive-stack .urra-tabla__td:last-child {
		border-bottom: none;
	}

	.urra-tabla--responsive-stack .urra-tabla__td::before {
		content: attr(data-label);
		font-size: 0.75rem;
		font-weight: 500;
		color: var(--tabla-header-color);
		text-transform: uppercase;
		letter-spacing: 0.02em;
		text-align: left;
		flex-shrink: 0;
	}

	/* En stack las celdas mergeadas con rowspan no tienen sentido, las
	 * dejamos como bloque normal y la duplicación visual se acepta. */
	.urra-tabla--responsive-stack .urra-tabla__td[rowspan] {
		font-weight: 600;
	}
}