/*
 * tema.css — l'aspetto, e nient'altro.
 *
 * Tutto cio che rende Pellicola riconoscibile sta qui: colori, raggi degli
 * angoli, tavolozza. Il resto del foglio di stile descrive solo la struttura.
 *
 * Per rivestire l'applicazione con l'identita di un festival basta sostituire
 * questo file: nessuna riga di logica, nessun altro foglio da toccare.
 * I caratteri si cambiano nel <link> di index.html e nelle due variabili qui.
 *
 * La tavolozza e neutra di proposito: non imita nessun marchio esistente.
 */

:root{

    --ink:#0C1611; --felt:#132219; --felt-2:#1A2E22; --line:#26402F;
    --paper:#EDE8D8; --dim:#8B9B8F; --carpet:#33A96E; --carpet-soft:#1E5D3E;
    --alarm:#E0563C; --amber:#D9A441; --radius:3px;
    color-scheme:dark;
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-titoli: "Newsreader", Georgia, serif;
}

/* il selettore di lingua, in alto a destra */
.lingue{display:flex;gap:2px;justify-content:flex-end;padding-top:14px}
.lang{font-size:12px;color:var(--dim);padding:3px 9px;border:1px solid transparent;
  border-radius:var(--radius);letter-spacing:.02em}
.lang:hover{color:var(--paper);border-color:var(--line)}
.lang.on{color:var(--paper);background:var(--felt);border-color:var(--line)}

/* "e se lo spostassi?" */
.swapBtn{width:30px;height:30px;margin-right:4px;border:1px solid var(--line);
  border-radius:50%;font-size:14px;color:var(--dim);display:grid;place-items:center}
.swapBtn:hover{border-color:var(--paper);color:var(--paper)}
.alt:empty{display:none}
.altLista{border-left:2px solid var(--line);margin:0 0 10px 62px;padding-left:12px}
.altCerco{margin:0 0 10px 62px;font-size:12.5px;color:var(--dim)}
.altRiga{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;
  padding:7px 0;font-size:12.5px;border-bottom:1px solid var(--line)}
.altRiga:last-child{border-bottom:none}
.altQuando{font-variant-numeric:tabular-nums;font-weight:600;color:var(--paper);white-space:nowrap}
.altDove{color:var(--dim);display:block}
.altSposta{display:block;margin-top:2px;color:var(--dim);opacity:.8;font-size:12px}
.altRiga.si .altQuando{color:var(--carpet)}
.altRiga.caro .altQuando{color:var(--alarm)}
.altRiga.medio .altQuando{color:var(--amber)}
.altRiga.no{opacity:.5}
.altVai{font-size:12px;color:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:3px 10px;white-space:nowrap}
.altVai:hover{border-color:var(--carpet);color:var(--carpet)}

/* desideri: i tuoi in cima, il resto sotto */
.blocco{margin-bottom:6px}
.bloccoTit{margin:20px 0 4px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:6px}
.blocco:first-child .bloccoTit{margin-top:10px;color:var(--carpet);border-bottom-color:var(--carpet)}
.bloccoConta{text-transform:none;letter-spacing:0;opacity:.7}
.bloccoVuoto{margin:12px 0 4px;font-size:13px;color:var(--dim)}

/* le rinunce alternative */


.altAvviso{margin:0 0 8px 62px;font-size:12.5px;color:var(--amber);
  border-left:2px solid var(--amber);padding-left:10px}
.altVai.ricompra{color:var(--amber);border-style:dashed}
.altVai.ricompra:hover{border-color:var(--amber);color:var(--amber)}

.soldBtn{width:30px;height:30px;margin-right:4px;border:1px solid var(--line);
  border-radius:50%;font-size:14px;color:var(--line);display:grid;place-items:center}
.soldBtn:hover{border-color:var(--alarm);color:var(--alarm)}
.soldBtn.on{background:var(--alarm);border-color:var(--alarm);color:var(--ink)}
.row.soldout .title{text-decoration:line-through;text-decoration-thickness:1px;opacity:.65}
.row.soldout .time{opacity:.6}
.eso{color:var(--alarm)}

