@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

:root {
    --text: #000000;
    --background: #fdfdfd;
    --primary: #00529c;
    --secondary: #c6d9fa;
    --accent: #f7a814;

    /* Spaziatura: scala a step di 4 */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    /* Area utile dello schermo. Su iPhone la barra di stato puo' stare sopra la pagina: il
       body si scosta in alto di quanto occupa e i layout usano --app-height al posto di 100vh.
       In basso invece la pagina arriva al bordo, come nelle app native: una fascia libera per
       l'indicatore home lascerebbe una striscia vuota. Chi mette qualcosa di fisso in fondo
       aggiunge --safe-bottom. Altrove gli env() valgono 0 e non cambia nulla. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* Margine alto della pagina: la barra di stato piu' --top-extra, la fascia che iOS 26
       sfuma sotto di essa nell'app installata su iPhone in verticale (vedi .ios-status-band) */
    --top-extra: 0px;
    --top-edge: calc(var(--safe-top) + var(--top-extra));
    --app-height: calc(100vh - var(--top-edge));
}

/* dvh esclude le barre del browser mobile, che 100vh conta e che coprirebbero il fondo della pagina */
@supports (height: 100dvh) {
    :root {
        --app-height: calc(100dvh - var(--top-edge));
    }
}

/* Nell'app installata non ci sono barre del browser, e iOS 26 calcola dvh piu' corto dello
   schermo lasciando un vuoto in fondo: lvh e' l'unica unita' che arriva al bordo */
@supports (height: 100lvh) {
    @media (display-mode: standalone) {
        :root {
            --app-height: calc(100lvh - var(--top-edge));
        }
    }
}

/* Breakpoint condivisi, gli stessi usati da MainLayoutClient, NavMenu e Toolbar:
   lg 1500px   md 1000px (tablet)   sm 641px (mobile). Non introdurne altri. */

/* input[type="datetime-local"] {
    border: none;
} */

html, body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: whitesmoke;
    overflow: hidden;
}

body {
    padding: var(--top-edge) var(--safe-right) 0 var(--safe-left);

    /* Colore della striscia sotto la barra di stato: quello in cima alla pagina, cioe' il
       bianco della navmenu o il blu scuro di login e home a tile col tema dark */
    --status-band: #fff;
}

/* Login e home a tile col tema dark: lo sfumato blu e' dello sfondo del body, quindi continua
   sotto la barra di stato senza stacchi; la fascia e' trasparente e non serve margine in
   piu', perche' la sfocatura di iOS su uno sfondo sfumato non si nota. Col tema light la
   fascia resta bianca come la pagina. */
html:has(.home-portal.dark),
html:has(.guida-pubblica.dark),
html:has(.login-page:not(.light)) {
    --top-extra: 0px;
}

