/*
 * NODO · componentes. Basado en components/nodo-components.css del sistema de diseño (clases nd-*),
 * reescrito móvil primero. Solo usa tokens.
 */

@keyframes nd-spin { to { transform: rotate(360deg); } }

/* ── Botón ─────────────────────────────────────────────────────────── */
.nd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--control-h-md);
	padding: 0 22px;
	border-radius: var(--radius-pill);
	border: 1.5px solid transparent;
	font: var(--fw-semibold) 16px/1.15 var(--font-body);
	letter-spacing: -.005em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nd-btn:hover { text-decoration: none; }
.nd-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.97); }
.nd-btn:focus-visible { box-shadow: var(--focus-ring); }
.nd-btn--sm { min-height: var(--control-h-sm); padding: 0 16px; font-size: 14px; gap: 6px; }
.nd-btn--lg { min-height: var(--control-h-lg); padding: 0 28px; font-size: 17px; gap: 10px; }
.nd-btn--block { display: flex; width: 100%; }

.nd-btn--primary { background: var(--action-primary); color: var(--text-on-accent); }
.nd-btn--primary:hover { background: var(--action-primary-hover); color: var(--text-on-accent); box-shadow: var(--shadow-rosa); }
.nd-btn--primary:active { background: var(--action-primary-press); box-shadow: none; }

.nd-btn--secondary { background: var(--action-secondary); color: var(--text-on-inverse); }
.nd-btn--secondary:hover { background: var(--action-secondary-hover); color: var(--text-on-inverse); }
.nd-btn--secondary:active { background: var(--action-secondary-press); }

.nd-btn--outline { background: transparent; color: var(--text-strong); border-color: var(--border-input); }
.nd-btn--outline:hover { background: var(--action-tint-hover); border-color: var(--nodo-tinta); color: var(--text-strong); }
.nd-btn--outline:active { background: var(--action-tint-press); }

.nd-btn--ghost { background: transparent; color: var(--text-strong); }
.nd-btn--ghost:hover { background: var(--action-tint-hover); color: var(--text-strong); }

.nd-btn--inverse { background: var(--neutral-0); color: var(--nodo-tinta); }
.nd-btn--inverse:hover { background: var(--rosa-50); color: var(--nodo-tinta); }

/* Deshabilitado (botones reales o enlaces con aria-disabled) */
.nd-btn:disabled,
.nd-btn[aria-disabled="true"] {
	background: var(--neutral-100);
	color: var(--neutral-600); /* 5.4:1 sobre neutral-100: legible aunque esté inactivo */
	border-color: transparent;
	box-shadow: none;
	cursor: not-allowed;
}

/* Cargando: el texto queda, se suma un spinner y el botón no responde a más clics. */
.nd-btn.is-cargando { cursor: progress; pointer-events: none; }
.nd-btn.is-cargando::after {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	animation: nd-spin .7s linear infinite;
	flex: none;
}
@media (prefers-reduced-motion: reduce) {
	.nd-btn.is-cargando::after { animation: none; border-right-color: currentColor; opacity: .6; }
}

/* ── Botón de ícono ────────────────────────────────────────────────── */
.nd-iconbtn {
	display: inline-grid;
	place-items: center;
	width: var(--control-h-md);
	height: var(--control-h-md);
	padding: 0;
	border-radius: var(--radius-pill);
	border: 1.5px solid transparent;
	background: transparent;
	color: var(--text-strong);
	cursor: pointer;
	transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nd-iconbtn:hover { background: var(--action-tint-hover); }
.nd-iconbtn:active { transform: scale(.92); }
.nd-iconbtn[aria-expanded="true"] { background: var(--rosa-50); color: var(--rosa-600); }

/* ── Badge (estado del proyecto) ───────────────────────────────────── */
.nd-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	font: var(--fw-semibold) 12px/1.2 var(--font-body);
	white-space: nowrap;
}
.nd-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.nd-badge--neutral { background: var(--neutral-100); color: var(--neutral-700); }
.nd-badge--rosa { background: var(--rosa-50); color: var(--rosa-700); }
.nd-badge--coral { background: var(--coral-100); color: var(--coral-800); }
.nd-badge--indigo { background: var(--indigo-100); color: var(--indigo-700); }

/* ── Etiqueta (aportes buscados, filtros activos) ──────────────────── */
.nd-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 30px;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-default);
	background: var(--neutral-0);
	color: var(--text-body);
	font: var(--fw-medium) 13px/1.3 var(--font-body);
}
.nd-tag--soft { background: var(--surface-sunken); border-color: transparent; }

/* ── Chip de filtro ────────────────────────────────────────────────── */
.nd-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px; /* objetivo táctil */
	padding: 0 16px;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--border-input);
	background: var(--neutral-0);
	color: var(--text-body);
	font: var(--fw-semibold) 14px/1.2 var(--font-body);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base), color var(--dur-base), transform var(--dur-fast);
}
.nd-chip:hover { border-color: var(--nodo-tinta); color: var(--text-strong); }
.nd-chip:active { transform: scale(.96); }
.nd-chip[aria-pressed="true"],
.nd-chip[aria-current="true"] { background: var(--nodo-tinta); border-color: var(--nodo-tinta); color: var(--neutral-0); }

