/* SocialPulse */

:root {
	--sp-border: rgba(128, 128, 128, 0.3);
	--sp-like: #ff3040;
	--sp-accent: #0095f6;
	--sp-feed-max: 640px;
	--sp-radius: 8px;
}

/* ---------- Barra social ---------- */

.sp-social {
	margin: 1.5rem 0 0;
	font-size: 0.95rem;
	line-height: 1.4;
}

.sp-actions {
	display: flex;
	gap: 0.25rem;
	margin-left: -0.6rem;
}

.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: opacity 0.15s;
}

.sp-btn:hover { opacity: 0.6; }

.sp-btn:focus-visible,
.sp-link:focus-visible,
.sp-form__submit:focus-visible {
	outline: 2px solid var(--sp-accent);
	outline-offset: 2px;
}

.sp-btn svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
}

.sp-btn--like.is-liked svg {
	fill: var(--sp-like);
	stroke: var(--sp-like);
}

.sp-btn.is-popping svg { animation: sp-pop 0.35s ease; }

@keyframes sp-pop {
	40% { transform: scale(1.25); }
}

.sp-likes { margin: 0.25rem 0 0.5rem; }

.sp-link {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	opacity: 0.65;
	cursor: pointer;
}

/* ---------- Comentarios ---------- */

.sp-comments__list {
	margin: 0.25rem 0;
	padding: 0;
	list-style: none;
}

.sp-comment {
	margin: 0.2rem 0;
	overflow-wrap: anywhere;
}

.sp-comment.is-pending { opacity: 0.6; }

.sp-form {
	margin-top: 0.5rem;
	padding-top: 0.25rem;
	border-top: 1px solid var(--sp-border);
}

.sp-form__guest {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.sp-form__guest[hidden] { display: none; }

.sp-form__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sp-form input {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	box-shadow: none;
}

.sp-form input:focus {
	outline: none;
	border-bottom-color: var(--sp-border);
}

.sp-form__submit {
	padding: 0.6rem 0;
	border: 0;
	background: none;
	color: var(--sp-accent);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.sp-form__submit:disabled { opacity: 0.4; cursor: default; }

.sp-form__msg {
	margin: 0.25rem 0 0;
	font-size: 0.85em;
	opacity: 0.75;
}

.sp-form__msg:empty { display: none; }

/* ---------- Feed ---------- */

/* Columna del single: post objetivo + feed. */
.sp-single {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--sp-feed-max) + 32px);
	margin: 2rem auto;
	padding: 0 16px;
}

.sp-card--target .sp-card__title { font-size: 1.5rem; }

.sp-card {
	margin: 0 0 2rem;
	overflow: hidden;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius);
}

.sp-card__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
}

.sp-card__avatar { border-radius: 50%; }

.sp-card__meta {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.sp-card__author {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.sp-card__meta time { font-size: 0.8em; opacity: 0.65; }

.sp-card__media {
	position: relative;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}

.sp-card__media img {
	display: block;
	width: 100%;
	height: auto;
}

.sp-card__body { padding: 1rem 1rem 0; }

.sp-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.sp-card__title a {
	color: inherit;
	text-decoration: none;
}

.sp-card__content > :first-child { margin-top: 0; }

.sp-card__content img,
.sp-card__content video,
.sp-card__content iframe { max-width: 100%; }

.sp-card__content img { height: auto; }

/* Tarjeta vaciada por la virtualización: solo conserva su altura. */
.sp-card.is-unmounted {
	visibility: hidden;
	contain: strict;
}

.sp-card .sp-social {
	margin: 0;
	padding: 0.25rem 1rem 1rem;
}

.sp-burst {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.sp-burst svg {
	width: 96px;
	height: 96px;
	fill: #fff;
	stroke: none;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
	animation: sp-burst 0.8s ease forwards;
}

@keyframes sp-burst {
	0% { transform: scale(0); opacity: 0; }
	15% { transform: scale(1.2); opacity: 0.95; }
	30% { transform: scale(0.95); }
	45%, 80% { transform: scale(1); opacity: 0.95; }
	100% { transform: scale(1); opacity: 0; }
}

/* Fin de vuelta */
.sp-loop {
	margin: 0 0 2rem;
	padding: 1.5rem 1rem;
	border-top: 1px solid var(--sp-border);
	border-bottom: 1px solid var(--sp-border);
	text-align: center;
}

.sp-loop__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 2px solid #d62976;
	border-radius: 50%;
	color: #d62976;
}

.sp-loop__icon svg { width: 28px; height: 28px; stroke-width: 2.2; }
.sp-loop__title { margin: 0.5rem 0 0.25rem; font-weight: 600; }
.sp-loop__text { margin: 0; font-size: 0.9em; opacity: 0.65; }

.sp-feed__sentinel { height: 1px; }

.sp-feed__status {
	padding: 1rem;
	font-size: 0.9em;
	text-align: center;
	opacity: 0.7;
}

.sp-feed__status:empty { display: none; }

.sp-feed.is-loading .sp-feed__status::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto 0.5rem;
	border: 2px solid var(--sp-border);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: sp-spin 0.8s linear infinite;
}

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

/* ---------- Diálogos (compartir, iniciar sesión) ---------- */

.sp-dialog {
	width: min(92vw, 360px);
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #fff;
	color: #111;
}

.sp-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }

.sp-dialog__inner {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.sp-dialog__title {
	margin: 0;
	padding: 1rem 1rem 0.5rem;
	font-weight: 600;
	text-align: center;
}

.sp-dialog__body {
	display: flex;
	flex-direction: column;
	border-top: 1px solid #e5e5e5;
}

.sp-dialog__title + .sp-dialog__body { margin-top: 0.5rem; }

.sp-dialog__text {
	margin: 0;
	padding: 1rem 1.25rem;
	font-size: 0.9em;
	text-align: center;
	opacity: 0.7;
}

.sp-dialog__item {
	display: block;
	padding: 0.85rem 1rem;
	border: 0;
	border-top: 1px solid #e5e5e5;
	background: none;
	color: inherit;
	font: inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.sp-dialog__body > .sp-dialog__item:first-child { border-top: 0; }
.sp-dialog__item--primary { color: var(--sp-accent); font-weight: 600; }
.sp-dialog__close { opacity: 0.7; }

@media (prefers-color-scheme: dark) {
	.sp-dialog { background: #262626; color: #f5f5f5; }
	.sp-dialog__body,
	.sp-dialog__item { border-color: #363636; }
}

/* ---------- Toast ---------- */

.sp-toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	z-index: 100000;
	max-width: calc(100vw - 2rem);
	padding: 0.6rem 1rem;
	border-radius: 8px;
	background: #262626;
	color: #fff;
	font-size: 0.9rem;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 1rem);
	transition: opacity 0.2s, transform 0.2s;
}

.sp-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.sp-btn.is-popping svg,
	.sp-burst svg,
	.sp-feed.is-loading .sp-feed__status::before { animation-duration: 0.01ms; }
}