/* ===========================================================================
   OrbitCondomini — Componenti riutilizzabili
   Barra strumenti, griglia, stato vuoto, indicatori, form.
   =========================================================================== */

/* ------------------------------------------------------ Barra strumenti -- */

.orbit-strumenti {
    display: flex;
    align-items: center;
    /* Le azioni vanno a capo quando non ci stanno: prima la barra restava su una riga e
       schiacciava il testo finche' il sottotitolo andava a capo UNA PAROLA PER RIGA.
       Visto sulle quote millesimali (15 settembre 2026): «31 / unita' / su / 32». */
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .6rem .85rem;
    background: var(--orbit-superficie);
    border-block-end: 1px solid var(--orbit-bordo);
    flex: none;
}

.orbit-strumenti__testo {
    display: flex;
    flex-direction: column;
    /* Il testo non scende sotto una larghezza leggibile: se non c'e' spazio, sono le
       azioni a passare alla riga sotto. */
    min-width: 14rem;
    flex: 1 1 14rem;
    margin-inline-end: auto;
}

.orbit-strumenti__titolo {
    font-size: .88rem;
    font-weight: 600;
    color: var(--orbit-testo);
    line-height: 1.3;
}

.orbit-strumenti__sottotitolo {
    font-size: .74rem;
    color: var(--orbit-testo-soft);
}

.orbit-strumenti__azioni { display: flex; align-items: center; gap: .4rem; flex: none; flex-wrap: wrap; }

/* Campo di ricerca */
.orbit-ricerca {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: min(260px, 40vw);
    padding-inline: .55rem;
    background: var(--orbit-superficie-alt);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio-piccolo);
    transition: border-color var(--orbit-transizione), box-shadow var(--orbit-transizione);
}

.orbit-ricerca:focus-within {
    border-color: var(--orbit-ciano);
    box-shadow: 0 0 0 3px var(--orbit-ciano-velo);
}

.orbit-ricerca .rzi { font-size: 1rem; color: var(--orbit-testo-tenue); flex: none; }

.orbit-ricerca input {
    flex: 1;
    min-width: 0;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--orbit-testo);
    font: inherit;
    font-size: .82rem;
    outline: none;
}

.orbit-ricerca input::placeholder { color: var(--orbit-testo-tenue); }
.orbit-ricerca input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }

/* -------------------------------------------------------------- Griglia -- */

.orbit-pannello-elenco {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Lo scorrimento ORIZZONTALE della griglia non si governa da qui: la tabella di Radzen
   sta dentro `.rz-data-grid-data`, che ha gia' overflow-x:auto e conosce la larghezza
   vera (misurato: tabella 1256 in un contenitore di 883). Mettere `auto` anche qui non
   cambiava niente — provato e tolto. Cio' che serviva era rendere quella barra VISIBILE:
   vedi `.rz-data-grid-data` piu' sotto. */
.orbit-griglia { flex: 1; min-height: 0; overflow: hidden; }

/* La barra di scorrimento della griglia si VEDE, sempre che serva.

   Su macOS le barre sono a scomparsa: compaiono mentre si scorre e spariscono. Una
   tabella piu' larga del suo riquadro appare quindi semplicemente TAGLIATA, e le colonne
   oltre il bordo sembrano non esistere — non c'e' niente che dica che si puo' scorrere.
   Segnalato cosi': «e' tagliato ancora».

   Si dichiarano entrambe le forme: `scrollbar-*` e' lo standard, il selettore `-webkit-`
   e' cio' che Safari e Chrome ascoltano davvero, e stilarlo disattiva la scomparsa. */
.orbit-griglia .rz-data-grid-data {
    scrollbar-width: thin;
    scrollbar-color: var(--orbit-bordo) transparent;
}

.orbit-griglia .rz-data-grid-data::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Le righe lasciano spazio all'intestazione quando ci si scorre sopra.

   L'intestazione della griglia e' FISSA, e il browser che porta una riga «quanto basta»
   dentro la vista la ferma esattamente sotto di lei: i comandi della riga finiscono
   coperti, e un clic non li raggiunge. Non e' un problema solo delle prove — succede
   a un dito, e chi ci prova due volte pensa che il pulsante non funzioni.

   `scroll-margin` dice al browser di lasciare quello spazio quando scorre da se': con
   la tastiera, con un'ancora, o quando un programma chiede di mostrare la riga. */
.orbit-griglia .rz-data-grid-data tbody tr { scroll-margin-block-start: 3.2rem; }

.orbit-griglia .rz-data-grid-data::-webkit-scrollbar-thumb {
    background: var(--orbit-bordo);
    border-radius: 5px;
}

.orbit-griglia .rz-data-grid-data::-webkit-scrollbar-track {
    background: transparent;
}

.orbit-griglia .rz-datatable { border: 0; border-radius: 0; height: 100%; }
.orbit-griglia .rz-datatable-scrollable-header { background: var(--orbit-superficie-alt); }

.orbit-griglia .rz-column-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.orbit-griglia tbody > tr > td { font-size: .82rem; }
/* IL PIEDE DELLA GRIGLIA SI STACCA DALLE RIGHE.

   Li' dentro stanno «Pagina 1 di 2 — 48 soggetti» e i comandi per cambiare pagina: senza una
   riga che lo separi, il conteggio sembra l'ultima riga dell'elenco. Segnalato cosi': «mettimi
   un righetto di separazione nelle pagine dove mostriamo numero pagina, righe eccetera».

   La regola c'era gia' e non faceva niente: era scritta su `.rz-paginator`, che Radzen usava
   fino alla versione 10. Dalla 11 il piede e' un `nav.rz-pager`, e un selettore che non
   corrisponde a niente non da' errore — si limita a non applicarsi. E' lo stesso genere di
   guasto delle variabili Radzen inventate, che ha gia' un cricchetto: una riga di stile che
   non morde e' indistinguibile da una riga assente. */
.orbit-griglia .rz-pager {
    border-block-start: 1px solid var(--orbit-bordo);
    font-size: .78rem;
}

/* ---------------------------------------------------------- Stato vuoto -- */

.orbit-vuoto {
    display: grid;
    place-items: center;
    gap: .35rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--orbit-testo-soft);
}

.orbit-vuoto .rzi {
    font-size: 2.4rem;
    color: var(--orbit-testo-tenue);
    margin-block-end: .25rem;
}

.orbit-vuoto__titolo { margin: 0; font-size: .88rem; font-weight: 600; color: var(--orbit-testo); }
.orbit-vuoto__descrizione { margin: 0; font-size: .78rem; max-width: 42ch; }
.orbit-vuoto__azione { margin-block-start: .6rem; }

/* ------------------------------------------------------------------ KPI -- */

.orbit-kpi-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .7rem;
}

.orbit-kpi {
    padding: .8rem .9rem;
    background: var(--orbit-superficie-alt);
    border: 1px solid var(--orbit-bordo);
    border-block-start: 2px solid var(--orbit-ciano);
    border-radius: var(--orbit-raggio-piccolo);
}

.orbit-kpi--ok         { border-block-start-color: var(--orbit-ok); }
.orbit-kpi--attenzione { border-block-start-color: var(--orbit-attenzione); }
.orbit-kpi--critico    { border-block-start-color: var(--orbit-critico); }

.orbit-kpi__etichetta {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--orbit-testo-tenue);
}

.orbit-kpi__etichetta .rzi { font-size: .95rem; }

.orbit-kpi__valore {
    margin-block-start: .3rem;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--orbit-testo);
}

.orbit-kpi__dettaglio { margin-block-start: .1rem; font-size: .72rem; color: var(--orbit-testo-soft); }

/* --------------------------------------------------------------- Chip -- */

.orbit-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .45rem;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.orbit-chip--ok         { background: var(--orbit-ok-velo);         color: var(--orbit-ok); }
.orbit-chip--attenzione { background: var(--orbit-attenzione-velo); color: var(--orbit-attenzione); }
.orbit-chip--critico    { background: var(--orbit-critico-velo);    color: var(--orbit-critico); }
.orbit-chip--neutro     { background: var(--orbit-superficie-velo); color: var(--orbit-testo-soft); }

/* Il chip che si preme: un filtro, un conteggio che apre il suo elenco. E' un <button>, cosi'
   la tastiera lo raggiunge, e si spoglia dell'aspetto di pulsante per restare un chip.
   Il chip scelto si distingue dal colore, non solo dal peso: e' ciò che si sta guardando. */
.orbit-chip--pulsante {
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.4;
    transition: background var(--orbit-transizione), color var(--orbit-transizione);
}
.orbit-chip--pulsante:hover { border-color: var(--orbit-bordo-forte); }
.orbit-chip--pulsante:focus-visible { outline: 2px solid var(--orbit-ciano); outline-offset: 1px; }
.orbit-chip--scelto,
.orbit-chip--scelto:hover { background: var(--orbit-ciano-velo); color: var(--orbit-ciano-testo); border-color: var(--orbit-ciano); }

