/*
 * catalogo-instalador.css
 * Vista de revisión interna del Precio Instalador (page-catalogo-instalador.php)
 * — NO es el catálogo público. Reutiliza a propósito las clases de tarjeta de
 * producto y de paginación de assets/css/tienda.css (.saes-tarjeta-producto,
 * ul.products, .saes-tienda__paginacion) — tienda.css se encola también en
 * esta plantilla (ver inc/enqueue.php) para no duplicar ese CSS aquí. Este
 * archivo solo aporta lo que es propio de esta vista: el aviso de revisión,
 * el layout de dos columnas y el árbol de filtro por categoría.
 */

.saes-ci { padding-block: var(--espacio-lg) var(--espacio-2xl); }

.saes-ci__header { margin-bottom: var(--espacio-md); }
.saes-ci__kicker {
	display: block;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .75rem;
	font-weight: 600;
	color: var(--color-primario);
	margin-bottom: .4rem;
}

/* Aviso de que esto es una vista de revisión, no el catálogo público */
.saes-ci-aviso {
	display: flex;
	gap: var(--espacio-sm);
	align-items: flex-start;
	background: var(--color-fondo-alterno);
	border-left: 4px solid var(--color-aviso);
	border-radius: var(--radio-sm);
	padding: var(--espacio-sm) var(--espacio-md);
	margin-bottom: var(--espacio-lg);
}
.saes-ci-aviso__icono { font-size: 1.3rem; line-height: 1; }
.saes-ci-aviso p { margin: 0; font-size: .9rem; color: var(--color-texto); }
.saes-ci-aviso strong { color: var(--color-secundario); }

.saes-ci-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--espacio-lg);
	align-items: start;
}

/* ─── Árbol de filtro (Distribuidor > Categoría > Línea) ───
   Mismo árbol de datos que el mega-menú del header (inc/mega-menu.php),
   pero aquí navega ESTA página (?categoria=slug) en vez de saltar a la
   tienda pública. Usa <details>/<summary> nativos: cero JS necesario. */
.saes-ci-filtro {
	background: var(--color-fondo-alterno);
	border-radius: var(--radio-md);
	padding: var(--espacio-md);
}
.saes-ci-filtro h2 {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: var(--espacio-sm);
}
.saes-ci-filtro-lista { list-style: none; margin: 0; padding: 0; }
.saes-ci-filtro-lista .saes-ci-filtro-lista { margin-left: var(--espacio-sm); margin-top: .3rem; }

.saes-ci-filtro-lista > li { margin-bottom: .2rem; }
.saes-ci-filtro-lista summary {
	cursor: pointer;
	list-style: none;
	padding: .3rem 0;
}
.saes-ci-filtro-lista summary::-webkit-details-marker { display: none; }
.saes-ci-filtro-lista summary::before {
	content: '▸';
	display: inline-block;
	width: 1em;
	color: var(--color-texto-suave);
	transition: transform var(--transicion);
}
.saes-ci-filtro-lista details[open] > summary::before { transform: rotate(90deg); }

.saes-ci-filtro-link {
	color: var(--color-texto);
	font-size: .85rem;
	font-weight: 500;
}
.saes-ci-filtro-link:hover { color: var(--color-primario); }
.saes-ci-filtro-link.saes-ci-filtro-activo {
	color: var(--color-acento);
	font-weight: 700;
}
.saes-ci-filtro-lista li > a.saes-ci-filtro-link { display: inline-block; padding: .3rem 0; }

.saes-ci-filtro-limpiar { margin-top: var(--espacio-sm); }

.saes-ci-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--espacio-sm);
	margin-bottom: var(--espacio-md);
	font-size: .85rem;
	color: var(--color-texto-suave);
}

/* ─── Precio en cada tarjeta: reemplaza el precio normal por el Instalador ───
   Reutiliza .saes-price-wrap / .saes-retail-price / .saes-instalador-price /
   .saes-instalador-badge, ya definidas por el plugin
   (plugin-saes-electronica-core/assets/css/saes-public.css) para el mismo
   propósito en la tienda real — así el aspecto es idéntico al que verá un
   instalador aprobado. Solo se agrega aquí el estado "sin precio cargado". */
.saes-ci-sin-precio {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	color: var(--color-aviso);
	background: #fdf3e3;
	border-radius: var(--radio-full);
	padding: .2rem .6rem;
}
.saes-ci-precio-publico {
	display: block;
	font-size: .75rem;
	color: var(--color-texto-suave);
	font-weight: 400;
	margin-top: .15rem;
}
.saes-ci-anomalia {
	display: block;
	font-size: .7rem;
	color: var(--color-aviso);
	margin-top: .15rem;
}

.saes-ci-vacio { text-align: center; padding: var(--espacio-2xl) 0; color: var(--color-texto-suave); }

@media (min-width: 1024px) {
	.saes-ci-layout { grid-template-columns: 240px 1fr; }
}