/* ==========================================================================
   Promoción Viviendas System - Frontend
   Diseño premium minimalista. Nova Florida Edition
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&display=swap');

.pvs-wrap {
	--pvs-bg: #F5F5F3;
	--pvs-fg: #101F30;
	--pvs-muted: #5A6B78;
	--pvs-line: #D9D9D7;
	--pvs-line-strong: #101F30;
	--pvs-row-hover: #ECE9E4;
	--pvs-row-destacado: #F4F1EB;
	--pvs-accent: #B89B72;

	--pvs-disponible: #4F8A6B;
	--pvs-reservado: #B89B72;
	--pvs-vendido: #8B4A4A;

	--pvs-radius: 2px;

	font-family: "Josefin Sans", -apple-system, BlinkMacSystemFont, "Inter",
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	color: var(--pvs-fg);
	background: var(--pvs-bg);
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 2rem;
	max-width: 100%;
}

.pvs-wrap *,
.pvs-wrap *::before,
.pvs-wrap *::after {
	box-sizing: border-box;
}

/* ---------- Barra de filtros (botón toggle) ---------- */
.pvs-filters-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.pvs-filters-toggle {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	color: var(--pvs-fg);
	border: 1px solid var(--pvs-line);
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.02em;
	cursor: pointer;
	border-radius: var(--pvs-radius);
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	font-family: inherit;
}

.pvs-filters-toggle:hover, .pvs-filters-toggle:focus {
    border-color: #fff;
    color: #fff;
    background-color: #101f30;
}

.pvs-filters-toggle[aria-expanded="true"] {
	background: var(--pvs-fg);
	border-color: var(--pvs-fg);
	color: #fff;
}

.pvs-filters-toggle:focus-visible {
	outline: 2px solid var(--pvs-accent);
	outline-offset: 2px;
}

.pvs-filters-icon {
	flex-shrink: 0;
}

.pvs-filters-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--pvs-accent);
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
}

.pvs-filters-clear {
	appearance: none;
	background: transparent;
	color: var(--pvs-muted);
	border: 1px solid var(--pvs-line);
	padding: 7px 14px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.02em;
	cursor: pointer;
	border-radius: var(--pvs-radius);
	font-family: inherit;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.pvs-filters-clear:hover {
	color: var(--pvs-accent);
	border-color: var(--pvs-accent);
}

/* ---------- Panel de filtros desplegable ---------- */
.pvs-filters-panel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	background: #fff;
	border: 1px solid var(--pvs-line);
	border-radius: var(--pvs-radius);
	padding: 20px 22px;
	margin-bottom: 1.25rem;
	animation: pvsFadeIn 0.18s ease;
}

.pvs-filters-panel[hidden] { display: none; }
.pvs-filters-count[hidden] { display: none; }
.pvs-filters-clear[hidden] { display: none; }
.pvs-no-results[hidden] { display: none; }

@keyframes pvsFadeIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.pvs-filters-group-title {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pvs-muted);
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--pvs-line);
}

.pvs-filters-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pvs-chk {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	color: var(--pvs-fg);
	user-select: none;
	padding: 4px 0;
	transition: color 0.15s ease;
}

.pvs-chk:hover { color: var(--pvs-accent); }

.pvs-chk input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--pvs-line);
	border-radius: var(--pvs-radius);
	background: #fff;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	margin: 0;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.pvs-chk input[type="checkbox"]:hover { border-color: var(--pvs-accent); }

.pvs-chk input[type="checkbox"]:checked {
	background: var(--pvs-fg);
	border-color: var(--pvs-fg);
}

.pvs-chk input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.pvs-chk input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--pvs-accent);
	outline-offset: 2px;
}

/* ---------- Tabla ---------- */
.pvs-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--pvs-line);
	border-radius: var(--pvs-radius);
	background: #ffffff;
}

.pvs-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 14px;
}

.pvs-table thead th {
	background: var(--pvs-line-strong);
	color: #ffffff;
	text-align: left;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 14px 18px;
	border: none;
}

.pvs-table tbody tr {
	border-top: 1px solid var(--pvs-line);
	transition: background 0.18s ease, opacity 0.25s ease, transform 0.25s ease;
}