.pinBtn{width:30px;height:30px;margin-right:4px;border:1px solid var(--line);
  border-radius:50%;font-size:13px;color:var(--dim);display:grid;place-items:center}
.pinBtn:hover{border-color:var(--paper);color:var(--paper)}
.pinBtn.on{background:var(--felt-2);border-color:var(--paper);color:var(--paper)}

.mioAvviso{color:var(--amber);font-weight:500}
.mioElenco{display:block;margin-top:4px}
.mioBlocco{font-size:12px;color:var(--paper);border:1px solid var(--amber);
  border-radius:var(--radius);padding:2px 9px;margin:3px 5px 0 0}
.mioBlocco:hover{background:var(--felt-2)}
.mioBloccoFisso{display:inline-block;font-size:12px;color:var(--dim);margin:3px 5px 0 0}

/* i bottoni di una riga stanno sempre insieme, a destra */
.azioni{display:flex;align-items:center;justify-content:flex-end;gap:5px;
  align-self:center;flex:0 0 auto}
.azioni button{flex:0 0 auto;margin-right:0}


/* i film messi da parte */
.report.tolti{border-left-color:var(--dim)}
.report.tolti h3{color:var(--dim)}
.report.tolti li{margin-bottom:5px}
.rimetti{font-size:12px;color:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:2px 9px;margin-left:6px}
.rimetti:hover{border-color:var(--carpet);color:var(--carpet)}
.ghost:disabled{opacity:.4;cursor:default}
.ghost:disabled:hover{border-color:transparent;color:var(--dim)}

/* il pallino del biglietto sta a sinistra, prima dell'orario */
.marca{align-self:center;display:flex;align-items:center}
.marca{min-width:30px;justify-content:center}

/* profilo e ambiente */
.testaAlta{display:flex;align-items:center;gap:10px;padding-top:14px}
.profilo{font-size:11.5px;color:var(--dim);border:1px solid var(--line);
  border-radius:999px;padding:2px 10px;letter-spacing:.03em;white-space:nowrap}
.profilo.prova{color:var(--amber);border-color:var(--amber)}
.testaAlta .lingue{margin-left:auto;padding-top:0}
body.ambiente-prova .wrap{border-top:2px solid var(--amber)}

/* sezione e prezzo nelle alternative */
.altTipo{display:block;margin-top:5px;font-size:13px;color:#A9BCAF;letter-spacing:.01em}

/* il film che si perde: e la cosa piu importante della riga */
.perso{color:var(--alarm);font-weight:600;text-decoration:line-through;
  text-decoration-thickness:1px;text-underline-offset:2px}

.altPiu{opacity:.65;font-variant-numeric:tabular-nums;font-size:11px}

.ricomprato{color:var(--amber);font-weight:600}

.legenda{display:block;margin-top:6px;font-size:11.5px;color:var(--dim);opacity:.8}

.altCosto{font-size:11px;opacity:.75;font-weight:400;letter-spacing:.01em}


/* Le rinunce: riquadri tutti uguali, in colonne che si adattano alla
   larghezza. Allineati a sinistra, cosi i costi si leggono in verticale
   e si confrontano a colpo d'occhio. */
/* Una colonna sola: i riquadri si leggono in verticale e i costi si
   confrontano incolonnati, che e il motivo per cui esistono. */
.altSacri{display:grid;gap:6px;margin-top:7px;grid-template-columns:1fr}
.altAlt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;margin:0;padding:8px 12px;text-align:left;line-height:1.35;
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--paper);font-size:13.5px}
.altAlt:hover{border-color:var(--paper);background:var(--felt)}
.altAlt.caro{color:var(--amber)}
.altAlt.caro:hover{border-color:var(--amber)}
.altCosto{font-size:11.5px;opacity:.8;font-weight:400}
@media (max-width:640px){
  .altAlt{font-size:14px;padding:11px 12px}
}

