/* =============================================================================
 * UBICACIÓN:		/assets/css/pages/04-feed.css
 * ARCHIVO:			04-feed.css
 * DESCRIPCIÓN TÉCNICA:	Estilos del feed (cards + composer + comentarios).
 *					- Composer móvil 1 fila: Privacidad + 3 botones circulares
 *					- YouTube: modal para pegar URL (sin input inline)
 *					- Feed: link YouTube hidratado a thumbnail card (sin “Ver en Youtube”)
 *					- Anuncios: CTA refinado con respiración lateral e inferior
 *					Ajuste quirúrgico F9:
 *					- bloque lite del feed sin label visual redundante
 *					- iframe YouTube activo alineado con el patrón visual del feed
 * =============================================================================
 * ÍNDICE
 * 1. Feed list + card base
 * 2. Head (author + menu) + badges
 * 3. Body (text/media/yt)
 * 3.1 YouTube link -> tarjeta thumbnail (hydrated por JS)
 * 3.2 CTA anuncios
 * 4. Actions (comments)
 * 5. Comments (panel/list/form) + comment nodes
 * 6. Composer (crear publicación) 2.0
 * 6.1 Modal YouTube composer
 * 7. Feed more + end banners
 * 8. Responsive (tablet + mobile + ultra small)
 * 9. Skeleton + reveal
 * =============================================================================
 */

/* =============================================================================
 * 1. Feed list + card base
 * ============================================================================= */

.feed-list{
	display:grid;
	gap: var(--space-3);
}

.feed-card{
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-1);
	overflow:hidden;
}

.feed-card,
.feed-card *{
	box-sizing: border-box;
}

.feed-card__text,
.comment__body{
	overflow-wrap: anywhere;
	word-break: break-word;
}

.feed-card.is-ad{
	border-color: color-mix(in srgb, #ffb020 48%, var(--border) 52%);
	box-shadow: 0 0 0 1px color-mix(in srgb, #ffb020 18%, transparent 82%), var(--shadow-1);
}

/* =============================================================================
 * 2. Head (author + menu) + badges
 * ============================================================================= */

.feed-card__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: var(--space-3);
	padding: var(--space-3);
	flex-direction: row !important;
	flex-wrap: nowrap;
}

.feed-card__author{
	display:flex;
	align-items:center;
	gap: var(--space-3);
	min-width: 0;
	flex: 1 1 auto;
}

.feed-card__avatar{
	width:40px;
	height:40px;
	border-radius:999px !important;
	object-fit:cover;
	background: var(--surface-2);
	border:1px solid var(--border);
	flex: 0 0 auto;
	display:block;
}

.feed-card__who{
	min-width:0;
	display:flex;
	flex-direction:column;
	gap: 2px;
}

.feed-card__name{
	font-weight:800;
	line-height:1.1;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	display:flex;
	align-items:center;
	gap: 8px;
}

.feed-card__role,
.comment__role{
	color: var(--text-2);
	font-family: var(--font-sans);
	font-size: var(--fs-1);
	font-weight: 400;
	line-height: var(--lh-tight);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.feed-pin{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--border) 74%);
	background: color-mix(in srgb, var(--brand) 10%, var(--surface-2) 90%);
	color: color-mix(in srgb, var(--brand) 70%, var(--text) 30%);
	flex: 0 0 auto;
}
.feed-pin i{ font-size: 12px; line-height: 1; }

.feed-badge{
	font-size: var(--text-xs);
	padding: 4px 10px;
	border-radius:999px;
	border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border) 82%);
	background: color-mix(in srgb, var(--brand) 10%, var(--surface-2) 90%);
	color: var(--text);
	flex: 0 0 auto;
	white-space: nowrap;
}

.feed-badge--link{ text-decoration:none; cursor:pointer; }
.feed-badge--link:hover{ text-decoration: underline; }

