/* ===========================================================================
   OrbitCondomini — Guscio applicativo
   Top bar, desktop, finestre trascinabili, taskbar.
   Nessun colore letterale: tutto passa dai token in orbit-tema.css
   =========================================================================== */

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    background: var(--orbit-fondo);
    color: var(--orbit-testo);
    font-family: "Roboto", -apple-system, "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

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

/* ---------------------------------------------------------------- Guscio -- */

.orbit-guscio {
    display: grid;

    /* UNA COLONNA, VINCOLATA. Senza questa riga la colonna implicita era «auto» e si
       dimensionava sul contenuto piu' largo: a 1470 punti di viewport la traccia misurava
       1686, e topbar, scrivania e barra delle applicazioni con lei. I 216 punti in eccesso
       non producevano una barra di scorrimento — c'e' overflow:hidden — ma il guscio
       risultava scorso di quei 216 (scrollLeft), quindi il contenuto era spostato a
       sinistra e tagliato: ecco perche' il taglio sembrava spostarsi da destra a sinistra
       massimizzando e ripristinando una finestra.
       
       Il «minmax(0, ...)» non e' ornamentale: «1fr» da solo vale «minmax(auto, 1fr)», e il
       minimo automatico di un elemento di griglia e' la sua larghezza di contenuto — cioe'
       esattamente cio' che faceva sfondare la traccia. Con lo zero i figli possono
       stringersi, e chi deve scorrere lo fa dentro se stesso. */
    grid-template-columns: minmax(0, 1fr);

    /* La prima riga e' AUTO, non fissa: la barra dei menu va a capo su uno schermo
       stretto, e con un'altezza bloccata la seconda fila finirebbe sotto il bordo. */
    grid-template-rows: auto 1fr var(--orbit-taskbar-h);
    height: 100dvh;
    overflow: hidden;
}

/* --------------------------------------------------------------- Top bar -- */

.orbit-topbar {
    display: flex;
    align-items: center;

    /* L'altezza e' un MINIMO, non un valore: sotto una certa larghezza le voci di menu
       vanno a capo (vedi .orbit-menu) e la barra deve crescere con loro.

       La barra in se' non ha bisogno di flex-wrap: il nav ha flex:1 e min-width:0,
       quindi si stringe e non fa mai sbordare la riga. Ce l'aveva, ed e' stato tolto
       perche' rimettendo il difetto nessuna prova cadeva: codice che non difende niente. */
    min-height: var(--orbit-topbar-h);
    gap: 1.25rem;
    padding-inline: .75rem;
    background: var(--orbit-notte);
    color: var(--orbit-su-notte);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
    position: relative;
    z-index: 3000;
}

.orbit-marchio {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-inline-end: .5rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.orbit-marchio__glifo {
    width: 22px;
    height: 22px;
    flex: none;
}

/* Il marchio sulla top bar.

   La cromatura e' scura in ENTRAMBI i temi, quindi qui i due token non seguono
   il tema: la parola prende il testo chiaro della barra, e la controforma prende
   il fondo della barra stessa. Lasciarli ai valori del tema chiaro riempirebbe
   l'interno della O di bianco su una barra blu notte. */
.orbit-topbar .orbit-marchio {
    --orbit-marchio-fondo: var(--orbit-notte);
    --orbit-marchio-accento: var(--orbit-marchio-su-notte);
    color: var(--orbit-su-notte);
}

.orbit-marchio__logo { flex: none; display: block; }

.orbit-marchio__nome { font-size: .95rem; }
.orbit-marchio__nome b { font-weight: 700; }
.orbit-marchio__nome span { color: var(--orbit-su-notte-soft); font-weight: 400; }

/* Voci di menu della top bar */
.orbit-menu {
    display: flex;
    align-items: center;

    /* Anche il nav va a capo, non solo la barra che lo contiene: e' lui a tenere i
       gruppi, e senza questo restava largo quanto la loro somma - a 915 punti
       ottocento e passa oltre il bordo - mentre la barra intorno andava a capo
       correttamente attorno a un figlio che sbordava lo stesso. */
    gap: .125rem;
    flex: 1;
    min-width: 0;
}

/* Le voci vanno a capo QUANDO SERVE, senza soglie.

   La soglia c'e' stata, ed e' stata sbagliata due volte — prima 1200, poi 1400 — perche'
   la stavo tarando contro un guscio rotto: finche' la griglia del guscio si allargava sul
   contenuto (vedi .orbit-guscio) il nav aveva spazio in abbondanza a 1440, e sembrava che
   andare a capo li' fosse un difetto. Vincolata la colonna, a 1440 il menu NON ci sta:
   servono 819 punti e ce ne sono 715.

   Senza il wrap le voci non si stringono — un flex non riduce il contenuto sotto la sua
   larghezza minima — ma DEBORDANO dal riquadro del nav, che ha overflow visibile: si
   appoggiano sopra la parte destra della barra e ne intercettano i clic. E' cosi' che il
   pulsante del tema e quello dell'utente diventavano inservibili: non erano nascosti,
   erano coperti. */
.orbit-menu {
    flex-wrap: wrap;
    row-gap: .15rem;
}

.orbit-menu__voce {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 30px;
    padding-inline: .6rem;
    border: 0;
    border-radius: var(--orbit-raggio-piccolo);
    background: transparent;
    color: var(--orbit-su-notte);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--orbit-transizione);
}

