/* Il Calendario, la legenda e i colori delle fasce, il tasto della lingua, il
   PDF, i piani. */

/* --- Il calendario (Tappa 5) ------------------------------------------------- */
.filtro-calendario { margin: 0 0 18px; }
.vista[data-vista="calendario"] { overflow-x: hidden; overflow-x: clip; }
.mese { touch-action: pan-y; }
.mese.mese-avanti { animation: giornoAvanti .24s cubic-bezier(.2, .8, .3, 1); }
.mese.mese-indietro { animation: giornoIndietro .24s cubic-bezier(.2, .8, .3, 1); }
.testata-mese { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.nome-mese { flex: 1; margin: 0; font-family: var(--font-titolo); font-weight: 500; font-size: 22px; }
.comandi-mese { display: flex; align-items: center; gap: 4px; }
.freccia-mese, .oggi-mese { border: 0; background: var(--pista); color: var(--testo); border-radius: 999px; min-height: 36px; font: inherit; font-size: 14px; font-weight: 500; }
.freccia-mese { width: 36px; display: flex; align-items: center; justify-content: center; padding: 0; }
.freccia-mese svg { width: 18px; height: 18px; }
.oggi-mese { padding: 0 14px; color: var(--accento); }
.oggi-mese:disabled { color: var(--testo-3); }
.griglia-mese { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.intestazione-mese { text-align: center; font-size: 12px; font-weight: 600; color: var(--testo-2); padding: 2px 0 4px; }
.cella-mese { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 62px; padding: 5px 1px 4px;
  border: 0; border-radius: 10px; background: var(--card); color: var(--testo); font: inherit; box-shadow: inset 0 0 0 1px var(--bordo); }
.cella-mese.weekend { background: var(--bg-2); }
.cella-mese.fuori { opacity: .38; }
.cella-mese.spenta { opacity: .25; background: transparent; cursor: default; }
.freccia-mese:disabled { color: var(--testo-3); opacity: .5; }
.numero-cella { width: 24px; height: 24px; line-height: 24px; border-radius: 50%; font-size: 14px; font-weight: 500; text-align: center; }
.cella-mese.oggi .numero-cella { background: var(--accento); color: var(--accento-testo); font-weight: 700; }
.cella-mese.festa .numero-cella { color: var(--rosso); }
.cella-mese.oggi.festa .numero-cella { color: var(--accento-testo); }
.ore-cella { font-size: 11px; font-weight: 600; color: var(--testo-2); letter-spacing: -.02em; }
.ore-cella.studiate { color: var(--verde); }
.riposo-cella { width: 16px; height: 16px; color: var(--testo-3); }
.riposo-cella.esame { color: var(--accento); }
.segni-cella { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; margin-top: auto; }
.stato-cella { width: 11px; height: 11px; }
.stato-cella.registrata { color: var(--verde); }
.stato-cella.saltata { color: var(--ambra); }
.stato-cella.stimata { color: var(--testo-3); }
.segni-cella .punto { width: 6px; height: 6px; border-radius: 50%; }
.segni-cella .punto.impegno { background: var(--rosso); }
.segni-cella .punto.giro { background: var(--verde); }
@media (min-width: 760px) {
  .cella-mese { min-height: 92px; }
  .ore-cella { font-size: 13px; }
  .stato-cella { width: 13px; height: 13px; }
}

/* Il foglio del giorno. */
.giorno-calendario { display: flex; flex-direction: column; gap: 14px; }
.voci-giorno { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.voce-giorno { display: flex; align-items: flex-start; gap: 10px; }
.voce-giorno .icona-voce { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: var(--testo-3); }
.voce-giorno .testo-voce { flex: 1; display: flex; flex-direction: column; font-size: 15px; }
.voce-giorno small { font-size: 13px; color: var(--testo-2); }
.voce-giorno.registrata, .voce-giorno.registrata small, .voce-giorno.registrata .icona-voce { color: var(--verde); }
.voce-giorno.saltata, .voce-giorno.saltata small, .voce-giorno.saltata .icona-voce { color: var(--ambra); }
.voce-giorno.impegno .icona-voce { color: var(--rosso); }
.voce-giorno.giro .icona-voce { color: var(--verde); }
.voce-giorno.riposo .icona-voce, .voce-giorno.festa .icona-voce { color: var(--accento); }
.voce-giorno.buffer { color: var(--testo-2); font-size: 14px; }
.fascia-giorno h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-2);
  display: flex; align-items: center; gap: 6px; }
.fascia-giorno h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mattina); }
.fascia-giorno.pomeriggio h3::before { background: var(--pomeriggio); }
.totale-giorno { display: flex; justify-content: space-between; margin: 0; padding-top: 12px; border-top: 1px solid var(--bordo); font-size: 15px; }
.totale-giorno.studiato b { color: var(--verde); }
.vuoto-giorno { margin: 0; }

