/* ============================================================
   Lotteria Beer and Food Festival
   Palette BCC San Giovanni Rotondo - nessuna dipendenza esterna.
   ============================================================ */

/* Century Gothic arriva con Microsoft Office, quindi c'e' su quasi tutti i
   Windows e i Mac ma non su Android e iPhone. Dove manca si scende a un
   geometrico simile (URW Gothic su Linux, Futura su Apple) e infine al sans
   di sistema.
   Per una resa identica ovunque: scarica un geometrico libero (Questrial o
   Poppins vanno benissimo), metti il .woff2 in assets/fonts/ e togli i
   commenti qui sotto. Il resto del CSS non va toccato.

@font-face {
  font-family: "Gotico locale";
  src: url("fonts/questrial-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
*/

:root {
  --petrolio:       #005266;
  --petrolio-scuro: #003c4c;
  --petrolio-notte: #012f3b;
  --giallo:         #ffb939;
  --giallo-testo:   #4a3000;
  --nebbia:         #f4f3f3;
  --bianco:         #ffffff;
  --grigio:         #5f6b70;
  --bordo:          #dcdedf;
  --rosso:          #9a2c2c;

  --sans: "Gotico locale", "Century Gothic", CenturyGothic, "URW Gothic",
          "URW Gothic L", AppleGothic, Futura, "Futura PT", "Trebuchet MS",
          system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--nebbia);
  color: var(--petrolio-notte);
  font: 17px/1.6 var(--sans);
}

.wrap {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 1.1rem 4rem;
}

/* ---------- Fascia dello sponsor ---------- */

.marchio {
  background: var(--bianco);
  border-bottom: 1px solid var(--bordo);
  padding: .85rem 1.1rem;
}

.marchio__interno {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .85rem;
}

.marchio img {
  display: block;
  width: 52px;
  height: auto;
}

.marchio__testo {
  font-size: .77rem;
  line-height: 1.35;
  color: var(--grigio);
}

.marchio__testo strong {
  display: block;
  font-weight: 700;
  font-size: .83rem;
  color: var(--petrolio);
}

/* ---------- Testata ---------- */

.hero {
  background: var(--petrolio);
  color: var(--bianco);
  padding: 2rem 1.1rem 2.2rem;
}

.hero__interno { max-width: 560px; margin: 0 auto; }

.hero__edizione {
  margin: 0 0 .6rem;
  font-size: .76rem;
  letter-spacing: .11em;
  color: var(--giallo);
}

.hero h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.005em;
}

.hero p {
  margin: .6rem 0 0;
  font-size: .96rem;
  color: #b9d2da;
}

/* ---------- Ricerca ---------- */

.ricerca {
  position: relative;
  margin-top: -1.3rem;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 4px;
  padding: 1.4rem 1.1rem 1.5rem;
}

.ricerca label {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: .15rem;
  color: var(--petrolio);
}

.ricerca .aiuto {
  margin: 0 0 .85rem;
  font-size: .86rem;
  color: var(--grigio);
}

.campo-cf {
  width: 100%;
  padding: .85rem .9rem;
  font: 700 1.22rem/1.2 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--petrolio-notte);
  background: var(--bianco);
  border: 2px solid var(--bordo);
  border-radius: 4px;
}

.campo-cf::placeholder {
  letter-spacing: .05em;
  font-weight: 400;
  color: #a9b3b7;
  text-transform: none;
}

.campo-cf:focus-visible {
  outline: 3px solid rgba(255, 185, 57, .55);
  outline-offset: 1px;
  border-color: var(--petrolio);
}

.bottone {
  display: block;
  width: 100%;
  margin-top: .9rem;
  padding: .95rem 1rem;
  font: 700 1rem/1 var(--sans);
  letter-spacing: .02em;
  color: var(--bianco);
  background: var(--petrolio);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.bottone:hover { background: var(--petrolio-scuro); }

.bottone:focus-visible {
  outline: 3px solid rgba(255, 185, 57, .7);
  outline-offset: 2px;
}

/* ---------- Messaggi ---------- */

.avviso {
  margin: 1.1rem 0 0;
  padding: .85rem 1rem;
  border-radius: 0;
  font-size: .93rem;
  border-left: 4px solid var(--rosso);
  background: #fbeeee;
  color: #6d1f1f;
}

.avviso--ok {
  border-left-color: var(--petrolio);
  background: #e8f1f3;
  color: var(--petrolio-scuro);
}

/* ---------- Esiti ---------- */

.esiti { margin-top: 2rem; }

.esiti__intro {
  margin: 0 0 1rem;
  font-size: .9rem;
  color: var(--grigio);
}

.esiti__intro strong {
  color: var(--petrolio);
  font-weight: 700;
  letter-spacing: .05em;
}

/* Biglietto: matrice a sinistra, tagliando a destra. */
.biglietto {
  display: flex;
  align-items: stretch;
  margin-bottom: .9rem;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 4px;
  overflow: hidden;
}

.biglietto__matrice {
  flex: 0 0 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem .4rem;
  background: var(--petrolio);
  color: var(--bianco);
  position: relative;
}

.biglietto__matrice::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 0;
  border-right: 2px dashed rgba(255, 255, 255, .4);
}