.orbit-menu__voce:hover { background: rgba(255, 255, 255, .09); }
.orbit-menu__voce .rzi { font-size: 1rem; opacity: .8; }
.orbit-menu__freccia { font-size: .6rem; opacity: .6; }

/* Gruppo di menu: contiene la voce e la sua tendina. */
.orbit-menu__gruppo { position: relative; }

/* Voce evidenziata quando la sua tendina e' aperta. */
.orbit-menu__gruppo--aperta:hover > .orbit-menu__voce,
.orbit-menu__gruppo--aperta:focus-within > .orbit-menu__voce {
    background: var(--orbit-ciano);
    color: var(--orbit-su-ciano);
}

.orbit-utente[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }

/* Superficie che chiude il menu utente al primo clic fuori. Sta dentro l'header
   e sotto le tendine: l'header ha un proprio contesto di impilamento, quindi da
   fuori coprirebbe le tendine invece di starci sotto. */
.orbit-scherma { position: fixed; inset: 0; z-index: 3050; }

/* CON UN MODALE APERTO LA BARRA IN ALTO SCENDE SOTTO.
   
   La barra sta a 3000 e i dialoghi di Radzen a 1001: la barra li COPRE, e un dialogo alto
   abbastanza da arrivare sotto di essa si ritrova il proprio pulsante di chiusura
   incliccabile. Misurato sulla scheda di un soggetto: viewport 900 punti, dialogo alto 868
   che comincia a 16 — cioe' dentro i 62 della barra. Chi apriva quella scheda non poteva
   chiuderla col pulsante.
   
   Non si alza il dialogo: le tendine di Radzen prendono z-index 2000 dal suo javascript, e
   portando il dialogo sopra 3100 ogni RadzenDropDown DENTRO una scheda finirebbe dietro alla
   scheda stessa. Si abbassa la barra, e solo mentre un modale e' aperto.
   
   Il segnale e' la PRESENZA del dialogo, non una classe: Radzen mette `no-scroll` sul body
   in altri casi ma NON quando apre un DialogService — provato e misurato, `body=""` con la
   scheda aperta. `:has()` guarda il fatto invece di fidarsi di un contrassegno che non
   arriva.
   
   E 999 e' sotto la velatura (1000), che e' giusto: con un modale aperto il menu non si usa,
   e la velatura deve coprirlo. */
body:has(.rz-dialog-wrapper) .orbit-topbar { z-index: 999; }

/* Tendina */
.orbit-tendina {
    position: absolute;
    /* Nessuno spazio fra la voce e la tendina: un varco anche di pochi pixel
       farebbe uscire il puntatore dal gruppo e la tendina si richiuderebbe. */
    top: 100%;
    inset-inline-start: 0;
    min-width: 230px;
    padding: .3rem;
    background: var(--orbit-superficie);
    border: 1px solid var(--orbit-bordo);
    border-radius: 0 var(--orbit-raggio) var(--orbit-raggio) var(--orbit-raggio);
    box-shadow: var(--orbit-ombra-menu);
    z-index: 3100;

    /* Chiusa per impostazione predefinita: l'apertura al passaggio del mouse la
       governa il CSS, senza coinvolgere il server. */
    display: none;
    animation: orbit-tendina-entra 110ms ease-out;
}

/* La classe --chiuso, posata dal JS al clic su una voce, esclude il gruppo
   dall'apertura: va messa fra le condizioni della regola e non in una regola
   separata, altrimenti perderebbe per specificita' contro :hover. */
.orbit-menu__gruppo--aperta:not(.orbit-menu__gruppo--chiuso):hover > .orbit-tendina,
.orbit-menu__gruppo--aperta:not(.orbit-menu__gruppo--chiuso):focus-within > .orbit-tendina,
.orbit-tendina--visibile {
    display: block;
}

/* Il menu utente si apre a destra per non uscire dallo schermo. */
.orbit-tendina--destra { inset-inline-start: auto; inset-inline-end: 0; }