/* La testata del calendario: la legenda a sinistra, il cambio di vista a destra. */
.testata-calendario { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 24px; }
.testata-calendario .titolo-vista { margin: 0; text-align: center; flex: 1; }
.testata-calendario .bottone-icona svg { width: 21px; height: 21px; }

/* Le settimane. */
.settimane { display: flex; flex-direction: column; gap: 10px; }
.azioni-settimane { display: flex; justify-content: flex-end; gap: 18px; font-size: 14px; }
.settimana { padding: 0; overflow: hidden; }
.settimana.corrente { border: 1.5px solid var(--accento); }
.testa-settimana { width: 100%; display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; align-items: center; text-align: left;
  border: 0; background: none; font: inherit; color: var(--testo); padding: 14px 16px; min-height: var(--tocco); }
.testa-settimana .freccia { width: 16px; height: 16px; color: var(--testo-2); transition: transform .2s ease; grid-row: span 2; }
.testa-settimana[aria-expanded="true"] .freccia { transform: rotate(90deg); }
.periodo-settimana { font-size: 16px; font-weight: 600; }
.testa-settimana small { grid-column: 2; font-size: 13px; color: var(--testo-2); }
.testa-settimana small:empty { display: none; }
.giorni-della-settimana { display: none; border-top: 1px solid var(--bordo); }
.settimana.aperta .giorni-della-settimana { display: block; }
.giorno-settimana { padding: 4px 16px 14px; border-bottom: 1px solid var(--bordo); }
.giorno-settimana:last-child { border-bottom: 0; }
.giorno-settimana.oggi { background: var(--accento-tenue); }
.testa-giorno { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; color: var(--testo);
  font-weight: 600; font-size: 15px; padding: 10px 0 8px; text-align: left; min-height: var(--tocco); }
.testa-giorno .freccia { margin-left: auto; width: 16px; height: 16px; color: var(--testo-3); }
.pillola-oggi { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accento); color: var(--accento-testo); }
.nota-calendario { font-size: 13px; color: var(--testo-2); margin: 4px 4px 0; }

/* La stima di completamento. */
.stime { margin-top: 28px; }
.testa-stime { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: none; font: inherit;
  font-size: 15px; font-weight: 600; color: var(--testo-2); padding: 8px; min-height: var(--tocco); }
.testa-stime .freccia { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .2s ease; }
.stime.aperta .testa-stime .freccia { transform: rotate(-90deg); }
.corpo-stime { display: none; }
.stime.aperta .corpo-stime { display: block; }
.corpo-stime > .sotto { text-align: center; margin: 0 0 10px; }
.tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--raggio); box-shadow: var(--ombra); background: var(--card); }
.tabella-stime { border-collapse: collapse; width: 100%; font-size: 13px; white-space: nowrap; }
.tabella-stime th, .tabella-stime td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.tabella-stime tbody tr:last-child > * { border-bottom: 0; }
.tabella-stime thead th { font-size: 12px; font-weight: 600; color: var(--testo-2); }
.tabella-stime th:first-child { position: sticky; left: 0; background: var(--card); font-weight: 600; z-index: 1; }
.tabella-stime td small { display: block; font-size: 11px; color: var(--testo-2); }
.tabella-stime td.vuota { color: var(--testo-3); }
.tabella-stime td.fatto { color: var(--verde); }
.verdetto { display: inline-block; padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: 12px; }
.verdetto.entro, .verdetto.giaConcluso { background: var(--verde-tenue); color: var(--verde); }
.verdetto.oltre { background: var(--rosso-tenue); color: var(--rosso); }
.verdetto.senzaData { background: var(--pista); color: var(--testo-2); }

/* La legenda. */
.legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.legenda li { display: flex; align-items: center; gap: 14px; font-size: 15px; }
.segno-legenda { width: 44px; display: flex; justify-content: center; flex-shrink: 0; }
.segno-legenda .stato-cella { width: 15px; height: 15px; }
.segno-legenda .riposo-cella { width: 18px; height: 18px; }
.segno-legenda .ore-cella { font-size: 13px; }
.segno-legenda .numero-cella { display: inline-block; }
.numero-cella.oggi-legenda { background: var(--accento); color: var(--accento-testo); font-weight: 700; }
.numero-cella.festa-legenda { color: var(--rosso); }
.fascia-legenda { width: 10px; height: 10px; border-radius: 50%; background: var(--mattina); }
.fascia-legenda.pomeriggio { background: var(--pomeriggio); }

