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

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

.orbit-strumenti {
    display: flex;
    align-items: center;
    gap: .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;
    min-width: 0;
    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; }

/* 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; }
.orbit-griglia .rz-paginator { 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); }

/* ----------------------------------------------- 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: separa senza essere cliccabile. */
.orbit-manuale__gruppo {
    padding: .5rem .5rem .2rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--orbit-testo-tenue);
}

/* 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; }

/* 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; }

.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);
}

/* 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;
}

.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;
}

/* --------------------------------------------------------------- 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.
   ========================================================================= */
.orbit-fascicoli {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    overflow-y: auto;
}

.orbit-fascicolo {
    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 {
    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;
    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; }

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

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

   Che cosa si stampa lo decide QUI e non il JavaScript: ritagliare il DOM da
   codice vorrebbe dire tenere allineate due descrizioni della stessa cosa.

   Si nasconde tutto e si mostra solo il foglio - quello dell'anteprima se e'
   aperta, altrimenti quello nascosto. La visibilita' e non il display: con
   display:none sugli antenati il discendente non si vedrebbe comunque.
   ========================================================================= */
@media print {
    body { background: #fff; }

    body * { visibility: hidden !important; }

    .orbit-solo-stampa,
    .rz-dialog .orbit-anteprima-documento__foglio {
        display: block !important;
    }

    .orbit-solo-stampa, .orbit-solo-stampa *,
    .rz-dialog .orbit-anteprima-documento__foglio,
    .rz-dialog .orbit-anteprima-documento__foglio * {
        visibility: visible !important;
    }

    /* Il foglio occupa la pagina, senza l'impaginazione del guscio. */
    .orbit-solo-stampa,
    .rz-dialog .orbit-anteprima-documento__foglio {
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        border: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    /* 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; }
}

/* 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ò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. */
.orbit-riparto {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .85rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.orbit-riparto__condomino {
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio-piccolo);
    background: var(--orbit-superficie-alt);
    padding: .6rem .75rem;
}

.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); }

.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; }

/* ------------------------------------------------------- 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;
}