/* ==========================================================================
   Strati grafici della scena.

   Erano in _login_temi.css insieme alle strutture alternative; rimosse
   quelle, qui restano solo i pezzi che il tema corporate usa davvero:
   il canvas del reticolo e le masse di colore (.tema_aurora) con le loro
   derive. I nomi restano quelli originali perche' li usa anche il markup.
   ========================================================================== */
.image_container > canvas,
.image_container > .tema_strato {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Nascosti finche' il tema non li accende. */
.tema_strato,
#tema_canvas,
.tema_pannello { display: none; }

.tema_aurora { overflow: hidden; }
.tema_aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    aspect-ratio: 1;
    mix-blend-mode: screen;
}

/* Derive lente delle masse: ognuna segue una traiettoria diversa, cosi'
   il fondo non si ripete mai in modo riconoscibile. */
@keyframes temaDerivaA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(16%, 14%) scale(1.16); }
}
@keyframes temaDerivaB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-18%, -12%) scale(1.22); }
}
@keyframes temaDerivaC {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-14%, 18%) scale(.86); }
}

/* Contenuti sovrapposti alla scena (il blocco del marchio). */
.tema_pannello {
    position: absolute;
    inset: 0;
    z-index: 4;
    padding: 34px 38px;
    pointer-events: none;
    color: #fff;
}

/* ==========================================================================
   Login corporate.

   Impostazione da software aziendale serio: nessuno sfondo decorativo,
   nessuna animazione d'effetto, nessun canvas. Quello che regge la pagina
   e' la tipografia, lo spazio bianco e un solo colore d'accento.

   Regole che si e' scelto di seguire:
     - un accento solo (il blu del prodotto), mai gradienti arcobaleno
     - superfici piatte: niente vetro, niente ombre diffuse colorate
     - il movimento esiste solo dove serve a capire (fuoco, errore, attesa)
     - il pannello di sinistra e' un blocco di colore fermo con il marchio,
       non una scena

   Si attiva con <body data-tema="corporate">.
   ========================================================================== */

body[data-tema="corporate"] {
    /* La colonna del form e' bianca, quindi il form e' scuro-su-chiaro; la
       scena a sinistra resta scura e ha i suoi colori piu' sotto. */
    --cp-colonna: #ffffff;
    --cp-fondo: #ffffff;
    --cp-fondo-tenue: #f5f7fa;
    --cp-testo: #14181f;
    --cp-testo-tenue: #5b6472;
    --cp-bordo: #dfe3e9;
    --cp-bordo-forte: #c3cad4;
    --cp-accento: #0b66dd;
    --cp-accento-scuro: #0a55b8;
    --cp-accento-velo: rgba(11, 102, 221, .14);
    --cp-errore: #c0392f;
    --cp-errore-velo: #fdf1f0;
    --cp-ok: #0f7a45;
    --cp-ok-velo: #f0f9f4;

    /* Fondo della scena, sotto la griglia. */
    --cp-marchio-fondo: #080c13;
    --cp-marchio-testo: #ffffff;

    /* I campi sulla colonna bianca: appena staccati dal fondo. */
    --cp-campo: #fbfcfd;

    /* Palette neon: gli stessi colori dei bagliori tornano nelle icone
       della griglia, cosi' fondo e primo piano parlano la stessa lingua.
       Sono saturi e luminosi come le insegne notturne giapponesi, ma
       vivono su fondo quasi nero, quindi non stancano. */
    --cp-neon-ciano: #00d9ff;
    --cp-neon-verde: #00ff9c;
    --cp-neon-viola: #a855ff;
    --cp-neon-magenta: #ff2d95;
    --cp-neon-ambra: #ffb02e;
    --cp-neon-rosa: #ff5fa2;
}

/* --------------------------------------------------------------------------
   Impianto: due colonne, il form leggermente piu' stretto del marchio.
   -------------------------------------------------------------------------- */
/* Tipografia di sistema: e' quella dei prodotti che si vogliono somigliare
   (San Francisco su Mac, Segoe su Windows, Inter/Roboto altrove). L'Exo 2 del
   template base e' condensato e squadra male a testo grande. */