/* Oggi: i colori delle fasce, come nella legenda. Il pallino davanti al
   titolo della sezione, la striscia sul bordo sinistro delle carte; "Mattina
   e pomeriggio" ha i due colori. (Col filtro la sezione e' quella del filtro.) */
.elenco-oggi[data-elenco="mattina"] > h2::before, .elenco-oggi[data-elenco="pomeriggio"] > h2::before,
.elenco-oggi[data-elenco="entrambe"] > h2::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 8px; vertical-align: 1px; background: var(--mattina); }
.elenco-oggi[data-elenco="pomeriggio"] > h2::before { background: var(--pomeriggio); }
.elenco-oggi[data-elenco="entrambe"] > h2::before { width: 18px; border-radius: 5px;
  background: linear-gradient(to right, var(--mattina) 50%, var(--pomeriggio) 50%); }
.elenco-oggi[data-elenco="mattina"] .carta-oggi, .elenco-oggi[data-elenco="pomeriggio"] .carta-oggi,
.elenco-oggi[data-elenco="entrambe"] .carta-oggi { position: relative; }
.elenco-oggi[data-elenco="mattina"] .carta-oggi::before, .elenco-oggi[data-elenco="pomeriggio"] .carta-oggi::before,
.elenco-oggi[data-elenco="entrambe"] .carta-oggi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--mattina); }
.elenco-oggi[data-elenco="pomeriggio"] .carta-oggi::before { background: var(--pomeriggio); }
.elenco-oggi[data-elenco="entrambe"] .carta-oggi::before { background: linear-gradient(to bottom, var(--mattina) 50%, var(--pomeriggio) 50%); }
.elenco-oggi[data-elenco="mattina"] > .riga-fascia, .elenco-oggi[data-elenco="pomeriggio"] > .riga-fascia { margin-left: 33px; }
.elenco-oggi[data-elenco="entrambe"] > .riga-fascia { margin-left: 42px; }

/* Il tasto della lingua: bandiera e sigla, come il menu della vecchia app. */
.tasto-lingua { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--bordo);
  background: var(--card); color: var(--testo); font: inherit; font-size: 14px; font-weight: 600; box-shadow: var(--ombra); flex-shrink: 0; }
.tasto-lingua .bandiera { font-size: 17px; line-height: 1; }
.angolo-lingua { display: flex; justify-content: flex-end; padding-top: 4px; }
.voce-lingua .bandiera { font-size: 22px; width: 32px; text-align: center; }
.voce-lingua .spunta-lingua { width: 20px; height: 20px; color: var(--accento); }
.titoletto-paese { margin: 6px 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-2); }

/* Il calendario in PDF: la riga in fondo al Calendario e l'anteprima nel foglio. */
.riga-pdf { margin-top: 18px; }
.conta-pdf { margin: 4px 0 0; }
.anteprima-pdf { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; padding: 4px 2px; }
.foglio-pdf { border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); overflow: hidden; background: #fff; flex-shrink: 0; }
.foglio-pdf svg { display: block; width: 100%; height: auto; }

/* I piani: la pillola col piano attivo sotto il titolo del Piano e il foglio
   "I tuoi piani". */
.riga-piani { display: flex; justify-content: center; margin: -14px 0 18px; }
.pillola-piano { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 36px; padding: 0 12px 0 14px; border-radius: 999px;
  border: 1px solid var(--bordo); background: var(--card); color: var(--testo); font: inherit; font-size: 15px; font-weight: 600; box-shadow: var(--ombra); }
.pillola-piano .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pillola-piano .giu { width: 12px; height: 12px; color: var(--testo-3); transform: rotate(90deg); flex-shrink: 0; }
.pillola-piano:active { transform: scale(.98); }
.elenco-piani > li { display: flex; align-items: center; }
.elenco-piani > li + li { box-shadow: inset 0 1px 0 var(--bordo); }
.elenco-piani > li + li .riga { box-shadow: none; }
.elenco-piani .scegli-piano { flex: 1; min-width: 0; }
.elenco-piani .etichetta { overflow-wrap: anywhere; }
.elenco-piani .spunta-piano { width: 20px; height: 20px; color: var(--accento); flex-shrink: 0; }
.elenco-piani .opzioni-piano { border: 0; background: none; box-shadow: none; color: var(--testo-2); margin-right: 4px; flex-shrink: 0; }
.foglio-piani .sotto { margin: 10px 4px 0; font-size: 14px; }
.foglio-piani .importa-piano { display: block; margin: 4px auto 0; }
.elimina-piano { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--rosso); }
.elimina-piano svg { width: 18px; height: 18px; }