/* ══ Papillon — la gestione ══
   È uno STRUMENTO, non il sito: stessa famiglia (cacao, panna, ambra,
   ciliegia, Boska + Switzer) ma con le libertà che un'app deve avere —
   superfici, bersagli grandi, stati espliciti. Pensata per un pollice. */

:root {
  --cacao: #170E0A;
  --superficie: #201510;      /* le righe e le schede: il sito non ce l'ha, l'app sì */
  --superficie-alta: #2A1C15; /* premuto, campi */
  --panna: #F2E6D4;
  --panna-62: rgba(242, 230, 212, .62);
  --panna-38: rgba(242, 230, 212, .38);
  --regola: rgba(242, 230, 212, .13);
  --ambra: #E8A54E;
  --ciliegia: #B3392A;
  --verde: #6FBF7F;           /* solo per "salvato": in un attrezzo serve */
  --display: "Boska", "Iowan Old Style", Georgia, serif;
  --testo: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --barra: 4.5rem;            /* la barra del salvataggio, sempre in fondo */
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--cacao); color: var(--panna);
  font-family: var(--testo); font-size: 1rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
/* height auto sempre: senza, una width in CSS deforma l'immagine
   perche' il rapporto lo detterebbero gli attributi dell'HTML */
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ambra); outline-offset: 2px; }

.nascosto { display: none !important; }
.solo-lettura {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}

/* ══ intestazione ══ */
.testa {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem;
  padding: max(.75rem, env(safe-area-inset-top)) 1rem .75rem;
  background: linear-gradient(var(--cacao) 72%, rgba(23,14,10,0));
  backdrop-filter: blur(8px);
}
.testa-indietro {
  width: 2.75rem; height: 2.75rem; margin-left: -.5rem;
  display: grid; place-items: center; border-radius: 999px;
  color: var(--panna-62);
}
.testa-indietro:active { background: var(--superficie-alta); }
.testa-indietro svg { width: 1.5rem; height: 1.5rem; }
.testa-titolo {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  line-height: 1.1; letter-spacing: -.01em; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.testa-azione {
  font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ambra); padding: .6rem .2rem;
}

/* ══ corpo ══ */
.schermo { padding: 0 1rem calc(var(--barra) + 2.5rem); }
.schermo.senza-barra { padding-bottom: 2.5rem; }
.occhiello {
  font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ambra); margin: 1.6rem 0 .7rem;
}

/* ══ ricerca ══ */
.cerca { position: relative; margin: .25rem 0 1rem; }
.cerca input {
  width: 100%; background: var(--superficie); border: 1px solid var(--regola);
  border-radius: 14px; padding: .9rem 2.6rem .9rem 2.9rem;
  font-size: 1rem; color: var(--panna);
}
.cerca input::placeholder { color: var(--panna-38); }
.cerca input:focus { outline: none; border-color: var(--ambra); }
.cerca svg { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); width: 1.15rem; height: 1.15rem; color: var(--panna-38); }
.cerca-pulisci {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  color: var(--panna-62); border-radius: 999px;
}