body[data-tema="corporate"] .login_page {
    background: var(--cp-fondo);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto,
                 'Helvetica Neue', Arial, sans-serif;
}
body[data-tema="corporate"] .login_form,
body[data-tema="corporate"] .login_form input,
body[data-tema="corporate"] .login_form button,
body[data-tema="corporate"] .tema_corporate {
    font-family: inherit;
}

/* La scena occupa tutta la pagina: lo sfondo scuro e la griglia passano
   anche sotto il form, che ci galleggia sopra come scheda di vetro. */
body[data-tema="corporate"] .image_container {
    position: absolute;
    inset: 0;
    flex: none;
    width: 100%;
    height: 100%;
    background: var(--cp-marchio-fondo);
    box-shadow: none;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
}

/* Il titolo grande del template base non serve: il marchio e' nel pannello. */
body[data-tema="corporate"] .image_container h4 { display: none; }

/* La griglia sta sopra il gradiente, sotto i contenuti. */
body[data-tema="corporate"] #tema_canvas { display: block; z-index: 2; }

/* --------------------------------------------------------------------------
   Bagliori di colore sotto la griglia.

   Quattro masse molto sfocate - blu, verde, viola, fuxia - che derivano
   lentamente su fondo scuro. Non devono leggersi come "sfondo colorato":
   restano sotto soglia e affiorano solo a tratti, quando due si
   sovrappongono. Per questo opacita' bassa e sfocatura molto ampia.

   Si riusa lo strato .tema_aurora che esiste gia' nel markup (tre <i>),
   piu' uno pseudo-elemento per la quarta massa.
   -------------------------------------------------------------------------- */
body[data-tema="corporate"] .tema_aurora {
    display: block;
    z-index: 1;
    opacity: .58;
    /* Il colore si somma al fondo invece di coprirlo: e' questo che da'
       l'effetto "bagliore" invece di "macchia". */
    mix-blend-mode: screen;
}

/* Le masse fanno due cose insieme: derivano (temaDeriva*) e respirano
   (cpRespiro, che pulsa opacita' e scala). I due cicli hanno durate
   diverse e primi fra loro, cosi' non vanno mai in fase e il respiro non
   diventa un battito regolare. */
body[data-tema="corporate"] .tema_aurora i {
    /* Sfocatura ampia: i bordi non devono mai leggersi come forme. */
    filter: blur(105px);
    opacity: .72;
    animation-duration: 34s, 11s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes cpRespiro {
    0%, 100% { opacity: .42; transform: scale(.92); }
    50%      { opacity: .95; transform: scale(1.14); }
}

/* Ciano elettrico, in alto a sinistra. */
body[data-tema="corporate"] .tema_aurora i:nth-child(1) {
    width: 46%;
    background: var(--cp-neon-ciano);
    top: -16%; left: -10%;
    animation-name: temaDerivaA, cpRespiro;
    animation-duration: 34s, 11s;
}

/* Verde acido, in basso a destra. */
body[data-tema="corporate"] .tema_aurora i:nth-child(2) {
    width: 42%;
    background: var(--cp-neon-verde);
    bottom: -18%; right: -8%;
    animation-name: temaDerivaB, cpRespiro;
    animation-duration: 41s, 13s;
    animation-delay: 0s, -4s;
}

/* Viola elettrico al centro: fa da ponte fra il ciano e il magenta. */
body[data-tema="corporate"] .tema_aurora i:nth-child(3) {
    width: 40%;
    background: var(--cp-neon-viola);
    top: 22%; left: 30%;
    animation-name: temaDerivaC, cpRespiro;
    animation-duration: 47s, 17s;
    animation-delay: 0s, -8s;
}

/* Magenta: la nota piu' calda. */
body[data-tema="corporate"] .tema_aurora::after {
    content: '';
    position: absolute;
    width: 38%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--cp-neon-magenta);
    filter: blur(105px);
    opacity: .62;
    mix-blend-mode: screen;
    bottom: 4%; left: 10%;
    animation: temaDerivaC 53s ease-in-out infinite,
               cpRespiro 19s ease-in-out -12s infinite;
}

/* A moto ridotto i bagliori restano, ma fermi: il colore e' informazione
   estetica, la deriva no. */
@media (prefers-reduced-motion: reduce) {
    body[data-tema="corporate"] .tema_aurora i,
    body[data-tema="corporate"] .tema_aurora::after {
        animation: none;
    }
}

body[data-tema="corporate"] .tema_corporate { display: flex; }

