/*
 * Partecipa33 - base grafica comune (area pubblica e area dell'ente).
 * Si appoggia a Bootstrap Italia (wwwroot/lib/bootstrap-italia) e adatta i componenti DevExtreme
 * al carattere Titillium Web servito in locale. Nessuna risorsa esterna.
 */

:root {
    --p33-primario: #0066cc;
    --p33-primario-scuro: #004d99;
    --p33-testo: #1a1a1a;
    --p33-testo-secondario: #5c6f82;
    --p33-sfondo-tenue: #f5f7fa;
    --p33-bordo: #c5c7c9;
}

html, body {
    height: auto;
    min-height: 100%;
}

body {
    background-color: #fff;
    color: var(--p33-testo);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main#contenuto {
    flex: 1 0 auto;
}

main#contenuto:focus {
    outline: none;
}

/* DevExtreme con il carattere di Bootstrap Italia */
.dx-widget,
.dx-widget input,
.dx-widget textarea,
.dx-overlay-wrapper,
.dx-overlay-wrapper input,
.dx-overlay-wrapper textarea {
    font-family: "Titillium Web", Geneva, Tahoma, sans-serif;
}

.dx-widget {
    font-size: 16px;
}

/* DevExtreme 24.1 (Partecipa33#11): il segnaposto lo scrive .dx-placeholder; anche l'attributo placeholder nativo
   (che resta per i lettori di schermo) va tenuto trasparente, altrimenti input[type=text]::placeholder di
   Bootstrap Italia, piu' specifico della regola del tema, lo mostra sopra al primo */
.dx-texteditor .dx-texteditor-input::placeholder {
    color: transparent;
}

/* Focus sempre visibile, anche sui componenti DevExtreme */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.dx-state-focused.dx-button,
.dx-datagrid-focus-overlay {
    outline: 3px solid #f90 !important;
    outline-offset: 2px;
    box-shadow: none;
}

/* Classi gia usate dalle viste */
.content-block {
    margin: 0 0 1.5rem 0;
}

.dx-card {
    background-color: #fff;
    border: 1px solid var(--p33-bordo);
    border-radius: 4px;
}

.responsive-paddings {
    padding: 1rem;
}

@media (min-width: 992px) {
    .responsive-paddings {
        padding: 2rem;
    }
}

.p33-titolo-pagina {
    margin-bottom: 1.5rem;
}

/* Intestazione */
.it-header-slim-wrapper .p33-utente {
    color: #fff;
}

.it-header-center-wrapper .it-brand-wrapper a {
    text-decoration: none;
}

.it-header-navbar-wrapper .nav-link[aria-current="page"] {
    font-weight: 700;
}

/* Piede di pagina */
.p33-footer {
    flex-shrink: 0;
}

.p33-footer .p33-footer-link a {
    color: #fff;
}

/* Elenco consultazioni */
.p33-card-documento {
    height: 100%;
}

.p33-card-documento .card-title a {
    text-decoration: none;
}

.p33-card-documento .card-title a::after {
    /* tutta la scheda e' cliccabile, il collegamento resta uno solo per lo screen reader */
    content: "";
    position: absolute;
    inset: 0;
}

.p33-logo-ente {
    max-width: 100%;
    max-height: 200px;
}

/* Consultazione: indice e commenti */
.p33-indice .p33-indice-lista a {
    display: block;
    padding: .5rem .75rem;
    border-left: 3px solid transparent;
    color: var(--p33-primario-scuro);
    text-decoration: none;
}

.p33-indice .p33-indice-lista a:hover,
.p33-indice .p33-indice-lista a:focus-visible {
    border-left-color: var(--p33-primario);
    background-color: var(--p33-sfondo-tenue);
    text-decoration: underline;
}

@media (min-width: 992px) {
    .p33-indice {
        position: sticky;
        top: 1rem;
    }

    /* su schermo grande indice sempre aperto e pulsante nascosto */
    .p33-indice .p33-indice-lista.collapse {
        display: block;
    }

    .p33-indice-pulsante {
        display: none !important;
    }
}

.p33-capitolo {
    scroll-margin-top: 1rem;
}

.p33-capitolo-testo img {
    max-width: 100%;
    height: auto;
}

/* Partecipa33#13: i commenti degli articoli senza commi si aprono nel pannello dei contributi (niente riquadri
   sempre aperti e niente pulsanti senza effetto): le regole del vecchio riquadro sotto il capitolo non servono piu'. */

/* Testata della consultazione */
.p33-testata {
    background-color: #fff;
    border: 1px solid var(--p33-bordo);
    border-radius: 8px;
    padding: 1.5rem;
}

.p33-testata-ente {
    color: var(--p33-primario-scuro);
    font-weight: 600;
}

.p33-testata-dati {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin: 0 0 1rem;
}

.p33-testata-dati dt {
    font-size: .875rem;
    font-weight: 400;
    color: #4d5a66;
}