html:has(.home-portal.dark) body,
html:has(.guida-pubblica.dark) body,
html:has(.login-page:not(.light)) body {
    --status-band: transparent;
    background: linear-gradient(145deg, #0a1a3a 0%, #0d2d6e 40%, #1a4fa8 75%, #1e63c8 100%);
    background-color: #0a1a3a;
}

html:has(.home-portal.dark) .home-portal.dark,
html:has(.guida-pubblica.dark) .guida-pubblica.dark,
html:has(.login-page:not(.light)) .login-page:not(.light) {
    background: transparent;
}

/* iOS 26 sfuma il bordo alto dell'app installata (effetto vetro sotto la barra di stato) e
   nessuna impostazione lo spegne. Due accorgimenti, solo su iOS:
   - una fascia fissa e opaca in cima (.ios-status-band, elemento vero in App.razor): iOS ne
     prende il colore invece di sfocare la pagina;
   - nell'app installata in verticale la fascia scende di 1rem oltre la barra di stato e la
     pagina comincia sotto, cosi' la parte piu' marcata della sfumatura cade sul colore uniforme
     della fascia. */
.ios-status-band {
    display: none;
}

@supports (-webkit-touch-callout: none) {
    .ios-status-band {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: max(1px, var(--top-edge));
        z-index: 2147483000;
        background: var(--status-band);
        pointer-events: none;
    }

    @media (display-mode: standalone) and (orientation: portrait) {
        :root {
            --top-extra: 1rem;
        }
    }

    /* Altezza vera dello spazio visibile, scritta da js/pwa.js (--altezza-vista = innerHeight):
       su iOS 26 dvh e lvh non coincidono con lo spazio visibile (barra di Safari sopra la pagina,
       dvh piu' corto dello schermo nell'app installata) e il fondo delle pagine finiva fuori
       schermo, dove nessuno scorrimento lo raggiunge. Prima che lo script giri vale dvh. */
    :root {
        --app-height: calc(var(--altezza-vista, 100dvh) - var(--top-edge));
    }

    /* A fine corsa iOS passa il gesto alla pagina, che rimbalza e puo' restare spostata con la
       barra in alto fuori schermo: il gesto si ferma nell'area che scorre e la pagina non rimbalza.
       La tastiera che sposta il documento la rimette a posto js/pwa.js (Tastiera su iOS). */
    html,
    body {
        overscroll-behavior: none;
    }

    main,
    .cms-grid,
    .cms-info-card,
    .nav-links,
    .rz-data-grid-data {
        overscroll-behavior-y: contain;
    }
}

h1:focus {
    outline: none;
}

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

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

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

.content {
    padding-top: 1.1rem;
}

.layout-container {
    display: flex;
    flex-direction: row;
}

.fluent-toast-title {
    color: red !important;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-dynamic {
    flex: 1;
}

.page-with-title {
    position: relative;
    width: 100%;
    height: calc(var(--app-height) - 50px);
    display: flex;
    padding: 10px;
    padding-top: 0px;
}

.page-no-title {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 10px;
}

.fluent-datepicker-popup {
    width: max-content;
}

button {
    transition: box-shadow 0.1s ease-out;
}

    button:hover {
        box-shadow: 0px 2px 3px 0px #555;
    }

    button:active {
        box-shadow: inset 0px 0px 3px 0px #777;
    }

input[type="datetime-local"],
input[type="date"],
select {
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    font-weight: initial;
    font-variation-settings: var(--type-ramp-base-font-variations);
    color: var(--neutral-foreground-rest);
    fill: currentcolor;
    user-select: none;
    position: relative;
    margin: 0;
    border: 1px solid var(--ds-input-border-color, gainsboro);
    border-radius: var(--ds-input-radius, 4px);
    height: var(--ds-input-height, 33px);
    padding: 0 var(--ds-input-padding-inline, calc(var(--design-unit) * 2px + 1px));
}

    input[type="datetime-local"]::placeholder,
    input[type="date"]::placeholder,
    select::placeholder {
        color: gray;
    }

input:focus-visible {
    outline-offset: 0px;
    outline: none;
}

input::after {
    width: 0;
    content: "";
    position: absolute;
    height: calc(var(--focus-stroke-width) * 1px);
    bottom: 0px;
    left: 50%;
    border-bottom: calc(var(--focus-stroke-width) * 1px) solid var(--accent-fill-rest);
    border-bottom-left-radius: calc(var(--control-corner-radius) * 1px);
    border-bottom-right-radius: calc(var(--control-corner-radius) * 1px);
    z-index: 2;
}

input:focus-visible::after {
    transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1) 0s;
    width: 100%;
    border-radius: 0;
    left: 0;
}

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

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

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

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

fluent-button::part(control) {
    width: 100%;
}

fluent-button::part(content) {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fluent-dialog-header > fluent-button[aria-label="Close"] {
    width: 50px !important;
    height: 50px !important;
}

.fluent-dialog-header > fluent-button[aria-label="Close"]::part(control):not(:hover, :active) {
    background: none;
}

.fluent-dialog-header > fluent-button[aria-label="Close"] svg {
    width: 28px !important;
}

.fluent-dialog-footer > fluent-button {
    min-width: 100px;
    min-height: 50px;
}


/* ----- Custom scrollbar ----- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    -webkit-border-radius: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    -webkit-border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    -webkit-border-radius: 5px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }


/* ============================================================================
   Sezioni informative: intestazione e righe label/valore

   Nate nella pagina Information e riusate dai layout CMS statici. Stanno qui, e
   non nel css del CMS, perche' le usa anche una pagina dello standard.
   ============================================================================ */

/* Intestazione di sezione: icona piu' titolo */
.info-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid lightgray;
    margin-bottom: 12px;
}

.info-section-header h3 {
    margin: 0;
    text-align: left;
}

/* Corpo con le righe dati */
.info-section-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.info-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 5px;
}

