/*
 * Resolve QR — il vestito del pannello.
 *
 * Chiaro, stretto, silenzioso: è uno strumento e si usa soprattutto dal
 * telefono. L'unico colore acceso della pagina deve essere il QR che si sta
 * disegnando — un pannello colorato falserebbe la scelta dei colori.
 *
 * Niente caratteri scaricati: quello di sistema c'è già.
 */
:root {
  --inchiostro: #16161a;
  --grigio: #6b6a72;
  --grigio-chiaro: #a5a4ab;
  --fondo: #f4f4f6;
  --carta: #ffffff;
  --bordo: rgba(22, 22, 26, .11);
  --separatore: rgba(22, 22, 26, .07);
  --accento: #2c55e8;
  --accento-tenue: rgba(44, 85, 232, .11);
  --ok: #1f8a4c;
  --male: #c2412d;
  --r: 16px;
  font-synthesis-weight: none;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--inchiostro);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.dentro { max-width: 1080px; margin: 0 auto; padding: 0 18px; }
.stretto { max-width: 420px; }
h1, h2, h3 { margin: 0; letter-spacing: -.022em; font-weight: 650; }
h1 { font-size: 28px; line-height: 1.15; }
h2 { font-size: 19px; }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: var(--accento); }
.muto { color: var(--grigio); }
.piccolo { font-size: 13px; line-height: 1.45; }
.numeri { font-variant-numeric: tabular-nums; }

.scheda { background: var(--carta); border: .5px solid var(--bordo); border-radius: var(--r); padding: 18px; }
.scheda + .scheda { margin-top: 12px; }
.riga { display: flex; align-items: center; gap: 10px; }
.riga > .cresce { flex: 1; min-width: 0; }
.avvolge { flex-wrap: wrap; }

.btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 550; letter-spacing: -.01em;
  padding: 10px 17px; border-radius: 980px; white-space: nowrap; background: var(--inchiostro); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
  transition: opacity .15s, transform .1s;
}
.btn:hover { opacity: .86; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .35; cursor: default; transform: none; }
.btn.secondario { background: rgba(22, 22, 26, .065); color: var(--inchiostro); }
.btn.accento { background: var(--accento); }
.btn.pericolo { background: transparent; color: var(--male); box-shadow: inset 0 0 0 1px currentColor; }
.btn.minuto { padding: 6px 12px; font-size: 13px; }
.btn.pieno { width: 100%; }

.campo { display: block; margin-bottom: 12px; }
.campo > span { display: block; font-size: 12.5px; font-weight: 500; color: var(--grigio); margin-bottom: 5px; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: inherit; padding: 10px 12px; border-radius: 11px;
  border: .5px solid var(--bordo); background: var(--carta); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-tenue); }
textarea { resize: vertical; min-height: 80px; }
input[type=checkbox] { width: auto; }
input[type=color] { padding: 0; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; cursor: pointer; flex: none; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
@media (max-width: 460px) { .due { grid-template-columns: 1fr; } }

/* le scelte a pillole: tipo, genere, modo */
.pillole { display: flex; flex-wrap: wrap; gap: 6px; }
.pillola {
  appearance: none; border: .5px solid var(--bordo); background: var(--carta); color: var(--inchiostro);
  font: inherit; font-size: 14px; padding: 7px 13px; border-radius: 980px; cursor: pointer;
}
.pillola.si { background: var(--inchiostro); color: #fff; border-color: var(--inchiostro); }
.segmenti { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: rgba(22,22,26,.06); border-radius: 12px; padding: 3px; gap: 3px; }
.segmenti button { appearance: none; border: 0; background: transparent; font: inherit; font-weight: 550; padding: 9px 6px; border-radius: 9px; cursor: pointer; color: var(--grigio); }
.segmenti button.si { background: var(--carta); color: var(--inchiostro); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.segmenti button small { display: block; font-weight: 400; font-size: 11.5px; color: var(--grigio-chiaro); }

.errore { color: var(--male); font-size: 13.5px; min-height: 20px; }
.avviso { background: var(--accento-tenue); border-radius: 12px; padding: 11px 14px; font-size: 13.5px; }
.badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: rgba(22,22,26,.07); color: var(--grigio); }
.badge.dinamico { background: var(--accento-tenue); color: var(--accento); }
.badge.marketing { background: rgba(196, 116, 20, .13); color: #a35f0c; }
.badge.ok { background: rgba(31,138,76,.12); color: var(--ok); }
.badge.no { background: rgba(194,65,45,.1); color: var(--male); }

.brindisi {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--inchiostro); color: #fff; padding: 11px 20px; border-radius: 980px; font-size: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50;
}
.brindisi.si { opacity: 1; }
[hidden] { display: none !important; }