/* ---- Il terzo livello ------------------------------------------------------

   Serve dove una tendina smette di essere leggibile: la Contabilita' completa
   arriva a quindici voci piu' i titoli di sezione, e diventa una colonna da
   scorrere. Sotto le otto o nove voci il separatore col titolo basta e costa
   meno, perche' si vede tutto insieme. */
.orbit-tendina__sottomenu { position: relative; }

.orbit-tendina__voce--apre { justify-content: flex-start; }

/* La freccia va a fondo riga: dice che c'e' dell'altro senza occupare il posto
   della nota di fase, che sulle voci interne resta dov'e'. */
.orbit-tendina__freccia {
    margin-inline-start: auto;
    font-size: 1rem;
    color: var(--orbit-testo-tenue);
}

.orbit-tendina--annidata {
    top: -.3rem;                    /* allineata al bordo superiore della voce */
    inset-inline-start: 100%;
    border-radius: var(--orbit-raggio);
}

/* Come il primo livello: si apre al passaggio, senza chiedere un clic in piu' a
   chi sta gia' navigando il menu. */
.orbit-tendina__sottomenu:hover > .orbit-tendina--annidata,
.orbit-tendina__sottomenu:focus-within > .orbit-tendina--annidata {
    display: block;
}

/* Vicino al bordo destro si apre dall'altra parte, altrimenti esce dallo
   schermo e meta' delle voci diventa irraggiungibile. */
.orbit-menu__gruppo:nth-last-child(-n+3) .orbit-tendina--annidata {
    inset-inline-start: auto;
    inset-inline-end: 100%;
}

@media (hover: none) {
    .orbit-tendina__sottomenu:active > .orbit-tendina--annidata { display: block; }
}

/* Su schermi tattili il passaggio del mouse non esiste: la tendina si apre al
   tocco, che il browser traduce in :hover sull'elemento premuto. */
@media (hover: none) {
    .orbit-menu__gruppo--aperta:active > .orbit-tendina { display: block; }
}

@keyframes orbit-tendina-entra {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.orbit-tendina__voce {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .45rem .6rem;
    border: 0;
    border-radius: var(--orbit-raggio-piccolo);
    background: transparent;
    color: var(--orbit-testo);
    font: inherit;
    font-size: .83rem;
    text-align: start;
    cursor: pointer;
    transition: background var(--orbit-transizione);
}

.orbit-tendina__voce:hover { background: var(--orbit-ciano-velo); }
a.orbit-tendina__voce { text-decoration: none; }
.orbit-tendina__voce .rzi { font-size: 1.05rem; color: var(--orbit-ciano-testo); flex: none; }
.orbit-tendina__voce--disabilitata { color: var(--orbit-testo-tenue); cursor: not-allowed; }
.orbit-tendina__voce--disabilitata:hover { background: transparent; }
.orbit-tendina__voce--disabilitata .rzi { color: var(--orbit-testo-tenue); }

/* Menu contestuale. Contenitore proprio e non una variante di .orbit-tendina:
   quella e' posizionata in assoluto sotto la voce che la apre, mentre qui il
   posizionamento lo fa Radzen. Le voci, i separatori e le intestazioni sono
   invece le stesse classi, perche' un menu contestuale che sembra un'altra cosa
   fa dubitare di aver cliccato nel posto giusto. */
/* La griglia riceve i tasti per gli acceleratori, ma non e' un elemento che si
   "attraversa" col tabulatore: il contorno del fuoco comparirebbe a ogni clic. */
.orbit-griglia:focus { outline: none; }
.orbit-griglia:focus-visible { outline: 2px solid var(--orbit-ciano-vivo); outline-offset: -2px; }

.orbit-menu-contestuale {
    min-width: 216px;
    padding: .3rem;
    background: var(--orbit-superficie);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio);
    box-shadow: var(--orbit-ombra-menu);
}

.orbit-tendina__voce--distruttiva { color: var(--orbit-critico); }
.orbit-tendina__voce--distruttiva:hover { background: var(--orbit-critico); color: #fff; }
.orbit-tendina__voce--distruttiva:hover .orbit-tendina__nota { color: rgba(255, 255, 255, .8); }

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

.orbit-tendina__separatore {
    height: 1px;
    margin: .3rem .4rem;
    background: var(--orbit-bordo);
}

.orbit-tendina__titolo {
    padding: .45rem .6rem .25rem;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--orbit-testo-tenue);
}

/* Zona utente a destra */
.orbit-topbar__destra {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-inline-start: auto;
}