/* ── Eyebrow ───────────────────────────────────────────────────────── */
.nodo-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font: var(--fw-bold) 13px/1.2 var(--font-body);
	letter-spacing: var(--ls-overline);
	text-transform: uppercase;
	color: var(--rosa-700);
}
.nodo-eyebrow--oscuro { color: var(--rosa-300); }
.nodo-eyebrow__puntos { display: flex; gap: 5px; }
.nodo-eyebrow__puntos span { width: 8px; height: 8px; border-radius: 50%; }
.nodo-eyebrow__puntos span:nth-child(1) { background: var(--nodo-rosa); }
.nodo-eyebrow__puntos span:nth-child(2) { background: var(--nodo-indigo); }
.nodo-eyebrow__puntos span:nth-child(3) { background: var(--nodo-coral); }
.nodo-eyebrow--oscuro .nodo-eyebrow__puntos span:nth-child(2) { background: var(--neutral-0); }

/* ── Tarjeta de proyecto ───────────────────────────────────────────── */
/* Toda la tarjeta es clicable a través del enlace del título; «Conocer el proyecto» es su señal visual. */
.nd-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow);
}
.nd-pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-subtle); }
.nd-pcard:focus-within { box-shadow: var(--focus-ring); }
.nd-pcard__media { aspect-ratio: 16 / 9; background: var(--surface-sunken); overflow: hidden; }
.nd-pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.nd-pcard__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 0; flex: 1; }
.nd-pcard__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.nd-pcard__theme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: var(--fw-bold) 12px/1.3 var(--font-body);
	letter-spacing: var(--ls-overline);
	text-transform: uppercase;
	color: var(--rosa-600);
}
.nd-pcard__theme::before {
	content: "";
	width: 8px;
	height: 8px;
	margin: 0 6px;
	border-radius: 50%;
	background: var(--nodo-indigo);
	box-shadow: -5px 0 0 -1px var(--nodo-rosa), 5px 0 0 -1px var(--nodo-coral);
	flex: none;
}
.nd-pcard__loc { display: inline-flex; align-items: center; gap: 4px; font: var(--fw-medium) 13px/1.3 var(--font-body); color: var(--text-subtle); }
.nd-pcard__title { margin: 0; font: var(--fw-bold) 19px/1.18 var(--font-display); letter-spacing: -.02em; color: var(--text-strong); text-wrap: balance; }
.nd-pcard__title a { color: inherit; text-decoration: none; }
.nd-pcard__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.nd-pcard__title a:focus-visible { box-shadow: none; } /* el anillo lo dibuja la tarjeta (:focus-within) */
.nd-pcard__sum {
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.nd-pcard__seeks { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.nd-pcard__seeks-lbl { font: var(--fw-semibold) 13px/1.2 var(--font-body); color: var(--text-strong); }
.nd-pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nd-pcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 16px; }
/* «Conocer el proyecto»: señal visual (el clic lo recibe el enlace del título, que cubre la tarjeta).
   Móvil: con contorno. Desde 720 px: principal. Igual que el ProjectCard del sistema de diseño. */
.nd-pcard__cta { pointer-events: none; margin-left: auto; background: transparent; color: var(--text-strong); border-color: var(--border-input); }
.nd-pcard:hover .nd-pcard__cta { background: var(--action-tint-hover); border-color: var(--nodo-tinta); }
.nd-pcard__etapa { margin: 0; }
.nd-pcard__sumadas { display: flex; align-items: center; gap: 6px; margin: 0; font: var(--fw-medium) 13px/1.3 var(--font-body); color: var(--text-subtle); }
.nd-pcard__sumadas .nd-icon { flex: none; }

/* Aportes: 2 visibles en móvil y 4 desde 720 px; el resto queda solo para lectores de pantalla. */
.nd-tag--extra-2,
.nd-tag--extra-4 { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nd-tag--mas-4 { display: none; }
.nd-pcard__media { display: none; }

@media (min-width: 720px) {
	.nd-pcard__cta { background: var(--action-primary); color: var(--text-on-accent); border-color: transparent; }
	.nd-pcard:hover .nd-pcard__cta { background: var(--action-primary-hover); border-color: transparent; }
	.nd-tag--extra-2 { position: static !important; width: auto; height: auto; margin: 0; padding: 4px 12px; overflow: visible; clip: auto; white-space: normal; border: 1px solid transparent; }
	.nd-tag--mas-2 { display: none; }
	.nd-tag--mas-4 { display: inline-flex; }
	.nd-pcard__media { display: block; }
	.nd-pcard { border-radius: var(--radius-lg); }
	.nd-pcard__body { gap: 12px; padding: 24px 24px 0; }
	.nd-pcard__title { font-size: 24px; }
	.nd-pcard__foot { padding: 20px 24px 24px; margin-top: 4px; }
}

/* Grilla de tarjetas */
.nodo-grilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: clamp(12px, 2vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.nodo-grilla > li { display: flex; min-width: 0; }
.nodo-grilla > li > * { flex: 1; }