.feed-badge--group{
	border-color: color-mix(in srgb, #6d5cff 28%, var(--border) 72%);
	background: color-mix(in srgb, #6d5cff 14%, var(--surface-2) 86%);
	color: color-mix(in srgb, #6d5cff 65%, var(--text) 35%);
}

.feed-badge--ad{
	border-color: color-mix(in srgb, #ffb020 40%, var(--border) 60%);
	background: color-mix(in srgb, #ffb020 16%, var(--surface-2) 84%);
	color: color-mix(in srgb, #ffb020 70%, var(--text) 30%);
}

.feed-card__menu{
	position:relative;
	flex: 0 0 auto;
	margin-left: auto;
}

.btn-icon{
	width:36px;
	height:36px;
	border-radius:999px;
	border: 1px solid var(--border);
	background: var(--surface-1);
	box-shadow: var(--shadow-1);
	display:grid;
	place-items:center;
}

.feed-menu{
	position:absolute;
	right:0;
	top:42px;
	min-width: 180px;
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-2);
	overflow:hidden;
	z-index: 50;
}

.feed-menu__item{
	width:100%;
	text-align:left;
	padding: 10px 12px;
	background: transparent;
	border: 0;
	cursor:pointer;
}
.feed-menu__item:hover{ background: var(--surface-2); }

/* =============================================================================
 * 3. Body (text/media/yt)
 * ============================================================================= */

.feed-card__text{
	padding: 0 var(--space-3) var(--space-3);
	color: var(--text);
	line-height: 1.5;
}

.feed-card__media{
	border-top: 1px solid var(--divider);
	border-bottom: 1px solid var(--divider);
}
.feed-card__media img{
	width:100%;
	height:auto;
	display:block;
}

.feed-card__yt{
	padding: var(--space-3);
	border-top: 1px solid var(--divider);
}

.yt-embed{
	position: relative;
	width: 100%;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--surface-2);
	aspect-ratio: 16 / 9;
}

.yt-embed iframe{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.feed-card__link{
	padding: var(--space-3);
	border-top: 1px solid var(--divider);
}

.feed-card__link a{
	color: var(--text);
	text-decoration: none;
	font-weight: 700;
}
.feed-card__link a:hover{ text-decoration: underline; }

/* =============================================================================
 * 3.1 YouTube link -> tarjeta thumbnail (hydrated por JS)
 * ============================================================================= */

.feed-card__link a.mf-yt-card{
	display:flex;
	gap: var(--space-3);
	align-items:center;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--surface-1);
	box-shadow: var(--shadow-1);
	overflow:hidden;
	text-decoration:none;
	padding: 10px 12px;
}

.mf-yt-card__media{
	position:relative;
	width: 110px;
	height: 64px;
	border-radius: var(--radius-lg);
	overflow:hidden;
	border: 1px solid var(--border);
	background: var(--surface-2);
	flex: 0 0 auto;
}

.mf-yt-card__img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.mf-yt-card__play{
	position:absolute;
	inset:0;
	display:grid;
	place-items:center;
	background: linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.20));
}

.mf-yt-card__play::before{
	content:'';
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: color-mix(in srgb, #ff0000 65%, rgba(0,0,0,.1) 35%);
	box-shadow: var(--shadow-1);
	display:block;
}

.mf-yt-card__play::after{
	content:'';
	position:absolute;
	width: 0;
	height: 0;
	border-left: 10px solid #fff;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	transform: translateX(1px);
}

.mf-yt-card__meta{
	min-width:0;
	display:flex;
	flex-direction:column;
	gap: 3px;
}

.mf-yt-card__title{
	font-weight: 900;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width: 100%;
}

.mf-yt-card__sub{
	font-size: var(--text-xs);
	color: var(--muted);
	font-weight: 700;
}

.feed-card__link a.mf-yt-card:hover{
	filter: brightness(1.02);
	text-decoration:none;
}

/* =============================================================================
 * 3.2 CTA anuncios
 * ============================================================================= */

.feed-card__ad-cta{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	padding: 12px 14px;
	border-top: 1px solid var(--divider);
	background: color-mix(in srgb, var(--surface-1) 92%, var(--surface-2) 8%);
}

.feed-card__ad-cta > .btn,
.feed-card__ad-cta > a.btn,
.feed-card__ad-cta > button.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:100%;
	max-width: 320px;
	min-height: 44px;
	margin:0 auto;
	border-radius: 999px;
	text-align:center;
	flex: 0 1 320px;
}

.feed-card__ad-cta > .btn:hover,
.feed-card__ad-cta > a.btn:hover,
.feed-card__ad-cta > button.btn:hover{
	filter: brightness(1.03);
}

.feed-card__ad-cta > .btn:active,
.feed-card__ad-cta > a.btn:active,
.feed-card__ad-cta > button.btn:active{
	transform: translateY(1px);
}

/* =============================================================================
 * 4. Actions (comments)
 * ============================================================================= */

.feed-card__actions{
	display:flex;
	align-items:center;
	gap: var(--space-2);
	padding: var(--space-3);
	border-top: 1px solid var(--divider);
}

.feed-card__actions .btn{
	display:inline-flex;
	align-items:center;
	gap: 8px;
}

/* =============================================================================
 * 5. Comments (panel/list/form) + comment nodes
 * ============================================================================= */

.comments-panel{
	border-top: 1px solid var(--divider);
	background: color-mix(in srgb, var(--surface-1) 85%, var(--surface-2) 15%);
	padding: var(--space-3);
	overflow-x: hidden;
}

.comments-list{
	display:grid;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
	min-width: 0;
}

.comments-loading,
.comments-empty,
.comments-error,
.comments-login-hint{
	border: 1px dashed color-mix(in srgb, var(--border) 65%, transparent 35%);
	border-radius: var(--radius-lg);
	padding: 10px 12px;
	background: var(--surface-1);
	color: var(--muted);
	font-size: var(--text-sm);
}

.comments-error:empty{ display:none !important; }

.comments-error{
	margin-top: 8px;
	border: 1px solid color-mix(in srgb, #d04545 55%, var(--border) 45%);
	background: color-mix(in srgb, #d04545 10%, var(--surface-1) 90%);
	color: color-mix(in srgb, #d04545 80%, var(--text) 20%);
	font-weight: 800;
	font-size: var(--text-sm);
	border-radius: 999px;
	padding: 8px 12px;
	width: fit-content;
	max-width: 100%;
}

.comments-login-hint a{
	color: var(--text);
	font-weight: 800;
	text-decoration:none;
}
.comments-login-hint a:hover{ text-decoration: underline; }

.comment{
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
	box-shadow: var(--shadow-1);
	padding: 10px 12px;
	display:flex;
	gap: var(--space-2);
	align-items:flex-start;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.comment__avatar{
	width:32px;
	height:32px;
	border-radius:999px;
	border: 1px solid var(--border);
	background: var(--surface-2);
	object-fit:cover;
	flex: 0 0 auto;
	display:block;
}

.comment__main{
	min-width: 0;
	flex: 1 1 auto;
	max-width: 100%;
}

.comment__meta{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap: var(--space-2);
	margin-bottom: 6px;
	min-width: 0;
}

.comment__who{
	min-width:0;
	display:flex;
	flex-direction:column;
	gap: 2px;
}

.comment__author{
	font-weight: 800;
	line-height: 1.1;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width: 100%;
}

.comment__body{
	color: var(--text);
	line-height: 1.45;
	font-size: var(--text-sm);
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.comment__actions{
	margin-top: 8px;
	display:flex;
	gap: var(--space-2);
	align-items:center;
}

.comment-replies{
	margin-top: var(--space-2);
	padding-left: 12px;
	border-left: 2px solid color-mix(in srgb, var(--brand) 25%, var(--border) 75%);
	display:grid;
	gap: var(--space-2);
	max-width: 100%;
	min-width: 0;
}

.comment__reply-slot[hidden]{ display:none !important; }

.reply-form{
	margin-top: var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
	box-shadow: var(--shadow-1);
	padding: 10px 12px;
	display:grid;
	gap: var(--space-2);
	max-width: 100%;
	min-width: 0;
}

.reply-form textarea{
	width:100%;
	resize: none;
	min-height: 44px;
	border: 1px solid var(--border);
	background: var(--surface-2);
	border-radius: var(--radius-lg);
	padding: 10px 12px;
	color: var(--text);
	outline:none;
	overflow:hidden;
	max-width: 100%;
}

.reply-form textarea:focus{
	border-color: color-mix(in srgb, var(--brand) 55%, var(--border) 45%);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent 82%);
}

.reply-actions{
	display:flex;
	gap: var(--space-2);
	justify-content:flex-end;
	align-items:center;
}

.comments-form,
.comment-form{
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface-1);
	box-shadow: var(--shadow-1);
	padding: 10px 12px;
	display:grid;
	gap: var(--space-2);
	max-width: 100%;
	min-width: 0;
}

.comments-form textarea,
.comment-form textarea{
	width:100%;
	resize: none;
	min-height: 44px;
	border: 1px solid var(--border);
	background: var(--surface-2);
	border-radius: var(--radius-lg);
	padding: 10px 12px;
	color: var(--text);
	outline: none;
	overflow:hidden;
	max-width: 100%;
}

.comments-form textarea:focus,
.comment-form textarea:focus{
	border-color: color-mix(in srgb, var(--brand) 55%, var(--border) 45%);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent 82%);
}

/* =============================================================================
 * 6. Composer (crear publicación) 2.0
 * ============================================================================= */

.composer{
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-1);
	padding: var(--space-3);
	margin-bottom: var(--space-3);
}

.composer__head{
	display:flex;
	gap: var(--space-3);
	align-items:flex-start;
	min-width: 0;
}

.composer__avatar{
	width:40px;
	height:40px;
	border-radius:999px;
	border:1px solid var(--border);
	object-fit:cover;
	flex:0 0 auto;
}

.composer__textarea{
	width:100%;
	min-height: 44px;
	resize: none;
	border: 1px solid var(--border);
	background: var(--surface-2);
	border-radius: var(--radius-lg);
	padding: 10px 12px;
	color: var(--text);
	outline: none;
	overflow:hidden;
	max-width: 100%;
}

.composer__textarea:focus{
	border-color: color-mix(in srgb, var(--brand) 55%, var(--border) 45%);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent 82%);
}

.composer__preview{
	margin-top: var(--space-3);
}
.composer__preview[hidden]{ display:none !important; }

.composer__preview-media{
	position:relative;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	overflow:hidden;
	background: var(--surface-2);
}

.composer__preview-remove{
	position:absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface-1) 70%, transparent 30%);
	box-shadow: var(--shadow-1);
	display:grid;
	place-items:center;
	cursor:pointer;
}
.composer__preview-remove:hover{ background: var(--surface-1); }