.pvs-table tbody tr:first-child { border-top: none; }
.pvs-table tbody tr:hover { background: var(--pvs-row-hover); }
.pvs-table tbody tr.is-destacado { background: var(--pvs-row-destacado); }
.pvs-table tbody tr.is-destacado:hover { background: #ECE9E4; }

.pvs-table td {
	padding: 16px 18px;
	vertical-align: middle;
	border: none;
}

/* Filtrado: ocultar */
.pvs-table tbody tr.is-hidden { display: none; }

/* ---------- Celdas concretas ---------- */
.pvs-c-codigo {
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	color: var(--pvs-fg);
}

.pvs-link-codigo {
	color: var(--pvs-fg);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.18s ease, color 0.18s ease;
}

a.pvs-link-codigo:hover {
	border-bottom-color: var(--pvs-accent);
	color: var(--pvs-accent);
}

.pvs-plano {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pvs-muted);
	text-decoration: none;
	border: 1px solid var(--pvs-line);
	padding: 3px 8px;
	border-radius: var(--pvs-radius);
	font-weight: 500;
	transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.pvs-plano:hover {
	color: #ffffff;
	border-color: var(--pvs-accent);
	background: var(--pvs-accent);
}

.pvs-c-dorm {
	color: var(--pvs-fg);
	font-weight: 500;
	white-space: nowrap;
}

.pvs-c-precio {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--pvs-fg);
}

.pvs-c-mutil,
.pvs-c-mterr {
	font-variant-numeric: tabular-nums;
	color: var(--pvs-fg);
}

.pvs-muted { color: var(--pvs-muted); }

/* ---------- Botón mobile toggle e icono cama (ocultos en desktop) ---------- */
.pvs-mobile-toggle,
.pvs-dorm-num,
.pvs-bed-icon,
.pvs-mobile-summary {
	display: none;
}

/* ---------- Etiqueta RESERVADO/VENDIDO en celda precio (desktop) ---------- */
.pvs-precio-reservado,
.pvs-precio-vendido {
	display: inline-block;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: 0;
	text-transform: uppercase;
	padding: 0;
	border-radius: 0;
}

.pvs-precio-reservado {
	color: inherit;
	background: transparent;
	border: none;
}

.pvs-precio-vendido {
	color: inherit;
	background: transparent;
	border: none;
}

/* ---------- Estados ---------- */
.pvs-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.pvs-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	display: inline-block;
}

.pvs-status--disponible { color: var(--pvs-disponible); }
.pvs-status--reservado { color: var(--pvs-reservado); }
.pvs-status--vendido { color: var(--pvs-vendido); }

/* ---------- Sin resultados / vacío ---------- */
.pvs-no-results,
.pvs-empty {
	padding: 32px 20px;
	text-align: center;
	color: var(--pvs-muted);
	font-size: 14px;
}

/* ==========================================================================
   Responsive: tarjetas tipo accordion con resumen colapsado
   ========================================================================== */