/* Una fila di chip che vanno a capo, con lo spazio giusto fra loro. */
.orbit-chip-fila { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

/* I SEGNALI NELL'INTESTAZIONE DI UNA SCHEDA: cio' che non va, in un'occhiata.

   Stanno a destra del nome, vanno a capo se sono tanti, e ognuno porta nel titolo la ragione
   per esteso — che e' la cosa che conta quando si deve decidere, e che prima occupava mezza
   schermata per impianto. */
.orbit-segnali {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .35rem;
}

.orbit-segnali .orbit-chip { cursor: help; }
.orbit-segnali .orbit-chip .rzi { font-size: .85rem; }

/* ----------------------------------------------- Consultazione manuale -- */

.orbit-manuale { display: flex; flex-direction: column; height: 100%; gap: .85rem; }

/* I comandi della ricerca: il modo, il campo, il pulsante. Vanno a capo su una finestra
   stretta invece di comprimere il campo fino a renderlo inutilizzabile. */
.orbit-manuale__comandi {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

/* L'indice a sinistra e i risultati a destra. L'indice ha una larghezza sua e non si
   restringe: e' un elenco di titoli, e un titolo troncato non e' un titolo. */
.orbit-manuale__corpo {
    display: flex;
    gap: .85rem;
    flex: 1;
    min-height: 0;
}

.orbit-manuale__indice {
    flex: 0 0 15rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    overflow-y: auto;
    padding-inline-end: .25rem;
    border-inline-end: 1px solid var(--orbit-bordo);
}

/* Il titolo di un gruppo nell'indice del manuale: si apre e si chiude col clic.
   Era una riga fissa; dal 14 settembre 2026 e' un pulsante, perche' settanta pagine in
   una colonna sola non si scorrono. */
.orbit-manuale__gruppo {
    display: flex;
    align-items: center;
    gap: .3rem;
    width: 100%;
    padding: .5rem .35rem .2rem;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--orbit-testo-tenue);
    text-align: start;
    cursor: pointer;
}

.orbit-manuale__gruppo:hover { color: var(--orbit-testo); }

.orbit-manuale__gruppo .rzi { font-size: 1rem; }

.orbit-manuale__conto {
    margin-inline-start: auto;
    font-weight: 500;
    letter-spacing: 0;
}

/* La pagina resa: il markdown porta i propri tag, e qui si dice come si leggono. */
.orbit-manuale__pagina { line-height: 1.55; }
/* Un rimando a un'altra pagina del manuale: si vede che si puo' cliccare, e non e' un
   collegamento verso fuori. */
.orbit-manuale__rimando {
    color: var(--orbit-ciano-testo);
    text-decoration: underline;
    text-underline-offset: .15em;
    cursor: pointer;
}

.orbit-manuale__pagina h1 { margin: 0 0 .6rem; font-size: 1.15rem; }
.orbit-manuale__pagina h2 { margin: 1.1rem 0 .4rem; font-size: .95rem; }
.orbit-manuale__pagina p  { margin: .5rem 0; }
.orbit-manuale__pagina ul { margin: .4rem 0; padding-inline-start: 1.2rem; }
.orbit-manuale__pagina li { margin: .25rem 0; }

.orbit-manuale__pagina blockquote {
    margin: .6rem 0;
    padding: .5rem .75rem;
    border-inline-start: 3px solid var(--orbit-ciano);
    background: var(--orbit-superficie-velo);
    border-radius: var(--orbit-raggio-piccolo);
}

.orbit-manuale__pagina blockquote p:first-child { margin-block-start: 0; }
.orbit-manuale__pagina blockquote p:last-child  { margin-block-end: 0; }

/* La figura: e' uno schermo intero rimpicciolito, e va vista per quello che e'. */
.orbit-manuale__pagina img {
    display: block;
    max-width: 100%;
    margin: .8rem 0;
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio-piccolo);
}

/* Le tabelle del manuale scorrono da se': una tabella larga non deve far scorrere la
   pagina. */
.orbit-manuale__pagina table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: .6rem 0;
    font-size: .85rem;
}

.orbit-manuale__pagina th,
.orbit-manuale__pagina td {
    padding: .35rem .5rem;
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--orbit-bordo);
}

.orbit-manuale__pagina th { color: var(--orbit-testo-tenue); font-weight: 600; }

.orbit-manuale__capitolo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .35rem .5rem;
    border: 0;
    border-radius: var(--orbit-raggio-piccolo);
    background: transparent;
    color: var(--orbit-testo);
    font: inherit;
    font-size: .8rem;
    text-align: start;
    cursor: pointer;
}

.orbit-manuale__capitolo:hover { background: var(--orbit-superficie-velo); }

.orbit-manuale__capitolo--attivo {
    background: var(--orbit-superficie-alt);
    font-weight: 600;
}

/* Su una finestra stretta l'indice va sopra invece di rubare meta' larghezza ai risultati. */
@media (max-width: 720px) {
    .orbit-manuale__corpo { flex-direction: column; }

    .orbit-manuale__indice {
        flex: 0 0 auto;
        max-height: 9rem;
        border-inline-end: 0;
        border-block-end: 1px solid var(--orbit-bordo);
    }
}

.orbit-manuale__risultati {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-inline-end: .25rem;
}

.orbit-scheda {
    padding: .75rem .85rem;
    background: var(--orbit-superficie-alt);
    border: 1px solid var(--orbit-bordo);
    border-inline-start: 3px solid var(--orbit-ciano-testo);
    border-radius: var(--orbit-raggio-piccolo);
}

.orbit-scheda__testa {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-block-end: .35rem;
}

.orbit-scheda__capitolo {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--orbit-ciano-testo);
}

.orbit-scheda__sezione {
    font-size: .76rem;
    color: var(--orbit-testo-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orbit-scheda__punteggio {
    margin-inline-start: auto;
    font-size: .7rem;
    color: var(--orbit-testo-tenue);
    font-variant-numeric: tabular-nums;
    flex: none;
}

.orbit-scheda__testo {
    margin: 0;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--orbit-testo);
    white-space: pre-wrap;
}

/* Riga secondaria sotto un valore: la citta' sotto il nome, l'edificio sotto
   l'interno, l'atto sotto la data.

   Esiste perche' al suo posto veniva usata .orbit-tendina__sotto, che pero' e'
   definita SOLO dentro una tendina: fuori di li' non faceva nulla e il testo restava
   attaccato a quello sopra. La guardia sulle classi non l'aveva vista, perche' il
   nome esisteva davvero - solo, non in quel contesto. */
.orbit-sottotesto {
    display: block;
    font-size: .74rem;
    line-height: 1.35;
    color: var(--orbit-testo-tenue);
}

/* ------------------------------------------------------------ Form -- */

/* La scheda si misura su se stessa, non sulla finestra: e' dentro un dialogo largo
   quanto decide chi lo apre, e le soglie che contano sono le sue. */
.orbit-form {
    display: grid;

    /* Una colonna, dichiarata: senza questo un campo che chiede tre colonne ne fa
       nascere tre implicite, e intestazioni e pulsanti finiscono impaginati come se
       fossero campi. Succede davvero - visto e corretto. */
    grid-template-columns: minmax(0, 1fr);
    gap: .55rem;
    container-type: inline-size;
}

/* Dodici colonne, e ogni campo ne occupa un numero fisso.
   Con le tracce automatiche ogni riga si divideva per conto suo: quattro campi in
   una, tre nell'altra, e i bordi non cadevano mai sulla stessa verticale. E' la
   differenza fra un modulo di sito e la scheda di un gestionale - le guide sono le
   stesse per tutta la scheda, anche quando l'ultima riga non e' piena. */
.orbit-form__riga {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .55rem .7rem;
}

.orbit-form__campo {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    min-width: 0;
}

/* Quante colonne occupa un campo lo si dice solo DENTRO una riga: fuori da una riga
   un campo prende la larghezza che ha, e chiedere colonne a una griglia che non le
   ha significa fargliele nascere. */
.orbit-form__riga > .orbit-form__campo { grid-column: span 3; }   /* quattro per riga */

/* Un campo che ha bisogno del doppio - un indirizzo, una denominazione - e uno che
   ne chiede meno di tutti: un CAP, una sigla di provincia. */
.orbit-form__riga > .orbit-form__campo--ampio   { grid-column: span 6; }
.orbit-form__riga > .orbit-form__campo--stretto { grid-column: span 2; }

/* Un campo di testo lungo - note, motivazione, «con parole sue» - prende TUTTA la riga.
   Una casella di testo di quattro righe larga un quarto e' una feritoia: si scrive a capo
   ogni tre parole e non si rilegge. Segnalato il 14 settembre 2026 sulla richiesta privacy,
   e reso regola: ogni RadzenTextArea sta in un campo pieno. */
.orbit-form__riga > .orbit-form__campo--pieno { grid-column: 1 / -1; }

/* Su una scheda stretta le colonne si dimezzano, poi i campi vanno uno per riga.
   Non e' il telefono: e' un monitor da 1280 con una finestra affiancata a un'altra. */
@container (max-width: 46rem) {
    .orbit-form__riga { grid-template-columns: repeat(6, 1fr); }
    .orbit-form__riga > .orbit-form__campo--ampio { grid-column: span 6; }
}

@container (max-width: 26rem) {
    .orbit-form__riga { grid-template-columns: minmax(0, 1fr); }
    .orbit-form__riga > .orbit-form__campo,
    .orbit-form__riga > .orbit-form__campo--ampio,
    .orbit-form__riga > .orbit-form__campo--stretto { grid-column: auto; }
}

/* Un interruttore non ha bisogno di un'etichetta sopra: e' largo tre centimetri e
   sotto il titolo lascia un buco. L'etichetta gli sta accanto, come su una casella
   da spuntare, e la coppia occupa l'altezza di un campo normale. */
.orbit-form__campo--interruttore {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    min-height: var(--rz-form-field-filled-height);
    align-self: end;
}

.orbit-form__campo--interruttore .orbit-form__etichetta { order: 2; }

.orbit-form__etichetta {
    font-size: .72rem;
    font-weight: 600;
    color: var(--orbit-testo-soft);
}

/* Un dato che si legge e non si scrive.

   Non un campo spento: un campo spento sembra rotto, e una scheda mezza grigia
   insegna solo che il programma dice di no. Cio' che non si puo' cambiare - il
   titolo di un adempimento di legge, il suo termine - si mostra come testo, che
   e' quello che e'. */
.orbit-form__valore {
    padding: .35rem 0;
    font-size: .88rem;
    color: var(--orbit-testo);
    min-height: 1.9rem;
}

/* Un campo obbligatorio si riconosce PRIMA di premere Salva.
   Scoprirlo dall'errore significa averlo scoperto troppo tardi. */
.orbit-form__etichetta--obbligatoria::after {
    content: " *";
    color: var(--orbit-critico);
    font-weight: 700;
}

/* Intestazione di gruppo dentro una scheda: separa i campi per argomento senza
   aprire un secondo dialogo. */
.orbit-form__sezione {
    margin-block-start: .2rem;
    padding-block-end: .3rem;
    border-block-end: 1px solid var(--orbit-bordo);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--orbit-testo-tenue);
}