.biglietto__etichetta {
  font-size: .62rem;
  letter-spacing: .1em;
  color: #9fc2cc;
  margin-bottom: .25rem;
}

.biglietto__numero {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  word-break: break-all;
  text-align: center;
}

.biglietto__tagliando {
  flex: 1 1 auto;
  padding: 1rem 1.05rem;
  min-width: 0;
}

.biglietto__nome {
  margin: 0 0 .55rem;
  font-size: 1.01rem;
  font-weight: 700;
  color: var(--petrolio-notte);
  overflow-wrap: anywhere;
}

.esito {
  display: inline-block;
  padding: .35rem .75rem;
  border-radius: 3px;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.3;
}

.esito--vincente {
  background: var(--giallo);
  color: var(--giallo-testo);
}

.esito--perdente {
  background: #eceeef;
  color: var(--grigio);
}

.esito--neutro {
  background: #e8f1f3;
  color: var(--petrolio);
}

.biglietto--vincente { border-color: var(--giallo); }

.biglietto--vincente .biglietto__matrice {
  background: var(--giallo);
  color: var(--petrolio-notte);
}

.biglietto--vincente .biglietto__matrice::after {
  border-right-color: rgba(0, 82, 102, .45);
}

.biglietto--vincente .biglietto__etichetta { color: #8a6620; }

/* ---------- Premi ---------- */

.premi {
  margin-top: 2rem;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 4px;
}

.premi__titolo {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--petrolio);
  cursor: pointer;
  list-style: none;
}

.premi__titolo::-webkit-details-marker { display: none; }

/* Freccia disegnata a mano, cosi' ruota all'apertura. */
.premi__titolo::after {
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--petrolio);
  border-bottom: 2px solid var(--petrolio);
  transform: rotate(45deg) translate(-2px, -2px);
}

.premi[open] .premi__titolo::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.premi__titolo:focus-visible {
  outline: 3px solid rgba(255, 185, 57, .7);
  outline-offset: -3px;
}

.premi__quanti {
  background: var(--nebbia);
  color: var(--grigio);
  border-radius: 999px;
  padding: .1rem .5rem;
  font-size: .78rem;
}

.premi__elenco {
  list-style: none;
  margin: 0;
  padding: 0 1rem;
}

.premi__elenco li {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .6rem 0;
  border-top: 1px solid var(--bordo);
  font-size: .93rem;
  line-height: 1.45;
}

.premi__posizione {
  flex: 0 0 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nebbia);
  color: var(--petrolio);
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 700;
  align-self: flex-start;
}

.premi__primo .premi__posizione {
  background: var(--giallo);
  color: var(--giallo-testo);
}

.premi__primo .premi__nome { font-weight: 700; }

.premi__nota {
  margin: 0;
  padding: .8rem 1rem 1rem;
  border-top: 1px solid var(--bordo);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--grigio);
}

.premi__nota a { color: var(--petrolio); font-weight: 700; }

/* ---------- Regolamento ---------- */

.regolamento {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.1rem;
  padding: .85rem 1rem;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--giallo);
  border-radius: 4px;
  color: var(--petrolio-notte);
  text-decoration: none;
}

.regolamento:hover { border-color: var(--petrolio); border-left-color: var(--giallo); }

.regolamento:focus-visible {
  outline: 3px solid rgba(255, 185, 57, .7);
  outline-offset: 2px;
}

.regolamento__icona { flex: 0 0 auto; color: var(--petrolio); }

.regolamento__testo {
  font-size: .82rem;
  line-height: 1.4;
  color: var(--grigio);
}

.regolamento__testo strong {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--petrolio);
}

.piede a { color: var(--petrolio); font-weight: 700; }

/* ---------- Ritiro premio ---------- */

.ritiro {
  background: var(--giallo);
  color: var(--giallo-testo);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
}

.ritiro__titolo {
  margin: 0 0 .3rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--petrolio-notte);
}

.ritiro p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
}

.ritiro a {
  color: var(--petrolio-notte);
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Elenco biglietti ---------- */

.elenco {
  max-width: 1080px;
  padding-top: 1.5rem;
}

.elenco h1 {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--petrolio);
  margin: 0 0 1rem;
}

.conteggi {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: 1.2rem;
}

.conteggio {
  flex: 1 1 140px;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--petrolio);
  border-radius: 4px;
  padding: .8rem .9rem;
}

.conteggio:nth-child(2) { border-left-color: var(--giallo); }

.conteggio__numero {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--petrolio);
}

.conteggio__voce {
  display: block;
  font-size: .78rem;
  color: var(--grigio);
  margin-top: .15rem;
}

.filtri {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: flex-end;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1.2rem;
}

