/* Foto Prali — l'area riservata come un'app per iPhone, nei colori e nei caratteri del sito Prali:
   blu notte e blu Prali, Big Shoulders per titoli e numeri, Instrument Sans per il resto.
   Sul telefono: barra in basso con la fotocamera al centro, fogli che salgono dal basso. Sul computer: barra laterale. */

@font-face { font-family: "Instrument Sans"; font-weight: 400 600; font-display: swap; src: url(/fonts/instrument-sans.woff2) format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 500 900; font-display: swap; src: url(/fonts/big-shoulders.woff2) format("woff2"); }

:root {
  --sfondo: #eef2f8; --carta: #fff; --velo: #e7ecf4; --linea: #e1e7f0; --linea-2: #ccd5e2;
  --testo: #16203f; --muto: #5d6b85;
  --blu: #3448a5; --blu-2: #283b8f; --blu-velo: #e7ebf8; --su-blu: #fff;
  --notte: #1b2a6b; --notte-2: #0f1530; --su-notte: #fff; --su-notte-2: #b9c6ef;
  --abete: #1d7a4d; --abete-velo: #e2f2e9; --ambra: #b5640c; --ambra-velo: #fbeedb; --rosso: #c0281c; --rosso-velo: #fce8e6;
  --titoli: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --corpo: "Instrument Sans", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --r: 12px; --r-l: 18px;
  --ombra: 0 10px 24px -14px rgb(27 42 107 / .45);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #0b0f1e; --carta: #151b31; --velo: #1d2440; --linea: #232b48; --linea-2: #333d63;
    --testo: #e9edf8; --muto: #9aa5c4;
    --blu: #8ea3ff; --blu-2: #a9b8ff; --blu-velo: #1e2747; --su-blu: #0b1030;
    --abete: #5cd39a; --abete-velo: #12301f; --ambra: #f0b45c; --ambra-velo: #33240e; --rosso: #ff8a7a; --rosso-velo: #3a1714;
    --ombra: 0 10px 24px -14px rgb(0 0 0 / .8);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sfondo); color: var(--testo); font: 400 15px/1.5 var(--corpo); }
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: var(--blu); }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
.muted { color: var(--muto); }
.rosso { color: var(--rosso); }
.blk { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.err { color: var(--rosso); margin: 0; }
.err:empty { display: none; }
.salta { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r); background: var(--testo); color: var(--carta); }
.salta:focus { top: 12px; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------ struttura: barra laterale (computer) e contenuto */
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 12px 14px;
  background: var(--carta); border-right: 1px solid var(--linea); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 6px; color: var(--testo); text-decoration: none; font: 800 27px/1 var(--titoli); }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav-g p { margin: 20px 10px 6px; font-size: 12.5px; font-weight: 600; color: var(--muto); }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px; border-radius: 10px; color: var(--testo); text-decoration: none; font-weight: 500; }
.nav a .ic { color: var(--muto); }
.nav a span:first-of-type { flex: 1; }
.nav a:hover { background: var(--velo); }
.nav a.on { background: var(--blu-velo); color: var(--blu); font-weight: 600; }
.nav a.on .ic { color: var(--blu); }
.conta { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--ambra); color: #fff; font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.io { margin-top: auto; padding: 14px 6px 0; border-top: 1px solid var(--linea); display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; }
.io-t { min-width: 0; }
.io-t strong, .io-t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.io-t small { color: var(--muto); font-size: 12.5px; }
.io-a { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 6px; }
.io-a .btn { flex: 1; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--blu-velo); color: var(--blu); font-weight: 600; font-size: 13.5px; }
.avatar.sm { width: 30px; height: 30px; font-size: 12px; }

.main { width: 100%; max-width: 1240px; padding: 34px 44px 72px; outline: none; }
.page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.page-h h1 { font: 800 46px/.95 var(--titoli); color: var(--notte); }
.page-d { margin: 10px 0 0; max-width: 68ch; color: var(--muto); }
.page-a { display: flex; gap: 8px; flex-wrap: wrap; }
.sez-t { font: 600 17px var(--corpo); margin: 24px 0 10px; }
.giu { display: none; }

/* ------------------------------------------------ controlli */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r);
  border: 1px solid var(--linea-2); background: var(--carta); color: var(--testo); font: 600 15px var(--corpo); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--velo); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--blu); border-color: var(--blu); color: var(--su-blu); }
