/* Colori ricavati dal file del logo (pixel dominanti) */
:root {
  --blu: #224465;
  --giallo: #e3c41c;
  --sfondo: #e9ecef;
  --bianco: #ffffff;
  --testo: #1d2b38;
  --bar-h: 56px;
  --tool-h: 56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--sfondo);
  color: var(--testo);
  overflow: hidden;
}
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Barra superiore */
.topbar {
  height: var(--bar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: var(--bianco);
  border-bottom: 3px solid var(--giallo);
}
.brand img { height: 32px; width: auto; display: block; }
.title { font-weight: 600; color: var(--blu); flex: 1; white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0 10px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--blu);
  font: inherit; font-size: 18px; cursor: pointer; text-decoration: none;
}
.btn:hover { background: rgba(34, 68, 101, .08); }
.btn-download { background: var(--blu); color: var(--bianco); font-size: 15px; }
.btn-download:hover { background: #1a3550; }

/* Area di lettura */
.stage {
  position: relative;
  height: calc(100vh - var(--bar-h) - var(--tool-h));
  height: calc(100dvh - var(--bar-h) - var(--tool-h));
  display: flex; align-items: center; justify-content: center;
  padding: 16px 56px;
  touch-action: pan-y;
  user-select: none;
}
.spread {
  height: 100%; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.spread img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  background: var(--bianco);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
  cursor: zoom-in;
  -webkit-user-drag: none;
}
.spread.double img { max-width: 50%; }
.spread.double img:first-child { box-shadow: -4px 4px 18px rgba(0, 0, 0, .18); }
.spread.double img:last-child  { box-shadow:  4px 4px 18px rgba(0, 0, 0, .18); }

.nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--bianco); color: var(--blu);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
}
.nav:disabled { opacity: .3; cursor: default; }
.nav-prev { left: 8px; }
.nav-next { right: 8px; }

/* Barra inferiore */
.toolbar {
  height: var(--tool-h);
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: var(--bianco);
  border-top: 1px solid #d5dbe1;
  padding-bottom: env(safe-area-inset-bottom);
}
.pager { display: flex; align-items: center; gap: 6px; color: var(--blu); font-weight: 600; }
.pager input {
  width: 64px; height: 36px; text-align: center;
  border: 1px solid #c4ccd4; border-radius: 6px;
  font: inherit; color: var(--blu);
}

/* Miniature */
.thumbs {
  position: fixed; left: 0; right: 0; bottom: var(--tool-h);
  max-height: 45vh; overflow-y: auto;
  background: var(--bianco);
  border-top: 3px solid var(--giallo);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .15);
  z-index: 5;
}
.thumbs-grid {
  display: grid; gap: 12px; padding: 16px;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}
.thumb { border: 0; padding: 0; background: none; cursor: pointer; text-align: center; color: var(--testo); font-size: 12px; }
.thumb img { width: 100%; height: auto; display: block; background: var(--sfondo); border: 2px solid transparent; border-radius: 4px; aspect-ratio: var(--ratio, 0.75); object-fit: contain; }
.thumb.active img { border-color: var(--giallo); }

/* Zoom */
.zoom { position: fixed; inset: 0; background: rgba(20, 30, 40, .96); z-index: 10; }
.zoom-bar {
  position: absolute; top: 10px; right: 10px; z-index: 11;
  display: flex; gap: 6px; background: var(--bianco); border-radius: 10px; padding: 4px;
}
.zoom-scroll { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.zoom-scroll img { display: block; margin: 0 auto; width: 100%; height: auto; }

[hidden] { display: none !important; }

/* Mobile */
@media (max-width: 899px) {
  .stage { padding: 8px; }
  .nav { display: none; }
  .btn-download .lbl { display: none; }
  .brand img { height: 26px; }
  .title { font-size: 15px; }
}