.p33-testata-dati dd {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.p33-stato {
    display: inline-block;
    padding: 0 .5rem;
    border-radius: 4px;
    background-color: #e6e9f2;
    color: #1a1a1a;
}

.p33-stato-aperta {
    background-color: #d4edda;
    color: #0b4f1f;
}

.p33-testo-a-capo {
    white-space: pre-line;
}

/* Commi e fumetti dei contributi */
.p33-comma {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    scroll-margin-top: 1rem;
}

.p33-comma-testo {
    flex: 1 1 auto;
    margin-bottom: .75rem;
}

.p33-fumetto {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border: 1px solid var(--p33-bordo);
    color: var(--p33-primario-scuro);
    background-color: #fff;
}

.p33-fumetto .icon {
    fill: currentColor;
}

.p33-fumetto-pieno {
    background-color: var(--p33-primario-scuro);
    border-color: var(--p33-primario-scuro);
    color: #fff;
}

/* Pannello laterale dei contributi: nascosto finche' non si apre un fumetto */
.p33-contributi {
    display: none;
}

.p33-contributi.p33-aperto {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    width: min(440px, 100%);
    overflow-y: auto;
    background-color: #fff;
    border-left: 1px solid var(--p33-bordo);
    box-shadow: -4px 0 16px rgba(0, 0, 0, .25);
    padding: 1rem;
}

.p33-contributi .p33-commenti-chiudi {
    display: inline-flex;
}

.p33-sfondo-pannello.p33-sfondo-contributi {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: rgba(0, 0, 0, .4);
}

.p33-contributo {
    border-top: 1px solid var(--p33-bordo);
    padding: .75rem 0;
}

.p33-stato-contributo {
    display: inline-block;
    margin-left: .5rem;
    padding: 0 .4rem;
    border-radius: 4px;
    background-color: #fff3cd;
    color: #5c3c00;
    font-size: .875rem;
}

.p33-proposto {
    border-left: 3px solid var(--p33-primario);
    padding-left: .5rem;
}

.p33-codice-contributo {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .875rem;
}

.p33-legenda,
.p33-etichetta-campo {
    font-size: 1rem;
    font-weight: 600;
    float: none;
    width: auto;
    margin-bottom: .25rem;
}

@media (max-width: 991.98px) {
    /* smartphone: il pannello dei contributi si apre dal basso come quello dei commenti */
    .p33-contributi.p33-aperto {
        top: auto;
        left: 0;
        width: auto;
        max-height: 85vh;
        border-left: 0;
        border-top: 1px solid var(--p33-bordo);
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .25);
    }
}

/* Ricerca dell'ente in home */
.p33-ricerca {
    max-width: 700px;
    margin: 3rem auto;
}

/* Contrasti AA */
.p33-footer .it-footer-small-prints,
.p33-footer .it-footer-small-prints li {
    background-color: #003366;
    color: #fff;
}

.dx-datagrid-nodata,
.dx-treelist-nodata {
    color: #5c6f82;
}

/* ==========================================================================
 * Partecipa33#10 - pagine pubbliche con l'aspetto del prototipo dell'idea
 * (palette, intestazione con stemma e nome dell'ente, testata della consultazione,
 * indice, commi con fumetto, pannello dei contributi, esito, piede).
 * L'area dell'ente (body.p33-area-ente) resta con la base di #4.
 * ========================================================================== */

:root {
    --p33-blu: #0066cc;
    --p33-blu-scuro: #004d99;
    --p33-blu-chiaro: #e6f0fa;
    --p33-blu-notte: #17324d;
    --p33-testo-2: #5c6f82;
    --p33-bordo-tenue: #d9dadb;
    --p33-fondo: #f5f6f7;
    --p33-verde: #00805a;
    --p33-verde-chiaro: #e3f4ee;
    --p33-giallo: #8a5300;
    --p33-giallo-chiaro: #fff4dc;
    --p33-rosso: #b8283f;
    --p33-rosso-chiaro: #fbe9ec;
    --p33-raggio: 6px;
    --p33-ombra: 0 2px 10px rgba(23, 50, 77, .10);
    --p33-font-testo: Georgia, "Times New Roman", serif;
}

body.p33-pubblica {
    background-color: var(--p33-fondo);
    font-size: 17px;
    line-height: 1.5;
}

body.p33-pubblica main#contenuto {
    padding-top: 0 !important;
}

body.p33-pubblica a {
    color: var(--p33-blu);
}

/* Intestazione: fascia sottile e fascia dell'ente */
.p33-slim {
    background-color: var(--p33-blu-notte);
    color: #fff;
    font-size: 14px;
}

.p33-slim-riga {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    gap: 12px;
}

body.p33-pubblica .p33-slim a {
    color: #fff;
    text-decoration: none;
}

.p33-btn-accedi,
body.p33-pubblica .p33-slim a.p33-btn-accedi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--p33-blu);
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 6px 14px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.p33-btn-accedi:hover {
    background-color: var(--p33-blu-scuro);
}

.p33-btn-accedi .icon {
    fill: #fff;
}

.p33-ente {
    background-color: var(--p33-blu);
    color: #fff;
}

body.p33-pubblica .p33-ente a.p33-ente-riga {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    color: #fff;
    text-decoration: none;
}

.p33-stemma {
    width: auto;
    height: 64px;
    max-width: 120px;
    flex: none;
    object-fit: contain;
}

.p33-ente-nome {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
}

.p33-ente-sotto {
    display: block;
    margin-top: 2px;
    font-size: 15px;
}

@media (max-width: 600px) {
    .p33-ente-nome { font-size: 21px; }
    .p33-stemma { height: 48px; }
}

/* Briciole di pane */
.p33-briciole {
    font-size: 14px;
    color: var(--p33-testo-2);
    padding: 16px 0 4px;
}

.p33-briciole ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.p33-briciole li > span[aria-hidden] {
    margin: 0 6px;
}

/* Testata della consultazione */
body.p33-pubblica .p33-testata {
    background-color: #fff;
    border: 0;
    border-radius: var(--p33-raggio);
    box-shadow: var(--p33-ombra);
    padding: 28px;
    margin: 8px 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 28px;
}

body.p33-pubblica .p33-testata.p33-testata-semplice {
    display: block;
}

@media (max-width: 900px) {
    body.p33-pubblica .p33-testata {
        grid-template-columns: 1fr;
        padding: 20px;
    }
}

.p33-etichetta-tipo {
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--p33-testo-2);
    font-weight: 600;
    margin: 0;
}

body.p33-pubblica .p33-testata h1 {
    font-size: 34px;
    line-height: 1.15;
    margin: 6px 0 12px;
}

@media (max-width: 600px) {
    body.p33-pubblica .p33-testata h1 { font-size: 27px; }
}

body.p33-pubblica .p33-stato {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    border-radius: 99px;
    padding: 5px 12px;
    background-color: #ececec;
    color: #444;
}

body.p33-pubblica .p33-stato::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: currentColor;
}

body.p33-pubblica .p33-stato-aperta {
    background-color: var(--p33-verde-chiaro);
    color: #006b4b;
}

body.p33-pubblica .p33-stato-attesa {
    background-color: var(--p33-giallo-chiaro);
    color: var(--p33-giallo);
}

.p33-date {
    margin: 10px 0 0;
    color: var(--p33-testo-2);
}

.p33-intro {
    margin: 14px 0 18px;
}