.orbit-icona-azione {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--orbit-raggio-piccolo);
    background: transparent;
    color: var(--orbit-su-notte);
    cursor: pointer;
    transition: background var(--orbit-transizione);
}
.orbit-icona-azione:hover { background: rgba(255, 255, 255, .09); }
.orbit-icona-azione .rzi { font-size: 1.15rem; }

.orbit-utente {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 30px;
    padding-inline: .5rem .7rem;
    border: 0;
    border-radius: var(--orbit-raggio-piccolo);
    background: rgba(255, 255, 255, .07);
    color: var(--orbit-su-notte);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
    transition: background var(--orbit-transizione);
}
.orbit-utente:hover { background: rgba(255, 255, 255, .13); }

.orbit-utente__iniziali {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--orbit-ciano);
    color: var(--orbit-su-ciano);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.orbit-utente__nome { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------- Desktop -- */

.orbit-desktop {
    position: relative;
    overflow: hidden;
    background-color: var(--orbit-fondo);
    background-image:
        radial-gradient(circle at 1px 1px, var(--orbit-fondo-trama) 1px, transparent 0);
    background-size: 22px 22px;
    touch-action: none;
}

/* Filigrana orbitale al centro del desktop vuoto */
.orbit-desktop__filigrana {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .75rem;
    color: var(--orbit-testo-tenue);
    pointer-events: none;
    user-select: none;
}
.orbit-desktop__filigrana svg { width: 92px; height: 92px; opacity: .5; }
.orbit-desktop__filigrana p { margin: 0; font-size: .82rem; }
.orbit-desktop__filigrana kbd {
    padding: .1em .4em;
    border: 1px solid var(--orbit-bordo-forte);
    border-radius: 4px;
    font-family: inherit;
    font-size: .95em;
}

/* Anteprima di snap */
.orbit-snap {
    position: absolute;
    z-index: 900;
    border: 2px solid var(--orbit-ciano-vivo);
    border-radius: var(--orbit-raggio);
    background: var(--orbit-ciano-velo);
    pointer-events: none;
    transition: all 90ms ease-out;
}

/* -------------------------------------------------------------- Finestra -- */

.orbit-finestra {
    position: absolute;
    display: flex;
    flex-direction: column;
    min-width: 320px;
    min-height: 180px;
    background: var(--orbit-superficie);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio);
    box-shadow: var(--orbit-ombra-finestra);
    overflow: hidden;

    /* Ingrandimento, ripristino, snap e disposizione automatica cambiano la
       geometria in un colpo: senza transizione la finestra salta. */
    transition:
        left   200ms cubic-bezier(.2, .8, .3, 1),
        top    200ms cubic-bezier(.2, .8, .3, 1),
        width  200ms cubic-bezier(.2, .8, .3, 1),
        height 200ms cubic-bezier(.2, .8, .3, 1),
        opacity 200ms ease,
        transform 220ms cubic-bezier(.34, .06, .2, 1),
        /* visibility va elencata: senza di lei passa a hidden immediatamente e
           l'animazione di uscita non si vede. Elencata, il passaggio a hidden
           viene rimandato alla fine della transizione. */
        visibility 220ms,
        box-shadow var(--orbit-transizione);
}

.orbit-finestra--attiva {
    border-color: var(--orbit-bordo-forte);
    box-shadow: var(--orbit-ombra-attiva);
}

.orbit-finestra--massimizzata { border-radius: 0; border-width: 0 0 1px 0; }
.orbit-finestra--trascinamento { transition: none; user-select: none; }
.orbit-finestra--trascinamento .orbit-finestra__corpo { pointer-events: none; }

/* Barra del titolo */
.orbit-finestra__barra {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 34px;
    padding-inline: .65rem .25rem;
    background: var(--orbit-barra-inattiva-bg);
    border-bottom: 1px solid var(--orbit-bordo);
    cursor: grab;
    user-select: none;
    flex: none;
}

.orbit-finestra--trascinamento .orbit-finestra__barra { cursor: grabbing; }
.orbit-finestra--massimizzata .orbit-finestra__barra { cursor: default; }

.orbit-finestra--attiva .orbit-finestra__barra {
    /* Il velo del colore dell'AREA sul fondo del tema: la barra e' colorata, e il
       colore dice di che famiglia e' la finestra invece di essere decorazione.
       Sta qui e non fra i token perche' `--orbit-accento-area` esiste solo su un
       elemento che porta `data-area`, e su :root varrebbe sempre lo stesso. */
    background: color-mix(in srgb,
        var(--orbit-accento-area, var(--orbit-ciano)) 12%,
        var(--orbit-barra-attiva-bg));
    color: var(--orbit-barra-attiva-testo);
    border-bottom: 2px solid var(--orbit-barra-attiva-linea);
}

