/* Filtros del catálogo (spec §6.5 y spec 2026-10-02 §4): barra sobre la grilla en escritorio,
   hoja inferior en móvil, grupos abiertos sin JavaScript. */
.nm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 24px; }
/* active-filters.php dibuja pastillas y orden dentro de .nm-shop-bar: con display: contents
   sus hijos se reparten en la misma fila que los menús, sin tocar esa plantilla. */
.nm-shop-bar { display: contents; }
.nm-active-filters { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.nm-order-wrap, .nm-order-form { margin-left: auto; }

.nm-filters-toggle, .nm-filters-head, .nm-filters-backdrop, .nm-dd-btn, .nm-dd-apply { display: none; }

/* Base, y lo que se ve sin JavaScript: los grupos abiertos, uno al lado del otro, con un
   solo "Aplicar" (los botones de menú no harían nada sin script). */
.nm-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; width: 100%; }
.nm-filter-group { flex: 1 1 220px; max-width: 320px; }
.nm-dd-panel { min-width: 0; margin: 0; padding: 12px 16px; border: 1px solid var(--nm-line); border-radius: var(--nm-radius); background: var(--nm-white); }
.nm-filter-title { font-family: var(--nm-font-display), system-ui, sans-serif; font-weight: 700; text-transform: uppercase; font-size: var(--nm-fs-13); color: var(--nm-navy); padding: 0; margin-bottom: 8px; }
.nm-filter-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.nm-filter-list label, .nm-dd-panel > label { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 2px 0; cursor: pointer; }
.nm-filters input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--nm-navy); }
.nm-filter-count { color: var(--nm-muted); font-size: var(--nm-fs-13); margin-left: auto; }
.nm-filter-precio { display: flex; align-items: center; gap: 8px; }
.nm-filter-precio label { position: relative; flex: 1; min-width: 0; }
.nm-filter-precio label::before { content: "$"; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: var(--nm-muted); pointer-events: none; }
.nm-filter-precio input { width: 100%; min-width: 0; padding: 8px 8px 8px 22px; border: 1px solid var(--nm-line); border-radius: var(--nm-radius); }
.nm-filters-apply { flex: none; }

.nm-chip-remove { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--nm-line); border-radius: var(--nm-radius-pill); background: var(--nm-soft); color: var(--nm-ink); text-decoration: none; font-size: var(--nm-fs-13); }
.nm-chip-remove:hover { border-color: var(--nm-navy); }
.nm-chip-clear { font-size: var(--nm-fs-13); color: var(--nm-navy); }
.nm-order { padding: 8px 12px; border: 1px solid var(--nm-line); border-radius: var(--nm-radius); background: var(--nm-white); }
.nm-order-form { display: flex; align-items: center; gap: 8px; }
.nm-order-apply { padding: 8px 14px; }
/* Con JavaScript el orden se aplica al cambiar el select (filters.js); el botón queda para el modo sin JS. */
:root[data-js="1"] .nm-order-apply { display: none; }

/* Insignia con el conteo de activos: la comparten los menús de escritorio y el botón "Filtros"
   móvil; su visibilidad la decide el botón que la contiene. */
.nm-dd-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--nm-radius-pill); background: var(--nm-navy); color: var(--nm-white); font-size: var(--nm-fs-12); }

