/*
 * WCafe Social 2.0 · Sistema de diseño aislado (Glass + Red Social Woticia).
 * Todos los selectores llevan prefijo .wcafe- para no interferir con el tema activo.
 */

.wcafe-app {
	--wc-ink: #07080c;
	--wc-card: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028));
	--wc-border: rgba(255, 255, 255, 0.11);
	--wc-text: #f1eee7;
	--wc-muted: rgba(241, 238, 231, 0.58);
	--wc-amber: #eeb173;
	--wc-gold: #f5c451;
	--wc-mint: #74e3c4;
	--wc-danger: #ff9b9b;
	position: relative;
	color: var(--wc-text);
	font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	padding: 1.25rem 0 4.5rem;
	isolation: isolate;
}

.wcafe-app *,
.wcafe-app *::before,
.wcafe-app *::after { box-sizing: border-box; }

.wcafe-app::before {
	content: "";
	position: absolute;
	inset: -1.5rem -1rem;
	z-index: -1;
	border-radius: 2rem;
	background:
		radial-gradient(45rem 26rem at 8% -10%, rgba(238, 177, 115, 0.16), transparent 62%),
		radial-gradient(38rem 24rem at 92% 0%, rgba(116, 227, 196, 0.12), transparent 58%),
		#07080c;
}

.wcafe-app a { color: inherit; text-decoration: none; }
.wcafe-app img { max-width: 100%; height: auto; display: block; }
.wcafe-app button { font-family: inherit; cursor: pointer; }

/* Layout de 2 Columnas (Feed Central + Widgets Sticky a la Derecha; la navegación global va en la barra fija izquierda del sitio) */
.wcafe-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0.75rem;
}
.wcafe-left-rail { display: none !important; }
@media (min-width: 1024px) {
	.wcafe-layout {
		grid-template-columns: minmax(0, 1fr) 335px;
		align-items: start;
	}
	.wcafe-rail,
	.wcafe-sidebar {
		position: sticky;
		top: 82px;
		align-self: start;
		max-height: calc(100vh - 96px);
		overflow-y: auto;
		scrollbar-width: none;
		padding-bottom: 1rem;
	}
	.wcafe-rail::-webkit-scrollbar,
	.wcafe-sidebar::-webkit-scrollbar {
		display: none;
	}
}
.wcafe-main { min-width: 0; }
.wcafe-rail { display: grid; gap: 0.85rem; }

/* Rail izquierdo de navegación */
.wcafe-nav-list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	background: var(--wc-card);
	border: 1px solid var(--wc-border);
	border-radius: 20px;
	padding: 0.75rem;
	backdrop-filter: blur(18px);
}
.wcafe-nav-item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 0.75rem;
	border-radius: 12px;
	font-size: 0.82rem;
	font-weight: 600;
	color: rgba(241, 238, 231, 0.8);
	transition: background 0.18s ease, color 0.18s ease;
}
.wcafe-nav-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.wcafe-nav-item.is-active {
	background: rgba(245, 196, 81, 0.15);
	color: var(--wc-gold);
	border: 1px solid rgba(245, 196, 81, 0.35);
}
.wcafe-nav-icon { font-size: 1rem; width: 1.35rem; text-align: center; }
.wcafe-nav-divider {
	margin: 0.45rem 0.5rem 0.15rem;
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wc-muted);
	font-weight: 700;
}

.wcafe-left-user {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	background: var(--wc-card);
	border: 1px solid var(--wc-border);
	border-radius: 18px;
	padding: 0.65rem 0.75rem;
}
.wcafe-left-user-link { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.wcafe-left-user-link strong { display: block; font-size: 0.78rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcafe-left-user-link span { display: block; font-size: 0.65rem; color: var(--wc-muted); }
.wcafe-logout-mini {
	font-size: 0.65rem;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	border: 1px solid var(--wc-border);
	color: var(--wc-muted);
}
.wcafe-logout-mini:hover { color: var(--wc-danger); border-color: var(--wc-danger); }

.wcafe-guest-card {
	background: var(--wc-card);
	border: 1px solid rgba(245, 196, 81, 0.3);
	border-radius: 18px;
	padding: 0.85rem;
}
.wcafe-guest-card strong { display: block; font-size: 0.8rem; color: var(--wc-gold); margin-bottom: 0.25rem; }
.wcafe-guest-card p { margin: 0 0 0.5rem; font-size: 0.72rem; color: var(--wc-muted); line-height: 1.45; }

/* Cabecera central */
.wcafe-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.25rem 0 0.85rem; flex-wrap: wrap; }
.wcafe-hero h2 { margin: 0; font-family: "Sora", "Inter", sans-serif; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--wc-text); }
.wcafe-hero p { margin: 0.1rem 0 0; font-size: 0.7rem; color: var(--wc-muted); display: flex; align-items: center; gap: 0.35rem; }
.wcafe-live { width: 7px; height: 7px; border-radius: 999px; background: var(--wc-mint); box-shadow: 0 0 0 4px rgba(116, 227, 196, 0.14); }
.wcafe-search input {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--wc-border);
	border-radius: 999px;
	padding: 0.45rem 0.95rem;
	color: var(--wc-text);
	font-size: 0.74rem;
	min-width: 210px;
	outline: none;
}
.wcafe-search input:focus { border-color: rgba(238, 177, 115, 0.55); }