/* ══ righe ══ */
.riga {
  display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left;
  background: var(--superficie); border: 1px solid var(--regola);
  border-radius: 14px; padding: .85rem .9rem; margin-bottom: .5rem;
  min-height: 3.75rem;
  transition: background .12s ease-out;
}
.riga:active { background: var(--superficie-alta); }
.riga-corpo { flex: 1; min-width: 0; text-align: left; }
.riga-nome {
  font-family: var(--display); font-size: 1.16rem; font-weight: 500; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.riga-sotto {
  font-size: .8rem; color: var(--panna-62); margin-top: .12rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.riga-freccia { color: var(--panna-38); flex: none; }
.riga-freccia svg { width: 1.1rem; height: 1.1rem; }
.riga-conta {
  flex: none; font-size: .85rem; font-variant-numeric: tabular-nums;
  color: var(--panna-62); background: var(--cacao);
  border-radius: 999px; padding: .2rem .6rem; min-width: 2.2rem; text-align: center;
}
.riga-miniatura {
  flex: none; width: 2.9rem; height: 2.9rem; border-radius: 10px;
  object-fit: cover; background: var(--superficie-alta);
}
.riga.modificata { border-color: var(--ambra); }
.riga.modificata .riga-nome::after {
  content: "•"; color: var(--ambra); margin-left: .4rem;
}

/* il prezzo è il gesto più frequente: si tocca da solo */
.prezzo-tasto {
  flex: none; font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 1.1rem; font-variant-numeric: tabular-nums;
  background: var(--cacao); border: 1px solid var(--regola);
  border-radius: 999px; padding: .5rem .8rem; min-width: 4.6rem; text-align: center;
  color: var(--panna);
}
.prezzo-tasto:active { background: var(--ambra); color: var(--cacao); border-color: var(--ambra); }
.prezzo-tasto.vuoto { color: var(--panna-38); font-style: normal; font-size: .82rem; }

/* ══ campi ══ */
.campo { display: block; margin-bottom: 1.1rem; }
.campo-nome {
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--panna-62); margin-bottom: .45rem;
}
.campo input, .campo textarea, .campo select {
  width: 100%; background: var(--superficie); border: 1px solid var(--regola);
  border-radius: 12px; padding: .85rem .9rem; font-size: 1.02rem;
}
.campo textarea { resize: vertical; min-height: 5.5rem; line-height: 1.45; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--ambra); }
.campo-aiuto { font-size: .78rem; color: var(--panna-38); margin-top: .35rem; }
.campo select { appearance: none; background-image: none; }