.p33-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.p33-pubblica .btn.p33-btn-primario,
body.p33-pubblica .btn.p33-btn-secondario {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    padding: 10px 18px;
    font-weight: 600;
    border: 2px solid var(--p33-blu);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.3;
}

body.p33-pubblica .btn.p33-btn-primario {
    background-color: var(--p33-blu);
    color: #fff;
}

body.p33-pubblica .btn.p33-btn-primario:hover {
    background-color: var(--p33-blu-scuro);
    border-color: var(--p33-blu-scuro);
}

body.p33-pubblica .btn.p33-btn-primario .icon {
    fill: #fff;
}

body.p33-pubblica .btn.p33-btn-secondario {
    background-color: #fff;
    color: var(--p33-blu);
}

body.p33-pubblica .btn.p33-btn-secondario:hover {
    background-color: var(--p33-blu-chiaro);
}

body.p33-pubblica .btn.p33-btn-secondario .icon {
    fill: var(--p33-blu);
}

.p33-numeri {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 18px;
}

.p33-numeri div {
    background-color: var(--p33-fondo);
    border-radius: var(--p33-raggio);
    padding: 12px;
    text-align: center;
}

.p33-numeri b {
    display: block;
    font-size: 28px;
    line-height: 1.1;
    color: var(--p33-blu-notte);
}

.p33-numeri span {
    font-size: 13px;
    color: var(--p33-testo-2);
}

.p33-passi {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: passo;
}

.p33-passi li {
    counter-increment: passo;
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: start;
    margin: 0 0 12px;
    font-size: 15px;
}

.p33-passi li::before {
    content: counter(passo);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--p33-blu);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
}

.p33-passi b {
    display: block;
}

.p33-come-partecipare {
    font-size: 15px;
}

.p33-norma {
    font-size: 13px;
    color: var(--p33-testo-2);
    border-top: 1px solid var(--p33-bordo-tenue);
    padding-top: 10px;
    margin: 6px 0 0;
}

/* Badge degli esiti e degli stati */
.p33-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
}

.p33-b-accolto { background-color: var(--p33-verde-chiaro); color: #006b4b; }
.p33-b-parziale { background-color: var(--p33-giallo-chiaro); color: var(--p33-giallo); }
.p33-b-nonaccolto { background-color: var(--p33-rosso-chiaro); color: var(--p33-rosso); }
.p33-b-previsto { background-color: var(--p33-blu-chiaro); color: var(--p33-blu-scuro); }
.p33-b-moderazione { background-color: var(--p33-giallo-chiaro); color: var(--p33-giallo); }

/* Esito */
.p33-esito {
    background-color: #fff;
    border-radius: var(--p33-raggio);
    box-shadow: var(--p33-ombra);
    padding: 28px;
    margin: 0 0 24px;
}

.p33-esito h2 {
    margin: 0 0 6px;
    font-size: 26px;
}

.p33-esito-riassunto {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 18px;
}

.p33-esito-riassunto .p33-badge {
    font-size: 15px;
    padding: 6px 10px;
}

.p33-tabella-scorre {
    overflow-x: auto;
}

.p33-tabella-esito {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    min-width: 640px;
}

.p33-tabella-esito th,
.p33-tabella-esito td {
    text-align: left;
    vertical-align: top;
    padding: 10px;
    border-bottom: 1px solid var(--p33-bordo-tenue);
}

.p33-tabella-esito thead th {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--p33-testo-2);
}

@media (max-width: 600px) {
    .p33-esito { padding: 20px; }
    .p33-tabella-esito { min-width: 0; }
    .p33-tabella-esito thead { display: none; }
    .p33-tabella-esito tr { display: block; border-bottom: 1px solid var(--p33-bordo-tenue); padding: 10px 0; }
    .p33-tabella-esito td,
    .p33-tabella-esito th { display: block; border: 0; padding: 3px 0; }
}

/* Corpo: indice a sinistra e documento */
.p33-corpo {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding-bottom: 48px;
}

body.p33-pubblica .p33-indice {
    position: sticky;
    top: 16px;
    background-color: #fff;
    border-radius: var(--p33-raggio);
    box-shadow: var(--p33-ombra);
    padding: 16px 0;
    max-height: calc(100vh - 32px);
    overflow: auto;
    margin: 0;
}

.p33-indice-titolo {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--p33-testo-2);
    margin: 0 16px 8px;
}

body.p33-pubblica .p33-indice .p33-indice-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.p33-pubblica .p33-indice .p33-indice-lista a {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 16px;
    text-decoration: none;
    color: var(--p33-testo);
    font-size: 15px;
    line-height: 1.3;
    border-left: 4px solid transparent;
}

body.p33-pubblica .p33-indice .p33-indice-lista a:hover {
    background-color: var(--p33-fondo);
    text-decoration: none;
}

body.p33-pubblica .p33-indice .p33-indice-lista a[aria-current] {
    border-left-color: var(--p33-blu);
    background-color: var(--p33-blu-chiaro);
    color: var(--p33-blu-scuro);
    font-weight: 600;
}

.p33-conta {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    background-color: var(--p33-blu-chiaro);
    color: var(--p33-blu-scuro);
    border-radius: 99px;
    padding: 1px 7px;
    align-self: center;
}

.p33-indice-pulsante {
    display: none;
}

