:root {
  --sfondo:   #f4f2ee;
  --scheda:   #fff;
  --inchiostro: #23201d;
  --tenue:    #6f665c;
  --filo:     #dcd6cc;
  --bordeaux: #7a2e38;
  --verde:    #2f6b4f;
  --ambra:    #9a6b12;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--inchiostro);
  font: 15px/1.5 "Lato", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Accesso ---------- */

.accesso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.riquadro-login {
  width: 100%;
  max-width: 340px;
  padding: 32px;
  background: var(--scheda);
  border: 1px solid var(--filo);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgb(0 0 0 / 8%);
  text-align: center;
}

.logo-login {
  width: 110px;
  height: auto;
  margin-bottom: 12px;
  mix-blend-mode: multiply;
}

.riquadro-login h1 {
  margin: 0 0 24px;
  font-size: 19px;
  font-weight: 700;
}

.riquadro-login label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--tenue);
  text-align: left;
}

.riquadro-login input {
  width: 100%;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--filo);
  border-radius: 8px;
  font: inherit;
}

.riquadro-login .btn { width: 100%; }

.errore {
  margin: 14px 0 0;
  color: var(--bordeaux);
  font-size: 13px;
}

/* ---------- Barra ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--scheda);
  border-bottom: 1px solid var(--filo);
}

.barra-gruppo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.marchio { font-size: 18px; }

.barra-etichetta {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tenue);
}

.stato { font-size: 13px; color: var(--tenue); }
.stato-ok      { color: var(--verde); font-weight: 700; }
.stato-attesa  { color: var(--ambra); }
.stato-errore  { color: var(--bordeaux); font-weight: 700; }

/* ---------- Comandi ---------- */

.btn {
  padding: 8px 16px;
  border: 1px solid var(--filo);
  border-radius: 999px;
  background: var(--scheda);
  color: var(--inchiostro);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: #f0ece4; }

.btn-primario {
  background: var(--inchiostro);
  border-color: var(--inchiostro);
  color: #fff;
}

.btn-primario:hover { background: #423b34; }

.btn-aggiungi {
  margin-top: 12px;
  border-style: dashed;
  color: var(--tenue);
}

.btn-piccolo { padding: 6px 12px; font-size: 13px; }

.icona {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--filo);
  border-radius: 6px;
  background: var(--scheda);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.icona:hover { background: #f0ece4; }
.icona-pericolo:hover { background: #fbeaec; border-color: var(--bordeaux); }

.comandi { display: flex; gap: 4px; }

/* ---------- Telaio di stampa ---------- */

/* Fuori schermo, ma non display:none né visibility:hidden: il browser deve
   comunque impaginarlo, altrimenti la stampa esce vuota. */
.telaio-stampa {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 210mm;
  height: 297mm;
  border: 0;
}

/* ---------- Struttura editor ---------- */

.avviso {
  max-width: 1080px;
  margin: 20px auto 0;
  padding: 12px 16px;
  background: #fdf6e3;
  border: 1px solid #e6d18a;
  border-left: 4px solid var(--ambra);
  border-radius: 8px;
  font-size: 14px;
}

.avviso code {
  padding: 1px 5px;
  background: #f3ead2;
  border-radius: 4px;
  font-size: 12.5px;
  word-break: break-all;
}

.editor {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}

.caricamento { color: var(--tenue); }

.pannello {
  margin-bottom: 20px;
  padding: 20px;
  background: var(--scheda);
  border: 1px solid var(--filo);
  border-radius: 12px;
}

.pannello-testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.pannello-titolo {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tenue);
}

.pannello-testata .pannello-titolo { margin: 0; }

.griglia-generale,
.griglia-pagina {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

/* ---------- Campi ---------- */

.campo { display: block; }

.campo-etichetta {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--tenue);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--filo);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 14px;
}

.campo textarea { resize: vertical; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--bordeaux);
  outline-offset: -1px;
}

/* ---------- Tab pagine ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.tab {
  padding: 9px 18px;
  border: 1px solid var(--filo);
  border-radius: 999px;
  background: var(--scheda);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.tab:hover { background: #f0ece4; }

.tab-attiva,
.tab-attiva:hover {
  background: var(--bordeaux);
  border-color: var(--bordeaux);
  color: #fff;
}

.tab-aggiungi {
  border-style: dashed;
  color: var(--tenue);
}

/* ---------- Sezioni e piatti ---------- */

.sezione-scheda {
  margin-bottom: 16px;
  padding: 16px;
  background: #fbfaf8;
  border: 1px solid var(--filo);
  border-radius: 10px;
}

.sezione-testata {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.campo-largo { flex: 1; }

.sezione-testata .campo-largo input {
  font-size: 16px;
  font-weight: 700;
}

.griglia-sezione {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--filo);
}

.piatto-riga {
  display: grid;
  grid-template-columns: 1.4fr 2fr 90px 130px auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid var(--filo);
  border-radius: 8px;
}

/* Le etichette dei campi si ripetono su ogni riga: le mostro solo sulla prima. */
.piatto-riga:not(:first-child) .campo-etichetta { display: none; }

@media (max-width: 760px) {
  .piatto-riga { grid-template-columns: 1fr 1fr; }
  .piatto-riga .campo-nome,
  .piatto-riga .campo-desc { grid-column: 1 / -1; }
  .piatto-riga .campo-etichetta { display: block !important; }
  .sezione-testata { flex-direction: column; align-items: stretch; }
}