.orbit-finestra__icona { font-size: 1.05rem; color: var(--orbit-testo-tenue); flex: none; }
.orbit-finestra--attiva .orbit-finestra__icona { color: var(--orbit-ciano-testo); }

.orbit-finestra__titolo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 500;
    color: var(--orbit-testo-soft);
}
.orbit-finestra--attiva .orbit-finestra__titolo { color: var(--orbit-barra-attiva-testo); font-weight: 600; }

.orbit-finestra__comandi { display: flex; align-items: center; gap: 1px; flex: none; }

.orbit-finestra__comando {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    border: 0;
    border-radius: var(--orbit-raggio-piccolo);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background var(--orbit-transizione), color var(--orbit-transizione);
}
.orbit-finestra__comando .rzi { font-size: .95rem; }
.orbit-finestra__comando:hover { background: rgba(127, 143, 165, .22); }
.orbit-finestra__comando--chiudi:hover { background: var(--orbit-critico); color: #fff; }

/* Corpo */
.orbit-finestra__corpo {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
    background: var(--orbit-superficie);
}

.orbit-finestra__corpo--compatto { padding: 0; }

/* Maniglie di ridimensionamento */
.orbit-ridim { position: absolute; z-index: 2; }
.orbit-ridim--n  { inset-block-start: -3px; inset-inline: 10px; height: 7px; cursor: ns-resize; }
.orbit-ridim--s  { inset-block-end: -3px;   inset-inline: 10px; height: 7px; cursor: ns-resize; }
.orbit-ridim--w  { inset-inline-start: -3px; inset-block: 10px; width: 7px;  cursor: ew-resize; }
.orbit-ridim--e  { inset-inline-end: -3px;   inset-block: 10px; width: 7px;  cursor: ew-resize; }
.orbit-ridim--nw { inset-block-start: -3px; inset-inline-start: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
.orbit-ridim--ne { inset-block-start: -3px; inset-inline-end: -3px;   width: 14px; height: 14px; cursor: nesw-resize; }
.orbit-ridim--sw { inset-block-end: -3px;   inset-inline-start: -3px; width: 14px; height: 14px; cursor: nesw-resize; }
.orbit-ridim--se { inset-block-end: -3px;   inset-inline-end: -3px;   width: 14px; height: 14px; cursor: nwse-resize; }

.orbit-finestra--massimizzata .orbit-ridim { display: none; }

/* -------------------------------------------------------------- Taskbar -- */

.orbit-taskbar {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding-inline: .5rem;
    background: var(--orbit-notte);
    color: var(--orbit-su-notte);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
    z-index: 2000;
}

.orbit-taskbar__vuota {
    font-size: .76rem;
    color: var(--orbit-su-notte-soft);
    padding-inline-start: .25rem;
}

/* La voce e la sua chiusura stanno affiancate in un contenitore: la x compare
   passando il mouse sulla voce intera, non solo sopra di se stessa. Lo spazio a
   destra e' riservato sempre, anche quando la x non si vede: comparendo non
   deve allargare il pulsante e spostare le voci accanto. */
.orbit-taskbar__elemento {
    position: relative;
    display: inline-flex;
}

.orbit-taskbar__chiudi {
    position: absolute;
    inset-inline-end: 3px;
    inset-block-start: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    padding: 0;
    border: 0;
    border-radius: var(--orbit-raggio-piccolo);
    background: transparent;
    color: var(--orbit-su-notte-soft);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--orbit-transizione), background var(--orbit-transizione),
                color var(--orbit-transizione);
}

.orbit-taskbar__chiudi .rzi { font-size: 13px; }

.orbit-taskbar__elemento:hover .orbit-taskbar__chiudi,
.orbit-taskbar__chiudi:focus-visible {
    opacity: 1;
}

/* Lo stesso colore del pulsante di chiusura sulla barra del titolo: chiudere e'
   chiudere, e si riconosce dal colore prima che dalla posizione. */
.orbit-taskbar__chiudi:hover {
    background: var(--orbit-critico);
    color: #fff;
}

/* Chi non vuole animazioni la vede comparire di colpo, non e' un problema. */
@media (prefers-reduced-motion: reduce) {
    .orbit-taskbar__chiudi { transition: none; }
}

.orbit-taskbar__voce {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 210px;
    height: 26px;
    padding-inline: .6rem 1.45rem;
    border: 0;
    border-block-end: 2px solid transparent;
    border-radius: var(--orbit-raggio-piccolo);
    background: rgba(255, 255, 255, .06);
    color: var(--orbit-su-notte-soft);
    font: inherit;
    font-size: .76rem;
    cursor: pointer;
    transition: background var(--orbit-transizione), color var(--orbit-transizione);
}
.orbit-taskbar__voce:hover { background: rgba(255, 255, 255, .13); color: var(--orbit-su-notte); }
.orbit-taskbar__voce--attiva {
    background: rgba(255, 255, 255, .15);
    border-block-end-color: var(--orbit-ciano-vivo);
    color: var(--orbit-su-notte);
}
.orbit-taskbar__voce--minimizzata { opacity: .65; }
.orbit-taskbar__voce .rzi { font-size: .95rem; flex: none; }
.orbit-taskbar__voce span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.orbit-taskbar__stato {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-inline-start: auto;
    padding-inline-start: .5rem;
    font-size: .7rem;
    color: var(--orbit-su-notte-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.orbit-taskbar__separatore { opacity: .5; }

/* ------------------------------------------------------ Utilità di pagina -- */

.orbit-intestazione {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-block-end: 1rem;
}

.orbit-intestazione__testo { flex: 1; min-width: 0; }

.orbit-intestazione h2 {
    margin: 0 0 .15rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--orbit-testo);
}

.orbit-intestazione p {
    margin: 0;
    font-size: .8rem;
    color: var(--orbit-testo-soft);
}

.orbit-numerico { font-variant-numeric: tabular-nums; }

/* Le tabelle dense non devono mai far scorrere la finestra in orizzontale */
.orbit-scroll-x { overflow-x: auto; }

/* Il nome per esteso costa fino a 160 punti e le iniziali dicono gia' chi sei: sotto
   i 1200 sparisce, e la barra sta su una riga sola molto piu' a lungo. */
@media (max-width: 1200px) {
    .orbit-utente__nome { display: none; }
}

@media (max-width: 720px) {
    .orbit-menu__voce span:not(.orbit-menu__freccia) { display: none; }
    .orbit-utente__nome { display: none; }
}

.orbit-tendina__separatore:first-child { display: none; }

.orbit-tendina__versione {
    padding: 0 .6rem .35rem;
    font-size: .68rem;
    color: var(--orbit-testo-tenue);
}

/* ------------------------------------------- Animazioni delle finestre -- */

@keyframes orbit-finestra-entra {
    from { opacity: 0; transform: scale(.97) translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes orbit-finestra-esce {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: scale(.97) translateY(6px); }
}

.orbit-finestra {
    /* Parte all'inserimento nel DOM e al ritorno da ridotta a icona, perche'
       display passa da none a flex. */
    animation: orbit-finestra-entra 170ms cubic-bezier(.2, .8, .3, 1);
    transform-origin: 50% 0;
}

/* Ridotta a icona: resta nel DOM con la sua geometria, cosi' il contenuto
   (filtri, testo digitato) sopravvive e il ritorno dalla taskbar e' animato.
   La trasformazione la scrive OrbitFinestra e rimpicciolisce la finestra fino al
   suo pulsante nella taskbar; quella qui e' il ripiego se la misura non arriva. */
.orbit-finestra--ridotta {
    opacity: 0;
    visibility: hidden;
    transform: scale(.96) translateY(10px);
    pointer-events: none;
}

/* L'origine in alto a sinistra e' quella su cui il JS calcola lo scostamento. */
.orbit-finestra { transform-origin: 0 0; }

.orbit-finestra--chiusura {
    /* La durata deve restare allineata a GestoreFinestre.DurataChiusura. */
    animation: orbit-finestra-esce 140ms ease-in forwards;
    pointer-events: none;
}

/* Durante il trascinamento l'animazione darebbe uno scatto. */
.orbit-finestra--trascinamento { animation: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
    .orbit-finestra,
    .orbit-finestra--chiusura,
    .orbit-tendina { animation: none; }

    .orbit-finestra { transition: box-shadow var(--orbit-transizione); }
}

/* ----------------------------------------- Selettore del condominio ------- */

.orbit-selettore {
    display: flex;
    align-items: center;
    gap: .45rem;
    max-width: 280px;
    height: 30px;
    padding-inline: .6rem .5rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--orbit-raggio-piccolo);
    background: rgba(255, 255, 255, .08);
    color: var(--orbit-su-notte);
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--orbit-transizione), border-color var(--orbit-transizione);
}

.orbit-selettore:hover { background: rgba(255, 255, 255, .15); }
.orbit-selettore[aria-expanded="true"] { border-color: var(--orbit-ciano-vivo); }
.orbit-selettore .rzi { font-size: 1.05rem; color: var(--orbit-ciano-chiaro); flex: none; }

.orbit-selettore__nome { overflow: hidden; text-overflow: ellipsis; }

/* Nessun condominio scelto: si vede che manca una decisione. */
.orbit-selettore--vuoto {
    border-style: dashed;
    border-color: var(--orbit-ciano-vivo);
    color: var(--orbit-su-notte-soft);
    font-weight: 400;
}

.orbit-selettore--vuoto .rzi { color: var(--orbit-su-notte-soft); }

.orbit-tendina--larga { min-width: 300px; }

.orbit-tendina__voce--corrente { background: var(--orbit-ciano-velo); font-weight: 600; }

.orbit-tendina__voce .orbit-tendina__sotto {
    display: block;
    font-size: .68rem;
    font-weight: 400;
    color: var(--orbit-testo-tenue);
}

.orbit-tendina__vuoto {
    padding: .6rem;
    font-size: .78rem;
    color: var(--orbit-testo-tenue);
    text-align: center;
}

/* Il cruscotto e' tornato una finestra come le altre: dello sfondo del desktop
   non resta nulla, e lo spazio vuoto e' il desktop stesso. */

/* ============================================================================
   Accento per area funzionale.

   Il colore dice a quale famiglia appartiene una finestra: anagrafiche, numeri,
   assemblee, immobile, carte. Con sei schermate aperte sono sei rettangoli
   identici e il titolo bisogna leggerlo; il filetto in cima e l'icona colorata
   si vedono senza guardare.

   L'accento si risolve in un token per elemento - --orbit-accento-area - e da
   quello discendono filetto, icona e bordo del pulsante in taskbar. Una sola
   dichiarazione per area invece di tre: cosi' non possono divergere.
   ========================================================================= */
[data-area="cruscotto"]   { --orbit-accento-area: var(--orbit-area-cruscotto); }
[data-area="anagrafiche"] { --orbit-accento-area: var(--orbit-area-anagrafiche); }
[data-area="numeri"]      { --orbit-accento-area: var(--orbit-area-numeri); }
[data-area="assemblee"]   { --orbit-accento-area: var(--orbit-area-assemblee); }
[data-area="immobile"]    { --orbit-accento-area: var(--orbit-area-immobile); }
[data-area="carte"]       { --orbit-accento-area: var(--orbit-area-carte); }
[data-area="piattaforma"] { --orbit-accento-area: var(--orbit-area-piattaforma); }

/* Il filetto in cima alla finestra. Due pixel, non una fascia: deve dire di che
   famiglia si tratta senza diventare la cosa piu' visibile della schermata. */
.orbit-finestra[data-area]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--orbit-accento-area);
    border-radius: var(--orbit-raggio) var(--orbit-raggio) 0 0;
    z-index: 1;
    opacity: .55;
}