.info-label {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint, gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.info-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

/* Pulsanti flottanti fissi, quattro in tutto: segnalazione bug (rosso) e Guida (accento) su ogni pagina, il posto della
   pagina (PulsanteFlottante, neutro scuro, al massimo uno per pagina) e, nelle pagine CMS, la matita "Modifica pagina"
   (cms-pagina-modifica in cms.css). Chi ne tocca uno controlli gli altri.
   Desktop: bug in basso a destra (right 24), Guida alla sua sinistra alla stessa altezza (right 72), posto della pagina
   ancora a sinistra (right 120), matita sopra il bug (bottom 72, right 18). Sotto i 1000 px, dove il menu e' un cassetto:
   bug in basso a sinistra e sollevato (left 12, bottom 76) per non coprire la barra delle azioni in basso della vista da
   telefono, Guida alla sua destra (left 60), posto della pagina ancora a destra (left 108), matita nell'angolo in basso
   a destra (right 24, bottom 24) */

/* Pulsante di segnalazione bug (App.razor, segnalazione.js): rotondo, rosso */
.set-segnala-bug {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1100;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #c62828;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: .85;
}

.set-segnala-bug:hover,
.set-segnala-bug:focus-visible {
    opacity: 1;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Pulsante "?" della Guida (App.razor, guida.js): stessa forma del bug, colore d'accento */
.set-guida-aiuto {
    position: fixed;
    right: 72px;
    bottom: 24px;
    z-index: 1100;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--accent-fill-rest, #0f6cbd);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: .85;
}

.set-guida-aiuto:hover,
.set-guida-aiuto:focus-visible {
    opacity: 1;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Finestra delle istruzioni della pagina (guida.js): <dialog> modale creato dallo script a ogni apertura, come quello
   della segnalazione, quindi funziona anche sulle pagine senza Blazor. Il contenuto e' l'HTML di GuidaContenuto, con gli
   stili del componente (webapp_base_blazor.Client.styles.css); la finestra scorre nel contenuto, non nel suo insieme */
.set-guida-finestra {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: var(--ds-radius, 8px);
    background: var(--neutral-layer-1, #ffffff);
    color: var(--neutral-foreground-rest, #1f2a37);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
    overflow: hidden;
}

.set-guida-finestra[open] {
    display: flex;
}

.set-guida-finestra::backdrop {
    background: rgba(0, 0, 0, .45);
}

.set-guida-finestra__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 12px);
    width: 100%;
    min-height: 0;
    max-height: calc(100vh - 32px);
    padding: var(--sp-4, 16px);
    box-sizing: border-box;
}

.set-guida-finestra__titolo {
    margin: 0;
    font-size: var(--fs-h2, 1.2rem);
    font-weight: var(--fw-semibold, 600);
}

.set-guida-finestra__contenuto {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

.set-guida-finestra__contenuto:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #00529c);
    outline-offset: 2px;
}

.set-guida-finestra__contenuto .guida-contenuto {
    max-width: none;
}

.set-guida-finestra__nota {
    margin: 0;
    color: var(--ds-text-muted, #5a6b7a);
}

.set-guida-finestra__nota--errore {
    color: var(--ds-danger, #d23a3a);
}

.set-guida-finestra__azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2, 8px);
}

.set-guida-finestra__azione {
    padding: var(--sp-2, 8px) var(--sp-4, 16px);
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: var(--control-corner-radius, 4px);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.set-guida-finestra__azione--primaria {
    border-color: transparent;
    background: var(--accent-fill-rest, #00529c);
    color: var(--foreground-on-accent-rest, #ffffff);
}

.set-guida-finestra__azione:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #00529c);
    outline-offset: 2px;
}

@media (max-width: 1000px) {
    /* sotto i 1000 px la finestra occupa quasi tutto lo schermo e i pulsanti vanno a tutta riga */
    .set-guida-finestra {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }

    .set-guida-finestra__corpo {
        max-height: calc(100vh - 24px);
    }

    .set-guida-finestra__azioni {
        flex-direction: column-reverse;
    }

    .set-guida-finestra__azione {
        width: 100%;
    }
}
/* Pulsante della pagina (PulsanteFlottante.razor): stessa forma del bug, grigio scuro neutro, al massimo uno per
   pagina. Sta due posti a sinistra del bug (right 120): il posto in mezzo (right 72) e' del pulsante della Guida del
   ramo guida. Sotto i 1000 px sta a destra del bug, lasciando libero il posto della Guida (left 108) */
.set-pulsante-flottante {
    position: fixed;
    right: 120px;
    bottom: 24px;
    z-index: 1100;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #424242;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: .85;
}

.set-pulsante-flottante:hover,
.set-pulsante-flottante:focus-visible {
    opacity: 1;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

@media (max-width: 1000px) {
    .set-segnala-bug {
        right: auto;
        left: 12px;
        bottom: 76px;
    }

    .set-guida-aiuto {
        right: auto;
        left: 60px;
        bottom: 76px;
    }

    .set-pulsante-flottante {
        right: auto;
        left: 108px;
        bottom: 76px;
    }
}

/* Finestra di invio della segnalazione (segnalazione.js): <dialog> modale creato dallo script a ogni apertura, quindi
   funziona anche sulle pagine senza Blazor (accesso, recupero password). I colori seguono il tema (token Fluent) */
.set-segnala-finestra {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: var(--sp-4, 16px);
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: var(--ds-radius, 8px);
    background: var(--neutral-layer-1, #ffffff);
    color: var(--neutral-foreground-rest, #1f2a37);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
    overflow: auto;
}

.set-segnala-finestra::backdrop {
    background: rgba(0, 0, 0, .45);
}

.set-segnala-titolo {
    margin: 0 0 var(--sp-3, 12px);
    font-size: var(--fs-h2, 1.2rem);
    font-weight: var(--fw-semibold, 600);
}

.set-segnala-gruppo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1, 4px);
    margin-bottom: var(--sp-3, 12px);
}

.set-segnala-gruppo[hidden] {
    display: none;
}

.set-segnala-obbligatorio {
    color: var(--ds-danger, #d23a3a);
}

.set-segnala-campo {
    width: 100%;
    box-sizing: border-box;
    padding: var(--sp-2, 8px);
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--neutral-fill-input-rest, transparent);
    color: inherit;
    font: inherit;
    resize: vertical;
}

.set-segnala-campo:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #00529c);
    outline-offset: 1px;
}

.set-segnala-informazioni {
    font-family: Consolas, Menlo, monospace;
    font-size: .8rem;
    opacity: .85;
}

.set-segnala-dettagli {
    margin-bottom: var(--sp-3, 12px);
}

.set-segnala-dettagli summary {
    cursor: pointer;
}

.set-segnala-nota {
    margin: var(--sp-2, 8px) 0;
    font-size: var(--fs-caption, .82rem);
    color: var(--ds-text-muted, #5a6b7a);
}

.set-segnala-esito {
    margin-bottom: var(--sp-3, 12px);
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    border-radius: var(--control-corner-radius, 4px);
    background: var(--ds-success-soft, #d6f5e3);
    color: var(--ds-text, #1f2a37);
}

.set-segnala-esito[hidden] {
    display: none;
}

.set-segnala-esito--errore {
    background: var(--ds-danger-soft, #fbe3e3);
}

.set-segnala-azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2, 8px);
}

.set-segnala-azione {
    padding: var(--sp-2, 8px) var(--sp-4, 16px);
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: var(--control-corner-radius, 4px);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.set-segnala-azione--primaria {
    border-color: transparent;
    background: var(--accent-fill-rest, #00529c);
    color: var(--foreground-on-accent-rest, #ffffff);
}

.set-segnala-azione:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.set-segnala-azione:focus-visible {
    outline: 2px solid var(--accent-fill-rest, #00529c);
    outline-offset: 2px;
}

@media (max-width: 1000px) {
    /* sotto i 1000 px la finestra occupa quasi tutta la larghezza e i pulsanti vanno a tutta riga */
    .set-segnala-finestra {
        width: calc(100vw - 24px);
    }

    .set-segnala-azioni {
        flex-direction: column-reverse;
    }

    .set-segnala-azione {
        width: 100%;
    }
}