/* Escritorio con JavaScript: cada grupo es un menú desplegable (filter-menus.js). */
@media (min-width: 821px) {
	:root[data-js="1"] .nm-filters { width: auto; flex-wrap: nowrap; gap: 8px; }
	:root[data-js="1"] .nm-filter-group { position: relative; flex: none; max-width: none; }
	:root[data-js="1"] .nm-dd-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--nm-line); border-radius: var(--nm-radius-pill); background: var(--nm-white); color: var(--nm-ink); font-weight: 700; cursor: pointer; }
	/* Chevron dibujado con bordes: sin ícono ni fuente extra. */
	:root[data-js="1"] .nm-dd-btn::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
	:root[data-js="1"] .nm-dd-btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
	:root[data-js="1"] .nm-dd-btn:hover, :root[data-js="1"] .nm-dd-btn[aria-expanded="true"] { border-color: var(--nm-navy); color: var(--nm-navy); }
	:root[data-js="1"] .nm-dd-btn:focus-visible { outline: 2px solid var(--nm-navy); outline-offset: 2px; }
	/* La sombra es la de la hoja móvil (rgba del navy de marca): no hay token de sombras elevadas. */
	:root[data-js="1"] .nm-dd-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: none; width: 280px; box-shadow: 0 8px 24px rgba(27, 29, 104, .18); }
	:root[data-js="1"] .nm-filter-group[data-dd="1"] > .nm-dd-panel { display: block; }
	/* El botón ya nombra el grupo; el legend queda solo para lectores de pantalla. */
	:root[data-js="1"] .nm-dd-panel > .nm-filter-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	:root[data-js="1"] .nm-filter-group[data-taxonomy="precio"] .nm-dd-apply { display: flex; width: 100%; margin-top: 12px; }
	:root[data-js="1"] .nm-filters-apply { display: none; }
}

