/* Il banco — dove il titolare pubblica.
   Chiaro, non scuro: si usa alle undici del mattino con la luce che entra
   dalla vetrina, e deve sembrare un documento serio, non un giocattolo.
   Bersagli grandi: chi lo usa ha le mani bagnate e trenta secondi. */

:root {
  --petrolio: #0e4c5c;
  --petrolio-scuro: #093843;
  --ambra: #e8a33d;
  --carta: #f7f4ef;
  --inchiostro: #14232e;
  --grigio: #5b6770;
  --linea: #e5dfd4;
  --bronzo: #96600f;
  --verde: #1a7a52;
  --rosso: #a8322a;
  --molla: cubic-bezier(0.22, 1, 0.36, 1);
}

@font-face { font-family: Manrope; src: url(font/manrope-regular.woff2) format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: Manrope; src: url(font/manrope-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap }
@font-face { font-family: Manrope; src: url(font/manrope-extrabold.woff2) format("woff2"); font-weight: 800; font-display: swap }

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent }
body {
  font-family: Manrope, system-ui, -apple-system, sans-serif;
  background: var(--carta); color: var(--inchiostro); line-height: 1.5; font-size: 16.5px;
  -webkit-font-smoothing: antialiased; padding-bottom: 3rem;
}
button, input, select, textarea { font: inherit; color: inherit }
button { background: none; border: 0; cursor: pointer }
a { color: var(--petrolio) }
:focus-visible { outline: 3px solid var(--ambra); outline-offset: 2px; border-radius: 6px }

.guscio { max-width: 32rem; margin: 0 auto; padding: 0 1.05rem }

.testata {
  background: var(--petrolio); color: #fff;
  padding: calc(env(safe-area-inset-top, 0px) + 1rem) 0 1.05rem;
  margin-bottom: 1.3rem;
}
.testata .guscio { display: flex; align-items: center; justify-content: space-between; gap: 1rem }
.marchio { font-weight: 800; font-size: 1.06rem; letter-spacing: -0.03em }
.marchio i { color: var(--ambra); font-style: normal }
.testata .esci { font-size: 0.82rem; color: rgba(255, 255, 255, 0.72); text-decoration: underline }

h1 { font-size: 1.62rem; font-weight: 800; letter-spacing: -0.032em; line-height: 1.14; text-wrap: balance }
h2 { font-size: 1.06rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.55rem }
.occhiello {
  font-size: 0.735rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--bronzo); margin-bottom: 0.42rem;
}
.nota { font-size: 0.86rem; color: var(--grigio); line-height: 1.45 }

.riquadro {
  background: #fff; border: 1px solid var(--linea); border-radius: 17px;
  padding: 1.15rem 1.15rem 1.2rem; margin-bottom: 1rem;
}

label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--grigio); margin: 1rem 0 0.34rem }
input[type=text], input[type=tel], input[type=password], input[type=number], input[type=time], input[type=date], textarea, select {
  width: 100%; font-size: 1.04rem; font-weight: 600; padding: 0.72rem 0.8rem;
  border: 1px solid var(--linea); border-radius: 11px; background: var(--carta); color: var(--inchiostro);
}
textarea { font-weight: 400; resize: vertical; min-height: 6rem; line-height: 1.45 }
input::placeholder, textarea::placeholder { font-weight: 400; color: #9aa3aa }
.coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem }

