/* Pannello gestione lavori — prototipo locale. Colori e caratteri del marchio Zotta. */
@font-face { font-family: 'Manrope'; src: url('/font/manrope-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/font/manrope-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/font/manrope-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/font/barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/font/barlow-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ink: #121a18;
  --ink-2: #19221f;
  --ink-3: #27312e;
  --sfondo: #f3f4ef;
  --carta: #fbfbf8;
  --testo: #1b2220;
  --testo-2: #4a5452;
  --linea: rgba(27, 34, 32, 0.14);
  --linea-forte: rgba(27, 34, 32, 0.28);
  --lime: #9ad916;
  --verde: #3f6e06;
  --verde-chiaro: #e9f5cf;
  --rosso: #b42318;
  --rosso-chiaro: #fdecea;
  --giallo: #fff4d6;
  --giallo-ink: #6d4a00;
  --giallo-linea: #d9a93f;
  --r: 8px;
  --r-s: 6px;
  --ombra: 0 12px 30px -18px rgba(18, 26, 24, 0.45);
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --corpo: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --barra: 76px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--sfondo);
  color: var(--testo);
  font: 400 16px/1.55 var(--corpo);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Avviso permanente: è un prototipo */
.prototipo {
  display: flex; flex-wrap: wrap; gap: 2px 10px; justify-content: center;
  padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top));
  background: var(--giallo); color: var(--giallo-ink);
  border-bottom: 1px solid var(--giallo-linea);
  font-size: 0.82rem; text-align: center;
}

/* Testata */
.testata {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 8px 16px;
  background: var(--ink); color: #f3f4ef;
}
.testata__marchio img { height: 38px; width: auto; }
.testata__titolo { font: 600 1.25rem/1 var(--display); letter-spacing: 0.02em; color: #d3d8da; }
.testata__link {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border: 1px solid rgba(243, 244, 239, 0.3); border-radius: var(--r-s);
  color: inherit; text-decoration: none; font-size: 0.9rem; font-weight: 600;
}
.testata__link:hover { border-color: var(--lime); color: var(--lime); }
@media (max-width: 420px) { .testata__titolo { display: none; } }

[hidden] { display: none !important; }
main:focus { outline: none; }
main { display: block; max-width: 1180px; margin: 0 auto; padding: 20px 16px calc(var(--barra) + 40px); outline: none; }
.caricamento { padding: 40px 0; color: var(--testo-2); }

/* Titoli e testi */
.titolo { font: 700 clamp(2rem, 1.6rem + 1.6vw, 2.8rem)/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.005em; }
.sottotitolo { margin-top: 6px; color: var(--testo-2); }
.intestazione { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 24px; margin-bottom: 18px; }
.indietro { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--testo-2); text-decoration: none; font-weight: 600; }
.indietro:hover { color: var(--verde); }

