/* Seconda versione – tema "Notte di Natale", dal volantino 2026/27:
   cielo blu notte con stelline, schede dorate tipo polaroid, titoli in corsivo oro, testo crema.
   Si appoggia a css/app.css (comune alle due versioni) e ne ridefinisce i colori. */

:root {
  --notte: #0b1446;
  --notte-2: #13245f;
  --notte-3: #1d3678;
  --oro: #dbb465;
  --oro-chiaro: #f1d58f;
  --oro-scheda: #e2b961;
  --oro-testo: #f1d58f;
  --inchiostro-notte: #14194a;

  /* i colori della prima versione, ripensati per il fondo scuro */
  --crema: var(--notte);
  --crema-chiaro: rgba(10, 18, 58, .92);
  --crema-scuro: rgba(219, 180, 101, .32);
  --carta: rgba(28, 44, 104, .72);
  --bordeaux: #f1d58f;
  --bordeaux-scuro: #dbb465;
  --bordeaux-tenue: rgba(241, 213, 143, .14);
  --inchiostro: #f6ecd4;
  --testo-2: #cfc3a6;
  --verde: #9ee0ae;
  --verde-tenue: rgba(158, 224, 174, .14);
  --ambra: #f3c977;
  --ambra-tenue: rgba(243, 201, 119, .14);
  --rosso: #ff9b8f;
  --grigio: #a9a4b8;
  --grigio-tenue: rgba(255, 255, 255, .07);
  --blu: #9cc3ff;
  --ombra: 0 4px 18px rgba(0, 0, 0, .35);
  --stelle: none;
  color-scheme: dark;
}

