/* Desplegable Residencias — estilos base.
   Los colores/tipografías por defecto se inyectan vía Elementor (selectors),
   aquí solo va la estructura y comportamiento. */

.dr-accordions {
	width: 100%;
	box-sizing: border-box;
}

.dr-accordion {
	width: 100%;
	box-sizing: border-box;
}

.dr-accordions *,
.dr-accordion * {
	box-sizing: border-box;
}

/* --- Cabecera --- */
.dr-header {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	text-align: left;
	gap: 24px;
	font: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.dr-number {
	flex: 0 0 auto;
	line-height: 1;
}

.dr-title {
	flex: 1 1 auto;
	/* min-width: 0 permite que el título se encoja/envuelva en vez de desbordar
	   y empujar el icono +/-. Sin esto, un texto largo mueve el toggle. */
	min-width: 0;
	overflow-wrap: break-word;
	margin: 0;
	line-height: 1;
	text-transform: uppercase;
}

/* Reset de márgenes que el tema aplica a los encabezados (p.ej. WooCommerce:
   `.woocommerce-js h2 { margin-bottom: .7em }`). Ese margen descentra el título
   respecto al número. Usamos especificidad alta + !important para ganarle. */
.dr-accordions .dr-header .dr-number,
.dr-accordions .dr-header .dr-title {
	margin: 0 !important;
	padding: 0 !important;
}

/* Centrado óptico número ↔ título.
   align-items:center centra las CAJAS de línea, pero la serif del título deja
   mucho hueco sobre las mayúsculas, así que las letras quedan altas y el número
   parece caer más abajo. text-box-trim recorta ese hueco para centrar por las
   letras visibles. Navegadores modernos (Chrome 133+, Safari 18.2+). */
.dr-number,
.dr-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* Fallback para navegadores sin text-box-trim: bajamos un pelín el título
   (en em, así escala con el tamaño de fuente). */
@supports not (text-box-edge: cap alphabetic) {
	.dr-title {
		transform: translateY(0.07em);
	}
}

.dr-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.dr-toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: opacity 0.2s ease, transform 0.25s ease;
}

.dr-toggle-icon svg {
	display: block;
}

/* Estado de los iconos +/- */
.dr-toggle-open {
	display: none;
}

.dr-accordion.is-open .dr-toggle-closed {
	display: none;
}

.dr-accordion.is-open .dr-toggle-open {
	display: inline-flex;
}

/* --- Cuerpo / tabla --- */
.dr-body {
	overflow: hidden;
}

/* Contenedor de la tabla: permite scroll horizontal cuando las columnas no
   caben (típico en tablet). En desktop ancho no aparece; en móvil se desactiva. */
.dr-body-inner {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.dr-table {
	width: 100%;
	/* En tablet/desktop fuerza scroll en vez de comprimir las columnas. */
	min-width: 640px;
	border-collapse: collapse !important;
	border-spacing: 0;
	table-layout: auto;
	background: transparent;
}

/* Reset de bordes que el tema (p.ej. Astra: `table/th/td { border: 1px solid
   var(--ast-border-color) }`) aplica a las tablas. Usamos !important porque esas
   reglas del tema pueden ganar por especificidad / orden de carga.
   Las líneas que SÍ queremos (cabecera de columnas y separador de fila) se aplican
   en los <tr> (.dr-thead / .dr-row) desde el widget, así que no se ven afectadas. */
.dr-accordions .dr-table,
.dr-accordions .dr-table th,
.dr-accordions .dr-table td {
	border: 0 !important;
	background: transparent !important;
}

.dr-thead .dr-th {
	text-align: left;
	font-weight: inherit;
	text-transform: uppercase;
	padding: 0 12px 16px 0;
	white-space: nowrap;
}

.dr-row {
	transition: background-color 0.2s ease;
}

.dr-cell {
	padding-left: 0;
	padding-right: 12px;
	vertical-align: middle;
}

.dr-cell-floorplan img {
	display: block;
	height: auto;
}

.dr-th-download,
.dr-cell-download {
	text-align: center;
	padding-right: 0;
}

.dr-download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	line-height: 1;
	transition: color 0.2s ease, transform 0.2s ease;
}

.dr-download:hover {
	transform: translateY(2px);
}

.dr-download-empty {
	opacity: 0.35;
	pointer-events: none;
}

/* --- Animación de apertura (cuando JS está activo) --- */
.dr-accordion[data-dr-accordion] .dr-body {
	transition: height 0.35s ease;
}

/* --- Responsive: tabla apilada en móvil --- */
@media (max-width: 767px) {
	.dr-header {
		gap: 14px;
	}

	/* En móvil la tabla se apila: sin min-width ni scroll horizontal. */
	.dr-accordions .dr-body-inner {
		overflow-x: visible;
	}

	/* No usamos un reset genérico sobre `tr` porque `.dr-table tr` tendría más
	   especificidad que `.dr-thead` / `.dr-row` y rompería el ocultar/apilar. */
	.dr-accordions .dr-table,
	.dr-accordions .dr-table tbody {
		display: block;
		width: 100%;
		min-width: 0;
	}

	/* Ocultar la cabecera de columnas: en móvil cada celda muestra su etiqueta
	   (data-label) a la izquierda, así que la fila de cabecera sobra. */
	.dr-accordions .dr-thead {
		display: none !important;
	}

	/* Una sola columna: cada campo en su propia línea (etiqueta izq / valor der). */
	.dr-accordions .dr-row {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 18px 0;
	}

	.dr-accordions .dr-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		max-width: 100%;
		white-space: normal;
	}

	.dr-cell::before {
		content: attr(data-label);
		font-size: 0.72em;
		letter-spacing: 1px;
		text-transform: uppercase;
		opacity: 0.7;
		margin-right: 16px;
	}

	/* El plano se trata como una fila más: etiqueta FLOORPLAN a la izquierda
	   y la imagen a la derecha, igual que el resto de campos. */
	.dr-accordions .dr-cell-floorplan {
		justify-content: space-between;
	}

	.dr-accordions .dr-cell-floorplan img {
		flex: 0 0 auto;
	}

	.dr-accordions .dr-cell-download {
		justify-content: space-between;
	}
}