@media (min-width: 992px) {
    body.p33-pubblica.p33-con-pannello .p33-corpo {
        grid-template-columns: minmax(0, 1fr);
        margin-right: min(460px, 40vw);
    }

    body.p33-pubblica.p33-con-pannello .p33-indice {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .p33-corpo {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* smartphone: l'indice diventa un pulsante fisso in alto con l'articolo che si sta leggendo */
    body.p33-pubblica .p33-indice {
        top: 0;
        z-index: 20;
        margin: 0 -12px 16px;
        padding: 8px 12px;
        border-radius: 0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
        max-height: 70vh;
    }

    .p33-indice-titolo {
        display: none;
    }

    body.p33-pubblica .p33-indice-pulsante {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 8px;
        background-color: var(--p33-blu-chiaro);
        color: var(--p33-blu-scuro);
        border: 0;
        border-radius: 4px;
        padding: 8px 12px;
        font-weight: 600;
        font-size: 15px;
        text-align: left;
    }

    .p33-indice-pulsante span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .p33-indice-pulsante .icon {
        fill: currentColor;
        flex: none;
    }

    body.p33-pubblica .p33-indice .p33-indice-lista.show,
    body.p33-pubblica .p33-indice .p33-indice-lista.collapsing {
        margin-top: 8px;
    }
}

.p33-documento {
    min-width: 0;
}

.p33-documento:focus {
    outline: none;
}

.p33-filtri {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--p33-testo-2);
}

.p33-filtro {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.p33-filtro input {
    width: 18px;
    height: 18px;
    accent-color: var(--p33-blu);
}

/* Articoli e commi */
body.p33-pubblica .p33-articolo {
    background-color: #fff;
    border: 0;
    border-radius: var(--p33-raggio);
    box-shadow: var(--p33-ombra);
    padding: 24px 28px 12px;
    margin: 0 0 20px;
    scroll-margin-top: 72px;
}

@media (max-width: 600px) {
    body.p33-pubblica .p33-articolo { padding: 18px 14px 8px; }
}

body.p33-pubblica .p33-articolo > h2 {
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 14px;
    color: var(--p33-blu-notte);
}

body.p33-pubblica .p33-comma {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    border-radius: 4px;
    margin: 0 -10px;
    padding: 6px 10px;
    scroll-margin-top: 72px;
}

body.p33-pubblica .p33-comma:hover,
body.p33-pubblica .p33-comma:focus-within {
    background-color: var(--p33-fondo);
}

body.p33-pubblica .p33-comma.p33-attivo {
    background-color: var(--p33-blu-chiaro);
    box-shadow: inset 4px 0 0 var(--p33-blu);
}

body.p33-pubblica .p33-comma.p33-nascosto {
    display: none;
}

body.p33-pubblica .p33-comma-testo {
    margin: 0;
    font-family: var(--p33-font-testo);
    font-size: 17px;
    line-height: 1.65;
}

body.p33-pubblica .p33-lettera .p33-comma-testo {
    padding-left: 22px;
}

body.p33-pubblica .p33-capitolo-testo:not(.p33-commi) {
    font-family: var(--p33-font-testo);
    font-size: 17px;
    line-height: 1.65;
}

body.p33-pubblica .p33-fumetto {
    align-self: start;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--p33-testo-2);
    border-radius: 99px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

body.p33-pubblica .p33-fumetto .icon {
    width: 20px;
    height: 20px;
}

body.p33-pubblica .p33-fumetto:hover {
    border-color: var(--p33-blu);
    color: var(--p33-blu);
    background-color: #fff;
}

body.p33-pubblica .p33-fumetto.p33-fumetto-pieno {
    background-color: var(--p33-blu);
    border-color: var(--p33-blu);
    color: #fff;
}

body.p33-pubblica .p33-fumetto.p33-fumetto-pieno:hover {
    background-color: var(--p33-blu-scuro);
    color: #fff;
}

/* fumetto senza contributi: il numero resta per i lettori di schermo, si vede il "+" (consultazione aperta) */
body.p33-pubblica .p33-fumetto:not(.p33-fumetto-pieno) .p33-fumetto-numero {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body.p33-pubblica .p33-fumetto.p33-fumetto-pieno .p33-fumetto-piu {
    display: none;
}

.p33-piede-art {
    border-top: 1px solid var(--p33-bordo-tenue);
    margin: 10px 0 0;
    padding: 8px 0;
    font-size: 15px;
    color: var(--p33-testo-2);
}

/* Pannello dei contributi */
body.p33-pubblica .p33-contributi.p33-aperto {
    display: flex;
    flex-direction: column;
    width: min(460px, 100%);
    padding: 0;
    border-left: 0;
    box-shadow: -4px 0 24px rgba(0, 0, 0, .18);
}

@media (min-width: 992px) {
    body.p33-pubblica .p33-contributi.p33-aperto {
        width: min(460px, 40vw);
    }
}

@media (max-width: 991.98px) {
    body.p33-pubblica .p33-contributi.p33-aperto {
        width: auto;
        max-height: 92vh;
        border-radius: 14px 14px 0 0;
    }
}

.p33-pannello-testa {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--p33-bordo-tenue);
}

.p33-pannello-testa h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.3;
}

.p33-pannello-testa p {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--p33-testo-2);
}

.p33-chiudi {
    background: none;
    border: 0;
    padding: 6px;
    border-radius: 4px;
    color: var(--p33-testo);
}

.p33-chiudi .icon {
    width: 24px;
    height: 24px;
}

.p33-pannello-corpo {
    overflow: auto;
    padding: 16px 18px 24px;
    flex: 1;
}

.p33-citazione {
    font-family: var(--p33-font-testo);
    font-size: 15px;
    line-height: 1.55;
    background-color: var(--p33-fondo);
    border-left: 4px solid var(--p33-blu);
    padding: 10px 12px;
    margin: 0 0 16px;
    border-radius: 0 4px 4px 0;
    max-height: 9.5em;
    overflow: auto;
}

.p33-sez-tit {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--p33-testo-2);
    margin: 18px 0 8px;
}

.p33-commento {
    border: 1px solid var(--p33-bordo-tenue);
    border-radius: var(--p33-raggio);
    padding: 12px 14px;
    margin: 0 0 10px;
    background-color: #fff;
}

.p33-commento-testa {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    font-size: 14px;
    color: var(--p33-testo-2);
    margin: 0 0 6px;
}

.p33-commento-testa b {
    color: var(--p33-testo);
}

.p33-commento p {
    margin: 0 0 6px;
}

.p33-proposta-testo {
    font-family: var(--p33-font-testo);
    font-size: 15px;
    background-color: var(--p33-verde-chiaro);
    border-radius: 4px;
    padding: 8px 10px;
    margin: 6px 0;
}

.p33-codice-riga {
    font-size: 14px;
    color: var(--p33-testo-2);
}

.p33-commento-piede {
    display: flex;
    justify-content: flex-end;
}

.p33-segnala {
    background: none;
    border: 0;
    color: var(--p33-testo-2);
    font-size: 13px;
    text-decoration: underline;
    padding: 2px 0;
}