/* ══ gettoni (allergeni) ══ */
.gettoni { display: flex; flex-wrap: wrap; gap: .45rem; }
.gettone {
  border: 1px solid var(--regola); background: var(--superficie);
  border-radius: 999px; padding: .55rem .8rem; font-size: .85rem;
  color: var(--panna-62); min-height: 2.6rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.gettone b { font-weight: 700; color: var(--panna); }
.gettone[aria-pressed="true"] {
  background: var(--ambra); border-color: var(--ambra); color: var(--cacao);
}
.gettone[aria-pressed="true"] b { color: var(--cacao); }

/* ══ tasti ══ */
.tasto {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: 3.1rem; border-radius: 14px;
  font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.1rem;
  background: var(--ambra); color: var(--cacao);
}
.tasto:active { filter: brightness(.9); }
.tasto[disabled] { opacity: .4; }
.tasto--vuoto { background: none; border: 1px solid var(--regola); color: var(--panna); }
.tasto--pericolo { background: none; border: 1px solid var(--ciliegia); color: #E8796A; }
.tasto--pericolo:active { background: var(--ciliegia); color: var(--panna); }
.tasto svg { width: 1.2rem; height: 1.2rem; }

/* ══ la barra del salvataggio, sempre in fondo ══ */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: var(--superficie); border-top: 1px solid var(--regola);
  transform: translateY(110%); transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.barra.viva { transform: translateY(0); }
.barra-conto { flex: 1; font-size: .88rem; color: var(--panna-62); line-height: 1.25; }
.barra-conto b { color: var(--ambra); font-variant-numeric: tabular-nums; }
.barra .tasto { width: auto; padding: 0 1.4rem; flex: none; }
.barra-annulla { font-size: .82rem; color: var(--panna-62); padding: .6rem; flex: none; }

/* ══ foglio (prezzo, conferme) ══ */
.velo {
  position: fixed; inset: 0; z-index: 40; background: rgba(10, 6, 4, .72);
  display: grid; align-items: end; opacity: 0; pointer-events: none;
  transition: opacity .2s ease-out;
}
.velo.viva { opacity: 1; pointer-events: auto; }
.foglio {
  background: var(--superficie); border-radius: 20px 20px 0 0;
  padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
  transform: translateY(20px); transition: transform .25s cubic-bezier(.2,.7,.2,1);
  max-height: 88vh; overflow-y: auto;
}
.velo.viva .foglio { transform: translateY(0); }
.foglio-titolo {
  font-family: var(--display); font-size: 1.35rem; font-weight: 700; margin-bottom: .3rem;
}
.foglio-sotto { font-size: .88rem; color: var(--panna-62); margin-bottom: 1.1rem; }

/* il prezzo grande, con la tastiera numerica del telefono */
.prezzo-grande {
  width: 100%; background: var(--cacao); border: 1px solid var(--ambra);
  border-radius: 14px; padding: 1rem; text-align: center;
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 2.6rem; font-variant-numeric: tabular-nums; color: var(--panna);
  margin-bottom: 1rem;
}
.prezzo-grande:focus { outline: none; }

/* ══ griglia foto ══ */
.griglia-foto {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .75rem;
}
.foto-scelta { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--superficie); }
.foto-scelta img { width: 100%; height: 100%; object-fit: cover; }
.foto-scelta[aria-pressed="true"] { outline: 3px solid var(--ambra); outline-offset: -3px; }
.foto-attuale {
  width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 14px;
  background: var(--superficie);
}

/* ══ stati ══ */
.vuoto { text-align: center; color: var(--panna-62); padding: 3rem 1rem; }
.vuoto-titolo { font-family: var(--display); font-size: 1.3rem; color: var(--panna); margin-bottom: .4rem; }

.avviso {
  position: fixed; left: 1rem; right: 1rem; bottom: calc(var(--barra) + 1rem); z-index: 50;
  background: var(--superficie-alta); border: 1px solid var(--regola);
  border-radius: 14px; padding: .9rem 1rem; font-size: .92rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  transform: translateY(1.5rem); opacity: 0; pointer-events: none;
  transition: transform .22s ease-out, opacity .22s ease-out;
}
.avviso.viva { transform: translateY(0); opacity: 1; }
.avviso.buono { border-color: var(--verde); color: var(--verde); }
.avviso.cattivo { border-color: var(--ciliegia); color: #E8796A; }

/* ══ accesso ══ */
.accesso {
  min-height: 100svh; display: grid; place-items: center; padding: 2rem 1.5rem;
  text-align: center;
}
.accesso-marchio { width: 190px; height: auto; margin: 0 auto 2rem; }
.accesso-titolo { font-family: var(--display); font-size: 1.6rem; margin-bottom: .4rem; }
.accesso-sotto { color: var(--panna-62); font-size: .92rem; margin-bottom: 2rem; }
.accesso input {
  width: 100%; max-width: 15rem; margin: 0 auto 1rem; display: block;
  background: var(--superficie); border: 1px solid var(--regola); border-radius: 14px;
  padding: 1rem; text-align: center; font-size: 1.8rem; letter-spacing: .5em;
  text-indent: .5em; font-variant-numeric: tabular-nums;
}
.accesso input:focus { outline: none; border-color: var(--ambra); }
.accesso .tasto { max-width: 15rem; margin: 0 auto; }
.accesso-errore { color: #E8796A; font-size: .9rem; min-height: 1.4rem; margin-bottom: .6rem; }

/* ══ scheda di stato in home ══ */
.stato-sito {
  display: flex; align-items: center; gap: .8rem;
  background: var(--superficie); border: 1px solid var(--regola);
  border-radius: 14px; padding: .9rem; margin-bottom: 1.2rem;
}
.stato-sito-corpo { flex: 1; min-width: 0; }
.stato-sito-titolo { font-size: .95rem; }
.stato-sito-quando { font-size: .78rem; color: var(--panna-62); margin-top: .1rem; }
.stato-sito a {
  flex: none; color: var(--ambra); text-decoration: none; font-size: .85rem;
  font-weight: 600; border: 1px solid var(--regola); border-radius: 999px;
  padding: .55rem .9rem;
}

@media (min-width: 620px) {
  .schermo, .testa { max-width: 34rem; margin-inline: auto; }
  .barra { max-width: 34rem; left: 50%; transform: translate(-50%, 110%); border-radius: 16px 16px 0 0; }
  .barra.viva { transform: translate(-50%, 0); }
  .griglia-foto { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}