/* Rinunciare e una perdita, non un consiglio: qui dentro niente verde.
   La meno costosa si distingue con un bordo pieno, non con un premio. */
.notaRinuncia{color:var(--alarm);font-weight:600}
.altAlt.consigliata{border-color:var(--paper);border-style:solid}
.altAlt.consigliata:hover{border-color:var(--paper);background:var(--felt-2)}
.altBollo{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);font-weight:600}
.altAlt .altCosto{color:var(--amber);opacity:.9}
.altAlt.consigliata .altCosto{color:var(--dim);opacity:1}

/* Le riorganizzazioni non sono perdite: niente rosso, niente ambra. */
.altAlt.arrocco{color:var(--paper)}
.altAlt.arrocco .altCosto{color:var(--dim)}
.altAlt.arrocco:hover{border-color:var(--paper);background:var(--felt)}

/* Un imprescindibile rimasto fuori: si vede. */
.senatore{color:var(--amber);font-weight:600;font-size:12.5px}
.fuoriSenatore{border-left:2px solid var(--amber);padding-left:9px;margin-left:-11px}

.altTitoletto{display:block;margin-top:9px;font-size:12px;color:var(--alarm);font-weight:600}

.calBtn{width:30px;height:30px;border:1px solid var(--line);border-radius:50%;
  font-size:13px;color:var(--dim);display:grid;place-items:center}
.calBtn:hover{border-color:var(--paper);color:var(--paper)}

.profilo.vuoto{display:none}

/* Il dettaglio a richiesta: sul telefono non c'e l'hover. */
.altSacri{position:relative}
.altPerche{position:absolute;right:9px;margin-top:-34px;width:26px;height:26px;
  border:1px solid var(--line);border-radius:50%;font-size:12px;color:var(--dim);
  background:var(--felt);display:grid;place-items:center;z-index:2}
.altPerche:hover{border-color:var(--paper);color:var(--paper)}
.altRacconto{grid-column:1/-1;white-space:pre-wrap;font-size:12.5px;line-height:1.5;
  color:var(--dim);border-left:2px solid var(--line);padding:8px 0 8px 11px;margin:2px 0 4px}
@media (max-width:640px){
  .altPerche{width:30px;height:30px;margin-top:-38px}
  .altRacconto{font-size:13px}
}

.notaCookie{margin-top:6px;font-size:12px;opacity:.75}
.notaCookie:empty{display:none}

/* Colori dei cinema nella settimana. --c e il filo a sinistra del blocco,
   --cb lo sfondo. Tinte smorzate: il colore distingue, non urla. */
