/**
 * Pilar Vicente Core — Estilos del comparador de propiedades.
 *
 * Cubre dos contextos:
 *   1. Barra flotante (.pv-compare-bar) — visible en listado/home cuando
 *      hay propiedades seleccionadas para comparar.
 *   2. Página /comparar/ (.pv-comparar) — tabla comparativa side-by-side.
 *
 * @package PilarVicente\Core
 */

:root {
	--pv-comp-color:       #a11e22;
	--pv-comp-color-hover: #8a1619;
	--pv-comp-bg:          #1a1a1a;
	--pv-comp-text:        #fff;
	--pv-comp-border:      #e8e8e8;
}

/* ══════════════════════════════════════════════════════════════════════════
   1. BARRA FLOTANTE — visible cuando hay propiedades seleccionadas
═══════════════════════════════════════════════════════════════════════════ */
.pv-compare-bar {
	position:        fixed;
	bottom:          0;
	left:            0;
	right:           0;
	z-index:         9500;
	background:      var( --pv-comp-bg );
	color:           var( --pv-comp-text );
	box-shadow:      0 -4px 20px rgba( 0, 0, 0, 0.25 );
	transform:       translateY( 100% );
	transition:      transform 0.3s ease;
	padding:         0.9rem 1.25rem;
	font-size:       0.92rem;
}

.pv-compare-bar.pv-compare-bar--visible {
	transform: translateY( 0 );
}

.pv-compare-bar__inner {
	max-width:       1280px;
	margin:          0 auto;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem;
	flex-wrap:       wrap;
}

.pv-compare-bar__info {
	display:     flex;
	align-items: center;
	gap:         0.85rem;
	flex:        1;
}

.pv-compare-bar__count {
	background:    var( --pv-comp-color );
	color:         #fff;
	padding:       0.3rem 0.7rem;
	border-radius: 999px;
	font-weight:   700;
	font-size:     0.85rem;
	min-width:     28px;
	text-align:    center;
}

.pv-compare-bar__text {
	font-size: 0.92rem;
}

.pv-compare-bar__text strong {
	color: #f0c040;
}

.pv-compare-bar__chips {
	display:   flex;
	gap:       0.4rem;
	flex-wrap: wrap;
	margin:    0;
	padding:   0;
	list-style: none;
}