.composer__tools{
	display:flex;
	flex-wrap:wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
	align-items:center;
}

.composer__tools--row{
	flex-wrap: nowrap;
}

.composer__iconbtn{
	flex: 0 0 auto;
}

.composer__btn{
	display:inline-flex;
	align-items:center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface-1);
	cursor:pointer;
	user-select:none;
}

.composer__btn,
.composer__publish,
.composer__select{
	-webkit-tap-highlight-color: transparent;
}

.composer__select{
	border: 1px solid var(--border);
	background: var(--surface-2);
	border-radius: 999px;
	padding: 10px 42px 10px 12px;
	color: var(--text);
	max-width: 100%;
	outline: none;
}

.composer__tools--row .composer__btn,
.composer__tools--row .composer__publish{
	flex: 0 0 auto;
}

.composer__select:focus{ outline:none; box-shadow:none; }
.composer__select:focus-visible{
	outline:none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent 82%);
	border-color: color-mix(in srgb, var(--brand) 45%, var(--border) 55%);
}

.composer__publish{
	margin-left:auto;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--brand) 65%, var(--border) 35%);
	background: var(--brand);
	color: #fff;
	font-weight: 800;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height: 40px;
	cursor:pointer;
	box-shadow: var(--shadow-1);
}
.composer__publish:hover{ filter: brightness(1.05); }
.composer__publish:disabled{ opacity: .55; cursor: not-allowed; filter: none; }

