/* =============================================================================
 *  single-product-silo-recambios.css
 *  Capa de la vista "Recambios y Servicio Técnico" (jerarquía inversa) · CPS
 * -----------------------------------------------------------------------------
 *  Aditivo. Se asienta sobre single-product-silo.css (tokens + .cps-rcard +
 *  .cps-btn), cargado por el encolado general del silo. Aquí SOLO añadimos lo
 *  propio de la interfaz anidada: barra de filtros (marca + modelo + búsqueda),
 *  secciones por marca y el acordeón Máquina → Repuestos.
 *
 *  REGLAS DE LA CASA:
 *   · Prohibido !important. Conflictos por ESPECIFICIDAD (todo cuelga de
 *     .cps-recambios, que vive en el MISMO nodo que .cps-tpl-silo, de modo que
 *     hereda las variables --cps-* del tema).
 *   · Metodología BEM. Prefijo cps-.
 * ========================================================================== */

/* --------------------------------------------------------------------------
   Intro de sección
   -------------------------------------------------------------------------- */
.cps-recambios .cps-recambios__lead {
	font-size: var(--text-base);
	color: var(--ink-3);
	line-height: 1.65;
	max-width: 760px;
	margin: 8px 0 0;
}

.cps-recambios .cps-recambios__app {
	margin-top: 28px;
}

/* ==========================================================================
   BARRA DE FILTROS (persistente)
   ========================================================================== */
.cps-recambios .cps-recambios__toolbar {
	margin: 0 0 28px;
}

.cps-recambios .cps-recambios__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	position: sticky;
	top: var(--cps-sticky-top, 1rem);
	z-index: 20;
	padding: .65rem 0;
}

/* ---- Marca: segmented control / radiogroup (elección única) ---- */
.cps-recambios .cps-recambios__brands {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem;
	padding: .3rem;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--tint-2);
	transition: opacity .15s ease;
}

.cps-recambios .cps-recambios__brandbtn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .9rem;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--ink-2);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.cps-recambios .cps-recambios__brandbtn:hover {
	background: var(--white);
	color: var(--ink);
}

.cps-recambios .cps-recambios__brandbtn:focus-visible {
	outline: 2px solid var(--green-deep);
	outline-offset: 1px;
}

.cps-recambios .cps-recambios__brandbtn.is-active {
	background: var(--green);
	color: var(--ink);
}

.cps-recambios .cps-recambios__brandbtn-n {
	font-size: var(--text-2xs);
	font-weight: 700;
	color: var(--muted);
	background: var(--white);
	border-radius: var(--r-pill);
	padding: 1px 7px;
}

.cps-recambios .cps-recambios__brandbtn.is-active .cps-recambios__brandbtn-n {
	color: var(--green-dark);
	background: rgba(255, 255, 255, .5);
}

/* Atenuación de marca cuando hay búsqueda activa (estado "trasciende ámbito"). */
.cps-recambios .cps-recambios__brands.is-disabled {
	opacity: .45;
	pointer-events: none;
}

/* ---- Modelo: <select> nativo estilizado ---- */
.cps-recambios .cps-recambios__model {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 220px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	padding: 0 8px 0 16px;
	transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.cps-recambios .cps-recambios__model:focus-within {
	border-color: var(--green);
	box-shadow: 0 0 0 4px var(--green-18);
}

.cps-recambios .cps-recambios__model.is-disabled {
	opacity: .45;
}

.cps-recambios .cps-recambios__model svg {
	color: var(--muted);
	flex: none;
}

.cps-recambios .cps-recambios__select {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--ink);
	padding: 12px 24px 12px 0;
	cursor: pointer;
	/* Caret propio (sin depender del nativo, que varía por SO). */
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2373706a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
}

/* ---- Búsqueda ---- */
.cps-recambios .cps-recambios__search {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 220px;
	min-width: 190px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	padding: 0 16px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.cps-recambios .cps-recambios__search:focus-within {
	border-color: var(--green);
	box-shadow: 0 0 0 4px var(--green-18);
}

.cps-recambios .cps-recambios__search svg {
	color: var(--muted);
	flex: none;
}

.cps-recambios .cps-recambios__search-input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: var(--text-sm);
	color: var(--ink);
	padding: 12px 0;
}

/* ---- Contador + reset ---- */
.cps-recambios .cps-recambios__count {
	margin-left: auto;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
}

.cps-recambios .cps-recambios__reset {
	background: none;
	border: 0;
	color: var(--green-deep);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 700;
	cursor: pointer;
	padding: 4px 0;
}

.cps-recambios .cps-recambios__reset:hover {
	color: var(--ink);
}

.cps-recambios .cps-recambios__reset[hidden] {
	display: none;
}

/* ==========================================================================
   SECCIÓN POR MARCA (H2)
   ========================================================================== */
.cps-recambios .cps-recambios__brand {
	margin: 0 0 40px;
}

.cps-recambios .cps-recambios__brand[hidden] {
	display: none;
}

.cps-recambios .cps-recambios__brandhead {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 0 16px;
	margin: 0 0 20px;
	border-bottom: 1px solid var(--line);
}

.cps-recambios .cps-recambios__brandlogo {
	flex: none;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 8px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.cps-recambios .cps-recambios__brandlogo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.cps-recambios .cps-recambios__brandname {
	font-size: var(--text-2xl);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--ink);
	margin: 0;
}

.cps-recambios .cps-recambios__brandcount {
	margin-left: auto;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
}

/* ==========================================================================
   MÁQUINA (H3, acordeón)
   ========================================================================== */