.bottone {
  display: block; width: 100%; text-align: center; font-size: 1.06rem; font-weight: 700;
  padding: 0.92rem; border-radius: 12px; background: var(--petrolio); color: #fff; margin-top: 1.25rem;
  transition: transform 0.14s var(--molla);
}
.bottone:active { transform: scale(0.985) }
.bottone.ambra { background: var(--ambra); color: #4a2f00 }
.bottone.tenue { background: #fff; color: var(--petrolio); border: 1px solid var(--linea); font-weight: 600 }
.bottone[disabled] { opacity: 0.45; pointer-events: none }

.errore {
  background: #fdecea; border: 1px solid #f2c4bf; color: var(--rosso);
  padding: 0.72rem 0.9rem; border-radius: 11px; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.9rem;
}
.ok {
  background: #e9f5ef; border: 1px solid #c7e5d6; color: #17513a;
  padding: 0.8rem 0.9rem; border-radius: 11px; font-size: 0.9rem; line-height: 1.5; margin-bottom: 0.9rem;
}
.ok[hidden] { display: none }
.ok code { font-family: inherit; font-weight: 800; letter-spacing: 0.08em; background: #fff; border-radius: 6px; padding: 0.08rem 0.4rem }

.avviso {
  background: #fff6e6; border: 1px solid #f0dcb4; color: var(--bronzo);
  padding: 0.75rem 0.9rem; border-radius: 11px; font-size: 0.86rem; line-height: 1.45; margin-bottom: 0.9rem;
}

/* ── «Ieri da te»: il cruscotto giornaliero ─────────────────────────── */
/* Stessa palette documentale del resto del banco: niente di nuovo da
   imparare, solo un riquadro in più che riusa .numeri/.numero/.quota. */

.riquadro.cruscotto .numeri { border-top: 0; padding-top: 0.15rem; gap: 1.3rem; flex-wrap: wrap }
.riquadro.cruscotto .numero { position: relative }
.numero .delta { display: block; font-size: 0.7rem; font-weight: 700; margin-top: 0.2rem; letter-spacing: -0.01em }
.numero .delta.su { color: var(--verde) }
.numero .delta.giu { color: var(--bronzo) }
.numero .delta.pari { color: var(--grigio); font-weight: 600 }

.sparkline { margin-top: 1rem }
.sparkline svg { display: block; width: 100%; height: 44px }
.sparkline .barra { fill: var(--linea) }
.sparkline .entrata { fill: var(--ambra) }

.quota.traguardo { color: var(--bronzo); font-weight: 600 }
.quota.traguardo .stella { color: var(--ambra); font-size: 1rem; line-height: 1 }

/* ── i quattro modi di dirlo ────────────────────────────────────────── */

.modi { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.3rem }
.modo {
  text-align: left; border: 1.5px solid var(--linea); background: #fff; border-radius: 14px;
  padding: 0.85rem 0.9rem; transition: border-color 0.15s ease, background 0.15s ease;
}
.modo[aria-pressed=true] { border-color: var(--ambra); background: #fffaf1 }
.modo b { display: block; font-size: 0.98rem; font-weight: 800; letter-spacing: -0.015em }
.modo span { display: block; font-size: 0.79rem; color: var(--grigio); margin-top: 0.14rem; line-height: 1.35 }

.giorni { display: flex; gap: 0.34rem; flex-wrap: wrap; margin-top: 0.34rem }
.giorno {
  flex: 1 1 auto; min-width: 2.6rem; text-align: center; padding: 0.55rem 0.2rem;
  border: 1.5px solid var(--linea); border-radius: 10px; background: #fff;
  font-size: 0.86rem; font-weight: 600; color: var(--grigio);
}
.giorno[aria-pressed=true] { border-color: var(--petrolio); background: var(--petrolio); color: #fff }

/* ── a chi parla l'offerta ─────────────────────────────────────────── */

.pubblico { margin-top: 1.1rem; border-top: 1px solid var(--linea); padding-top: 0.9rem }
.pubblico .scelte { display: grid; gap: 0.45rem }
.pubblico .scelte button {
  text-align: left; border: 1.5px solid var(--linea); background: #fff; border-radius: 12px;
  padding: 0.62rem 0.8rem; transition: border-color 0.15s ease, background 0.15s ease;
}
.pubblico .scelte button[aria-pressed=true] { border-color: var(--ambra); background: #fffaf1 }
.pubblico .scelte b { display: block; font-size: 0.94rem; font-weight: 800; letter-spacing: -0.012em }
.pubblico .scelte span { display: block; font-size: 0.78rem; color: var(--grigio); margin-top: 0.06rem }

/* ── evento aperto ─────────────────────────────────────────────────── */

.evento { margin-top: 1.1rem; border-top: 1px solid var(--linea); padding-top: 0.9rem }
.interruttore { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0; font-size: 0.86rem; color: var(--grigio); line-height: 1.42 }
.interruttore input { width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; flex: none; accent-color: var(--petrolio) }
.interruttore b { display: block; font-size: 0.98rem; font-weight: 800; color: var(--inchiostro); letter-spacing: -0.015em; margin-bottom: 0.12rem }

/* ── quota settimanale ─────────────────────────────────────────────── */

.quota { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; font-size: 0.85rem; color: var(--grigio) }
.gettoni { display: flex; gap: 0.28rem }
.gettone { width: 26px; height: 8px; border-radius: 4px; background: var(--linea) }
.gettone.usato { background: var(--ambra) }

.iscritti { margin-top: 0.8rem; border-top: 1px solid var(--linea); padding-top: 0.75rem }
.iscritti table { width: 100%; border-collapse: collapse; font-size: 0.86rem }
.iscritti th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grigio); padding-bottom: 0.4rem; font-weight: 600 }
.iscritti td { padding: 0.38rem 0.5rem 0.38rem 0; border-top: 1px solid var(--linea); vertical-align: top }
.iscritti td:last-child { text-align: right; white-space: nowrap; font-weight: 700 }
.iscritti .avvisoDati { font-size: 0.76rem; color: var(--bronzo); margin-top: 0.6rem; line-height: 1.4 }

/* ── anteprima: la stessa scheda che vedrà il cliente ───────────────── */

.anteprima-guscio { background: var(--petrolio-scuro); border-radius: 17px; padding: 1rem; margin-top: 1.15rem }
.anteprima-eti { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #a3c0ca; margin-bottom: 0.6rem }
.anteprima {
  background: var(--carta); border-radius: 17px; padding: 0.95rem 1rem 0.85rem; position: relative; overflow: hidden;
  box-shadow: 0 0 0 1.5px var(--ambra);
}
.anteprima::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ambra) }
.anteprima .testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.7rem }
.anteprima h3 { font-size: 1.16rem; font-weight: 800; letter-spacing: -0.024em; line-height: 1.2 }
.anteprima .prezzo { font-weight: 800; font-size: 1.16rem; color: var(--petrolio); white-space: nowrap; letter-spacing: -0.03em }
.anteprima .dettaglio { font-size: 0.88rem; color: var(--grigio); margin-top: 0.25rem }
.anteprima .quando { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; margin-top: 0.65rem }
.anteprima .pillola { font-size: 0.775rem; font-weight: 600; padding: 0.24rem 0.62rem; border-radius: 999px; background: var(--ambra); color: #4a2f00 }
.anteprima .pillola.evento { background: rgba(26, 122, 82, 0.12); color: var(--verde) }
.anteprima .ricorrenza { font-size: 0.79rem; color: var(--grigio) }
.anteprima .locale { margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px solid var(--linea); font-size: 0.93rem; font-weight: 600 }

/* ── offerte già pubblicate ────────────────────────────────────────── */

.pubblicata { border: 1px solid var(--linea); background: #fff; border-radius: 15px; padding: 0.95rem 1rem; margin-bottom: 0.7rem }
.pubblicata.sospesa { opacity: 0.62 }
.pubblicata .testa { display: flex; justify-content: space-between; gap: 0.7rem; align-items: flex-start }
.pubblicata h3 { font-size: 1.04rem; font-weight: 800; letter-spacing: -0.02em }
.stato-pill { font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap }
.stato-pill.viva { background: #e7f6ee; color: var(--verde) }
.stato-pill.attesa { background: #eef1f3; color: var(--grigio) }
.stato-pill.ferma { background: #f4eee6; color: var(--bronzo) }

.numeri { display: flex; gap: 1.15rem; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--linea) }
.numero.forte b { color: var(--verde) }
.numero b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--petrolio); letter-spacing: -0.03em; line-height: 1.1 }
.numero span { font-size: 0.74rem; color: var(--grigio) }
.righe-azione { display: flex; gap: 0.5rem; margin-top: 0.8rem }
.righe-azione button { flex: 1; font-size: 0.86rem; font-weight: 600; padding: 0.58rem; border-radius: 10px; border: 1px solid var(--linea); background: #fff; color: var(--petrolio) }

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