.p33-vuoto {
    color: var(--p33-testo-2);
    font-size: 15px;
    margin: 0 0 8px;
}

body.p33-pubblica #form-contributo fieldset {
    border: 0;
    margin: 0 0 14px;
    padding: 0;
}

.p33-campo {
    margin: 0 0 14px;
}

.p33-scelte {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.p33-scelta input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* le etichette dei moduli pubblici non usano quelle "fluttuanti" di Bootstrap Italia */
.p33-scelta label,
.p33-radio-col label,
.p33-filtro label,
body.p33-pubblica .p33-etichetta-campo {
    position: static;
    transform: none;
    width: auto;
    font-size: 15px;
    margin: 0;
    color: var(--p33-testo);
    cursor: pointer;
    line-height: 1.4;
    font-weight: 400;
}

.p33-filtro label {
    color: var(--p33-testo-2);
}

.p33-scelta label {
    display: inline-flex;
    border: 1px solid #8a9aab;
    border-radius: 99px;
    padding: 6px 12px;
}

.p33-scelta input:checked + label {
    border-color: var(--p33-blu);
    background-color: var(--p33-blu-chiaro);
    color: var(--p33-blu-scuro);
    font-weight: 600;
}

.p33-scelta input:focus-visible + label {
    outline: 3px solid #f90;
    outline-offset: 2px;
}

.p33-radio-col > div {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 6px;
}

.p33-radio-col input {
    margin-top: 5px;
    accent-color: var(--p33-blu);
    flex: none;
}

body.p33-pubblica .p33-etichetta-campo {
    display: block;
    font-weight: 700;
    margin: 0 0 6px;
}

.p33-radio-col small {
    display: block;
    color: var(--p33-testo-2);
    font-size: 14px;
}

body.p33-pubblica #form-contributo textarea {
    width: 100%;
    font: inherit;
    font-size: 16px;
    border: 1px solid #8a9aab;
    border-radius: 4px;
    padding: 10px;
    min-height: 120px;
    resize: vertical;
    height: auto;
}

body.p33-pubblica #form-contributo #contributo-proposto {
    min-height: 80px;
}

.p33-contatore {
    font-size: 13px;
    color: var(--p33-testo-2);
    text-align: right;
    margin-top: 2px;
}

.p33-errore {
    color: var(--p33-rosso);
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0 8px;
}

.p33-errore:empty {
    display: none;
}

.p33-nota-accesso {
    font-size: 14px;
    color: var(--p33-testo-2);
    margin: 8px 0 0;
}

.p33-grazie {
    background-color: var(--p33-verde-chiaro);
    border-radius: var(--p33-raggio);
    padding: 14px;
    margin: 0 0 14px;
}

.p33-grazie h3 {
    margin: 0 0 6px;
    color: #006b4b;
    font-size: 18px;
}

.p33-grazie p {
    margin: 0 0 6px;
    font-size: 15px;
}

.p33-chiusa-box {
    background-color: var(--p33-fondo);
    border-radius: var(--p33-raggio);
    padding: 12px 14px;
    font-size: 15px;
    margin-top: 12px;
}

body.p33-pubblica .p33-codice-contributo {
    font-weight: 700;
    background-color: var(--p33-fondo);
    border-radius: 4px;
    padding: 1px 6px;
}

/* Elenco delle consultazioni */
.p33-elenco-consultazioni {
    list-style: none;
    padding: 0;
    margin: 0 0 48px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.p33-scheda {
    position: relative;
    height: 100%;
    background-color: #fff;
    border-radius: var(--p33-raggio);
    box-shadow: var(--p33-ombra);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p33-scheda:hover,
.p33-scheda:focus-within {
    box-shadow: 0 4px 16px rgba(23, 50, 77, .18);
}

.p33-scheda h2 {
    font-size: 21px;
    line-height: 1.25;
    margin: 0;
}

body.p33-pubblica .p33-scheda h2 a {
    color: var(--p33-blu-notte);
    text-decoration: none;
}

.p33-scheda h2 a::after {
    /* tutta la scheda e' cliccabile, il collegamento resta uno solo per lo screen reader */
    content: "";
    position: absolute;
    inset: 0;
}

.p33-scheda p {
    margin: 0;
}

.p33-scheda .p33-date,
.p33-scheda-numeri {
    margin: 0;
    font-size: 15px;
    color: var(--p33-testo-2);
}

.p33-scheda .p33-stato {
    align-self: flex-start;
}

/* Pagine semplici (I miei contributi, regole, informativa, accessibilita) */
.p33-riquadro {
    background-color: #fff;
    border-radius: var(--p33-raggio);
    box-shadow: var(--p33-ombra);
    padding: 28px;
    margin: 8px 0 48px;
}

@media (max-width: 600px) {
    .p33-riquadro { padding: 20px; }
}

.p33-riquadro h1,
body.p33-pubblica .p33-titolo-elenco {
    font-size: 34px;
    line-height: 1.15;
    margin: 0 0 12px;
}

.p33-riquadro h2 {
    font-size: 22px;
    color: var(--p33-blu-notte);
    margin: 24px 0 8px;
}

.p33-miei .p33-commento h2 {
    font-size: 18px;
    margin: 0 0 4px;
}

/* Piede di pagina */
.p33-piede {
    background-color: var(--p33-blu-notte);
    color: #fff;
    font-size: 15px;
    flex-shrink: 0;
}

.p33-piede-griglia {
    padding-top: 28px;
    padding-bottom: 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.p33-piede h2 {
    font-size: 16px;
    margin: 0 0 8px;
    color: #fff;
}

body.p33-pubblica .p33-piede a {
    color: #fff;
    text-decoration: underline;
}

.p33-piede ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.p33-piede li {
    margin: 0 0 6px;
}

.p33-piede-pa33 {
    border-top: 1px solid rgba(255, 255, 255, .25);
    grid-column: 1 / -1;
    padding-top: 14px;
    font-size: 14px;
}

.p33-piede-pa33 p {
    margin: 0;
}

.p33-piede-loghi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 10px !important;
}

@media (prefers-reduced-motion: reduce) {
    body.p33-pubblica * {
        transition: none !important;
        animation: none !important;
    }
}

/* Partecipa33#10: ritocchi dopo il confronto con le schermate del prototipo */
.p33-briciole li,
.p33-briciole a {
    font-size: 14px;
}

.p33-numeri span,
.p33-passi li {
    line-height: 1.4;
}

body.p33-pubblica #form-contributo legend {
    float: none;
    width: auto;
    padding: 0;
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--p33-testo);
}