@media (max-width: 820px) {
	/* Sin JavaScript: un grupo por fila. */
	.nm-filter-group { flex-basis: 100%; max-width: none; }

	/*
	 * Mejora progresiva (hallazgo 1): el estampado data-js="1" en <html> lo pone un script
	 * inline en <head> (header.php) antes del primer pintado, así que solo existe cuando
	 * JavaScript está disponible. Sin ese estampado el panel se queda en el flujo normal
	 * de la página -formulario común, alcanzable con teclado- y el botón que lo abriría no
	 * se ofrece.
	 */
	:root[data-js="1"] .nm-filters-toggle { display: block; width: 100%; padding: 12px; border: 1px solid var(--nm-navy); border-radius: var(--nm-radius); background: var(--nm-white); color: var(--nm-navy); font-weight: 700; }
	/*
	 * scroll-padding-top: la cabecera de cierre es position: sticky, de unos 65px de
	 * alto (medido a 390×844) -no hay token de alturas en tokens.css para esto-. Sin
	 * este padding, el navegador desplaza un control enfocado (p.ej. con Shift+Tab)
	 * justo hasta top: 0 del contenedor con scroll, y la cabecera fija lo tapa
	 * (WCAG 2.4.11). Se agrega también en .nm-filter-list porque cada grupo de
	 * casillas tiene su propio scroll interno.
	 */
	/* z-index 103: sobre la cabecera del sitio (100) y el fondo oscuro (102). */
	:root[data-js="1"] .nm-filters { display: block; position: fixed; inset: auto 0 0 0; z-index: 103; width: auto; max-height: 80vh; overflow-y: auto; scroll-padding-top: 68px; padding: 16px; border-radius: 12px 12px 0 0; background: var(--nm-white); box-shadow: 0 -8px 24px rgba(27, 29, 104, .18); transform: translateY(100%); transition: transform .2s ease; }
	:root[data-js="1"] .nm-filters[data-abierto="1"] { transform: translateY(0); }
	/* Dentro de la hoja los grupos van apilados y siempre abiertos; los botones de menú no se ven. */
	:root[data-js="1"] .nm-filters .nm-filter-group { margin: 0 0 20px; }
	:root[data-js="1"] .nm-filters .nm-dd-panel { padding: 0; border: 0; }
	:root[data-js="1"] .nm-filters-apply { width: 100%; }
	:root[data-js="1"] .nm-filters .nm-filter-list { scroll-padding-top: 68px; }
	/*
	 * scroll-padding-top no basta por sí solo: el navegador solo desplaza lo mínimo
	 * para que el control ya sea "visible", y un control que asoma apenas por debajo
	 * del borde de la cabecera cuenta como visible aunque quede tapado. scroll-margin-top
	 * en el propio control -mismo alto que la cabecera- fuerza ese mínimo a incluirla.
	 */
	:root[data-js="1"] .nm-filters :where(input, select, textarea, button, a) { scroll-margin-top: 68px; }

	/*
	 * Cabecera fija de la hoja, con el título y el botón de cerrar (mismo look que
	 * .nm-drawer-head/.nm-minicart-close). `position: sticky` la mantiene visible aunque
	 * la lista se desplace por dentro. Los márgenes negativos la llevan a los bordes del
	 * padding de .nm-filters para que quede pegada a las esquinas redondeadas de la hoja.
	 */
	:root[data-js="1"] .nm-filters-head {
		position: sticky;
		/* top: 0 pegaba la cabecera 16px (el padding de .nm-filters) por debajo del borde: en
		   esa franja se veía pasar la lista. -16px = el margen negativo de abajo. */
		top: -16px;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: -16px -16px 16px;
		padding: 12px 12px 12px 16px;
		background: var(--nm-white);
		border-bottom: 1px solid var(--nm-line);
		border-radius: 12px 12px 0 0;
		color: var(--nm-navy);
		font: 800 var(--nm-fs-18) / 1 var(--nm-font-display);
		text-transform: uppercase;
	}
	/*
	 * Fondo oscuro: cubre la página bajo la hoja, incluida la cabecera (z-index 100). El
	 * tono es el navy del sitio (--nm-navy-dark #14165A) al 40 %; no hay token con alfa.
	 * visibility evita que capture toques cuando está invisible.
	 */
	:root[data-js="1"] .nm-filters-backdrop { position: fixed; inset: 0; z-index: 102; display: block; background: rgba(20, 22, 90, .4); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
	:root[data-js="1"] .nm-filters[data-abierto="1"] ~ .nm-filters-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
	:root[data-js="1"] .nm-filters-close {
		width: 40px;
		height: 40px;
		border: 0;
		background: transparent;
		color: var(--nm-ink);
		font-size: 28px;
		line-height: 1;
		cursor: pointer;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nm-filters, .nm-filters-backdrop { transition: none !important; }
}

/* Móvil (spec 2026-10-02 §6): la barra queda fija arriba con "Filtros" y "Orden" del mismo
   ancho, y las pastillas debajo en una fila que se desliza. Es sticky dentro de
   #nm-shop-body: se suelta al terminar la grilla, antes de "Sobre …". */
@media (max-width: 820px) {
	.nm-toolbar { margin-bottom: 16px; }
	:root[data-js="1"] .nm-toolbar--filtros {
		position: sticky;
		top: 0;
		z-index: 30;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		align-items: stretch;
		margin-inline: -16px;
		padding: 8px 16px;
		border-bottom: 1px solid var(--nm-line);
		background: var(--nm-white);
	}
	/* Con la hoja abierta la barra sube por encima de .nm-nav (z-index 40): su z-index 30 crea
	   un contexto de apilamiento que, si no, dejaría la hoja (103) y el fondo (102) debajo. */
	:root[data-js="1"] .nm-toolbar--filtros:has(.nm-filters[data-abierto="1"]) { z-index: 103; }
	:root[data-js="1"] .nm-toolbar--filtros .nm-filters-toggle { grid-column: 1; grid-row: 1; height: 44px; padding-block: 0; display: flex; align-items: center; justify-content: center; }
	:root[data-js="1"] .nm-toolbar--filtros .nm-filters-toggle .nm-dd-n { margin-left: 6px; }
	:root[data-js="1"] .nm-toolbar--filtros .nm-order-wrap { grid-column: 2; grid-row: 1; margin: 0; }
	:root[data-js="1"] .nm-toolbar--filtros .nm-order { width: 100%; height: 44px; box-sizing: border-box; padding-inline: 8px; border-color: var(--nm-navy); color: var(--nm-navy); font-weight: 600; text-overflow: ellipsis; }
	:root[data-js="1"] .nm-toolbar--filtros .nm-active-filters { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	:root[data-js="1"] .nm-toolbar--filtros .nm-active-filters:not(:has(a)) { display: none; }
	:root[data-js="1"] .nm-toolbar--filtros :is(.nm-chip-remove, .nm-chip-clear) { flex: none; white-space: nowrap; }
}