/* =============================================================================
 * 6.1 Modal YouTube composer
 * ============================================================================= */

.mf-ytmodal__hint{
	color: var(--muted);
	font-size: var(--text-sm);
	line-height: 1.35;
	margin-bottom: 12px;
}

.mf-ytmodal__label{
	font-weight: 800;
	margin-bottom: 6px;
	display:block;
}

.mf-ytmodal__input{
	width: 100%;
	border: 1px solid var(--border);
	background: var(--surface-2);
	border-radius: var(--radius-lg);
	padding: 12px 12px;
	color: var(--text);
	outline: none;
}

.mf-ytmodal__input:focus{
	border-color: color-mix(in srgb, var(--brand) 55%, var(--border) 45%);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent 82%);
}

.mf-ytmodal__status{
	margin-top: 10px;
	min-height: 1.1em;
	font-size: var(--text-sm);
}

.mf-ytmodal__status.is-error{
	color: color-mix(in srgb, #d04545 85%, var(--text) 15%);
	font-weight: 800;
}

.mf-ytmodal__actions{
	display:flex;
	gap: var(--space-2);
	margin-top: 12px;
}

/* =============================================================================
 * 7. Feed more + end banners
 * ============================================================================= */

.feed-more-wrap{
	margin-top: var(--space-3);
	display:grid;
	gap: var(--space-2);
}

.feed-more-status{
	color: var(--muted);
	font-size: var(--text-sm);
	text-align:center;
	min-height: 1.2em;
}

.feed-end{
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--surface-1);
	box-shadow: var(--shadow-1);
	padding: 14px 14px;
	display:grid;
	gap: 6px;
	text-align:center;
}

