/**
 * Estilos unificados para el selector de taxonomías de alojamientos
 *
 * Este archivo contiene todos los estilos necesarios para el módulo
 * unificado del selector de taxonomías con iconos.
 *
 * IMPORTANTE: Usa variables CSS centralizadas de variables.css
 *
 * @package Xacobeos
 * @since 2.0.0
 */

/* ==========================================================================
   Contenedor principal del filtro
   ========================================================================== */

.alojamiento-filters {
	margin: var(--space-lg) 0;
	padding: 0;
}

.filters-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
}

/* ==========================================================================
   Botones de filtro - Estilos base
   ========================================================================== */

.filter-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
}

.filter-btn {
	display: inline-flex;
	align-items: center;
	padding: var(--filter-btn-padding);
	background: var(--filter-btn-bg);
	color: var(--filter-btn-color);
	text-decoration: none;
	border-radius: var(--filter-btn-radius);
	border: var(--border-width-2) solid transparent;
	transition: var(--transition-all);
	font-weight: 500;
	font-size: 0.9rem;
	line-height: 1.2;
	white-space: nowrap;
}

.filter-btn:hover,
.filter-btn:focus {
	background: var(--filter-btn-hover-bg);
	color: var(--filter-btn-hover-color);
	text-decoration: none;
	outline: none;
	box-shadow: var(--shadow-blue);
}

.filter-btn.active {
	background: var(--filter-btn-active-bg);
	color: var(--filter-btn-active-color);
}

/* ==========================================================================
   Botones con iconos
   ========================================================================== */

.filter-buttons--with-images .filter-btn {
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
}

.filter-btn--with-icon {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.filter-btn--all {
	font-weight: 600;
	background: var(--gray-200);
	color: var(--gray-700);
}

.filter-btn--all:hover,
.filter-btn--all:focus {
	background: var(--filter-btn-hover-bg);
	color: var(--filter-btn-hover-color);
}

/* ==========================================================================
   Iconos dentro de los botones
   ========================================================================== */

.filter-icon {
	flex-shrink: 0;
	display: inline-block;
}

.filter-icon,
.filter-icon img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	border-radius: var(--radius-sm);
}

/* ==========================================================================
   Controles de vista
   ========================================================================== */

.view-controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
}

.view-label {
	font-weight: 500;
	color: #666;
	margin-right: 0.5rem;
}

.view-btn {
	padding: 0.5rem;
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	color: #666;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}

.view-btn:hover,
.view-btn:focus {
	background: #e9ecef;
	color: #333;
	outline: none;
}

.view-btn.active {
	background: #2c5aa0;
	color: white;
	border-color: #2c5aa0;
}

.view-btn i {
	font-size: 14px;
}

/* ==========================================================================
   Estadísticas de taxonomía
   ========================================================================== */

.taxonomy-stats {
	background: var(--stats-bg);
	padding: var(--stats-padding);
	border-radius: var(--stats-radius);
	border-left: var(--stats-border);
	margin: var(--space-md) 0;
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--text-primary);
}

.taxonomy-stats strong {
	color: var(--xacobeos-blue);
	font-weight: 600;
}

/* ==========================================================================
   Estados de carga y vacío
   ========================================================================== */

.filter-buttons--loading {
	opacity: 0.6;
	pointer-events: none;
}

.filter-buttons--empty::after {
	content: "No hay filtros disponibles";
	color: #666;
	font-style: italic;
	padding: 1rem;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
	.filters-row {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}

	.filter-buttons {
		justify-content: center;
		flex-wrap: wrap;
	}

	.filter-btn {
		font-size: 0.85rem;
		padding: 6px 10px;
	}

	.filter-buttons--with-images .filter-btn {
		padding: 6px 10px;
		gap: 6px;
	}

	.filter-icon--image {
		width: 16px;
		height: 16px;
	}

	.filter-icon--eva {
		width: 16px;
		height: 16px;
	}

	.view-controls {
		justify-content: center;
	}

	.view-btn {
		width: 32px;
		height: 32px;
	}
}

@media (max-width: 480px) {
	:root {
		--taxonomy-filter-spacing: 0.25rem;
		--taxonomy-filter-padding: 0.4rem 0.8rem;
		--taxonomy-filter-border-radius: 16px;
	}

	.alojamiento-filters {
		margin: 1rem 0;
	}

	.filter-btn {
		font-size: 0.8rem;
	}

	.filter-buttons--with-images .filter-btn {
		padding: 5px 8px;
		gap: 5px;
	}

	.filter-icon--image,
	.filter-icon--eva {
		width: 14px;
		height: 14px;
	}

	.view-label {
		display: none; /* Ocultar label en móviles muy pequeños */
	}
}

