/*
	Bloque X (API)
	Soporta modo light/dark real y evita conflictos con el CSS legacy del theme.
*/

.so-x-twitter{
	--sox-accent: #563333;
	--sox-bg: #d0d0d0;
	--sox-surface: #fff;
	--sox-text: #222;
	--sox-muted: #666;
	--sox-border: #ccc;
	--sox-surface-border: #d0d0d0;
	--sox-link: #600;
	--sox-profile-bg: #2b2b33;
	--sox-profile-text: rgba(0, 0, 0, .95);
	--sox-profile-muted: rgba(255,255,255,.72);
	--sox-card-shadow: 5px 5px 0 rgba(0,0,0,.30);
	--sox-card-shadow-hover: 10px 10px 0 rgba(0,0,0,.35);
	--sox-card-radius: 0;
	--sox-card-gap: 12px;

	display:block;
	width:100%;
	float:none;
	margin:0;
	padding:12px;
	background:var(--sox-bg);
	color:var(--sox-text);
	border:1px solid var(--sox-border);
	border-radius: 0;
	overflow:hidden;
}

.so-x-twitter--light{
	--sox-surface: #fff;
	--sox-text: #222;
	--sox-muted: #666;
	--sox-border: #ccc;
	--sox-surface-border: #d0d0d0;
	--sox-link: #600;
}

.so-x-twitter--dark{
	--sox-surface: rgba(61, 23, 23, .7);
	--sox-text: #fff;
	--sox-muted: rgba(61, 23, 23, .5);
	--sox-border: rgba(255,255,255,.12);
	--sox-surface-border: rgba(255,255,255,.10);
	/* Sin turquesa: acento cálido para diferenciar links del texto blanco */
	--sox-link: #600;
    --sox-profile-muted: rgba(61, 23, 23, .5);
}

/* Evitar herencia del CSS viejo de #twitter_div */
#twitter_div span{float:none!important;width:100%!important;overflow:visible!important;margin:0!important}
#twitter_div span > .so-x-twitter{margin:0!important}
#twitter_div ul.so-x-tweets{
	list-style:none;
	margin:0!important;
	padding:0!important;
	height:auto!important;
	font-size:inherit!important;
	color:inherit!important;
	text-align:left!important;
}
#twitter_div ul.so-x-tweets li.so-x-tweet{margin: 3% 2%!important;padding:3%!important}

/* Cabecera perfil */
.so-x-twitter__profile{
	display:flex;
	gap:12px;
	align-items:flex-start;
	margin:-12px -12px 10px;
	padding:10px 12px;
	color: var(--sox-profile-text);
}

.so-x-twitter--dark .so-x-twitter__profile{
	border-bottom-color: rgba(255,255,255,.10);
}

.so-x-twitter__avatar{display:block;flex:0 0 auto}
.so-x-twitter__avatar img{
	width:46px;
	height:46px;
	border-radius:999px;
	display:block;
	border:2px solid rgba(255,255,255,.85);
	background: rgba(0,0,0,.18);
}

.so-x-twitter__meta{min-width:0}
.so-x-twitter__name{
	font-weight:700;
	line-height:1.15;
	font-size:14px;
	letter-spacing:.2px;
}
.so-x-twitter__name a{color:inherit;text-decoration:none}
.so-x-twitter__name a:hover{text-decoration:underline}

.so-x-twitter__handle{
	color: var(--sox-profile-muted);
	font-size:12px;
	margin-top:3px;
}

/* Bio con contenedor propio para que “se note” */
.so-x-twitter__bio{
    margin-top: 8px;
    padding: 7px 8px;
    font-size: 13px;
    line-height: 1.35;
    border-left: 3px solid rgba(255, 255, 255, .75);
}

.so-x-twitter--dark .so-x-twitter__bio{
	background: rgba(255,255,255,.08);
}

.so-x-twitter__verified{display:inline-block;margin-left:6px;font-size:12px;opacity:.95}

