/* =============================================================================
 *  silo-facets.css — Capa facetada del archivo de silo · CPS Spain · v3
 *  Aditivo. Scopeado bajo .cps-tpl-silo. SIN !important. Usa tokens del theme.
 *  Reutiliza el sistema cps- (botones, cards) y solo añade lo propio de faceta.
 *
 *  v3 — REDISEÑO IA:
 *   · Barra PERSISTENTE (sticky en escritorio) con el conmutador de ÁMBITO
 *     (eje «kind», elección única) + búsqueda + contador.
 *   · El botón de filtros queda relegado a un DRAWER solo en móvil; en
 *     escritorio el panel de ejes secundarios está siempre visible.
 *   · Chips secundarios: cero estructural → [hidden]; cero combinatorio →
 *     [disabled]/[aria-disabled].
 *   · Secciones <section> por tipo + resumen de filtros activos (tokens).
 * ========================================================================== */

.cps-tpl-silo .cps-silo-toolbar {
	margin: 1.5rem 0 2rem;
}

/* ---- Barra compacta PERSISTENTE (ámbito + búsqueda + contador) ---- */
.cps-tpl-silo .cps-silo-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	position: sticky;
	/* --cps-sticky-top: ajústalo a la altura del header sticky de Woodmart. */
	top: var(--cps-sticky-top, 1rem);
	z-index: 20;
	padding: .6rem 0;
	/*background: var(--white, #fff);
	border-bottom: 1px solid var(--line, rgba(0, 0, 0, .1));*/
}

/* ---- Conmutador de ÁMBITO (segmented control / radiogroup) ---- */
.cps-tpl-silo .cps-silo-scope {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem;
	padding: .25rem;
	border: 1px solid var(--line, rgba(0, 0, 0, .14));
	border-radius: 999px;
	background: var(--surface, rgba(0, 0, 0, .02));
	font-weight: 900;
}

