/* Módulo «filtros» del front: se carga solo si la página trae sus clases (App\Core\View\CssFront::MODULOS). */
/* Filtros en columna izquierda: la columna cuenta como una miniatura, así el ancho de cada tarjeta se mantiene (ver --grid-cols-escritorio-lateral en ThemeCss). */
@media (min-width: 1025px) {
.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) .grid-productos { grid-template-columns: repeat(var(--grid-cols-escritorio-lateral, 3), minmax(0, 1fr)); }
}
.categoria-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin: 1rem 0 1.5rem;
}
.categoria-toolbar__grupo { display: flex; align-items: center; gap: 0.5rem; font-size: .875rem; }
.categoria-toolbar .filtros-panel__toggle { min-width: 7rem; }
@media (max-width: 380px) {
.categoria-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
.categoria-toolbar__grupo, .categoria-toolbar .filtros-panel { min-width: 0; }
}
/* Filtro de catálogo: el mismo cajón lateral con CSS en todas las pantallas. */
.filtros-panel { position: relative; }
.filtros-panel__checkbox { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filtros-panel__toggle { display: flex; align-items: center; justify-content: center; gap: .4em; min-height: var(--campo-altura, 40px); padding: .6em .9em; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: var(--campo-radio, 6px); background: var(--filtros-activar-fondo, var(--color-fondo)); color: var(--filtros-activar-texto, var(--color-texto)); cursor: pointer; font-size: .875rem; font-weight: 600; user-select: none; }
.filtros-panel__checkbox:focus-visible + .filtros-panel__toggle { outline: 2px solid var(--color-primario); outline-offset: 3px; }
.filtros-panel__punto { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-primario); }
.filtros-panel__punto[hidden] { display: none; }
.filtros-panel__fondo { position: fixed; inset: 0; z-index: 119; background: color-mix(in srgb, var(--color-velo) var(--velo-opacidad, 55%), transparent); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
.filtros-panel__checkbox:checked ~ .filtros-panel__fondo { opacity: 1; visibility: visible; pointer-events: auto; }
.filtros-panel__contenido { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 120; width: min(420px, calc(100vw - 18px)); height: 100vh; height: 100dvh; overflow: hidden; border-radius: 0 var(--filtros-panel-radio, 18px) var(--filtros-panel-radio, 18px) 0; background: var(--filtros-panel-fondo, var(--color-fondo)); color: var(--filtros-panel-texto, var(--color-texto)); box-shadow: 18px 0 50px color-mix(in srgb, var(--color-sombra) 22%, transparent); visibility: hidden; transform: translateX(-102%); pointer-events: none; transition: transform .22s ease, visibility .22s ease; }
.filtros-panel__checkbox:checked ~ .filtros-panel__contenido { visibility: visible; transform: translateX(0); pointer-events: auto; }
.filtros-panel__cabecera { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 1rem; min-height: 0; padding: .9rem 1.25rem; border-bottom: 1px solid var(--color-borde); background: var(--filtros-panel-fondo, var(--color-fondo)); font-size: 1.05rem; }
.filtros-panel__cerrar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--filtros-cerrar-fondo, var(--color-fondo-suave)); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.filtros-panel__cerrar:hover { background: var(--color-borde); }
.filtros-panel__contenido .facetas { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 1.25rem; overflow-y: auto; }
.facetas__campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.facetas-grupo { min-width: 0; }
.facetas-grupo[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.facetas-grupo__actual { overflow: hidden; color: var(--color-texto-suave); font-size: .79rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.facetas-grupo__opciones { display: grid; gap: .15rem; padding: 0 0 .8rem; }
.facetas-opcion { display: flex; align-items: center; gap: .65rem; min-height: 36px; padding: .35rem .45rem; border-radius: var(--campo-radio, 8px); cursor: pointer; font-size: .85rem; }
.facetas-opcion:hover { background: var(--filtros-opcion-hover-fondo, var(--color-fondo-suave)); }
.facetas-opcion__cuenta { margin-left: auto; min-width: 1.6rem; padding: .1rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--color-texto-suave) 14%, transparent); color: var(--color-texto-suave); font-size: .72rem; font-weight: 600; line-height: 1.4; text-align: center; font-variant-numeric: tabular-nums; }
.filtros-panel__contenido .facetas__acciones .btn { flex: 1; }
.facetas-activas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: -.1rem 0 1.3rem; font-size: .82rem; }
.facetas-activas__chip { display: inline-flex; align-items: center; gap: .7rem; padding: .4rem .65rem; border: 1px solid var(--color-borde); border-radius: 999px; color: var(--color-texto); background: var(--color-fondo); text-decoration: none; }
.facetas-activas__chip:hover { border-color: var(--color-primario); color: var(--color-primario); }
.facetas-activas__limpiar { margin-left: .25rem; }
@media (prefers-reduced-motion: reduce) {
.filtros-panel__fondo, .filtros-panel__contenido { transition: none; }
}
.categoria-toolbar__grupo .vc-select__trigger { font-size: .875rem; font-weight: 600; }
@media (max-width: 380px) {
.categoria-toolbar__grupo .vc-select { width: 100%; }
}
@media (min-width: 1024px) {
.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) > .categoria-toolbar { display: contents; }
.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) > .categoria-toolbar .filtros-panel { grid-column: 1; grid-row: span 4; position: sticky; top: 1rem; justify-self: stretch; width: 100%; }
.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) > .categoria-toolbar .categoria-toolbar__grupo { grid-column: 2; justify-self: end; margin-bottom: 1rem; }
.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) > .categoria-orden-estado,
	.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) > .categoria-resultados,
	.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) > .marca-resultados { grid-column: 2; min-width: 0; }