/* ==========================================================================
   Compatibilidad con otros componentes
   ========================================================================== */

/* Integración con breadcrumbs */
.breadcrumb-nav + .alojamiento-filters {
	margin-top: 1rem;
}

/* Integración con page header */
.page-header .alojamiento-filters {
	margin-top: 1.5rem;
	margin-bottom: 0;
}

/* Integración con resultados de búsqueda */
.search-results .alojamiento-filters {
	border-bottom: 1px solid #eee;
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
}

/* ==========================================================================
   Variaciones de estilo
   ========================================================================== */

/* Estilo compacto */
.alojamiento-filters--compact {
	margin: 1rem 0;
}

.alojamiento-filters--compact .filter-btn {
	padding: 0.4rem 0.8rem;
	font-size: 0.85rem;
}

.alojamiento-filters--compact .filter-buttons--with-images .filter-btn {
	padding: 0.4rem 0.8rem;
	gap: 6px;
}

/* Estilo sin bordes redondeados */
.alojamiento-filters--square .filter-btn {
	border-radius: 4px;
}

/* Estilo minimalista */
.alojamiento-filters--minimal .filter-btn {
	background: transparent;
	border: 1px solid #ddd;
}

.alojamiento-filters--minimal .filter-btn:hover,
.alojamiento-filters--minimal .filter-btn.active {
	background: var(--taxonomy-filter-active-bg);
	color: var(--taxonomy-filter-active-color);
	border-color: var(--taxonomy-filter-active-bg);
}

/* ==========================================================================
   Dark mode support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root {
		--taxonomy-filter-bg: #374151;
		--taxonomy-filter-color: #f9fafb;
		--taxonomy-filter-hover-bg: #4f46e5;
		--taxonomy-filter-hover-color: white;
		--taxonomy-stats-bg: rgba(44, 90, 160, 0.1);
	}

	.view-btn {
		background: #374151;
		border-color: #4b5563;
		color: #f9fafb;
	}

	.view-btn:hover {
		background: #4b5563;
	}
}

/* ==========================================================================
   Animaciones y transiciones
   ========================================================================== */

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

.filter-buttons {
	animation: filterSlideIn 0.3s ease-out;
}

.filter-btn {
	transform: translateZ(0); /* Forzar aceleración por hardware */
}

.filter-btn:hover {
	transform: translateY(-1px);
}

.filter-btn:active {
	transform: translateY(0);
}

/* Animación de carga para iconos EVA */
.filter-icon--eva {
	transition: opacity 0.2s ease;
}

.filter-icon--eva[data-eva]:not([data-eva-loaded]) {
	opacity: 0.5;
}

/* ==========================================================================
   Breadcrumb styles (migrated from taxonomy template)
   ========================================================================== */

.breadcrumb-nav {
	margin-bottom: var(--space-lg);
	padding: var(--breadcrumb-padding);
	background: var(--breadcrumb-bg);
	border-radius: var(--breadcrumb-radius);
}

.breadcrumb-nav .breadcrumb {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 0.9rem;
}

.breadcrumb-nav .breadcrumb li {
	display: flex;
	align-items: center;
}

.breadcrumb-nav .breadcrumb a {
	color: var(--breadcrumb-link-color);
	text-decoration: none;
	transition: var(--transition-colors);
}

.breadcrumb-nav .breadcrumb a:hover {
	color: var(--breadcrumb-link-hover-color);
	text-decoration: underline;
}

.breadcrumb-separator {
	margin: 0 var(--space-sm);
	color: var(--text-muted);
}

.breadcrumb-current span {
	color: var(--text-primary);
	font-weight: 500;
}

/* Page header compatibility */
.page-header {
	margin-bottom: var(--space-xl);
	padding-bottom: var(--space-lg);
	border-bottom: var(--border-width-2) solid var(--border-light);
}

.page-title {
	font-size: var(--page-title-size);
	margin: var(--space-md) 0;
	color: var(--page-title-color);
}

.tipo-badge {
	background: var(--badge-bg);
	color: var(--badge-color);
	padding: var(--badge-padding);
	border-radius: var(--badge-radius);
	font-size: 1.1rem;
	font-weight: 500;
}

.archive-description {
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--text-secondary);
	max-width: 800px;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
	.alojamiento-filters,
	.view-controls,
	.breadcrumb-nav {
		display: none;
	}
}