.btn.primary:hover { background: var(--blu-2); }
.btn.go { background: var(--abete); border-color: var(--abete); color: #fff; }
.btn.danger { background: transparent; color: var(--rosso); border-color: transparent; }
.btn.danger:hover { background: var(--rosso-velo); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--velo); }
.btn.sm { min-height: 36px; padding: 0 13px; font-size: 14px; border-radius: 10px; }
.btn.wide { width: 100%; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }

input, select, textarea { width: 100%; min-height: 46px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--linea-2);
  background: var(--carta); color: var(--testo); font: 400 16px var(--corpo); }
input[type=checkbox] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--blu); flex: none; }
input:focus-visible, select:focus-visible { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-velo); }
input:disabled { background: var(--velo); color: var(--muto); }
.field { display: grid; gap: 6px; align-content: start; }
.field-l { font-size: 13.5px; font-weight: 600; }
.field small { color: var(--muto); font-size: 12.5px; line-height: 1.4; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.grid2, .grid3 { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
legend { padding: 0; margin-bottom: 10px; font-size: 13.5px; font-weight: 600; color: var(--muto); }
.form { display: grid; gap: 20px; }

.pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: var(--velo); color: var(--muto); white-space: nowrap; }
.pill.approvata { background: var(--abete-velo); color: var(--abete); }
.pill.attesa { background: var(--ambra-velo); color: var(--ambra); }
.pill.scartata { background: var(--rosso-velo); color: var(--rosso); }
.nota { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r); background: var(--ambra-velo); color: var(--ambra); }
.meta { display: flex; flex-wrap: wrap; column-gap: 10px; color: var(--muto); font-size: 13px; }

.blocco { background: var(--carta); border-radius: var(--r-l); padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--ombra); }
.blocco > h2, .blocco-h h2 { font: 600 18px var(--corpo); margin-bottom: 4px; }
.blocco > h2 + .muted, .blocco > p.muted { margin: 0 0 16px; }
.blocco-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.blocco-h p { margin: 2px 0 0; }
.blocco .row { margin-top: 16px; }
.passi { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 6px; max-width: 75ch; }
code { font: 13px ui-monospace, "SF Mono", Menlo, monospace; background: var(--velo); padding: 1px 6px; border-radius: 5px; overflow-wrap: anywhere; }
.vuoto { display: grid; gap: 14px; justify-items: center; padding: 40px 24px; text-align: center; color: var(--muto); background: var(--carta); border-radius: var(--r-l); }
.vuoto p { margin: 0; max-width: 46ch; }

