:root {
    --blu: #123b63;
    --blu-scuro: #0b2945;
    --azzurro: #e8f2fa;
    --testo: #17212b;
    --bordo: #c9d4df;
    --rosso: #a51d2d;
    --verde: #176b46;
    --sfondo: #f4f6f8;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--testo);
    background: var(--sfondo);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--sfondo); }
a { color: var(--blu); }
.salva-contenuto, .salta-contenuto { position: absolute; left: -10000px; }
.salta-contenuto:focus { left: 1rem; top: 1rem; background: white; padding: .75rem; z-index: 10; }
.testata { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 5vw; background: var(--blu-scuro); color: white; }
.testata nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.testata a { color: white; }
.identita-testata { display: flex; align-items: center; gap: .75rem; min-width: max-content; }
.stemma-portale { width: 52px; height: 52px; object-fit: contain; }
.logo-portale { width: auto; max-width: 180px; max-height: 52px; object-fit: contain; }
.logo-secondario-portale { display: block; width: auto; max-width: 180px; max-height: 48px; object-fit: contain; margin: 0 auto .75rem; }
.marchio { display: block; font-size: 1.35rem; font-weight: 700; }
.sottotitolo { font-size: .85rem; opacity: .8; }
.contenitore { width: min(1180px, 92vw); margin: 2rem auto; }
.footer { padding: 2rem 5vw; color: #52606d; text-align: center; }
.pagina-accesso { display: grid; place-items: center; padding: 2rem; background: linear-gradient(145deg, var(--blu-scuro), var(--blu)); }
.pannello-accesso { width: min(440px, 100%); background: white; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.pannello-accesso.largo { width: min(760px, 100%); }
.identita-portale { margin-bottom: 1.5rem; }
.campo { display: grid; gap: .4rem; margin-bottom: 1rem; }
.campo label { font-weight: 600; }
.campo input { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; }
.campo input:focus { outline: 3px solid #8cc8f3; border-color: var(--blu); }
.campo span { color: var(--rosso); font-size: .85rem; }
.griglia-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 1rem; }
.pulsante { border: 0; border-radius: 6px; min-height: 44px; padding: .7rem 1.25rem; font: inherit; font-weight: 700; cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .pulsante:focus-visible { outline: 3px solid #f4bf47; outline-offset: 3px; }
.primario { background: var(--blu); color: white; }
.primario:hover { background: var(--blu-scuro); }
.messaggio { display: block; padding: .8rem; margin: 1rem 0; background: var(--azzurro); border-left: 4px solid var(--blu); }
.errore { background: #fff0f1; border-color: var(--rosso); color: #741421; }
.successo { background: #ecf8f2; border-color: var(--verde); color: #0d5234; }
.nota { font-size: .9rem; color: #52606d; }
.intestazione-pagina { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.occhiello { color: var(--blu); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
.intestazione-pagina h1 { margin-top: 0; }
.badge, .stato { display: inline-block; padding: .3rem .6rem; border-radius: 999px; background: var(--azzurro); color: var(--blu-scuro); font-size: .85rem; }
.stato.attivo { background: #dff4e9; color: var(--verde); }
.griglia-card { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; }
.card { background: white; border: 1px solid var(--bordo); border-radius: 10px; padding: 1.25rem; }
.card h2 { margin-top: 0; font-size: 1.15rem; }
.card h3 { margin: .35rem 0; font-size: 1rem; }
.valore-indicatore { display: block; color: var(--blu-scuro); font-size: 2rem; font-weight: 750; line-height: 1; }
.sezione-dashboard { margin-top: 2rem; }
.intestazione-sezione { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.intestazione-sezione h2 { margin-bottom: .75rem; }
@media (max-width: 640px) {
    .testata, .intestazione-pagina { align-items: flex-start; flex-direction: column; }
    .griglia-form { grid-template-columns: 1fr; }
    .pagina-accesso { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
}

.collegamento-pulsante { text-decoration: none; display: inline-flex; align-items: center; }
.barra-ricerca { display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.barra-ricerca label { grid-column: 1 / -1; font-weight: 600; }
.barra-ricerca input { min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--bordo); border-radius: 6px; }
.barra-filtri { display: grid; grid-template-columns: minmax(220px,2fr) minmax(180px,1fr) auto; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.barra-filtri .campo { margin-bottom: 0; }
.barra-filtri select, .campo textarea, .campo select { min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; width: 100%; }
.tabella-responsive { overflow-x: auto; background: white; border: 1px solid var(--bordo); border-radius: 8px; }
.tabella { width: 100%; border-collapse: collapse; }
.tabella th, .tabella td { padding: .75rem; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: top; }
.tabella th { background: var(--azzurro); color: var(--blu-scuro); }
.tabella td a { margin-right: .75rem; }
.paginazione { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; }
.griglia-dettaglio { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; }
.griglia-dettaglio div { border-bottom: 1px solid var(--bordo); padding-bottom: .75rem; }
.griglia-dettaglio dt { font-weight: 700; color: var(--blu-scuro); }
.griglia-dettaglio dd { margin: .25rem 0 0; overflow-wrap: anywhere; }
.azioni { display: flex; flex-wrap: wrap; gap: .75rem; }
fieldset.campo { border: 1px solid var(--bordo); border-radius: 8px; padding: 1rem; }
fieldset.campo ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: .5rem; }
fieldset.campo label { font-weight: 400; margin-left: .35rem; }
.anteprima-aspetto { background: var(--anteprima-sfondo,#f4f6f8); border: 1px solid var(--bordo); border-radius: 10px; overflow: hidden; margin-bottom: 1.5rem; }
.anteprima-aspetto header { padding: 1rem; color: white; background: var(--anteprima-secondario,#0b2945); }
.anteprima-aspetto main { padding: 1rem; }
.anteprima-aspetto .esempio-primario { display: inline-block; background: var(--anteprima-primario,#123b63); color: white; padding: .75rem 1rem; border-radius: 6px; }
.griglia-asset { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 1rem; }
.griglia-asset .card input[type=file] { width: 100%; }
.breadcrumb { display:flex; gap:.55rem; align-items:center; margin:0 0 1rem; color:#4b5563; font-size:.95rem; }
.breadcrumb a { color:var(--blu); font-weight:700; }
.guscio-area { min-width:0; }
.area-agente { max-width:54rem; margin-inline:auto; }
.area-struttura { max-width:76rem; margin-inline:auto; }
.area-pubblica { max-width:62rem; margin-inline:auto; }
.intestazione-area,.footer-area,.informazioni-ente { padding:.75rem 1rem; border:1px solid #d7dde5; border-radius:.5rem; background:#fff; }
.menu-laterale { display:flex; flex-wrap:wrap; gap:.75rem; }
.area-messaggi:empty { display:none; }
@media (max-width:640px) { .breadcrumb { font-size:.875rem; } .area-agente .pulsante,.area-struttura .pulsante { min-height:48px; } }
.tabella-log td{max-width:28rem;white-space:pre-wrap;overflow-wrap:anywhere;vertical-align:top}