/* Tarjetas de Post */
.wcafe-card {
	position: relative;
	background: var(--wc-card);
	border: 1px solid var(--wc-border);
	border-radius: 20px;
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	padding: 1rem 1.05rem;
	margin-bottom: 0.75rem;
	overflow: hidden;
	box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.9);
}
.wcafe-kind-bar { position: absolute; left: 0; top: 1.15rem; width: 3px; height: 2.1rem; border-radius: 0 999px 999px 0; background: linear-gradient(180deg, rgba(245, 196, 81, 0.9), rgba(255, 255, 255, 0.1)); }
.kind-article { background: linear-gradient(180deg, var(--wc-gold), #ff9f5a); }
.kind-rss { background: linear-gradient(180deg, #38bdf8, #0284c7); }
.kind-espn { background: linear-gradient(180deg, #22c55e, #15803d); }
.kind-image, .kind-video { background: linear-gradient(180deg, var(--wc-mint), #3d9fe0); }
.kind-gif { background: linear-gradient(180deg, #f472b6, #f59e0b); }
.kind-youtube { background: linear-gradient(180deg, #ff6b6b, var(--wc-gold)); }

.wcafe-post-head { display: flex; gap: 0.65rem; align-items: center; }
.wcafe-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.32rem; font-size: 0.75rem; line-height: 1.3; flex: 1; }
.wcafe-name { font-weight: 700; color: #fff; }
.wcafe-name:hover { color: var(--wc-gold); }
.wcafe-verified {
	display: inline-grid;
	place-items: center;
	width: 15px;
	height: 15px;
	border-radius: 999px;
	background: var(--wc-gold);
	color: #000;
	font-size: 0.58rem;
	font-weight: 900;
}
.wcafe-handle { color: var(--wc-muted); font-size: 0.7rem; }
.wcafe-dot { color: rgba(255, 255, 255, 0.25); }
.wcafe-kind-label {
	margin-left: auto;
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wc-muted);
	border: 1px solid var(--wc-border);
	border-radius: 999px;
	padding: 0.1rem 0.48rem;
}
.wcafe-post-title { margin: 0.6rem 0 0.3rem; font-family: "Sora", "Inter", sans-serif; font-size: 1.05rem; line-height: 1.34; color: #fff; }
.wcafe-post-title a:hover { color: var(--wc-gold); }
.wcafe-post-body { margin-top: 0.4rem; font-size: 0.89rem; color: rgba(241, 238, 231, 0.85); }

/* Marcador en Vivo ESPN (@WoticiaDeportes) */
.wcafe-scoreboard-card {
	margin: 0.65rem 0;
	padding: 0.75rem 0.9rem;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(22, 163, 74, 0.16), rgba(15, 23, 42, 0.75));
	border: 1px solid rgba(34, 197, 94, 0.35);
}
.wcafe-sb-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.68rem; margin-bottom: 0.45rem; }
.wcafe-sb-league { font-weight: 700; color: #86efac; }
.wcafe-sb-clock { font-weight: 700; color: var(--wc-muted); padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(0, 0, 0, 0.35); }
.wcafe-sb-clock.is-live { color: #fca5a5; background: rgba(220, 38, 38, 0.22); border: 1px solid rgba(248, 113, 113, 0.4); }
.wcafe-sb-teams { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.wcafe-sb-team { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; }
.wcafe-sb-score { font-family: "Sora", sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--wc-gold); }
.wcafe-sb-vs { font-size: 0.65rem; font-weight: 800; color: var(--wc-muted); }

.wcafe-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.wcafe-tag { font-size: 0.66rem; color: var(--wc-amber); border: 1px solid rgba(238, 177, 115, 0.3); border-radius: 999px; padding: 0.1rem 0.5rem; }
.wcafe-source { font-size: 0.66rem; color: var(--wc-mint); border: 1px solid rgba(116, 227, 196, 0.28); background: rgba(116, 227, 196, 0.08); border-radius: 999px; padding: 0.1rem 0.5rem; }
.wcafe-media { margin-top: 0.7rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--wc-border); }
.wcafe-media img, .wcafe-media video { width: 100%; max-height: 420px; object-fit: cover; }
.wcafe-media iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.wcafe-link { display: inline-block; margin-top: 0.55rem; font-size: 0.72rem; font-weight: 600; color: var(--wc-mint); }

/* Barra de acciones e interacciones */
.wcafe-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.wcafe-action {
	display: inline-flex; align-items: center; gap: 0.3rem;
	background: transparent; border: 0; border-radius: 999px;
	padding: 0.35rem 0.6rem; color: var(--wc-muted); font-size: 0.72rem;
	transition: background 0.2s ease, color 0.2s ease;
}
.wcafe-action:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.wcafe-action.is-active { color: var(--wc-gold); background: rgba(245, 196, 81, 0.14); }
.wcafe-action b { font-weight: 600; }
.wcafe-views-pill { cursor: default; }
.wcafe-bookmark-btn { margin-left: auto; }

/* Avatares y Favicon mejorado */
.wcafe-avatar { display: inline-flex; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); flex: 0 0 auto; }
.wcafe-ring.r-bronce { background: conic-gradient(from 140deg, #d9935b, #7c4a2c, #d9935b); }
.wcafe-ring.r-plata { background: conic-gradient(from 140deg, #cbd5e1, #64748b, #cbd5e1); }
.wcafe-ring.r-oro { background: conic-gradient(from 140deg, #f5c451, #fff3c4, #f5c451); }
.wcafe-avatar-inner {
	display: grid; place-items: center; border-radius: 999px;
	font-weight: 700; color: rgba(0, 0, 0, 0.84); letter-spacing: -0.02em;
	border: 2px solid #0b0d13; overflow: hidden;
}
.wcafe-favicon-wrap {
	background: radial-gradient(circle at 30% 30%, #ffffff, #e2e8f0);
	padding: 5px;
}
.wcafe-favicon-wrap img {
	width: 100%; height: 100%; object-fit: contain; border-radius: 4px;
}

/* Chips de Rango (Bronce, Plata, Oro) */
.wcafe-chip {
	display: inline-flex; align-items: center; gap: 0.2rem;
	font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
	border: 1px solid var(--wc-border); border-radius: 999px; padding: 0.05rem 0.42rem;
	background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.78);
}
.wcafe-chip.r-bronce { color: #f0b98a; border-color: rgba(217, 147, 91, 0.4); background: rgba(217, 147, 91, 0.12); }
.wcafe-chip.r-plata { color: #e2e8f0; border-color: rgba(203, 213, 225, 0.35); background: rgba(203, 213, 225, 0.12); }
.wcafe-chip.r-oro { color: #ffe6a3; border-color: rgba(245, 196, 81, 0.45); background: rgba(245, 196, 81, 0.14); }

/* Composer */
.wcafe-composer-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.wcafe-composer-head strong { display: block; font-size: 0.84rem; color: #fff; }
.wcafe-composer-head span { font-size: 0.66rem; color: var(--wc-muted); }
.wcafe-kinds { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.wcafe-kind {
	background: transparent; border: 1px solid transparent; border-radius: 999px;
	padding: 0.25rem 0.65rem; font-size: 0.68rem; color: var(--wc-muted);
}
.wcafe-kind:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.wcafe-kind.is-active { background: rgba(238, 177, 115, 0.14); color: var(--wc-amber); border-color: rgba(238, 177, 115, 0.4); }
.wcafe-composer-form textarea,
.wcafe-composer-form input,
.wcafe-comment-form textarea,
.wcafe-edit-profile-form input,
.wcafe-edit-profile-form textarea {
	width: 100%; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--wc-border);
	border-radius: 12px; padding: 0.6rem 0.75rem; color: var(--wc-text); font-size: 0.85rem;
	font-family: inherit; resize: vertical; outline: none;
}
.wcafe-composer-form .wcafe-title-input { margin-bottom: 0.4rem; font-weight: 600; }
.wcafe-composer-form .wcafe-media-input { margin-top: 0.4rem; font-size: 0.75rem; }
.wcafe-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.wcafe-app select {
	background: #101218; border: 1px solid var(--wc-border); border-radius: 999px;
	padding: 0.32rem 0.65rem; color: rgba(255, 255, 255, 0.82); font-size: 0.72rem; font-family: inherit;
}
.wcafe-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
	border: 0; border-radius: 999px; padding: 0.45rem 1.05rem;
	background: linear-gradient(90deg, var(--wc-gold), var(--wc-amber), #e09050);
	color: #0a0a0a; font-size: 0.78rem; font-weight: 700;
	transition: filter 0.2s ease;
}
.wcafe-btn:hover { filter: brightness(1.08); }
.wcafe-btn-ghost { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--wc-border); color: var(--wc-text); }
.wcafe-btn-light { background: rgba(255, 255, 255, 0.9); color: #000; font-size: 0.7rem; padding: 0.3rem 0.8rem; }
.wcafe-btn-block { width: 100%; margin-top: 0.45rem; }
.wcafe-feedback { margin: 0.4rem 0 0; font-size: 0.72rem; color: var(--wc-mint); }
.wcafe-feedback.is-error { color: var(--wc-danger); }
.wcafe-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }

.wcafe-filters { display: flex; gap: 0.32rem; flex-wrap: wrap; margin: 0.25rem 0 0.85rem; }
.wcafe-filter {
	border: 1px solid var(--wc-border); border-radius: 999px; padding: 0.26rem 0.68rem;
	font-size: 0.7rem; font-weight: 600; color: var(--wc-muted); background: rgba(255, 255, 255, 0.03);
}
.wcafe-filter.is-active { color: var(--wc-gold); border-color: rgba(245, 196, 81, 0.45); background: rgba(245, 196, 81, 0.14); }
.wcafe-pager { display: flex; justify-content: space-between; padding: 0.6rem 0.2rem; font-size: 0.75rem; color: var(--wc-amber); }

/* Comentarios */
.wcafe-comments { margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.wcafe-comment { display: flex; gap: 0.5rem; margin-bottom: 0.55rem; }
.wcafe-comment > div { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 0.45rem 0.65rem; flex: 1; }
.wcafe-comment p { margin: 0.15rem 0; font-size: 0.78rem; color: rgba(241, 238, 231, 0.86); }
.wcafe-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.72rem; }
.wcafe-sticker { font-size: 1.5rem; line-height: 1.2; }
.wcafe-comment-gif { max-height: 150px; border-radius: 10px; border: 1px solid var(--wc-border); }
.wcafe-comment-form { margin-top: 0.5rem; }
.wcafe-comment-tools { display: flex; gap: 0.35rem; align-items: center; margin-top: 0.35rem; }
.wcafe-comment-tools .wcafe-btn-light { margin-left: auto; }
.wcafe-login-hint { font-size: 0.74rem; color: var(--wc-muted); }
.wcafe-login-hint a { color: var(--wc-gold); font-weight: 600; }

/* Widgets Sidebar Derecha */
.wcafe-widget {
	background: var(--wc-card); border: 1px solid var(--wc-border); border-radius: 20px;
	padding: 0.9rem 0.95rem; backdrop-filter: blur(18px);
}
.wcafe-widget > header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.wcafe-widget h3 { margin: 0; font-size: 0.84rem; font-family: "Sora", "Inter", sans-serif; color: #fff; }
.wcafe-mini { font-size: 0.62rem; border: 1px solid var(--wc-border); border-radius: 999px; padding: 0.1rem 0.45rem; color: var(--wc-muted); background: transparent; }

/* Tendencias 48h */
.wcafe-trend-block { border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 0.38rem 0; }
.wcafe-trend-block:last-child { border-bottom: 0; }
.wcafe-trend { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.wcafe-trend:hover .wcafe-trend-tag { color: var(--wc-gold); }
.wcafe-trend-tag { display: block; font-size: 0.78rem; font-weight: 700; color: #fff; }
.wcafe-trend-meta { display: block; font-size: 0.63rem; color: var(--wc-muted); }
.wcafe-trend-badge {
	font-size: 0.64rem; padding: 0.1rem 0.45rem; border-radius: 999px;
	background: rgba(56, 189, 248, 0.14); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3);
}
.wcafe-trend-quote {
	display: block; margin-top: 0.4rem; padding: 0.45rem 0.6rem; border-radius: 10px;
	background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08);
}
.wcafe-trend-quote p { margin: 0; font-size: 0.7rem; color: rgba(241, 238, 231, 0.88); line-height: 1.38; }
.wcafe-trend-quote span { display: block; margin-top: 0.2rem; font-size: 0.6rem; color: var(--wc-amber); }

/* Clima y WFinanzas */
.wcafe-weather-city { margin: 0; font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.wcafe-weather-main { display: flex; align-items: flex-end; gap: 0.65rem; margin: 0.25rem 0 0.55rem; }
.wcafe-weather-main strong { font-family: "Sora", "Inter", sans-serif; font-size: 1.9rem; line-height: 1; color: var(--wc-gold); }
.wcafe-weather-main span { display: block; font-size: 0.72rem; color: rgba(255, 255, 255, 0.85); }
.wcafe-weather-main small { font-size: 0.65rem; color: var(--wc-muted); }
.wcafe-weather-stats { display: flex; gap: 0.3rem; }
.wcafe-weather-stats span { flex: 1; text-align: center; font-size: 0.6rem; color: var(--wc-muted); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 0.25rem; }
.wcafe-weather-stats b { color: rgba(255, 255, 255, 0.88); font-weight: 600; }
.wcafe-muted { display: block; font-size: 0.62rem; color: rgba(255, 255, 255, 0.4); margin-top: 0.45rem; line-height: 1.5; }

/* Fear & Greed Index */
.wcafe-fgi-box {
	margin-bottom: 0.65rem; padding: 0.55rem 0.65rem; border-radius: 12px;
	background: rgba(0, 0, 0, 0.26); border: 1px solid rgba(255, 255, 255, 0.07);
}
.wcafe-fgi-top { display: flex; justify-content: space-between; font-size: 0.68rem; margin-bottom: 0.35rem; }
.wcafe-fgi-top strong { color: var(--wc-mint); }
.wcafe-fgi-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-bottom: 0.45rem; }
.wcafe-fgi-bar span { display: block; height: 100%; background: linear-gradient(90deg, #f43f5e, #f59e0b, #10b981); border-radius: 999px; transition: width 0.3s ease; }
.wcafe-fgi-votes { display: flex; gap: 0.35rem; }
.wcafe-fgi-btn {
	flex: 1; border: 1px solid var(--wc-border); border-radius: 8px; padding: 0.24rem;
	font-size: 0.65rem; font-weight: 700; background: rgba(255, 255, 255, 0.04); color: var(--wc-text);
}
.wcafe-fgi-btn.up:hover { background: rgba(116, 227, 196, 0.15); color: var(--wc-mint); border-color: rgba(116, 227, 196, 0.4); }
.wcafe-fgi-btn.down:hover { background: rgba(255, 155, 155, 0.15); color: var(--wc-danger); border-color: rgba(255, 155, 155, 0.4); }

.wcafe-ticker { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.24rem 0; font-size: 0.7rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.wcafe-ticker span { color: rgba(255, 255, 255, 0.75); }
.wcafe-ticker b { font-size: 0.68rem; color: rgba(255, 255, 255, 0.92); font-weight: 600; }
.wcafe-ticker i { font-style: normal; font-size: 0.62rem; font-weight: 700; padding: 0.05rem 0.32rem; border-radius: 6px; }
.wcafe-ticker i.up { color: var(--wc-mint); background: rgba(116, 227, 196, 0.1); }
.wcafe-ticker i.down { color: var(--wc-danger); background: rgba(255, 155, 155, 0.1); }

/* Voces de la Casa */
.wcafe-person { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; }
.wcafe-person-info { flex: 1; min-width: 0; }
.wcafe-person-info a { font-size: 0.74rem; font-weight: 600; display: flex; align-items: center; gap: 0.25rem; color: #fff; }
.wcafe-person-info span { font-size: 0.62rem; color: var(--wc-muted); display: block; }
.wcafe-follow-mini {
	border: 1px solid rgba(245, 196, 81, 0.45); background: rgba(245, 196, 81, 0.12);
	color: var(--wc-gold); border-radius: 999px; padding: 0.2rem 0.55rem; font-size: 0.64rem; font-weight: 700;
}
.wcafe-follow-mini.is-following { background: rgba(255, 255, 255, 0.06); border-color: var(--wc-border); color: var(--wc-muted); }
.wcafe-rail-foot { font-size: 0.58rem; color: rgba(255, 255, 255, 0.3); text-align: center; margin: 0.2rem 0 0; }

/* Perfil de Usuario (@usuario) */
.wcafe-profile { text-align: left; }
.wcafe-profile-banner {
	height: 92px; margin: -1rem -1.05rem 0.5rem; border-radius: 20px 20px 0 0;
	background:
		radial-gradient(120% 150% at 10% 0%, rgba(245, 196, 81, 0.42), transparent 60%),
		radial-gradient(100% 120% at 90% 10%, rgba(116, 227, 196, 0.3), transparent 55%);
}
.wcafe-profile-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-top: -2.2rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.wcafe-profile-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.wcafe-profile h2 { margin: 0.3rem 0 0.1rem; font-family: "Sora", "Inter", sans-serif; font-size: 1.15rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.wcafe-profile p { font-size: 0.82rem; color: rgba(241, 238, 231, 0.8); margin: 0.2rem 0; }
.wcafe-stats { display: flex; gap: 0.85rem; flex-wrap: wrap; margin: 0.6rem 0; font-size: 0.72rem; color: var(--wc-muted); }
.wcafe-stats b { color: #fff; }
.wcafe-meter { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.wcafe-meter span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--wc-gold), #fff1b8); }
.wcafe-perk { font-size: 0.66rem !important; color: var(--wc-muted) !important; }
.wcafe-fav-sources { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.wcafe-fav-sources small { display: block; font-size: 0.68rem; color: var(--wc-muted); margin-bottom: 0.3rem; }
.wcafe-edit-profile-form { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--wc-border); display: grid; gap: 0.55rem; }
.wcafe-edit-profile-form h3 { margin: 0; font-size: 0.9rem; color: var(--wc-gold); }
.wcafe-edit-profile-form label { font-size: 0.72rem; color: var(--wc-muted); display: grid; gap: 0.2rem; }

/* Barra inferior móvil estilo X/Twitter */
.wcafe-mobile-bar {
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 90;
	background: rgba(10, 12, 18, 0.95);
	backdrop-filter: blur(16px);
	border-top: 1px solid var(--wc-border);
	justify-content: space-around;
	padding: 0.45rem 0.25rem;
}
.wcafe-mobile-bar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
	font-size: 1rem;
	color: var(--wc-muted);
}
.wcafe-mobile-bar a small { font-size: 0.6rem; font-weight: 600; }
.wcafe-mobile-bar a.is-active { color: var(--wc-gold); }
@media (min-width: 1024px) {
	.wcafe-mobile-bar { display: none; }
}

.wcafe-empty { text-align: center; font-size: 0.84rem; color: var(--wc-muted); padding: 1.5rem 1rem; }
.wcafe-empty a { color: var(--wc-amber); font-weight: 600; }
.wcafe-join { display: flex; flex-direction: column; gap: 0.5rem; border-color: rgba(245, 196, 81, 0.35); }
.wcafe-join h2 { margin: 0 0 0.2rem; font-family: "Sora", "Inter", sans-serif; font-size: 1rem; color: var(--wc-gold); }
.wcafe-join p { margin: 0; font-size: 0.78rem; color: var(--wc-muted); }

/* Auth */
.wcafe-auth { display: grid; gap: 1.2rem; grid-template-columns: 1fr; max-width: 920px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 900px) { .wcafe-auth { grid-template-columns: 1.1fr 0.9fr; align-items: center; } }
.wcafe-auth-brand h2 { font-family: "Sora", "Inter", sans-serif; font-size: 1.6rem; margin: 0 0 0.4rem; color: #fff; }
.wcafe-auth-brand h2 span { color: var(--wc-amber); }
.wcafe-logo-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(135deg, var(--wc-gold), #c8743f); font-size: 1rem; margin-right: 0.25rem; }
.wcafe-auth-brand p { color: var(--wc-muted); font-size: 0.85rem; }
.wcafe-auth-brand ul { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.76rem; color: rgba(241, 238, 231, 0.75); }
.wcafe-auth-card { background: var(--wc-card); border: 1px solid var(--wc-border); border-radius: 24px; padding: 1.35rem; backdrop-filter: blur(20px); }
.wcafe-auth-card h3 { margin: 0 0 0.5rem; font-family: "Sora", "Inter", sans-serif; font-size: 1.05rem; }
.wcafe-auth-card label { display: block; font-size: 0.72rem; color: var(--wc-muted); margin-bottom: 0.65rem; }
.wcafe-auth-card input { display: block; width: 100%; margin-top: 0.22rem; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--wc-border); border-radius: 10px; padding: 0.52rem 0.75rem; color: var(--wc-text); font-size: 0.82rem; }
.wcafe-auth-tabs { display: flex; gap: 0.35rem; margin-bottom: 0.95rem; }
.wcafe-auth-tabs a { flex: 1; text-align: center; padding: 0.38rem; border-radius: 999px; font-size: 0.75rem; color: var(--wc-muted); border: 1px solid var(--wc-border); }
.wcafe-auth-tabs a.is-active { color: #0a0a0a; background: linear-gradient(90deg, var(--wc-gold), var(--wc-amber)); font-weight: 700; border-color: transparent; }
.wcafe-error { background: rgba(255, 155, 155, 0.12); border: 1px solid rgba(255, 155, 155, 0.35); color: #ffbdbd; border-radius: 10px; padding: 0.45rem 0.7rem; font-size: 0.75rem; }
.wcafe-app code { background: rgba(255, 255, 255, 0.08); border-radius: 4px; padding: 0 0.25rem; font-size: 0.9em; }
.wcafe-sidebar-only .wcafe-rail { position: static; }

/* Admin screens */
.wcafe-admin .wcafe-version { font-size: 12px; color: #777; }
.wcafe-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.wcafe-admin-grid .card { margin: 0; padding: 14px; text-align: center; }
.wcafe-admin-grid h2 { margin: 0; font-size: 26px; }
.wcafe-admin-grid p { margin: 0; color: #666; }
.wcafe-admin-bot { margin-bottom: 14px; padding: 12px 16px; }
.wcafe-admin-bot h3 { margin: 0 0 4px; }
.wcafe-pill { font-size: 10px; text-transform: uppercase; border: 1px solid #ccd; border-radius: 999px; padding: 1px 8px; color: #555; vertical-align: middle; }

/* Feed post single-paragraph & Woticia internal reader CTA */
.wcafe-feed-single-para {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}
.wcafe-feed-excerpt {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: rgba(241, 238, 231, 0.88);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wcafe-read-woticia-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 700;
	text-decoration: none;
	background: rgba(245, 196, 81, 0.12);
	border: 1px solid rgba(245, 196, 81, 0.35);
	color: var(--wc-gold);
	transition: background 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.wcafe-read-woticia-btn:hover {
	background: rgba(245, 196, 81, 0.22);
	border-color: var(--wc-gold);
	color: #fff;
	transform: translateX(2px);
}

/* Harmonización con barra fija izquierda estilo Twitter en todas las pantallas */
@media (min-width: 1024px) {
	body.is-cafe-v6 .wcafe-layout,
	.wcafe-layout {
		grid-template-columns: minmax(0, 1fr) 330px;
	}
	body.is-cafe-v6 .wcafe-left-rail,
	.wcafe-left-rail {
		display: none !important;
	}
}

/* Cabecera derecha del Café y botón rápido de editar perfil */
.wcafe-hero-right {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
}
.wcafe-edit-quick-btn {
	font-size: 0.72rem;
	padding: 0.4rem 0.85rem;
}

/* Submenú horizontal de categorías del Café (reemplazo de la antigua sidebar izquierda) */
.wcafe-top-categories-bar {
	display: flex;
	align-items: center;
	gap: 0.42rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 0.55rem 0.65rem;
	margin: 0 0 0.9rem;
	background: var(--wc-card);
	border: 1px solid var(--wc-border);
	border-radius: 16px;
	backdrop-filter: blur(16px);
}
.wcafe-top-categories-bar::-webkit-scrollbar {
	display: none;
}
.wcafe-top-cat-pill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.38rem 0.82rem;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--wc-muted);
	border: 1px solid transparent;
	background: rgba(255, 255, 255, 0.03);
	transition: all 0.16s ease;
	white-space: nowrap;
}
.wcafe-top-cat-pill:hover {
	color: var(--wc-text);
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--wc-border);
}
.wcafe-top-cat-pill.is-active {
	color: #0b0d13;
	background: linear-gradient(90deg, #f5c451, #eeb173);
	border-color: rgba(245, 196, 81, 0.6);
	box-shadow: 0 4px 14px -4px rgba(245, 196, 81, 0.45);
}

.wcafe-active-topic-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	margin-bottom: 0.75rem;
	border-radius: 12px;
	background: rgba(245, 196, 81, 0.1);
	border: 1px solid rgba(245, 196, 81, 0.3);
	font-size: 0.76rem;
}

.wcafe-rss-cta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem;
	flex-wrap: wrap;
	margin-top: 0.15rem;
}
.wcafe-link-subtle {
	font-size: 0.68rem;
	color: var(--wc-muted);
	font-weight: 600;
}
.wcafe-link-subtle:hover {
	color: var(--wc-mint);
}

/* Lector Editorial Interno (?wcafe_post=ID) con diseño de artículo Woticia dentro del Café */
.wcafe-editorial-reader {
	padding: 1.35rem 1.45rem;
	border-radius: 22px;
}
.wcafe-reader-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding-bottom: 0.9rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--wc-border);
}
.wcafe-reader-badges {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
}
.wcafe-reader-headline {
	margin: 0 0 0.85rem;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.38rem, 2.5vw, 1.85rem);
	font-weight: 800;
	line-height: 1.24;
	letter-spacing: -0.015em;
	color: var(--wc-text);
}
.wcafe-reader-byline {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.85rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--wc-border);
	margin-bottom: 1.1rem;
}
.wcafe-reader-author-meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.wcafe-reader-figure {
	margin: 0 0 1.15rem;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--wc-border);
	background: rgba(0, 0, 0, 0.25);
}
.wcafe-reader-figure img {
	width: 100%;
	max-height: 440px;
	object-fit: cover;
}
.wcafe-reader-figure figcaption {
	padding: 0.45rem 0.85rem;
	font-size: 0.68rem;
	color: var(--wc-muted);
}
.wcafe-reader-content {
	display: grid;
	gap: 0.95rem;
	margin-bottom: 1.2rem;
}
.wcafe-reader-lead {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.68;
	font-weight: 500;
	color: var(--wc-text);
}
.wcafe-reader-p {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.72;
	color: rgba(241, 238, 231, 0.86);
}
.wcafe-reader-source-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.75rem 0.95rem;
	border-radius: 14px;
	background: rgba(116, 227, 196, 0.06);
	border: 1px solid rgba(116, 227, 196, 0.24);
	margin-bottom: 0.75rem;
}
.wcafe-reader-source-box strong {
	display: block;
	font-size: 0.76rem;
	color: var(--wc-mint);
}
.wcafe-reader-source-box span {
	font-size: 0.7rem;
	color: var(--wc-muted);
}
.wcafe-reader-comments {
	margin-top: 1.1rem;
	padding-top: 1rem;
}
.wcafe-reader-comments-title {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	font-family: "Sora", "Inter", sans-serif;
}

/* Editor de Perfil Avanzado con Foto y Avatares Rápidos */
.wcafe-ep-header {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.wcafe-ep-avatar-section {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--wc-border);
	flex-wrap: wrap;
}
.wcafe-ep-avatar-controls {
	flex: 1;
	min-width: 220px;
	display: grid;
	gap: 0.5rem;
}
.wcafe-ep-upload-btn {
	cursor: pointer;
	justify-self: start;
	font-size: 0.74rem;
}
.wcafe-ep-presets {
	display: flex;
	align-items: center;
	gap: 0.38rem;
	flex-wrap: wrap;
}
.wcafe-ep-presets > span {
	font-size: 0.68rem;
	color: var(--wc-muted);
	margin-right: 0.2rem;
}
.wcafe-ep-preset-btn {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	padding: 0;
	border: 2px solid var(--wc-border);
	background: transparent;
	overflow: hidden;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.wcafe-ep-preset-btn:hover {
	transform: scale(1.1);
	border-color: var(--wc-gold);
}
.wcafe-ep-preset-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wcafe-ep-preset-clear {
	padding: 0.22rem 0.55rem;
	border-radius: 999px;
	font-size: 0.65rem;
	border: 1px solid var(--wc-border);
	background: rgba(255, 255, 255, 0.05);
	color: var(--wc-muted);
}
.wcafe-ep-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0.65rem;
}

/* Soporte Modo Claro Integral para Woticia Café */
html[data-theme="light"] .wcafe-app {
	--wc-ink: #f6f5f0;
	--wc-card: #ffffff;
	--wc-border: rgba(15, 23, 42, 0.11);
	--wc-text: #0f172a;
	--wc-muted: #64748b;
	--wc-amber: #d97706;
	--wc-gold: #b45309;
	--wc-mint: #059669;
	color: #0f172a;
}
html[data-theme="light"] .wcafe-app::before {
	background:
		radial-gradient(45rem 26rem at 8% -10%, rgba(245, 196, 81, 0.16), transparent 62%),
		radial-gradient(38rem 24rem at 92% 0%, rgba(16, 185, 129, 0.08), transparent 58%),
		#f6f5f0;
}
html[data-theme="light"] .wcafe-card,
html[data-theme="light"] .wcafe-top-categories-bar,
html[data-theme="light"] .wcafe-nav-list,
html[data-theme="light"] .wcafe-left-user,
html[data-theme="light"] .wcafe-widget,
html[data-theme="light"] .wcafe-auth-card {
	background: #ffffff;
	border-color: rgba(15, 23, 42, 0.1);
	box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .wcafe-top-cat-pill {
	color: #334155;
	background: #f8fafc;
}
html[data-theme="light"] .wcafe-top-cat-pill.is-active {
	color: #0f172a;
	background: linear-gradient(90deg, #fcd535, #f59e0b);
}
html[data-theme="light"] .wcafe-nav-item {
	color: #334155;
}
html[data-theme="light"] .wcafe-nav-item:hover {
	background: #f1f5f9;
	color: #0f172a;
}
html[data-theme="light"] .wcafe-feed-excerpt,
html[data-theme="light"] .wcafe-post-body p,
html[data-theme="light"] .wcafe-reader-p,
html[data-theme="light"] .wcafe-reader-lead {
	color: #1e293b;
}
html[data-theme="light"] .wcafe-search input,
html[data-theme="light"] .wcafe-composer textarea,
html[data-theme="light"] .wcafe-composer input,
html[data-theme="light"] .wcafe-edit-profile-form input,
html[data-theme="light"] .wcafe-edit-profile-form textarea {
	background: #f8fafc;
	color: #0f172a;
	border-color: rgba(15, 23, 42, 0.14);
}