body.p33-pubblica .p33-piede li,
body.p33-pubblica .p33-piede a {
    font-size: 15px;
}

body.p33-pubblica .p33-piede .p33-piede-pa33 p,
body.p33-pubblica .p33-piede .p33-piede-pa33 a {
    font-size: 14px;
}

/* Partecipa33#6: accesso dei cittadini con SPID/CIE dentro la pagina della consultazione */
.p33-accesso-spid {
    margin: 0 0 1rem;
}
.p33-accesso-spid .p33-bottoni-accesso {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: .75rem 0;
}
.p33-accesso-spid .spid-button-container {
    position: relative;
}
/* piede della tendina SPID raccolto in un elenco (vedi script di Documenti/Vedi) */
.p33-accesso-spid .p33-spid-piede {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Partecipa33#13: contributo sull'intero documento, commenti degli articoli senza commi, accesso operatori */
.p33-piede-capitolo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

body.p33-pubblica .p33-indice .p33-indice-lista .p33-indice-documento {
    border-top: 1px solid var(--p33-bordo-tenue);
    margin-top: 6px;
    padding-top: 6px;
}

body.p33-pubblica .p33-indice .p33-indice-lista .p33-indice-documento button {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 16px;
    background: none;
    border: 0;
    border-left: 4px solid transparent;
    text-align: left;
    color: var(--p33-blu-scuro);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

body.p33-pubblica .p33-indice .p33-indice-lista .p33-indice-documento button:hover {
    background-color: var(--p33-fondo);
    text-decoration: underline;
}

body.p33-pubblica .p33-indice .p33-indice-lista .p33-indice-documento button[aria-expanded="true"] {
    border-left-color: var(--p33-blu);
    background-color: var(--p33-blu-chiaro);
}

.p33-commento.p33-risposta {
    border-left: 3px solid var(--p33-blu-chiaro);
}

.p33-commento.p33-livello-1 { margin-left: 16px; }
.p33-commento.p33-livello-2 { margin-left: 32px; }
.p33-commento.p33-livello-3 { margin-left: 48px; }

.p33-commento-piede {
    gap: 12px;
}

.p33-risposta-a {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    font-size: 14px;
    color: var(--p33-testo-2);
}

/* Accesso operatori e pagine collegate (cambio, impostazione e recupero della password, conferma account) */
.p33-accesso-operatori {
    max-width: 520px;
    margin: 24px auto;
}

.p33-accesso-operatori .p33-campo {
    margin-bottom: 16px;
}

.p33-accesso-operatori .form-control {
    width: 100%;
}

.p33-accesso-operatori .p33-rimando {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--p33-bordo-tenue);
    font-size: 15px;
    color: var(--p33-testo-2);
}

.p33-requisiti {
    font-size: 14px;
    color: var(--p33-testo-2);
    padding-left: 1.2rem;
}

.p33-requisiti .p33-ok {
    color: var(--p33-verde, #1a7f37);
}

.p33-messaggio-ok {
    background-color: var(--p33-verde-chiaro);
    border-radius: 4px;
    padding: 10px 12px;
}

.p33-requisiti-box {
    background-color: var(--p33-fondo);
    border-left: 4px solid var(--p33-blu);
    border-radius: 0 4px 4px 0;
    padding: 10px 12px;
    margin: 0 0 16px;
}

/* ==========================================================================
 * Partecipa33#17 - area di gestione col tema PA33.
 * Bootstrap Italia ricompilata coi colori PA33 (lib/bootstrap-italia/css/bootstrap-italia-pa33.min.css, ricetta in
 * tools/bootstrap-italia-pa33) e componenti DevExtreme allineati: un solo stile di pulsanti (quello di Bootstrap
 * Italia, niente maiuscolo forzato), etichette dei moduli sopra il campo a contrasto pieno, caselle e link col primario.
 * Tutto sotto body.p33-area-ente: le pagine pubbliche non cambiano.
 * Contrasti (testo normale >= 4,5:1): primario #C8351A 5,28:1 su bianco e col testo bianco; hover #A82C15 6,92:1;
 * testo #1a1a1a 17,4:1; secondario #5F6770 5,9:1 su bianco; pulsanti secondari in hover primario su #FDF0EC 4,7:1
 * (#FCE6DF faceva 4,40:1; lo misura tools/a11y, provaContrastoPulsanti).
 * Partecipa33#19: tema chiaro/scuro (data-bs-theme su <html>, wwwroot/css/gestione.css). I riempimenti col testo
 * bianco (primario, primario-scuro, errore, errore-scuro) restano uguali nei due temi; testo e bordi dei pulsanti
 * secondari usano primario-testo / errore-testo, superficie e testo seguono il tema. Nel tema scuro: primario-testo
 * #FF8A6E 7,33:1 su #1A1D23 e 6,56:1 sul fondo hover #33221E; errore-testo #FFA8A8 9,18:1 e 8,22:1; testo #E8E8E8.
 * AreaGestioneTests misura le coppie dei due blocchi qui sotto.
 * ========================================================================== */

body.p33-area-ente {
    --p33-gestione-primario: #C8351A;
    --p33-gestione-primario-scuro: #A82C15;
    --p33-gestione-primario-testo: #C8351A;
    --p33-gestione-secondario: #5F6770;
    --p33-gestione-bordo: #C9C9C9;
    --p33-gestione-sfondo-hover: #FDF0EC;
    --p33-gestione-errore: #9E2A14;
    --p33-gestione-errore-scuro: #7F2210;
    --p33-gestione-errore-testo: #9E2A14;
    --p33-gestione-superficie: #FFFFFF;
    --p33-gestione-testo: #1A1A1A;
}

html[data-bs-theme="dark"] body.p33-area-ente {
    --p33-gestione-primario: #C8351A;
    --p33-gestione-primario-scuro: #A82C15;
    --p33-gestione-primario-testo: #FF8A6E;
    --p33-gestione-secondario: #B0B5BD;
    --p33-gestione-bordo: #3A404B;
    --p33-gestione-sfondo-hover: #33221E;
    --p33-gestione-errore: #9E2A14;
    --p33-gestione-errore-scuro: #7F2210;
    --p33-gestione-errore-testo: #FFA8A8;
    --p33-gestione-superficie: #1A1D23;
    --p33-gestione-testo: #E8E8E8;
}

.p33-testo-secondario {
    color: var(--p33-gestione-secondario, #5F6770);
    font-size: 14px;
}

/* intestazione: dice all'operatore che e' in gestione (Partecipa33#19: sulla barra scura dell'Help Desk) */
.p33-etichetta-gestione {
    display: inline-block;
    margin-left: .25rem;
    padding: 0 .5rem;
    border: 2px solid #fff;
    border-radius: 4px;
    font-size: .75em;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: middle;
    text-transform: none;
}

/* azioni di riga compatte: pulsanti piccoli col testo, a capo se la colonna e' stretta */
.p33-azioni-riga {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.p33-azioni-riga .btn {
    white-space: nowrap;
}

/* --- pulsanti DevExtreme con l'aspetto dei pulsanti di Bootstrap Italia --- */
body.p33-area-ente .dx-button {
    border-radius: 4px;
}

body.p33-area-ente .dx-button .dx-button-text {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
}

body.p33-area-ente .dx-button-mode-contained.dx-button-default,
body.p33-area-ente .dx-button-mode-contained.dx-button-success {
    background-color: var(--p33-gestione-primario);
    color: #fff;
}

body.p33-area-ente .dx-button-mode-contained.dx-button-default .dx-icon,
body.p33-area-ente .dx-button-mode-contained.dx-button-success .dx-icon {
    color: #fff;
}

body.p33-area-ente .dx-button-mode-contained.dx-button-default.dx-state-hover,
body.p33-area-ente .dx-button-mode-contained.dx-button-success.dx-state-hover {
    background-color: var(--p33-gestione-primario-scuro);
}

/* pulsanti "normali" e del testo (barra della griglia, finestre): come btn-outline-primary */
body.p33-area-ente .dx-button-mode-contained.dx-button-normal,
body.p33-area-ente .dx-button-mode-text.dx-button-normal,
body.p33-area-ente .dx-button-mode-outlined.dx-button-normal {
    background-color: var(--p33-gestione-superficie);
    color: var(--p33-gestione-primario-testo);
    box-shadow: inset 0 0 0 2px var(--p33-gestione-primario-testo);
}

body.p33-area-ente .dx-button-mode-contained.dx-button-normal .dx-icon,
body.p33-area-ente .dx-button-mode-text.dx-button-normal .dx-icon,
body.p33-area-ente .dx-button-mode-outlined.dx-button-normal .dx-icon {
    color: var(--p33-gestione-primario-testo);
}

body.p33-area-ente .dx-button-mode-contained.dx-button-normal.dx-state-hover,
body.p33-area-ente .dx-button-mode-text.dx-button-normal.dx-state-hover,
body.p33-area-ente .dx-button-mode-outlined.dx-button-normal.dx-state-hover {
    background-color: var(--p33-gestione-sfondo-hover);
}

/* le icone dei pulsanti di chiusura e dei menu delle griglie restano icone, senza cornice */
body.p33-area-ente .dx-closebutton.dx-button-normal,
body.p33-area-ente .dx-datagrid-column-chooser-button,
body.p33-area-ente .dx-treelist-column-chooser-button {
    box-shadow: none;
}

/* link delle colonne di comando (Modifica, Elimina, Salva, Annulla) e del pager */
body.p33-area-ente .dx-link,
body.p33-area-ente .dx-datagrid .dx-link,
body.p33-area-ente .dx-treelist .dx-link {
    color: var(--p33-gestione-primario-testo);
}

body.p33-area-ente .dx-pager .dx-pages .dx-selection,
body.p33-area-ente .dx-pager .dx-page-sizes .dx-selection {
    background-color: var(--p33-gestione-primario);
    color: #fff;
}

/* --- griglie: intestazioni e testo a contrasto pieno --- */
body.p33-area-ente .dx-datagrid-headers,
body.p33-area-ente .dx-treelist-headers {
    color: var(--p33-gestione-testo);
    font-weight: 600;
}

body.p33-area-ente .dx-datagrid,
body.p33-area-ente .dx-treelist {
    color: var(--p33-gestione-testo);
}

body.p33-area-ente .dx-datagrid-nodata,
body.p33-area-ente .dx-treelist-nodata,
body.p33-area-ente .dx-pager .dx-info {
    color: var(--p33-gestione-secondario);
    opacity: 1;
}

/* --- moduli: etichette sopra il campo (labelLocation nel layout), scure, su fondo bianco --- */
body.p33-area-ente .dx-datagrid-edit-form,
body.p33-area-ente .dx-datagrid-form-edit-row > td,
body.p33-area-ente .dx-form {
    background-color: var(--p33-gestione-superficie);
}

body.p33-area-ente .dx-field-item-label-text,
body.p33-area-ente .dx-field-label,
body.p33-area-ente .dx-field-item-required-mark {
    color: var(--p33-gestione-testo);
    opacity: 1;
}

body.p33-area-ente .dx-field-item-label-text {
    font-weight: 600;
}

body.p33-area-ente .dx-field-item-optional-mark {
    color: var(--p33-gestione-secondario);
}

/* caselle di spunta: segno col primario */
body.p33-area-ente .dx-checkbox-checked .dx-checkbox-icon {
    background-color: var(--p33-gestione-primario);
    border-color: var(--p33-gestione-primario);
}

body.p33-area-ente .dx-checkbox-icon {
    border-color: var(--p33-gestione-secondario);
}

/* editor: sottolineatura del campo attivo col primario */
body.p33-area-ente .dx-texteditor.dx-editor-underlined.dx-state-focused::after,
body.p33-area-ente .dx-texteditor.dx-editor-filled.dx-state-focused::after,
body.p33-area-ente .dx-texteditor.dx-editor-outlined.dx-state-focused {
    border-color: var(--p33-gestione-primario);
}

/* riga d'errore delle griglie (caricamento non riuscito): il rosa del tema col bianco fa 2,28:1 */
body.p33-area-ente .dx-datagrid .dx-error-row .dx-error-message,
body.p33-area-ente .dx-treelist-container .dx-error-row .dx-error-message,
body.p33-area-ente .dx-datagrid-edit-popup .dx-error-message,
body.p33-area-ente .dx-treelist-edit-popup .dx-error-message,
body.p33-area-ente .dx-error-message a {
    background-color: var(--p33-gestione-errore);
    color: #fff;
}

/* caselle in sola lettura (colonne vero/falso delle griglie): il grigio del tema (bianco su #bdbdbd, 1,9:1) non si
   distingue; lo stato si legge col primario come nelle caselle modificabili (WCAG 1.4.11) */
body.p33-area-ente .dx-checkbox.dx-checkbox-checked.dx-state-readonly .dx-checkbox-icon,
body.p33-area-ente .dx-checkbox.dx-checkbox-checked.dx-state-disabled .dx-checkbox-icon {
    background-color: var(--p33-gestione-primario);
}

body.p33-area-ente .dx-checkbox.dx-state-readonly .dx-checkbox-icon {
    border-color: var(--p33-gestione-secondario);
}

/* pulsanti delle azioni di riga: piu' bassi dei pulsanti di pagina, il testo resta 14px */
.p33-azioni-riga .btn {
    padding: 2px 8px;
    font-size: 14px;
    line-height: 1.5;
}

/* pulsanti "default" in modo testo o contorno (barre delle griglie): stesso aspetto degli altri pulsanti secondari */
body.p33-area-ente .dx-button-mode-text.dx-button-default,
body.p33-area-ente .dx-button-mode-outlined.dx-button-default {
    background-color: var(--p33-gestione-superficie);
    color: var(--p33-gestione-primario-testo);
    box-shadow: inset 0 0 0 2px var(--p33-gestione-primario-testo);
}

body.p33-area-ente .dx-button-mode-text.dx-button-default .dx-icon,
body.p33-area-ente .dx-button-mode-outlined.dx-button-default .dx-icon {
    color: var(--p33-gestione-primario-testo);
}

body.p33-area-ente .dx-button-mode-text.dx-button-default.dx-state-hover,
body.p33-area-ente .dx-button-mode-outlined.dx-button-default.dx-state-hover {
    background-color: var(--p33-gestione-sfondo-hover);
}

/* residuo R2: stesso trattamento per "success" in testo/contorno (il verde del tema faceva 2,1:1) e per "danger"
   (rosso del tema 3,7:1): testo col primario o col rosso scuro, sfondo chiaro in hover/focus/active */
body.p33-area-ente .dx-button-mode-text.dx-button-success,
body.p33-area-ente .dx-button-mode-outlined.dx-button-success {
    background-color: var(--p33-gestione-superficie);
    color: var(--p33-gestione-primario-testo);
    box-shadow: inset 0 0 0 2px var(--p33-gestione-primario-testo);
}

body.p33-area-ente .dx-button-mode-text.dx-button-success .dx-icon,
body.p33-area-ente .dx-button-mode-outlined.dx-button-success .dx-icon {
    color: var(--p33-gestione-primario-testo);
}

body.p33-area-ente .dx-button-mode-contained.dx-button-danger {
    background-color: var(--p33-gestione-errore);
    color: #fff;
}

body.p33-area-ente .dx-button-mode-contained.dx-button-danger .dx-icon {
    color: #fff;
}

body.p33-area-ente .dx-button-mode-contained.dx-button-danger.dx-state-hover,
body.p33-area-ente .dx-button-mode-contained.dx-button-danger.dx-state-focused,
body.p33-area-ente .dx-button-mode-contained.dx-button-danger.dx-state-active {
    background-color: var(--p33-gestione-errore-scuro);
}

body.p33-area-ente .dx-button-mode-text.dx-button-danger,
body.p33-area-ente .dx-button-mode-outlined.dx-button-danger {
    background-color: var(--p33-gestione-superficie);
    color: var(--p33-gestione-errore-testo);
    box-shadow: inset 0 0 0 2px var(--p33-gestione-errore-testo);
}

body.p33-area-ente .dx-button-mode-text.dx-button-danger .dx-icon,
body.p33-area-ente .dx-button-mode-outlined.dx-button-danger .dx-icon {
    color: var(--p33-gestione-errore-testo);
}

body.p33-area-ente .dx-button-mode-text.dx-button-success.dx-state-hover,
body.p33-area-ente .dx-button-mode-text.dx-button-success.dx-state-focused,
body.p33-area-ente .dx-button-mode-text.dx-button-success.dx-state-active,
body.p33-area-ente .dx-button-mode-outlined.dx-button-success.dx-state-hover,
body.p33-area-ente .dx-button-mode-outlined.dx-button-success.dx-state-focused,
body.p33-area-ente .dx-button-mode-outlined.dx-button-success.dx-state-active,
body.p33-area-ente .dx-button-mode-text.dx-button-danger.dx-state-hover,
body.p33-area-ente .dx-button-mode-text.dx-button-danger.dx-state-focused,
body.p33-area-ente .dx-button-mode-text.dx-button-danger.dx-state-active,
body.p33-area-ente .dx-button-mode-outlined.dx-button-danger.dx-state-hover,
body.p33-area-ente .dx-button-mode-outlined.dx-button-danger.dx-state-focused,
body.p33-area-ente .dx-button-mode-outlined.dx-button-danger.dx-state-active {
    background-color: var(--p33-gestione-sfondo-hover);
}

/* testo a capo anche dentro le parole lunghe (email, codici): con wordWrapEnabled DevExtreme va a capo solo agli spazi */
body.p33-area-ente .dx-datagrid-rowsview .dx-row > td,
body.p33-area-ente .dx-treelist-rowsview .dx-row > td {
    overflow-wrap: anywhere;
}