/*
 * SPCCCyMF — Directorio de miembros
 * Mismas variables que el plugin de cursos, para que ambos se vean igual.
 */

.spc-miembros,
.spc-ficha {
	--spc-rojo: #ce1126;
	--spc-rojo-oscuro: #ae0e20;
	--spc-grafito: #2e2e30;
	--spc-texto: #1c1c1e;
	--spc-texto-medio: #46464a;
	--spc-texto-suave: #5a5a5e;
	--spc-linea: #dcdcdf;
	--spc-fondo: #f4f4f5;
	--spc-tinte: #f3e9ea;
	--spc-blanco: #fff;

	box-sizing: border-box;
	color: var(--spc-texto);
}

.spc-miembros *,
.spc-ficha * {
	box-sizing: inherit;
}

/* --- Filtros --- */

.spc-miembros__filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--spc-linea);
}

.spc-m-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 180px;
}

.spc-m-campo--crece {
	flex: 1 1 260px;
}

.spc-m-campo label {
	color: var(--spc-texto-medio);
	font-size: 13px;
	font-weight: 600;
}

.spc-m-input,
.spc-m-select {
	min-height: 50px;
	padding: 0 14px;
	border: 1px solid #cfcfd3;
	border-radius: 4px;
	background: var(--spc-blanco);
	color: var(--spc-texto);
	font: inherit;
	font-size: 15px;
}

.spc-m-input:focus-visible,
.spc-m-select:focus-visible,
.spc-m-boton:focus-visible {
	outline: 2px solid var(--spc-rojo-oscuro);
	outline-offset: 2px;
}

/* --- Barra de conteo y orden --- */

.spc-miembros__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin: 24px 0 18px;
}

.spc-miembros__conteo {
	margin: 0;
	color: var(--spc-texto-medio);
	font-size: 15px;
}

/* --- Lista --- */

.spc-miembros__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 22px;
}

.spc-miembros__lista.is-cargando {
	opacity: .5;
	pointer-events: none;
}

.spc-miembros__vacio {
	grid-column: 1 / -1;
	margin: 0;
	padding: 48px 24px;
	border: 1px dashed #a8a8ac;
	border-radius: 6px;
	background: var(--spc-fondo);
	color: var(--spc-texto-medio);
	text-align: center;
}

/* --- Tarjeta --- */

.spc-miembro {
	display: flex;
	gap: 18px;
	padding: 24px;
	border: 1px solid var(--spc-linea);
	border-radius: 6px;
	background: var(--spc-blanco);
}

.spc-miembro__retrato {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--spc-fondo);
}

.spc-miembro__retrato img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spc-miembro__inicial {
	color: var(--spc-rojo-oscuro);
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
}

.spc-miembro__datos {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.spc-miembro__nombre {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.spc-miembro__nombre a {
	color: var(--spc-texto);
	text-decoration: none;
}

.spc-miembro__nombre a:hover {
	color: var(--spc-rojo-oscuro);
}

.spc-miembro__condicion {
	margin: 0;
	color: var(--spc-rojo-oscuro);
	font-size: 13px;
	font-weight: 600;
}

.spc-miembro__linea {
	margin: 0;
	color: var(--spc-texto-suave);
	font-size: 14px;
	line-height: 1.5;
}

.spc-miembro__enlace {
	margin-top: 2px;
	color: var(--spc-rojo-oscuro);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.spc-miembro__enlace:hover {
	text-decoration: underline;
}

/* --- Botones y aviso --- */

.spc-m-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 13px 26px;
	border: 1px solid var(--spc-rojo);
	border-radius: 4px;
	background: var(--spc-rojo);
	color: var(--spc-blanco);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.spc-m-boton:hover {
	border-color: var(--spc-rojo-oscuro);
	background: var(--spc-rojo-oscuro);
	color: var(--spc-blanco);
}

.spc-m-boton--linea {
	border-color: #cfcfd3;
	background: transparent;
	color: var(--spc-texto-medio);
}

.spc-m-boton--linea:hover {
	border-color: var(--spc-rojo);
	background: transparent;
	color: var(--spc-rojo-oscuro);
}

.spc-miembros__mas {
	margin-top: 28px;
	text-align: center;
}

.spc-miembros__aviso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 36px;
	padding: 28px;
	border-radius: 6px;
	background: var(--spc-tinte);
}

.spc-miembros__aviso strong {
	display: block;
	margin-bottom: 6px;
	font-size: 18px;
}

.spc-miembros__aviso p {
	max-width: 760px;
	margin: 0;
	color: var(--spc-texto-medio);
	font-size: 15px;
	line-height: 1.6;
}

/* --- Ficha individual --- */

.spc-ficha {
	margin: 32px 0 0;
	border-top: 1px solid var(--spc-linea);
}

.spc-ficha__fila {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--spc-linea);
}

.spc-ficha dt {
	flex: 0 0 220px;
	margin: 0;
	color: var(--spc-texto-suave);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.spc-ficha dd {
	flex: 1 1 auto;
	margin: 0;
	font-size: 16px;
}

/* --- Pantallas angostas --- */

@media (max-width: 860px) {
	.spc-miembros__filtros {
		flex-direction: column;
		align-items: stretch;
	}

	.spc-m-campo {
		min-width: 0;
	}

	.spc-miembros__lista {
		grid-template-columns: 1fr;
	}

	.spc-ficha dt {
		flex-basis: 100%;
	}
}