/* NODO · listado de proyectos: buscador, filtros, cantidad, resultados y paginación. Móvil primero. */

.nodo-listado__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 28px;
	padding: 20px;
	border-radius: var(--radius-lg);
	background: var(--surface-sunken);
}

.nodo-listado__busqueda-fila { display: flex; flex-direction: column; gap: 10px; }
.nodo-listado__busqueda input[type="search"] {
	width: 100%;
	min-height: var(--control-h-field);
	padding: 0 14px;
	border: 1.5px solid var(--border-input);
	border-radius: var(--radius-md);
	background: var(--neutral-0);
	color: var(--text-strong);
	font: var(--fw-regular) 16px/1.4 var(--font-body);
	-webkit-appearance: none;
	appearance: none;
}
.nodo-listado__busqueda input[type="search"]::placeholder { color: var(--neutral-600); }
.nodo-listado__busqueda input[type="search"]:hover { border-color: var(--nodo-tinta); }
.nodo-listado__busqueda input[type="search"]:focus { outline: none; border-color: var(--rosa-500); box-shadow: var(--focus-ring); }
.nodo-listado__buscar { min-height: var(--control-h-field); }

.nodo-listado__filtros { display: grid; grid-template-columns: 1fr; gap: 14px; }

/* Filtros plegables (móvil). En escritorio el <summary> se oculta y los filtros se ven siempre. */
.nodo-listado__plegable { min-width: 0; }
.nodo-listado__resumen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: var(--control-h-field);
	padding: 0 16px;
	border: 1.5px solid var(--border-input);
	border-radius: var(--radius-md);
	background: var(--neutral-0);
	color: var(--text-strong);
	font: var(--fw-semibold) 16px/1.2 var(--font-body);
	cursor: pointer;
	list-style: none;
}
.nodo-listado__resumen::-webkit-details-marker { display: none; }
.nodo-listado__resumen::after {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--dur-base) var(--ease-out);
}
.nodo-listado__plegable[open] > .nodo-listado__resumen::after { transform: rotate(180deg); }
.nodo-listado__resumen:hover { border-color: var(--nodo-tinta); }
.nodo-listado__resumen:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nodo-listado__plegable[open] > .nodo-listado__resumen { margin-bottom: 14px; }

@media (min-width: 720px) {
	.nodo-listado__form { padding: 24px; }
	.nodo-listado__busqueda-fila { flex-direction: row; }
	.nodo-listado__buscar { flex: none; }
	.nodo-listado__filtros { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
	.nodo-listado__resumen { display: none; }
}

/* Cantidad y «Limpiar filtros» */
.nodo-listado__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	margin-bottom: 20px;
}
.nodo-listado__cantidad { font: var(--fw-semibold) 16px/1.4 var(--font-body); color: var(--text-strong); }
.nodo-listado__cantidad--vacio { max-width: 640px; font-weight: var(--fw-regular); font-size: var(--text-lead); color: var(--text-muted); }
.nodo-listado__limpiar {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: var(--fw-semibold);
}

/* Resultados */
.nodo-listado__resultados { transition: opacity var(--dur-base) var(--ease-out); }
.nodo-listado__resultados[aria-busy="true"] { opacity: .55; }
.nodo-listado__vacio { margin-top: 4px; }

/* Paginación */
.nodo-paginacion { margin-top: clamp(32px, 5vw, 48px); }
.nodo-paginacion ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nodo-paginacion a,
.nodo-paginacion .current,
.nodo-paginacion .dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: var(--radius-pill);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}
.nodo-paginacion a { border: 1.5px solid var(--border-input); color: var(--text-strong); background: var(--neutral-0); }
.nodo-paginacion a:hover { background: var(--action-tint-hover); border-color: var(--nodo-tinta); }
.nodo-paginacion .current { background: var(--nodo-tinta); color: var(--neutral-0); }