.cps-tpl-silo .cps-silo-scope__opt {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem .9rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: .9rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.cps-tpl-silo .cps-silo-scope__opt:hover {
	background: var(--white, #fff);
}

.cps-tpl-silo .cps-silo-scope__opt:focus-visible {
	outline: 2px solid var(--green, #1f9d55);
	color: black;
	outline-offset: 1px;
}

/* Ámbito activo — mismo tratamiento que el chip activo (coherencia visual). */
.cps-tpl-silo .cps-silo-scope__opt.is-active {
	background: var(--green, #1f9d55);
	color: black;
}

.cps-tpl-silo .cps-silo-scope__n {
	font-size: .78rem;
	opacity: .7;
}

.cps-tpl-silo .cps-silo-scope__opt.is-active .cps-silo-scope__n {
	opacity: .85;
}

/* Al buscar, el ámbito se atenúa (estado «todos»): ninguna opción activa. */
.cps-tpl-silo .cps-silo-scope.is-searching .cps-silo-scope__opt {
	opacity: .45;
}

.cps-tpl-silo .cps-silo-scope__hint {
	font-size: .82rem;
	font-style: italic;
	opacity: .7;
}

.cps-tpl-silo .cps-silo-scope__hint[hidden] {
	display: none;
}

/* ---- Thumb deslizante (lo inyecta el JS; .has-thumb activa el modo) ----
   Replica el verde del ámbito activo, pero deslizándose entre opciones. */
.cps-tpl-silo .cps-silo-scope__thumb {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 0;
	height: 0;
	border-radius: 999px;
	background: var(--green, #1f9d55);
	transform: translate(0, 0);
	transition: transform .25s cubic-bezier(.4, 0, .2, 1),
	            width .25s cubic-bezier(.4, 0, .2, 1),
	            height .25s cubic-bezier(.4, 0, .2, 1),
	            opacity .15s ease;
	pointer-events: none;
}

/* Sin transición: primer pintado y resize (evita que el thumb derive). */
.cps-tpl-silo .cps-silo-scope__thumb.is-instant {
	transition: none;
}

/* En modo thumb, el relleno del botón activo lo provee el thumb: se suprime
   el fondo del botón (el texto sigue en blanco sobre el verde). */
.cps-tpl-silo .cps-silo-scope.has-thumb .cps-silo-scope__opt.is-active,
.cps-tpl-silo .cps-silo-scope.has-thumb .cps-silo-scope__opt.is-active:hover {
	background: transparent;
}

/* Al buscar (estado «todos») el thumb se oculta: no hay ámbito activo. */
.cps-tpl-silo .cps-silo-scope.is-searching .cps-silo-scope__thumb {
	opacity: 0;
}

/* Respeta la preferencia de movimiento reducido: salto instantáneo. */
@media (prefers-reduced-motion: reduce) {
	.cps-tpl-silo .cps-silo-scope__thumb {
		transition: none;
	}
}

/* ---- Botón de filtros: SOLO móvil (en escritorio la barra es persistente) ---- */
.cps-tpl-silo .cps-silo-filtertoggle {
	display: none;
}

/* ---- Búsqueda ---- */
.cps-tpl-silo .cps-silo-search {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 1 1 16rem;
	min-width: 12rem;
}

.cps-tpl-silo .cps-silo-search svg {
	position: absolute;
	left: .75rem;
	opacity: .55;
	pointer-events: none;
}

.cps-tpl-silo .cps-silo-search__input {
	width: 100%;
	padding: .3rem .9rem .3rem 2.4rem;
	/*border: 1px solid var(--line, rgba(0, 0, 0, .14));*/
	border-radius: var(--radius, 12px);
	background: var(--white, #fff);
	color: inherit;
	font: inherit;
}

.cps-tpl-silo .cps-silo-search__input:focus-visible {
	/*outline: 2px solid var(--green, #1f9d55);
	outline-offset: 1px;*/
}

.cps-tpl-silo .cps-silo-toolbar__count {
	margin-left: auto;
	font-size: .9rem;
	opacity: .7;
	white-space: nowrap;
}

/* ---- Panel de filtros (ejes secundarios) ---- */
/* En escritorio: SIEMPRE visible bajo la barra. En móvil: drawer (.is-open). */
.cps-tpl-silo .cps-silo-filters {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--line, rgba(0, 0, 0, .12));
	border-radius: var(--radius, 12px);
	/*background: var(--surface, rgba(0, 0, 0, .02));*/
}

.cps-tpl-silo .cps-silo-filters[hidden] {
	display: none;
}

.cps-tpl-silo .cps-silo-filters__group {
	border: 0;
	margin: 0;
	padding: 0;
}

.cps-tpl-silo .cps-silo-filters__legend {
	padding: 0;
	margin-bottom: .5rem;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .65;
}

.cps-tpl-silo .cps-silo-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

/* ---- Chips de faceta (botones, no enlaces) ---- */
.cps-tpl-silo .cps-silo-chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 2px solid var(--line, rgba(0, 0, 0, .16));
	border-radius: 999px;
	background: var(--white, #fff);
	color: inherit;
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cps-tpl-silo .cps-silo-chip:hover {
	border-color: var(--green, #1f9d55);
	border-width: 2px;
	background-color: white ;
}

.cps-tpl-silo .cps-silo-chip[aria-pressed="true"] {
	background: var(--green, #1f9d55);
	border-color: var(--green, #1f9d55);
	color: black;
}

.cps-tpl-silo .cps-silo-chip__n {
	font-size: .75rem;
	opacity: 1;
}

.cps-tpl-silo .cps-silo-chip[aria-pressed="true"] .cps-silo-chip__n {
	opacity: 1;
}

/* Cero ESTRUCTURAL: el valor no existe en el conjunto de trabajo → se oculta. */
.cps-tpl-silo .cps-silo-chip[hidden] {
	display: none;
}

/* Cero COMBINATORIO: existe pero la selección actual lo deja vacío → se inhabilita. */
.cps-tpl-silo .cps-silo-chip[disabled],
.cps-tpl-silo .cps-silo-chip[aria-disabled="true"] {
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none;
}

.cps-tpl-silo .cps-silo-filters__reset {
	align-self: flex-start;
	border: 0;
	background: none;
	color: var(--green, #1f9d55);
	font: inherit;
	font-size: .88rem;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}

.cps-tpl-silo .cps-silo-filters__reset[hidden] {
	display: none;
}

/* ---- Resumen de filtros activos (tokens removibles) ---- */
.cps-tpl-silo .cps-silo-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
}

.cps-tpl-silo .cps-silo-active[hidden] {
	display: none;
}

.cps-tpl-silo .cps-silo-token {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .6rem;
	border: 1px solid var(--green, #1f9d55);
	border-radius: 999px;
	background: var(--green-soft, #fdfce9);
	color: var(--green-dark, #3f3c13);
	font: inherit;
	font-size: .82rem;
	line-height: 1;
	cursor: pointer;
}

.cps-tpl-silo .cps-silo-token__x {
	font-weight: 700;
	opacity: .7;
}

.cps-tpl-silo .cps-silo-token:hover .cps-silo-token__x {
	opacity: 1;
}

.cps-tpl-silo .cps-silo-active__clear {
	border: 0;
	background: none;
	color: var(--green, #1f9d55);
	font: inherit;
	font-size: .82rem;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}

/* ---- Secciones por tipo (el ámbito materializado en el DOM) ---- */
.cps-tpl-silo .cps-silo-section {
	margin: 1.75rem 0 0;
}

.cps-tpl-silo .cps-silo-section[hidden] {
	display: none;
}

.cps-tpl-silo .cps-silo-section__title {
	margin: 0 0 1rem;
	font-size: var(--text-lg, 1.2rem);
	font-weight: 700;
	letter-spacing: -.01em;
}

/* ---- Card: tag de tipo (variantes por doctrina) ---- */
/* Base común a todos los tags de tipo: forma, tamaño y peso del badge. */
.cps-tpl-silo .cps-rcard__tag {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .25rem .6rem;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1;
	/* Color de respaldo neutro si el tipo no tiene variante propia. */
	background: var(--surface-2, rgba(0, 0, 0, .06));
	color: var(--ink, #1a1a1a);
}

/* Máquina — color de marca (el tipo principal/ancla del catálogo).
   Usa el token --green del tema (que en CPS es el amarillo de marca #f4d300);
   sobre fondo claro va con texto oscuro para contraste accesible. */
.cps-tpl-silo .cps-rcard__tag--maquina {
	background: var(--green-18, rgba(244, 211, 0, .18));
	color: var(--green-dark, #3f3c13);
}

/* Consumible — violeta/azul del tema (fungible recurrente). */
.cps-tpl-silo .cps-rcard__tag--consumible {
	background: rgba(99, 102, 241, .12);
	color: var(--blue, #6366f1);
}

.cps-tpl-silo .cps-rcard__tag--repuesto {
	background: var(--amber-12, rgba(180, 120, 0, .12));
	color: var(--amber, #9a6b00);
}

.cps-tpl-silo .cps-rcard__tag--accesorio {
	background: var(--slate-12, rgba(60, 80, 120, .12));
	color: var(--slate, #3c5078);
}

.cps-tpl-silo .cps-rcard__tag--mantenimiento {
	background: var(--teal-12, rgba(0, 130, 130, .12));
	color: var(--teal, #0a6b6b);
}

/* ---- Card: logo de marca ---- */
.cps-tpl-silo .cps-rcard {
	position: relative;
}

.cps-tpl-silo .cps-rcard__brand {
	position: absolute;
	top: 2rem;
	right: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 12rem;
	/*max-height: 1.6rem;*/
	padding: .15rem .3rem;
	border-radius: 6px;
	/*background: var(--white, #fff);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .08);*/
	z-index: 2;
	width: 100%;
}

.cps-tpl-silo .cps-rcard__brand img {
	max-width: 100%;
	max-height: 1.3rem;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* ---- Card oculta por el filtro ---- */
.cps-tpl-silo .cps-silo-card[hidden] {
	display: none;
}

/* ---- PALANCA DE RENDIMIENTO (opcional) ----
 * content-visibility salta el render de las cards fuera de viewport en grids
 * largos. Desactivada por defecto: con grids de altura igualada puede provocar
 * pequeños saltos de scroll al materializar tamaños. Si el silo tiene MUCHAS
 * cards y quieres el ahorro, descomenta:
 *
 * .cps-tpl-silo .cps-silo-card {
 *     content-visibility: auto;
 *     contain-intrinsic-size: auto 320px;
 * }
 */

/* ---- Estado vacío del filtro ---- */
.cps-tpl-silo .cps-silo-empty {
	margin: 2rem 0;
	text-align: center;
	opacity: .7;
}

.cps-tpl-silo .cps-silo-empty[hidden] {
	display: none;
}

/* =============================================================================
 *  RESPONSIVE — móvil: ámbito siempre visible; ejes secundarios en drawer.
 * ========================================================================== */
@media (max-width: 768px) {

	/* La barra deja de ser sticky en móvil (evita conflicto con el drawer). */
	.cps-tpl-silo .cps-silo-bar {
		position: static;
	}

	/* El botón de filtros aparece y abre el panel. */
	.cps-tpl-silo .cps-silo-filtertoggle {
		display: inline-flex;
	}

	/* Panel oculto por defecto; visible solo con .is-open (lo togglea el JS). */
	.cps-tpl-silo .cps-silo-filters {
		display: none;
	}

	.cps-tpl-silo .cps-silo-filters.is-open {
		display: flex;
	}
}