/* I colori dell'app stanno tutti qui: il tema scuro non ridipinge i componenti uno per uno,
   cambia questi sei valori (RF-D2). L'amministrazione ha i suoi (--admin-*) e non c'entra. */
:root {
    --fondo: #f7f7f8;
    --superficie: #ffffff;
    --testo: #1d1d20;
    --tenue: #6c6c76;
    --bordo: #e3e3e8;
    --accento: #0b5ed7;
    --accento-scuro: #073d8c;      /* il testo del ritornello: leggibile, non sbiadito */

    /* Quanto e' alta l'intestazione ferma in alto. La barra dello scorrimento si appoggia
       esattamente sotto: se cambia una, va cambiata l'altra. */
    --alto-testa: 53px;
}

body.tema-scuro {
    --accento-scuro: #bcd6ff;
    --fondo: #12151a;
    --superficie: #1a1e25;
    --testo: #e8e8e8;
    --tenue: #9aa0ab;
    --bordo: #2a3038;
    --accento: #6ea8fe;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--fondo);
    color: var(--testo);

    /* Vale per tutta la pagina, non solo per cio' che si preme. Un pulsante disabilitato — la
       velocita' gia' al massimo, la tonalita' gia' in fondo — non riceve il tocco: quello passa
       al contenitore, e li' il doppio tocco tornava a ingrandire la pagina. Misurato: il
       pulsante aveva «manipulation», il suo contenitore e il body «auto».
       Il pinch a due dita continua a funzionare: «manipulation» toglie solo il doppio tocco. */
    touch-action: manipulation;
}

/* Due tocchi rapidi su un pulsante sono due tocchi, non la richiesta di ingrandire la pagina.
   Senza questo il browser aspetta 300 ms per capire se sta arrivando un doppio tocco, e quando
   decide che sì, ingrandisce invece di eseguire due volte quello che si e premuto: chi tocca
   A+ due volte di fila si ritrova la pagina zoomata. Vale per tutto cio che si preme; il pinch
   a due dita sul testo del canto continua a funzionare, perche quello non e touch-action. */
button, a, select, input[type="checkbox"], input[type="radio"], label, .voce {
    touch-action: manipulation;
}