/* --------------------------------------------------------------------------
   Pannello del marchio.

   Una sola figura geometrica appena accennata come texture: due righe di
   luce diagonali a bassissimo contrasto. Non e' animata e non distrae.
   -------------------------------------------------------------------------- */
/* Il contenuto del marchio resta nella meta' sinistra: a destra ci va il
   form, e il testo non deve finirgli sotto. */
.tema_corporate {
    position: absolute;
    inset: 0 46% 0 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px 60px;
    color: var(--cp-marchio-testo);
    pointer-events: none;
}

/* Le fasce diagonali del primo impianto qui non servono piu': la texture
   e' la griglia in canvas, e sovrapporle sporca soltanto. */

.tema_corporate > * { position: relative; }

/* --- marchio in alto --- */
.tema_corporate .cp_marchio {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .01em;
}

/* Segno grafico: un quadrato con il quadrante pieno. Sostituisce il logo
   finche' non ce n'e' uno vero da mettere. */
.tema_corporate .cp_segno {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--cp-accento);
    position: relative;
    flex: 0 0 auto;
}
.tema_corporate .cp_segno::after {
    content: '';
    position: absolute;
    right: 0; bottom: 0;
    width: 50%; height: 50%;
    border-radius: 0 0 6px 0;
    background: rgba(255, 255, 255, .9);
}

/* --- messaggio centrale: e' la voce del prodotto --- */
.tema_corporate .cp_voce {
    max-width: 560px;
    margin: auto 0;
}

.tema_corporate .cp_titolo {
    font-size: clamp(2rem, 3.2vw, 2.9rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.022em;
    text-wrap: balance;
    margin-bottom: 20px;
}

.tema_corporate .cp_testo {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .66);
    max-width: 440px;
    text-wrap: pretty;
}

/* --- tre voci secche in basso: cosa c'e' dentro --- */
.tema_corporate .cp_punti {
    display: flex;
    gap: 34px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    flex-wrap: wrap;
}

.tema_corporate .cp_punto {
    font-size: .78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .52);
}

.tema_corporate .cp_punto b {
    display: block;
    font-size: .82rem;
    font-weight: 650;
    color: rgba(255, 255, 255, .88);
    margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Colonna del form: bianca, ampia, senza scheda sospesa.
   -------------------------------------------------------------------------- */
/* Colonna come in irenstorm e spedizioni, che la definiscono identica: il
   pannello bianco E' la colonna, non una scheda dentro un contenitore. Si
   adatta al contenuto invece di riempire lo spazio, e l'altezza piena meno
   il doppio del margine fa si' che i 24px valgano uguali su tutti e
   quattro i lati. */
body[data-tema="corporate"] .login_container {
    position: relative;
    z-index: 5;
    width: auto;
    max-width: 490px;
    height: calc(100% - 48px);
    margin: 24px 24px 24px auto;
    flex: 0 0 auto;
    background-color: var(--cp-colonna);
    padding: 34px 32px;
    border: none;
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .28);
    overflow-y: auto;
    /* La colonna impila la scheda e la nota informativa: senza questo il
       <p> finirebbe di fianco al form (flex-direction: row di base). */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* La scheda di vetro: semitrasparente e sfocata, si intravede la griglia
   dietro senza che i campi perdano leggibilita'. */
/* La scheda bianca: opaca, alta quanto la colonna, staccata dai bordi.
   Galleggia sulla scena invece di essere una fascia attaccata al lato. */
/* Il form non ha piu' superficie propria: e' la colonna a essere bianca.
   Larghezza fissa del contenuto, come in irenstorm: il pannello resta
   largo, i campi no. 420px invece di 380 perche' qui i due bottoni SSO
   devono stare sulla stessa riga (il widget Google chiede 220px). */
body[data-tema="corporate"] .login_form {
    width: 420px;
    max-width: 100%;
    flex: 0 0 auto;
    /* Niente "margin: auto" verticale: in colonna spingerebbe la nota
       informativa in fondo al riquadro invece che sotto al form. */
    margin: 0;
    gap: 22px;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Respiro interno.

   La scheda vive su una scena ampia: con le spaziature strette del form
   originale sembrava schiacciata. Qui i gruppi si distanziano e i campi si
   alzano, cosi' la scheda guadagna altezza senza aggiungere contenuto.
   -------------------------------------------------------------------------- */
body[data-tema="corporate"] .login_inputs { gap: 26px; }

body[data-tema="corporate"] .login_input_container { gap: 10px; }

/* Titolo e sottotitolo restano un blocco unico, staccato dai campi. */
body[data-tema="corporate"] .login_input_container:first-child {
    gap: 7px;
    margin-bottom: 4px;
}


body[data-tema="corporate"] .login_buttons { gap: 15px; }

/* Il titolo arriva maiuscolo dal template ("LOGIN", "VERIFICA IDENTITA'"):
   si riporta a maiuscoletto normale, che regge meglio a questa dimensione. */
body[data-tema="corporate"] .login_form h1 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.018em;
    color: var(--cp-testo);
    text-transform: lowercase;
}
body[data-tema="corporate"] .login_form h1::first-letter {
    text-transform: uppercase;
}

body[data-tema="corporate"] .login_form h5 {
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--cp-testo-tenue);
}