/* Riga di spiegazione sotto un'intestazione: dice perche' quei campi esistono. */
/* La spiegazione di un gruppo sta sotto il titolo, piccola: e' un promemoria per chi
   non ricorda perche' quel dato serva, non un paragrafo da leggere ogni volta. */
.orbit-form__aiuto {
    margin-block-start: -.25rem;
    font-size: .715rem;
    line-height: 1.4;
    color: var(--orbit-testo-tenue);
}

.orbit-collegamento {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    color: var(--orbit-ciano-testo);
    text-decoration: none;
    align-self: center;
}

.orbit-collegamento:hover { text-decoration: underline; }

/* Lo stesso collegamento quando e' un <button> — «mostra le altre», che non porta da nessuna
   parte ma fa qualcosa qui: si spoglia del pulsante e resta un collegamento. */
button.orbit-collegamento { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .82rem; }
button.orbit-collegamento:focus-visible { outline: 2px solid var(--orbit-ciano); outline-offset: 2px; border-radius: 2px; }

.orbit-form__azioni {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-block-start: .4rem;
    padding-block-start: .8rem;
    border-block-start: 1px solid var(--orbit-bordo);

    /* Restano visibili anche quando la scheda e' piu' alta dello schermo e il
       contenuto scorre: senza, su un portatile i pulsanti finiscono sotto il bordo
       e la scheda non si puo' ne' salvare ne' chiudere. */
    position: sticky;
    inset-block-end: 0;
    background: var(--orbit-superficie);

    /* Se non ci stanno, VANNO A CAPO: non si schiacciano.

       In una barra flex un pulsante si restringe finche' il suo testo si spezza o sparisce
       sotto il bordo — e sono proprio i pulsanti con l'etichetta lunga, cioe' quelli che
       dicono che cosa stanno per fare: «Registra la consegna», «Cambia la password ed esci».
       Segnalato il 21 settembre 2026 sulla scheda della prima nota, dove i pulsanti in basso
       erano cosi' stretti da non leggersi. */
    flex-wrap: wrap;
}

.orbit-form__azioni .rz-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Scheda complessa: sezioni a tutta larghezza, campi affiancati.

   Niente linguette: su una scheda che si MODIFICA - non che si compila la prima
   volta - nascondere meta' dei campi costringe a cercarli, e cambiando linguetta
   l'altezza della finestra salta.

   E nemmeno gruppi affiancati a colonne: provato e misurato, lascia dei vuoti.
   Gruppi di altezza diversa non si pareggiano - ne' con una griglia, che allinea
   tutti al piu' alto, ne' con le colonne di testo, che il browser bilancia a modo
   suo. In entrambi i casi resta un buco largo mezza scheda accanto al gruppo piu'
   corto.

   Si cresce in orizzontale in un altro modo, quello dei gestionali: la sezione
   prende tutta la larghezza e sono i CAMPI a stare affiancati, quattro o cinque
   per riga. Le sezioni si susseguono dall'alto in basso senza spazi morti, e la
   scheda resta bassa perche' ogni riga ne porta molti.

   Su una finestra stretta i campi di una riga tornano su piu' righe da soli. */
.orbit-form__sezioni {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Due colonne affiancate, dove il modulo ha due meta' che si guardano.

   La regola delle finestre e' che si cresce in LARGHEZZA e non in altezza: un modale piu'
   alto dello schermo nasconde i propri pulsanti, e chi lo apre non trova come confermare.
   Dove le due meta' sono una cosa da leggere e una da decidere — il testo di un sollecito e
   come lo si manda — impilarle vorrebbe dire scorrere avanti e indietro fra le due proprio
   mentre le si confronta.

   `wrap` e non `nowrap`: sotto una certa larghezza due colonne diventano due strisce, e
   allora e' meglio impilarle. */
.orbit-form__sezioni--affiancate {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.orbit-form__gruppo {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

/* ---------------------------------------------------------------- Dialoghi --

   Un dialogo non deve mai eccedere lo schermo. Radzen dimensiona sulla larghezza
   richiesta dal chiamante, che non sa nulla del monitor di chi guarda: senza questi
   limiti, su una risoluzione piccola la scheda esce dai bordi e i comandi di
   chiusura diventano irraggiungibili.

   Si scrive sulle classi di Radzen invece di passare uno stile a ogni chiamata:
   e' una regola dell'applicazione, non di una singola schermata. */
.rz-dialog {
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

.rz-dialog-content {
    /* min-height a zero: senza, un figlio flex non si lascia rimpicciolire sotto
       il proprio contenuto e la barra di scorrimento non compare mai. */
    min-height: 0;
    overflow: auto;
}

/* Il pannello laterale di Radzen e' fixed con right:0 ma SENZA top: prende la posizione
   statica, che nel nostro guscio - la scrivania occupa tutta l'altezza e l'host dei
   dialoghi viene dopo - e' sotto lo schermo. Misurato: y = 900 su 900. */
.rz-dialog-side { top: 0; }

/* La X del pannello laterale resta visibile allo scorrimento: Radzen fa scorrere tutto
   il pannello, titolo compreso, e dopo due schermate di manuale la X non c'e' piu'.
   Scorre solo il contenuto. */
.rz-dialog-side { display: flex; flex-direction: column; overflow: hidden; }
.rz-dialog-side-titlebar { flex: 0 0 auto; border-bottom: 1px solid var(--orbit-bordo); background: var(--orbit-superficie); }
.rz-dialog-side-content { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* --------------------------------------------------------------- Accesso -- */

/* La pagina di accesso: due lati.

   A sinistra il marchio e cio' che il programma promette, a destra il modulo. Il pannello unico
   al centro di uno schermo vuoto non diceva niente di dove si stava entrando - ed e' la prima
   cosa che un amministratore vede del prodotto.

   Sotto i 900px la vetrina sparisce del tutto invece di impilarsi sopra: su uno schermo basso
   spingerebbe il modulo fuori dalla prima schermata, e chi vuole entrare dovrebbe scorrere per
   trovare il campo dell'email. */
.orbit-accesso {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100dvh;
    background-color: var(--orbit-fondo);
}

.orbit-accesso__vetrina {
    position: relative;
    overflow: hidden;
    display: grid;
    place-content: center;
    padding: 3rem;

    /* Scura in ENTRAMBI i temi, come la cromatura dell'applicazione: e' il colore del
       prodotto, non del tema di chi guarda. */
    background: linear-gradient(150deg, var(--orbit-notte-alto) 0%, var(--orbit-notte) 62%);
    color: var(--orbit-su-notte);

    /* La linea di stacco serve sul tema scuro, dove i due lati sono quasi dello stesso
       colore e il confine sparirebbe: senza, la pagina sembra una sola superficie e la
       vetrina smette di leggersi come un lato a se'. */
    border-inline-end: 1px solid var(--orbit-bordo);

    /* Il marchio sta sul fondo scuro: le controforme lo devono seguire. */
    --orbit-marchio-fondo: var(--orbit-notte);
    --orbit-marchio-accento: var(--orbit-marchio-su-notte);
}

.orbit-accesso__orbita {
    position: absolute;
    /* Spostata a sinistra apposta: centrata, il punto sull'orbita cadeva esattamente sul
       bordo della vetrina e sembrava tagliato a meta' da un errore di impaginazione. */
    inset-block-start: 50%;
    inset-inline-start: 40%;
    width: min(135%, 820px);
    aspect-ratio: 1;
    translate: -50% -50%;
    color: var(--orbit-marchio-su-notte);
    opacity: .38;
    pointer-events: none;
}

.orbit-accesso__vetrina-testo {
    position: relative;    /* sopra l'orbita */
    max-width: 26rem;
}

.orbit-accesso__claim {
    margin: 1.7rem 0 0;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.orbit-accesso__lato {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1.25rem;
    padding: 2rem 1rem;
    background-image: radial-gradient(circle at 1px 1px, var(--orbit-fondo-trama) 1px, transparent 0);
    background-size: 22px 22px;
}

.orbit-accesso__pannello {
    width: min(400px, 100%);
    padding: 2rem 1.85rem 1.85rem;
    background: var(--orbit-superficie);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio);
    box-shadow: var(--orbit-ombra-finestra);
}

.orbit-accesso__marchio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    color: var(--orbit-testo);

    /* Il marchio del pannello sta sul pannello: la controforma e' quel fondo li'. */
    --orbit-marchio-fondo: var(--orbit-superficie);

    /* Lo stacco dal titolo: senza, «Accedi» finisce addosso alla parola «condomini» del
       marchio e le due si leggono come una riga sola. */
    margin-block-end: 1.1rem;
}

/* Sulla vetrina il marchio c'e' gia', grande: ripeterlo anche nel pannello sarebbe due volte
   la stessa cosa a mezzo metro di distanza. Resta solo dove la vetrina non c'e'. */
@media (min-width: 900px) {
    .orbit-accesso__marchio { display: none; }
}

.orbit-accesso__titolo {
    margin: 0;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--orbit-testo);
}

.orbit-accesso__occhiello {
    margin: .3rem 0 1.5rem;
    text-align: center;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--orbit-testo-tenue);
}

@media (max-width: 899px) {
    .orbit-accesso { grid-template-columns: 1fr; }
    .orbit-accesso__vetrina { display: none; }
}

.orbit-accesso__errore {
    margin-block-end: 1rem;
    padding: .6rem .75rem;
    background: var(--orbit-critico-velo);
    border-inline-start: 3px solid var(--orbit-critico);
    border-radius: var(--orbit-raggio-piccolo);
    color: var(--orbit-critico);
    font-size: .82rem;
}

/* Campo di input nativo con l'aspetto dell'applicativo */
.orbit-campo {
    width: 100%;
    height: 38px;
    padding-inline: .65rem;
    background: var(--orbit-superficie-alt);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio-piccolo);
    color: var(--orbit-testo);
    font: inherit;
    font-size: .9rem;
    transition: border-color var(--orbit-transizione), box-shadow var(--orbit-transizione);
}

.orbit-campo:focus {
    outline: none;
    border-color: var(--orbit-ciano);
    box-shadow: 0 0 0 3px var(--orbit-ciano-velo);
}

.orbit-accesso__ricorda {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--orbit-testo-soft);
    cursor: pointer;
}