/* Sulla finestra attiva il filetto e' pieno: insieme all'ombra e' cio' che
   distingue quella su cui si sta lavorando. */
.orbit-finestra--attiva[data-area]::before { opacity: 1; }

/* L'icona nel titolo prende il colore dell'area, sempre - non solo da attiva.
   E' il segnale piu' economico che ci sia: si vede anche in mezzo a una cascata
   dove delle finestre dietro si scorge solo la barra. */
.orbit-finestra[data-area] .orbit-finestra__icona,
.orbit-finestra--attiva[data-area] .orbit-finestra__icona {
    color: var(--orbit-accento-area);
}

/* In taskbar: l'icona colorata e un bordo sul fianco. Il bordo aiuta a
   ritrovare la finestra fra dieci pulsanti quando l'etichetta e' troncata. */
.orbit-taskbar__elemento[data-area] .orbit-taskbar__voce {
    border-inline-start: 2px solid var(--orbit-accento-area);
}

.orbit-taskbar__elemento[data-area] .orbit-taskbar__voce .rz-icon,
.orbit-taskbar__elemento[data-area] .orbit-taskbar__voce i {
    color: var(--orbit-accento-area);
}

/* Nelle tendine del menu le icone sono tutte dello stesso gruppo, quindi tutte
   dello stesso colore: una colonna coerente, non un arcobaleno. Le voci
   disabilitate restano grigie - un colore acceso su qualcosa che non si puo'
   usare e' un invito sbagliato. */