/* Etichette: piccole, neutre. Nel template sono maiuscole ("USERNAME"):
   qui tornano normali, con l'iniziale grande. */
/* Etichette come in spedizioni: piccole, maiuscole, nel colore d'accento.
   Con i campi senza bordo sono loro a dare struttura al form. */
body[data-tema="corporate"] .login_form label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--cp-accento);
    margin-left: 5px;
}

/* --- campi: bordo netto, fuoco sobrio --- */
/* Campi come in spedizioni: nessun bordo, fondo grigio freddo appena
   virato. Il fuoco non aggiunge anelli ne' cornici, cambia solo il tono:
   meno elementi grafici, la superficie fa da sola. */
body[data-tema="corporate"] .login_form input {
    padding: 13px 20px;
    border: none;
    border-radius: 10px;
    background-color: #eef0f4;
    color: var(--cp-testo);
    font-size: 1rem;
    transition: background-color .25s;
}
body[data-tema="corporate"] .login_form input::placeholder {
    color: #9aa1ad;
}
body[data-tema="corporate"] .login_form input:hover {
    background-color: #e9ecf1;
}
body[data-tema="corporate"] .login_form input:focus {
    background-color: #e4e8ee;
    box-shadow: none;
}

body[data-tema="corporate"] .login_form input::placeholder {
    color: #7d8798;
    text-transform: none;
}

body[data-tema="corporate"] .login_form input:hover {
    border-color: var(--cp-bordo-forte);
}

body[data-tema="corporate"] .login_form input:focus {
    border-color: var(--cp-accento);
    box-shadow: 0 0 0 3px var(--cp-accento-velo);
}

/* --- bottone: pieno, tinta unita, nessun gradiente --- */
/* Misure come in spedizioni: bottone alto 48 e angoli allineati ai campi. */
body[data-tema="corporate"] .login_button {
    height: 48px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    transition: background .15s, border-color .15s;
}

/* Il bottone e' l'unico elemento del form che si muove da solo: e' il
   punto dove si deve arrivare, e un riflesso lento lo segnala senza
   chiedere attenzione come farebbe un lampeggio. */
body[data-tema="corporate"] .login_button.login {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    /* Bottone come in spedizioni: gradiente scuro che scorre lentamente,
       non un colore pieno. Il movimento e' lo stesso principio dei loro
       (una tinta che si sposta), ma sui grigi scuri invece che sul rosso
       del marchio BRT. */
    background: linear-gradient(100deg,
        #14181f, #2b323d, #414a58, #2b323d, #14181f);
    background-size: 220% 100%;
    background-position: 0% 50%;
    animation: cpScorrimento 11s cubic-bezier(.45, 0, .55, 1) infinite alternate;
    box-shadow: 0 6px 18px rgba(15, 18, 24, .4);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .3s, box-shadow .3s;
}

@keyframes cpScorrimento {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Riflesso che attraversa il bottone: una banda di luce obliqua che passa
   ogni tanto, come su una superficie lucida. */
body[data-tema="corporate"] .login_button.login::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    left: -60%;
    background: linear-gradient(100deg,
        transparent, rgba(255, 255, 255, .42), transparent);
    animation: cpRiflesso 4.5s ease-in-out infinite;
    pointer-events: none;
}

/* Il riflesso e' un fratello del testo, non un livello sotto: il testo e
   l'icona vanno tenuti sopra esplicitamente. */
body[data-tema="corporate"] .login_button.login > * {
    position: relative;
    z-index: 1;
}

@keyframes cpRiflesso {
    /* La banda passa in fretta e poi resta ferma fuori campo: cosi' e' un
       riflesso occasionale e non una striscia che gira in continuazione. */
    0%       { left: -60%; }
    38%, 100% { left: 115%; }
}

/* Al passaggio si solleva, come in spedizioni. */
body[data-tema="corporate"] .login_button.login:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(11, 18, 32, .45);
}