.catalogo-lateral .filtros-panel__toggle, .catalogo-lateral .filtros-panel__fondo, .catalogo-lateral .filtros-panel__cabecera { display: none; }
.catalogo-lateral .filtros-panel__contenido { position: static; inset: auto; z-index: auto; width: auto; height: auto; max-height: calc(100vh - 2rem); border: 1px solid var(--color-borde); border-radius: var(--radio, 12px); box-shadow: none; visibility: visible; transform: none; pointer-events: auto; transition: none; }
}
/* Filtros en barra horizontal (escritorio): cada grupo de facetas es una píldora y sus opciones se abren como menú bajo ella; en <1025 px queda el botón «Filtrar» con cajón. */
@media (min-width: 1025px) {
.catalogo-barra .categoria-toolbar { flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.catalogo-barra .categoria-toolbar .filtros-panel { flex: 1 1 auto; min-width: 0; }
.catalogo-barra .categoria-toolbar__grupo { flex: none; }
.catalogo-barra .filtros-panel__toggle, .catalogo-barra .filtros-panel__fondo, .catalogo-barra .filtros-panel__cabecera { display: none; }
.catalogo-barra .filtros-panel__contenido { display: block; position: static; inset: auto; z-index: auto; width: auto; height: auto; overflow: visible; border-radius: 0; background: none; box-shadow: none; visibility: visible; transform: none; pointer-events: auto; transition: none; }
.catalogo-barra .filtros-panel__contenido .facetas { display: flex; flex-flow: row wrap; align-items: center; gap: .5rem; padding: 0; overflow: visible; }
.catalogo-barra .facetas__campos { display: flex; flex-flow: row wrap; gap: .5rem; }
.catalogo-barra .facetas-grupo { position: relative; }
.catalogo-barra .facetas-grupo summary { display: flex; align-items: center; gap: .45rem; min-height: var(--campo-altura, 40px); padding: 0 2rem 0 .9rem; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: var(--campo-radio, 6px); background: var(--filtros-activar-fondo, var(--color-fondo)); white-space: nowrap; }
.catalogo-barra .facetas-grupo summary::after { right: .8rem; }
.catalogo-barra .facetas-grupo__actual { max-width: 9rem; }
.catalogo-barra .facetas-grupo[open] summary { border-color: var(--color-primario); }
.catalogo-barra .facetas-grupo[open] .facetas-grupo__opciones { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 15rem; max-width: 22rem; max-height: 18rem; overflow-y: auto; padding: .4rem; border: 1px solid var(--color-borde); border-radius: var(--radio, 12px); background: var(--filtros-panel-fondo, var(--color-fondo)); color: var(--filtros-panel-texto, var(--color-texto)); box-shadow: 0 12px 28px color-mix(in srgb, var(--color-sombra) 16%, transparent); }
.catalogo-barra .filtros-panel__contenido .facetas__acciones { position: static; display: flex; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; gap: .75rem; }
.catalogo-barra .filtros-panel__contenido .facetas__acciones .btn { flex: none; }
}
/* Acciones de los filtros: el botón nunca se parte en dos líneas; en la columna estrecha de la izquierda van apiladas (botón completo y «Limpiar» centrado debajo). */
.facetas__acciones .btn { white-space: nowrap; }
@media (min-width: 1024px) {
.catalogo-lateral .filtros-panel__contenido .facetas__acciones { flex-direction: column; align-items: stretch; gap: .6rem; text-align: center; }
.catalogo-lateral .filtros-panel__contenido .facetas__acciones .btn { flex: none; }
}
/* Barra de filtros: los que no caben en la primera fila quedan tras «Más filtros». */
.facetas__mas { display: inline-flex; align-items: center; min-height: var(--campo-altura, 40px); padding: 0 .9rem; border: var(--campo-borde-px, 1px) dashed var(--campo-borde, #dddddd); border-radius: var(--campo-radio, 6px); background: transparent; color: var(--color-texto); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.facetas__mas:hover, .facetas__mas:focus-visible { border-color: var(--color-primario); }
.facetas__mas[hidden] { display: none; }
.facetas-grupo--extra { display: none; }
.facetas__campos--abierta .facetas-grupo--extra { display: block; }