/* SupraMercado PWA */
:root {
	--supra-blue: #0C3A73;
	--supra-orange: #F55E25;
	--supra-orange-dark: #C7440E;
	--supra-sky: #0E9FDD;
	--supra-border: #E5E5E5;
	--supra-nav-height: 60px;
}

.supra-install-btn,
.supra-toast__btn {
	min-height: 44px;
	padding: 10px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--supra-orange);
	color: #fff;
	font: 600 1rem Inter, sans-serif;
	cursor: pointer;
}

.supra-install-btn {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom));
	z-index: 99990;
	box-shadow: 0 4px 14px rgba(12, 58, 115, 0.3);
}

.supra-install-btn[hidden] {
	display: none;
}

.supra-install-btn:hover,
.supra-install-btn:focus,
.supra-toast__btn:hover,
.supra-toast__btn:focus {
	background: var(--supra-orange-dark);
}

.supra-install-btn:focus-visible,
.supra-toast__btn:focus-visible,
.supra-bottom-nav__item:focus-visible,
.supra-ios-guide__close:focus-visible {
	outline: 3px solid var(--supra-sky);
	outline-offset: 2px;
}

/* Guía iOS */
.supra-ios-guide {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom));
	z-index: 99991;
	padding: 16px 48px 16px 16px;
	border: 1px solid var(--supra-border);
	border-radius: 14px;
	background: #fff;
	color: var(--supra-blue);
	font-family: Inter, sans-serif;
	box-shadow: 0 6px 24px rgba(12, 58, 115, 0.25);
	animation: supra-rise 0.25s ease-out;
}

.supra-ios-guide__title {
	display: block;
	margin-bottom: 10px;
}

.supra-ios-guide__steps {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.supra-ios-guide__steps li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.95rem;
}

.supra-ios-guide__steps .supra-icon {
	color: var(--supra-sky);
}

.supra-ios-guide__close {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--supra-blue);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.supra-icon {
	display: inline-flex;
	flex: none;
}

/* Banner sin conexión */
.supra-offline-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
	background: var(--supra-blue);
	color: #fff;
	font: 600 0.9rem/1.4 Inter, sans-serif;
	text-align: center;
	animation: supra-fade 0.2s ease-out;
}

/* Toast de actualización */
.supra-toast {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom));
	z-index: 99995;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--supra-blue);
	color: #fff;
	font: 500 0.95rem Inter, sans-serif;
	animation: supra-rise 0.25s ease-out;
}

/* Navegación inferior: solo en modo app */
.supra-bottom-nav {
	display: none;
}

html.supramercado-standalone body {
	padding-bottom: calc(var(--supra-nav-height) + env(safe-area-inset-bottom));
}

html.supramercado-standalone .supra-bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99980;
	display: flex;
	padding-bottom: env(safe-area-inset-bottom);
	border-top: 1px solid var(--supra-border);
	background: #fff;
}

html.supramercado-standalone .supra-install-btn,
html.supramercado-standalone .supra-toast,
html.supramercado-standalone .supra-ios-guide {
	bottom: calc(var(--supra-nav-height) + 12px + env(safe-area-inset-bottom));
}

.supra-bottom-nav__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 44px;
	height: var(--supra-nav-height);
	padding: 4px 0;
	border: 0;
	background: transparent;
	color: var(--supra-blue);
	font: 500 0.7rem Inter, sans-serif;
	text-decoration: none;
	cursor: pointer;
}

.supra-bottom-nav__item.is-active {
	color: var(--supra-orange);
}

@keyframes supra-rise {
	from { transform: translateY(12px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

@keyframes supra-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.supra-ios-guide,
	.supra-toast,
	.supra-offline-banner {
		animation: none;
	}
}

.supra-install-close{position:fixed;right:10px;bottom:calc(52px + env(safe-area-inset-bottom));z-index:99991;width:26px;height:26px;border-radius:50%;background:#0C3A73;color:#fff;border:2px solid #fff;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.25);padding:0}
.supra-install-close[hidden]{display:none}