/* Área de timeline para separación clara */
.so-x-twitter__tweets{
	padding-top:10px;
	border-top:1px solid var(--sox-border);
}

/* Tweet cards */
.so-x-tweets{list-style:none;margin:0;padding:0}
.so-x-tweet{
	border:1px solid var(--sox-surface-border);
	padding:12px 12px 10px;
	margin:0 0 var(--sox-card-gap);
	border-radius: var(--sox-card-radius);
	box-shadow: var(--sox-card-shadow);
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease, background-color .18s ease;
}
.so-x-tweet:last-child{margin-bottom:0}

/* Blindar contra hovers heredados (el theme a veces pinta LI en gris) */
#twitter_div ul.so-x-tweets li.so-x-tweet{background:rgba(0,0,0,.15)!important}
#twitter_div ul.so-x-tweets li.so-x-tweet:hover{background:rgba(0,0,0,.20)!important}

.so-x-tweet:hover,
.so-x-tweet:focus-within{
	border-color: rgba(0,0,0,.25);
	box-shadow: var(--sox-card-shadow-hover);
	transform: translateY(-2px);
}
.so-x-twitter--dark .so-x-tweet:hover,
.so-x-twitter--dark .so-x-tweet:focus-within{
	border-color: rgba(255,255,255,.18);
}

.so-x-tweet__text{
	font-size:13px;
	line-height:1.48;
	word-wrap:break-word;
	color: rgba(0,0,0,.75);
}
.so-x-tweet__text a{color:#000;text-decoration:underline;text-underline-offset:2px}
.so-x-tweet__text a:hover{opacity:.9}
.so-x-tweet__text p{margin:0}

.so-x-tweet__footer{
	display:flex;
	gap:10px;
	justify-content:flex-start;
	align-items:center;
	margin-top:12px;
	padding-top:10px;
	border-top: 1px solid var(--sox-surface-border);
	font-size:11px;
	color:var(--sox-muted);
}

.so-x-tweet__date{white-space:nowrap; font-weight: bolder; color: var(--sox-link);}

.so-x-tweet__link{
	margin-left:auto;
	text-decoration:none;
	font-weight:700;
	line-height:1;
	padding:.5% 1.5%;
	border-radius:0;
	border:0;
	background: none;
	color: var(--sox-link);
    width: 100%;
	display:block;
	text-align:right;
}
.so-x-tweet__link:hover{opacity:.85}
.so-x-twitter--dark .so-x-tweet__link{
	color: var(--sox-link);
}
.so-x-twitter--dark .so-x-tweet__link:hover{background: rgba(255,255,255,.14)}

/* bxSlider dentro del bloque */
.so-x-twitter .bx-wrapper{margin:0;background:transparent;border:0;box-shadow:none}
.so-x-twitter .bx-wrapper .bx-viewport{background:transparent;border:0;left:0}
.so-x-twitter .bx-controls-direction a{opacity:.9}
.so-x-twitter .bx-pager.bx-default-pager a{background:rgba(86,51,51,.35)}
.so-x-twitter .bx-pager.bx-default-pager a.active{background:rgba(86,51,51,.85)}
.so-x-twitter--dark .bx-pager.bx-default-pager a{background:rgba(255,255,255,.25)}
.so-x-twitter--dark .bx-pager.bx-default-pager a.active{background:rgba(255,255,255,.75)}

/* Debug (solo admins cuando hay error) */
.so-x-twitter__debug-pre{
	white-space:pre-wrap;
	max-width:980px;
	background:rgba(0,0,0,.03);
	border:1px solid var(--sox-border);
	padding:12px;
	overflow:auto;
}

@media (max-width: 480px) {
	.so-x-twitter{padding:10px}
	.so-x-twitter__profile{margin:-10px -10px 10px;padding:10px}
	.so-x-tweet{padding:10px}
}