/* Mentre la richiesta e' in volo il riflesso si ferma: l'attenzione va
   all'anello che gira, non alla decorazione. */
body[data-tema="corporate"] .login_button.login.lf_attesa::after,
body[data-tema="corporate"] .login_button.login.lf_fatto::after,
body[data-tema="corporate"] .login_button.login.lf_errore::after {
    animation: none;
    opacity: 0;
}
body[data-tema="corporate"] .login_button.login.lf_attesa,
body[data-tema="corporate"] .login_button.login.lf_fatto,
body[data-tema="corporate"] .login_button.login.lf_errore {
    animation: none;
}

/* A moto ridotto resta il colore, sparisce il movimento. */
@media (prefers-reduced-motion: reduce) {
    body[data-tema="corporate"] .login_button.login {
        animation: none;
        background-position: 22% 50%;
    }
    body[data-tema="corporate"] .login_button.login::after { display: none; }
}

body[data-tema="corporate"] .login_button.secondary {
    background: var(--cp-fondo);
    border: 1px solid var(--cp-bordo);
    color: var(--cp-testo);
}

body[data-tema="corporate"] .login_button.secondary:hover {
    background: var(--cp-fondo-tenue);
    border-color: var(--cp-bordo-forte);
}

/* --- link e testi di servizio --- */
body[data-tema="corporate"] #forgotPasswordLink {
    font-size: .84rem;
    color: var(--cp-testo-tenue);
}
body[data-tema="corporate"] #forgotPasswordLink a {
    color: var(--cp-accento);
    font-weight: 600;
}

body[data-tema="corporate"] .password_toggle { color: #97a0ad; }
body[data-tema="corporate"] .password_toggle:hover { color: var(--cp-testo); }

/* --- divisore "oppure": una riga vera, non un testo sospeso --- */
body[data-tema="corporate"] #googleSsoContainer > span {
    position: relative;
    width: 100%;
    text-align: center;
    font-size: .8rem;
    color: #97a0ad;
    opacity: 1;
}
body[data-tema="corporate"] #googleSsoContainer > span::before,
body[data-tema="corporate"] #googleSsoContainer > span::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 26px);
    height: 1px;
    background: var(--cp-bordo);
}
body[data-tema="corporate"] #googleSsoContainer > span::before { left: 0; }
body[data-tema="corporate"] #googleSsoContainer > span::after { right: 0; }

/* I token di _login_forma.css hanno una base verde-grigia: qui si riallineano
   ai grigi neutri del tema, altrimenti caselle e aloni stonano. */
body[data-tema="corporate"] .login_container {
    --lf-superficie: var(--cp-fondo);
    --lf-testo: var(--cp-testo);
    --lf-testo-tenue: var(--cp-testo-tenue);
    --lf-etichetta: var(--cp-testo-tenue);
    --lf-bordo: var(--cp-bordo);
    --lf-campo: var(--cp-fondo);
    --lf-accento: var(--cp-accento);
    --lf-accento-morbido: var(--cp-accento-velo);
    --lf-ok: var(--cp-ok);
    --lf-ok-morbido: var(--cp-ok-velo);
    --lf-errore: var(--cp-errore);
    --lf-errore-morbido: var(--cp-errore-velo);
}