.filtri__campo { flex: 1 1 260px; }

.filtri__campo--stretto { flex: 1 1 200px; }

.filtri label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--petrolio);
  margin-bottom: .25rem;
}

.filtri input,
.filtri select {
  width: 100%;
  padding: .6rem .7rem;
  font: 400 .95rem/1.3 var(--sans);
  color: var(--petrolio-notte);
  background: var(--bianco);
  border: 2px solid var(--bordo);
  border-radius: 4px;
}

.filtri input:focus-visible,
.filtri select:focus-visible {
  outline: 3px solid rgba(255, 185, 57, .55);
  outline-offset: 1px;
  border-color: var(--petrolio);
}

.filtri__azioni {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex: 0 0 auto;
}

.filtri__azioni .bottone { margin-top: 0; width: auto; padding: .65rem 1.6rem; }

.azzera {
  font-size: .88rem;
  color: var(--grigio);
}

/* Tabella */

.tabella-scorrevole {
  overflow-x: auto;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 4px;
}

.tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.tabella th,
.tabella td {
  padding: .6rem .7rem;
  text-align: left;
  border-bottom: 1px solid var(--bordo);
  white-space: nowrap;
}

.tabella thead th {
  background: var(--petrolio);
  color: var(--bianco);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  position: sticky;
  top: 0;
}

.tabella thead a {
  color: var(--bianco);
  text-decoration: none;
  display: block;
}

.tabella thead a:hover { text-decoration: underline; }

.tabella thead a.ordinata { color: var(--giallo); }

.tabella tbody tr:nth-child(even) { background: #fafbfb; }

.tabella tbody tr:hover { background: #eef4f6; }

.tabella__contatore {
  width: 1%;
  text-align: right;
  color: var(--grigio);
  font-size: .8rem;
  background: var(--nebbia);
}

.tabella thead .tabella__contatore {
  background: var(--petrolio-scuro);
  color: #9fc2cc;
}

.tabella__biglietto { font-weight: 700; }

.tabella__cag,
.tabella__cf { letter-spacing: .04em; }

.assente { color: #b0b8bb; }

.tabella .esito {
  font-size: .78rem;
  padding: .2rem .5rem;
  white-space: normal;
}

/* Paginazione */

.pagine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  font-size: .9rem;
}

.pagine a {
  color: var(--petrolio);
  font-weight: 700;
  text-decoration: none;
}

.pagine a:hover { text-decoration: underline; }

.pagine .spenta { color: #b0b8bb; }

.pagine__stato { color: var(--grigio); }

/* ---------- Vuoto ---------- */

.vuoto {
  margin-top: 2rem;
  padding: 1.6rem 1.2rem;
  text-align: center;
  background: var(--bianco);
  border: 1px dashed #b7c9ce;
  border-radius: 4px;
}

.vuoto h2 {
  margin: 0 0 .5rem;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--petrolio);
}

.vuoto p {
  margin: 0;
  color: var(--grigio);
  font-size: .91rem;
}

/* ---------- Piede ---------- */

.piede {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--bordo);
  font-size: .82rem;
  color: var(--grigio);
}

.piede p { margin: .35rem 0; }

.piede__sponsor {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.2rem;
}

.piede__sponsor img { width: 40px; height: auto; display: block; }

/* ---------- Pagina di importazione ---------- */

.admin { max-width: 640px; padding-top: 1.5rem; }

.admin h1 {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--petrolio);
  margin: 0 0 .3rem;
}

.pannello {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 4px;
  padding: 1.3rem 1.1rem;
  margin-top: 1.2rem;
}

.pannello h2 {
  margin: 0 0 .8rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--petrolio);
}

.campo-file {
  display: block;
  width: 100%;
  padding: .75rem;
  background: var(--nebbia);
  border: 2px dashed #b7c9ce;
  border-radius: 4px;
  font-size: .9rem;
  font-family: var(--sans);
}

.opzione {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  margin-top: 1rem;
  font-size: .92rem;
}

.opzione input {
  margin-top: .3rem;
  accent-color: var(--petrolio);
}

.opzione span { color: var(--grigio); display: block; font-size: .85rem; }

.riepilogo {
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
  font-size: .91rem;
}

.riepilogo li {
  padding: .35rem 0;
  border-bottom: 1px solid var(--bordo);
}

.riepilogo li:last-child { border-bottom: 0; }

.errori {
  margin: .7rem 0 0;
  padding-left: 1.2rem;
  font-size: .87rem;
  color: #6d1f1f;
}

.torna {
  display: inline-block;
  margin-top: 1.3rem;
  color: var(--petrolio);
  font-weight: 700;
  font-size: .92rem;
}

@media (min-width: 600px) {
  .hero { padding-top: 2.6rem; padding-bottom: 2.8rem; }
  .hero h1 { font-size: 2.4rem; }
  .bottone { width: auto; padding-left: 2.4rem; padding-right: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}