.orbit-accesso__ricorda input { accent-color: var(--orbit-ciano); }

.orbit-accesso__invia {
    width: 100%;
    height: 40px;
    margin-block-start: .3rem;
    border: 0;
    border-radius: var(--orbit-raggio-piccolo);
    background: var(--orbit-ciano);
    color: var(--orbit-su-ciano);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--orbit-transizione);
}

.orbit-accesso__invia:hover { background: var(--orbit-ciano-vivo); }
.orbit-accesso__invia:active { transform: translateY(1px); }

.orbit-accesso__pie {
    margin: 0;
    font-size: .7rem;
    color: var(--orbit-testo-tenue);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Cruscotto -- */

.orbit-cruscotto { display: flex; flex-direction: column; gap: 1rem; }

.orbit-saluto {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.orbit-saluto h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--orbit-testo);
    text-wrap: balance;
}

.orbit-saluto p {
    margin: .1rem 0 0;
    font-size: .78rem;
    color: var(--orbit-testo-soft);
    text-transform: capitalize;
}

.orbit-saluto__azioni { display: flex; gap: .4rem; margin-inline-start: auto; flex-wrap: wrap; }

.orbit-cruscotto__colonne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .8rem;
    align-items: start;
}

.orbit-cruscotto__pie {
    margin: .25rem 0 0;
    font-size: .7rem;
    color: var(--orbit-testo-tenue);
    font-variant-numeric: tabular-nums;
}

/* Riquadro generico del cruscotto */
.orbit-riquadro {
    padding: .85rem .9rem 1rem;
    background: var(--orbit-superficie-alt);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio-piccolo);
}

.orbit-riquadro__testa {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-block-end: .6rem;
}

.orbit-riquadro__testa h3 {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--orbit-testo-tenue);
}

.orbit-riquadro__nota { margin-inline-start: auto; font-size: .74rem; color: var(--orbit-testo-soft); }

/* Le altre fasi del piano, in coda all'avanzamento: dove si sta dentro il percorso. */
.orbit-fasi {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .8rem;
    margin: .6rem 0 0;
    padding-block-start: .6rem;
    border-block-start: 1px solid var(--orbit-bordo);
    font-size: .74rem;
}

.orbit-fasi__voce { display: inline-flex; gap: .3rem; color: var(--orbit-testo-soft); }
.orbit-fasi__voce.orbit-fatto { color: var(--orbit-ok); }
.orbit-fasi__voce .orbit-numerico { color: var(--orbit-testo-tenue); }

/* Elenco compatto */
.orbit-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.orbit-lista__riga {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .1rem;
    border-block-end: 1px solid var(--orbit-bordo);
}

.orbit-lista__riga:last-child { border-block-end: 0; }
.orbit-lista--compatta .orbit-lista__riga { padding-block: .35rem; }
.orbit-lista__riga > .rzi { font-size: 1.1rem; color: var(--orbit-testo-tenue); flex: none; }
.orbit-lista__riga > .rzi.orbit-fatto { color: var(--orbit-ok); }
.orbit-lista__riga > .rzi.orbit-attesa { color: var(--orbit-testo-tenue); }

.orbit-lista__testo { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.orbit-lista__titolo {
    font-size: .82rem;
    font-weight: 500;
    color: var(--orbit-testo);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orbit-lista__sotto {
    font-size: .72rem;
    color: var(--orbit-testo-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Barra di avanzamento */
.orbit-avanzamento {
    height: 6px;
    margin-block-end: .7rem;
    background: var(--orbit-superficie-velo);
    border-radius: 99px;
    overflow: hidden;
}

.orbit-avanzamento__barra {
    height: 100%;
    background: var(--orbit-ciano);
    border-radius: 99px;
    transition: width 300ms ease-out;
}

/* ------------------------------------------------------- Azioni di riga -- */

.orbit-azione {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--orbit-raggio-piccolo);
    background: transparent;
    /* Colore pieno, non una tinta della scala chiara: l'icona deve leggersi
       in entrambi i temi. */
    color: var(--orbit-testo-soft);
    cursor: pointer;
    transition: background var(--orbit-transizione), color var(--orbit-transizione);
}

.orbit-azione .rzi { font-size: 1.05rem; }

.orbit-azione:hover:not(:disabled) {
    background: var(--orbit-ciano-velo);
    color: var(--orbit-ciano-testo);
}

.orbit-azione--critico:hover:not(:disabled) {
    background: var(--orbit-critico-velo);
    color: var(--orbit-critico);
}

.orbit-azione:disabled { color: var(--orbit-bordo-forte); cursor: not-allowed; }

/* Evidenziazione al passaggio del mouse: la fa Radzen da sola, tramite
   --rz-grid-hover-background-color impostata in orbit-tema.css. Qui resta solo
   cio' che la libreria non offre: l'indicazione che la riga apre i dettagli. */
.orbit-griglia tbody > tr[data-apribile] { cursor: pointer; }

/* Le azioni in chiaro sulla riga.

   Stanno sempre, non solo al passaggio del mouse: comparire all'avvicinarsi del
   puntatore le nasconde a chi guarda la tabella senza muoverlo, e non esistono
   affatto per chi lavora da tastiera o da schermo tattile. Sono in sordina - il
   colore del testo secondario - e si accendono quando servono, cosi' si vedono
   senza rubare la scena ai dati, che restano la ragione della tabella. */
.orbit-griglia__azioni { padding-inline: .25rem !important; }

.orbit-griglia__azioni-riga {
    display: flex;
    justify-content: flex-end;
    gap: .1rem;
}

.orbit-griglia__azioni-riga .rz-button {
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: var(--orbit-raggio-piccolo, 6px);
    background: transparent;
    color: var(--orbit-testo-tenue);
}

.orbit-griglia__azioni-riga .rz-button .rzi { font-size: 1.05rem; }

/* Il tasto delle altre azioni non e' un'azione: e' la porta del menu. Uno stacco
   sottile lo separa dalle azioni vere, senza farne un pulsante a parte. */
.orbit-griglia__azioni-riga .orbit-griglia__altre { margin-inline-start: .15rem; }

.orbit-griglia__azioni-riga .rz-button:hover,
.orbit-griglia__azioni-riga .rz-button:focus-visible {
    background: var(--orbit-ciano-velo);
    color: var(--orbit-ciano-vivo);
}

/* Il fuoco da tastiera si deve vedere: questi pulsanti sono l'unica strada
   visibile alle azioni, e senza contorno chi tabula non sa dove si trova. */
.orbit-griglia__azioni-riga .rz-button:focus-visible {
    outline: 2px solid var(--orbit-ciano-vivo);
    outline-offset: -2px;
}

/* ------------------------------------------------------- Scadenzario -- */

/* I contatori che filtrano.

   Sono pulsanti e non riquadri: un numero che dice «dodici scadute» e poi lascia
   cercare quali costringe a scorrere ottanta righe. Si vede che si possono premere
   dal cursore e dal contorno del fuoco, e quale sia attivo dal fondo pieno. */
.orbit-scadenzario__filtri {
    display: flex;
    gap: .5rem;
    padding: .6rem .85rem;
    border-block-end: 1px solid var(--orbit-bordo);
    flex: none;
}

.orbit-conta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .05rem;
    padding: .45rem .75rem;
    background: var(--orbit-superficie-alt);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio-piccolo);
    cursor: pointer;
    font: inherit;
    color: var(--orbit-testo-soft);
    transition: background var(--orbit-transizione), border-color var(--orbit-transizione);
}

.orbit-conta:hover { border-color: var(--orbit-ciano); }

.orbit-conta:focus-visible {
    outline: 2px solid var(--orbit-ciano-vivo);
    outline-offset: 2px;
}

.orbit-conta__valore {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--orbit-testo);
    font-variant-numeric: tabular-nums;
}