body.tema-notte {
  background: radial-gradient(120% 80% at 85% 0%, #2a4a98 0%, transparent 55%),
              linear-gradient(160deg, #0a1240 0%, #0e1c55 45%, #1b3a80 100%) fixed;
  color: var(--inchiostro);
}

/* --- cielo stellato -------------------------------------------------------------------- */
.cielo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.stelle { position: absolute; inset: -10%; background-repeat: repeat; }
.stelle.s1 {
  background-image:
    radial-gradient(1.4px 1.4px at 20px 30px, #fff8e1, transparent),
    radial-gradient(1px 1px at 90px 140px, #ffffff, transparent),
    radial-gradient(1.6px 1.6px at 160px 60px, #ffe9b0, transparent),
    radial-gradient(1px 1px at 230px 190px, #ffffff, transparent),
    radial-gradient(1.2px 1.2px at 60px 220px, #fff3d0, transparent);
  background-size: 260px 260px;
  opacity: .8;
}
.stelle.s2 {
  background-image:
    radial-gradient(2px 2px at 40px 90px, #fff6dc, transparent),
    radial-gradient(1.4px 1.4px at 200px 20px, #ffffff, transparent),
    radial-gradient(2.2px 2.2px at 300px 260px, #ffe7a8, transparent);
  background-size: 380px 380px;
  animation: scintillio 5s ease-in-out infinite alternate;
}
@keyframes scintillio { from { opacity: .25; } to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .stelle.s2 { animation: none; opacity: .6; } }
body.tema-notte > header, body.tema-notte > main, body.tema-notte > nav { position: relative; z-index: 1; }

/* --- testata -------------------------------------------------------------------------- */
/* niente backdrop-filter: renderebbe la testata il riferimento della barra fissa in basso su telefono */
.tema-notte .testata { background: rgba(8, 14, 48, .92); border-bottom: 1px solid rgba(219, 180, 101, .35); }
.tema-notte .marchio-icona { width: 44px; height: 44px; border-radius: 0; filter: drop-shadow(0 0 6px rgba(241, 213, 143, .45)); }
.tema-notte .marchio-nome { color: var(--oro-chiaro); text-shadow: 0 0 12px rgba(241, 213, 143, .35); }
.tema-notte .marchio-sotto { color: var(--testo-2); }
.tema-notte .chip-data { background: rgba(255, 255, 255, .06); border-color: var(--oro); color: var(--oro-chiaro); }
.tema-notte .schede { background: rgba(8, 14, 48, .94); box-shadow: 0 -2px 16px rgba(0, 0, 0, .5); border-top: 1px solid rgba(219, 180, 101, .3); }
.tema-notte .schede a { color: #e9dcbc; }
.tema-notte .schede a[aria-current] { color: var(--inchiostro-notte); background: var(--oro-chiaro); }
.tema-notte .schede a[aria-current]::before { display: none; }
.tema-notte .badge { background: var(--oro-chiaro); color: var(--inchiostro-notte); }

/* titolo verticale, come sulla copertina del volantino (solo schermi larghi) */
.titolo-verticale { display: none; }
@media (min-width: 1200px) {
  body.tema-notte { grid-template-columns: 96px minmax(0, 1fr); }
  body.tema-notte > header, body.tema-notte > main { grid-column: 2; }
  .titolo-verticale {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    grid-column: 1; grid-row: 1 / span 2; position: relative; z-index: 2; padding: 14px 0;
    border-right: 1px solid rgba(219, 180, 101, .3); background: rgba(8, 14, 48, .55);
  }
  .titolo-verticale img { width: 70px; filter: drop-shadow(0 0 10px rgba(241, 213, 143, .5)); }
  .titolo-verticale span {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: 'Great Vibes', cursive; font-size: 54px; line-height: 1; color: var(--oro-chiaro);
    text-shadow: 0 0 14px rgba(241, 213, 143, .35); white-space: nowrap;
  }
  .tema-notte .marchio-testo { display: none; }
}

/* --- pannello e pagine ---------------------------------------------------------------- */
.tema-notte .pannello { background: linear-gradient(180deg, #0c1650, #0f1f5c 70%, #142a6c); }
@media (min-width: 900px) { .tema-notte .pannello { border-right: 1px solid rgba(219, 180, 101, .3); } }
.tema-notte .titolo-script, .tema-notte .piano h2 { color: var(--oro-chiaro); text-shadow: 0 0 12px rgba(241, 213, 143, .25); }
.tema-notte .blocco h2 { color: var(--oro); }
.tema-notte .blocco { border-top-color: rgba(219, 180, 101, .25); }
.tema-notte a { color: var(--oro-chiaro); }
.tema-notte .emblema-pagina {
  display: block; width: min(230px, 62%); margin: 6px auto -4px;
  background: radial-gradient(closest-side, rgba(241, 213, 143, .28), rgba(241, 213, 143, .08) 60%, transparent);
  padding: 6%; border-radius: 50%;
  filter: drop-shadow(0 0 8px rgba(241, 213, 143, .35));
}
.tema-notte .pagina > .titolo-script:first-of-type { text-align: center; }

/* pulsanti */
.tema-notte .btn { background: rgba(255, 255, 255, .05); border-color: var(--oro); color: var(--oro-chiaro); }
.tema-notte .btn:hover { background: rgba(241, 213, 143, .14); }
.tema-notte .btn.primario { background: linear-gradient(180deg, #f3d488, #d7a94f); color: var(--inchiostro-notte); border-color: #f3d488; }
.tema-notte .btn.primario:hover { background: linear-gradient(180deg, #f7dd9c, #dfb35a); }
.tema-notte .btn.scelto { background: var(--oro-chiaro); color: var(--inchiostro-notte); }
.tema-notte .btn-icona { background: rgba(255, 255, 255, .06); border-color: rgba(219, 180, 101, .5); color: var(--oro-chiaro); }
.tema-notte .btn-icona.scelto { background: var(--oro-chiaro); color: var(--inchiostro-notte); }
.tema-notte .ctrl { background: rgba(10, 18, 58, .85); border-color: rgba(219, 180, 101, .55); color: var(--oro-chiaro); }
.tema-notte .ctrl[aria-pressed="true"], .tema-notte .ctrl[aria-expanded="true"] { background: var(--oro-chiaro); color: var(--inchiostro-notte); }

/* campi */
.tema-notte .campo select, .tema-notte .campo input[type="search"] { background: rgba(255, 255, 255, .06); color: var(--inchiostro); border-color: rgba(219, 180, 101, .4); }
.tema-notte .campo select option, .tema-notte .campo select optgroup { background: #101a4e; color: #f6ecd4; }
.tema-notte .interruttore input { accent-color: var(--oro); }
.tema-notte .segmenti { border-color: var(--oro); }
.tema-notte .segmenti button { background: transparent; color: var(--oro-chiaro); }
.tema-notte .segmenti button + button { border-left-color: var(--oro); }
.tema-notte .segmenti button[aria-pressed="true"], .tema-notte .segmenti button[aria-checked="true"] { background: var(--oro-chiaro); color: var(--inchiostro-notte); }
.tema-notte .chips-filtro button { background: rgba(255, 255, 255, .05); color: var(--oro-chiaro); border-color: rgba(219, 180, 101, .4); }
.tema-notte .chips-filtro button[aria-pressed="true"] { background: var(--oro-chiaro); color: var(--inchiostro-notte); border-color: var(--oro-chiaro); }
.tema-notte .chips-filtro button span { color: inherit; opacity: .75; }
.tema-notte .modulo { background: rgba(20, 34, 90, .6); border-color: rgba(219, 180, 101, .35); }
.tema-notte .nota { background: rgba(255, 255, 255, .06); color: var(--testo-2); }
.tema-notte .numero { background: var(--oro-chiaro); color: var(--inchiostro-notte); border-color: #fff3cf; }

/* --- elenco dei presepi: griglia di schede dorate tipo polaroid --------------------------- */
.tema-notte .lista-presepi { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.tema-notte .card-presepio {
  flex-direction: column; align-items: stretch; padding: 0;
  background: linear-gradient(180deg, #ebc56f, var(--oro-scheda)); border: 0; border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.tema-notte .card-link { flex-direction: column; align-items: stretch; gap: 0; padding: 9px 9px 0; color: var(--inchiostro-notte); }
.tema-notte .card-link img, .tema-notte .img-vuota { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.tema-notte .card-link .numero { left: 2px; top: 2px; }
.tema-notte .card-testo { align-items: center; text-align: center; padding: 6px 2px 10px; }
.tema-notte .card-testo strong { font-family: 'Great Vibes', cursive; font-weight: 400; font-size: 27px; line-height: 1.05; color: var(--inchiostro-notte); }
.tema-notte .card-testo .riga-piccola { color: #2b2f5e; font-size: 13px; }
.tema-notte .card-testo .riga-luogo { display: block; color: #2b2f5e; font-size: 12.5px; line-height: 1.25; margin-top: 2px; }
.tema-notte .card-testo .riga-titolo { color: #1d2357; font-size: 13px; }
.tema-notte .card-testo .stato-giorno { justify-content: center; font-size: 12.5px; }
.tema-notte .card-testo .stato-giorno.aperto { color: #1d5a2e; }
.tema-notte .card-testo .stato-giorno.chiuso { color: #5b5466; }
.tema-notte .badge-nuovo, .tema-notte .badge-nuovo.piccolo { background: var(--inchiostro-notte); color: var(--oro-chiaro); align-self: center; }
.tema-notte .card-presepio > .btn-icona { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; background: rgba(11, 20, 70, .78); }
@media (min-width: 900px) { .tema-notte .lista-presepi { grid-template-columns: repeat(2, 1fr); } }

/* --- scheda del presepio: foto in cornice dorata con il nome sotto, come sul volantino ------- */
.tema-notte .scheda-foto { margin: 14px 16px; padding: 10px 10px 4px; background: linear-gradient(180deg, #ebc56f, var(--oro-scheda)); border-radius: 4px; box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
.tema-notte .scheda-foto img { border-radius: 1px; }
.tema-notte .scheda-foto figcaption { background: none; color: #2b2f5e; text-align: center; }
.tema-notte .scheda-foto .numero { left: 18px; bottom: 34px; }
.tema-notte .scheda-titolo { font-family: 'Great Vibes', cursive; font-weight: 400; font-size: 38px; line-height: 1.05; color: var(--oro-chiaro); text-shadow: 0 0 12px rgba(241, 213, 143, .25); }
.tema-notte .descrizione-breve { color: #f3e5c3; }
.tema-notte .titolo-scenografia { color: var(--oro-chiaro); }
.tema-notte .annuncio { background: rgba(241, 213, 143, .14); color: var(--oro-chiaro); }
.tema-notte table.orari th, .tema-notte table.orari td { border-bottom-color: rgba(219, 180, 101, .2); }
.tema-notte .chips li { background: rgba(255, 255, 255, .07); }
.tema-notte .etichetta { background: rgba(255, 255, 255, .1); color: var(--inchiostro); }
.tema-notte .etichetta.oro { background: var(--oro-chiaro); color: var(--inchiostro-notte); }
.tema-notte .poi-icona, .tema-notte .p-icona { border-color: var(--oro); }
.tema-notte .poi-icona { background: rgba(241, 213, 143, .16); color: var(--oro-chiaro); }
.tema-notte .poi-icona.ambientazione { background: var(--oro-chiaro); color: var(--inchiostro-notte); }
.tema-notte .poi-testo .legame { background: rgba(241, 213, 143, .1); }
.tema-notte .locale { background: rgba(20, 34, 90, .6); border-color: rgba(219, 180, 101, .3); }
.tema-notte .locale.partner { background: linear-gradient(180deg, rgba(241, 213, 143, .22), rgba(20, 34, 90, .6) 60%); border-color: var(--oro); }
.tema-notte .badge-partner { background: var(--oro-chiaro); color: var(--inchiostro-notte); }
.tema-notte .cat-icona { border-color: var(--oro); color: var(--oro-chiaro); }
.tema-notte .cat-icona.g-dormire, .tema-notte .chips-filtro button.g-dormire { color: var(--blu); }
.tema-notte .locale-foto.segnaposto { background: rgba(255, 255, 255, .05); border-color: rgba(219, 180, 101, .35); color: var(--oro-chiaro); }
.tema-notte .voto { color: var(--oro-chiaro); }
.tema-notte .timeline li > div { background: rgba(20, 34, 90, .6); border-color: rgba(219, 180, 101, .3); }
.tema-notte .t-punto > div { background: rgba(255, 255, 255, .06) !important; }
.tema-notte .t-pasto > div { background: rgba(241, 213, 143, .1) !important; }
.tema-notte .numero-tappa { background: var(--oro-chiaro); color: var(--inchiostro-notte); border-color: #fff3cf; }
.tema-notte .esclusi { background: rgba(255, 255, 255, .06); }
.tema-notte .livelli { background: rgba(10, 18, 58, .96); border-color: rgba(219, 180, 101, .4); }
.tema-notte .voce-livello:hover { background: rgba(255, 255, 255, .06); }
.tema-notte .voce-livello[aria-pressed="true"] { background: rgba(241, 213, 143, .14); border-color: var(--oro); }
.tema-notte .voce-icona { background: transparent; border-color: var(--oro); color: var(--oro-chiaro); }
.tema-notte .legenda { background: rgba(10, 18, 58, .85); color: var(--testo-2); }
.tema-notte .avviso { background: var(--oro-chiaro); color: var(--inchiostro-notte); }
.tema-notte .maniglia span { background: rgba(241, 213, 143, .85); }
.tema-notte .banner-mappa { background: var(--oro-chiaro); color: var(--inchiostro-notte); }
.tema-notte .banner-mappa .btn { color: var(--inchiostro-notte); border-color: var(--inchiostro-notte); background: transparent; }

/* --- mappa: segnaposto che brillano sul fondo scuro ------------------------------------------- */
.tema-notte .mappa { background: #141c33; }
.tema-notte .pin-presepio span {
  background: radial-gradient(circle at 35% 30%, #fff1c2, #e9b955 60%, #c98f2c);
  color: var(--inchiostro-notte); border-color: #fff6d8;
  box-shadow: 0 0 14px 4px rgba(255, 214, 120, .6), 0 2px 6px rgba(0, 0, 0, .6);
}
.tema-notte .pin-presepio.chiuso span { background: #59607e; color: #d9d6e4; border-color: #8a90ac; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.tema-notte .pin-presepio.attivo span { background: #fff1c2; box-shadow: 0 0 0 6px rgba(255, 214, 120, .35), 0 0 22px 8px rgba(255, 214, 120, .7); }
.tema-notte .pin-servizio { background: #101a4e; color: #f6e7c1; border-color: #dbb465; box-shadow: 0 0 6px rgba(219, 180, 101, .45); }
.tema-notte .pin-servizio.g-dormire { color: #b9d4ff; border-color: #9cc3ff; box-shadow: 0 0 6px rgba(156, 195, 255, .45); }
.tema-notte .pin-servizio.partner { background: var(--oro-chiaro); color: var(--inchiostro-notte); }
.tema-notte .pin-poi { background: #1a2760; color: var(--oro-chiaro); border-color: var(--oro); box-shadow: 0 0 8px rgba(241, 213, 143, .45); }
.tema-notte .pin-poi.ambientazione { background: var(--oro-chiaro); color: var(--inchiostro-notte); border-color: #fff6d8; }
.tema-notte .pin-parcheggio, .tema-notte .p-icona { background: #2c4f9e; border-color: #cfe0ff; }
.tema-notte .pin-parcheggio.gratis, .tema-notte .p-icona.gratis { background: #2e7a4a; }
.tema-notte .pin-tappa { background: var(--oro-chiaro); color: var(--inchiostro-notte); border-color: #fff6d8; }
.tema-notte .pin-partenza { background: #f6ecd4; color: var(--inchiostro-notte); }
.tema-notte .leaflet-popup-content-wrapper, .tema-notte .leaflet-popup-tip { background: #101a4e; color: var(--inchiostro); box-shadow: 0 6px 20px rgba(0, 0, 0, .55); }
.tema-notte .leaflet-tooltip { background: #101a4e; color: var(--oro-chiaro); border-color: var(--oro); }
.tema-notte .leaflet-tooltip-top::before { border-top-color: var(--oro); }
.tema-notte .leaflet-bar a { background: #101a4e; color: var(--oro-chiaro); border-bottom-color: rgba(219, 180, 101, .35); }
.tema-notte .leaflet-control-attribution { background: rgba(10, 18, 58, .8); color: #b8b2c8; }
.tema-notte .leaflet-control-attribution a { color: var(--oro-chiaro); }

/* galleria e luoghi */
.tema-notte .scheda.luogo .scheda-foto figcaption a { color: #1d2357; }
.tema-notte .dintorni-foto strong { color: var(--oro-chiaro); }

/* conto alla rovescia per Natale */
.tema-notte .conto-natale { color: var(--oro-chiaro); background: rgba(241, 213, 143, .08); border-top-color: rgba(219, 180, 101, .3); }
.tema-notte .conto-natale.festa { background: linear-gradient(90deg, #d7a94f, #f3d488, #d7a94f); color: var(--inchiostro-notte); }

/* consigliati dai presepi e segnaposti raggruppati */
.tema-notte .badge-consigliato { background: #2e7a4a; color: #eafbe9; }
.tema-notte .pin-consigliato { background: #2e7a4a; color: #eafbe9; }
.tema-notte .pin-servizio.consigliato { border-color: #9ee0ae; }
.tema-notte .chips-filtro button.g-consigliati[aria-pressed="true"] { background: #2e7a4a; border-color: #9ee0ae; color: #eafbe9; }
.tema-notte .vuoto-consigliati, .tema-notte .consigliati-vuoto { border-color: rgba(219, 180, 101, .4); }
.tema-notte .pin-gruppo { background: #101a4e; color: var(--oro-chiaro); border-color: var(--oro); box-shadow: 3px -3px 0 -1px #101a4e, 3px -3px 0 0 var(--oro), 0 0 10px rgba(241, 213, 143, .35); }
.tema-notte .pin-vicini { background: var(--oro-chiaro); color: var(--inchiostro-notte); border-color: #fff6d8; }
.tema-notte .popup-vicini li .ico { color: var(--oro-chiaro); }
.tema-notte .volantino-pdf { background: var(--carta); border-color: var(--crema-scuro); }
.tema-notte .volantino-copertina { box-shadow: 0 0 0 1px rgba(241, 213, 143, .5), 0 0 16px rgba(241, 213, 143, .35); }