/* Pulsanti: grandi, facili da toccare */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--r-s);
  background: var(--lime); color: var(--ink);
  font-weight: 700; font-size: 0.98rem; text-decoration: none; cursor: pointer;
  transition: background-color 160ms var(--ease), transform 120ms var(--ease);
  touch-action: manipulation;
}
.pulsante:hover { background: #aee52b; }
.pulsante:active { transform: scale(0.97); }
.pulsante:disabled { opacity: 0.5; cursor: not-allowed; }
.pulsante--scuro { background: var(--ink); color: #f3f4ef; }
.pulsante--scuro:hover { background: var(--ink-3); }
.pulsante--secondario { background: transparent; border-color: var(--linea-forte); color: var(--testo); }
.pulsante--secondario:hover { background: rgba(27, 34, 32, 0.05); }
.pulsante--pericolo { background: transparent; border-color: rgba(180, 35, 24, 0.4); color: var(--rosso); }
.pulsante--pericolo:hover { background: var(--rosso-chiaro); }
.pulsante--pericolo-pieno { background: var(--rosso); color: #fff; }
.pulsante--pericolo-pieno:hover { background: #912018; }
.pulsante--piccolo { min-height: 40px; padding: 0 12px; font-size: 0.88rem; }
.pulsante svg { width: 20px; height: 20px; flex: none; }

/* Filtri */
.filtri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filtri button {
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linea-forte);
  background: var(--carta); cursor: pointer; font-weight: 600; font-size: 0.92rem;
}
.filtri button[aria-pressed='true'] { background: var(--ink); color: #f3f4ef; border-color: var(--ink); }

/* Elenco dei lavori */
.elenco { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); list-style: none; margin: 0; padding: 0; }
.scheda {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden;
  transition: box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.scheda:hover { box-shadow: var(--ombra); transform: translateY(-2px); }
.scheda__foto { position: relative; aspect-ratio: 4 / 3; background: var(--ink-2); }
.scheda__foto img { width: 100%; height: 100%; object-fit: cover; }
.scheda__corpo { display: grid; gap: 6px; padding: 14px 16px 16px; }
.scheda__titolo { font: 600 1.45rem/1.02 var(--display); }
.scheda__titolo a { color: inherit; text-decoration: none; }
.scheda__titolo a::after { content: ''; position: absolute; inset: 0; }
.scheda__meta { font-size: 0.88rem; color: var(--testo-2); }
.etichette { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; line-height: 1.4; }
.chip--pubblicato { background: var(--lime); color: var(--ink); }
.chip--bozza { background: #e7e8e3; color: var(--testo); }
.chip--demo { background: var(--giallo); color: var(--giallo-ink); border: 1px solid var(--giallo-linea); }
.vuoto { padding: 40px 20px; text-align: center; border: 1px dashed var(--linea-forte); border-radius: var(--r); background: var(--carta); }
.vuoto p + p { margin-top: 8px; color: var(--testo-2); }

/* Barra delle azioni: fissa in basso sul telefono */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  min-height: var(--barra); padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(251, 251, 248, 0.96); border-top: 1px solid var(--linea);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.barra > * { flex: 1 1 0; }
.barra .barra__sinistra { flex: 0 0 auto; margin-right: auto; }
/* Editor su telefono: in alto le due azioni principali, sotto anteprima ed eliminazione */
@media (max-width: 759px) {
  .barra--editor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .barra--editor [data-azione='bozza'] { order: 1; }
  .barra--editor [data-azione='pubblica'] { order: 2; }
  .barra--editor [data-azione='anteprima'] { order: 3; min-height: 44px; }
  .barra--editor [data-azione='elimina'] { order: 4; min-height: 44px; margin: 0; }
  .barra--editor:not(:has([data-azione='elimina'])) [data-azione='anteprima'] { grid-column: 1 / -1; }
  main:has(.barra--editor) { padding-bottom: 180px; }
}
@media (min-width: 760px) {
  .barra > * { flex: 0 0 auto; }
  .barra { padding-inline: max(16px, calc((100vw - 1180px) / 2 + 16px)); }
}

/* Modulo */
.modulo { display: grid; gap: 16px; }
.sezione { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r); padding: 18px 16px 20px; }
.sezione > h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font: 700 1.6rem/1 var(--display); text-transform: uppercase; }
.sezione > h2 .numero { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 1.05rem; }
.sezione > .aiuto { margin-bottom: 14px; }
.griglia-campi { display: grid; gap: 14px; }
@media (min-width: 760px) {
  .sezione { padding: 22px 24px 24px; }
  .griglia-campi--2 { grid-template-columns: 1fr 1fr; }
  .campo--pieno { grid-column: 1 / -1; }
}
.campo { display: grid; gap: 6px; }
.campo > label, .campo > .etichetta { font-weight: 700; font-size: 0.95rem; }
.facoltativo { font-weight: 500; color: var(--testo-2); }
.aiuto { font-size: 0.86rem; color: var(--testo-2); }
.contatore { justify-self: end; font-size: 0.8rem; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.contatore.is-oltre { color: var(--rosso); font-weight: 700; }
input[type='text'], input[type='date'], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  background: #fff; border: 1px solid var(--linea-forte); border-radius: var(--r-s);
  font-size: 16px; /* niente zoom automatico su telefono */
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--verde); outline: 2px solid rgba(63, 110, 6, 0.25); outline-offset: 0; }
[aria-invalid='true'] { border-color: var(--rosso) !important; }
.errore-campo { color: var(--rosso); font-size: 0.86rem; font-weight: 600; }
.indirizzo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.9rem; color: var(--testo-2); }
.indirizzo code { padding: 2px 6px; border-radius: 4px; background: #eceee7; color: var(--testo); word-break: break-all; }
.interruttore { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; font-weight: 600; }
.interruttore input { width: 24px; height: 24px; accent-color: var(--verde); flex: none; }

/* Riepilogo errori */
.riepilogo { padding: 14px 16px; border-radius: var(--r); background: var(--rosso-chiaro); border: 1px solid rgba(180, 35, 24, 0.3); color: #7a1a12; }
.riepilogo h2 { font: 700 1.05rem/1.3 var(--corpo); margin-bottom: 6px; }
.riepilogo ul { margin: 0; padding-left: 20px; }
.riepilogo a { color: inherit; font-weight: 700; }

/* Foto */
.carica { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.carica label { position: relative; }
.carica input[type='file'] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.carica input[type='file']:focus-visible + span { outline: 3px solid var(--verde); outline-offset: 2px; }
.foto-lista { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); list-style: none; margin: 0 0 14px; padding: 0; }
.foto {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
}
.foto.is-copertina { border-color: var(--verde); box-shadow: 0 0 0 2px var(--lime); }
.foto__img { position: relative; aspect-ratio: 4 / 3; background: var(--ink-2); }
.foto__img img { width: 100%; height: 100%; object-fit: cover; }
.foto__img .chip { position: absolute; left: 8px; top: 8px; }
.foto__corpo { display: grid; gap: 10px; padding: 10px 12px 12px; }
.foto__misure { display: grid; gap: 2px; font-size: 0.8rem; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.foto__misure strong { color: var(--verde); }
.foto__comandi { display: flex; flex-wrap: wrap; gap: 6px; }
.foto__comandi .pulsante { flex: 1 1 auto; }
.foto.is-lavoro { display: flex; align-items: center; gap: 12px; padding: 12px; }
.foto.is-errore { border-color: rgba(180, 35, 24, 0.4); background: var(--rosso-chiaro); }
.rotella { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--linea-forte); border-top-color: var(--verde); animation: gira 0.8s linear infinite; flex: none; }
@keyframes gira { to { transform: rotate(360deg); } }
.badge-gps { display: inline-flex; gap: 6px; align-items: center; color: var(--verde); font-weight: 700; font-size: 0.8rem; }

/* Confronti prima/dopo */
.confronto { display: grid; gap: 12px; padding: 14px; margin-bottom: 12px; border: 1px solid var(--linea); border-radius: var(--r); background: #fff; }
.confronto__coppia { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.confronto__coppia img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--r-s); background: var(--ink-2); }
.avviso { padding: 10px 12px; border-radius: var(--r-s); background: var(--giallo); color: var(--giallo-ink); border: 1px solid var(--giallo-linea); font-size: 0.88rem; }
.privacy { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r); background: var(--giallo); border: 1px solid var(--giallo-linea); color: var(--giallo-ink); }
.privacy ul { margin: 0; padding-left: 20px; }
.privacy .interruttore { color: var(--testo); }

/* Anteprima della card (come sul sito) */
.anteprima-card { max-width: 380px; background: #19221f; color: #f3f4ef; border-radius: 6px; overflow: hidden; }
.anteprima-card img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.anteprima-card div { display: grid; gap: 8px; padding: 18px 20px 20px; }
.anteprima-card .cat { color: var(--lime); font-weight: 600; font-size: 0.82rem; }
.anteprima-card h3 { font: 600 1.8rem/1 var(--display); }
.anteprima-card p { color: #aeb6b3; font-size: 0.92rem; }
.anteprima-flex { display: grid; gap: 16px; align-items: start; }
@media (min-width: 760px) { .anteprima-flex { grid-template-columns: 380px 1fr; } }

/* Notifiche */
.notifiche { position: fixed; z-index: 50; left: 16px; right: 16px; bottom: calc(var(--barra) + 12px); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.notifica {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 560px; width: 100%;
  padding: 14px 16px; border-radius: var(--r); background: var(--ink); color: #f3f4ef; box-shadow: var(--ombra);
  font-weight: 600; animation: entra 220ms var(--ease);
}
.notifica::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); flex: none; }
.notifica--errore::before { background: #ff8a7a; }
.notifica a { color: var(--lime); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* Finestra di conferma */
.finestra { width: min(100% - 32px, 460px); padding: 0; border: 0; border-radius: var(--r); box-shadow: var(--ombra); }
.finestra::backdrop { background: rgba(18, 26, 24, 0.55); }
.finestra form { display: grid; gap: 14px; padding: 22px 20px 18px; }
.finestra h2 { font: 700 1.6rem/1.05 var(--display); text-transform: uppercase; }
.finestra__azioni { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.finestra__azioni .pulsante { flex: 1 1 auto; }

/* Strumento "Prepara foto" */
.strumento { display: grid; gap: 16px; }
.risultati { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .rotella { animation: none; border-top-color: var(--linea-forte); }
}

/* utilità (niente stili in linea: la CSP del prototipo li blocca) */
[data-x='titoletto'] { font-weight: 700; margin-bottom: 8px; }
[data-x='eredita'] { color: inherit; }
[data-x='sopra'] { margin-top: 8px; }
[data-x='sotto'] { margin-bottom: 12px; }
[data-x='vuota'] { aspect-ratio: 4 / 3; display: grid; place-items: center; color: #aeb6b3; }
[data-x='forte'] { color: var(--testo); }

/* il riepilogo e le sezioni non finiscono sotto la testata fissa */
#riepilogo, .sezione, .campo { scroll-margin-top: 84px; }
/* telefono: le notifiche compaiono in alto, sotto la testata, senza coprire la barra delle azioni */
@media (max-width: 759px) {
  .notifiche { top: calc(68px + env(safe-area-inset-top)); bottom: auto; }
  @keyframes entra { from { opacity: 0; transform: translateY(-8px); } }
}