.orbit-conta__etichetta {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--orbit-testo-tenue);
}

.orbit-conta--critico .orbit-conta__valore    { color: var(--orbit-critico); }
.orbit-conta--attenzione .orbit-conta__valore { color: var(--orbit-attenzione); }

.orbit-conta--attiva {
    background: var(--orbit-ciano-velo);
    border-color: var(--orbit-ciano);
}

/* Condominio di lavoro nel cruscotto */
.orbit-saluto__contesto {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-block-start: .4rem !important;
    font-size: .8rem;
    color: var(--orbit-testo-soft);
}

.orbit-saluto__contesto .rzi { font-size: 1rem; color: var(--orbit-ciano-testo); }
.orbit-saluto__contesto strong { color: var(--orbit-testo); }
.orbit-saluto__contesto--vuoto .rzi { color: var(--orbit-attenzione); }

/* Valore numerico che ha raggiunto un limite di piano */
.orbit-al-limite { color: var(--orbit-attenzione); font-weight: 700; }

/* Elenco fitto dentro una scheda: le cose che mancano, i punti di una richiesta.
   Non e' l'elenco puntato del testo corrente - qui le voci sono dati, e vanno
   lette a colpo d'occhio senza spaziatura da paragrafo. */
.orbit-elenco-fitto {
    margin: .2rem 0 .5rem;
    padding-inline-start: 1.1rem;
    font-size: .82rem;
    color: var(--orbit-testo-soft);
}
.orbit-elenco-fitto li { margin-bottom: .15rem; }

/* ============================================================================
   Archivio documentale: fascicoli e documenti.

   Non e' una griglia: un fascicolo contiene documenti, e la gerarchia si legge
   solo se il contenuto sta dentro il contenitore. Con due griglie affiancate si
   perderebbe di vista a quale fascicolo appartiene la riga che si guarda.
   ========================================================================= */
/* CHI SCORRE DEVE SAPERE QUANTO E' ALTO.

   `overflow-y: auto` da solo non scorre niente dentro una colonna flessibile: senza
   `flex: 1` l'elenco cresce con il suo contenuto, e senza `min-height: 0` un figlio flex non
   scende sotto l'altezza del proprio contenuto — sono le due righe che mancavano qui, e
   l'archivio con molti fascicoli finiva sotto il bordo della finestra senza barra di
   scorrimento. Segnalato il 22 settembre 2026. */
.orbit-fascicoli {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    overflow-y: auto;
}

/* LA CARTELLA NON SI SCHIACCIA.

   Senza questa riga l'archivio con molti documenti NON SCORRE, ed e' il difetto segnalato il
   22 settembre 2026. La ragione e' in due regole del modello flex che si sommano: un figlio
   flessibile si restringe per difetto (`flex-shrink: 1`), e per un elemento con
   `overflow: hidden` la sua altezza minima automatica vale zero. Le schede quindi si
   comprimono fino a stare nell'elenco — il contenuto sparisce dentro, tagliato — e l'elenco
   non arriva mai a traboccare: niente trabocco, niente barra di scorrimento, e la rotella non
   ha niente da muovere.

   Misurato: quaranta documenti in una cartella aperta, `scrollHeight` e `clientHeight` tutti e
   due 674, `scrollTop` fermo a zero dopo la rotella. */
.orbit-fascicolo {
    flex: 0 0 auto;
    background: var(--orbit-superficie);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio);
    overflow: hidden;
}

.orbit-fascicolo__testa {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: .7rem;
    align-items: center;
    padding: .6rem .8rem;
    cursor: pointer;
    user-select: none;
}
.orbit-fascicolo__testa:hover { background: var(--orbit-superficie-velo); }

.orbit-fascicolo__nome { font-weight: 600; font-size: .88rem; min-width: 0; }

.orbit-fascicolo__comandi { display: flex; gap: .15rem; }

.orbit-fascicolo__vuoto {
    margin: 0;
    padding: .6rem 1rem .8rem 2.6rem;
    font-size: .82rem;
    color: var(--orbit-testo-tenue);
}

.orbit-documenti {
    list-style: none;
    margin: 0;
    padding: 0 0 .35rem;
    border-top: 1px solid var(--orbit-bordo);
}

.orbit-documento {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: .7rem;
    align-items: center;
    padding: .45rem .8rem .45rem 2rem;
}
.orbit-documento:hover { background: var(--orbit-superficie-velo); }

.orbit-documento__nome { font-size: .85rem; min-width: 0; }
.orbit-documento__comandi { display: flex; gap: .15rem; }

/* Il selettore di file predefinito del browser: si allinea al resto senza
   sostituirlo, perche' un selettore rifatto perde il supporto del sistema
   operativo per il trascinamento e per le cartelle recenti. */
.orbit-file {
    display: block;
    width: 100%;
    font-size: .84rem;
    color: var(--orbit-testo-soft);
    padding: .5rem;
    background: var(--orbit-superficie-velo);
    border: 1px dashed var(--orbit-bordo);
    border-radius: var(--orbit-raggio);
}

/* ============================================================================
   Impostazioni di stampa: la scheda a sinistra, l'anteprima a destra.

   L'anteprima non e' un vezzo: chi carica un logo o scrive un'intestazione vuole
   vedere come sta, non immaginarlo. Affiancata e non sotto, cosi' si vede
   cambiare mentre si scrive.
   ========================================================================= */
.orbit-impostazioni {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1rem;
    padding: .75rem;
    overflow-y: auto;
    align-items: start;
}

@media (max-width: 62rem) {
    .orbit-impostazioni { grid-template-columns: minmax(0, 1fr); }
}

.orbit-anteprima {
    position: sticky;
    top: 0;
}

.orbit-anteprima__etichetta {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--orbit-testo-tenue);
    margin-bottom: .4rem;
}

.orbit-anteprima__nota {
    margin-top: .5rem;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--orbit-attenzione);
}

/* Il foglio: si vede che e' carta, senza imitare uno scanner. */
.orbit-foglio {
    background: var(--orbit-superficie);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio-piccolo);
    box-shadow: var(--orbit-ombra-finestra);
    padding: 1.1rem 1.2rem;
    font-size: .78rem;
    color: var(--orbit-testo-soft);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    min-height: 18rem;
}

.orbit-foglio__testa {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--orbit-bordo);
}

.orbit-foglio__logo { max-height: 3rem; max-width: 8rem; object-fit: contain; flex: none; }

.orbit-foglio__intestazione { line-height: 1.45; color: var(--orbit-testo); }
.orbit-foglio__mancante { color: var(--orbit-attenzione); font-style: italic; }

.orbit-foglio__corpo { flex: 1; line-height: 1.55; }
.orbit-foglio__corpo p + p { margin-top: .5rem; }

.orbit-foglio__piede {
    padding-top: .7rem;
    border-top: 1px solid var(--orbit-bordo);
    font-size: .72rem;
    color: var(--orbit-testo-tenue);
    line-height: 1.5;
}

.orbit-foglio__firma { color: var(--orbit-testo); margin-bottom: .35rem; }

/* Il logo caricato, nella scheda: si vede e si puo' togliere. */
.orbit-logo-corrente {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .7rem;
    margin-bottom: .5rem;
    background: var(--orbit-superficie-velo);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio-piccolo);
}

.orbit-logo-corrente img { max-height: 2.6rem; max-width: 9rem; object-fit: contain; }

/* ============================================================================
   Il canale documentale: la barra, l'anteprima, il foglio.
   ========================================================================= */
.orbit-canale { display: flex; gap: .15rem; }

.orbit-anteprima-documento { display: flex; flex-direction: column; gap: .7rem; }

.orbit-anteprima-documento__foglio {
    max-height: 62vh;
    overflow: auto;
    background: var(--orbit-superficie-velo);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio-piccolo);
    padding: 1rem;
}

.orbit-anteprima-documento__nota {
    margin: 0;
    font-size: .8rem;                   /* 12,8px: il contorno resta piccolo, ma si legge */
    line-height: 1.45;
    color: var(--orbit-attenzione);
}