/* E al secondo tocco non si deve nemmeno selezionare l'etichetta del pulsante. */
button, .commutatore, .modi, .velocita, .app-piede {
    -webkit-user-select: none;
    user-select: none;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---- la vista del canto ---- */

/* In cima allo schermo lo spazio e' del testo del canto: prima titolo, dimensione,
   trasposizione e scorrimento si prendevano il 44% di un telefono, e del canto si vedevano tre
   righe. Qui si stringe tutto quello che si tocca una volta e poi non serve piu'. */
.barra-canto { margin-bottom: .35rem; }
.titolo-canto { font-size: 1.15rem; margin: 0 0 .3rem; display: flex; gap: .4rem; align-items: center; }
.titolo-canto .titolo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Solo la freccia, ma grande: dentro un bersaglio da quaranta pixel un segno da dodici si
   perde, e non si capisce nemmeno cos'e'. */
.indietro.indietro-canto {
    flex: 0 0 auto;
    border: 1px solid var(--bordo);
    background: var(--superficie);
    color: var(--testo);
    border-radius: 8px;
    min-width: 42px;
    min-height: 38px;
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 1;
    padding: 0 0 .15rem 0;
    cursor: pointer;
}

/* La stella va in fondo alla riga del titolo, dalla parte opposta della freccia. */
.titolo-canto .stella { margin-left: auto; flex: 0 0 auto; }
.titolo-canto .numero { color: var(--accento); font-weight: 700; flex: 0 0 auto; }
.titolo-canto .codice { color: var(--tenue); font-weight: 600; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.comandi-canto { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

.comandi-canto .comando {
    border: 1px solid var(--bordo);
    background: var(--superficie);
    color: var(--testo);
    border-radius: 8px;
    min-width: 42px;
    min-height: 38px;
    font: inherit;
    cursor: pointer;
}

.comandi-canto .percento { color: var(--tenue); font-size: .85rem; min-width: 3.2em; text-align: center; }

.comandi-canto .spartito, .altri-spartiti .spartito {
    margin-left: auto;
    padding: .3rem .7rem;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    color: var(--testo);
    text-decoration: none;
}

.comandi-canto .spartito.in-evidenza { background: var(--accento); border-color: var(--accento); color: #fff; font-weight: 600; }
.altri-spartiti { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.altri-spartiti .spartito { margin-left: 0; font-size: .9rem; }

/* Lo scorrimento: il bersaglio per avviare è tutta la barra, si tocca senza mirare. */
/* Resta sotto l'intestazione mentre il canto scorre. Prima se ne andava in alto col resto:
   in «a sezioni» dopo il primo tocco il pulsante non c'era piu' e non si poteva passare alla
   sezione dopo, che e' proprio quello per cui serve. */
.comandi-scorrimento {
    position: sticky;
    top: var(--alto-testa);
    z-index: 9;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .5rem 0;
    padding: .35rem 0;
    background: var(--fondo);
}

.comandi-scorrimento .grande {
    flex: 1 1 90px;
    min-height: 44px;
    white-space: nowrap;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    background: var(--superficie);
    color: var(--testo);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.comandi-scorrimento .grande.in-corso { background: var(--accento); border-color: var(--accento); color: #fff; }
.comandi-scorrimento .grande .conto { font-size: 1.3rem; }

.comandi-scorrimento .velocita { display: flex; align-items: center; gap: .2rem; flex: 0 0 auto; }

.comandi-scorrimento .velocita button {
    border: 1px solid var(--bordo);
    background: var(--superficie);
    color: var(--testo);
    border-radius: 8px;
    min-width: 36px;
    min-height: 38px;
    font: inherit;
    cursor: pointer;
}

.comandi-scorrimento .velocita button:disabled { opacity: .4; cursor: default; }
.comandi-scorrimento .velocita .valore { color: var(--tenue); font-size: .8rem; min-width: 2.5em; text-align: center; }

.comandi-scorrimento .modi { display: flex; gap: .25rem; flex: 0 0 auto; }

.comandi-scorrimento .modi button {
    border: 1px solid var(--bordo);
    background: var(--superficie);
    color: var(--tenue);
    border-radius: 999px;
    padding: .2rem .5rem;
    min-height: 38px;
    font: inherit;
    font-size: .76rem;
    white-space: nowrap;
    cursor: pointer;
}

.comandi-scorrimento .modi button.attivo { border-color: var(--accento); color: var(--accento); font-weight: 600; }
.comandi-scorrimento .nota { flex: 1 1 100%; margin: 0; }
.avviso-schermo { margin: .2rem 0 .6rem; }

.canto { line-height: 1.9; }

/* Due colonne solo dove c'è spazio davvero, e senza spezzare una strofa a metà. */
@media (orientation: landscape) and (min-width: 700px) {
    .canto.due-colonne { column-count: 2; column-gap: 2.2rem; }
    .canto.due-colonne .sezione { break-inside: avoid; }
}
.canto .riga { white-space: pre-wrap; margin-bottom: .35rem; }

/* Senza accordi l'interlinea larga non serve a niente e allontana le righe fra loro: così la
   distanza fra due strofe si confondeva con quella fra due righe. Qui le righe si stringono. */
.canto.senza-accordi { line-height: 1.4; }
.canto.senza-accordi .riga { margin-bottom: .15rem; }
.canto .segmento { display: inline-flex; flex-direction: column; vertical-align: bottom; }
/* Il margine a destra serve a due accordi di fila: senza, «Do» e «La7» si toccano e si
   leggono come un accordo solo. Non sposta l'accordo dalla sua sillaba: allarga il
   segmento solo dove l'accordo è già più largo del testo che gli sta sotto. */
.canto .accordo { font-weight: 700; color: #b8322c; line-height: 1; min-height: 1.1em; white-space: pre; padding-right: .25em; }

/* Un accordo può restare senza sillaba: due accordi di fila, o l'ultimo prima dell'a-capo.
   Il testo vuoto non farebbe riga, il segmento si accorcerebbe e — essendo allineato in
   basso — l'accordo scivolerebbe in mezzo alle parole invece di stare sopra. Lo spazio a
   larghezza zero fa nascere la riga senza aggiungere niente di visibile. */
.canto .testo:empty::before { content: "\200b"; }
/* Il ritornello si distingueva dal corsivo e basta: su piu righe il corsivo si legge peggio
   e da lontano non si distingue affatto — e il leggio e lontano. Adesso ha una barra a
   sinistra, un fondo appena piu carico e il colore dell'accento sul filetto: si riconosce
   con la coda dell'occhio, senza leggerlo. Restano tre segnali insieme (barra, fondo,
   rientro) perche uno solo — il colore — sparirebbe per chi non lo distingue e in stampa. */
.canto .ritornello {
    position: relative;
    margin: 1.6rem 0;
    padding: .5rem .8rem .5rem 1rem;
    border-left: 6px solid var(--accento);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--accento) 16%, transparent);
    font-weight: 700;
    color: var(--accento-scuro);
}

/* Un filetto e un fondo tenue non bastavano a riconoscerlo con la coda dell'occhio, che e'
   quello che si fa mentre si canta. Adesso i segnali sono cinque e tirano tutti nella stessa
   direzione: la barra piu' spessa, il fondo piu' carico, il testo in grassetto e in un colore
   suo, e la parola RIT. in verticale sul fianco. Nessuno di questi da solo e' indispensabile —
   stampato in bianco e nero restano il grassetto e la barra. */
.canto .ritornello::before {
    content: "RIT.";
    position: absolute;
    top: .55rem;
    right: .5rem;
    font-size: .62em;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--accento);
    opacity: .65;
    pointer-events: none;
}

/* Lo stacco fra due strofe deve essere visibilmente più grande di quello fra due righe: è da lì
   che l'occhio capisce dove ne comincia una nuova. */
.canto .strofa { margin: 1.6rem 0; padding-left: .15rem; }
.canto .commento { font-style: italic; opacity: .75; }
.canto .ripeti { font-weight: 600; opacity: .8; }
/* «Rit.» in fondo all'ultima riga della strofa: staccato quanto basta da non sembrare una parola del testo. */
.canto .rit-in-coda { margin-left: 1.4em; }
.canto .rit-in-coda .testo { font-weight: 600; opacity: .8; }
body.tema-scuro .canto .accordo { color: #ff8a80; }

/* ---- gli elenchi di canti, uguali dovunque compaiano: ricerca, tematica, preferiti ---- */

.elenco-canti { list-style: none; margin: 0; padding: 0; }

.elenco-canti li {
    border-bottom: 1px solid var(--bordo);
}

.riga-canto {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .2rem;
    min-height: 44px;
}

.riga-canto .verso-canto { flex: 1 1 auto; color: inherit; text-decoration: none; min-width: 0; }
/* In Preparo la riga è un pulsante: che sembri la stessa riga del link. */
button.verso-canto { border: 0; background: transparent; font: inherit; text-align: left; padding: 0; cursor: pointer; }
.riga-canto .codice { display: inline-block; min-width: 3em; font-weight: 600; color: var(--tenue); font-variant-numeric: tabular-nums; }
.riga-canto .titolo { font-weight: 500; }
.riga-canto .numero { font-weight: 700; color: var(--accento); margin-left: .35em; }
.riga-canto .incipit { color: var(--tenue); font-size: .85rem; margin-left: .35em; }
.riga-canto .con-spartito { color: var(--tenue); font-size: .8rem; margin-left: .35em; }

.stella {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--tenue);
    font-size: 1.3rem;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
}

.stella.accesa { color: #e0a800; }

.cerca-grande { margin: .4rem 0 1rem; }

.campo-cerca {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.1rem;
    padding: .7rem .9rem;
    min-height: 48px;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    background: var(--superficie);
    color: var(--testo);
}

.suggerimenti { border: 1px solid var(--bordo); border-top: 0; border-radius: 0 0 10px 10px; background: var(--superficie); }
.suggerimenti li:last-child { border-bottom: 0; }

.scorciatoie { display: flex; gap: .8rem; flex-wrap: wrap; }

.scorciatoia {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .9rem;
    min-height: 64px;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    background: var(--superficie);
    color: var(--testo);
    text-decoration: none;
    font-weight: 600;
}

.scorciatoia span { color: var(--tenue); font-weight: 400; font-size: .85rem; }

.titolo-pagina { font-size: 1.3rem; margin: .2rem 0 .8rem; }

.gruppo-tematiche { margin: 0 0 1.4rem; }
.gruppo-tematiche h2 { font-size: 1rem; color: var(--tenue); font-weight: 600; margin: 0 0 .3rem; }

.voci-tematiche { list-style: none; margin: 0; padding: 0; }

.voci-tematiche li {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    border-bottom: 1px solid var(--bordo);
}

.voci-tematiche .voce { flex: 1 1 auto; color: var(--testo); text-decoration: none; padding: .5rem 0; }
.voci-tematiche .voce-vuota { flex: 1 1 auto; color: var(--tenue); padding: .5rem 0; }
.voci-tematiche .quanti { color: var(--tenue); font-size: .85rem; white-space: nowrap; }

.testa-tematica { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
.testa-tematica .indietro { color: var(--accento); text-decoration: none; font-size: .9rem; width: 100%; }

.ordinamenti { display: flex; gap: .4rem; margin: .2rem 0 .6rem; }

.ordinamenti button {
    border: 1px solid var(--bordo);
    background: var(--superficie);
    color: var(--tenue);
    border-radius: 999px;
    padding: .3rem .9rem;
    min-height: 36px;
    font: inherit;
    cursor: pointer;
}

.ordinamenti button.attivo { border-color: var(--accento); color: var(--accento); font-weight: 600; }

.riga-comandi { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .5rem; }

.riga-comandi > button {
    border: 1px solid var(--bordo);
    background: var(--superficie);
    color: var(--tenue);
    border-radius: 999px;
    padding: .3rem .9rem;
    min-height: 36px;
    font: inherit;
    cursor: pointer;
}

.riga-comandi > button.attivo { border-color: var(--accento); color: var(--accento); font-weight: 600; }
.riga-comandi .ordinamenti { margin: 0; margin-left: auto; }

.pannello-filtri {
    border: 1px solid var(--bordo);
    border-radius: 10px;
    background: var(--superficie);
    padding: .8rem;
    margin-bottom: .8rem;
}

.gruppo-filtri { border: 0; margin: 0 0 .8rem; padding: 0; }
.gruppo-filtri legend { font-size: .85rem; color: var(--tenue); font-weight: 600; padding: 0; }
.gruppo-filtri label { display: inline-flex; align-items: center; gap: .35rem; margin: .25rem .8rem .25rem 0; min-height: 32px; }

.filtro-spartito { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; }
.pannello-filtri .pulisci { display: block; margin-top: .6rem; border: 0; background: transparent; color: var(--accento); font: inherit; cursor: pointer; padding: .4rem 0; }

.conteggio { margin: .2rem 0 .4rem; }

.indice-rapido { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 .6rem; }

.indice-rapido button {
    border: 1px solid var(--bordo);
    background: var(--superficie);
    color: var(--accento);
    border-radius: 6px;
    min-width: 34px;
    min-height: 34px;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

/* Virtualize conta le righe per altezza, e l'indice rapido ci salta sopra: l'altezza è quella
   dichiarata da AltezzaRiga, bordo compreso — un pixel di scarto per riga, moltiplicato per
   trecento righe, fa finire il salto tre righe più in là. */
.elenco-canti.virtuale li { height: 62px; box-sizing: border-box; }
.elenco-canti.virtuale .riga-canto { height: 100%; box-sizing: border-box; padding: .4rem .2rem; }
/* Una riga sola: un incipit lungo si taglia coi puntini invece di sforare l'altezza fissa. */
.elenco-canti.virtuale .verso-canto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sezione-home { margin: 1.2rem 0; }
.sezione-home h2 { font-size: 1rem; color: var(--tenue); font-weight: 600; margin: 0 0 .4rem; }
.nota { color: var(--tenue); font-size: .9rem; }
.visualizzatore-pdf { width: 100%; height: 80vh; border: 0; }
.errore { color: #b8322c; font-weight: 600; }

/* ---- il giorno liturgico e le celebrazioni nella pagina iniziale (RF-T4, RF-C4) ---- */

.giorno-liturgico { margin: 0 0 .6rem; font-size: .9rem; }
.giorno-liturgico .data { color: var(--tenue); text-transform: capitalize; }
.giorno-liturgico .titolo-liturgico { display: block; font-weight: 600; }

.elenco-celebrazioni { list-style: none; margin: 0; padding: 0; }

.elenco-celebrazioni a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    padding: .7rem .2rem;
    min-height: 48px;
    border-bottom: 1px solid var(--bordo);
    color: var(--testo);
    text-decoration: none;
}

.elenco-celebrazioni .quando { color: var(--accento); font-weight: 600; white-space: nowrap; }
.elenco-celebrazioni .titolo { flex: 1 1 auto; }
.elenco-celebrazioni .quante { color: var(--tenue); font-size: .85rem; white-space: nowrap; }

.porte-di-servizio { margin: 2rem 0 .5rem; font-size: .85rem; color: var(--tenue); }
.porte-di-servizio a { color: var(--tenue); }

/* ---- la scaletta in mano ---- */

.testa-scaletta { margin-bottom: .8rem; }
.testa-scaletta .titolo-pagina { margin-bottom: .2rem; }
.testa-scaletta .nota { margin: 0; text-transform: capitalize; }

.passi-scaletta { list-style: none; margin: 0; padding: 0; counter-reset: passo; }

.passi-scaletta a {
    display: block;
    padding: .7rem .2rem;
    min-height: 48px;
    border-bottom: 1px solid var(--bordo);
    color: var(--testo);
    text-decoration: none;
}

.passi-scaletta .momento { display: block; color: var(--tenue); font-size: .8rem; }
.passi-scaletta .numero { color: var(--accento); font-weight: 700; margin-right: .4rem; }
.passi-scaletta .titolo { font-weight: 500; }
.passi-scaletta .testo-libero { font-style: italic; }
.passi-scaletta .tonalita-voce, .passi-scaletta .note-voce { color: var(--tenue); font-size: .85rem; margin-left: .4rem; }

.striscia-scaletta {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .4rem .6rem;
    margin-bottom: .6rem;
    border-radius: 8px;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    font-size: .85rem;
}

.striscia-scaletta .verso-scaletta { color: var(--accento); text-decoration: none; white-space: nowrap; }
.striscia-scaletta .dove { font-weight: 600; }
.striscia-scaletta .quale { color: var(--tenue); font-weight: 400; margin-left: .3rem; }
.striscia-scaletta .poi { color: var(--tenue); margin-left: auto; }

.navigazione-scaletta { display: flex; gap: .6rem; margin: 1.2rem 0 .5rem; }

.btn-passo {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    background: var(--superficie);
    color: var(--testo);
    text-decoration: none;
    font-weight: 600;
}

.btn-passo.avanti { background: var(--accento); border-color: var(--accento); color: #fff; }
.testo-libero-vista p { white-space: pre-wrap; }

/* ---- gli spartiti tenuti sul telefono (RF-O6) ---- */

.comandi-spartito { display: flex; gap: .6rem; margin-bottom: .6rem; }
.spartito .provenienza { margin: 0 0 .5rem; }
.spartito .errore { margin: .5rem 0; }

.spazio-spartiti { border-top: 1px solid var(--bordo); padding-top: .8rem; margin-top: 1.2rem; }
.spazio-spartiti .titolo-impostazione { font-weight: 600; }
.spazio-spartiti .nota { margin: .3rem 0 .6rem; }

/* ---- il passo indietro (amministrazione e preparazione) ---- */

.indietro {
    border: 1px solid var(--admin-bordo, #d5d5dc);
    background: transparent;
    color: inherit;
    border-radius: 8px;
    padding: .3rem .75rem;
    min-height: 36px;
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
    flex: 0 0 auto;
}

.indietro:hover { border-color: var(--accento); color: var(--accento); }

/* L'indietro dello spartito ha la forma dei pulsanti accanto, non quella dell'amministrazione. */
.indietro.btn-passo {
    flex: 1 1 0;
    min-height: 48px;
    padding: 0;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    background: var(--superficie);
    color: var(--testo);
    font-size: inherit;
    font-weight: 600;
}

/* ---- di chi e il libretto ---- */

.piede-parrocchia {
    margin: 2rem 0 .5rem;
    text-align: center;
    color: var(--tenue);
    font-size: .8rem;
}

/* ---- si vede che sta scorrendo ---- */

.avanzamento-scorrimento {
    flex: 1 1 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--bordo);
    overflow: hidden;
}

.avanzamento-scorrimento > i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--accento);
}

.nota-forte { color: var(--accento); font-weight: 600; }

/* ---- «c'è una versione nuova» ---- */

/* In fondo allo schermo, sopra la navigazione, dove il pollice arriva senza cambiare presa.
   Non copre il canto: sta sopra la barra in basso e sparisce appena si tocca. */
#striscia-aggiornamento {
    position: fixed;
    left: .6rem;
    right: .6rem;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    border-radius: 12px;
    background: var(--accento);
    color: #fff;
    box-shadow: 0 6px 20px rgb(0 0 0 / .25);
    font-size: .9rem;
}

#striscia-aggiornamento span { flex: 1 1 auto; }

#striscia-aggiornamento button {
    flex: 0 0 auto;
    border: 1px solid rgb(255 255 255 / .6);
    background: transparent;
    color: #fff;
    border-radius: 8px;
    padding: .35rem .7rem;
    min-height: 38px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}

#striscia-aggiornamento button.chiudi {
    border: 0;
    min-width: 38px;
    padding: .35rem;
    font-weight: 400;
    opacity: .85;
}

@media (min-width: 700px) {
    #striscia-aggiornamento { left: auto; right: 1.2rem; max-width: 26rem; bottom: 1.2rem; }
}

/* ---- la trasposizione, ora nella riga dei comandi ---- */

/* Non aveva uno stile suo: prendeva i pulsanti di Bootstrap e si teneva una riga intera.
   Adesso sta accanto ad A− e A+ e deve sembrare della stessa famiglia. */
/* Il filetto e lo spazio a sinistra non sono decorazione: senza, il «−» della tonalita' finiva
   appiccicato ad «A+» e si abbassava il canto credendo di rimpicciolire il testo. */
.comandi-canto .barra-trasposizione {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0 0 0 .55rem;
    padding-left: .6rem;
    border-left: 1px solid var(--bordo);
    flex-wrap: wrap;
}

.comandi-canto .barra-trasposizione button {
    border: 1px solid var(--bordo);
    background: var(--superficie);
    color: var(--testo);
    border-radius: 8px;
    min-width: 38px;
    min-height: 38px;
    padding: 0 .45rem;
    font: inherit;
    font-size: .95rem;
    cursor: pointer;
}

.comandi-canto .barra-trasposizione .btn-link {
    border: 0;
    min-width: 0;
    color: var(--accento);
    font-size: .82rem;
    padding: 0 .3rem;
}

.comandi-canto .barra-trasposizione .tonalita {
    min-width: 2.2em;
    text-align: center;
    font-weight: 600;
}

.comandi-canto .barra-trasposizione .scostamento { color: var(--tenue); font-size: .82rem; }

/* Il capotasto è una frase, non un comando: va a capo per conto suo quando c'è. */
.comandi-canto .barra-trasposizione .capo {
    flex: 1 1 100%;
    color: var(--tenue);
    font-size: .8rem;
}

/* ---- accordi semplici e diagrammi (Suono) ---- */

.interruttori-accordi { display: flex; gap: .3rem; margin: 0 0 0 .55rem; }
.interruttori-accordi .interruttore {
    border: 1px solid var(--bordo);
    background: var(--superficie);
    color: var(--testo);
    border-radius: 8px;
    min-height: 38px;
    padding: 0 .6rem;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.interruttori-accordi .interruttore.acceso { background: var(--accento); border-color: var(--accento); color: #fff; }

/* Scorre di lato e non va a capo: in cima allo schermo l'altezza e' del testo del canto. */
.striscia-diagrammi {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    padding: .2rem 0 .4rem;
    margin-bottom: .3rem;
    scrollbar-width: thin;
}
.striscia-diagrammi .voce-diagramma {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--bordo);
    background: var(--superficie);
    color: var(--testo);
    border-radius: 8px;
    padding: .2rem .25rem .1rem;
    cursor: pointer;
}
.striscia-diagrammi .diagramma-accordo { width: 58px; }

.nome-accordo { font-weight: 700; color: #b8322c; font-size: .9rem; }
body.tema-scuro .nome-accordo { color: #ff8a80; }

.diagramma-accordo { display: block; overflow: visible; }
.diagramma-accordo .corda, .diagramma-accordo .tasto { stroke: currentColor; stroke-width: .6; opacity: .75; }
.diagramma-accordo .capotasto { stroke: currentColor; stroke-width: 2.4; }
.diagramma-accordo .dito { fill: currentColor; }
.diagramma-accordo .a-vuoto { fill: none; stroke: currentColor; stroke-width: .8; }
.diagramma-accordo .segno-corda { fill: currentColor; font-size: 7px; text-anchor: middle; }
.diagramma-accordo .numero-tasto { fill: currentColor; font-size: 6.5px; text-anchor: end; }
.diagramma-accordo .numero-dito { fill: var(--superficie); font-size: 4.6px; font-weight: 700; text-anchor: middle; }

/* Il tocco sull'accordo apre il diagramma: il puntatore lo dice su PC, sul telefono basta il gesto. */
.canto .accordo.toccabile { cursor: pointer; }
/* Scritto male: resta leggibile, ma sottolineato ondulato come un errore di ortografia. */
.canto .accordo.non-riconosciuto { text-decoration: underline wavy; text-decoration-color: #d08a00; text-underline-offset: 2px; }

.velo-accordo {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.finestra-accordo {
    background: var(--superficie);
    color: var(--testo);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    padding: .7rem .8rem .9rem;
    max-width: min(560px, 100%);
    max-height: 90vh;
    overflow: auto;
}
.testa-finestra-accordo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.testa-finestra-accordo .nome-accordo { font-size: 1.4rem; }
.testa-finestra-accordo .chiudi {
    border: 1px solid var(--bordo);
    background: var(--superficie);
    color: var(--testo);
    border-radius: 8px;
    min-width: 42px;
    min-height: 38px;
    cursor: pointer;
}
.forme-accordo { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.forme-accordo .diagramma-accordo { width: 104px; }

/* ---- lo stacco: intro, interludio, finale (solo in Suono) ---- */

/* Una riga sola, etichetta e accordi in fila: sono da suonare, non da leggere sopra un testo. */
.canto .stacco {
    margin: 1.6rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .4rem;
    line-height: 1.3;
}
.canto .stacco .etichetta-stacco {
    font-size: .7em;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tenue);
    border: 1px solid var(--bordo);
    border-radius: 6px;
    padding: .05rem .4rem;
    margin-right: .3rem;
}
.canto .stacco .riga-stacco { display: inline-flex; flex-wrap: wrap; gap: .2rem .9rem; }
.canto .stacco .accordo { min-height: 0; padding-right: 0; }

/* Tempo, salterio e santi del giorno, sotto la data (home e scheda della celebrazione). */
.giorno-liturgico .periodo { display: block; color: var(--tenue); font-style: italic; }
.giorno-liturgico .santi-del-giorno { display: block; }
.giorno-liturgico .santo { display: block; font-style: italic; }
.scheda-giorno { flex-basis: 100%; margin: .2rem 0 0; }
/* Sotto la data scelta per una nuova celebrazione: occupa tutta la riga del riquadro. */
.giorno-scelto { flex-basis: 100%; margin: .3rem 0 0; }