/* Controles y estados del catálogo (mockup/catalogo.html: .campo, .selector, .resultados, .cargar-mas). */

.zp-filtros { display: flex; gap: 12px; align-items: center; width: 100%; }
.zp-campo { position: relative; flex: 1 1 auto; }
.zp-campo svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #55626A; pointer-events: none; }
.zp-selector { position: relative; flex: 0 0 280px; }
.zp-selector::after {
	content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; pointer-events: none;
	border-right: 2px solid #16697B; border-bottom: 2px solid #16697B; transform: translateY(-70%) rotate(45deg);
}
.zp-filtros input, .zp-filtros select {
	width: 100%; height: 50px; margin: 0; border-radius: 999px; border: 1.5px solid #DCDCDC; background: #FFF;
	font: 600 15px/1 "Manrope", sans-serif; color: #1F2A30;
}
.zp-filtros input { padding: 0 20px 0 48px; font-weight: 500; font-size: 16px; }
.zp-filtros input::placeholder { color: #8A949A; }
.zp-filtros select { appearance: none; padding: 0 44px 0 20px; cursor: pointer; }
.zp-filtros input:focus, .zp-filtros select:focus { outline: none; border-color: #16697B; box-shadow: 0 0 0 3px rgba(22,105,123,.18); }
.zp-filtros input::-webkit-search-cancel-button { display: none; }

/* Mobile: íconos en la línea del título, buscador que la reemplaza y menú de categorías (ver catalogo.js).
   Prefijo .zp-catalogo-barra en los botones: el Kit pinta todos los <button> como el botón naranja. */
.zp-icono, .zp-cerrar, .zp-menu { display: none; }
.zp-catalogo-barra .zp-icono, .zp-catalogo-barra .zp-icono:hover, .zp-catalogo-barra .zp-icono:focus {
	align-items: center; justify-content: center; flex: 0 0 44px; height: 44px; padding: 0; cursor: pointer;
	border-radius: 999px; border: 1.5px solid #DCDCDC; background: #FFF; color: #16697B; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.zp-catalogo-barra .zp-icono[aria-expanded="true"] { border-color: #16697B; }
.zp-catalogo-barra .zp-icono.zp-activo, .zp-catalogo-barra .zp-icono.zp-activo:hover, .zp-catalogo-barra .zp-icono.zp-activo:focus { background: #16697B; border-color: #16697B; color: #FFF; }
.zp-icono svg, .zp-cerrar svg { width: 20px; height: 20px; }
.zp-catalogo-barra .zp-cerrar, .zp-catalogo-barra .zp-cerrar:hover, .zp-catalogo-barra .zp-cerrar:focus {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0;
	align-items: center; justify-content: center; border: 0; border-radius: 999px; background: none; color: #55626A; cursor: pointer;
}

/* Se despliega bajo la barra (sticky, por eso es la referencia del absolute), sobre la grilla. */
.zp-menu {
	position: absolute; top: calc(100% - 4px); left: 24px; right: 24px; z-index: 1;
	max-height: min(60vh, 380px); overflow-y: auto; overscroll-behavior: contain;
	margin: 0; padding: 6px; list-style: none; border: 1.5px solid #DCDCDC; border-radius: 16px; background: #FFF;
	box-shadow: 0 12px 32px rgba(31,42,48,.14);
}
.zp-catalogo-barra .zp-menu button, .zp-catalogo-barra .zp-menu button:hover, .zp-catalogo-barra .zp-menu button:focus {
	display: block; width: 100%; padding: 12px 14px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer;
	font: 600 15px/1.3 "Manrope", sans-serif; color: #1F2A30;
}
.zp-catalogo-barra .zp-menu .zp-menu__hija { padding-left: 30px; font-weight: 500; color: #55626A; }
.zp-catalogo-barra .zp-menu button[aria-current="true"] { background: rgba(22,105,123,.1); color: #16697B; font-weight: 700; }

.zp-resultados { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; min-height: 28px; font-size: 17px; }
.zp-resultados__total { margin: 0; }
.zp-resultados__total strong { font-weight: 700; }
.zp-resultados__total span { color: #55626A; font-weight: 500; }
.zp-limpiar { white-space: nowrap; font: 700 15px "Manrope", sans-serif; color: #F15A24; text-decoration: none; }
.zp-limpiar[hidden], .zp-vacio[hidden], .zp-cargar-mas[hidden], .zp-menu[hidden] { display: none; }

.zp-oculto { display: none !important; }
.zp-vacio { margin: 8px 0 0; padding: 40px 24px; text-align: center; color: #55626A; background: #F2F2F2; border-radius: 16px; }

.zp-cargar-mas { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 40px; color: #55626A; font-size: 15px; }
.zp-boton-borde {
	display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
	font: 700 16px/1 "Manrope", sans-serif; padding: 15px 26px; border-radius: 999px;
	border: 2px solid #16697B; background: transparent; color: #16697B; transition: background-color .2s ease, color .2s ease;
}
.zp-boton-borde:hover, .zp-boton-borde:focus-visible { background: #16697B; color: #FFF; }

@media (max-width: 767px) {
	.zp-filtros { justify-content: flex-end; gap: 8px; }
	.zp-selector, .zp-campo { display: none; }
	.zp-icono { display: inline-flex; }
	.zp-menu:not([hidden]) { display: block; }
	.zp-filtros input { height: 44px; padding-right: 52px; font-size: 16px; } /* 16px: iOS no hace zoom al enfocar */
	.zp-cerrar { display: inline-flex; }

	.zp-catalogo-barra .elementor-widget-heading { flex-shrink: 1; min-width: 0; } /* en pantallas angostas el título baja de línea, los íconos no */
	.zp-buscando .elementor-widget-heading, .zp-buscando .zp-icono { display: none; }
	.zp-buscando .zp-campo { display: block; }

	/* Cuando el header se esconde al bajar (theme: header.js), la barra sube los 66px que le dejaba. */
	.zp-catalogo-barra.elementor-sticky--active { transition: transform .25s ease; }
	.zp-header-oculto .zp-catalogo-barra.elementor-sticky--active { transform: translateY(-66px); }
	.zp-resultados { font-size: 15px; }
}