.orbit-anteprima-documento__aiuto {
    margin: 0;
    font-size: .78rem;
    color: var(--orbit-testo-tenue);
}

/* Il foglio: A4 in scala, con margini che somigliano a quelli veri. */
.orbit-foglio-stampa {
    background: var(--orbit-superficie);
    color: var(--orbit-testo);
    padding: 1.6rem 1.8rem;
    font-size: .8rem;
    line-height: 1.5;
}

.orbit-foglio-stampa__testa {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: .8rem;
    border-bottom: 2px solid var(--orbit-bordo-forte);
}

.orbit-foglio-stampa__logo { max-height: 3.2rem; max-width: 9rem; object-fit: contain; }
.orbit-foglio-stampa__studio { font-size: .78rem; line-height: 1.45; }

.orbit-foglio-stampa__titolo {
    margin: 1.1rem 0 .2rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.orbit-foglio-stampa__sottotitolo {
    margin: 0 0 .9rem;
    font-size: .78rem;
    color: var(--orbit-testo-soft);
}

.orbit-foglio-stampa__vuoto {
    margin: 1rem 0;
    font-style: italic;
    color: var(--orbit-testo-tenue);
}

.orbit-foglio-stampa__tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: .74rem;
}

.orbit-foglio-stampa__tabella th {
    text-align: left;
    padding: .35rem .45rem;
    border-bottom: 1.5px solid var(--orbit-bordo-forte);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--orbit-testo-soft);
}

.orbit-foglio-stampa__tabella td {
    padding: .32rem .45rem;
    border-bottom: 1px solid var(--orbit-bordo);
    vertical-align: top;
}

.orbit-foglio-stampa__tabella .orbit-destra { text-align: right; }
.orbit-foglio-stampa__tabella .orbit-centro { text-align: center; }

.orbit-foglio-stampa__nota {
    margin: .9rem 0 0;
    font-size: .74rem;
    font-style: italic;
    color: var(--orbit-testo-soft);
}

.orbit-foglio-stampa__piede {
    margin-top: 1.4rem;
    padding-top: .6rem;
    border-top: 1px solid var(--orbit-bordo);
    font-size: .7rem;
    color: var(--orbit-testo-tenue);
}

.orbit-foglio-stampa__firma {
    margin-bottom: .5rem;
    font-size: .78rem;
    color: var(--orbit-testo);
}

.orbit-foglio-stampa__righe-piede { display: flex; flex-direction: column; gap: .1rem; }

/* La data di produzione sta a destra, come su una lettera. */
.orbit-foglio-stampa__prodotto { align-self: flex-end; text-align: right; }

/* Il foglio nascosto: esiste nel DOM per poter essere clonato in stampa, e non si vede. */
.orbit-solo-stampa { display: none; }

/* Il clone che si stampa: fuori dalla stampa non esiste. */
#orbit-stampa { display: none; }

/* ============================================================================
   In stampa.

   Si stampa SOLO il clone del foglio che orbitStampa mette sotto <body>, e il
   resto della pagina non si vede. Non e' un ritaglio con visibility: fino al
   14 settembre 2026 lo era, e il foglio usciva a meta' pagina e tagliato,
   perche' restava dentro la finestra o il dialogo e ne ereditava posizione,
   larghezza e scorrimento. Il clone sta in flusso normale sotto body: parte
   dal margine della pagina, e' largo quanto la pagina, e non ha antenati che
   lo ritaglino. La misura sta in BrowserRegressioniTest.
   ========================================================================= */
@media print {
    body { background: #fff; }

    body > :not(#orbit-stampa) { display: none !important; }

    #orbit-stampa { display: block; }

    #orbit-stampa .orbit-foglio-stampa {
        padding: 0;
        background: #fff;
        color: #000;
    }

    /* Le righe non si spezzano fra due pagine, e l'intestazione si ripete. */
    .orbit-foglio-stampa__tabella thead { display: table-header-group; }
    .orbit-foglio-stampa__tabella tr { break-inside: avoid; }

    @page { margin: 14mm; }
}

/* Il «?» sta nella barra del titolo del dialogo, accanto alla X, come nelle finestre.
   Il pulsante e' un figlio della scheda - Blazor lo rende li' - ma si posiziona rispetto
   al DIALOGO: la scheda non e' posizionata, il contenuto scorrevole nemmeno, e il primo
   antenato posizionato e' .rz-dialog. Cosi' arriva in alto a destra senza uscire dal
   flusso ne' essere ritagliato dallo scorrimento. Chiesto il 15 settembre 2026.

   Le misure NON sono scelte a occhio: sono le stesse variabili con cui Radzen dispone la
   barra del titolo, cosi' il «?» resta allineato alla X anche se il tema le cambia. La
   sola che si riscrive e' la spaziatura alta del titolo, perche' Radzen la dichiara come
   scorciatoia a due valori (--rz-dialog-title-padding-block: 1.5rem 0) e una scorciatoia
   non si puo' usare dentro calc(). I centri delle due icone cadono alla stessa altezza:
   spaziatura alta + meta' della riga del titolo. Segnalato il 16 settembre 2026, quando
   il «?» stava quattro punti piu' in alto della X. */
.rz-dialog { --orbit-titolo-scheda-alto: 1.5rem; }

.orbit-aiuto-scheda {
    position: absolute;
    top: var(--orbit-titolo-scheda-alto);
    right: calc(var(--rz-dialog-title-padding-inline) + var(--rz-dialog-close-font-size) + .5rem);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rz-dialog-title-line-height);
    height: var(--rz-dialog-title-line-height);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--rz-dialog-close-color);
    cursor: pointer;
}

.orbit-aiuto-scheda .rz-icon,
.orbit-aiuto-scheda .rzi { font-size: var(--rz-dialog-close-font-size); line-height: 1; }

.orbit-aiuto-scheda:hover { color: var(--rz-dialog-close-hover-color); background: var(--orbit-superficie-velo); }

.orbit-manuale__pagina--laterale { padding: 0 .5rem 1rem; line-height: 1.55; }

/* Un valore da ricopiare - la password iniziale mostrata una volta - a spaziatura fissa,
   su un fondo che lo stacca dal testo intorno. */
.orbit-codice {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: .95rem;
    letter-spacing: .06em;
    padding: .1rem .4rem;
    border-radius: var(--orbit-raggio-piccolo);
    background: var(--orbit-superficie-velo);
    user-select: all;
}

/* Un aiuto che avverte: lo stesso posto e la stessa misura, un altro tono. */
.orbit-form__aiuto--critico { color: var(--orbit-critico); }

/* Il paragrafo che spiega la schermata, fra la barra degli strumenti e la griglia.

   Prendeva il rientro di nessuno dei due: il testo toccava il bordo della finestra mentre
   il titolo sopra rientrava di .85rem, e nelle finestre a corpo compatto - dove il corpo
   non ha spaziatura propria - si vedeva benissimo. Segnalato sulla struttura dell'edificio,
   ma sono VENTISEI le schermate che hanno questo paragrafo: si allinea alla barra, che e'
   cio' che sta guardando chi legge, e si allineano tutte insieme.
   Il margine negativo di .orbit-form__aiuto serve dentro i moduli, sotto un campo: qui
   sopra non c'e' nessun campo, e tirerebbe il testo sotto il bordo della barra. */
.orbit-pannello-elenco > .orbit-form__aiuto {
    margin-block-start: 0;
    padding: .5rem .85rem 0;
}

/* --------------------------------------------------- Piano di riparto -- */

/* Il piano di riparto e' un documento, non un elenco: si legge per persona.

   Per questo non e' una griglia unica ordinabile ma una sezione per cond&ograve;mino con
   le sue righe sotto. Chi lo apre in assemblea cerca il proprio nome e poi guarda le
   voci: una tabella piatta da trecento righe costringerebbe a filtrare per fare la stessa
   cosa, e in assemblea non si filtra niente. */
/* DOVE FINISCE UN RIQUADRO E COMINCIA L'ALTRO.

   Fino al 22 settembre 2026 i riquadri erano `superficie-alt` (#F7F9FC) dentro un corpo di
   finestra `superficie` (#FFFFFF), separati da un filetto `bordo` (#E1E7EF): due per cento di
   differenza fra la scheda e cio' che le sta intorno, e un filetto che a schermo non si vede.
   Con piu' schede di fila — gli impianti, i finanziamenti, le spese addebitate — si leggeva un
   blocco unico. Segnalato: «non si capisce quando inizia una e finisce l'altro riquadro».

   Si inverte il rapporto, che e' il modo in cui una scheda si e' sempre distinta dal suo
   sfondo: la pista prende il fondo della pagina, le schede restano chiare e si staccano col
   filetto forte e un'ombra bassa. Vale ovunque, perche' e' l'elemento condiviso da tutte le
   schermate a riquadri. */
.orbit-riparto {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .85rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    background: var(--orbit-fondo);
}

.orbit-riparto__condomino {
    border: 1px solid var(--orbit-bordo-forte);
    border-radius: var(--orbit-raggio);
    background: var(--orbit-superficie);
    box-shadow: var(--orbit-ombra-finestra);
    padding: .7rem .85rem;
}

.orbit-riparto__testa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding-block-end: .35rem;
    border-block-end: 1px solid var(--orbit-bordo);
}