.cps-recambios .cps-recambios__machines {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cps-recambios .cps-recambios__machine {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.cps-recambios .cps-recambios__machine[hidden] {
	display: none;
}

.cps-recambios .cps-recambios__machine.is-open {
	border-color: var(--green-25);
	box-shadow: var(--sh-2);
}

/* H3 sin estilos de bloque: el botón interior es la superficie clicable. */
.cps-recambios .cps-recambios__mtitle {
	margin: 0;
	font: inherit;
}

.cps-recambios .cps-recambios__mtoggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color .15s ease;
}

.cps-recambios .cps-recambios__mtoggle:hover {
	background: var(--tint);
}

.cps-recambios .cps-recambios__mtoggle:focus-visible {
	outline: 2px solid var(--green-deep);
	outline-offset: -2px;
}

.cps-recambios .cps-recambios__mthumb {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	background: var(--tint-2);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.cps-recambios .cps-recambios__mthumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cps-recambios .cps-recambios__mthumb:empty {
	display: none;
}

.cps-recambios .cps-recambios__minfo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cps-recambios .cps-recambios__mname {
	font-size: var(--text-md);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--ink);
}

.cps-recambios .cps-recambios__mmeta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: var(--text-xs);
	color: var(--muted);
}

.cps-recambios .cps-recambios__mserie {
	font-weight: 700;
	color: var(--green-deep);
	background: var(--green-08);
	border-radius: var(--r-pill);
	padding: 2px 10px;
}

.cps-recambios .cps-recambios__mn {
	font-weight: 600;
}

/* Chevron: a la derecha; rota al abrir. */
.cps-recambios .cps-recambios__chevron {
	flex: none;
	margin-left: auto;
	color: var(--muted);
	transition: transform .25s var(--ease), color .15s ease;
}

.cps-recambios .cps-recambios__machine.is-open .cps-recambios__chevron {
	transform: rotate(180deg);
	color: var(--green-deep);
}

/* ---- Panel de repuestos ---- */
.cps-recambios .cps-recambios__panel {
	padding: 4px 20px 24px;
	border-top: 1px solid var(--line);
}

.cps-recambios .cps-recambios__panel[hidden] {
	display: none;
}

/* Grid de repuestos: reusa .cps-rel-grid (3→2→1 responsive), un punto más denso. */
.cps-recambios .cps-recambios__grid {
	margin-top: 20px;
}

/* La tarjeta de repuesto reutiliza .cps-rcard. Aquí solo matices de densidad. */
.cps-recambios .cps-recambios__spare {
	min-height: 320px;
	padding: 24px 20px 20px;
}

.cps-recambios .cps-recambios__spare[hidden] {
	display: none;
}

.cps-recambios .cps-recambios__sku {
	font-size: var(--text-xs);
	color: var(--muted);
	margin: 0 0 12px;
}

.cps-recambios .cps-recambios__sku span {
	font-weight: 700;
	color: var(--ink-3);
}

/* ==========================================================================
   ESTADO VACÍO
   ========================================================================== */
.cps-recambios .cps-recambios__empty {
	text-align: center;
	color: var(--muted);
	font-size: var(--text-base);
	padding: 48px 0;
}

.cps-recambios .cps-recambios__empty[hidden] {
	display: none;
}

/* ==========================================================================
   CTA DE SOPORTE TÉCNICO
   ========================================================================== */
.cps-recambios .cps-recambios__support {
	display: grid;
	grid-template-columns: 1.4fr .6fr;
	gap: 32px;
	align-items: center;
	background: linear-gradient(160deg, #141310 0%, #080806 100%);
	border-radius: var(--r-xl);
	padding: 48px 56px;
	color: var(--white);
}

.cps-recambios .cps-recambios__support .cps-eyebrow {
	color: var(--green-light);
	border-color: var(--green-25);
	background: var(--green-10);
}

.cps-recambios .cps-recambios__support .cps-h-section {
	color: var(--white);
	margin-top: 14px;
}

.cps-recambios .cps-recambios__support .cps-sec__sub {
	color: rgba(255, 255, 255, .82);
	margin: 0;
}

.cps-recambios .cps-recambios__support-cta {
	justify-self: end;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
	.cps-recambios .cps-recambios__support {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 36px 28px;
	}
	.cps-recambios .cps-recambios__support-cta {
		justify-self: start;
	}
}

@media (max-width: 768px) {
	/* En móvil la barra deja de ser sticky para no comerse el viewport. */
	.cps-recambios .cps-recambios__bar {
		position: static;
		align-items: stretch;
		flex-direction: column;
	}
	.cps-recambios .cps-recambios__brands {
		overflow-x: auto;
		flex-wrap: nowrap;
		justify-content: flex-start;
		-webkit-overflow-scrolling: touch;
	}
	.cps-recambios .cps-recambios__model,
	.cps-recambios .cps-recambios__search {
		min-width: 0;
		width: 100%;
	}
	.cps-recambios .cps-recambios__count {
		margin-left: 0;
	}
	.cps-recambios .cps-recambios__brandhead {
		flex-wrap: wrap;
	}
	.cps-recambios .cps-recambios__brandcount {
		margin-left: 0;
		flex-basis: 100%;
	}
	.cps-recambios .cps-recambios__mtoggle {
		gap: 12px;
		padding: 14px 16px;
	}
	.cps-recambios .cps-recambios__mthumb {
		width: 44px;
		height: 44px;
	}
	.cps-recambios .cps-recambios__panel {
		padding: 4px 14px 18px;
	}
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.cps-recambios .cps-recambios__chevron,
	.cps-recambios .cps-recambios__machine,
	.cps-recambios .cps-recambios__mtoggle,
	.cps-recambios .cps-recambios__brandbtn {
		transition: none;
	}
}