/* elenchi a gruppi, come le Impostazioni di iOS */
.elenco { background: var(--carta); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--ombra); }
.elenco-r { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 9px 14px; border: 0; background: none; font: inherit; color: var(--testo); text-align: left; text-decoration: none; cursor: pointer; }
.elenco-r + .elenco-r { border-top: 1px solid var(--linea); }
.elenco-r:hover { background: var(--velo); }
div.elenco-r { cursor: default; }
div.elenco-r:hover { background: none; }
.elenco-t { flex: 1; min-width: 0; display: grid; }
.elenco-t strong { font-weight: 600; }
.elenco-t small { color: var(--muto); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elenco-g { margin: 24px 16px 8px; font-size: 13px; font-weight: 600; color: var(--muto); }
.chev { width: 16px; height: 16px; color: var(--linea-2); }
.ic-box { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--blu-velo); color: var(--blu); }
.ic-box.pieno { background: var(--blu); color: var(--su-blu); }
.ic-box.rosso { background: var(--rosso-velo); color: var(--rosso); }
.miniatura { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--velo); flex: none; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------ oggi */
.main.v-oggi { padding-top: 0; }
.oggi-testa { margin: 0 -44px; padding: 44px 44px 78px; background: linear-gradient(160deg, #3448a5, #1b2a6b 70%); color: var(--su-notte); border-radius: 0 0 28px 28px; }
.oggi-testa p { margin: 0; color: var(--su-notte-2); font-size: 14px; }
.oggi-testa h1 { font: 800 52px/.95 var(--titoli); margin-top: 4px; }
.oggi-corpo { margin-top: -50px; }
.numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.numero { display: grid; padding: 14px 16px; border-radius: var(--r-l); background: var(--carta); color: var(--testo); text-decoration: none; box-shadow: var(--ombra); }
.numero strong { font: 800 44px/1 var(--titoli); color: var(--notte); }
.numero span { font-size: 13px; color: var(--muto); }
.numero.evid strong { color: var(--ambra); }
a.numero:hover { outline: 2px solid var(--blu-velo); }
.oggi-sez { margin-top: 28px; }
.oggi-sez-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.oggi-sez-h h2 { font: 600 18px var(--corpo); }
.oggi-sez-h a { font-weight: 600; text-decoration: none; }
.oggi-ok { margin: 28px 0 0; padding: 14px 16px; border-radius: var(--r-l); background: var(--abete-velo); color: var(--abete); font-weight: 600; }
.striscia { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.striscia button { flex: none; width: 128px; height: 160px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; scroll-snap-align: start; position: relative; background: var(--velo); }
.striscia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.striscia button.s-attesa::after { content: ""; position: absolute; top: 8px; right: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--ambra); box-shadow: 0 0 0 2px #fff; }
.striscia button.s-scartata img { filter: grayscale(.7); opacity: .7; }

/* ------------------------------------------------ carica */
.carica { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.carica-b { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 18px 20px 20px; border-radius: var(--r-l); border: 0;
  background: var(--carta); color: var(--testo); font: inherit; cursor: pointer; box-shadow: var(--ombra); }
.carica-b .ic { width: 30px; height: 30px; color: var(--blu); margin-bottom: 12px; }
.carica-b strong { font: 800 28px/1 var(--titoli); }
.carica-b span { color: var(--muto); }
.carica-b.principale { background: var(--blu); color: var(--su-blu); }
.carica-b.principale .ic, .carica-b.principale span { color: inherit; }
.carica-b.principale span { opacity: .8; }
.coda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.coda li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px; border-radius: var(--r-l); background: var(--carta); box-shadow: var(--ombra); }
.coda li > img, .ott-img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--velo); overflow: hidden; }
.ott-img img { width: 100%; height: 100%; object-fit: cover; }
.coda strong { display: block; overflow-wrap: anywhere; }
.coda progress { width: 100%; height: 6px; accent-color: var(--blu); }
.coda li.ok .muted { color: var(--abete); }
.coda li.bad .muted { color: var(--rosso); }
.ott li .muted { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.ott .risparmio { color: var(--abete); font-weight: 600; }
.ott .link { font-weight: 600; }

/* foto trascinate dal computer: il velo blu su tutta la pagina mentre si trascina */
.velo-drop { display: none; position: fixed; inset: 0; z-index: 60; place-items: center; padding: 18px; background: rgb(27 42 107 / .55); pointer-events: none; }
body.trascino .velo-drop { display: grid; }
.velo-drop > div { display: grid; justify-items: center; gap: 6px; width: min(560px, 100%); padding: 48px 28px; border: 3px dashed rgb(255 255 255 / .85);
  border-radius: 28px; background: rgb(27 42 107 / .55); color: #fff; text-align: center; }
.velo-drop .ic { width: 48px; height: 48px; margin-bottom: 6px; }
.velo-drop strong { font: 800 40px/1 var(--titoli); }
.velo-drop span { color: #d5ddf7; }
.solo-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .solo-mouse { display: flex; } }
.nota-drop { align-items: center; gap: 10px; margin: -6px 0 18px; color: var(--muto); }
.nota-drop .ic { color: var(--blu); }

/* il foglio della fotocamera, come i menu di azioni di iOS */
.foglio { border: 0; padding: 0 10px calc(10px + env(safe-area-inset-bottom)); margin: auto auto 0; width: min(520px, 100vw); max-width: none; background: none; }
.foglio::backdrop { background: rgb(15 21 48 / .45); }
.foglio-gruppo { background: var(--carta); border-radius: 18px; overflow: hidden; margin-bottom: 8px; }
.foglio-v { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 16px; border: 0; background: none; font: inherit; color: var(--testo); text-align: left; cursor: pointer; }
.foglio-v + .foglio-v { border-top: 1px solid var(--linea); }
.foglio-v:hover { background: var(--velo); }
.foglio-v .ic-box { width: 42px; height: 42px; border-radius: 12px; }
.foglio-annulla { width: 100%; padding: 16px; border: 0; border-radius: 18px; background: var(--carta); color: var(--blu); font: 600 17px var(--corpo); cursor: pointer; }

/* ------------------------------------------------ archivio */
.filtri { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.filtri input { max-width: 340px; flex: 1 1 220px; }
.segmenti { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--velo); }
.segmenti button { border: 0; background: none; color: var(--muto); font: 600 14px var(--corpo); padding: 7px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.segmenti button[aria-pressed="true"] { background: var(--carta); color: var(--testo); box-shadow: 0 1px 3px rgb(16 22 40 / .15); }
.provino { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px 16px; }
.fotogramma { margin: 0; cursor: pointer; border-radius: var(--r); }
.fg-img { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; background: var(--velo); }
.fg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* lo stato: un pallino sulla foto (arancio da approvare, rosso scartata); le approvate non ne hanno */
.s-attesa { --stato: var(--ambra); } .s-approvata { --stato: var(--abete); } .s-scartata { --stato: var(--rosso); }
.fotogramma.s-attesa .fg-img::after, .fotogramma.s-scartata .fg-img::after { content: ""; position: absolute; top: 9px; right: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--stato); box-shadow: 0 0 0 2px #fff; }
.fg-img input { position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; }
.fotogramma figcaption { display: grid; gap: 1px; padding: 8px 2px 0; }
.fotogramma strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fotogramma .stato { font-size: 12.5px; font-weight: 600; color: var(--stato); }
.fotogramma.s-scartata img { filter: grayscale(.7); opacity: .75; }

/* selezione di molte foto (come «Seleziona» nell'app Foto): tocco = scelta, barra in basso con l'azione */
.provino.scelta .fotogramma { cursor: pointer; }
.provino.scelta .fg-img input { width: 24px; height: 24px; border-radius: 50%; }
.fotogramma.sel .fg-img { outline: 3px solid var(--blu); outline-offset: -3px; }
.fotogramma.sel .fg-img img { opacity: .82; }
.main.scegliendo { padding-bottom: 140px; }
.barra-sel { position: fixed; z-index: 35; left: calc(252px + 24px); right: 24px; bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 10px 10px 18px; border-radius: 18px; background: var(--carta); box-shadow: 0 16px 40px -10px rgb(15 21 48 / .45); }
.barra-sel strong { flex: 1 1 160px; }
.barra-sel select { width: auto; flex: 0 1 300px; min-height: 42px; }

/* ------------------------------------------------ finestre */
.dlg { border: 0; padding: 0; border-radius: 18px; width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  background: var(--carta); color: var(--testo); box-shadow: 0 24px 70px rgb(15 21 48 / .35); }
.dlg-largo { width: min(1100px, calc(100vw - 24px)); }
.dlg::backdrop { background: rgb(15 21 48 / .5); }
.dlg-in { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.dlg header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--linea); }
.dlg header h2 { font: 800 30px/1 var(--titoli); color: var(--notte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--velo); color: var(--muto); font-size: 22px; line-height: 1; cursor: pointer; flex: none; }
.icon:hover { color: var(--testo); }
.dlg-body { padding: 22px; overflow: auto; }
.dlg footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--linea); }
.spacer { flex: 1; }
.dett { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 26px; align-items: start; }
.dett-foto { display: grid; gap: 8px; justify-items: center; position: sticky; top: 0; }
.dett-foto small { font-size: 12.5px; text-align: center; }
.dett-dati { display: grid; gap: 14px; }
.info { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.info dt { font-size: 12.5px; color: var(--muto); }
.info dd { margin: 0; font-weight: 500; }
.fuoco { position: relative; line-height: 0; max-width: 100%; }
.fuoco img { display: block; width: auto; max-width: 100%; max-height: 62vh; border-radius: var(--r); }
.fuoco.si { cursor: crosshair; }
.fuoco-segno { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none;
  border: 3px solid #fff; box-shadow: 0 0 0 2px rgb(0 0 0 / .45), inset 0 0 0 2px rgb(0 0 0 / .25); transition: left .2s, top .2s; }
.fuoco-segno::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #fff; }
.fm-gruppo h3 { font: 600 14px var(--corpo); color: var(--muto); margin: 22px 0 8px; }
.fm-gruppo:first-of-type h3 { margin-top: 6px; }
.fm-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: var(--r-l); }
.fm-lista li { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 14px; }
.fm-lista li + li { border-top: 1px solid var(--linea); }
.ant-box { width: 96px; height: 96px; display: grid; place-items: center; }
.ant { background: #000 center / cover no-repeat; border-radius: 4px; box-shadow: 0 0 0 1px var(--linea); }
.fm-t { display: grid; gap: 1px; min-width: 0; }
.fm-t small a { font-weight: 600; margin-right: 10px; }

/* ------------------------------------------------ revisione: il mazzo di carte */
.main.v-revisione { max-width: none; min-height: 100vh; padding: 0; background: radial-gradient(120% 70% at 50% 0%, #26377f, #0f1530 70%); color: #fff; }
.main.v-revisione .page-h { padding: 34px 44px 0; }
.main.v-revisione .page-h h1 { color: #fff; }
.main.v-revisione .provino { padding: 0 44px 44px; }
.main.v-revisione .fotogramma strong { color: #fff; }
.main.v-revisione .meta { color: var(--su-notte-2); }
.main.v-revisione .btn.ghost { color: #fff; }
.main.v-revisione .btn.ghost:hover { background: rgb(255 255 255 / .1); }
.rev { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 0 20px 28px; }
.rev-h { width: 100%; max-width: 560px; display: flex; align-items: center; gap: 14px; padding: 24px 0 18px; }
.rev-h h1 { font: 800 34px/1 var(--titoli); }
.rev-n { margin: 0; color: var(--su-notte-2); }
.rev-h .btn { margin-left: auto; }
.mazzo { position: relative; width: min(100%, 460px); flex: 1; min-height: 360px; max-height: 620px; }
.carta { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 24px 48px rgb(0 0 0 / .5);
  touch-action: none; cursor: grab; user-select: none; --si: 0; --no: 0; }
.carta:active { cursor: grabbing; }
.carta img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.carta.dietro { transform: scale(.94) translateY(-16px); opacity: .55; pointer-events: none; }
.carta-info { position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: 70px 20px 18px; background: linear-gradient(transparent, rgb(0 0 0 / .78)); }
.carta-info strong { font: 800 30px/1 var(--titoli); }
.carta-info span { font-size: 14px; color: rgb(255 255 255 / .82); }
.timbro { position: absolute; top: 26px; padding: 4px 14px; border: 4px solid; border-radius: 10px; font: 800 30px/1.1 var(--titoli); text-transform: uppercase; letter-spacing: .04em; }
.timbro.si { left: 22px; color: #5cd39a; transform: rotate(-14deg); opacity: var(--si); }
.timbro.no { right: 22px; color: #ff6b5c; transform: rotate(14deg); opacity: var(--no); }
.rev-az { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 24px; }
.tondo { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; border: 0; cursor: pointer; }
.tondo .ic { width: 32px; height: 32px; stroke-width: 2.4; }
.tondo.no { background: #fff; color: #c0281c; }
.tondo.si { background: #1d7a4d; color: #fff; }
.tondo.dett { width: 52px; height: 52px; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .28); color: #fff; }
.tondo.dett .ic { width: 22px; height: 22px; stroke-width: 1.8; }
.tondo:hover { filter: brightness(1.08); }
.rev-aiuto { margin: 14px 0 0; font-size: 13px; color: var(--su-notte-2); text-align: center; }
.rev-vuoto { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; }
.rev-vuoto .ic { width: 56px; height: 56px; color: #5cd39a; }
.rev-vuoto h1 { font: 800 44px/1 var(--titoli); }
.rev-vuoto p { margin: 0 0 10px; color: var(--su-notte-2); }

/* ------------------------------------------------ caroselli, formati, persone */
.righe { background: var(--carta); border-radius: var(--r-l); box-shadow: var(--ombra); }
.riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 18px 22px; }
.riga + .riga { border-top: 1px solid var(--linea); }
.riga h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 600 17px var(--corpo); }
.riga p { margin: 4px 0 8px; }
.riga .row { justify-content: flex-end; }
.url { display: inline-block; }
.tab { width: 100%; border-collapse: collapse; }
.tab thead th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muto); padding: 8px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tab td, .tab tbody th { padding: 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; text-align: left; }
.tab tbody tr:last-child > * { border-bottom: 0; }
.tab td:last-child { text-align: right; width: 1%; white-space: nowrap; }
.tab .num { text-align: right; font-variant-numeric: tabular-nums; }
.tab tr.spento td { color: var(--muto); }
.tab-scroll { overflow-x: auto; }
.chi { display: flex; align-items: center; gap: 10px; }
.tu { margin-left: 8px; padding: 1px 7px; border-radius: 99px; background: var(--velo); color: var(--muto); font-size: 11.5px; font-weight: 600; }
.accessi { display: flex; flex-wrap: wrap; gap: 6px; }
.acc { display: inline-grid; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--linea-2); font-size: 12.5px; font-weight: 600; }
.acc small { font-weight: 400; color: var(--muto); }
.matrice tbody th { font-weight: 600; white-space: nowrap; }
.matrice thead th:not(:first-child), .matrice td.si-no { text-align: center; }
.matrice td.num { width: auto; }
.matrice .si { color: var(--blu); font-size: 13px; }
.matrice .no { color: var(--linea-2); }
.matrice tr.clic { cursor: pointer; }
.matrice tr.clic:hover > * { background: var(--velo); }
.perm { display: grid; gap: 2px; margin: -6px 0 0; font-size: 13px; }
.perm-lista { display: grid; gap: 8px; }
.perm-scelta { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 10px 14px; border: 1px solid var(--linea); border-radius: var(--r); cursor: pointer; }
.perm-scelta:has(input:checked) { border-color: var(--blu); background: var(--blu-velo); }
.perm-scelta input { margin-top: 2px; }
.perm-scelta strong, .perm-scelta small { display: block; }
.perm-scelta small { color: var(--muto); }
.zona { display: grid; gap: 4px; place-items: center; text-align: center; padding: 38px 16px; margin: 0 0 18px; border: 2px dashed var(--linea-2);
  border-radius: var(--r-l); background: var(--carta); cursor: pointer; }
.zona strong { font: 800 26px/1.1 var(--titoli); }
.zona.su, .zona:hover { border-color: var(--blu); background: var(--blu-velo); }

/* ------------------------------------------------ accesso: blu del marchio, foglio bianco che sale */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(380px, 1fr); background: var(--carta); }
.login-alto { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 48px; color: #fff;
  background: radial-gradient(130% 80% at 20% 0%, #3448a5, #1b2a6b 55%, #0f1530); }
.login-sfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; mix-blend-mode: luminosity; }
.login-marchio { position: relative; max-width: 420px; }
.login-logo { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 12px 28px rgb(0 0 0 / .35); }
.login-marchio h1 { font: 800 76px/.9 var(--titoli); margin: 26px 0 12px; }
.login-marchio p { margin: 0; color: #c9d4f6; font-size: 17px; }
.login-credito { position: absolute; left: 48px; bottom: 24px; margin: 0; font-size: 12.5px; color: rgb(255 255 255 / .6); }
.login-foglio { display: grid; place-items: center; padding: 40px 24px; }
.login-in { width: min(380px, 100%); display: grid; gap: 12px; }
.login-in h2 { font: 800 34px/1 var(--titoli); color: var(--notte); margin-bottom: 8px; }
.g-btn { min-height: 44px; }
.login-form { display: grid; gap: 12px; }

/* ------------------------------------------------ avvisi */
#toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%, 20px); display: flex; align-items: center; gap: 14px;
  max-width: calc(100vw - 32px); padding: 12px 14px 12px 18px; border-radius: 14px; background: #16203f; color: #fff; font-weight: 500;
  box-shadow: 0 10px 30px rgb(0 0 0 / .25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast.bad { background: var(--rosso); }
#toast button { border: 0; background: rgb(255 255 255 / .16); color: #fff; font: 600 14px var(--corpo); padding: 6px 12px; border-radius: 9px; cursor: pointer; }

/* ------------------------------------------------ telefono: barra in basso, fogli dal basso */
@media (max-width: 900px) {
  .shell { display: block; }
  .side { display: none; }
  .main { padding: max(20px, env(safe-area-inset-top)) 16px 120px; }
  .page-h { margin-bottom: 16px; }
  .page-h h1 { font-size: 40px; }
  .giu { position: fixed; inset: auto 0 0; z-index: 30; display: flex; align-items: flex-start; padding: 8px 6px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--carta) 94%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--linea); }
  .giu a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 2px; font-size: 11px; font-weight: 600; color: var(--muto); text-decoration: none; position: relative; }
  .giu a.on { color: var(--blu); }
  .giu a .conta { position: absolute; top: -4px; left: 52%; padding: 0 6px; font-size: 11px; min-width: 18px; }
  .giu-cam { flex: 1; display: grid; justify-items: center; margin-top: -30px; padding: 0; border: 0; background: none; cursor: pointer; }
  .giu-cam span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--blu); color: var(--su-blu); border: 4px solid var(--carta);
    box-shadow: 0 8px 18px -4px rgb(52 72 165 / .6); }
  .giu-cam .ic { width: 28px; height: 28px; }
  #toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .barra-sel { left: 10px; right: 10px; bottom: calc(96px + env(safe-area-inset-bottom)); padding: 12px; }
  .barra-sel select { flex: 1 1 100%; width: 100%; min-width: 0; order: 2; }
  .barra-sel .btn.primary { order: 3; flex: 1; }
  .main.scegliendo { padding-bottom: 260px; }
  .oggi-testa { margin: 0 -16px; padding: max(28px, calc(env(safe-area-inset-top) + 14px)) 20px 70px; }
  .oggi-testa h1 { font-size: 44px; }
  .numeri { gap: 8px; }
  .numero { padding: 12px; }
  .numero strong { font-size: 38px; }
  .numero span { font-size: 12px; }
  .grid2, .grid3, .dett { grid-template-columns: 1fr; }
  .carica { grid-template-columns: 1fr 1fr; }
  .carica-b { padding: 14px 14px 16px; }
  .carica-b strong { font-size: 22px; }
  .dett-foto { position: static; }
  .riga { grid-template-columns: 1fr; }
  .riga .row { justify-content: flex-start; }
  .fm-lista li { grid-template-columns: 72px minmax(0, 1fr); }
  .fm-lista li .row { grid-column: 1 / -1; }
  .ant-box { width: 72px; height: 72px; zoom: .75; }
  /* l'archivio come l'app Foto: quadrati da bordo a bordo, i dati si leggono aprendo la foto */
  .v-archivio .provino { grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -16px; }
  .v-archivio .fg-img { aspect-ratio: 1; border-radius: 0; }
  .v-archivio .fotogramma { border-radius: 0; }
  .v-archivio .fotogramma figcaption { display: none; }
  .filtri { flex-direction: column; align-items: stretch; }
  .filtri input { max-width: none; flex: none; }
  .segmenti { overflow-x: auto; scrollbar-width: none; }
  .tab.persone thead { display: none; }
  .tab.persone tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .tab.persone td { padding: 0; border: 0; }
  .tab.persone td:last-child { grid-row: 1; grid-column: 2; }
  .blocco { padding: 18px 16px; }
  .main.v-revisione { padding: 0 0 100px; }
  .main.v-revisione .page-h { padding: 20px 16px 0; }
  .main.v-revisione .provino { padding: 0 16px 24px; }
  .rev { min-height: calc(100dvh - 100px); padding: 0 16px 12px; }
  .rev-h { padding: max(16px, env(safe-area-inset-top)) 0 14px; }
  .mazzo { min-height: 0; max-height: none; }
  .rev-az { margin-top: 18px; }
  /* le finestre diventano fogli che salgono dal basso */
  .dlg, .dlg-largo { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 92dvh; }
  .dlg-in { max-height: 92dvh; }
  .dlg footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .login { grid-template-columns: 1fr; align-content: stretch; }
  .login-alto { min-height: 52vh; padding: 60px 26px 70px; justify-content: flex-end; }
  .login-marchio h1 { font-size: 60px; }
  .login-credito { left: 26px; bottom: 44px; }
  .login-foglio { margin-top: -28px; position: relative; border-radius: 28px 28px 0 0; background: var(--carta); padding: 28px 22px calc(28px + env(safe-area-inset-bottom)); place-items: start stretch; }
  .login-in { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}