.feed-end__title{
	font-weight: 900;
	line-height: 1.1;
}

.feed-end__text{
	color: var(--muted);
	font-size: var(--text-sm);
	line-height: 1.35;
}

.feed-end.is-limit{
	border-color: color-mix(in srgb, var(--brand) 22%, var(--border) 78%);
	background: color-mix(in srgb, var(--brand) 6%, var(--surface-1) 94%);
}

.feed-end.is-blocked{
	border-color: color-mix(in srgb, #d04545 35%, var(--border) 65%);
	background: color-mix(in srgb, #d04545 8%, var(--surface-1) 92%);
}

/* =============================================================================
 * 8. Responsive (tablet + mobile + ultra small)
 * ============================================================================= */

@media (min-width: 521px) and (max-width: 1024px){
	.feed-card__head{
		display:flex !important;
		flex-direction: row !important;
		align-items:center !important;
		justify-content:space-between !important;
		flex-wrap: nowrap !important;
	}
	.feed-card__author{ display:flex !important; flex-direction: row !important; align-items:center !important; }
	.feed-card__who{ display:flex !important; flex-direction: column !important; }
	.feed-card__avatar{ border-radius: 999px !important; }
	.feed-card__menu{ margin-left: auto !important; }
}

@media (max-width: 520px){
	html, body{ overflow-x: hidden; }

	.feed-card__head{
		padding: var(--space-3);
		gap: var(--space-2);
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items:flex-start;
	}

	.feed-card__author{ flex: 1 1 auto; min-width: 0; order: 1; }
	.feed-card__menu{ order: 2; margin-left: auto !important; }

	.feed-badge{
		order: 3;
		flex: 0 0 100%;
		margin: 0;
		max-width: 100%;
		overflow:hidden;
		text-overflow: ellipsis;
	}

	.feed-card__avatar{ width:38px; height:38px; border-radius:999px !important; }
	.btn-icon{ width:34px; height:34px; }

	.feed-card__ad-cta{
		padding: 12px 12px;
		border-top: 1px solid var(--divider);
		background: color-mix(in srgb, var(--surface-1) 94%, var(--surface-2) 6%);
	}

	.feed-card__ad-cta > .btn,
	.feed-card__ad-cta > a.btn,
	.feed-card__ad-cta > button.btn{
		max-width: none;
		min-height: 42px;
		flex: 1 1 auto;
	}

	.composer{ overflow: hidden; }

	.composer__tools,
	.composer__tools--row{
		display:flex !important;
		flex-wrap: nowrap !important;
		align-items:center !important;
		justify-content:flex-start !important;
		width: 100%;
		min-width: 0 !important;
		--composer-ico: 46px;
		gap: 14px;
	}

	.composer__btn-text,
	.composer__publish-text{
		display:none !important;
	}

	.composer__select{
		flex: 0 0 auto !important;
		width: clamp(112px, 32vw, 140px) !important;
		max-width: clamp(112px, 32vw, 140px) !important;
		min-width: 112px !important;
		height: var(--composer-ico) !important;
		border-radius: 999px !important;
		border: 1px solid var(--border) !important;
		background-color: var(--surface-2) !important;
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		appearance: none !important;
		padding: 0 40px 0 14px !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.85' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-position: right 14px center !important;
		background-size: 18px 18px !important;
		font-weight: 800;
		letter-spacing: .2px;
		outline: none !important;
		box-shadow: none !important;
	}

	.composer__select:focus,
	.composer__select:focus-visible{
		outline: none !important;
		box-shadow: none !important;
		border-color: var(--border) !important;
	}

	.composer__btn.composer__iconbtn{
		width: var(--composer-ico) !important;
		height: var(--composer-ico) !important;
		flex: 0 0 var(--composer-ico) !important;
		padding: 0 !important;
		border-radius: 999px !important;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		gap: 0;
	}

	.composer__publish{
		width: var(--composer-ico) !important;
		height: var(--composer-ico) !important;
		min-height: var(--composer-ico) !important;
		flex: 0 0 var(--composer-ico) !important;
		margin-left: auto !important;
		padding: 0 !important;
		border-radius: 999px !important;
		font-size: 0 !important;
		line-height: 0 !important;
		background: var(--brand) !important;
		color: #fff !important;
		border: 1px solid color-mix(in srgb, #ffffff 72%, var(--brand) 28%) !important;
		outline: 2px solid color-mix(in srgb, #ffffff 38%, transparent 62%) !important;
		outline-offset: 2px !important;
		box-shadow: var(--shadow-1) !important;
	}

	.composer__publish i,
	.composer__publish .composer__publish-ico{
		font-size: 18px !important;
		line-height: 1 !important;
	}
}

@media (max-width: 360px){
	.composer__tools,
	.composer__tools--row{
		--composer-ico: 44px;
		gap: 12px;
	}

	.composer__select{
		width: 116px !important;
		max-width: 116px !important;
		min-width: 116px !important;
	}
}

/* =============================================================================
 * HOTFIX UX: ocultar "Publicado" (no aporta y mueve layout)
 * ============================================================================= */
.composer-ok{ display:none !important; }

/* =============================================================================
 * FIX DEFINITIVO: Composer DESKTOP/TABLET (select estrecho + no overflow + borde publicar)
 * ============================================================================= */
@media (min-width: 521px){

	.composer .composer__tools--row{
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		width: 100%;
		min-width: 0 !important;
		gap: 12px !important;
	}

	.composer .composer__tools--row .composer__select{
		flex: 0 1 clamp(160px, 22%, 240px) !important;
		max-width: clamp(160px, 22%, 240px) !important;
		min-width: 160px !important;
		width: auto !important;
		min-width: 0 !important;
	}

	.composer .composer__tools--row .composer__btn,
	.composer .composer__tools--row .composer__publish{
		flex: 0 0 auto !important;
	}

	.composer .composer__publish{
		margin-left: auto !important;
		gap: 8px !important;
		background: var(--brand) !important;
		color: #fff !important;
		border: 1px solid color-mix(in srgb, #ffffff 72%, var(--brand) 28%) !important;
		outline: 2px solid color-mix(in srgb, #ffffff 38%, transparent 62%) !important;
		outline-offset: 2px !important;
		box-shadow: var(--shadow-1) !important;
	}

	@media (hover:hover){
		.composer .composer__publish:hover{ filter: brightness(1.06); }
	}
}

/* =============================================================================
 * FIX REAL: Fecha comentarios = mismo look que “role”
 * ============================================================================= */

.profile-center .comments-panel .comment .comment__meta .comment__date{
	color: var(--text-2) !important;
	font-family: var(--font-sans) !important;
	font-size: var(--fs-1) !important;
	font-weight: 400 !important;
	line-height: var(--lh-tight) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	flex: 0 0 auto !important;
	text-align: right !important;
	max-width: 45% !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	font-style: normal !important;
}

/* =============================================================================
 * 9. Skeleton + reveal
 * ============================================================================= */

.feed-skeleton {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.feed-skeleton__item {
	border-radius: 16px;
	padding: 14px;
	background: var(--surface-1);
}

.feed-skeleton__line {
	height: 10px;
	border-radius: 8px;
	background: linear-gradient(
		90deg,
		rgba(255,255,255,0.05) 25%,
		rgba(255,255,255,0.15) 50%,
		rgba(255,255,255,0.05) 75%
	);
	background-size: 200% 100%;
	animation: mfSkeleton 1.2s infinite linear;
}

.feed-skeleton__line--short {
	width: 40%;
	margin-bottom: 10px;
}

.feed-skeleton__line--medium {
	width: 70%;
	margin-bottom: 10px;
}

.feed-skeleton__line--full {
	width: 100%;
}

@keyframes mfSkeleton {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.feed-item {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s ease, transform .25s ease;
}

.feed-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}