/* Visore dei cataloghi Idroair: pagina a tutto schermo, fuori dal tema. */
:root {
	--verde: #77be44; --verde-scuro: #3f7a1e; --notte: #16301a; --grafite: #1b211d;
	--barra: 60px;
	color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
	overflow: hidden; color: #fff; font-family: 'Fira Sans', system-ui, sans-serif;
	background: radial-gradient(ellipse at 50% 45%, #2c3a2f 0%, #18201a 60%, #101511 100%);
	-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* barra in alto */
.barra {
	position: fixed; inset: 0 0 auto; height: calc(var(--barra) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 14px 0;
	display: flex; align-items: center; gap: 14px; z-index: 5;
	background: rgb(16 21 17 / .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgb(255 255 255 / .07);
}
.torna { display: inline-flex; align-items: center; gap: 4px; color: #dfe6dd; text-decoration: none; font: 700 14px/1 'Fira Sans Extra Condensed', sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: 10px 8px 10px 2px; }
.torna:hover { color: var(--verde); }
.marchio img { display: block; background: #fff; padding: 5px 8px; width: 92px; height: auto; }
.barra h1 { flex: 1; min-width: 0; margin: 0; font: 700 18px/1.1 'Fira Sans Extra Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.azioni { display: flex; align-items: center; gap: 6px; }
.pagina { font: 600 14px/1 'Fira Sans', sans-serif; color: #aab5ac; padding: 0 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tasto { display: inline-flex; align-items: center; gap: 6px; height: 40px; min-width: 40px; justify-content: center; padding: 0 9px; border: 0; border-radius: 2px; background: transparent; color: #dfe6dd; cursor: pointer; text-decoration: none; font: 700 13px/1 'Fira Sans Extra Condensed', sans-serif; letter-spacing: .1em; }
.tasto:hover, .tasto:focus-visible { background: rgb(255 255 255 / .08); color: #fff; }
.tasto.scarica { background: var(--verde); color: var(--notte); padding: 0 12px; }
.tasto.scarica:hover { background: #8fd05c; }
.suono .muto { display: none; }
.suono[aria-pressed="false"] .onde { display: none; }
.suono[aria-pressed="false"] .muto { display: inline; }

/* il tavolo e il libro */
.tavolo { position: fixed; inset: calc(var(--barra) + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom); display: grid; place-items: center; }
.contenitore { width: var(--larghezza, 90vw); }
.libro { opacity: 0; transition: opacity .6s; } /* StPageFlip gli mette width:100% inline: la misura la dà .contenitore */
.libro.pronto { opacity: 1; }
.libro .foglio { background: #fff; overflow: hidden; }
.libro .foglio canvas { display: block; width: 100%; height: 100%; }
.libro .foglio.vuota { background: #fff linear-gradient(110deg, #f1f3f0 30%, #fff 50%, #f1f3f0 70%) 0 0 / 300% 100%; animation: luccica 1.4s linear infinite; }
@keyframes luccica { to { background-position: -150% 0; } }

.freccia { position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 88px; border: 0; background: rgb(255 255 255 / .06); color: #fff; cursor: pointer; display: grid; place-items: center; z-index: 3; transition: background .2s, opacity .2s; }
.freccia svg { width: 30px; height: 30px; }
.freccia:hover { background: var(--verde); color: var(--notte); }
.freccia.prec { left: 10px; } .freccia.succ { right: 10px; }
.freccia[disabled] { opacity: 0; pointer-events: none; }

.attesa { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: #aab5ac; font-size: 15px; pointer-events: none; transition: opacity .4s; }
.attesa.via { opacity: 0; }
.giro { width: 42px; height: 42px; border: 3px solid rgb(255 255 255 / .12); border-top-color: var(--verde); border-radius: 50%; animation: gira .9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.attesa p { margin: 0; }

/* la lente: una pagina in grande, da scorrere e da pizzicare */
.lente { position: fixed; inset: 0; z-index: 10; background: rgb(10 14 11 / .96); overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.lente[hidden] { display: none; }
.lente-foglio { padding: 70px 16px 30px; display: flex; justify-content: center; }
.lente-foglio canvas { display: block; background: #fff; box-shadow: 0 10px 40px rgb(0 0 0 / .5); max-width: none; }
.chiudi-lente { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 14px; background: var(--verde); color: var(--notte); z-index: 11; }
.chiudi-lente:hover { background: #8fd05c; color: var(--notte); }

.senza-js { position: fixed; inset: 40% 20px auto; text-align: center; }
.senza-js a { color: var(--verde); }

@media (max-width: 720px) {
	.marchio, .barra h1 { display: none; }
	.barra { justify-content: space-between; }
	.torna span { display: none; }
	.tasto.scarica span { display: none; }
	.freccia { width: 40px; height: 64px; background: rgb(0 0 0 / .25); }
	.freccia.prec { left: 4px; } .freccia.succ { right: 4px; }
	.pagina { padding: 0 4px; }
}