/* =============================================================================
   ECA · Mobile / Tablet (≤991.98px)
   - Header móvil: ORIGINAL SNGINE (sin overrides aquí)
   - Footer bottom bar estilizado (eca_v3 style.min.css NO trae estos estilos)
   - Auto-hide de header + footer-bottom-bar al hacer scroll, reaparecen al detenerse
   ============================================================================= */

@media (max-width: 991.98px) {

	/* ========== Header: ocultar la barra derecha de iconos (home/reels/dm/notif/user-menu)
	   eca_v3 no la oculta correctamente en móvil — ya están todos en el bottom-bar ========== */
	.main-header .ele_navbar_top_right { display: none !important; }

	/* ========== Logo móvil: usar el mismo logo del admin (system_logo) ==========
	   eca_v3/style.min.css línea 6472 fuerza .ele_logo_pc {display:none !important} en ≤768px,
	   y muestra .ele_logo_mobi (favicon W del tema) en su lugar. Override: */
	body .main-header .logo-wrapper img.ele_logo_mobi { display: none !important; }
	body:not(.night-mode) .main-header .logo-wrapper img.ele_logo_pc.logo-light { display: inline-block !important; max-height: 36px; width: auto; }
	body:not(.night-mode) .main-header .logo-wrapper img.ele_logo_pc.logo-dark  { display: none !important; }
	body.night-mode .main-header .logo-wrapper img.ele_logo_pc.logo-light { display: none !important; }
	body.night-mode .main-header .logo-wrapper img.ele_logo_pc.logo-dark  { display: inline-block !important; max-height: 36px; width: auto; }

	/* ========== FOOTER BOTTOM BAR ========== */
	.footer-bottom-bar {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: #2f503e;
		border-top: 1px solid rgba(255, 255, 255, .08);
		height: 64px;
		padding: 0;
	}
	body.night-mode .footer-bottom-bar {
		background: #1c2421;
		border-top-color: rgba(255, 255, 255, .06);
	}
	.footer-bottom-bar > .container {
		height: 100%;
		max-width: 100%;
		padding: 0;
	}
	.footer-bottom-bar-links {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 100%;
		gap: 4px;
		padding: 0 4px;
	}
	.footer-bottom-bar-links > .link {
		flex: 1 1 0;
		text-align: center;
		height: 100%;
	}
	.footer-bottom-bar-links > .link > a {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 4px 6px;
		color: rgba(255, 255, 255, .85);
		text-decoration: none;
		transition: color .15s ease, background .15s ease;
	}
	.footer-bottom-bar-links > .link > a:hover,
	.footer-bottom-bar-links > .link > a:focus {
		color: #fff;
		background: rgba(255, 255, 255, .06);
	}
	.footer-bottom-bar-links > .link > a > .title,
	.footer-bottom-bar-links > .link .title {
		font-size: 11px;
		line-height: 1.2;
		margin-top: 2px;
		font-weight: 500;
		color: inherit;
	}
	.footer-bottom-bar-links > .link.active > a,
	.footer-bottom-bar-links > .link.active > a > .title {
		color: #f0c451;
		font-weight: 700;
	}
	.footer-bottom-bar-links > .link svg,
	.footer-bottom-bar-links > .link .header-icon {
		width: 22px;
		height: 22px;
		color: currentColor;
	}
	.main-wrapper { padding-bottom: 70px; }

	/* ========== AUTO-HIDE on scroll ========== */
	.main-header {
		transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .22s ease;
		will-change: transform;
	}
	.footer-bottom-bar {
		transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .22s ease;
		will-change: transform;
	}
	body.eca-nav-hidden .main-header {
		transform: translateY(-110%);
		opacity: 0;
		pointer-events: none;
	}
	body.eca-nav-hidden .footer-bottom-bar {
		transform: translateY(110%);
		opacity: 0;
		pointer-events: none;
	}

	/* Avatar del bottom-bar */
	.footer-bottom-bar-links .eca-bb-avatar {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		object-fit: cover;
		border: 1.5px solid rgba(255, 255, 255, .6);
	}
	.footer-bottom-bar-links > .link.active .eca-bb-avatar {
		border-color: #f0c451;
	}
}

/* En desktop (≥992px) ocultar bottom-bar */
@media (min-width: 992px) {
	.footer-bottom-bar { display: none !important; }
}