/* Portale clienti di Minilab: colori Domus (tortora, vetro, nero in risalto, salvia), tema chiaro e
   scuro dal sistema. Niente font da scaricare, niente immagini pesanti: si apre in fretta anche su
   un telefono economico. */
:root {
  --sfondo-1: #EFEAE1; --sfondo-2: #C7BFB2; --vetro: rgba(255, 253, 248, .78); --vetro-bordo: rgba(255, 255, 255, .8);
  --pieno: #F7F4EE; --risalto: #141414; --risalto-testo: #F2EFE8; --testo: #22201C; --testo-2: #57524A;
  --accento: #A6D27C; --accento-testo: #3F6B1F; --accento-tenue: rgba(110, 160, 60, .18); --oro: #6E5714;
  --pericolo: #A8241C; --traccia: rgba(40, 34, 25, .14); --ombra: 0 12px 30px rgba(70, 60, 45, .14);
  --carattere: system-ui, "Segoe UI", Roboto, sans-serif; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo-1: #6E6960; --sfondo-2: #26241F; --vetro: rgba(38, 36, 32, .82); --vetro-bordo: rgba(255, 255, 255, .1);
    --pieno: #2C2A26; --testo: #F2EFE8; --testo-2: #CFC9BE; --accento-testo: #B5DC8F; --accento-tenue: rgba(166, 210, 124, .16);
    --oro: #D9C688; --pericolo: #FF9B91; --traccia: rgba(255, 255, 255, .13); --ombra: 0 14px 36px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--carattere); color: var(--testo);
  background: linear-gradient(160deg, var(--sfondo-1), var(--sfondo-2)) fixed; line-height: 1.5;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: -999px; top: 8px; padding: 8px 12px; background: var(--risalto); color: var(--risalto-testo); border-radius: 8px; }
.salta:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }
a { color: var(--accento-testo); }

.testata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; }
.marchio { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; font-size: 1.15rem; }
.marchio-segno { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--risalto); color: var(--accento); font-weight: 800; }
.marchio-sotto { font-weight: 500; color: var(--testo-2); font-size: .95rem; }
.menu { display: flex; flex-wrap: wrap; gap: 6px; }
.contenuto { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 8px 16px 32px; display: grid; gap: 16px; align-content: start; }
.contenuto:focus { outline: none; }
.piede { padding: 16px; text-align: center; color: var(--testo-2); font-size: .85rem; }

.pannello { padding: 20px; border: 1px solid var(--vetro-bordo); border-radius: 22px; background: var(--vetro); box-shadow: var(--ombra); display: grid; gap: 12px; }
.pannello--nero { background: var(--risalto); color: var(--risalto-testo); border-color: transparent; }
.pannello--nero .nota { color: #BDB7AC; }
.stretto { max-width: 440px; width: 100%; justify-self: center; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
.nota { margin: 0; color: var(--testo-2); font-size: .92rem; }
.errore { margin: 0; color: var(--pericolo); font-weight: 600; }

label { display: grid; gap: 4px; font-weight: 600; font-size: .95rem; }
input, textarea, select {
  font: inherit; color: var(--testo); padding: 10px 12px; border: 1px solid var(--traccia); border-radius: 12px;
  background: var(--pieno); min-height: 44px; width: 100%;
}
textarea { min-height: 120px; resize: vertical; }
.tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 18px;
  border: 1px solid var(--traccia); border-radius: 999px; background: var(--pieno); color: var(--testo);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.tasto--pieno { background: var(--risalto); color: var(--risalto-testo); border-color: transparent; }
.tasto--verde { background: var(--accento); color: #141414; border-color: transparent; }
.tasto:disabled { opacity: .55; cursor: default; }
.azioni { display: flex; flex-wrap: wrap; gap: 8px; }

.lavori { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.lavoro { text-decoration: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; width: max-content; }
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.chip--da_prendere { background: var(--traccia); color: var(--testo-2); }
.chip--preso { background: rgba(201, 178, 106, .22); color: var(--oro); }
.chip--completato { background: var(--accento-tenue); color: var(--accento-testo); }
.barra { height: 10px; border-radius: 999px; background: var(--traccia); overflow: hidden; }
.barra > span { display: block; height: 100%; width: var(--p, 0%); background: var(--accento); border-radius: 999px; }
.cambiamenti { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cambiamenti li { padding: 10px 12px; border-left: 3px solid var(--accento); background: var(--pieno); border-radius: 0 12px 12px 0; }
.risposta { font-weight: 600; }

/* anteprima protetta: niente selezione, niente trascinamento, niente stampa */
.visore { display: grid; gap: 12px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.visore img { width: 100%; height: auto; border-radius: 12px; background: #fff; box-shadow: var(--ombra); pointer-events: none; }
@media print { body { display: none !important; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* fase 5: elenco delle anteprime, chiave della 2FA, avviso «sei offline» */
.elenco { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.chiave { font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
.offline {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; padding: 8px 14px; max-width: calc(100% - 24px);
  border-radius: 999px; background: var(--risalto); color: var(--risalto-testo); font-size: .9rem; box-shadow: var(--ombra);
}
input[readonly] { background: transparent; }