@media (max-width: 768px) {
	.pvs-table-wrap {
		border: none;
		background: transparent;
		overflow: visible;
	}

	.pvs-table,
	.pvs-table thead,
	.pvs-table tbody,
	.pvs-table tr,
	.pvs-table td {
		display: block;
		width: 100%;
	}

	.pvs-table thead {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	/* ----- TARJETA (fila colapsada por defecto) ----- */
	.pvs-table tbody tr {
		position: relative;
		border: 1px solid var(--pvs-line);
		border-radius: var(--pvs-radius);
		margin-bottom: 8px;
		padding: 0;
		background: #ffffff;
		overflow: hidden;
	}

	.pvs-table tbody tr:hover {
		background: #ffffff;
	}

	.pvs-table tbody tr.is-destacado {
		background: var(--pvs-row-destacado);
		border-color: #D9D9D7;
	}

	/* Atenuar viviendas reservadas/vendidas */
	.pvs-table tbody tr.estado-reservado,
	.pvs-table tbody tr.estado-vendido {
		opacity: 0.55;
		background: #fafaf9;
	}

	/* Primera celda: layout horizontal con botón + código + dorm + cama */
	.pvs-table tbody tr > td.pvs-c-codigo {
		display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border: none;
        min-height: 56px;
        text-align: left;
        font-size: 15px;
        justify-content: flex-start;
    }

	/* Quitamos label superior automático en móvil para todas las celdas */
	.pvs-table td::before {
		display: none;
	}

	/* Botón + visible en móvil */
	.pvs-mobile-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		padding: 0;
		background: transparent;
		border: 1.5px solid var(--pvs-fg);
		border-radius: 50%;
		cursor: pointer;
		flex-shrink: 0;
		color: var(--pvs-fg);
		transition: transform 0.2s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	}

	.pvs-table  td > *:not(button) {
    min-width: 60px;
	}

	.pvs-mobile-toggle:hover {
		background: var(--pvs-accent);
		border-color: var(--pvs-accent);
		color: #ffffff;
	}

	.pvs-mobile-toggle-icon {
		position: relative;
		display: inline-block;
		width: 10px;
		height: 10px;
	}

	.pvs-mobile-toggle-icon::before,
	.pvs-mobile-toggle-icon::after {
		content: "";
		position: absolute;
		background: currentColor;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.pvs-mobile-toggle-icon::before {
		/* línea horizontal */
		top: 50%;
		left: 0;
		width: 100%;
		height: 1.5px;
		transform: translateY(-50%);
	}

	.pvs-mobile-toggle-icon::after {
		/* línea vertical (forma la cruz +) */
		top: 0;
		left: 50%;
		width: 1.5px;
		height: 100%;
		transform: translateX(-50%);
	}

	.pvs-mobile-toggle[aria-expanded="true"] .pvs-mobile-toggle-icon::after {
		/* al expandir se oculta la vertical → queda solo el guion (-) */
		opacity: 0;
	}

	.pvs-mobile-toggle:focus-visible {
		outline: 2px solid var(--pvs-accent);
		outline-offset: 2px;
	}

	/* Código sin link visual destacado */
	.pvs-c-codigo .pvs-link-codigo {
		font-weight: 500;
		font-size: 15px;
		color: var(--pvs-fg);
		border-bottom: none;
	}

	/* Mostramos el número de dormitorios + icono cama en la fila resumen */
	.pvs-c-codigo .pvs-dorm-num,
	.pvs-c-codigo .pvs-bed-icon {
		display: none; /* se inyectan por JS dentro de .pvs-c-codigo */
	}
	.pvs-mobile-toggle:focus{
		background-color:#B89B72
	}

	/* Plano se oculta del resumen, va dentro del detalle */
	.pvs-c-codigo .pvs-plano {
		display: none;
	}

	/* Resumen móvil añadido por JS */
	.pvs-mobile-summary {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-left: 6px;
		color: var(--pvs-fg);
		font-weight: 500;
		font-size: 14px;
	}

	.pvs-mobile-summary .pvs-mobile-num {
		font-weight: 600;
	}

	.pvs-mobile-summary .pvs-bed-icon-clone {
		width: 22px;
		height: 22px;
		flex-shrink: 0;
		object-fit: contain;
	}

	.pvs-mobile-summary .pvs-mobile-estado {
		margin-left: 6px;
		font-size: 11px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--pvs-muted);
		font-weight: 500;
	}

	/* ----- BLOQUE DETALLE (oculto por defecto, visible al expandir) ----- */
	.pvs-table tbody tr > td:not(.pvs-c-codigo) {
		display: none;
		padding: 10px 16px;
		border-top: 1px solid var(--pvs-line);
		text-align: left;
		font-size: 14px;
		position: relative;
	}

	/* Etiqueta del campo dentro del detalle */
	.pvs-table tbody tr.is-expanded > td:not(.pvs-c-codigo) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
	}

	.pvs-table tbody tr.is-expanded > td:not(.pvs-c-codigo)::before {
		display: inline-block;
		content: attr(data-label);
		font-size: 11px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--pvs-muted);
		font-weight: 500;
		flex-shrink: 0;
	}

	/* En móvil ya mostramos dorm en la fila resumen, así que en el detalle ocultamos
	   la celda dormitorios redundante */
	.pvs-table tbody tr.is-expanded > td.pvs-c-dorm {
		display: none;
	}

	/* Filtros responsive */
	.pvs-filters-bar { gap: 8px; }

	.pvs-filters-toggle {
		padding: 8px 14px;
		font-size: 13px;
	}

	.pvs-filters-panel {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 16px 18px;
	}
}