*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  line-height: 1.45;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px
    calc(var(--altezza-schede) + var(--altezza-barra) + 32px + env(safe-area-inset-bottom));
}

h1 { font-size: 28px; font-weight: 650; margin: 8px 0 4px; }
h2 { font-size: 15px; font-weight: 600; margin: 20px 0 6px; }

button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; } /* sotto i 16px iOS ingrandisce la pagina */

button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--bordo);
  border-radius: 12px;
  background: var(--superficie);
  cursor: pointer;
}
button.primario { background: var(--azione); color: var(--su-azione); border-color: var(--azione); font-weight: 600; }
button.pericolo { color: var(--urgenza); }

.icona { width: 22px; height: 22px; flex: none; }

/* Barra delle schede */
.schede {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(var(--altezza-schede) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--superficie);
  border-top: 1px solid var(--bordo);
}
.schede a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  color: var(--testo-tenue);
  text-decoration: none;
}
.schede a[aria-current="page"] { color: var(--testo); font-weight: 600; }

/* Avvisi brevi */
.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--altezza-schede) + var(--altezza-barra) + 16px + env(safe-area-inset-bottom));
  z-index: 30;
  max-width: 608px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border-radius: var(--raggio);
  background: var(--testo);
  color: var(--sfondo);
}
.toast button { background: transparent; border: 0; color: var(--corda); font-weight: 700; }

/* Pannelli dal basso */
.velo {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--velo);
}
.pannello {
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow: auto;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--superficie);
}
.azioni { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.conferma-testo { font-size: 17px; margin: 4px 0; }

.vuoto { color: var(--testo-tenue); margin-top: 32px; text-align: center; }

/* Schermata Oggi */
.sottotitolo { margin: 0 0 8px; color: var(--testo-tenue); }
.elenco { list-style: none; margin: 0; padding: 0; }
.gruppo-scadute h2 { color: var(--urgenza); }
.gruppo-oggi h2 { color: var(--ambra); }
.gruppo-prossimi h2 { color: var(--blu); }
.gruppo-piu_avanti h2, .gruppo-da_fare h2 { color: var(--testo-tenue); }

.riga {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--bordo);
}
.spunta {
  flex: none;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
}
.spunta::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--colore-cat, var(--testo));
  border-radius: 50%;
}
.spunta[aria-checked="true"]::before { background: var(--colore-cat, var(--testo)); }
.corpo { flex: 1; min-width: 0; }
.titolo {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 32px;
  padding: 8px 0 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.titolo .icona { width: 16px; height: 16px; color: var(--urgenza); }
.meta { margin: 0 0 6px; font-size: 13px; color: var(--testo-tenue); }
.meta.scaduta { color: var(--urgenza); }

/* Barra di inserimento */
.barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--altezza-schede) + env(safe-area-inset-bottom));
  z-index: 9;
  padding: 8px 12px;
  background: var(--sfondo);
  border-top: 1px solid var(--bordo);
}
.barra > * { max-width: 640px; margin-left: auto; margin-right: auto; }
.riga-barra { display: flex; gap: 8px; align-items: center; }
.riga-barra input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--corda);
  border-radius: 23px;
  background: var(--superficie);
}
.riga-barra input:focus { outline: 2px solid var(--testo); outline-offset: 1px; }
.salva { width: 46px; min-height: 46px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.anteprima { padding-bottom: 8px; }
.etichette, .scelte { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.etichette { margin-bottom: 6px; }
.etichetta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--corda);
  border-radius: 16px;
  background: var(--superficie);
  font-size: 13px;
}
.etichetta .togli { min-height: 44px; width: 44px; margin-right: -10px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.etichetta .togli .icona { width: 14px; height: 14px; }
.scelte button, .scegli {
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 17px;
  background: var(--corda);
  color: var(--testo);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.scegli input { font-size: 16px; border: 0; background: transparent; max-width: 150px; } /* sotto i 16px iOS ingrandisce la pagina */
.scelte-categoria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.scelte-categoria button { display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.scelte-categoria .icona { color: var(--colore-cat); }

/* Dettaglio della voce */
.dettaglio h2 { font-size: 20px; margin: 0 0 12px; color: var(--testo); }
.dettaglio label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 13px; color: var(--testo-tenue); }
.dettaglio input:not([type="checkbox"]), .dettaglio select, .dettaglio textarea {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--sfondo);
  color: var(--testo);
}
.dettaglio .affiancati { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dettaglio .interruttore { flex-direction: row; align-items: center; gap: 10px; font-size: 16px; color: var(--testo); }
.dettaglio .interruttore input { width: 22px; height: 22px; }
.dettaglio .azioni { justify-content: flex-start; margin-top: 8px; }
.errore { margin: -6px 0 12px; color: var(--urgenza); font-size: 13px; }

/* Storico */
.filtri { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
.filtri input[type="search"] {
  grid-column: 1 / -1;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--bordo);
  border-radius: 22px;
  background: var(--superficie);
}
.filtri label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--testo-tenue); }
.filtri select { min-height: 40px; padding: 0 8px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--superficie); }
.segno { flex: none; width: 44px; height: 44px; display: grid; place-items: center; color: var(--colore-cat, var(--testo-tenue)); }
.segno.annullata { color: var(--testo-tenue); }
.note { white-space: pre-wrap; }

/* Impostazioni */
.impostazioni section { margin-bottom: 8px; }
.elenco-categorie { list-style: none; padding: 0; margin: 0 0 10px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.elenco-categorie button { width: 100%; display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.elenco-categorie .icona, .opzione .icona { color: var(--colore-cat, var(--testo)); }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--testo-tenue); max-width: 260px; }
.campo select { min-height: 44px; padding: 0 10px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--superficie); color: var(--testo); }
.nota { font-size: 13px; color: var(--testo-tenue); }
.azioni.sinistra { justify-content: flex-start; }
.pulsante-file {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--bordo);
  border-radius: 12px;
  background: var(--superficie);
  cursor: pointer;
}
.pulsante-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
fieldset { border: 0; padding: 0; margin: 0 0 12px; }
legend { font-size: 13px; color: var(--testo-tenue); margin-bottom: 6px; }
.opzioni { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.opzione { flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 1px solid var(--bordo); border-radius: 10px; font-size: 11px; text-align: center; }
.opzione:has(input:checked) { border-color: var(--testo); background: var(--sfondo); }
.opzione input { position: absolute; opacity: 0; }
.campione { width: 22px; height: 22px; border-radius: 50%; background: var(--colore-cat); }

/* Avviso di backup in Oggi */
.avviso-backup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: var(--raggio);
  background: var(--corda);
  color: var(--testo);
}

/* Guida all'installazione */
.passi { padding-left: 20px; margin: 8px 0; }
.passi li { margin-bottom: 8px; }