.orbit-riparto__nome { font-weight: 600; color: var(--orbit-testo); }

/* I dettagli sotto la testa della scheda: un <span> per informazione, e ogni
   informazione sulla sua riga.

   Le schede usavano .orbit-form__aiuto, che e' l'aiuto sotto un campo di modulo: inline,
   e con un margine negativo pensato per stare sotto una casella. Qui gli span si
   leggevano attaccati — «120 rate Rata del piano: 198,14 €», finanziamenti, 21/09/2026 —
   e la riga finiva a ridosso del filetto della testa. Non si corregge sull'aiuto perche'
   altre schede lo usano davvero inline (gli accessi al portale mettono « — » fra uno
   span e l'altro): e' un elemento diverso, e si chiama col suo nome. */
.orbit-riparto__dettagli {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-block-start: .4rem;
    font-size: .715rem;
    line-height: 1.4;
    color: var(--orbit-testo-tenue);
}

/* I RECAPITI nella scheda: a chi si consegna quello che la scheda produce.

   Non e' .orbit-form__aiuto, e la differenza non e' estetica. L'aiuto e' un promemoria che
   si legge una volta e poi si sa: puo' stare a 11,44px nel grigio piu' tenue, e sta bene cosi'.
   Qui invece c'e' l'indirizzo a cui va il codice d'invito — si legge, si ricopia in un
   messaggio, e se si legge male il codice d'accesso a un condominio arriva a un'altra
   persona. Un dato che si trascrive si scrive col colore del testo.

   Il difetto da cui nasce: l'indirizzo stava nell'aiuto, cioe' — misurato nel browser —
   a 11,44px nel grigio a 4,75:1, il piu' debole che abbiamo. Nessuna delle due attenuazioni
   era una violazione da sola; sommate, l'indirizzo «si leggeva appena». Non si attenua due
   volte lo stesso dato.

   (Attenzione al rem, che qui inganna: il programma mette «font-size: 14px» sul BODY, ma il
   rem si misura su <html> e resta a 16px. .715rem sono 11,44px, non 10.) */
.orbit-riparto__recapiti {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem;
    margin-block-start: .4rem;
    font-size: .8rem;                   /* 12,8px: il contorno resta piccolo, ma si legge */
    line-height: 1.45;
    color: var(--orbit-testo-soft);     /* 5,43:1 su chiaro, 6,86:1 su scuro */
}

/* Il trattino fra un'informazione e l'altra lo mette il foglio di stile e non il markup:
   scritto a mano dentro gli span, spariva o si sdoppiava a seconda di quali fossero
   presenti — e qui l'indirizzo puo' mancare, la scadenza pure. */
.orbit-riparto__recapiti > * + *::before {
    content: "—";
    margin-inline-end: .3rem;
    color: var(--orbit-bordo-forte);
}

/* L'indirizzo di posta: pieno contrasto, perche' e' il dato che si ricopia. */
.orbit-riparto__recapito {
    color: var(--orbit-testo);          /* 16,38:1 su chiaro, 13,39:1 su scuro */
    font-weight: 600;
}

/* Quando l'indirizzo non c'e'. Non e' una sfumatura da lasciare in grigio: senza indirizzo
   l'invito si emette ma NON si riscatta — il riscatto si ferma perche' l'indirizzo e' il
   nome utente — e chi sta per premere «Invita» lo deve vedere prima, non dopo. */
.orbit-riparto__recapito--assente {
    color: var(--orbit-critico);        /* 5,44:1 su chiaro, 5,83:1 su scuro */
    font-weight: 600;
}

.orbit-riparto__totale {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--orbit-testo);
}

.orbit-riparto__chiusura {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .75rem;
    border-block-start: 2px solid var(--orbit-bordo-forte);
    font-size: .92rem;
}

/* Le cifre si leggono incolonnate a destra e con le stesse larghezze: e' l'unico modo per
   accorgersi a occhio che una quota e' fuori scala. */
.orbit-numero { text-align: end; font-variant-numeric: tabular-nums; }

/* Una tabella dentro una scheda, quando le righe sono poche e non si filtrano.

   Non e' OrbitGriglia e non deve diventarlo: le clausole di un regolamento sono cinque o
   sei, non si cercano e non si ordinano. Una griglia completa con paginazione e barra degli
   strumenti, su sei righe, e' piu' cornice che quadro. */
/* La matrice dei permessi: sei ruoli in colonna e venticinque aree in riga, che su una
   finestra stretta non ci stanno. Scorre da se' invece di far scorrere la pagina - la
   regola vale per ogni contenuto largo, e qui e' il caso piu' estremo che abbiamo. */
.orbit-tabella-permessi {
    overflow-x: auto;
    padding-inline: .85rem;
}

.orbit-tabella-permessi td { padding: .25rem .35rem; vertical-align: middle; }
.orbit-tabella-permessi td:first-child { white-space: nowrap; }

.orbit-tabella-semplice {
    width: 100%;
    margin-block: .5rem;
    border-collapse: collapse;
    font-size: .88rem;
}

.orbit-tabella-semplice th {
    padding: .4rem .5rem;
    text-align: start;
    font-weight: 600;
    color: var(--orbit-testo-tenue);
    border-block-end: 1px solid var(--orbit-bordo);
}

.orbit-tabella-semplice td {
    padding: .45rem .5rem;
    vertical-align: top;
    border-block-end: 1px solid var(--orbit-bordo);
}

.orbit-tabella-semplice tr:last-child td { border-block-end: none; }

/* Il verdetto di una regola di legge dentro una scheda.

   Non e' un aiuto e non e' un errore di compilazione: e' che cosa risulta dei dati
   scritti finora. Sta acceso sempre - anche quando va tutto bene - perche' un giudizio
   che compare solo in caso di guaio si legge come un rimprovero, e chi compila impara a
   temerlo invece che a usarlo. */
.orbit-form__esito {
    margin-block-start: .5rem;
    padding: .5rem .7rem;
    border-inline-start: 3px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio-piccolo);
    background: var(--orbit-superficie-velo);
    font-size: .86rem;
    line-height: 1.45;
    color: var(--orbit-testo-tenue);
}

.orbit-form__esito--buono {
    border-inline-start-color: var(--orbit-ok);
    background: var(--orbit-ok-velo);
    color: var(--orbit-testo);
}

/* Il grave non e' rosso per decorazione: qui significa che la delibera e' NULLA, cioe'
   che quanto si sta registrando non regge. Va distinto a colpo d'occhio da un fondo che
   semplicemente non e' ancora stato dichiarato. */
.orbit-form__esito--grave {
    border-inline-start-color: var(--orbit-critico);
    background: var(--orbit-critico-velo);
    color: var(--orbit-testo);
}

/* Un segnaposto dentro un testo: si riconosce come un pezzo di macchina in mezzo
   alle parole, e si distingue dal testo che lo circonda. */
.orbit-segnaposto {
    display: inline-block;
    margin-inline-end: .25rem;
    padding: .05em .3em;
    font-size: .78em;
    background: var(--orbit-superficie-velo);
    border: 1px solid var(--orbit-bordo);
    border-radius: 3px;
    color: var(--orbit-testo-soft);
}

/* L'anteprima del testo composto: si legge come una lettera, non come un campo. */
.orbit-anteprima-testo {
    background: var(--orbit-superficie-velo);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio-piccolo);
    padding: .8rem .9rem;
    font-size: .82rem;
    line-height: 1.55;
    max-height: 16rem;
    overflow-y: auto;
}

.orbit-anteprima-testo__oggetto {
    padding-bottom: .5rem;
    margin-bottom: .6rem;
    border-bottom: 1px solid var(--orbit-bordo);
}

.orbit-anteprima-testo__corpo { white-space: pre-wrap; }

/* Un invio, sotto il documento a cui appartiene: rientrato di piu', perche' e'
   un fatto DEL documento e non un documento a sua volta. */
.orbit-invio {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: .7rem;
    align-items: center;
    padding: .35rem .8rem .35rem 3.4rem;
    font-size: .8rem;
    color: var(--orbit-testo-soft);
}
.orbit-invio:hover { background: var(--orbit-superficie-velo); }
.orbit-invio__testo { min-width: 0; }

/* Le forme di spedizione: si scelgono guardandole, non da una tendina. Quella
   preclusa si vede spenta col motivo a portata di puntatore - un pulsante grigio
   senza spiegazione sembra un difetto, e chi lo incontra cerca di aggirarlo. */
.orbit-forme {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .3rem 0 .2rem;
}

.orbit-forma {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    min-width: 6.5rem;
    padding: .5rem .6rem;
    background: var(--orbit-superficie);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio-piccolo);
    font-size: .78rem;
    color: var(--orbit-testo-soft);
    cursor: pointer;
    transition: border-color var(--orbit-transizione), background var(--orbit-transizione);
}

.orbit-forma:hover:not(:disabled) { border-color: var(--orbit-bordo-forte); }

.orbit-forma--scelta {
    border-color: var(--orbit-ciano);
    background: var(--orbit-ciano-velo);
    color: var(--orbit-ciano-testo);
}

.orbit-forma--preclusa {
    opacity: .45;
    cursor: not-allowed;
    text-decoration: line-through;
}