/* --- 2FA: caselle coerenti con i campi --- */
body[data-tema="corporate"] .lf_otp_cella {
    border: 1px solid var(--cp-bordo);
    border-radius: 7px;
    background: var(--cp-fondo);
    color: var(--cp-testo);
    font-weight: 600;
}
body[data-tema="corporate"] .lf_otp_cella.attiva {
    border-color: var(--cp-accento);
    box-shadow: 0 0 0 3px var(--cp-accento-velo);
}
body[data-tema="corporate"] .lf_otp_cella.piena {
    border-color: var(--cp-bordo-forte);
}
body[data-tema="corporate"] .lf_otp.errore .lf_otp_cella {
    border-color: var(--cp-errore);
    background: var(--cp-errore-velo);
}
body[data-tema="corporate"] .totp_step { color: var(--cp-testo-tenue); }
body[data-tema="corporate"] .totp_step span { background: var(--cp-accento); }
body[data-tema="corporate"] .totp_qr_box {
    border: 1px solid var(--cp-bordo);
    border-radius: 10px;
    box-shadow: none;
}

/* --- messaggi --- */
body[data-tema="corporate"] .form_row_error {
    background: var(--cp-errore-velo);
    border: 1px solid #f3d3d0;
    color: var(--cp-errore);
    border-radius: 7px;
}
body[data-tema="corporate"] .form_row_info {
    background: var(--cp-ok-velo);
    border: 1px solid #cfe8dc;
    color: var(--cp-ok);
    border-radius: 7px;
}

/* Il bottone in errore resta pieno ma nel rosso del tema. */
body[data-tema="corporate"] .login_button.login.lf_errore {
    background: var(--cp-errore) !important;
}
body[data-tema="corporate"] .login_button.login.lf_fatto {
    background: var(--cp-ok) !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Elementi con colori propri nel template: vanno riportati sul tema, che e'
   scuro sempre (non serve un blocco prefers-color-scheme).
   -------------------------------------------------------------------------- */

/* Il QR va letto dalla fotocamera: resta su bianco. */
body[data-tema="corporate"] .totp_qr_box {
    background: #fff;
    border-color: var(--cp-bordo);
}

/* Il bottone Nextcloud e' disattivato e ha colori chiari propri. */
body[data-tema="corporate"] .nextcloud-sso-btn {
    background: var(--cp-campo);
    border-color: var(--cp-bordo);
    color: var(--cp-testo-tenue);
}

/* --------------------------------------------------------------------------
   Schermi stretti: il pannello del marchio si riduce a una fascia.
   -------------------------------------------------------------------------- */
/* La scena resta a tutta pagina anche qui: cambia solo dove sta il testo
   del marchio, che passa sopra il form invece che accanto. */
@media (max-width: 992px) {
    .tema_corporate {
        inset: 0 0 auto 0;
        padding: 30px 30px 0;
        justify-content: flex-start;
        gap: 16px;
    }
    .tema_corporate .cp_voce { margin: 0; }
    .tema_corporate .cp_titolo { font-size: 1.5rem; margin-bottom: 10px; }
    .tema_corporate .cp_testo { font-size: .88rem; }
    /* Le tre voci in basso non hanno piu' spazio proprio. */
    .tema_corporate .cp_punti { display: none; }

    /* In verticale la scena sta sopra e il pannello sotto: parte sotto la
       fascia del marchio e si prende la larghezza, tenendo il margine su
       tutti i lati come sul desktop. */
    body[data-tema="corporate"] .login_container {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        margin: 175px 16px 16px;
        height: auto;
        min-height: 0;
        padding: 26px 18px;
        border-radius: 20px;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    body[data-tema="corporate"] .login_form {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
        gap: 20px;
    }
    body[data-tema="corporate"] .login_inputs { gap: 20px; }
}

@media (max-width: 768px) {
    .tema_corporate { padding: 24px 22px 0; }
    .tema_corporate .cp_titolo { font-size: 1.26rem; }
    /* Sotto questa soglia il testo lungo ruberebbe tutto lo schermo. */
    .tema_corporate .cp_testo { display: none; }
    body[data-tema="corporate"] .login_form { padding: 28px 22px; }
}

/* Nota informativa in fondo alla colonna. Discreta: e' un'informazione
   dovuta, non un'azione da compiere. */
body[data-tema="corporate"] .login_privacy {
    /* Allineata alla scheda sopra, non alla colonna intera. */
    width: 420px;
    max-width: 100%;
    margin: 22px auto 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--cp-testo-tenue);
    text-align: center;
}

body[data-tema="corporate"] .login_privacy a {
    color: var(--cp-accento);
    text-decoration: none;
    white-space: nowrap;
}

body[data-tema="corporate"] .login_privacy a:hover {
    text-decoration: underline;
}