/* Magenta Catálogo – menú inferior tipo app (solo celular y tablet) */

.mgc-tabbar,
.mgc-tabbar-sheet {
	display: none;
}

@media (max-width: 1024px) {
	.mgc-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		display: flex;
		align-items: stretch;
		justify-content: space-around;
		height: calc(62px + env(safe-area-inset-bottom));
		padding: 0 4px env(safe-area-inset-bottom);
		background: rgba(255, 255, 255, .97);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-top: 1px solid #eadbe4;
		box-shadow: 0 -4px 18px rgba(31, 10, 40, .08);
	}

	.mgc-tab {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 6px 2px;
		border: 0;
		background: none;
		color: #6b6274 !important;
		font: inherit;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.1;
		text-decoration: none !important;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		position: relative;
	}

	.mgc-tab svg {
		width: 24px;
		height: 24px;
		transition: transform .15s ease;
	}

	.mgc-tab-label {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mgc-tab.is-current,
	.mgc-tab[aria-expanded="true"] {
		color: var(--mgc-bg, #9c3586) !important;
	}

	.mgc-tab.is-current::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 28px;
		height: 3px;
		margin-left: -14px;
		border-radius: 0 0 3px 3px;
		background: var(--mgc-bg, #9c3586);
	}

	.mgc-tab:active svg {
		transform: scale(.88);
	}

	.mgc-tab:focus-visible {
		outline: 2px solid var(--mgc-bg, #9c3586);
		outline-offset: -4px;
		border-radius: 10px;
	}

	.mgc-tab.is-wa {
		color: #128c4a !important;
	}

	/* Hoja "Más" */
	.mgc-tabbar-sheet {
		position: fixed;
		inset: 0;
		z-index: 9989;
		display: flex;
		align-items: flex-end;
		background: rgba(31, 10, 40, .45);
	}

	.mgc-tabbar-sheet[hidden] {
		display: none;
	}

	.mgc-tabbar-sheet-panel {
		width: 100%;
		background: #fff;
		border-radius: 20px 20px 0 0;
		padding: 10px 10px calc(72px + env(safe-area-inset-bottom));
		animation: mgc-tabbar-up .22s ease;
	}

	@keyframes mgc-tabbar-up {
		from { transform: translateY(100%); }
		to { transform: none; }
	}

	.mgc-tabbar-sheet-link {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 14px 12px;
		border-radius: 12px;
		color: #1f1a24 !important;
		font-weight: 600;
		font-size: 15px;
		text-decoration: none !important;
	}

	.mgc-tabbar-sheet-link:hover,
	.mgc-tabbar-sheet-link.is-current {
		background: #fbf3f7;
		color: var(--mgc-bg, #9c3586) !important;
	}

	/* Espacio para que la barra no tape el contenido. */
	body.mgc-has-tabbar {
		padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
	}

	/* Botón flotante de WhatsApp por encima de la barra. */
	body.mgc-has-tabbar .mgc-wa-float {
		bottom: calc(76px + env(safe-area-inset-bottom)) !important;
	}

	body.mgc-tabbar-has-wa .mgc-wa-float {
		display: none !important;
	}

	/* Menú hamburguesa y barra inferior propia del tema Basel. */
	body.mgc-has-tabbar .mobile-nav-icon,
	body.mgc-has-tabbar .basel-burger-icon,
	body.mgc-has-tabbar .mobile-nav-icon-wrapper,
	body.mgc-has-tabbar .basel-toolbar,
	body.mgc-has-tabbar .basel-sticky-toolbar,
	body.mgc-has-tabbar .wd-toolbar {
		display: none !important;
	}
}

/* El feed de videos a pantalla completa tapa la barra. */
html.mgc-rl-lock .mgc-tabbar {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.mgc-tabbar-sheet-panel {
		animation: none;
	}
}

/* ---------- Estilo "marca": barra violeta noche ---------- */
@media (max-width: 1024px) {
	body.mgc-tabbar-marca .mgc-tabbar {
		background: #3f195d;
		border-top: 1px solid rgba(203, 178, 150, .45);
		box-shadow: 0 -6px 24px rgba(31, 10, 40, .28);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	body.mgc-tabbar-marca .mgc-tab {
		color: rgba(255, 255, 255, .78) !important;
		gap: 2px;
	}

	body.mgc-tabbar-marca .mgc-tab svg {
		width: 40px;
		height: 30px;
		padding: 3px 8px;
		border-radius: 9999px;
		transition: background .2s ease, color .2s ease;
	}

	body.mgc-tabbar-marca .mgc-tab.is-current,
	body.mgc-tabbar-marca .mgc-tab[aria-expanded="true"] {
		color: #ffffff !important;
	}

	body.mgc-tabbar-marca .mgc-tab.is-current svg,
	body.mgc-tabbar-marca .mgc-tab[aria-expanded="true"] svg {
		background: var(--mgc-bg, #9c3586);
		box-shadow: 0 4px 14px rgba(156, 53, 134, .55);
	}

	body.mgc-tabbar-marca .mgc-tab.is-current::before {
		display: none;
	}

	body.mgc-tabbar-marca .mgc-tab:focus-visible {
		outline-color: #ffffff;
	}

	body.mgc-tabbar-marca .mgc-tab.is-wa {
		color: #7ee2a4 !important;
	}

	body.mgc-tabbar-marca .mgc-tabbar-sheet-panel {
		background: #3f195d;
	}

	body.mgc-tabbar-marca .mgc-tabbar-sheet-link {
		color: #ffffff !important;
	}

	body.mgc-tabbar-marca .mgc-tabbar-sheet-link:hover,
	body.mgc-tabbar-marca .mgc-tabbar-sheet-link.is-current {
		background: rgba(255, 255, 255, .1);
		color: #ffffff !important;
	}
}

/* ---------- Estilo "beige" = "Color de la barra" (rosa pastel por defecto) ---------- */
@media (max-width: 1024px) {
	body.mgc-tabbar-beige .mgc-tabbar {
		background: var(--mgc-bar, #f49ac2);
		border-top: 1px solid rgba(63, 25, 93, .14);
		box-shadow: 0 -6px 20px rgba(63, 25, 93, .12);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	body.mgc-tabbar-beige .mgc-tab {
		color: #3f195d !important;
		gap: 2px;
	}

	body.mgc-tabbar-beige .mgc-tab svg {
		width: 40px;
		height: 30px;
		padding: 3px 8px;
		border-radius: 9999px;
		transition: background .2s ease, color .2s ease;
	}

	body.mgc-tabbar-beige .mgc-tab.is-current,
	body.mgc-tabbar-beige .mgc-tab[aria-expanded="true"] {
		color: #3f195d !important;
		font-weight: 700;
	}

	body.mgc-tabbar-beige .mgc-tab.is-current svg,
	body.mgc-tabbar-beige .mgc-tab[aria-expanded="true"] svg {
		background: var(--mgc-bg, #9c3586);
		color: #ffffff;
		box-shadow: 0 4px 14px rgba(156, 53, 134, .4);
	}

	body.mgc-tabbar-beige .mgc-tab.is-current::before {
		display: none;
	}

	body.mgc-tabbar-beige .mgc-tabbar-sheet-panel {
		background: var(--mgc-bar, #f49ac2);
	}

	body.mgc-tabbar-beige .mgc-tabbar-sheet-link {
		color: #3f195d !important;
	}

	body.mgc-tabbar-beige .mgc-tabbar-sheet-link:hover,
	body.mgc-tabbar-beige .mgc-tabbar-sheet-link.is-current {
		background: rgba(255, 255, 255, .55);
		color: #3f195d !important;
	}
}