.orbit-menu__gruppo[data-area] .orbit-tendina__voce:not([disabled]) .rz-icon,
.orbit-menu__gruppo[data-area] .orbit-tendina__voce:not([disabled]) i {
    color: var(--orbit-accento-area);
}

/* Il titolo della tendina prende la stessa tinta, in piccolo: lega la colonna
   di icone all'intestazione che le introduce. */
.orbit-menu__gruppo[data-area] .orbit-tendina__titolo { color: var(--orbit-accento-area); }

/* ------------------------------------------------------------------ Portale --

   Il guscio del condomino: colonna singola, pensata per il telefono.

   Non e' il gestionale con meno voci. Chi entra qui lo fa due volte l'anno, spesso in piedi,
   e vuole una pagina che scorre — niente finestre, niente taskbar, niente menu a gruppi.
   I token colore sono gli stessi del gestionale: e' lo stesso programma, e un portale che
   sembrasse di un altro fornitore farebbe dubitare che i dati siano davvero i propri.

   Nessun colore letterale: tutto passa dai token, quindi il tema scuro segue da solo. */

.orbit-portale {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--orbit-fondo);
    color: var(--orbit-testo);
}

.orbit-portale__testa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--orbit-notte);
    color: var(--orbit-su-notte);
    /* Resta in cima mentre si scorre: su una pagina lunga «Esci» deve restare a portata. */
    position: sticky;
    top: 0;
    z-index: 10;
}