.pv-compare-bar__chip {
	background:    rgba( 255, 255, 255, 0.12 );
	color:         #fff;
	padding:       0.25rem 0.55rem 0.25rem 0.7rem;
	border-radius: 4px;
	font-size:     0.75rem;
	display:       inline-flex;
	align-items:   center;
	gap:           0.35rem;
	max-width:     200px;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.pv-compare-bar__chip-remove {
	background:   transparent;
	border:       none;
	color:        rgba( 255, 255, 255, 0.7 );
	cursor:       pointer;
	padding:      0;
	font-size:    1rem;
	line-height:  1;
	transition:   color 0.15s ease;
}
.pv-compare-bar__chip-remove:hover {
	color: #ff6b6b;
}

.pv-compare-bar__acciones {
	display: flex;
	gap:     0.5rem;
}

.pv-compare-bar__btn {
	display:         inline-flex;
	align-items:     center;
	gap:             0.4rem;
	padding:         0.5rem 1.1rem;
	font-size:       0.85rem;
	font-weight:     600;
	border-radius:   4px;
	border:          none;
	cursor:          pointer;
	text-decoration: none;
	font-family:     inherit;
	transition:      background 0.15s ease, color 0.15s ease;
	white-space:     nowrap;
}

.pv-compare-bar__btn--ver {
	background: var( --pv-comp-color );
	color:      #fff;
}
.pv-compare-bar__btn--ver:hover {
	background: var( --pv-comp-color-hover );
	color:      #fff;
}

.pv-compare-bar__btn--limpiar {
	background:    transparent;
	color:         rgba( 255, 255, 255, 0.8 );
	border:        1px solid rgba( 255, 255, 255, 0.3 );
}
.pv-compare-bar__btn--limpiar:hover {
	background: rgba( 255, 255, 255, 0.1 );
	color:      #fff;
}

@media ( max-width: 768px ) {
	.pv-compare-bar {
		padding: 0.7rem 1rem;
	}
	.pv-compare-bar__inner {
		flex-direction: column;
		align-items:    stretch;
		gap:            0.7rem;
	}
	.pv-compare-bar__chips {
		display: none;            /* ahorra espacio en móvil */
	}
	.pv-compare-bar__acciones {
		justify-content: stretch;
	}
	.pv-compare-bar__btn {
		flex: 1;
		justify-content: center;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   2. PÁGINA /comparar/ — tabla comparativa
═══════════════════════════════════════════════════════════════════════════ */
.pv-comparar {
	padding: 2rem 0 4rem;
	background: #f8f9fa;
	min-height: 60vh;
}

.pv-comparar__container {
	max-width: 1280px;
	margin:    0 auto;
	padding:   0 1.5rem;
}

.pv-comparar__header {
	margin-bottom: 1.5rem;
	text-align:    center;
}

.pv-comparar__titulo {
	font-size:   2rem;
	color:       var( --pv-comp-color );
	margin:      0 0 0.5rem;
	font-weight: 700;
}

.pv-comparar__titulo i {
	margin-right: 0.5rem;
}

.pv-comparar__intro {
	font-size: 1rem;
	color:     #555;
	margin:    0;
}

.pv-comparar__intro a {
	color: var( --pv-comp-color );
	font-weight: 600;
	margin-left: 0.5rem;
}

.pv-comparar__empty {
	background:    #fff;
	border:        1px dashed #ccc;
	border-radius: 8px;
	padding:       3rem 2rem;
	text-align:    center;
	color:         #666;
	font-size:     1rem;
}

.pv-comparar__empty a {
	color: var( --pv-comp-color );
	font-weight: 600;
}

/* Tabla */
.pv-comparar__tabla-wrap {
	overflow-x: auto;
	background: #fff;
	border:     1px solid var( --pv-comp-border );
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.06 );
}

.pv-comparar__tabla {
	width:           100%;
	border-collapse: collapse;
	min-width:       720px;
}

/* Encabezados (thumbnails de propiedades) */
.pv-comparar__th-label {
	background:  #f4f4f4;
	width:       200px;
	min-width:   180px;
}

.pv-comparar__th-prop {
	background:   #fff;
	border-left:  1px solid var( --pv-comp-border );
	padding:      1.25rem 1rem;
	text-align:   center;
	vertical-align: top;
	position:     relative;
	min-width:    220px;
}

.pv-comparar__quitar {
	position:    absolute;
	top:         8px;
	right:       8px;
	background:  rgba( 0, 0, 0, 0.08 );
	border:      none;
	color:       #666;
	width:       28px;
	height:      28px;
	border-radius: 50%;
	cursor:      pointer;
	font-size:   1rem;
	line-height: 1;
	transition:  background 0.15s ease, color 0.15s ease;
}
.pv-comparar__quitar:hover {
	background: var( --pv-comp-color );
	color:      #fff;
}

.pv-comparar__prop-link {
	display:         block;
	text-decoration: none;
	color:           inherit;
}

.pv-comparar__thumb-wrap {
	width:           100%;
	height:          140px;
	overflow:        hidden;
	border-radius:   6px;
	background:      #f0f0f0;
	margin-bottom:   0.75rem;
}

.pv-comparar__thumb {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

.pv-comparar__prop-titulo {
	display:      block;
	font-weight:  700;
	font-size:    0.95rem;
	color:        #1a1a1a;
	line-height:  1.3;
	margin-bottom: 0.75rem;
}

.pv-comparar__prop-link:hover .pv-comparar__prop-titulo {
	color: var( --pv-comp-color );
}

.pv-comparar__btn-ver {
	display:         inline-block;
	padding:         0.45rem 0.9rem;
	background:      var( --pv-comp-color );
	color:           #fff;
	text-decoration: none;
	font-size:       0.8rem;
	font-weight:     600;
	border-radius:   4px;
	transition:      background 0.15s ease;
}
.pv-comparar__btn-ver:hover {
	background: var( --pv-comp-color-hover );
	color:      #fff;
}

/* Filas comparativas */
.pv-comparar__fila {
	border-top: 1px solid var( --pv-comp-border );
}
.pv-comparar__fila:nth-child(even) {
	background: #fafafa;
}

.pv-comparar__td-label {
	font-weight:   600;
	color:         #444;
	padding:       0.85rem 1rem;
	background:    #f4f4f4;
	text-align:    left;
	font-size:     0.88rem;
	border-right:  1px solid var( --pv-comp-border );
}

.pv-comparar__td-valor {
	padding:        0.85rem 1rem;
	text-align:     center;
	color:          #333;
	font-size:      0.92rem;
	border-left:    1px solid var( --pv-comp-border );
	vertical-align: middle;
}

.pv-comparar__empty-cell {
	color:      #bbb;
	font-style: italic;
}

.pv-comparar__precio {
	color:       var( --pv-comp-color );
	font-size:   1.1rem;
	font-weight: 700;
	font-family: 'Play', 'Lato', sans-serif;
}

/* Fila de precio destacada */
.pv-comparar__fila--precio {
	background: #fff5f5 !important;
}

/* Acciones inferiores */
.pv-comparar__acciones-bottom {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-top:      1.5rem;
	gap:             1rem;
	flex-wrap:       wrap;
}

.pv-comparar__btn-volver {
	color:           var( --pv-comp-color );
	font-weight:     600;
	text-decoration: none;
	font-size:       0.95rem;
}
.pv-comparar__btn-volver:hover {
	color: var( --pv-comp-color-hover );
}

.pv-comparar__btn-limpiar {
	background:    transparent;
	color:         #888;
	border:        1px solid #ccc;
	padding:       0.55rem 1.2rem;
	border-radius: 4px;
	cursor:        pointer;
	font-size:     0.88rem;
	font-family:   inherit;
	transition:    background 0.15s ease, color 0.15s ease;
}
.pv-comparar__btn-limpiar:hover {
	background: #fee;
	color:      var( --pv-comp-color );
	border-color: var( --pv-comp-color );
}

@media ( max-width: 768px ) {
	.pv-comparar__titulo {
		font-size: 1.5rem;
	}
	.pv-comparar__th-label,
	.pv-comparar__td-label {
		width:    140px;
		min-width: 130px;
		font-size: 0.82rem;
	}
	.pv-comparar__td-valor {
		font-size: 0.85rem;
	}
}