.orbit-forma__nota { font-size: .64rem; color: var(--orbit-ok); }
.orbit-forma--preclusa .orbit-forma__nota { display: none; }

/* ------------------------------------------------- La ricerca globale -- */
/*
   I risultati si scorrono con l'occhio, non si leggono: titolo in evidenza e
   contesto sotto, in piccolo. Il contesto e' quello che distingue due «Interno 3»
   che stanno in due edifici diversi, e senza di esso la ricerca troverebbe la cosa
   giusta senza dire quale sia.
*/

.orbit-ricerca-globale {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 .85rem .85rem;
}

.orbit-ricerca-globale__elenco {
    list-style: none;
    margin: 0 0 .4rem;
    padding: 0;
}

.orbit-ricerca-globale__voce {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    width: 100%;
    padding: .45rem .55rem;
    background: transparent;
    border: 0;
    border-radius: var(--orbit-raggio-piccolo);
    font: inherit;
    text-align: start;
    color: var(--orbit-testo);
    cursor: pointer;
}

.orbit-ricerca-globale__voce:hover,
.orbit-ricerca-globale__voce:focus-visible {
    background: var(--orbit-superficie-velo);
    outline: none;
}

.orbit-ricerca-globale__titolo { font-weight: 600; }

/* ---------------------------------------------------------- La lettera -- */
/*
   Il testo di cio' che si sta per spedire, mostrato COM'E'.

   Si legge in un carattere con grazie e su una riga corta: e' la forma in cui
   arrivera' alla persona, e un testo composto nel carattere dell'interfaccia si
   rilegge come un campo di un modulo invece che come una lettera - cioe' si
   rilegge male, che e' il contrario di quello che questa finestra serve a fare.

   Scorre DENTRO la sua colonna, e la finestra non cresce in altezza.
*/

.orbit-lettera {
    max-height: 24rem;
    overflow-y: auto;
    padding: .9rem 1.05rem;
    background: var(--orbit-superficie-alt);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio-piccolo);
    font-family: Georgia, "Times New Roman", serif;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--orbit-testo);
}

.orbit-lettera__oggetto {
    margin-bottom: .7rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--orbit-bordo);
    font-weight: 600;
}

/* Il corpo arriva dal modello con i suoi a capo: si rispettano. */
.orbit-lettera__corpo { white-space: pre-wrap; }

/* ------------------------------------------------------- Calcolatrice -- */
/*
   Una calcolatrice da scrivania: il nastro sopra, lo schermo in mezzo, i tasti
   sotto. Le proporzioni servono a questo — il nastro prende lo spazio che avanza
   perche' e' cio' che si guarda, i tasti restano fissi perche' si trovano a memoria.
*/

.orbit-calcolatrice {
    display: grid;
    grid-template-rows: 1fr auto auto auto;
    gap: .6rem;
    height: 100%;
    padding: .7rem;
    outline: none;
}

.orbit-calcolatrice:focus-visible {
    box-shadow: inset 0 0 0 2px var(--orbit-ciano);
    border-radius: 6px;
}

.orbit-calcolatrice__nastro {
    overflow-y: auto;
    min-height: 4rem;
    padding: .5rem .6rem;
    background: var(--orbit-superficie-alt);
    border: 1px solid var(--orbit-bordo);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}

.orbit-calcolatrice__vuoto {
    margin: 0;
    font-size: .78rem;
    color: var(--orbit-testo-tenue);
}

.orbit-calcolatrice__riga {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    padding: .12rem 0;
    font-size: .84rem;
    color: var(--orbit-testo-soft);
}

.orbit-calcolatrice__riga--totale {
    margin-block-start: .15rem;
    padding-block-start: .2rem;
    border-block-start: 1px solid var(--orbit-bordo);
    font-weight: 700;
    color: var(--orbit-testo);
}

.orbit-calcolatrice__operatore { min-width: 1.2rem; }
.orbit-calcolatrice__valore { font-variant-numeric: tabular-nums; }

.orbit-calcolatrice__schermo {
    padding: .45rem .7rem;
    background: var(--orbit-notte);
    color: var(--orbit-su-notte);
    border-radius: 6px;
    text-align: right;
}

.orbit-calcolatrice__memoria {
    min-height: 1rem;
    font-size: .72rem;
    color: var(--orbit-su-notte-soft);
    font-variant-numeric: tabular-nums;
}

.orbit-calcolatrice__cifre {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-x: auto;
}

.orbit-calcolatrice__tasti {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .35rem;
}

.orbit-calcolatrice__tasti .rz-button { width: 100%; }

.orbit-calcolatrice__comandi {
    display: flex;
    gap: .4rem;
    justify-content: flex-end;
}

/* ------------------------------------------------------------------ Voto sulla pagina --

   In fondo a ogni pagina del manuale. Si stacca dal testo con un filo, come il piede della
   griglia: senza, sembra l'ultimo paragrafo della pagina invece di una domanda rivolta a chi
   legge. */

.orbit-voto {
    margin-block-start: 2rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--orbit-bordo);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
}

.orbit-voto__domanda {
    font-size: .88rem;
    color: var(--orbit-testo-soft);
}

.orbit-voto__stelle {
    display: flex;
    gap: .1rem;
}

/* La stella e' un pulsante, non un'icona con un gestore sopra: si raggiunge col tabulatore
   e si preme con la barra spaziatrice, come qualunque altro comando del programma. */
.orbit-voto__stella {
    background: none;
    border: 0;
    padding: .1rem;
    cursor: pointer;
    color: var(--orbit-testo-tenue);
    line-height: 1;
    transition: color var(--orbit-transizione), transform var(--orbit-transizione);
}

.orbit-voto__stella:hover { transform: scale(1.15); }
.orbit-voto__stella:disabled { cursor: default; transform: none; }
.orbit-voto__stella--piena { color: var(--orbit-attenzione); }

.orbit-voto__stella:focus-visible {
    outline: 2px solid var(--orbit-ciano);
    outline-offset: 2px;
    border-radius: var(--orbit-raggio-piccolo);
}

.orbit-voto__seguito {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    flex: 1 1 18rem;
}

/* Un collegamento, non un pulsante: e' un invito, e un pulsante in piu' accanto alle stelle
   farebbe sembrare il commento obbligatorio. */
.orbit-voto__scrivi {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: .85rem;
    color: var(--orbit-ciano-testo);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.orbit-voto__commento { flex: 1 1 14rem; }

/* Il voto riassunto in una griglia: il numero e la stella restano attaccati. */
.orbit-voto__riepilogo {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    white-space: nowrap;
    color: var(--orbit-attenzione);
    font-weight: 600;
}

.orbit-voto__riepilogo--basso { color: var(--orbit-critico); }

/* ------------------------------------------------- Indice di virtuosità --

   Cento è «esattamente la propria parte». Il colore non è un giudizio sulla persona: è la
   stessa scala del riepilogo dei voti, dove il rosso segnala ciò su cui si può agire. */

.orbit-indice {
    display: inline-block;
    min-width: 3.2rem;
    padding: .06em .4em;
    border-radius: var(--orbit-raggio-piccolo);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.orbit-indice--sotto { background: var(--orbit-ciano-velo); color: var(--orbit-ciano-testo); }
.orbit-indice--sopra { background: var(--orbit-critico-velo); color: var(--orbit-critico); }

/* Il titolo di una scala dentro il riparto: si legge il prospetto scala per scala, che e' la
   domanda che si fa in assemblea in un edificio a piu' corpi. */
.orbit-riparto__gruppo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: 1.4rem 0 .4rem;
    padding-bottom: .3rem;
    border-bottom: 2px solid var(--orbit-bordo);
    font-size: 1.05rem;
}

/* ---------------------------------------------------------------- Griglia dei voti --
   Le votazioni: i condòmini in riga, i punti all'ordine del giorno in colonna, un voto per
   cella. La griglia scorre in orizzontale quando i punti sono molti, e la colonna dei nomi
   resta ferma: senza, al quinto punto non si sa più chi sta votando. */

.orbit-griglia-voti {
    overflow-x: auto;
    max-width: 100%;
}

.orbit-griglia-voti table {
    min-width: 100%;
}

.orbit-griglia-voti thead th:first-child,
.orbit-griglia-voti tbody td:first-child,
.orbit-griglia-voti tfoot td:first-child {
    position: sticky;
    inset-inline-start: 0;
    background: var(--orbit-superficie);
    z-index: 1;
}

.orbit-griglia-voti__punto {
    min-width: 13rem;
    vertical-align: top;
}

.orbit-griglia-voti__cella,
.orbit-griglia-voti__esito {
    white-space: nowrap;
    vertical-align: middle;
}

.orbit-griglia-voti__scelta {
    display: inline-flex;
    gap: .2rem;
}

/* L'anteprima di una lettera dentro una scheda: si legge come un foglio, e non allunga la
   scheda oltre lo schermo — scorre dentro il suo riquadro. */
.orbit-anteprima-lettera {
    max-height: 18rem;
    overflow-y: auto;
    padding: .75rem 1rem;
    border: 1px solid var(--orbit-bordo);
    border-radius: .5rem;
    background: var(--orbit-superficie);
}

.orbit-anteprima-lettera p { margin: 0 0 .6rem; }