/* ==========================================================================
 * Comunidad (capa social de Mi Indiferentes, fase 1) — piezas compartidas
 * por perfil, feed, directorio, comentarios y los botones "Tu plan" de la
 * agenda. Acentos de la referencia visual aprobada (rosa, amarillo, verde
 * "Voy") sobre la paleta de marca (carbón, crema, turquesa).
 * ========================================================================== */

:root {
	--comunidad-rosa: #e2336b;
	--comunidad-amarillo: #f2c230;
	--comunidad-azul: #2a64c9;
	--comunidad-papel: #ffffff;
	--comunidad-linea: #e6e1d6;
	--comunidad-gris: #6b675f;
	--comunidad-chip: #ece8df;
	--comunidad-voy-fondo: #d8f1e2;
	--comunidad-voy-texto: #17693c;
	--comunidad-interesa-fondo: #fcefc7;
	--comunidad-interesa-texto: #8a5a00;
	--comunidad-radio: 6px;
}

.comunidad-icono {
	flex: none;
	vertical-align: -0.2em;
}

/* Avatar: foto propia o inicial sobre papel de color (nunca Gravatar). */
.comunidad-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--indf-negro);
}

.comunidad-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.comunidad-avatar--reserva span {
	font-family: var(--fuente-display);
	font-size: 1.15em;
	line-height: 1;
	transform: rotate(-6deg);
	text-transform: uppercase;
}

.comunidad-avatar--tono-0 { background: var(--indf-negro); color: var(--indf-crema); }
.comunidad-avatar--tono-1 { background: var(--indf-turquesa); color: var(--indf-negro); }
.comunidad-avatar--tono-2 { background: var(--comunidad-rosa); color: #fff; }
.comunidad-avatar--tono-3 { background: var(--comunidad-amarillo); color: var(--indf-negro); }

.comunidad-avatar--pequeno { width: 44px; height: 44px; font-size: 20px; }
.comunidad-avatar--mediano { width: 72px; height: 72px; font-size: 32px; }
.comunidad-avatar--cuadrado { width: 100%; height: 100%; border-radius: 0; font-size: 40px; }

/* Chips de género / procedencia. */
.comunidad-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.comunidad-chips li {
	background: var(--comunidad-chip);
	color: var(--indf-negro);
	font-family: var(--fuente-ui);
	font-size: 13px;
	line-height: 1;
	padding: 7px 12px;
	border-radius: 999px;
}

.comunidad-chips--centro {
	justify-content: center;
}

/* Botones propios de Comunidad: sans legible, sin mayúsculas forzadas
   (formularios y acciones, CLAUDE.md §10). */
.comunidad-boton,
.comunidad-seguir {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	font-family: var(--fuente-ui);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	border: 1.5px solid var(--indf-negro);
	border-radius: var(--comunidad-radio);
	background: var(--comunidad-papel);
	color: var(--indf-negro);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.comunidad-boton:hover,
.comunidad-seguir:hover {
	transform: translateY(-1px);
}

.comunidad-boton:focus-visible,
.comunidad-seguir:focus-visible,
.comunidad-plan__boton:focus-visible {
	outline: 3px solid var(--comunidad-amarillo);
	outline-offset: 2px;
}

.comunidad-boton--negro,
.comunidad-seguir {
	background: var(--indf-negro);
	color: #fff;
}

.comunidad-boton--claro {
	background: var(--comunidad-papel);
}

.comunidad-boton--icono {
	width: 48px;
	padding: 0;
}

.comunidad-seguir.is-activo {
	background: var(--comunidad-papel);
	color: var(--indf-negro);
}

.comunidad-seguir--compacto {
	min-height: 38px;
	padding: 7px 14px;
	font-size: 14px;
}

.comunidad-seguir[disabled],
.comunidad-boton[disabled] {
	opacity: 0.65;
	cursor: progress;
}

/* Estado del DUEÑO de un perfil sobre un concierto. */
.comunidad-chip-estado {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--fuente-ui);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	padding: 8px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

.comunidad-chip-estado--voy { background: var(--comunidad-voy-fondo); color: var(--comunidad-voy-texto); }
.comunidad-chip-estado--interesa { background: var(--comunidad-interesa-fondo); color: var(--comunidad-interesa-texto); border: 1px solid #f1d98c; }
.comunidad-chip-estado--estuvo { background: var(--comunidad-chip); color: var(--indf-negro); }

/* "Tu plan": botones del VISITANTE sobre un concierto (agenda, perfil,
   Comunidad). Mismo contrato data-indf-event-* que la ficha de evento. */
.comunidad-plan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
}

.comunidad-plan__etiqueta {
	font-family: var(--fuente-ui);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--comunidad-gris);
	margin-right: 2px;
}

.comunidad-plan__boton {
	min-height: 34px;
	padding: 6px 12px;
	font-family: var(--fuente-ui);
	font-size: 13px;
	font-weight: 700;
	border: 1.5px solid var(--indf-negro);
	border-radius: 999px;
	background: transparent;
	color: var(--indf-negro);
	cursor: pointer;
}

.comunidad-plan__boton.is-activo[data-indf-event-btn="going"] {
	background: var(--comunidad-voy-fondo);
	border-color: var(--comunidad-voy-texto);
	color: var(--comunidad-voy-texto);
}

.comunidad-plan__boton.is-activo[data-indf-event-btn="interested"] {
	background: var(--comunidad-interesa-fondo);
	border-color: var(--comunidad-interesa-texto);
	color: var(--comunidad-interesa-texto);
}

.comunidad-plan__boton.is-activo[data-indf-event-btn="attended"] {
	background: var(--indf-negro);
	color: #fff;
}

.comunidad-plan__boton.is-activo::before {
	content: '✓ ';
}

/* community-follow.css ya añade " ✓" detrás a cualquier botón activo:
   aquí solo se deja la marca de delante. */
.comunidad-plan__boton.is-activo::after {
	content: none;
}

.comunidad-plan__boton[disabled] {
	opacity: 0.6;
}

.comunidad-feedback {
	margin: 8px 0 0;
	font-size: 14px;
}

.comunidad-feedback:empty {
	margin: 0;
}

.comunidad-paginacion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 24px 0 8px;
	font-family: var(--fuente-ui);
	font-size: 14px;
}

.comunidad-vacio {
	padding: 28px 24px;
	background: var(--comunidad-papel);
	border: 1.5px dashed var(--comunidad-linea);
	border-radius: var(--comunidad-radio);
	text-align: center;
}

.comunidad-vacio p {
	margin: 0 0 14px;
}

.comunidad-vacio p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.comunidad-boton,
	.comunidad-seguir {
		transition: none;
	}

	.comunidad-boton:hover,
	.comunidad-seguir:hover {
		transform: none;
	}
}