.cl-corso {--c:#d4ae3a;--cb:rgba(212,174,58,.20)}
.cl-kongr {--c:#dd7258;--cb:rgba(221,114,88,.20)}
.cl-paris {--c:#a08ad6;--cb:rgba(160,138,214,.20)}
.cl-podium{--c:#5fb3a9;--cb:rgba(95,179,169,.20)}
.cl-koni  {--c:#74a7e0;--cb:rgba(116,167,224,.20)}
.cl-arena {--c:#c97aa6;--cb:rgba(201,122,166,.20)}
.cl-picc  {--c:#88bb72;--cb:rgba(136,187,114,.20)}
.setFilm{color:var(--paper)}
.setTragitto{background:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 4px,transparent 4px 8px)}
.setTragitto.tight{background:repeating-linear-gradient(135deg,rgba(217,164,65,.45) 0 4px,transparent 4px 8px)}
.setTragitto.impossible{background:repeating-linear-gradient(135deg,rgba(220,90,70,.65) 0 4px,transparent 4px 8px)}
.leg-tragitto i{background:repeating-linear-gradient(135deg,rgba(255,255,255,.3) 0 3px,transparent 3px 6px) !important;border-left-color:transparent !important}

.avvisoDisp{margin:10px 0 0;font-size:13px;color:var(--amber);opacity:.9}

/* Quattro livelli di passaggio, uguali nella lista e nella settimana.
   Il colore aiuta, ma la parola c'e sempre: chi non distingue i colori
   deve capire lo stesso. */
.liv-comodo     {--lv:#3fae74}
.liv-scarso     {--lv:#d9a441}
.liv-limite     {--lv:#e5793a}
.liv-impossibile{--lv:#e05a48}
.gap.liv-comodo .bar{background:var(--lv);opacity:.55}
.gap.liv-scarso .bar,.gap.liv-limite .bar,.gap.liv-impossibile .bar{background:var(--lv)}
.gap.liv-scarso .txt,.gap.liv-limite .txt,.gap.liv-impossibile .txt{color:var(--lv)}
.gap.liv-limite .txt,.gap.liv-impossibile .txt{font-weight:600}
.setTragitto.liv-comodo     {background:repeating-linear-gradient(135deg,rgba(63,174,116,.30) 0 4px,transparent 4px 8px)}
.setTragitto.liv-scarso     {background:repeating-linear-gradient(135deg,rgba(217,164,65,.55) 0 4px,transparent 4px 8px)}
.setTragitto.liv-limite     {background:repeating-linear-gradient(135deg,rgba(229,121,58,.70) 0 4px,transparent 4px 8px)}
.setTragitto.liv-impossibile{background:repeating-linear-gradient(135deg,rgba(224,90,72,.80) 0 4px,transparent 4px 8px)}
.leg-liv i{background:repeating-linear-gradient(135deg,var(--lv) 0 3px,transparent 3px 6px) !important;
  border-left-color:transparent !important}
.setTragitto.liv-scarso,.setTragitto.liv-limite{left:8px;right:8px;border-radius:4px}

/* Il colore del cinema anche nelle righe del piano: un filo a sinistra e una
   sfumatura che si spegne verso destra. Sostituisce il verde uniforme dei
   film scelti e l'ambra dei comprati — il biglietto comprato resta
   riconoscibile dal pallino pieno e dalla scritta. */
.row.conmarca[class*=" cl-"]{--gCinema:linear-gradient(to right,var(--cb),transparent 78%);
  box-shadow:inset 3px 0 0 var(--c)}

/* ---------------------------------------------------------------
   Il passaggio si scalda man mano che il tempo si stringe.
   comodo: verde calmo · stretto: brace · al limite: fiamma, con un
   tremolio da candela · impossibile: rosso scuro, fermo.
   --------------------------------------------------------------- */
@keyframes fiamma{
  0%,100%{filter:brightness(1)    saturate(1);   box-shadow:0 0 7px  rgba(255,110,30,.40)}
  30%    {filter:brightness(1.15) saturate(1.1); box-shadow:0 0 14px rgba(255,150,40,.60)}
  55%    {filter:brightness(.94)  saturate(1);   box-shadow:0 0 9px  rgba(255,90,30,.45)}
  80%    {filter:brightness(1.08) saturate(1.05);box-shadow:0 0 12px rgba(255,130,40,.55)}
}

/* nella settimana: fasce piene, non piu righine tratteggiate */
.setTragitto.liv-scarso{
  background:linear-gradient(to bottom,rgba(242,180,65,.80),rgba(226,121,47,.80));
  box-shadow:0 0 8px rgba(230,130,40,.30)}
.setTragitto.liv-limite{
  background:linear-gradient(to bottom,#ffd35a 0%,#ff8a2b 45%,#e2452c 100%);
  animation:fiamma 1.9s ease-in-out infinite}
.setTragitto.liv-impossibile{
  background:repeating-linear-gradient(135deg,#8e1c16 0 5px,#b3261e 5px 10px);
  box-shadow:inset 0 0 0 1px rgba(255,90,70,.5)}

/* nella lista: la barra a sinistra si accende, e il testo prende il colore */
.gap.liv-scarso .bar{width:4px;border-radius:2px;
  background:linear-gradient(to bottom,#f2b441,#e2792f);box-shadow:0 0 6px rgba(230,130,40,.35)}
.gap.liv-scarso .txt{color:#f0a33f}
.gap.liv-limite .bar{width:4px;border-radius:2px;
  background:linear-gradient(to bottom,#ffd35a,#ff8a2b 50%,#e2452c);
  animation:fiamma 1.9s ease-in-out infinite}
.gap.liv-limite .txt{font-weight:600;color:#ff8a2b;
  background:linear-gradient(90deg,#ffd35a,#ff8a2b 40%,#ff5a3a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gap.liv-impossibile .bar{width:4px;border-radius:2px;background:#b3261e}
.gap.liv-impossibile .txt{color:#ff6a55;font-weight:600}

/* la legenda mostra gli stessi fuochi */
.leg-liv.liv-scarso i{background:linear-gradient(to bottom,#f2b441,#e2792f) !important}
.leg-liv.liv-limite i{background:linear-gradient(to bottom,#ffd35a,#ff8a2b 50%,#e2452c) !important;
  animation:fiamma 1.9s ease-in-out infinite}
.leg-liv.liv-impossibile i{background:repeating-linear-gradient(135deg,#8e1c16 0 3px,#b3261e 3px 6px) !important}

@media (prefers-reduced-motion:reduce){
  .setTragitto.liv-limite,.gap.liv-limite .bar,.leg-liv.liv-limite i{animation:none}
}

/* tavolozza per i cinema di altri festival, assegnata in ordine */
.clp-0{--c:#d4ae3a;--cb:rgba(212,174,58,.20)}
.clp-1{--c:#dd7258;--cb:rgba(221,114,88,.20)}
.clp-2{--c:#a08ad6;--cb:rgba(160,138,214,.20)}
.clp-3{--c:#5fb3a9;--cb:rgba(95,179,169,.20)}
.clp-4{--c:#74a7e0;--cb:rgba(116,167,224,.20)}
.clp-5{--c:#c97aa6;--cb:rgba(201,122,166,.20)}
.clp-6{--c:#88bb72;--cb:rgba(136,187,114,.20)}
.clp-7{--c:#e0a060;--cb:rgba(224,160,96,.20)}
.clp-8{--c:#6fc0d8;--cb:rgba(111,192,216,.20)}
.clp-9{--c:#b8a0e8;--cb:rgba(184,160,232,.20)}
.clp-10{--c:#d99a9a;--cb:rgba(217,154,154,.20)}
.clp-11{--c:#9fc27a;--cb:rgba(159,194,122,.20)}
.row.conmarca[class*=" clp-"]{--gCinema:linear-gradient(to right,var(--cb),transparent 78%);box-shadow:inset 3px 0 0 var(--c)}

/* Il titolo porta alla pagina ufficiale del film: si riconosce da una
   freccina discreta, non da un blu da link che stonerebbe col resto. */
a.filmLink{color:inherit;text-decoration:none;border-bottom:1px dotted transparent}
a.filmLink::after{content:" \2197";font-size:.7em;opacity:.45;font-style:normal}
a.filmLink:hover{border-bottom-color:currentColor}
a.filmLink:hover::after{opacity:.9}

/* Lingue sul telefono: sigle al posto dei nomi, e la testata puo andare a
   capo invece di spingere i bottoni fuori dallo schermo. */
.lang .lCorto{display:none}
.testaAlta{flex-wrap:wrap;row-gap:6px}
@media (max-width:480px){
  .lang .lLungo{display:none}
  .lang .lCorto{display:inline}
  .lang{min-width:40px}
}


.sinLink{color:var(--carpet)}
.sinAttesa,.sinNiente{color:var(--dim)}

/* L'anteprima non ha un bordo netto: sfuma. Il filo a sinistra si spegne in
   alto e in basso, i margini si stemperano in una velatura, e sotto c'e
   un'ombra morbida che la stacca dalla riga senza tagliarla. */
.sinossi{
  color:var(--paper);
  background:
    linear-gradient(to bottom, transparent 0, var(--felt-2) 14px, var(--felt-2) calc(100% - 14px), transparent 100%),
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05));
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  border:0;
  position:relative}
.sinossi::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;
  background:linear-gradient(to bottom, transparent, var(--carpet-soft) 18%, var(--carpet-soft) 82%, transparent)}

.wperche{color:var(--alarm)}

.posti.p-ultimi{background:rgba(217,164,65,.20);color:#f0a33f;box-shadow:inset 0 0 0 1px rgba(217,164,65,.45)}
.posti.p-esaurito{background:rgba(224,90,72,.20);color:#ff8a78;box-shadow:inset 0 0 0 1px rgba(224,90,72,.5)}
.posti.p-nonInVendita{background:rgba(139,155,143,.14);color:var(--dim);box-shadow:inset 0 0 0 1px rgba(139,155,143,.3)}
.wperche.soloUltimi{color:#f0a33f}

/* Il passaggio si legge anche di sfuggita: una sfumatura che parte da
   sinistra e si spegne verso destra. Verde: zona tranquilla. Ambra e
   arancio: si cammina di buon passo. Rosso: non ci si arriva. */
.gap.liv-comodo{background:linear-gradient(to right, rgba(63,174,116,.16) 0, rgba(63,174,116,0.06) 38%, transparent 72%);border-radius:0 var(--radius) var(--radius) 0}
.gap.liv-scarso{background:linear-gradient(to right, rgba(217,164,65,.22) 0, rgba(217,164,65,0.10) 38%, transparent 72%);border-radius:0 var(--radius) var(--radius) 0}
.gap.liv-limite{background:linear-gradient(to right, rgba(229,121,58,.22) 0, rgba(229,121,58,0.10) 38%, transparent 72%);border-radius:0 var(--radius) var(--radius) 0}
.gap.liv-impossibile{background:linear-gradient(to right, rgba(224,90,72,.22) 0, rgba(224,90,72,0.10) 38%, transparent 72%);border-radius:0 var(--radius) var(--radius) 0}

/* Due sfumature che si incontrano: il cinema entra da sinistra, la
   disponibilita dei posti da destra. Verde tranquillo, ambra ultimi posti,
   rosso tutto esaurito, grigio non in vendita. */
.row{background-image:var(--gPosti, none), var(--gCinema, none)}

/* Nell'anteprima ogni stato ha il suo colore; la data resta discreta. */
.sinExtra{color:var(--paper)}
.sinQuando{color:var(--dim);font-weight:400}
.sinOspiti{color:var(--carpet)}
.sinExtra i.p-liberi{color:#3fae74}
.sinExtra i.p-ultimi{color:#f0a33f}
.sinExtra i.p-esaurito{color:#ff8a78}
.sinExtra i.p-nonInVendita{color:var(--dim)}

/* La disponibilita entra da destra e arriva fin oltre la meta, con un filo
   sul bordo: simmetrico a quello del cinema a sinistra, e si vede anche
   quando il colore del cinema e scuro. */
.row.st-liberi{--gPosti:linear-gradient(to left, rgba(63,174,116,.22) 0, rgba(63,174,116,0.088) 34%, transparent 68%);border-right:3px solid rgba(63,174,116,0.48)}
.row.st-ultimi{--gPosti:linear-gradient(to left, rgba(217,164,65,.34) 0, rgba(217,164,65,0.136) 34%, transparent 68%);border-right:3px solid rgba(217,164,65,0.75)}
.row.st-esaurito{--gPosti:linear-gradient(to left, rgba(224,90,72,.38) 0, rgba(224,90,72,0.152) 34%, transparent 68%);border-right:3px solid rgba(224,90,72,0.84)}
.row.st-nonInVendita{--gPosti:linear-gradient(to left, rgba(139,155,143,.20) 0, rgba(139,155,143,0.08) 34%, transparent 68%);border-right:3px solid rgba(139,155,143,0.44)}
.sinQa{color:var(--amber)}

/* Q&A e ospiti: l'ambra dice «qui si resta», il nome dice con chi. */
.qaTag{color:#f0a33f}
.ospTag{color:var(--paper);opacity:.9}
.setExtra{color:#f0a33f}