.orbit-portale__marchio {
    display: inline-flex;
    align-items: center;
}

.orbit-portale__chi {
    margin-left: auto;
    font-size: .85rem;
    color: var(--orbit-su-notte-soft);
    /* Su schermo stretto il nome cede il posto al pulsante di uscita, non viceversa. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orbit-portale__esci {
    color: var(--orbit-su-notte);
    text-decoration: none;
    border: 1px solid var(--orbit-su-notte-soft);
    border-radius: var(--orbit-raggio-piccolo);
    /* Quarantaquattro punti: la misura sotto la quale un dito sbaglia bersaglio. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    flex: 0 0 auto;
}

.orbit-portale__esci:hover { background: var(--orbit-notte-alto); }

.orbit-portale__corpo {
    flex: 1;
    width: 100%;
    /* Su schermo largo il testo non si allarga oltre la riga leggibile: una riga di
       centoventi caratteri si perde fra una fine e l'inizio della successiva. */
    max-width: 760px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

.orbit-portale__titolo {
    font-size: 1.4rem;
    margin: 8px 0 16px;
}

.orbit-portale__attesa { color: var(--orbit-testo-soft); }

.orbit-portale__condominio { margin-bottom: 24px; }

.orbit-portale__condominio-titolo {
    font-size: 1.1rem;
    margin: 0 0 8px;
    color: var(--orbit-ciano-testo);
}

.orbit-portale__sezione {
    background: var(--orbit-superficie);
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio);
    padding: 16px;
    margin-bottom: 16px;
}

.orbit-portale__sezione-titolo {
    font-size: 1rem;
    margin: 0 0 12px;
    color: var(--orbit-testo);
}

.orbit-portale__elenco {
    list-style: none;
    margin: 0;
    padding: 0;
}

.orbit-portale__voce {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--orbit-bordo);
}

.orbit-portale__voce:last-child { border-bottom: none; }

.orbit-portale__voce-titolo { font-weight: 600; }

.orbit-portale__voce-nota {
    color: var(--orbit-testo-soft);
    font-size: .9rem;
}

.orbit-portale__pie {
    padding: 16px;
    text-align: center;
    color: var(--orbit-testo-tenue);
    font-size: .8rem;
}

.orbit-portale__quando { margin: 0 0 8px; }

.orbit-portale__odg {
    margin: 12px 0;
    padding-left: 20px;
    color: var(--orbit-testo-soft);
}

.orbit-portale__odg li { margin-bottom: 6px; }

.orbit-portale__scarica {
    color: var(--orbit-ciano-testo);
    /* Quarantaquattro punti anche qui: un collegamento su un telefono e' un bersaglio. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.orbit-portale__saldo { margin: 4px 0 12px; }

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

.orbit-portale__conferma { color: var(--orbit-ok); margin: 8px 0 0; }

.orbit-portale__azione {
    /* Un pulsante vero e non un link: qui si SCRIVE — si dichiara di aver ricevuto — e la
       differenza fra navigare e dichiarare deve vedersi prima di toccarlo. */
    min-height: 44px;
    padding: 0 16px;
    margin-top: 8px;
    border: 1px solid var(--orbit-ciano);
    border-radius: var(--orbit-raggio-piccolo);
    background: var(--orbit-ciano);
    color: var(--orbit-su-ciano);
    cursor: pointer;
    font: inherit;
}

.orbit-portale__azione:hover { background: var(--orbit-ciano-vivo); }

.orbit-portale__testo {
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--orbit-bordo);
    border-radius: var(--orbit-raggio-piccolo);
    background: var(--orbit-superficie-alt);
    color: var(--orbit-testo);
    font: inherit;
    /* Non si allarga oltre il riquadro: un'area di testo trascinabile in orizzontale e' il
       modo in cui una pagina comincia a scorrere di lato sul telefono. */
    resize: vertical;
}