/*
 * Adotta un Micio — Design System & Visual Architecture
 * Layer centralizzato di design token, contrasti WCAG 2.1 AA, componenti UI standardizzati
 * e media fitting per prevenire disallineamenti e Cumulative Layout Shift (CLS).
 */

/* ==========================================================================
   1. DESIGN TOKENS (Source of Truth)
   ========================================================================== */
:root {
    color-scheme: light;

    /* --- Palette Primaria & Secondaria (Contrasto Elevato WCAG 2.1 AA/AAA) --- */
    --ds-primary: #255c4a;         /* 6.5:1 su bianco/surface (WCAG AA) */
    --ds-primary-hover: #194436;   /* 9.2:1 su bianco/surface (WCAG AAA) */
    --ds-primary-soft: #e3ede5;    /* Superficie morbida primaria */
    --ds-primary-light: #92b09a;   /* Bordo interattivo hover */

    --ds-secondary: #18332c;       /* 12.4:1 su bianco/surface (WCAG AAA) */
    --ds-secondary-hover: #10241f; /* 15.2:1 su bianco/surface (WCAG AAA) */

    --ds-accent: #9b5134;          /* 5.2:1 su bianco/surface (WCAG AA) */
    --ds-accent-hover: #833f25;    /* 7.1:1 su bianco/surface (WCAG AAA) */
    --ds-accent-soft: #faeee7;     /* Superficie calda d'accento */

    /* --- Campioni indicativi dei colori del mantello felino --- */
    --ds-cat-white-light: #fffdf7;
    --ds-cat-white-dark: #ded8cb;
    --ds-cat-black-light: #57534e;
    --ds-cat-black-dark: #1c211f;
    --ds-cat-blue-light: #a9b4ba;
    --ds-cat-blue-dark: #596970;
    --ds-cat-red-light: #e39a52;
    --ds-cat-red-dark: #a94f25;
    --ds-cat-cream-light: #f5e2bc;
    --ds-cat-cream-dark: #d5b376;
    --ds-cat-chocolate-light: #805844;
    --ds-cat-chocolate-dark: #42291f;
    --ds-cat-cinnamon-light: #c88158;
    --ds-cat-cinnamon-dark: #8d4a2e;
    --ds-cat-lilac-light: #cbbfc3;
    --ds-cat-lilac-dark: #918388;
    --ds-cat-fawn-light: #ddc7a9;
    --ds-cat-fawn-dark: #aa8969;
    --ds-cat-unknown-light: #eee9df;
    --ds-cat-unknown-dark: #9f978b;

    /* --- Superfici e Sfondi --- */
    --ds-bg: #f8f5ef;              /* Sfondo globale caldo e rilassante */
    --ds-public-reading: rgba(248, 245, 239, 0.8);
    --ds-public-video-opacity: 0.88;
    --ds-public-video-veil: rgba(248, 245, 239, 0.12);
    --ds-public-panel: rgba(255, 253, 249, 0.8);
    --ds-public-panel-subtle: rgba(240, 235, 224, 0.8);
    --ds-public-footer: rgba(240, 235, 224, 0.92);
    --ds-surface: #fffdf9;         /* Superficie card e pannelli */
    --ds-surface-subtle: #f0ebe0;  /* Sfondo alternato / contenitori media */
    --ds-surface-elevated: #ffffff;/* Superficie modali ed elevata */

    /* --- Bordi & Delimitatori (Conformi WCAG SC 1.4.11 >= 3:1 per bordi attivi) --- */
    --ds-border-soft: #dcd5c7;     /* Separatori decorativi e card neutre */
    --ds-border: #9b9485;          /* Bordi card ad alto contrasto (2.5:1 / 3:1) */
    --ds-border-input: #756f62;    /* Bordi input attivi e interattivi (3.5:1 su surface) */

    /* --- Tipografia & Colori Testo (WCAG 2.1 AA >= 4.5:1) --- */
    --ds-text: #2f3d37;            /* Testo corpo: 8.4:1 su surface (WCAG AAA) */
    --ds-heading: #18332c;         /* Intestazioni: 12.4:1 su surface (WCAG AAA) */
    --ds-muted: #4e5e56;           /* Testo secondario: 5.3:1 su surface (WCAG AA) */
    --ds-inverse-text: #ffffff;    /* Testo su sfondi scuri: 16:1 */

    /* --- Colori Semantici di Stato --- */
    --ds-success: #15694a;         /* 5.7:1 su bianco (WCAG AA) */
    --ds-success-bg: #e6f5ee;
    --ds-success-border: #8ecdb3;

    --ds-warning: #7c3a1e;         /* 6.8:1 su bianco (WCAG AA) */
    --ds-warning-bg: #fdf3eb;
    --ds-warning-border: #e6b396;

    --ds-danger: #b91c1c;          /* 5.5:1 su bianco (WCAG AA) */
    --ds-danger-bg: #fef2f2;
    --ds-danger-border: #fca5a5;

    --ds-info: #075985;            /* 7.8:1 su bianco (WCAG AAA) */
    --ds-info-bg: #f0f9ff;
    --ds-info-border: #7dd3fc;

    /* --- Griglia Spaziature Standard (Base 4/8px) --- */
    --ds-space-half: 0.125rem; /* 2px */
    --ds-space-1: 0.25rem;  /* 4px */
    --ds-space-1-5: 0.375rem; /* 6px */
    --ds-space-2: 0.5rem;   /* 8px */
    --ds-space-3: 0.75rem;  /* 12px */
    --ds-space-3-5: 0.875rem; /* 14px */
    --ds-space-4: 1rem;     /* 16px */
    --ds-space-5: 1.25rem;  /* 20px */
    --ds-space-6: 1.5rem;   /* 24px */
    --ds-space-8: 2rem;     /* 32px */
    --ds-space-10: 2.5rem;  /* 40px */
    --ds-space-12: 3rem;    /* 48px */
    --ds-space-16: 4rem;    /* 64px */
    --ds-space-20: 5rem;    /* 80px */
    --ds-space-24: 6rem;    /* 96px */

    /* Livelli di sovrapposizione; i marker restano nel contesto della mappa. */
    --ds-z-media-background: 1;
    --ds-z-media: 2;
    --ds-z-media-overlay: 3;
    --ds-z-badge: 5;
    --ds-z-content: 10;
    --ds-z-controls: 12;
    --ds-z-sidebar-backdrop: 24;
    --ds-z-sidebar: 25;
    --ds-z-navigation: 30;
    --ds-z-floating: 40;
    --ds-z-dropdown: 50;
    --ds-z-skip-link: 100;
    --ds-z-modal-backdrop: 999;
    --ds-z-modal: 1000;
    --ds-z-map-marker: 1000;
    --ds-z-places: 9999;

    /* --- Scala Tipografica Coerente (Base 16px, Ratio 1.25 Major Third) --- */
    /* I due gradini sotto --ds-font-xs non seguono il rapporto: sono passi */
    --ds-font-3xs: 0.625rem;   /* 10px */
    --ds-font-2xs: 0.6875rem;  /* 11px */
    --ds-font-xs: 0.75rem;     /* 12px */
    --ds-font-sm: 0.875rem;    /* 14px */
    --ds-font-base: 1rem;      /* 16px */
    --ds-font-lg: 1.125rem;    /* 18px */
    --ds-font-xl: 1.25rem;     /* 20px */
    --ds-font-2xl: 1.5rem;     /* 24px */
    --ds-font-3xl: 1.875rem;   /* 30px */
    --ds-font-4xl: 2.25rem;    /* 36px */
    --ds-font-5xl: 3rem;       /* 48px */

    /* --- Interlinea e Misura di Lettura Ottimale (WCAG Guideline) --- */
    --ds-line-tight: 1.2;
    --ds-line-snug: 1.35;
    --ds-line-normal: 1.5;
    --ds-line-relaxed: 1.625;
    --ds-measure-reading: 65ch; /* Larghezza di lettura ottimale (max ~65 caratteri) */

    /* --- Raggi di Curvatura (Border Radius) --- */
    --ds-radius-xs: 0.25rem;   /* 4px */
    --ds-radius-sm: 0.375rem;  /* 6px */
    --ds-radius-md: 0.5rem;    /* 8px */
    --ds-radius-lg: 0.75rem;   /* 12px */
    --ds-radius-xl: 1rem;      /* 16px */
    --ds-radius-2xl: 1.25rem;  /* 20px */
    --ds-radius-3xl: 1.5rem;   /* 24px */
    --ds-radius-full: 9999px;

    /* --- Ombre di Elevazione (Elevation Shadows) --- */
    --ds-shadow-1: 0 1px 3px rgba(24, 51, 44, 0.06), 0 1px 2px rgba(24, 51, 44, 0.04);
    --ds-shadow-2: 0 4px 12px rgba(24, 51, 44, 0.08), 0 2px 4px rgba(24, 51, 44, 0.04);
    --ds-shadow-3: 0 10px 24px rgba(24, 51, 44, 0.12), 0 4px 8px rgba(24, 51, 44, 0.06);
    --ds-shadow-4: 0 20px 40px rgba(24, 51, 44, 0.16), 0 8px 16px rgba(24, 51, 44, 0.08);

    /* --- Focus Ring (Alta Visibilità WCAG 2.1 SC 2.4.7 / 2.4.11) --- */
    --ds-focus: #194436;
    --ds-focus-ring-width: 3px;
    --ds-focus-ring-offset: 2px;
    --ds-focus-halo: rgba(37, 92, 74, 0.22);

    /* --- Transizioni --- */
    --ds-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --ds-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1-A. UTILITY DI COMPOSIZIONE CURATE */

@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-pulse { 50% { opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
    .animate-spin, .animate-pulse { animation: none; }
}

.-bottom-8 { bottom: -2rem; }
.-right-8 { right: -2rem; }
.absolute { position: absolute; }
.animate-pulse { animation: ui-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.animate-spin { animation: ui-spin 1s linear infinite; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }
.backdrop-blur-xs { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.block { display: block; }
.border { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-style: solid; }
.bottom-2 { bottom: 0.5rem; }
.bottom-3 { bottom: 0.75rem; }
.break-all { word-break: break-all; }
.capitalize { text-transform: capitalize; }
.cursor-pointer { cursor: pointer; }
.divide-y > * + * { border-top-width: 1px; border-style: solid; }
.duration-300 { transition-duration: 300ms; }
.flex { display: flex; }
.flex-1 { flex: 1 1 0%; min-width: 0; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.font-black { font-weight: 900; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.font-normal { font-weight: 400; }
.font-semibold { font-weight: 600; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-3\.5 { gap: 0.875rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-y-1 { row-gap: 0.25rem; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
[open] .group-open\:rotate-180 { transform: rotate(180deg); }
.h-1\.5 { height: 0.375rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-2 { height: 0.5rem; }
.h-24 { height: 6rem; }
.h-3 { height: 0.75rem; }
.h-3\.5 { height: 0.875rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-8 { height: 2rem; }
.h-80 { height: 20rem; }
.h-9 { height: 2.25rem; }
.h-96 { height: 24rem; }
.h-full { height: 100%; }
.hidden { display: none; }
.hover\:opacity-90:hover { opacity: 0.9; }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(15,23,42,.1), 0 2px 4px -2px rgba(15,23,42,.1); }
.hover\:underline:hover { text-decoration-line: underline; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.inset-0 { inset: 0; }
.italic { font-style: italic; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.leading-relaxed { line-height: 1.625; }
.leading-snug { line-height: 1.375; }
.leading-tight { line-height: 1.25; }
.left-2 { left: 0.5rem; }
.left-3 { left: 0.75rem; }
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }
.m-0 { margin: 0; }
.max-h-36 { max-height: 9rem; }
.max-h-48 { max-height: 12rem; }
.max-h-72 { max-height: 18rem; }
.max-h-96 { max-height: 24rem; }
.max-h-\[85dvh\] { max-height: 85dvh; }
.max-h-\[85vh\] { max-height: 85vh; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-xl { max-width: 36rem; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-3\.5 { margin-bottom: 0.875rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.min-h-\[340px\] { min-height: 340px; }
.min-h-screen { min-height: 100vh; }
.min-w-0 { min-width: 0; }
.min-w-\[160px\] { min-width: 160px; }
.min-w-\[180px\] { min-width: 180px; }
.min-w-\[200px\] { min-width: 200px; }
.min-w-\[220px\] { min-width: 220px; }
.min-w-\[240px\] { min-width: 240px; }
.ml-1 { margin-left: 0.25rem; }
.ml-1\.5 { margin-left: 0.375rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-8 { margin-left: 2rem; }
.ml-auto { margin-left: auto; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.mt-16 { margin-top: 4rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-2\.5 { margin-top: 0.625rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-3\.5 { margin-top: 0.875rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-auto { margin-top: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.normal-case { text-transform: none; }
.object-center { object-position: center; }
.object-cover { object-fit: cover; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-1\.5 { padding: 0.375rem; }
.p-12 { padding: 3rem; }
.p-2 { padding: 0.5rem; }
.p-2\.5 { padding: 0.625rem; }
.p-3 { padding: 0.75rem; }
.p-3\.5 { padding: 0.875rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.pb-1\.5 { padding-bottom: 0.375rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-8 { padding-bottom: 2rem; }
.pl-1 { padding-left: 0.25rem; }
.pl-9 { padding-left: 2.25rem; }
.pointer-events-none { pointer-events: none; }
.pr-1 { padding-right: 0.25rem; }
.pr-4 { padding-right: 1rem; }
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-1\.5 { padding-top: 0.375rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-2\.5 { padding-top: 0.625rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.relative { position: relative; }
.right-2\.5 { right: 0.625rem; }
.right-3 { right: 0.75rem; }
.rounded { border-radius: 0.25rem; }
.rounded-b-3xl { border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.scroll-mt-10 { scroll-margin-top: 2.5rem; }
.scroll-mt-20 { scroll-margin-top: 5rem; }
.select-none { user-select: none; }
.self-end { align-self: flex-end; }
.self-start { align-self: flex-start; }
.shadow { box-shadow: 0 1px 3px 0 rgba(15,23,42,.1), 0 1px 2px -1px rgba(15,23,42,.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(15,23,42,.25); }
.shadow-2xs { box-shadow: 0 1px 1px 0 rgba(15,23,42,.04); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(15,23,42,.1), 0 4px 6px -4px rgba(15,23,42,.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(15,23,42,.1), 0 2px 4px -2px rgba(15,23,42,.1); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(15,23,42,.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(15,23,42,.1), 0 8px 10px -6px rgba(15,23,42,.1); }
.shrink-0 { flex-shrink: 0; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-1\.5 > * + * { margin-top: 0.375rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-2\.5 > * + * { margin-top: 0.625rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-3\.5 > * + * { margin-top: 0.875rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.sticky { position: sticky; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-7xl { font-size: 4.5rem; }
.text-9xl { font-size: 8rem; }
.text-2xs { font-size: var(--ds-font-2xs); }
.text-3xs { font-size: var(--ds-font-3xs); }
.text-base { font-size: 1rem; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-lg { font-size: 1.125rem; }
.text-right { text-align: right; }
.text-sm { font-size: 0.875rem; }
.text-xl { font-size: 1.25rem; }
.text-xs { font-size: 0.75rem; }
.top-0 { top: 0; }
.top-2 { top: 0.5rem; }
.top-2\.5 { top: 0.625rem; }
.top-3 { top: 0.75rem; }
.tracking-\[\.18em\] { letter-spacing: .18em; }
.tracking-tight { letter-spacing: -.025em; }
.tracking-wider { letter-spacing: .05em; }
.tracking-widest { letter-spacing: .1em; }
.transition { transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.underline { text-decoration-line: underline; }
.uppercase { text-transform: uppercase; }
.w-1\.5 { width: 0.375rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-2 { width: 0.5rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-3 { width: 0.75rem; }
.w-3\.5 { width: 0.875rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-8 { width: 2rem; }
.w-9 { width: 2.25rem; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }
.z-10 { z-index: var(--ds-z-content); }
.z-30 { z-index: var(--ds-z-navigation); }

@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:gap-2 { gap: 0.5rem; }
    .sm\:h-11 { height: 2.75rem; }
    .sm\:h-9 { height: 2.25rem; }
    .sm\:hidden { display: none; }
    .sm\:items-center { align-items: center; }
    .sm\:min-h-\[380px\] { min-height: 380px; }
    .sm\:p-10 { padding: 2.5rem; }
    .sm\:p-5 { padding: 1.25rem; }
    .sm\:p-6 { padding: 1.5rem; }
    .sm\:p-7 { padding: 1.75rem; }
    .sm\:p-8 { padding: 2rem; }
    .sm\:pb-4 { padding-bottom: 1rem; }
    .sm\:pt-8 { padding-top: 2rem; }
    .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .sm\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .sm\:py-12 { padding-top: 3rem; padding-bottom: 3rem; }
    .sm\:py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .sm\:py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .sm\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
    .sm\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .sm\:text-2xl { font-size: 1.5rem; }
    .sm\:text-3xl { font-size: 1.875rem; }
    .sm\:text-4xl { font-size: 2.25rem; }
    .sm\:text-base { font-size: 1rem; }
    .sm\:text-lg { font-size: 1.125rem; }
    .sm\:text-sm { font-size: 0.875rem; }
    .sm\:text-xl { font-size: 1.25rem; }
    .sm\:w-80 { width: 20rem; }
    .sm\:w-auto { width: auto; }
}

@media (min-width: 768px) {
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:p-10 { padding: 2.5rem; }
    .md\:w-auto { width: auto; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-\[1\.15fr_\.85fr\] { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
    .lg\:grid-cols-\[1\.3fr_1fr_1fr_1fr_1fr_auto\] { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)) minmax(0, auto); }
    .lg\:min-h-\[420px\] { min-height: 420px; }
    .lg\:p-10 { padding: 2.5rem; }
    .lg\:p-12 { padding: 3rem; }
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .lg\:text-5xl { font-size: 3rem; }
}

/* 1-BIS. ALIAS SEMANTICI & TEMI DELLE DUE AREE */

/* SUPERFICI SCURE DEL BACKOFFICE */
:root {
    --ui-scuro-superficie: #0f172a;        /* Barra laterale e pannelli di navigazione */
    --ui-scuro-superficie-forte: #020617;  /* Barra superiore: il livello piu' profondo */
    --ui-scuro-superficie-auth: #1f2937;   /* Sfondo delle schermate di accesso */
    --ui-scuro-bordo: #1e293b;             /* Separatori interni alle superfici scure */
    --ui-scuro-bordo-chiaro: #334155;      /* Contorno dei controlli scuri su fondo chiaro */
    --ui-scuro-testo: #ffffff;             /* 17.85:1 su #0f172a, 20.17:1 su #020617 (AAA) */
    --ui-scuro-testo-attenuato: #cbd5e1;   /* 12.02:1 su #0f172a (WCAG AAA) */
    --ui-scuro-testo-tenue: #94a3b8;       /*  6.96:1 su #0f172a (WCAG AA)   */
    --ui-scuro-testo-etichetta: #8496ab;   /*  5.89:1 su #0f172a (WCAG AA). Il precedente
                                              #64748b misurava 3.75:1 e vestiva un maiuscoletto
                                              da 10px: sotto il minimo di SC 1.4.3. */
    --ui-scuro-hover: rgba(255, 255, 255, 0.12);
    --ui-scuro-velo: rgba(2, 6, 23, 0.6);

    /* Stato attivo: l'ambra e' l'unico colore saturo ammesso sulle superfici
       scure, ed e' riservata alla voce di navigazione corrente. */
    --ui-scuro-attivo: #fbbf24;
    --ui-scuro-attivo-testo: #0f172a;      /* 10.69:1 su #fbbf24 (WCAG AAA) */

    /* Varianti di ruolo per la sola topbar scura. Nelle tabelle chiare i badge
       leggono invece gli stati semantici del tema amministrativo. */
    --ui-ruolo-scuro-super-testo: #fcd34d; /* 13.99:1 su #020617 (WCAG AAA) */
    --ui-ruolo-scuro-super-bg: rgba(251, 191, 36, 0.15);
    --ui-ruolo-scuro-super-bordo: rgba(251, 191, 36, 0.35);
    --ui-ruolo-scuro-admin-testo: #6ee7b7; /* 13.23:1 su #020617 (WCAG AAA) */
    --ui-ruolo-scuro-admin-bg: rgba(52, 211, 153, 0.15);
    --ui-ruolo-scuro-admin-bordo: rgba(52, 211, 153, 0.35);
    --ui-ruolo-scuro-operatore-testo: #7dd3fc; /* 12.10:1 su #020617 (WCAG AAA) */
    --ui-ruolo-scuro-operatore-bg: rgba(56, 189, 248, 0.15);
    --ui-ruolo-scuro-operatore-bordo: rgba(56, 189, 248, 0.35);
}
/* FAMIGLIE CROMATICHE IDENTITARIE */
:root {
    /* --- Storie a lieto fine --- */
    --ui-storie-hero-da: #18332c;          /* verde profondo, --ds-secondary   */
    --ui-storie-hero-mid: #255c4a;         /* verde primario, --ds-primary     */
    --ui-storie-hero-a: #833f25;           /* terracotta, --ds-accent-hover    */
    --ui-storie-hero-testo: #ffffff;       /*  7.75:1 su #255c4a (WCAG AAA) */
    --ui-storie-hero-testo-tenue: #f2ece6; /*  6.62:1 su #255c4a (WCAG AA)  */
    --ui-storie-azione: #9b5134;           /* --ds-accent                      */
    --ui-storie-azione-forte: #833f25;     /* Bordo e stato di messa a fuoco */
    --ui-storie-azione-testo: #ffffff;     /*  5.80:1 su #9b5134 (WCAG AA)  */
    --ui-storie-citazione-bg: #faeee7;     /* --ds-accent-soft                 */
    --ui-storie-citazione-bordo: #9b5134;  /*  5.10:1 su #faeee7 (WCAG AA)  */
    --ui-storie-citazione-testo: #5c2c1b;  /* 10.07:1 su #faeee7 (WCAG AAA) */
    --ui-storie-badge-bg: rgba(15, 23, 42, 0.9);
    --ui-storie-badge-bordo: rgba(240, 192, 138, 0.4);
    --ui-storie-badge-testo: #f0c08a;      /* 10.72:1 su #0f172a (WCAG AAA) */

    /* --- Adozione a distanza --- */
    --ui-distanza-bg: #fce7f3;
    --ui-distanza-bordo: #f9a8d4;
    --ui-distanza-testo: #9d174d;          /*  6.71:1 su #fce7f3 (WCAG AA)  */

    /* --- Apertura editoriale della homepage --- */
    --ui-hero-da: rgba(227, 238, 228, 0.72);
    --ui-hero-mid: rgba(248, 245, 239, 0.60);
    --ui-hero-a: rgba(239, 229, 216, 0.72);
    --ui-hero-bordo: #d1ddcf;
    --ui-hero-eyebrow-bg: #d6e6d6;
    --ui-hero-eyebrow-bordo: #b7ceb9;
    --ui-carosello-media-bg: #dce8db;
    --ui-carosello-dot: #bcc7be;
    --ui-carosello-velo: rgba(24, 51, 44, 0.12); /* Vignettatura che stacca la foto dal fondo */
    --ui-nav-hover-pubblico: #edf1e9;            /* Fondo della voce di accesso al passaggio del mouse */

    /* --- Filetto superiore delle schede statistiche ---
       Cinque tinte che codificano la famiglia del dato. Sono un filetto da 3px
       su fondo chiaro: identificano un raggruppamento, non veicolano da sole
       un'informazione, che resta scritta nell'etichetta della scheda. */
    --ui-accento-scheda-ambra: #d97706;
    --ui-accento-scheda-verde: #059669;
    --ui-accento-scheda-azzurro: #0284c7;
    --ui-accento-scheda-indaco: #4f46e5;
    --ui-accento-scheda-ardesia: #475569;

    /* --- Superfici traslucide delle barre fisse --- */
    --ui-barra-velo-controllo: rgba(255, 253, 249, 0.94);
    --ui-barra-velo-admin: rgba(255, 255, 255, 0.96);
    --ui-velo-modale: rgba(2, 6, 23, 0.78);

    /* --- Etichette sovrapposte alle fotografie --- */
    --ui-marquee-nuovo-bordo: rgba(254, 243, 199, 0.6);
    --ui-marquee-attesa-bg: rgba(15, 23, 42, 0.85);
    --ui-marquee-attesa-bordo: rgba(203, 213, 225, 0.3);
    --ui-marquee-attesa-testo: #f1f5f9;    /* 16.30:1 su #0f172a (WCAG AAA) */

    /* --- Gradazioni profonde del rosso, per gli stati distruttivi --- */
    --ui-danger-vivo: #dc2626;             /* Fondo pieno del comando di uscita: il bianco
                                              sopra misura 4.83:1 (WCAG AA) */
    --ui-danger-forte: #991b1b;            /*  8.31:1 su bianco (WCAG AAA) */
    --ui-danger-forte-hover: #7f1d1d;      /* 10.02:1 su bianco (WCAG AAA) */

    /* Nero pieno: unico punto in cui serve il massimo stacco possibile,
       sul bordo del bottone secondario al passaggio del mouse. */
    --ui-bordo-massimo: #000000;

    /* Velo dell’attribuzione cartografica: deve restare leggibile sopra
       qualunque tassello della mappa, chiaro o scuro che sia. */
    --ui-barra-velo-attribuzione: rgba(255, 255, 255, 0.85);
}
/* Impaginazione comune alle due aree: colonna a piena altezza, cosi' il piede
   resta a fondo pagina anche sui contenuti brevi. Assorbe le utility
   "min-h-screen flex flex-col antialiased" che ogni route ripeteva sul body. */
.ui-page,
.ui-admin-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root,
.ui-page {
    /* --- Superfici e testo --- */
    --ui-bg: var(--ds-bg);
    --ui-public-reading: var(--ds-public-reading);
    --ui-public-video-opacity: var(--ds-public-video-opacity);
    --ui-public-panel: var(--ds-public-panel);
    --ui-public-panel-subtle: var(--ds-public-panel-subtle);
    --ui-public-footer: var(--ds-public-footer);
    --ui-public-video-veil: var(--ds-public-video-veil);
    --ui-surface: var(--ds-surface);
    --ui-surface-subtle: var(--ds-surface-subtle);
    --ui-surface-elevated: var(--ds-surface-elevated);
    --ui-text: var(--ds-text);
    --ui-heading: var(--ds-heading);
    --ui-muted: var(--ds-muted);
    --ui-inverse-text: var(--ds-inverse-text);

    /* --- Bordi --- */
    --ui-border-soft: var(--ds-border-soft);
    --ui-border-card: #cfc7b7;   /* Contorno esterno di card e pannelli, 1.9:1 su surface */
    --ui-border: var(--ds-border);
    --ui-border-input: var(--ds-border-input);

    /* --- Accento interattivo --- */
    --ui-accent: var(--ds-primary);
    --ui-accent-hover: var(--ds-primary-hover);
    --ui-accent-soft: var(--ds-primary-soft);
    --ui-accent-contrast: var(--ds-inverse-text);
    /* Accento caldo per etichette e sopratitoli, distinto dal colore azione. */
    --ui-accent-caldo: var(--ds-accent);
    --ui-accent-caldo-soft: var(--ds-accent-soft);

    /* --- Colore dell'azione --- */
    --ui-azione: var(--ds-primary);
    --ui-azione-hover: var(--ds-primary-hover);
    --ui-azione-scura: var(--ds-secondary);
    --ui-azione-scura-hover: var(--ds-secondary-hover);
    /* Bordo che si accende al passaggio del mouse su una scheda cliccabile. */
    --ui-bordo-hover: var(--ds-primary-light);
    --ui-focus: var(--ds-focus);
    --ui-focus-halo: var(--ds-focus-halo);

    /* --- Stati semantici condivisi --- */
    --ui-positive: var(--ds-success);
    --ui-positive-bg: var(--ds-success-bg);
    --ui-positive-border: var(--ds-success-border);
    --ui-attention: var(--ds-warning);
    --ui-attention-bg: var(--ds-warning-bg);
    --ui-attention-border: var(--ds-warning-border);
    --ui-danger: var(--ds-danger);
    --ui-danger-bg: var(--ds-danger-bg);
    --ui-danger-border: var(--ds-danger-border);
    --ui-info: var(--ds-info);
    --ui-info-bg: var(--ds-info-bg);
    --ui-info-border: var(--ds-info-border);
    --ui-overlay: var(--ds-secondary);
    --ui-overlay-text: var(--ds-inverse-text);
    --ui-overlay-text-muted: #cbd8d3;
    --ui-overlay-hover: var(--ds-secondary-hover);

    /* --- Densita': spaziature generose, respiro editoriale --- */
    --ui-gap: var(--ds-space-6);
    --ui-gap-tight: var(--ds-space-4);
    --ui-pad-block: var(--ds-space-8);
    --ui-pad-inline: var(--ds-space-6);
    --ui-row-pad-y: var(--ds-space-4);
    --ui-row-pad-x: var(--ds-space-5);

    /* --- Forma: angoli morbidi e accoglienti --- */
    --ui-radius-sm: var(--ds-radius-lg);
    --ui-radius: var(--ds-radius-xl);
    --ui-radius-lg: var(--ds-radius-2xl);

    /* --- Tipografia --- */
    --ui-font-base: var(--ds-font-base);
    --ui-font-sm: var(--ds-font-sm);
    --ui-font-xs: var(--ds-font-xs);
    --ui-line: var(--ds-line-relaxed);

    /* --- Controlli --- */
    --ui-control-min-h: 2.75rem; /* 44px: target touch WCAG 2.5.5 */

    /* Distanza fra l'etichetta e il proprio controllo. Appartiene al
       componente: sceglierla campo per campo nel markup e' il modo in cui
       una griglia di modulo smette di allinearsi. */
    --ui-field-gap: var(--ds-space-2);
    --ui-field-gap-compatto: var(--ds-space-1);
}

.ui-admin-page,
.ui-admin-auth {
    /* --- Superfici: neutro freddo, meno saturo del pubblico --- */
    --ui-bg: #f4f6f8;
    --ui-surface: #ffffff;
    --ui-surface-subtle: #eef1f5;
    --ui-surface-elevated: #ffffff;
    /* Rapporti misurati con tools/verifica-contrasti.php, non stimati. */
    --ui-text: #27313b;          /* 13.22:1 su bianco (WCAG AAA) */
    --ui-heading: #0f172a;       /* 17.85:1 su bianco (WCAG AAA) */
    --ui-muted: #4a5764;         /* 7.40:1 su bianco (WCAG AAA)  */

    /* --- Bordi piu' marcati: separano righe fitte senza pesare ---
       --ui-border deve reggere 3:1 sia su --ui-surface (#ffffff) sia su
       --ui-surface-subtle (#eef1f5), perche' delimita anche le righe filtro
       e le intestazioni di tabella. */
    --ui-border-soft: #dde3ea;
    --ui-border-card: #c8d1dc;   /* Contorno esterno di card e pannelli non interattivi */
    --ui-border: #7d8b9e;        /* 3.47:1 su bianco, 3.06:1 su surface-subtle (WCAG SC 1.4.11) */
    --ui-border-input: #6b7684;  /* 4.62:1 su bianco (WCAG SC 1.4.11) */

    /* --- Accento sobrio: ambra riservata a stato attivo e messa a fuoco --- */
    --ui-accent: #92400e;        /* 7.09:1 su bianco (WCAG AAA)  */
    --ui-accent-hover: #78350f;  /* 9.07:1 su bianco (WCAG AAA)  */
    --ui-accent-soft: #fef3c7;
    --ui-accent-contrast: #ffffff;
    --ui-accent-caldo: #92400e;
    --ui-focus: #92400e;
    --ui-focus-halo: rgba(146, 64, 14, 0.24);

    /* --- Densita': circa il 40% piu' compatta dell'area pubblica --- */
    --ui-gap: var(--ds-space-4);
    --ui-gap-tight: var(--ds-space-2);
    --ui-pad-block: var(--ds-space-5);
    --ui-pad-inline: var(--ds-space-4);
    --ui-row-pad-y: var(--ds-space-2);
    --ui-row-pad-x: var(--ds-space-3);

    /* --- Forma: angoli contenuti, registro strumentale --- */
    --ui-radius-sm: var(--ds-radius-xs);
    --ui-radius: var(--ds-radius-sm);
    --ui-radius-lg: var(--ds-radius-md);

    /* --- Tipografia: base ridotta per far entrare piu' dati a schermo --- */
    --ui-font-base: var(--ds-font-sm);
    --ui-font-sm: var(--ds-font-xs);
    --ui-font-xs: var(--ds-font-2xs);
    --ui-line: var(--ds-line-normal);

    /* Il target touch resta pieno: gli operatori lavorano da tablet sul campo. */
    --ui-control-min-h: 2.75rem;
}

/* --- Stampa su carta ---
   Il foglio e' bianco e l'inchiostro nero comunque, a prescindere dal tema a
   schermo e dall'area pubblica o di backoffice: sono gli unici due colori che
   non dipendono da nulla. Vivono qui perche' il layer dei token e' l'unico
   posto in cui un colore letterale e' legittimo. */
:root {
    --ui-stampa-fondo: #ffffff;
    --ui-stampa-testo: #000000;
    /* Grigi del foglio: la riga da compilare deve restare visibile anche
       fotocopiata, il piede e i bordi di servizio devono restare secondari. */
    --ui-stampa-bordo-tenue: #666666;
    --ui-stampa-riga: #999999;
    --ui-stampa-testo-tenue: #444444;
}

/* 2. GLOBAL RESET & BASE ELEMENTS */

*,
*::before,
*::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--ui-border-soft);
}

html {
    background-color: var(--ui-bg);
    color: var(--ui-text);
    scroll-behavior: smooth;
    /* Le due intestazioni del sito sono position: sticky; top: 0. Senza questo
       margine ogni salto interno - a partire dal link "Vai al contenuto
       principale" - porta il bersaglio esattamente sotto la barra, che lo
       nasconde: WCAG 2.2 SC 2.4.11 Focus Not Obscured (Minimum), livello AA. */
    scroll-padding-top: 5.5rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
}

body {
    background-color: var(--ui-bg);
    color: var(--ui-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--ds-font-base);
    line-height: var(--ds-line-relaxed);
    margin: 0;
    min-height: 100vh;
}

/* Azzeramento dei margini di default: la spaziatura e' governata dai token. */
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, pre {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* fieldset e legend arrivano con bordo, padding e margini propri del browser:
   la cornice, dove serve, la disegna il componente con le proprie utilita'.
   Il min-width azzerato evita che un fieldset imponga la larghezza del proprio
   contenuto a una griglia o a un contenitore flessibile. */
fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

legend {
    padding: 0;
}

/* I controlli di form non ereditano la tipografia per impostazione predefinita. */
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
    cursor: pointer;
}

button:disabled, [type="button"]:disabled, [type="submit"]:disabled {
    cursor: not-allowed;
}

textarea {
    resize: vertical;
}

/* Elementi sostituiti: block evita lo spazio sotto la linea di base. */
img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}

img, video {
    max-width: 100%;
    height: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    text-indent: 0;
}

a {
    color: inherit;
    text-decoration: inherit;
    text-underline-offset: 3px;
    transition: color var(--ds-transition-fast),
        background-color var(--ds-transition-fast),
        border-color var(--ds-transition-fast);
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

summary {
    display: list-item;
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

/* Selezione testo accessibile */
::selection {
    background-color: var(--ui-accent-soft);
    color: var(--ui-heading);
}

/* Indicatori :focus-visible centralizzati per tutti gli elementi interattivi */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: var(--ds-focus-ring-width) solid var(--ui-focus) !important;
    outline-offset: var(--ds-focus-ring-offset) !important;
}

/* ==========================================================================
   3. TYPOGRAPHY & MEASURE (WCAG 2.1 AA Leggibilità)
   ========================================================================== */
main h1, main h2, main h3, main h4, main h5, main h6 {
    color: var(--ui-heading);
    font-weight: 900;
    line-height: var(--ds-line-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin-top: 0;
}

main h1 {
    font-size: clamp(1.875rem, 4vw, 3rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
}

main h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    letter-spacing: -0.025em;
    line-height: 1.2;
}

main h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: var(--ds-line-snug);
}

main h4 {
    font-size: var(--ds-font-lg);
    line-height: var(--ds-line-normal);
}

/* Misura di riga ottimale per prevenire l'affaticamento visivo (~65 caratteri) */
main p,
main li,
.ui-prose p,
.ui-prose li {
    line-height: var(--ds-line-relaxed);
}

main p,
.ui-prose p {
    max-width: var(--ds-measure-reading);
}

.ui-prose {
    max-width: var(--ds-measure-reading);
}

.shadow-xs { box-shadow: var(--ds-shadow-1); }

/* ==========================================================================
   4. LAYOUT SHELL & GRIDS (Standard 4/8px Spacing)
   ========================================================================== */
/* Shell del contenuto. */
.ui-main,
.ui-shell {
    width: 100%;
    max-width: 80rem; /* 1280px */
    margin-inline: auto;
    padding-inline: var(--ds-space-4);
    padding-block: var(--ds-space-8);
}

/* Il contenuto occupa lo spazio residuo: tiene il piede a fondo pagina. */
.ui-main {
    flex: 1 1 auto;
}

/* Colonne piu' strette per moduli e contenuti di lettura. */
.ui-main-media { max-width: 64rem; }  /* 1024px: form estesi */
.ui-main-stretta { max-width: 56rem; }  /* 896px: moduli e profilo */

/* La homepage gestisce da se' i propri contenitori, sezione per sezione:
   qui la shell deve solo occupare l'altezza residua, senza vincoli di
   larghezza ne' spaziature proprie. */
.ui-main-fluida {
    max-width: none;
    padding-inline: 0;
    padding-block: 0;
}

/* A full-width fixed video starts below the opaque header. */
.ui-public-stage {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}
.ui-public-background {
    --ui-public-header-height: 5rem;
    position: fixed;
    inset: var(--ui-public-header-height) 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    z-index: var(--ds-z-media-background);
}
.ui-public-background-frame {
    position: relative;
    width: 100%;
    height: 100%;
}
.ui-public-background-frame img,
.ui-public-background-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.18s ease-out;
}
.ui-public-background-frame img { opacity: var(--ui-public-video-opacity); }
.ui-public-background-frame video {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.ui-public-background-frame.is-playing img { opacity: 0; }
.ui-public-background-frame.is-playing video { opacity: var(--ui-public-video-opacity); }
.ui-public-background-frame.is-playing video.ui-public-video-next { opacity: 0; }
.ui-public-background-frame.is-crossfading video.ui-public-video-current { opacity: 0; }
.ui-public-background-frame.is-crossfading video.ui-public-video-next { opacity: var(--ui-public-video-opacity); }
.ui-public-background-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ui-public-video-veil);
}
.ui-public-stage > .ui-main {
    --ui-muted: var(--ui-text);
    --ui-accent-caldo: var(--ds-accent-hover);
    position: relative;
    z-index: var(--ds-z-content);
    background: var(--ui-public-reading);
}
.ui-public-stage .ui-card,
.ui-public-stage .ui-superficie:not(.ui-map-canvas) {
    background: var(--ui-public-panel);
}
.ui-public-stage .home-carousel-card { background: var(--ui-public-panel) !important; }
.ui-public-stage .ui-superficie-attenuata,
.ui-public-stage .ui-pannello-storie-home {
    background: var(--ui-public-panel-subtle);
}
@media (prefers-reduced-motion: reduce) {
    .ui-public-background-frame.is-playing img { opacity: var(--ui-public-video-opacity); }
    .ui-public-background-frame.is-playing video { opacity: 0; }
}

/* Dimensione icona media. E' usata anche negli argomenti di ui_icon(), che
   non sono attributi class= e quindi non possono essere scoperti dal
   generatore del layer temporaneo. */
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }

/* Pagina di errore HTTP: scheda singola centrata sullo schermo. */
.ui-pagina-errore {
    align-items: center;
    justify-content: center;
    padding: var(--ds-space-4);
}

.ui-errore-scheda {
    width: 100%;
    max-width: 28rem;
    padding: var(--ds-space-8);
    text-align: center;
}

.ui-errore-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-inline: auto;
    border-radius: var(--ds-radius-2xl);
    background: var(--ui-accent-caldo-soft);
    font-size: var(--ds-font-3xl);
}

.ui-errore-titolo {
    margin-top: var(--ds-space-5);
    color: var(--ui-heading);
    font-size: var(--ds-font-2xl);
    font-weight: 900;
    letter-spacing: -0.02em;
}

.ui-errore-messaggio {
    margin-top: var(--ds-space-2);
    margin-inline: auto;
    color: var(--ui-muted);
    font-size: var(--ds-font-sm);
    line-height: var(--ds-line-relaxed);
}

.ui-errore-azione {
    display: inline-flex;
    width: 100%;
    margin-top: var(--ds-space-6);
    padding-block: var(--ds-space-3);
}

/* Schermate di autenticazione: colonna centrata su fondo scuro. */
.ui-main-auth {
    width: 100%;
    max-width: 28rem;
    flex: 0 1 auto;
}

.ui-main-auth.is-larga {
    max-width: 32rem;
}

@media (min-width: 640px) {
    .ui-main,
    .ui-shell {
        padding-inline: var(--ds-space-6);
        padding-block: var(--ds-space-12);
    }
}

@media (min-width: 1024px) {
    .ui-main,
    .ui-shell {
        padding-inline: var(--ds-space-8);
        padding-block: var(--ds-space-16);
    }
}

/* --- Responsive Grid System Utilities --- */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-12 { grid-column: span 12 / span 12; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* Breakpoint sm: >= 640px (Tablet compatto / schermi medi) */
@media (min-width: 640px) {
    .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    .sm\:col-span-1 { grid-column: span 1 / span 1; }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:col-span-3 { grid-column: span 3 / span 3; }
    .sm\:col-span-4 { grid-column: span 4 / span 4; }
    .sm\:col-span-5 { grid-column: span 5 / span 5; }
    .sm\:col-span-6 { grid-column: span 6 / span 6; }
    .sm\:col-span-7 { grid-column: span 7 / span 7; }
    .sm\:col-span-12 { grid-column: span 12 / span 12; }

    .sm\:gap-3 { gap: 0.75rem; }
    .sm\:gap-4 { gap: 1rem; }
    .sm\:gap-5 { gap: 1.25rem; }
    .sm\:gap-6 { gap: 1.5rem; }
}

/* Breakpoint md: >= 768px (Tablet orizzontale / laptop) */
@media (min-width: 768px) {
    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:grid-cols-\[1\.1fr_\.9fr\] { grid-template-columns: 1.1fr 0.9fr; }

    .md\:col-span-1 { grid-column: span 1 / span 1; }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:col-span-4 { grid-column: span 4 / span 4; }
    .md\:col-span-5 { grid-column: span 5 / span 5; }
    .md\:col-span-6 { grid-column: span 6 / span 6; }
    .md\:col-span-7 { grid-column: span 7 / span 7; }
    .md\:col-span-12 { grid-column: span 12 / span 12; }
}

/* Breakpoint lg: >= 1024px (Desktop) */
@media (min-width: 1024px) {
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:grid-cols-\[1\.5fr_1fr_1fr_1fr_auto\] { grid-template-columns: 1.5fr 1fr 1fr 1fr auto; }

    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:col-span-5 { grid-column: span 5 / span 5; }
    .lg\:col-span-6 { grid-column: span 6 / span 6; }
    .lg\:col-span-7 { grid-column: span 7 / span 7; }
    .lg\:col-span-8 { grid-column: span 8 / span 8; }
    .lg\:col-span-12 { grid-column: span 12 / span 12; }
    .lg\:items-center { align-items: center; }
    .lg\:items-start { align-items: flex-start; }
    .lg\:gap-10 { gap: 2.5rem; }
}

/* ==========================================================================
   5. CARDS & SURFACES STANDARDIZZATE
   ========================================================================== */
.ui-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ds-radius-2xl);
    box-shadow: var(--ds-shadow-1);
    transition: transform var(--ds-transition-fast), box-shadow var(--ds-transition-fast), border-color var(--ds-transition-fast);
}

.ui-card-hover {
    transition: transform var(--ds-transition-fast), box-shadow var(--ds-transition-fast), border-color var(--ds-transition-fast);
}

.ui-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--ds-shadow-3);
    border-color: var(--ui-bordo-hover);
}

/* ==========================================================================
   6. FORM CONTROLS & INPUT STANDARDIZZATI
   ========================================================================== */
/* .ui-filtro-campo e' escluso qui invece che rincorso dopo: la riga filtri e'
   un componente con forma propria, e questa regola generica dei moduli e' piu'
   specifica di una classe secca. Rincorrerla significava scrivere selettori
   sempre piu' lunghi; toglierla di mezzo una volta e' la stessa cosa detta
   meglio. */
main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.ui-filtro-campo),
main select:not(.ui-filtro-campo),
main textarea,
.ui-input {
    min-height: 2.75rem; /* 44px touch compliance */
    width: 100%;
    padding: var(--ds-space-2) var(--ds-space-3);
    border: 1.5px solid var(--ui-border-input);
    border-radius: var(--ds-radius-md);
    background-color: var(--ui-surface);
    color: var(--ui-heading);
    font-family: inherit;
    font-size: var(--ds-font-sm);
    box-shadow: var(--ds-shadow-1);
    transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast), background-color var(--ds-transition-fast);
}

main textarea {
    min-height: 7rem;
    padding: var(--ds-space-3);
}

main input::placeholder,
main textarea::placeholder {
    color: var(--ui-muted);
    opacity: 0.9;
}

/* Stati Interattivi Form Controls */
main input:hover:not(:disabled),
main select:hover:not(:disabled),
main textarea:hover:not(:disabled) {
    border-color: var(--ui-azione);
}

main input:focus,
main select:focus,
main textarea:focus {
    border-color: var(--ui-azione);
    box-shadow: 0 0 0 3px var(--ds-focus-halo);
    outline: none;
}

main input[aria-invalid="true"],
main select[aria-invalid="true"],
main textarea[aria-invalid="true"] {
    border-color: var(--ui-danger) !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.22) !important;
}

main input:disabled,
main select:disabled,
main textarea:disabled {
    background-color: var(--ui-surface-subtle);
    border-color: var(--ui-border-soft);
    color: var(--ui-muted);
    cursor: not-allowed;
    opacity: 0.75;
}

/* Checkbox & Radio standardizzati */
main input[type="checkbox"],
main input[type="radio"] {
    accent-color: var(--ui-azione);
    width: 1.125rem;
    height: 1.125rem;
    /* Mantiene la casella integra nelle etichette flessibili. */
    flex-shrink: 0;
    border-radius: var(--ds-radius-xs);
    cursor: pointer;
}

/* ==========================================================================
   7. BUTTON HIERARCHY & CONTROLS STANDARDIZZATI
   ========================================================================== */
.ui-btn,
.ui-btn-sm,
.ui-btn-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    border-radius: var(--ds-radius-xl);
    font-weight: 700;
    font-size: var(--ds-font-sm);
    line-height: 1.25;
    text-decoration: none !important;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--ds-transition-fast), border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast), transform var(--ds-transition-fast);
}

.ui-btn {
    min-height: 2.75rem; /* 44px standard */
    padding: var(--ds-space-2) var(--ds-space-5);
}

.ui-azione-nuovo {
    min-width: 7rem;
    white-space: nowrap;
}

.ui-btn-sm {
    min-height: 2.25rem; /* 36px desktop */
    padding: var(--ds-space-1) var(--ds-space-3);
    font-size: var(--ds-font-xs);
    border-radius: var(--ds-radius-lg);
}

/* Azione principale di una pagina o di un modulo: hero pubblico, invio del */
.ui-btn-lg {
    min-height: 3rem; /* 48px */
    padding: var(--ds-space-3) var(--ds-space-6);
    font-size: var(--ds-font-base);
}

@media (pointer: coarse) {
    .ui-btn-sm {
        min-height: 2.75rem; /* 44px su touch per conformità WCAG */
        padding-inline: var(--ds-space-4);
    }

    /* Gli altri comandi che non sono pulsanti e restavano sotto il bersaglio. */
    /* .ui-email-template-summary dichiara 2.25rem per conto proprio e vince
       per specificita': va nominata, altrimenti resta l'unico riassunto sotto
       il bersaglio. */
    summary,
    summary.ui-email-template-summary,
    .ui-nota-indicatore {
        min-height: 2.75rem;
    }

    /* Il riassunto porta il proprio testo al centro invece che in cima al
       riquadro alto 44 px. "list-item" perde il triangolo predefinito: qui non
       c'e' da perdere niente, perche' questi riassunti hanno gia' un proprio
       segno o nessuno. */
    summary {
        display: flex;
        align-items: center;
        gap: var(--ds-space-2);
    }

    /* Le note sanitarie sono una sigla dentro una riga di pastiglie: qui il
       bersaglio deve crescere in tutte e due le direzioni. */
    .ui-nota-indicatore {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 3.25rem;
    }

    /* Una pastiglia che e' anche un collegamento e' un comando. */
    a.ui-badge {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    .ui-breadcrumb a,
    .ui-admin-footer a,
    .ui-admin-logo {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    /* Anche sul sito pubblico: una voce di menu o di piede sta in un <li> tutto
       suo, quindi e' navigazione e non una parola dentro una frase. Erano alte
       21 px, impilate a quattro pixel di distanza. I marchi in testata e nel
       piede sono collegamenti alla home ed erano 32 px. */
    footer li > a,
    nav li > a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    .ui-public-brand > a,
    footer a.ui-titolo {
        min-height: 2.75rem;
    }

    /* La casella di spunta resta piccola per convenzione, ma non sotto i 24 px
       di WCAG 2.5.8; l'etichetta che la contiene resta il bersaglio vero. */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 1.5rem;
        min-height: 1.5rem;
    }

    /* Su un telefono un indirizzo e un numero non sono testo: sono il comando
       per scrivere e per chiamare. Erano alti 23 px nel riquadro dei contatti
       di una richiesta, cioe' un pixel sotto il minimo. */
    a[href^="tel:"],
    a[href^="mailto:"] {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    /* Un collegamento che occupa una riga per se' e' un comando e cresce; uno */
    a.ui-link,
    a.ui-testo-accento {
        min-height: 2.75rem;
    }

    /* I pallini del carosello sono 12x12 e devono restarlo: ingrandirli
       cambierebbe il disegno. Cresce solo l'area da premere, con un riempimento
       trasparente ritagliato sul contenuto - il pallino resta della sua misura,
       il dito ne trova 44. */
    .home-carousel-dot {
        box-sizing: content-box;
        padding: 1.0625rem 1rem;
        background-clip: content-box;
    }

    .home-carousel-dots {
        gap: 0;
    }
}

.ui-btn:active {
    transform: translateY(1px);
}

.ui-btn[disabled],
.ui-btn:disabled,
button[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
    box-shadow: none !important;
    transform: none !important;
}

/* Varianti Bottoni */
.ui-btn-primary {
    background-color: var(--ui-azione);
    border-color: var(--ui-azione-hover);
    color: var(--ui-inverse-text) !important;
    box-shadow: var(--ds-shadow-1);
}
.ui-btn-primary:hover {
    background-color: var(--ui-azione-hover);
    border-color: var(--ui-azione-scura);
    box-shadow: var(--ds-shadow-2);
}

.ui-btn-secondary {
    background-color: var(--ui-azione-scura);
    border-color: var(--ui-azione-scura-hover);
    color: var(--ui-inverse-text) !important;
    box-shadow: var(--ds-shadow-1);
}
.ui-btn-secondary:hover {
    background-color: var(--ui-azione-scura-hover);
    border-color: var(--ui-bordo-massimo);
    box-shadow: var(--ds-shadow-2);
}

.ui-btn-outline {
    background-color: var(--ui-surface);
    border-color: var(--ui-border-soft);
    color: var(--ui-heading) !important;
    box-shadow: var(--ds-shadow-1);
}
.ui-btn-outline:hover {
    background-color: var(--ui-surface-subtle);
    border-color: var(--ui-border);
    color: var(--ui-heading) !important;
    box-shadow: var(--ds-shadow-2);
}

.ui-btn-danger {
    background-color: var(--ui-danger);
    border-color: var(--ui-danger-forte);
    color: var(--ui-inverse-text) !important;
    box-shadow: var(--ds-shadow-1);
}
.ui-btn-danger:hover {
    background-color: var(--ui-danger-forte);
    border-color: var(--ui-danger-forte-hover);
    box-shadow: var(--ds-shadow-2);
}

/* Links semantici */
.ui-link {
    color: var(--ui-azione);
    font-weight: 700;
    text-underline-offset: 3px;
    text-decoration: none;
    transition: color var(--ds-transition-fast);
}
.ui-link:hover {
    color: var(--ui-azione-hover);
    text-decoration: underline;
}

/* Touch Target Utility */
.ui-touch-target {
    min-height: 2.75rem;
    min-width: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   8. MEDIA FITTING & CLS PREVENTIONS (Aspect Ratios Espliciti)
   ========================================================================== */
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }

@media (min-width: 1024px) {
    .lg\:aspect-auto { aspect-ratio: auto; }
}

main .aspect-\[4\/3\],
main .aspect-\[16\/9\],
.catalogo-card-media,
.home-carousel-img-container,
.admin-slide-preview-box {
    position: relative;
    overflow: hidden;
    background-color: var(--ui-surface-subtle);
    border-radius: var(--ds-radius-xl);
}

main .aspect-\[4\/3\] > img,
main .aspect-\[16\/9\] > img,
.catalogo-card-media > img,
.home-arrival-card img:not(.home-carousel-img-bg),
.gatto-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-carousel-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-xl);
    background-color: var(--ui-carosello-media-bg);
}

.home-carousel-img-bg,
.admin-slide-img-bg {
    position: absolute;
    inset: -15%;
    width: 130%;
    height: 130%;
    object-fit: cover;
    object-position: center;
    filter: blur(28px) brightness(0.95) saturate(0.85);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
    z-index: var(--ds-z-media-background);
}

.home-carousel-img-main,
.home-carousel-img,
.admin-slide-img-main {
    position: relative;
    z-index: var(--ds-z-media);
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center;
    filter: drop-shadow(0 10px 24px rgba(24, 51, 44, 0.18));
}

.home-carousel-img-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--ds-z-media-overlay);
    background: radial-gradient(circle at center, transparent 55%, var(--ui-carosello-velo) 100%);
}

.admin-slide-preview-box {
    border-radius: var(--ds-radius-xl);
    aspect-ratio: 16 / 9;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ui-surface-subtle);
}

/* ==========================================================================
   9. STATUS BADGES, PILLS & ALERTS
   ========================================================================== */
.ui-badge-stato-new {
    background-color: var(--ui-attention-bg);
    color: var(--ui-attention);
    border-color: var(--ui-attention-border);
}

.ui-badge-stato-working {
    background-color: var(--ui-info-bg);
    color: var(--ui-info);
    border-color: var(--ui-info-border);
}

.ui-badge-stato-done {
    background-color: var(--ui-positive-bg);
    color: var(--ui-positive);
    border-color: var(--ui-positive-border);
}

.ui-badge-stato-muted {
    background-color: var(--ui-surface-subtle);
    color: var(--ui-text);
    border-color: var(--ui-border-soft);
}

.ui-badge-stato-danger {
    background-color: var(--ui-danger-bg);
    color: var(--ui-danger);
    border-color: var(--ui-danger-border);
}

/* La pastiglia di stato porta la propria forma: le due sezioni che la usano
   ripetevano padding, bordo e transizione addosso a ogni ancora, e la stessa
   coppia di utility tipografiche su dodici span. Bastava che una si scostasse
   - ed era successo: l'etichetta di "Tutte" era l'unica attenuata - perche' la
   fila di sei riquadri perdesse la sua simmetria. */
.ui-filtro-stato {
    display: block;
    padding: var(--ds-space-3);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ds-radius-2xl);
    background: var(--ui-surface);
    color: var(--ui-text);
    transition: border-color var(--ds-transition-fast), background-color var(--ds-transition-fast);
}

.ui-filtro-stato > span {
    display: block;
    font-size: var(--ds-font-3xs);
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ui-filtro-stato > strong {
    display: block;
    font-size: var(--ds-font-lg);
    font-weight: 900;
    line-height: 1.2;
}

.ui-filtro-stato:hover {
    border-color: var(--ui-border);
    background: var(--ui-surface-subtle);
}

.ui-filtro-stato.is-active {
    box-shadow: 0 0 0 2px var(--ui-focus-halo);
}

.ui-filtro-stato.is-accento {
    color: var(--ui-accent);
}

.ui-filtro-stato.is-accento.is-active {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
}

.ui-filtro-stato.is-informativo {
    color: var(--ui-info);
}

.ui-filtro-stato.is-informativo.is-active {
    border-color: var(--ui-info-border);
    background: var(--ui-info-bg);
}

.ui-filtro-stato.is-attenzione {
    color: var(--ui-attention);
}

.ui-filtro-stato.is-attenzione.is-active {
    border-color: var(--ui-attention-border);
    background: var(--ui-attention-bg);
}

.ui-filtro-stato.is-positivo {
    color: var(--ui-positive);
}

.ui-filtro-stato.is-positivo.is-active {
    border-color: var(--ui-positive-border);
    background: var(--ui-positive-bg);
}

.ui-filtro-stato.is-neutro.is-active {
    border-color: var(--ui-border);
    background: var(--ui-surface-subtle);
}

/* Empty States */
.ui-empty {
    border: 2px dashed var(--ui-border);
    border-radius: var(--ds-radius-3xl);
    background-color: var(--ui-surface);
    padding: var(--ds-space-12) var(--ds-space-6);
    text-align: center;
}

/* L'esito della pagina: una frase e una sola azione consigliata.
   Piu' alto di un .ui-alert perche' non e' un avviso di passaggio ma il primo
   contenuto della pagina, quello che dice come stanno le cose prima dei
   numeri. Il colore segue lo stato; il testo resta leggibile anche in
   monocromia, perche' la frase dice gia' tutto da sola. */
.ui-esito-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-4);
    margin-top: var(--ui-gap-tight);
    padding: var(--ds-space-4) var(--ds-space-5);
    border: 1px solid;
    border-radius: var(--ui-radius);
}

.ui-esito-pagina-testo {
    flex: 1 1 18rem;
    min-width: 0;
}

/* Scala con --ui-font-base e non con una misura fissa: sotto i 640 px i token
   ui-* scendono di un gradino, e una frase d'apertura che non scendesse con
   loro diventerebbe il testo piu' grande della pagina su uno schermo piccolo. */
.ui-esito-pagina-frase {
    font-size: var(--ui-font-base);
    font-weight: 700;
    line-height: var(--ui-line);
}

.ui-esito-pagina-dettaglio {
    margin-top: var(--ds-space-1);
    font-size: var(--ui-font-sm);
    font-weight: 500;
    line-height: var(--ds-line-relaxed);
}

/* La sola azione consigliata: il form che a volte la contiene non deve
   aggiungere un margine proprio ne' mandare a capo il pulsante. */
.ui-esito-pagina-azione,
.ui-esito-pagina-azione > form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    margin: 0;
}

.ui-esito-positivo {
    background: var(--ui-positive-bg);
    border-color: var(--ui-positive-border);
    color: var(--ui-positive);
}

.ui-esito-attenzione {
    background: var(--ui-attention-bg);
    border-color: var(--ui-attention-border);
    color: var(--ui-attention);
}

.ui-esito-critico {
    background: var(--ui-danger-bg);
    border-color: var(--ui-danger-border);
    color: var(--ui-danger);
}

.ui-esito-neutro {
    background: var(--ui-info-bg);
    border-color: var(--ui-info-border);
    color: var(--ui-info);
}

/* Dettagli tecnici: percorsi, dimensioni, identificativi, contesti.
   La forma unica valida per tutto il portale.
   Chiuso di default, con un bersaglio tattile pieno sul riassunto. */
.ui-dettagli-tecnici > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    min-height: 2.75rem;
    padding: var(--ds-space-2) var(--ds-space-3);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-subtle);
    color: var(--ui-azione);
    cursor: pointer;
    font-size: var(--ui-font-sm);
    font-weight: 700;
    list-style: none;
    transition: background-color var(--ds-transition-fast), border-color var(--ds-transition-fast);
}

.ui-dettagli-tecnici > summary::-webkit-details-marker {
    display: none;
}

.ui-dettagli-tecnici > summary::after {
    width: 0.625rem;
    height: 0.625rem;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: '';
    transform: rotate(45deg) translateY(-0.15rem);
    transition: transform var(--ds-transition-fast);
}

.ui-dettagli-tecnici > summary:hover,
.ui-dettagli-tecnici > summary:focus-visible {
    border-color: var(--ui-azione);
    background: var(--ui-surface);
}

.ui-dettagli-tecnici[open] > summary {
    border-color: var(--ui-border);
}

.ui-dettagli-tecnici[open] > summary::after {
    transform: rotate(225deg) translateY(-0.15rem);
}

.ui-dettagli-tecnici-corpo {
    margin-top: var(--ds-space-2);
    padding: var(--ds-space-3);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-subtle);
}

.ui-dettagli-tecnici-lista {
    display: grid;
    gap: var(--ds-space-2);
    font-size: var(--ui-font-xs);
}

@media (min-width: 640px) {
    .ui-dettagli-tecnici-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ui-dettagli-tecnici-lista > div {
    display: grid;
    gap: var(--ds-space-half);
    /* Un percorso UNC o un contesto JSON non hanno spazi dove andare a capo:
       senza questo allargano la colonna e con essa la pagina. */
    overflow-wrap: anywhere;
}

.ui-dettagli-tecnici-lista dt {
    color: var(--ui-muted);
    font-weight: 800;
}

.ui-dettagli-tecnici-lista dd {
    color: var(--ui-text);
}

/* L'elenco dei problemi trovati, dentro i Dettagli tecnici: un elenco puntato
   vero, perche' sono voci separate e non un paragrafo. */
.ui-dettagli-tecnici-problemi {
    margin-top: var(--ds-space-3);
    padding-left: var(--ds-space-5);
    list-style: disc;
    font-size: var(--ui-font-xs);
    line-height: var(--ds-line-relaxed);
}

/* Tabelle */
.ui-table-wrapper {
    width: 100%;
    /* Il contenitore che scorre deve anche essere il blocco di riferimento dei */
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--ds-radius-2xl);
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border-soft);
    box-shadow: var(--ds-shadow-1);
}

/* Elenchi dati del backoffice: densita' e controlli ispirati a un foglio di calcolo. */
.ui-data-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ds-space-3);
    margin-top: 0;
    padding: var(--ds-space-3) var(--ds-space-4);
    color: var(--ui-text);
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border);
    border-top: 0;
    border-radius: 0 0 var(--ds-radius-xl) var(--ds-radius-xl);
}
.ui-data-riepilogo { font-weight: 700; }
.ui-data-toolbar-azioni,
.ui-data-per-page,
.ui-data-paginazione {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}
.ui-data-per-page { font-weight: 700; }
/* Fuori da una cella la larghezza la decide il contenuto: dentro un'etichetta
   in linea un campo al 100% spingerebbe fuori la propria didascalia. */
.ui-data-per-page .ui-filtro-campo,
.ui-filtro-campo-auto { width: auto; min-width: 76px; }
.ui-btn-excel {
    color: var(--ui-inverse-text);
    background: var(--ui-azione);
    border-color: var(--ui-azione);
}
.ui-btn-excel:hover { background: var(--ui-azione-hover); }
.ui-data-paginazione {
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--ds-space-4);
}
.ui-data-pagina {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ds-radius-md);
    font-weight: 700;
}
.ui-data-pagina.is-active {
    color: var(--ui-inverse-text);
    background: var(--ui-azione);
    border-color: var(--ui-azione);
}
.ui-btn.is-disabled,
.ui-btn-sm.is-disabled { opacity: .5; pointer-events: none; }
.ui-table-wrapper.ui-table-wrapper-con-toolbar { border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0; }
.ui-data-riga-dettagli > td { padding: var(--ds-space-2); background: var(--ui-surface-subtle); }
/* La cella azioni ha una sola classe: .ui-cella-azioni (sezione 12). Qui viveva
   .ui-data-row-actions, gemella quasi identica a 1300 righe di distanza, usata
   da due sezioni su sette. Dentro .ui-tabella-operativa la classe superstite
   riceve gia' lo stesso flex-wrap: nowrap. */
.ui-data-detail-toggle { white-space: nowrap; }
@media (max-width: 639px) {
    .ui-data-toolbar,
    .ui-data-toolbar-azioni { align-items: stretch; flex-direction: column; }
    .ui-data-per-page { justify-content: space-between; }
}

/* Dettaglio delle pratiche: su smartphone la conversazione e la prossima
   azione precedono sempre anagrafica e pannelli di consultazione. */
.ui-pratica-layout {
    min-width: 0;
}

.ui-pratica-colonna {
    display: contents;
}

.ui-pratica-conversazione {
    order: 1;
    min-width: 0;
}

.ui-pratica-azioni {
    order: 2;
    min-width: 0;
}

.ui-pratica-dettagli {
    order: 3;
    min-width: 0;
}

.ui-pratica-secondario {
    order: 4;
    min-width: 0;
}

@media (min-width: 1024px) {
    .ui-pratica-conversazione {
        grid-column: 1;
        grid-row: 1;
    }

    .ui-pratica-azioni {
        grid-column: 2;
        grid-row: 1 / span 3;
    }

    .ui-pratica-dettagli,
    .ui-pratica-secondario {
        grid-column: 1;
    }
}

table th {
    font-size: var(--ds-font-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ui-muted);
    font-weight: 800;
}

/* ==========================================================================
   10. HERO, CAROUSELS & HOMEPAGE COMPONENTS
   ========================================================================== */
.ui-hero {
    background: linear-gradient(135deg, var(--ui-hero-da) 0%, var(--ui-hero-mid) 55%, var(--ui-hero-a) 100%);
    border-color: var(--ui-hero-bordo) !important;
    border-radius: var(--ds-radius-2xl);
    color: var(--ui-heading);
}
.ui-hero h1, .ui-hero strong { color: var(--ui-heading); }
.ui-hero p { color: var(--ui-text); }
.ui-hero .ui-btn, .ui-hero .ui-btn span { color: var(--ui-inverse-text) !important; }
.ui-hero .ui-btn-outline,
.ui-hero .ui-btn-outline span { color: var(--ui-heading) !important; }
.ui-hero-eyebrow { background: var(--ui-hero-eyebrow-bg); border: 1px solid var(--ui-hero-eyebrow-bordo); color: var(--ui-accent-hover); }
.ui-hero h1 span { color: var(--ui-accent-caldo); }
.home-carousel-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-soft) !important;
    border-radius: var(--ds-radius-2xl);
    box-shadow: var(--ds-shadow-2) !important;
    overflow: hidden;
    padding: var(--ds-space-4);
}
.home-carousel-badge {
    align-items: flex-start;
    background: var(--ui-accent-soft) !important;
    border: 1px solid var(--ui-hero-eyebrow-bordo) !important;
    color: var(--ui-azione-hover) !important;
    border-radius: var(--ds-radius-full);
    display: inline-flex;
    gap: var(--ds-space-1);
    max-width: 100%;
    padding: var(--ds-space-1) var(--ds-space-3);
    font-size: var(--ds-font-xs);
    font-weight: 700;
    line-height: 1.25;
}
.home-carousel-badge > span {
    min-width: 0;
    overflow-wrap: anywhere;

    /* Al massimo due righe. Il badge nomina la fondazione dentro una pillola:
       un nome lungo su smartphone la faceva crescere in verticale finche'
       voleva, spingendo giu' titolo e call to action della campagna. Due righe
       bastano ai nomi reali; oltre, l'ellissi dice che il nome continua senza
       rubare altezza alla slide. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.home-carousel-badge > svg {
    flex: 0 0 auto;
}
/* Campo di ricerca con icona. L'icona sta dentro il campo e non accanto: un
   campo di ricerca senza segno grafico si legge come un campo di testo
   qualunque, e dove l'etichetta e' solo per lettori di schermo il segnaposto
   resta l'unica cosa che dice cosa scriverci. L'icona e' decorativa, non
   riceve il puntatore e non sostituisce l'etichetta. */
.ui-campo-cerca {
    position: relative;
    display: block;
}
.ui-campo-cerca-icona {
    position: absolute;
    left: var(--ds-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-muted);
    pointer-events: none;
}
/* La regola generica dei campi include quattro :not(): il selettore completo
   evita che il testo finisca sotto la lente. */
.ui-campo-cerca > input.ui-input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    padding-left: 2.5rem;
}

.home-carousel-title { color: var(--ui-heading) !important; text-shadow: none !important; }
.home-carousel-text { color: var(--ui-text) !important; }
.home-carousel-btn-primary {
    background-color: var(--ui-azione) !important;
    color: var(--ui-inverse-text) !important;
    border-radius: var(--ds-radius-xl);
    padding: var(--ds-space-3) var(--ds-space-5);
    font-weight: 700;
}
.home-carousel-btn-primary:hover {
    background-color: var(--ui-azione-hover) !important;
    box-shadow: var(--ds-shadow-2);
}
.home-carousel-btn-secondary {
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-soft) !important;
    color: var(--ui-heading) !important;
    border-radius: var(--ds-radius-xl);
    padding: var(--ds-space-3) var(--ds-space-5);
    font-weight: 700;
}
.home-carousel-btn-secondary:hover {
    background-color: var(--ui-surface-subtle) !important;
}

.home-arrivals-track {
    display: flex;
    gap: var(--ds-space-4);
    overflow-x: auto;
    padding: var(--ds-space-1) 0 var(--ds-space-4);
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.home-arrival-card {
    flex: 0 0 min(82vw, 20rem);
    scroll-snap-align: start;
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ds-radius-2xl);
    background-color: var(--ui-surface);
}
@media (min-width: 640px) { .home-arrival-card { flex-basis: calc(50% - var(--ds-space-2)); } }
@media (min-width: 1024px) { .home-arrival-card { flex-basis: calc((100% - var(--ds-space-8)) / 3); } }

.home-carousel-track { min-height: 22.5rem; }

.home-carousel-controls {
    align-items: center;
    background: transparent;
    border-top: 1px solid var(--ui-border-soft);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    justify-content: center;
    padding: var(--ds-space-3) var(--ds-space-4);
}

.home-arrivals-controls {
    align-items: center;
    border-top: 1px solid var(--ui-border-soft);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    justify-content: center;
    padding: var(--ds-space-3) var(--ds-space-4);
}

.home-carousel-control,
.home-arrivals-control {
    align-items: center;
    background: var(--ui-barra-velo-controllo);
    border: 1px solid var(--ui-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-2);
    color: var(--ui-heading);
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: var(--ds-space-2);
    cursor: pointer;
    transition: background-color var(--ds-transition-fast), color var(--ds-transition-fast), border-color var(--ds-transition-fast);
}
.home-carousel-pause-label,
.home-arrivals-pause { min-width: auto; padding-inline: var(--ds-space-3); }
.home-carousel-pause.is-paused {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: var(--ui-inverse-text);
}
.home-carousel-control:hover,
.home-arrivals-control:hover {
    background: var(--ui-azione);
    border-color: var(--ui-azione);
    color: var(--ui-inverse-text);
}

.home-carousel-dots { align-items: center; display: flex; gap: var(--ds-space-1); }
.home-carousel-dot {
    background: var(--ui-carosello-dot);
    border-radius: var(--ds-radius-full);
    height: 0.625rem;
    width: 0.625rem;
    transition: width var(--ds-transition-fast), background-color var(--ds-transition-fast);
}
.home-carousel-dot.is-active { background: var(--ui-azione); width: 1.5rem; }
/* ==========================================================================
   11. CATALOGO, SCHEDE E PROFILI GATTO
   ========================================================================== */
.catalogo-hero {
    display: grid;
    gap: var(--ds-space-6);
    align-items: center;
}
.catalogo-intro { max-width: 46rem; }
.catalogo-video {
    position: relative;
    width: 100%;
    margin: 0;
    background-color: transparent;
}
.catalogo-video-media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background-color: transparent;
    mix-blend-mode: multiply;
    object-fit: contain;
}
.catalogo-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    min-width: 3.25rem;
    min-height: 3.25rem;
    padding: 0;
    transform: translate(-50%, -50%);
}
.catalogo-video-play:active {
    transform: translate(-50%, calc(-50% + 1px));
}
.catalogo-video-play-icon {
    width: 1.25rem;
    height: 1.25rem;
}
@media (min-width: 768px) {
    .catalogo-hero {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
        gap: var(--ds-space-8);
    }
}
.catalogo-filter-panel {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ds-radius-2xl);
    box-shadow: var(--ds-shadow-1);
    padding: 0;
}
.catalogo-filter-grid {
    display: grid;
    gap: var(--ds-space-3);
}
.catalogo-filter-toggle {
    display: flex;
    width: 100%;
}
.catalogo-filter-body { padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-4); }
/* Il campo di ricerca porta il controllo dentro un involucro: la distanza
   dall'etichetta non gli arriva dalla regola sul figlio diretto. */
.catalogo-filter-search > .ui-campo-cerca { margin-top: var(--ui-field-gap-compatto); }
/* Con le etichette sopra i campi il pulsante deve scendere: la riga si allinea
   sul fondo dei controlli, non sulla cima delle etichette. */
.catalogo-filter-submit { align-self: end; }

@media (min-width: 640px) {
    .catalogo-filter-panel { padding: var(--ds-space-4); }
    .catalogo-filter-toggle { display: none; }
    .catalogo-filter-body { padding: 0; }
    .catalogo-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalogo-filter-search,
    .catalogo-filter-submit { grid-column: span 2 / span 2; }
}

@media (min-width: 768px) {
    .catalogo-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .catalogo-filter-fondazione { grid-column: span 2 / span 2; }
    .catalogo-filter-submit { grid-column: span 1 / span 1; }
}

@media (min-width: 1024px) {
    .catalogo-filter-grid {
        grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)) minmax(0, auto);
    }
    .catalogo-filter-search,
    .catalogo-filter-fondazione { grid-column: span 1 / span 1; }
}
.catalogo-results-heading { border-color: var(--ui-border-soft); }
.catalogo-grid {
    display: grid;
    gap: var(--ds-space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.catalogo-card {
    border: 1px solid var(--ui-border-soft) !important;
    border-radius: var(--ds-radius-2xl);
    background-color: var(--ui-surface);
}
.catalogo-card:hover {
    border-color: var(--ui-bordo-hover) !important;
    box-shadow: var(--ds-shadow-2);
}
.catalogo-card-media { background-color: var(--ui-accent-soft) !important; }
.catalogo-card-body { padding-top: var(--ds-space-5); }
.catalogo-card-body > span { color: var(--ui-azione-hover) !important; }
.catalogo-card-action { padding-top: 0; }

.ui-fondazione-necessita {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    margin-top: var(--ds-space-3);
}

.gatto-profile { align-items: start; }
.gatto-gallery,
.gatto-details {
    border: 1px solid var(--ui-border-soft) !important;
    border-radius: var(--ds-radius-2xl);
    background-color: var(--ui-surface);
    box-shadow: var(--ds-shadow-1) !important;
}
/* ==========================================================================
   12. HEADER, FOOTER & PORTALE GESTIONALE
   ========================================================================== */
/* Il portale gestionale e' escluso dal contenimento a 80rem: la barra superiore
   deve attraversare tutta la larghezza, in continuita' con la barra laterale. */
.ui-site-header > div,
.ui-site-footer > div {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
}
.ui-site-header, .ui-admin-header { box-shadow: var(--ds-shadow-2); }
.ui-site-header {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border-soft) !important;
    color: var(--ui-heading) !important;
}
.ui-site-header .ui-public-nav-link,
.ui-site-header .ui-public-nav-login { color: var(--ui-text); }
.ui-site-header .ui-public-nav-link[aria-current="page"] {
    background: var(--ui-azione) !important;
    color: var(--ui-inverse-text) !important;
}
.ui-site-header .ui-public-nav-link[aria-current="page"]:hover {
    background: var(--ui-azione-hover) !important;
    color: var(--ui-inverse-text) !important;
}
.ui-site-header .ui-public-nav-link:hover,
.ui-site-header .ui-public-nav-login:hover {
    background: var(--ui-nav-hover-pubblico) !important;
    color: var(--ui-heading) !important;
}
.ui-site-header .ui-public-nav-login { border: 1px solid var(--ui-border); }
.ui-site-header > div { flex-wrap: wrap; }
.ui-public-brand { min-width: 0; }
/* Stessa scala delle voci accanto: nel menu compatto "Home" non deve leggersi piu' grande. */
.ui-public-nav-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: var(--ds-space-1-5) var(--ds-space-3-5);
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-font-xs);
    font-weight: 700;
}

@media (min-width: 640px) {
    .ui-public-nav-home {
        padding: var(--ds-space-2) var(--ds-space-4);
        font-size: var(--ds-font-sm);
    }
}
.ui-public-menu-toggle {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ds-radius-lg);
    background-color: var(--ui-surface);
    color: var(--ui-heading);
    padding: var(--ds-space-2) var(--ds-space-3);
    font-size: var(--ds-font-sm);
    font-weight: 700;
    cursor: pointer;
}
.ui-site-header nav {
    display: none;
    flex: 1 1 100%;
    justify-content: flex-end;
    min-width: 0;
    gap: var(--ds-space-1);
}
.ui-site-header nav.is-open { display: flex; }
.ui-site-header nav a {
    flex: 1 1 calc(50% - var(--ds-space-1));
    justify-content: center;
    min-height: 2.75rem;
    text-align: center;
    white-space: nowrap;
}
.ui-site-header nav .ui-public-nav-home { flex-basis: 100%; }

@media (min-width: 1180px) {
    .ui-site-header > div { flex-wrap: nowrap; }
    .ui-public-menu-toggle { display: none; }
    .ui-site-header nav {
        display: flex;
        flex: 0 1 auto;
        gap: var(--ds-space-2);
    }
    .ui-site-header nav a {
        flex: 0 0 auto;
        min-height: 0;
    }
    .ui-site-header nav .ui-public-nav-home { flex-basis: auto; }
}
/* Keep the footer above the fixed background's stacking context. */
.ui-site-footer {
    position: relative;
    z-index: var(--ds-z-content);
    background: var(--ui-public-footer) !important;
    border-color: var(--ui-border-soft) !important;
    color: var(--ui-text) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ui-site-footer h3 { color: var(--ui-heading); }
.ui-site-footer a:hover,
.ui-site-footer button.ui-link:hover { color: var(--ui-azione-hover); }
.ui-site-footer, .ui-admin-footer { margin-top: auto; }
.ui-footer-link-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    min-height: 2.75rem;
    padding: var(--ds-space-1) 0;
}
.ui-privacy-consent {
    position: fixed;
    inset-inline: var(--ds-space-4);
    bottom: var(--ds-space-4);
    z-index: var(--ds-z-modal);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ds-space-5);
    width: min(52rem, calc(100% - var(--ds-space-8)));
    margin-inline: auto;
    padding: var(--ds-space-5);
    border: 1px solid var(--ui-border);
    border-radius: var(--ds-radius-2xl);
    background: var(--ui-surface-elevated);
    box-shadow: var(--ds-shadow-4);
}
.ui-privacy-consent-copy { min-width: 0; }
.ui-privacy-consent-copy h2 { font-size: var(--ds-font-lg); }
.ui-privacy-consent-copy p {
    margin-top: var(--ds-space-2);
    font-size: var(--ds-font-sm);
    line-height: 1.6;
}
.ui-privacy-consent-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--ds-space-2);
}
@media (max-width: 767px) {
    .ui-privacy-consent {
        grid-template-columns: 1fr;
        gap: var(--ds-space-4);
    }
    .ui-privacy-consent-actions { justify-content: stretch; }
    .ui-privacy-consent-actions .ui-btn { flex: 1 1 12rem; }
}
@media (max-width: 639px) {
    .ui-privacy-consent {
        inset-inline: var(--ds-space-2);
        bottom: var(--ds-space-2);
        width: calc(100% - var(--ds-space-4));
        max-height: calc(100dvh - var(--ds-space-4));
        overflow-y: auto;
        padding: var(--ds-space-4);
    }
    .ui-privacy-consent-actions .ui-btn { flex-basis: 100%; }
}
/* PORTALE GESTIONALE — SUPERFICI DI NAVIGAZIONE */
.ui-admin-page {
    --ui-sidebar-w: 15rem;
    --ui-sidebar-w-collassata: 4rem;
    --ui-topbar-h: 3.5rem;
    background-color: var(--ui-bg) !important;
    color: var(--ui-text);
    font-size: var(--ui-font-base);
}

.ui-admin-page.is-sidebar-collassata {
    --ui-sidebar-w: var(--ui-sidebar-w-collassata);
}

/* --- Barra superiore --- */
.ui-admin-header {
    position: sticky;
    top: 0;
    z-index: var(--ds-z-navigation);
    background: var(--ui-scuro-superficie-forte);
    border-bottom: 1px solid var(--ui-scuro-bordo);
    color: var(--ui-scuro-testo);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ui-admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-4);
    min-height: var(--ui-topbar-h);
    padding: var(--ds-space-2) var(--ds-space-4);
}

.ui-admin-topbar-brand,
.ui-admin-topbar-utility {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-width: 0;
}

.ui-admin-logo img {
    height: 1.75rem;
    width: auto;
}

.ui-admin-ambito {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-left: var(--ds-space-3);
    margin-left: var(--ds-space-1);
    border-left: 1px solid var(--ui-scuro-bordo);
}

.ui-admin-ambito-etichetta {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-scuro-testo-tenue);
    line-height: 1.2;
}

.ui-admin-ambito-nome {
    font-size: var(--ds-font-sm);
    font-weight: 700;
    color: var(--ui-scuro-testo);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-admin-utility-link,
.ui-admin-logout {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
    padding: var(--ds-space-1) var(--ds-space-3);
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-font-xs);
    font-weight: 700;
    white-space: nowrap;
    transition: background-color var(--ds-transition-fast), color var(--ds-transition-fast);
}

.ui-admin-utility-link {
    color: var(--ui-scuro-testo-attenuato);
    border: 1px solid transparent;
}

.ui-admin-utility-link:hover {
    background: var(--ui-scuro-hover);
    color: var(--ui-scuro-testo);
}

.ui-admin-utility-link.is-active {
    background: var(--ui-scuro-attivo);
    color: var(--ui-scuro-attivo-testo);
    font-weight: 800;
}

.ui-admin-logout {
    background: var(--ui-danger-vivo);
    color: var(--ui-inverse-text);
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

/* Pastiglia del ruolo RBAC nella barra superiore, su fondo scuro. */
/* Forma condivisa delle pillole. Le famiglie di colore (--positivo, --urgenza, */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
    padding: var(--ds-space-1) var(--ds-space-3);
    border: 1px solid transparent;
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-font-xs);
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

/* Taglia ridotta: sovrapposizioni sulle foto, marcature dentro le righe fitte
   del backoffice. Sostituisce da sola le sette combinazioni px-2/px-2.5 con
   py-0.5 che convivevano nel markup. */
.ui-badge-piccolo {
    padding: 0.125rem var(--ds-space-2);
    font-size: var(--ds-font-2xs);
}

/* Il codice ISO della pastiglia sanitaria puo' andare a capo su schermi stretti. */
.ui-badge-microchip {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

/* Registro da occhiello: la pillola annuncia una sezione invece di marcare un
   dato. E' una scelta tipografica, non una taglia: si combina con entrambe. */
.ui-badge-maiuscolo {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ui-badge-ruolo-superadmin {
    background: var(--ui-attention-bg);
    border-color: var(--ui-attention-border);
    color: var(--ui-attention);
}

.ui-badge-ruolo-admin {
    background: var(--ui-positive-bg);
    border-color: var(--ui-positive-border);
    color: var(--ui-positive);
}

.ui-badge-ruolo-operatore {
    background: var(--ui-info-bg);
    border-color: var(--ui-info-border);
    color: var(--ui-info);
}

.ui-admin-topbar .ui-badge-ruolo-superadmin {
    background: var(--ui-ruolo-scuro-super-bg);
    border-color: var(--ui-ruolo-scuro-super-bordo);
    color: var(--ui-ruolo-scuro-super-testo);
}

.ui-admin-topbar .ui-badge-ruolo-admin {
    background: var(--ui-ruolo-scuro-admin-bg);
    border-color: var(--ui-ruolo-scuro-admin-bordo);
    color: var(--ui-ruolo-scuro-admin-testo);
}

.ui-admin-topbar .ui-badge-ruolo-operatore {
    background: var(--ui-ruolo-scuro-operatore-bg);
    border-color: var(--ui-ruolo-scuro-operatore-bordo);
    color: var(--ui-ruolo-scuro-operatore-testo);
}

.ui-admin-logout:hover {
    background: var(--ui-danger);
    color: var(--ui-inverse-text);
}

/* --- Barra laterale --- */
.ui-admin-sidebar {
    position: fixed;
    top: var(--ui-topbar-h);
    bottom: 0;
    left: 0;
    z-index: var(--ds-z-sidebar);
    width: var(--ui-sidebar-w);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
    padding: var(--ds-space-3) var(--ds-space-2);
    background: var(--ui-scuro-superficie);
    border-right: 1px solid var(--ui-scuro-bordo);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: width var(--ds-transition-normal), transform var(--ds-transition-normal);
}

.ui-admin-sidebar-intestazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);
    padding: 0 var(--ds-space-2) var(--ds-space-2);
    border-bottom: 1px solid var(--ui-scuro-bordo);
}

.ui-admin-sidebar-titolo {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ui-scuro-testo-etichetta);
}

.ui-admin-sidebar-collassa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--ui-scuro-attivo-testo);
    border-radius: var(--ds-radius-sm);
    background: var(--ui-scuro-attivo);
    color: var(--ui-scuro-attivo-testo);
    transition: background-color var(--ds-transition-fast), color var(--ds-transition-fast);
}

.ui-admin-sidebar-collassa:hover {
    background: var(--ui-scuro-hover);
    color: var(--ui-scuro-testo);
}

.ui-admin-sidebar-collassa:focus-visible {
    outline: 3px solid var(--ui-focus);
    outline-offset: 2px;
}

.ui-admin-tooltip {
    position: fixed;
    z-index: calc(var(--ds-z-sidebar) + 2);
    transform: translateY(-50%);
    max-width: 15rem;
    padding: var(--ds-space-2) var(--ds-space-3);
    border: 1px solid var(--ui-scuro-bordo);
    border-radius: var(--ds-radius-sm);
    background: var(--ui-scuro-superficie);
    color: var(--ui-scuro-testo);
    box-shadow: var(--ds-shadow-2);
    font-size: var(--ds-font-sm);
    font-weight: 700;
    pointer-events: none;
}

.ui-admin-sidebar-collassa svg {
    transform: rotate(-90deg);
    transition: transform var(--ds-transition-normal);
}

.is-sidebar-collassata .ui-admin-sidebar-collassa svg {
    transform: rotate(90deg);
}

.ui-admin-sidebar-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
}

.ui-admin-sidebar-sezione {
    display: flex;
    align-items: center;
    padding: var(--ds-space-3) var(--ds-space-2) var(--ds-space-1);
    margin-top: var(--ds-space-2);
    border-top: 1px solid var(--ui-scuro-bordo);
}

.ui-admin-voce {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    min-height: var(--ui-control-min-h);
    padding: var(--ds-space-2) var(--ds-space-3);
    border-radius: var(--ds-radius-md);
    color: var(--ui-scuro-testo-attenuato);
    font-size: var(--ds-font-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--ds-transition-fast), color var(--ds-transition-fast);
}

.ui-admin-voce:hover {
    background: var(--ui-scuro-hover);
    color: var(--ui-scuro-testo);
}

.ui-admin-voce.is-active {
    background: var(--ui-scuro-attivo);
    color: var(--ui-scuro-attivo-testo);
    font-weight: 800;
}

.ui-admin-voce-icona {
    display: inline-flex;
    flex-shrink: 0;
}

/* Stato collassato: restano le sole icone, l'etichetta serve agli screen reader. */
.is-sidebar-collassata .ui-admin-sidebar-titolo,
.is-sidebar-collassata .ui-admin-voce-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.is-sidebar-collassata .ui-admin-voce {
    justify-content: center;
    padding-inline: 0;
}

.is-sidebar-collassata .ui-admin-sidebar-intestazione {
    justify-content: center;
}

.is-sidebar-collassata .ui-admin-sidebar-sezione {
    justify-content: center;
    height: 0;
    padding: 0;
    margin: var(--ds-space-2) var(--ds-space-1) 0;
    border-top: 1px solid var(--ui-scuro-bordo);
}

/* Il contenuto segue la larghezza della barra laterale.
   La specificita' include l'id #main-content perche' la regola di shell in
   sezione 4 (main#main-content { margin-inline: auto }) pesa 1-0-1: senza id
   qui, il margine automatico prevarrebbe e il contenuto finirebbe sotto la
   barra laterale. */
@media (min-width: 1024px) {
    .ui-admin-page main#main-content,
    .ui-admin-page .ui-admin-footer {
        margin-left: var(--ui-sidebar-w);
        transition: margin-left var(--ds-transition-normal);
    }

    /* Il backoffice rinuncia al contenimento a 80rem: sommato al rientro della
       barra laterale eccederebbe il viewport, e le tabelle operative traggono
       vantaggio da tutta la larghezza disponibile. */
    .ui-admin-page main#main-content {
        max-width: none;
        width: auto;
        margin-right: 0;
    }
}

/* La barra laterale e' un pannello a comparsa per impostazione predefinita.
   Il desktop la ripristina sotto: una sola soglia min-width evita intervalli
   scoperti quando zoom o DPR producono larghezze CSS frazionarie. */
.ui-admin-sidebar {
    width: min(18rem, 82vw);
    transform: translateX(-100%);
    visibility: hidden;
    box-shadow: var(--ds-shadow-4);
    transition: transform var(--ds-transition-normal), visibility 0s linear var(--ds-transition-normal);
}

.ui-admin-sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
}

.ui-admin-sidebar-collassa {
    display: none;
}

.ui-admin-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--ds-z-sidebar-backdrop);
    background: var(--ui-scuro-velo);
}

@media (min-width: 1024px) {
    .ui-admin-sidebar {
        width: var(--ui-sidebar-w);
        transform: none;
        visibility: visible;
        box-shadow: none;
        transition: width var(--ds-transition-normal);
    }

    .ui-admin-sidebar-collassa {
        display: inline-flex;
    }

    .ui-admin-overlay {
        display: none !important;
    }
}

/* --- Barra inferiore (smartphone) --- */
.ui-bottombar-voce {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1 1 0;
    /* Senza min-width:0 un elemento flex non scende sotto la larghezza del
       proprio contenuto: l'etichetta piu' lunga ("Candidature") faceva
       eccedere la barra oltre lo schermo sui dispositivi da 320px. */
    min-width: 0;
    min-height: var(--ui-control-min-h);
    padding: var(--ds-space-1);
    border-radius: var(--ds-radius-md);
    color: var(--ui-muted);
    font-size: 0.625rem;
    font-weight: 700;
    text-align: center;
    transition: background-color var(--ds-transition-fast), color var(--ds-transition-fast);
}

.ui-bottombar-voce > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-bottombar-voce svg {
    flex-shrink: 0;
}

.ui-bottombar-voce.is-active {
    background: var(--ui-accent-soft);
    color: var(--ui-accent-hover);
}

@media (max-width: 639px) {
    /* Spazio in coda al contenuto: la barra inferiore non deve coprire nulla. */
    .ui-admin-page {
        padding-bottom: 4.5rem;
    }
}

/* --- Piede del portale --- */
.ui-admin-footer {
    margin-top: auto;
    padding: var(--ds-space-6) var(--ds-space-4) var(--ds-space-4);
    background: var(--ui-surface);
    border-top: 1px solid var(--ui-border-soft);
    color: var(--ui-muted);
    font-size: var(--ui-font-sm);
}

.ui-admin-footer-griglia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-4);
    padding-bottom: var(--ds-space-4);
    border-bottom: 1px solid var(--ui-border-soft);
}

.ui-admin-footer-brand {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
}

.ui-admin-footer-brand img {
    height: 1.5rem;
    width: auto;
    opacity: 0.9;
}

.ui-admin-footer-badge {
    padding: 0.125rem var(--ds-space-2);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ds-radius-full);
    background: var(--ui-surface-subtle);
    font-size: var(--ui-font-xs);
    font-weight: 700;
    color: var(--ui-text);
}

.ui-admin-footer-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-4);
    font-weight: 600;
}

.ui-admin-footer-link a {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
}

.ui-admin-footer-link a:hover {
    color: var(--ui-accent-hover);
    text-decoration: underline;
}

.ui-admin-footer-nota {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);
    padding-top: var(--ds-space-3);
    font-size: var(--ui-font-xs);
}

/* --------------------------------------------------------------------------
   COMPONENTI OPERATIVI (resi da includes/ui_admin_components.php)
   -------------------------------------------------------------------------- */

/* Intestazione di pagina: titolo, contesto, conteggio e azioni primarie. */
.ui-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ui-gap-tight);
    padding-bottom: var(--ui-gap-tight);
    border-bottom: 1px solid var(--ui-border-soft);
}

.ui-page-header-testo {
    min-width: 0;
}

.ui-page-title-riga {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}

.ui-page-title-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ds-space-1);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ds-radius-full);
    background: var(--ui-surface-subtle);
    color: var(--ui-accent);
}

.ui-page-title {
    color: var(--ui-heading);
    font-size: var(--ds-font-3xl);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: var(--ds-line-tight);
}

.ui-page-subtitle {
    margin-top: var(--ds-space-1);
    max-width: var(--ds-measure-reading);
    color: var(--ui-muted);
    font-size: var(--ui-font-base);
    line-height: var(--ui-line);
}

.ui-page-header-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-3);
}

.ui-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.25rem var(--ds-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ds-radius-full);
    background: var(--ui-surface-subtle);
    color: var(--ui-text);
    font-size: var(--ui-font-sm);
    font-weight: 700;
    white-space: nowrap;
}

/* Percorso di navigazione, condiviso fra area pubblica e backoffice. */
.ui-breadcrumb {
    margin-bottom: var(--ui-gap-tight);
    color: var(--ui-muted);
    font-size: var(--ui-font-sm);
    font-weight: 600;
}

.ui-breadcrumb-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-breadcrumb-voce {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}

.ui-breadcrumb a:hover {
    color: var(--ui-accent-hover);
    text-decoration: underline;
}

.ui-breadcrumb-sep {
    color: var(--ui-border);
}

.ui-breadcrumb-corrente {
    color: var(--ui-heading);
    font-weight: 700;
}

/* Avvisi contestuali. */
.ui-alert {
    margin-top: var(--ui-gap-tight);
    padding: var(--ds-space-3) var(--ds-space-4);
    border: 1px solid;
    border-radius: var(--ui-radius);
    font-size: var(--ui-font-base);
    font-weight: 600;
    line-height: var(--ui-line);
}

.ui-alert-successo {
    background: var(--ui-positive-bg);
    border-color: var(--ui-positive-border);
    color: var(--ui-positive);
}

.ui-alert-errore {
    background: var(--ui-danger-bg);
    border-color: var(--ui-danger-border);
    color: var(--ui-danger);
}

.ui-alert-attenzione {
    background: var(--ui-attention-bg);
    border-color: var(--ui-attention-border);
    color: var(--ui-attention);
}

.ui-alert-info {
    background: var(--ui-info-bg);
    border-color: var(--ui-info-border);
    color: var(--ui-info);
}

/* Riga filtri delle tabelle operative. */
.ui-tabella-operativa {
    width: 100%;
    text-align: left;
}

.ui-tabella-operativa tbody tr {
    --ui-tabella-riga-sfondo: var(--ui-surface);
}

.ui-tabella-operativa th,
.ui-tabella-operativa td {
    padding: var(--ui-row-pad-y) var(--ui-row-pad-x);
    vertical-align: middle;
}

.ui-tabella-operativa thead th {
    font-size: var(--ui-font-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.ui-tabella-operativa thead tr:not(.ui-riga-filtri) th {
    background-color: var(--ui-surface-subtle);
}

/* Controllo delle larghezze di colonna. */
.ui-tabella-operativa .ui-col-contenuto {
    width: 1%;
    white-space: nowrap;
}

/* La colonna identita' prende lo spazio che resta, ma non oltre: il dettaglio
   viene troncato con ellissi anziche' mandare a capo. */
.ui-tabella-operativa .ui-col-identita {
    width: auto;
    max-width: 0; /* forza il rispetto della larghezza calcolata dalla tabella */
}

/* Colonna di testo che puo' andare a capo, ma al massimo su due righe.
   Il vincolo va applicato al contenuto della cella (.ui-testo-clamp-2), non
   alla colonna: il testo nelle celle e' spesso un nodo nudo senza elemento
   contenitore, quindi un selettore discendente non lo raggiungerebbe. */
.ui-tabella-operativa .ui-col-testo {
    width: 12%;
    min-width: 9rem;
}

.ui-testo-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Le pastiglie sanitarie restano su una sola riga. */
.ui-tabella-operativa .ui-pila-badge.is-orizzontale {
    flex-wrap: nowrap;
}

/* Anche i pulsanti d'azione restano in riga. Il "white-space: nowrap" della */
.ui-tabella-operativa .ui-cella-azioni {
    flex-wrap: nowrap;
}

/* Nemmeno l'etichetta del singolo pulsante deve andare a capo: in una colonna
   stretta "Apri Ticket" si spezzava su due righe. Il vincolo resta confinato
   alle tabelle operative, per non alzare la larghezza minima dei pulsanti
   altrove. */
.ui-tabella-operativa .ui-cella-azioni .ui-btn-sm {
    white-space: nowrap;
}

/* La colonna Azioni resta visibile mentre le tabelle larghe scorrono. */
@media (min-width: 1024px) {
    .ui-table-wrapper .ui-tabella-operativa th.text-right:last-child,
    .ui-table-wrapper .ui-tabella-operativa td.text-right:last-child {
        position: sticky;
        right: 0;
        z-index: 1;
        box-shadow: -8px 0 8px -8px rgb(0 0 0 / 0.25);
    }

    .ui-table-wrapper .ui-tabella-operativa tbody td.text-right:last-child {
        background-color: var(--ui-tabella-riga-sfondo);
    }
}

/* Elenchi operativi su smartphone e tablet: la riga diventa una scheda. */
@media (max-width: 1023px) {
    .ui-tabella-operativa,
    .ui-tabella-operativa thead,
    .ui-tabella-operativa tbody,
    .ui-tabella-operativa tr,
    .ui-tabella-operativa td {
        display: block;
        width: auto;
        max-width: none;
    }

    .ui-tabella-operativa thead tr:not(.ui-riga-filtri) {
        display: none;
    }

    .ui-tabella-operativa .ui-riga-filtri {
        display: grid;
        gap: var(--ds-space-2);
        padding: var(--ds-space-3) 0;
    }

    .ui-tabella-operativa .ui-riga-filtri td {
        padding: 0;
        text-align: left;
    }

    /* Sul desktop il nome visibile di ogni filtro e' l'intestazione della sua */

    .ui-tabella-operativa tbody tr {
        margin-block: var(--ds-space-3);
        border: 1px solid var(--ui-border-card);
        border-radius: var(--ui-radius-lg);
        background: var(--ui-surface);
        padding: var(--ds-space-1) var(--ds-space-3) var(--ds-space-3);
    }

    .ui-tabella-operativa tbody td {
        padding-inline: 0;
        padding-block: var(--ds-space-2);
    }

    .ui-tabella-operativa tbody td + td {
        border-top: 1px solid var(--ui-border-soft);
    }

    .ui-tabella-operativa tbody td[data-etichetta]::before,
    .ui-tabella-operativa .ui-riga-filtri td[data-etichetta]::before {
        content: attr(data-etichetta);
        display: block;
        margin-bottom: var(--ds-space-half);
        color: var(--ui-muted);
        font-size: var(--ui-font-xs);
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /* Una cella a tutta riga non e' una coppia etichetta/valore: e' lo stato
       vuoto o il pannello di dettaglio, che hanno gia' un testo proprio. */
    .ui-tabella-operativa tbody td[colspan] {
        padding-block: 0;
        border-top: 0;
    }

    /* Quelle righe non sono schede: lo stato vuoto ha gia' la sua cornice
       tratteggiata e il pannello di dettaglio il suo fondo, quindi la cornice
       della scheda ne aggiungerebbe una seconda. Dove :has() manca la regola
       cade e restano due bordi concentrici: brutto, non rotto. */
    .ui-tabella-operativa tbody tr:has(> td[colspan]) {
        margin-block: var(--ds-space-2);
        border: 0;
        border-radius: 0;
        background: none;
        padding: 0;
    }

    /* La colonna azioni non ha un'intestazione utile da ripetere e sta meglio
       come piede della scheda, a tutta larghezza. */
    .ui-tabella-operativa tbody td.text-right {
        text-align: left;
    }

    .ui-tabella-operativa .ui-col-contenuto,
    .ui-tabella-operativa .ui-col-identita,
    .ui-tabella-operativa .ui-col-testo {
        white-space: normal;
    }

    .ui-tabella-operativa .ui-cella-azioni,
    .ui-tabella-operativa .ui-pila-badge.is-orizzontale {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* L'eccezione: le tabelle di consultazione che a tablet ci stanno gia'. */
@media (min-width: 640px) and (max-width: 1023px) {
    .ui-tabella-operativa.is-compatta {
        display: table;
    }

    .ui-tabella-operativa.is-compatta thead {
        display: table-header-group;
    }

    .ui-tabella-operativa.is-compatta tbody {
        display: table-row-group;
    }

    .ui-tabella-operativa.is-compatta tr,
    .ui-tabella-operativa.is-compatta thead tr:not(.ui-riga-filtri) {
        display: table-row;
        margin-block: 0;
        border: 0;
        border-radius: 0;
        background: none;
        padding: 0;
    }

    .ui-tabella-operativa.is-compatta td,
    .ui-tabella-operativa.is-compatta tbody td {
        display: table-cell;
        width: auto;
        padding: var(--ui-row-pad-y) var(--ui-row-pad-x);
        border-top: 0;
    }

    .ui-tabella-operativa.is-compatta tbody td[data-etichetta]::before,
    .ui-tabella-operativa.is-compatta .ui-riga-filtri td[data-etichetta]::before {
        content: none;
    }

    .ui-tabella-operativa.is-compatta tbody td.text-right {
        text-align: right;
    }
}

/* Griglia degli elenchi a schede del backoffice (campagne, storie). */
.ui-griglia-card {
    display: grid;
    gap: var(--ds-space-6);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .ui-griglia-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ui-griglia-card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Riga corrispondente al record aperto nel modulo di modifica: il legame fra
   modulo e riga va reso visibile, non solo intuito dall'URL. Il bordo laterale
   accompagna il fondo perche' il solo colore non basta (WCAG SC 1.4.1). */
.ui-tabella-operativa tbody tr.is-evidenziata {
    --ui-tabella-riga-sfondo: var(--ui-surface-subtle);
    background: var(--ui-surface-subtle);
    box-shadow: inset 3px 0 0 0 var(--ui-accent);
}

/* Le celle della riga filtri sono <td>: un <th> le farebbe annunciare come */
.ui-riga-filtri td,
.ui-riga-filtri th {
    padding-top: var(--ds-space-2);
    padding-bottom: var(--ds-space-2);
    font-weight: 400;
    background: var(--ui-surface-subtle);
}

.ui-tabella-operativa thead .ui-riga-filtri td {
    font-size: var(--ui-font-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--ui-text);
}

/* La riga filtri e' un componente unico: campo di testo, tendina e comandi */
.ui-filtro-campo {
    width: 100%;
    min-height: 2.25rem;
    padding: var(--ds-space-1) var(--ds-space-2);
    border: 1px solid var(--ui-border-input);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ds-shadow-1);
    color: var(--ui-heading);
    font-size: var(--ui-font-sm);
}

/* Una colonna "ui-col-contenuto" si dimensiona sul contenuto piu' stretto, e */
.ui-riga-filtri select.ui-filtro-campo {
    min-width: 6rem;
}

.ui-filtro-campo:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px var(--ui-focus-halo);
    outline: none;
}

.ui-filtro-azioni {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-space-2);
}

/* Cella identificativa: miniatura piu' denominazione su due righe. */
.ui-cella-soggetto {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    min-width: 0;
}

.ui-cella-soggetto img {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border-soft);
    background: var(--ui-surface-subtle);
    object-fit: cover;
}

.ui-cella-soggetto-testo {
    min-width: 0;

    /* Occupa lo spazio che resta accanto alla miniatura. Senza questo, dopo
       l'azzeramento del contributo intrinseco del dettaglio (vedi
       .ui-cella-soggetto-dettaglio) il blocco si restringeva al proprio
       min-content: il dettaglio scendeva da 351px a 93px e veniva troncato
       quasi subito, pur avendo la colonna spazio libero in abbondanza. */
    flex: 1 1 auto;
}

.ui-cella-soggetto-titolo {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

.ui-cella-soggetto-nome {
    color: var(--ui-heading);
    font-weight: 700;
}

.ui-cella-soggetto-dettaglio {
    display: block;
    margin-top: 0.125rem;
    color: var(--ui-muted);
    font-size: var(--ui-font-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    /* In una tabella l'ellissi non basta: "white-space: nowrap" fa comunque */
    width: 0;
    min-width: 100%;
}

/* Il motivo per cui un contenuto non e' online, sotto la sua pastiglia. */
.ui-motivo-visibilita {
    display: block;
    margin-top: 0.125rem;
    color: var(--ui-muted);
    font-size: var(--ds-font-xs);
    line-height: var(--ds-line-relaxed);
    white-space: normal;
    text-wrap: pretty;
}

.ui-cella-azioni {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-space-2);
    flex-wrap: wrap;
}

.ui-filtro-inattivo {
    color: var(--ui-muted);
    font-size: var(--ui-font-sm);
    font-style: italic;
}

/* Pila di pastiglie: verticale per gli stati, orizzontale per i dati sanitari. */
.ui-pila-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-1);
}

.ui-pila-badge.is-orizzontale {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

/* Solo colore: la forma arriva da .ui-badge, come per le altre famiglie.
   Era l'ultima pillola che se la teneva per se'. */
.ui-badge-distanza {
    border-color: var(--ui-distanza-bordo);
    background: var(--ui-distanza-bg);
    color: var(--ui-distanza-testo);
}

.ui-nota-indicatore {
    color: var(--ui-muted);
    font-size: var(--ui-font-xs);
    font-weight: 600;
    text-decoration: underline dotted;
    cursor: help;
}

.ui-contatti-principali > .ui-card,
.ui-contatti-secondari > .ui-card {
    min-height: 100%;
}

.ui-contatti-principali .ui-btn,
.ui-contatti-secondari .ui-btn {
    width: 100%;
    min-height: var(--ui-control-min-h);
    text-align: center;
}

.ui-contatti-scheda-centrata {
    width: min(100%, 42rem);
    justify-self: center;
}

.ui-zona-pericolosa {
    border-color: var(--ui-danger-border);
    background: var(--ui-danger-bg);
}

.ui-cella-soggetto-meta {
    display: block;
    margin-top: 0.125rem;
    color: var(--ui-muted);
    font-size: var(--ui-font-xs);
}

.ui-count-pill-positivo {
    border-color: var(--ui-positive-border);
    background: var(--ui-positive-bg);
    color: var(--ui-positive);
}

/* --------------------------------------------------------------------------
   TIPOGRAFIA E CONTENITORI RICORRENTI
   Componenti estratti dalle combinazioni di utility piu' ripetute nel markup.
   Leggono gli alias di tema, quindi si adattano da soli alle due aree.
   -------------------------------------------------------------------------- */

/* Etichetta di un controllo di form. */
.ui-label {
    display: block;
    color: var(--ui-heading);
    font-size: var(--ui-font-base);
    font-weight: 700;
}

.ui-label-piccola {
    font-size: var(--ui-font-sm);
}

/* Il controllo annidato nella propria etichetta prende la distanza dal */
.ui-label > .ui-input,
.ui-label > .ui-textarea,
.ui-label > select.ui-input {
    margin-top: var(--ui-field-gap);
}

.ui-label-piccola > .ui-input,
.ui-label-piccola > .ui-textarea,
.ui-label-piccola > select.ui-input {
    margin-top: var(--ui-field-gap-compatto);
}

/* Titolo di una sezione interna alla pagina. */
.ui-section-title {
    color: var(--ui-heading);
    font-size: var(--ds-font-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: var(--ds-line-snug);
}

.ui-section-title-icona {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
}

/* Sopratitolo: etichetta breve maiuscola sopra un titolo.
   Usa l'accento caldo e non --ui-accent: nell'area pubblica il verde e' il
   colore dell'azione, e impiegarlo anche per etichette secondarie ne
   diluirebbe il significato. */
.ui-eyebrow {
    color: var(--ui-accent-caldo);
    font-size: var(--ui-font-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Testo attenuato: sostituisce text-slate-400 e text-slate-500 usati nel
   markup. Il primo valeva 2.56:1 su bianco, sotto la soglia di 4.5:1 per il
   testo (WCAG SC 1.4.3); il secondo era al limite (4.55:1 su superficie
   attenuata). L'alias --ui-muted e' verificato da tools/verifica-contrasti.php. */
.ui-testo-attenuato {
    color: var(--ui-muted);
}

/* Sopratitolo delle schermate di autenticazione, su fondo scuro. */
.ui-auth-eyebrow {
    margin-top: var(--ds-space-2);
    color: var(--ui-scuro-testo-attenuato);
    font-size: var(--ds-font-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Pulsante di chiusura di una finestra modale. */
.ui-chiudi-modale {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ds-radius-full);
    color: var(--ui-muted);
    transition: background-color var(--ds-transition-fast), color var(--ds-transition-fast);
}

.ui-chiudi-modale:hover {
    background: var(--ui-surface-subtle);
    color: var(--ui-heading);
}

/* Testo esplicativo sotto un titolo o una voce. */
.ui-testo-secondario {
    color: var(--ui-muted);
    font-size: var(--ui-font-base);
    line-height: var(--ds-line-relaxed);
}

/* Valore numerico in evidenza (riepiloghi e contatori). */
.ui-valore-grande {
    color: var(--ui-heading);
    font-size: var(--ds-font-2xl);
    font-weight: 900;
    letter-spacing: -0.02em;
}

/* Riquadro informativo su superficie attenuata. */
.ui-riquadro-info {
    padding: var(--ds-space-3);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-subtle);
}

/* Pastiglia numerata dei passaggi (guide ed elenchi ordinati). */
.ui-step-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--ui-radius);
    background: var(--ui-heading);
    color: var(--ui-inverse-text, #ffffff);
    font-size: var(--ui-font-sm);
    font-weight: 900;
}

/* Immagine che riempie il proprio contenitore mantenendo le proporzioni. */
.ui-media-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Pannello con imbottitura generosa, variante della card. */
/* .ui-card non porta padding: ogni pagina se lo scriveva addosso con
   un'utility, e nel backoffice ne convivevano tre valori (16, 20 e 24px) sullo
   stesso tipo di riquadro. Due forme dichiarate, e nessun'altra: il riquadro
   compatto degli elenchi e il pannello dei moduli. */
.ui-card-riquadro {
    padding: var(--ds-space-5);
}

.ui-card-pannello {
    padding: var(--ds-space-6);
}

@media (min-width: 640px) {
    .ui-card-pannello {
        padding: var(--ds-space-8);
    }
}

/* Campi di form etichettati. */
.ui-field {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1);
}

.ui-field-required {
    color: var(--ui-danger);
}

/* Scelta a riquadri: il bersaglio tattile e' l'intera etichetta, non il solo
   pallino. Lo stato selezionato lo dice il markup, senza JavaScript. */
.ui-scelta-riquadro {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-2);
    padding: var(--ds-space-3);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ds-radius-lg);
    background: var(--ui-surface);
    cursor: pointer;
}

.ui-scelta-riquadro:hover {
    background: var(--ui-surface-subtle);
}

.ui-scelta-riquadro:has(input:checked) {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
}

.ui-scelta-riquadro:has(input:focus-visible) {
    box-shadow: 0 0 0 2px var(--ui-focus-halo);
}

.ui-scelta-riquadro input {
    margin-top: 2px;
    flex-shrink: 0;
}

/* Galleria della scheda gatto: i controlli emergono al passaggio del mouse,
   restano sempre disponibili con tastiera e touch. */
.ui-gatto-gallery-main {
    background: var(--ui-surface-subtle);
}

.ui-gatto-gallery-image-button {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
}

.ui-gatto-gallery-nav,
.ui-photo-viewer-nav {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid color-mix(in srgb, var(--ui-surface-elevated) 70%, transparent);
    border-radius: var(--ds-radius-full);
    background: color-mix(in srgb, var(--ui-heading) 72%, transparent);
    color: var(--ui-surface-elevated);
    font-size: var(--ds-font-xl);
    font-weight: 700;
    transform: translateY(-50%);
    transition: opacity var(--ds-transition-fast), background-color var(--ds-transition-fast), transform var(--ds-transition-fast);
}

.ui-gatto-gallery-nav {
    opacity: 0;
    pointer-events: none;
}

.ui-gatto-gallery-main:hover .ui-gatto-gallery-nav,
.ui-gatto-gallery-main:focus-within .ui-gatto-gallery-nav {
    opacity: 1;
    pointer-events: auto;
}

.ui-gatto-gallery-nav:hover,
.ui-photo-viewer-nav:hover {
    background: var(--ui-heading);
}

.ui-gatto-gallery-nav-prev,
.ui-photo-viewer-nav-prev {
    left: var(--ds-space-3);
}

.ui-gatto-gallery-nav-next,
.ui-photo-viewer-nav-next {
    right: var(--ds-space-3);
}

.ui-gatto-gallery-enlarge {
    position: absolute;
    right: var(--ds-space-3);
    bottom: var(--ds-space-3);
    padding: var(--ds-space-1) var(--ds-space-2);
    border-radius: var(--ds-radius-full);
    background: color-mix(in srgb, var(--ui-heading) 72%, transparent);
    color: var(--ui-surface-elevated);
    font-size: var(--ui-font-xs);
    font-weight: 700;
    pointer-events: none;
}

.ui-gatto-gallery-thumbnail {
    cursor: pointer;
}

.ui-gatto-gallery-thumbnail[aria-current="true"] {
    outline: 3px solid var(--ui-accent);
    outline-offset: 2px;
}

.ui-photo-viewer-dialog {
    max-width: min(96vw, 76rem) !important;
    max-height: min(94vh, 94dvh) !important;
    border: 0;
    background: var(--ui-heading);
}

.ui-photo-viewer {
    background: var(--ui-heading) !important;
    color: var(--ui-surface-elevated);
}

.ui-photo-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: var(--ds-space-3) var(--ds-space-4);
}

.ui-photo-viewer-title,
.ui-photo-viewer-caption {
    margin: 0;
    color: inherit;
    font-size: var(--ui-font-sm);
    font-weight: 700;
}

.ui-photo-viewer-stage {
    position: relative;
    display: flex;
    min-height: 0;
    flex: 1;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ui-photo-viewer-image {
    display: block;
    max-width: 100%;
    max-height: calc(94dvh - 8rem);
    object-fit: contain;
}

.ui-photo-viewer-caption {
    padding: var(--ds-space-2) var(--ds-space-4) var(--ds-space-4);
    text-align: center;
}

@media (hover: none) {
    .ui-gatto-gallery-nav {
        opacity: 1;
        pointer-events: auto;
    }
}

.ui-field-help {
    color: var(--ui-muted);
    font-size: var(--ui-font-xs);
}

.ui-field-error {
    color: var(--ui-danger);
    font-size: var(--ui-font-xs);
    font-weight: 600;
}

/* Admin Area Main Body & Theme */
.ui-admin-header ~ main {
    background-color: var(--ui-bg) !important;
    color: var(--ui-text);
}

.ui-admin-page main p,
.ui-admin-header ~ main p {
    max-width: none;
}

.ui-admin-header ~ main .ui-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-card);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
/* Riquadri Metriche Dashboard (Stat Cards) — Tono e Spaziature Senza Sfondi Colorati */
.ui-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-card);
    border-top: 3px solid var(--ui-text);
    border-radius: 0.875rem;
    padding: 1rem 1.125rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none !important;
}

@media (min-width: 640px) {
    .ui-stat-card {
        padding: 1.125rem 1.25rem;
    }
}

.ui-stat-card:has(a:hover) {
    transform: translateY(-2px);
    border-color: var(--ui-border);
    box-shadow: 0 6px 16px -2px rgba(15, 23, 42, 0.08);
}

.ui-stat-card:has(a:focus-visible) {
    outline: 3px solid var(--ui-focus) !important;
    outline-offset: 2px !important;
}

.ui-stat-card-accent-amber { border-top-color: var(--ui-accento-scheda-ambra); }
.ui-stat-card-accent-emerald { border-top-color: var(--ui-accento-scheda-verde); }
.ui-stat-card-accent-sky { border-top-color: var(--ui-accento-scheda-azzurro); }
.ui-stat-card-accent-indigo { border-top-color: var(--ui-accento-scheda-indaco); }
.ui-stat-card-accent-slate { border-top-color: var(--ui-accento-scheda-ardesia); }

.ui-stat-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border-card);
    color: var(--ui-text);
    transition: background 0.15s ease, color 0.15s ease;
}

.ui-stat-card:hover .ui-stat-card-icon {
    background: var(--ui-surface-subtle);
    color: var(--ui-heading);
}

.ui-stat-card-val {
    font-size: 1.75rem;
    line-height: 1.1;
    font-weight: 900;
    color: var(--ui-heading);
    letter-spacing: -0.03em;
    margin-top: 0.625rem;
    display: block;
}

@media (min-width: 640px) {
    .ui-stat-card-val {
        font-size: 2rem;
    }
}

.ui-stat-card-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    margin-left: auto;
    display: block;
    line-height: 1.25;
    min-height: 1.875rem;
    word-break: normal;
    overflow-wrap: break-word;
}

.ui-stat-card-metrica {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ds-space-2);
    color: inherit;
    text-decoration: none;
}

.ui-stat-card-metrica:focus-visible,
.ui-stat-card-nota:focus-visible {
    outline: 3px solid var(--ui-focus);
    outline-offset: 3px;
    border-radius: var(--ds-radius-sm);
}

.ui-stat-card-footer {
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--ui-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Griglia delle metriche: si adatta da sola al numero di schede visibili,
   che dipende dai permessi dell'utente. */
.ui-kpi-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--ds-space-4);
    margin-top: var(--ui-gap);
}

.ui-stat-card-riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2);
}

.ui-stat-card-freccia {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ui-muted);
}

.ui-stat-card-val.is-testuale {
    font-size: var(--ds-font-xl);
    letter-spacing: -0.01em;
}

.ui-stat-card-nota {
    font-weight: 700;
    text-decoration: none;
}

/* Toni della nota di dettaglio: comunicano l'urgenza senza dipendere dal solo
   colore (il testo dice sempre di cosa si tratta, WCAG SC 1.4.1). */
.ui-tono-positivo { color: var(--ui-positive); }
.ui-tono-attenzione { color: var(--ui-attention); }
.ui-tono-informativo { color: var(--ui-info); }
.ui-tono-neutro { color: var(--ui-muted); font-weight: 600; }

/* Badge di Riferimento Rapido ID in Tabelle Admin */
.ui-admin-ref {
    display: inline-flex;
    align-items: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--ui-muted);
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border-card);
    border-radius: 0.375rem;
    padding: 0.1rem 0.4rem;

    /* Un codice di riferimento e' un elemento atomico: spezzarlo lo rende
       illeggibile. In admin/slide.php meta' delle pastiglie si rendeva su due
       righe ("#SLD-" e "1"), alta 41px invece di 23px. */
    white-space: nowrap;
}

/* Avatar Iniziali Utente */
.ui-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border-card);
    color: var(--ui-text);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    user-select: none;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Pulsante Pericolo Discreto (Outline) */
.ui-btn-danger-outline {
    background: var(--ui-danger-bg) !important;
    border: 1px solid var(--ui-danger-border) !important;
    color: var(--ui-danger) !important;
    transition: all 0.15s ease;
}
.ui-btn-danger-outline:hover {
    background: var(--ui-danger) !important;
    border-color: var(--ui-danger) !important;
    color: var(--ui-inverse-text) !important;
}

/* Tabelle Gestionali Compatte e Performanti */
.ui-admin-header ~ main table thead {
    background: var(--ui-surface-subtle);
    border-bottom: 1.5px solid var(--ui-border);
}

.ui-admin-header ~ main table thead th {
    color: var(--ui-text);
    font-weight: 800;
}

.ui-admin-header ~ main table tbody tr {
    border-bottom: 1px solid var(--ui-border-soft);
}

.ui-admin-header ~ main table tbody tr:hover {
    --ui-tabella-riga-sfondo: var(--ui-surface-subtle);
    background-color: var(--ui-surface-subtle);
}

.ui-admin-accordion {
    border: 1.5px solid var(--ui-border-card);
    border-radius: 1rem;
    background: var(--ui-surface);
    transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}
.ui-admin-accordion[open] {
    border-color: var(--ui-border);
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08);
}
.ui-admin-accordion summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ui-admin-accordion summary::-webkit-details-marker {
    display: none;
}
.ui-admin-accordion summary:hover {
    background-color: var(--ui-surface-subtle);
}
.ui-admin-accordion[open] summary {
    border-bottom: 1.5px solid var(--ui-border-soft);
    background-color: var(--ui-surface-subtle);
}
.ui-admin-accordion .ui-accordion-closed-label {
    display: inline-flex !important;
}
.ui-admin-accordion .ui-accordion-open-label {
    display: none !important;
}
.ui-admin-accordion[open] .ui-accordion-closed-label {
    display: none !important;
}
.ui-admin-accordion[open] .ui-accordion-open-label {
    display: inline-flex !important;
}

/* Etichetta del pannello a fisarmonica. Non e' un titolo: la pagina ne ha gia'
   uno, e un secondo testo con peso e colore da intestazione subito sotto l'H1
   fa leggere il modulo come una seconda sezione invece che come il comando che
   e'. Vive quindi alla scala dei controlli che gli stanno accanto nella
   summary, e la sua forma sta qui invece che in utility di composizione. */
.ui-admin-accordion-etichetta {
    color: var(--ui-text);
    font-size: var(--ui-font-base);
    font-weight: 700;
    line-height: 1.3;
}
.ui-admin-footer { background: var(--ui-surface-elevated) !important; border-color: var(--ui-border-card) !important; }
.ui-admin-auth { background: var(--ui-scuro-superficie-auth) !important; }
.ui-admin-auth-panel {
    border-radius: var(--ds-radius-3xl);
}
.ui-admin-auth .ui-admin-auth-panel {
    background: var(--ui-surface-elevated);
    border-color: var(--ui-border-card);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.22);
}
/* ==========================================================================
   13. MAPS & GEOGRAPHIC FALLBACKS
   ========================================================================== */
.ui-map-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--ds-space-6);
    text-align: center;
    background-color: var(--ui-surface-subtle);
    border-radius: var(--ds-radius-xl);
    border: 1px solid var(--ui-border);
}
.ui-map-fallback-icon {
    font-size: 2rem;
    margin-bottom: var(--ds-space-2);
}
.ui-map-fallback-title {
    font-weight: 700;
    color: var(--ui-heading);
    font-size: var(--ds-font-sm);
}
.ui-map-fallback-msg {
    font-size: var(--ds-font-xs);
    color: var(--ui-muted);
    margin-top: var(--ds-space-1);
    margin-bottom: var(--ds-space-4);
}
.ui-map-fallback-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
}
.ui-map-popup {
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
    padding: var(--ds-space-1) var(--ds-space-2);
    max-width: 260px;
}
.ui-map-popup-title {
    font-size: var(--ds-font-sm);
    font-weight: 700;
    color: var(--ui-heading);
}
.ui-map-popup-address {
    font-size: var(--ds-font-xs);
    color: var(--ui-muted);
    margin-top: var(--ds-space-1);
}

/* ==========================================================================
   LEAFLET & OPENSTREETMAP STYLES
   ========================================================================== */
#fondazioni-mappa,
#catalogo-mappa,
.ui-map-canvas {
    width: 100% !important;
    height: 380px !important;
    min-height: 380px !important;
    border-radius: var(--ds-radius-xl);
    display: block !important;
    position: relative !important;
}
@media (max-width: 639px) {
    #fondazioni-mappa,
    #catalogo-mappa,
    .ui-map-canvas {
        height: 320px !important;
        min-height: 320px !important;
    }
}
.leaflet-container {
    font-family: inherit !important;
    background-color: var(--ui-surface-subtle) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    z-index: var(--ds-z-content);
}
/* Le tile e i marker cartografici hanno dimensioni proprie: vanno esclusi dal
   vincolo "max-width: 100%; height: auto" applicato alle immagini dal reset,
   altrimenti la mappa si sgretola. Regola recuperata da app.src.css. */
.leaflet-container img,
.gm-style img,
#fondazioni-mappa img,
#catalogo-mappa img {
    max-width: none !important;
    height: auto;
    background: transparent !important;
}
.leaflet-popup-content-wrapper {
    border-radius: 1rem !important;
    padding: var(--ds-space-1) !important;
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--ui-border-card) !important;
}
.leaflet-popup-content {
    margin: var(--ds-space-3) var(--ds-space-3-5) !important;
    line-height: 1.4 !important;
}
.leaflet-popup-tip-container {
    overflow: visible !important;
}
.leaflet-control-zoom {
    border: 1px solid var(--ui-border-card) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}
.leaflet-control-zoom a {
    color: var(--ui-heading) !important;
    background-color: var(--ui-surface-elevated) !important;
    transition: background-color 0.15s ease !important;
}
.leaflet-control-zoom a:hover {
    background-color: var(--ui-surface-subtle) !important;
    color: var(--ui-accent) !important;
}
.leaflet-control-attribution {
    /* L'attribuzione della mappa e' il testo piu' piccolo consentito, e ora lo
       dice attraverso il token invece che con un letterale: era l'ultimo px
       scritto a mano sopravvissuto a UI-13. */
    font-size: var(--ds-font-3xs) !important;
    background: var(--ui-barra-velo-attribuzione) !important;
    backdrop-filter: blur(4px) !important;
    border-top-left-radius: 0.5rem !important;
    padding: var(--ds-space-half) var(--ds-space-1-5) !important;
}
.ui-cat-map-marker-wrap {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
    transition: transform 0.15s ease, filter 0.15s ease;
}
.ui-cat-map-marker-wrap:hover {
    transform: scale(1.15) translateY(-3px);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
    z-index: var(--ds-z-map-marker) !important;
}
.ui-cat-map-pin {
    display: block;
    width: 46px;
    height: 54px;
}

/* Local search suggestions dropdown */
.ui-map-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--ds-space-1-5);
    background-color: var(--ui-surface-elevated);
    border: 1px solid var(--ui-border-card);
    border-radius: 1rem;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
    z-index: var(--ds-z-dropdown);
    max-height: 14rem;
    max-width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    padding: var(--ds-space-1-5);
}
.ui-map-search-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-3);
    border-radius: 0.625rem;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.ui-map-search-item:hover,
.ui-map-search-item:focus,
.ui-map-search-item[aria-selected="true"] {
    background-color: var(--ui-surface-subtle);
}
.ui-map-search-icon {
    font-size: 1rem;
    flex-shrink: 0;
}
.ui-map-search-title { color: var(--ui-heading); }
.ui-map-search-subtitle { color: var(--ui-muted); }

/* Hero Grid Responsive Layout */
.ui-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .ui-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.25rem;
        align-items: start;
    }
}

/* Stili Dropdown Google Places Autocomplete */
.pac-container {
    background-color: var(--ui-surface-elevated) !important;
    border: 1px solid var(--ui-border-card) !important;
    border-radius: var(--ds-radius-xl) !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08) !important;
    font-family: inherit !important;
    margin-top: var(--ds-space-1-5) !important;
    padding: var(--ds-space-1) !important;
    z-index: var(--ds-z-places) !important;
}
.pac-item {
    padding: var(--ds-space-2) var(--ds-space-3) !important;
    font-size: var(--ds-font-sm) !important;
    color: var(--ui-text) !important;
    cursor: pointer !important;
    border-radius: var(--ds-radius-lg) !important;
    border-top: none !important;
    display: flex !important;
    align-items: center !important;
    transition: background-color 150ms ease, color 150ms ease !important;
}
.pac-item:hover,
.pac-item-selected,
.pac-item-selected:hover {
    background-color: var(--ui-surface-subtle) !important;
    color: var(--ui-heading) !important;
}
.pac-item-query {
    font-size: var(--ds-font-sm) !important;
    font-weight: 700 !important;
    color: var(--ui-heading) !important;
    padding-right: var(--ds-space-1-5) !important;
}
.pac-matched {
    font-weight: 900 !important;
    color: var(--ui-accent) !important;
}
.pac-icon {
    margin-top: 0 !important;
    margin-right: var(--ds-space-2) !important;
}
.pac-logo::after {
    margin: var(--ds-space-1-5) var(--ds-space-3) var(--ds-space-1) !important;
}

/* Mobile Sticky Bottom Action Bar */
.ui-mobile-bottombar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--ds-z-floating);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-1);
    padding: var(--ds-space-2);
    padding-bottom: max(var(--ds-space-2), env(safe-area-inset-bottom, var(--ds-space-2)));
    background-color: var(--ui-barra-velo-admin);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--ui-border);
    box-shadow: 0 -4px 16px -2px rgba(15, 23, 42, 0.08);
}

/* Sopra i 640px la navigazione e' gia' garantita dalla barra laterale.
   La regola sta qui, dopo la definizione di base, perche' a parita' di
   specificita' vince l'ultima dichiarata nel foglio. */
@media (min-width: 640px) {
    .ui-mobile-bottombar {
        display: none;
    }
}

/* Il dettaglio Storie contiene fotografia, dati e testo editoriale: a
   differenza dei dialog di conferma necessita di una lettura più ampia. */
dialog.ui-modal-dialog.ui-modal-dialog-storia,
.ui-modal-dialog.ui-modal-dialog-storia,
.ui-modal-dialog-storia {
    max-width: min(94vw, 72rem);
    max-height: min(92vh, 92dvh);
}

dialog.ui-modal-dialog.ui-modal-dialog-storia > .ui-storie-modal-shell,
.ui-modal-dialog.ui-modal-dialog-storia > .ui-storie-modal-shell,
.ui-modal-dialog-storia > .ui-storie-modal-shell {
    max-height: min(92vh, 92dvh);
}

.ui-storie-modal-layout {
    display: grid;
    gap: var(--ds-space-6);
}

.ui-storie-modal-media,
.ui-storie-modal-contenuto {
    min-width: 0;
}

.ui-storie-modal-titolo {
    min-width: 0;
}

.ui-storie-modal-titolo h3,
.ui-storie-modal-link {
    overflow-wrap: anywhere;
}

.ui-storie-modal-corpo {
    overscroll-behavior: contain;
}

@media (min-width: 768px) {
    .ui-storie-modal-layout {
        grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.1fr);
        align-items: start;
    }

    .ui-storie-modal-contenuto .ui-guida-passaggio {
        margin-top: 0;
    }
}

@media (min-width: 1024px) {
    dialog.ui-modal-dialog.ui-modal-dialog-storia,
    .ui-modal-dialog.ui-modal-dialog-storia,
    .ui-modal-dialog-storia {
        width: min(95vw, 84rem);
        max-width: min(95vw, 84rem);
        height: min(88vh, 54rem);
        min-height: min(40rem, 85vh);
    }

    dialog.ui-modal-dialog.ui-modal-dialog-storia > .ui-storie-modal-shell,
    .ui-modal-dialog.ui-modal-dialog-storia > .ui-storie-modal-shell,
    .ui-modal-dialog-storia > .ui-storie-modal-shell {
        height: 100%;
        max-height: min(88vh, 54rem);
    }

    .ui-storie-modal-layout {
        grid-template-columns: minmax(22rem, 1fr) minmax(0, 1.25fr);
        gap: var(--ds-space-8);
        height: 100%;
        align-items: stretch;
    }

    .ui-storie-modal-media {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }

    .ui-storie-modal-media .ui-media-storia {
        flex: 1 1 auto;
        height: 100%;
        min-height: 26rem;
        max-height: 42rem;
        aspect-ratio: auto;
        border-radius: var(--ds-radius-2xl);
    }

    .ui-storie-modal-media .ui-media-storia img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ui-storie-modal-contenuto {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .ui-storie-modal-contenuto .ui-guida-passaggio {
        padding: var(--ds-space-4) var(--ds-space-5);
        font-size: var(--ds-font-sm);
    }

    .ui-storie-modal-contenuto .ui-guida-passaggio strong {
        font-size: var(--ds-font-base);
    }

    .ui-storie-modal-contenuto .ui-storie-quote {
        padding: var(--ds-space-4) var(--ds-space-5);
        font-size: var(--ds-font-base);
        line-height: var(--ds-line-relaxed);
    }

    .ui-storie-modal-contenuto #dialog-storia-testo {
        font-size: var(--ds-font-base);
        line-height: 1.8;
    }

    .ui-storie-modal-titolo h3 {
        font-size: var(--ds-font-3xl);
    }

    .ui-storie-modal-intestazione,
    .ui-storie-modal-azioni {
        padding-right: var(--ds-space-8);
        padding-left: var(--ds-space-8);
    }

    .ui-storie-modal-corpo {
        padding: var(--ds-space-8);
    }
}

@media (max-width: 639px) {
    dialog.ui-modal-dialog.ui-modal-dialog-storia,
    .ui-modal-dialog.ui-modal-dialog-storia,
    .ui-modal-dialog-storia,
    dialog.ui-modal-dialog.ui-modal-dialog-storia > .ui-storie-modal-shell,
    .ui-modal-dialog.ui-modal-dialog-storia > .ui-storie-modal-shell,
    .ui-modal-dialog-storia > .ui-storie-modal-shell {
        max-height: min(96vh, 96dvh);
    }

    .ui-storie-modal-intestazione,
    .ui-storie-modal-corpo,
    .ui-storie-modal-azioni {
        padding-right: var(--ds-space-4);
        padding-left: var(--ds-space-4);
    }

    .ui-storie-modal-intestazione {
        align-items: flex-start;
    }

    .ui-storie-modal-azioni {
        flex-direction: column;
        align-items: stretch;
    }

    .ui-storie-modal-azioni .ui-btn {
        width: 100%;
    }
}

/* ==========================================================================
   14. RESPONSIVENESS & ACCESSIBILITY PREFERENCES
   ========================================================================== */

/* Portale gestionale: il pulsante Menu governa la barra laterale a comparsa
   sotto i 1024px e resta nascosto quando la barra e' permanentemente visibile. */
.ui-admin-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    min-height: var(--ui-control-min-h);
    border: 1px solid var(--ui-scuro-bordo-chiaro);
    border-radius: var(--ds-radius-lg);
    background-color: var(--ui-scuro-superficie);
    color: var(--ui-scuro-testo);
    padding: var(--ds-space-2) var(--ds-space-3);
    font-size: var(--ds-font-sm);
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--ds-shadow-1);
}

.ui-admin-menu-toggle:hover {
    background-color: var(--ui-scuro-bordo);
    color: var(--ui-scuro-testo);
}

/* Sito pubblico e Profilo vivono soltanto nell'header. Sotto il desktop
   conservano l'icona e il nome accessibile, senza duplicarsi nel menu. */
.ui-admin-utility-link {
    display: inline-flex;
}

.ui-admin-ambito-nome {
    max-width: 12rem;
}

@media (min-width: 1024px) {
    .ui-admin-menu-toggle {
        display: none;
    }

    .ui-admin-ambito-nome {
        max-width: none;
    }
}

@media (max-width: 767px) {
    .ui-admin-ambito {
        display: none;
    }

    .ui-admin-utility-link span {
        display: none;
    }
}

/* Sugli schermi molto stretti restano Menu e controlli di utilita/sessione:
   la navigazione primaria e' gia' garantita dalla barra inferiore. */
@media (max-width: 639px) {
    /* Le utility restano come icone accessibili; logo, ambito e ruolo cedono
       spazio per non eccedere un viewport da 375px. */
    .ui-admin-logo,
    .ui-admin-topbar .ui-badge-ruolo-superadmin,
    .ui-admin-topbar .ui-badge-ruolo-admin,
    .ui-admin-topbar .ui-badge-ruolo-operatore {
        display: none;
    }

    .ui-admin-menu-toggle span,
    .ui-admin-logout span {
        display: none;
    }

    .ui-admin-topbar {
        gap: var(--ds-space-2);
        padding-inline: var(--ds-space-3);
    }

    .ui-admin-topbar-brand {
        min-width: 0;
    }

    .ui-admin-logo {
        min-width: 0;
        overflow: hidden;
    }

    .ui-admin-logo img {
        height: 1.5rem;
    }
}

/* Smartphone Responsive Refinements (< 640px) */
@media (max-width: 639px) {
    main#contenuto:not(.max-w-md):not(.max-w-lg),
    main#main-content {
        padding-block: var(--ds-space-6);
    }
    .ui-admin-header nav { gap: var(--ds-space-1); }
    .ui-admin-header nav a { min-height: 2.75rem; }
    .home-carousel-card { padding: var(--ds-space-3); }
    .home-carousel-dots { display: none; }

    /* Prevent auto-zoom on iOS Safari by enforcing >= 16px font-size on all mobile inputs */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        /* Unico px letterale voluto di tutto il foglio, e va lasciato tale:
           Safari su iOS ingrandisce la pagina quando mette a fuoco un campo il
           cui corpo *calcolato* e' sotto i 16px. In rem la soglia dipenderebbe
           dalla dimensione base scelta dall'utente, cioe' proprio dal caso in
           cui il rimedio serve. Non sostituire con un token. */
        font-size: 16px !important;
        min-height: 2.75rem;
    }

    .ui-btn {
        min-height: 2.75rem;
    }

    /* Mobile Arrivals Card Snapping */
    .home-arrival-card {
        flex: 0 0 85% !important;
        max-width: 85% !important;
    }
}

/* Touch targets and pointers for mobile & tablets */
@media (pointer: coarse) {
    .ui-btn,
    .ui-touch-target,
    a.ui-btn,
    button.ui-btn,
    .home-carousel-control,
    .home-arrivals-control,
    .ui-data-pagina,
    .leaflet-control-zoom a {
        min-height: 2.75rem !important;
        min-width: 2.75rem !important;
    }

    /* Altezza tattile; la colonna conserva la propria larghezza. */
    .ui-filtro-campo {
        min-height: 2.75rem;
    }

    /* Comando di chiusura con bersaglio tattile. */
    .ui-chiudi-modale {
        min-height: 2.75rem;
        min-width: 2.75rem;
    }

    /* I punti del carosello erano 10 px con passo 14 px: nessuna area di
       tocco poteva salvarli senza sovrapporsi ai vicini. Su touch il passo
       sale a 24 px (12 di punto piu' 12 di distacco) e l'area attiva riempie
       esattamente il passo, alta 44 px. Il disegno su mouse resta invariato. */
    .home-carousel-dots {
        gap: var(--ds-space-3);
    }

    .home-carousel-dot {
        position: relative;
        height: var(--ds-space-3);
        width: var(--ds-space-3);
    }

    .home-carousel-dot.is-active {
        width: var(--ds-space-6);
    }

    .home-carousel-dot::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 2.75rem;
        width: calc(100% + var(--ds-space-3));
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* COMPONENTI SEMANTICI CONDIVISI */

.ui-bordo-sezione {
    border-color: var(--ui-border);
}

.ui-bordo-morbido {
    border-color: var(--ui-border-soft);
}

.ui-superficie {
    background: var(--ui-surface);
}

.ui-superficie-attenuata {
    background: var(--ui-surface-subtle);
}

/* La forma dei pannelli appartiene ai componenti, non alle utility del markup. */
.ui-riquadro-principale {
    border-radius: var(--ds-radius-2xl);
}

.ui-riquadro-secondario {
    border-radius: var(--ds-radius-xl);
}

.ui-titolo {
    color: var(--ui-heading);
}

.ui-testo-corpo {
    color: var(--ui-text);
}

.ui-testo-lungo {
    overflow-wrap: anywhere;
}

.ui-testo-accento {
    color: var(--ui-accent);
}

.ui-testo-pericolo {
    color: var(--ui-danger);
}

.ui-back-to-top {
    position: fixed;
    right: var(--ds-space-4);
    bottom: var(--ds-space-4);
    z-index: var(--ds-z-floating);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ds-radius-full);
    background: var(--ui-accent);
    color: var(--ui-inverse-text);
    box-shadow: var(--ds-shadow-3);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(var(--ds-space-2));
    transition: opacity var(--ds-transition-fast), transform var(--ds-transition-fast);
}

.ui-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.ui-icona-accento {
    color: var(--ui-accent-caldo);
}

.ui-icona-positiva {
    color: var(--ui-positive);
}

/* Nel backoffice la spunta e' uno stato, non un comando: prende l'ambra che */
.ui-admin-page input[type="checkbox"]:not(.ui-checkbox-positiva),
.ui-admin-page input[type="radio"]:not(.ui-checkbox-positiva),
.ui-admin-auth input[type="checkbox"]:not(.ui-checkbox-positiva) {
    accent-color: var(--ui-accent);
}

/* Unica eccezione voluta: la spunta che accende una funzione pubblica. */
.ui-admin-page input[type="checkbox"].ui-checkbox-positiva {
    accent-color: var(--ui-positive);
}

.ui-spinner-accento {
    color: var(--ui-accent);
    border-color: currentColor;
    border-top-color: transparent;
}

.ui-input-pericolo {
    border-color: var(--ui-danger-border) !important;
}

.ui-input-pericolo:focus {
    border-color: var(--ui-danger) !important;
    box-shadow: 0 0 0 3px var(--ui-focus-halo) !important;
}

.ui-divisore-morbido > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--ui-border-soft);
}

.ui-carosello-separatore {
    border-color: var(--ui-border-soft);
}

.ui-carosello-placeholder {
    background: var(--ui-overlay);
    color: var(--ui-overlay-text);
}

.ui-pannello-storie-home {
    border-color: var(--ui-border-soft);
    border-radius: var(--ds-radius-2xl);
    background: var(--ui-surface-subtle);
}

.ui-pannello-missione {
    border-radius: var(--ds-radius-2xl);
    background: var(--ui-overlay);
    color: var(--ui-overlay-text);
}

.ui-pannello-missione .ui-titolo,
.ui-pannello-missione .ui-testo-secondario,
.ui-pannello-missione .ui-eyebrow {
    color: var(--ui-overlay-text);
}

.ui-missione-intestazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ui-missione-periodo,
.ui-missione-nota {
    color: var(--ui-overlay-text-muted);
}

.ui-missione-periodo {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
}

.ui-missione-navigazione {
    display: grid;
    grid-template-columns: 2.75rem minmax(4.5rem, auto) 2.75rem;
    align-items: center;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ui-overlay);
}

.ui-missione-nav-btn {
    display: inline-flex;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--ui-overlay-text);
    font-size: 1.125rem;
    font-weight: 900;
    transition: background-color 160ms ease, color 160ms ease;
}

.ui-missione-nav-btn:hover:not(:disabled),
.ui-missione-nav-btn:focus-visible {
    background: var(--ui-overlay-hover);
}

.ui-missione-nav-btn:disabled {
    cursor: not-allowed;
    color: var(--ui-overlay-text-muted);
    opacity: 0.55;
}

.ui-missione-anno {
    padding-inline: 0.5rem;
    color: var(--ui-overlay-text);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.ui-missione-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.ui-missione-stats[hidden] {
    display: none;
}

.ui-missione-stat {
    display: flex;
    min-height: 7.25rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.75rem;
    border-color: var(--ui-border);
    border-style: solid;
    border-width: 1px;
    border-radius: var(--ds-radius-xl);
    background: var(--ui-overlay);
    color: var(--ui-overlay-text);
    text-align: center;
}

.ui-missione-stat strong {
    display: block;
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    line-height: 1;
}

.ui-missione-stat span {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
}

.ui-missione-nota {
    margin-top: 0.75rem;
    font-size: 0.6875rem;
    line-height: 1.45;
}

@media (min-width: 640px) {
    .ui-missione-periodo {
        font-size: 0.8125rem;
    }

    .ui-missione-stats {
        gap: 1rem;
    }

    .ui-missione-stat {
        min-height: 8rem;
        padding: 1.25rem 1rem;
    }

    .ui-missione-stat span {
        font-size: 0.75rem;
    }
}

.ui-pannello-urgenza,
.ui-pannello-donazione,
.ui-pannello-volontariato {
    border-style: solid;
    border-radius: var(--ds-radius-2xl);
    background: var(--ui-surface);
}

.ui-pannello-urgenza {
    border-color: var(--ui-danger-border);
    background: var(--ui-danger-bg);
}

.ui-pannello-donazione {
    border-color: var(--ui-attention-border);
    background: var(--ui-attention-bg);
}

.ui-pannello-volontariato {
    border-color: var(--ui-positive-border);
    background: var(--ui-positive-bg);
}

.ui-icona-urgenza,
.ui-icona-donazione,
.ui-icona-volontariato {
    display: inline-flex;
    border-radius: var(--ds-radius-xl);
    color: var(--ui-inverse-text);
}

.ui-icona-urgenza { background: var(--ui-danger); }
.ui-icona-donazione { background: var(--ui-accent-caldo); }
.ui-icona-volontariato { background: var(--ui-positive); }

.ui-badge-urgenza,
.ui-badge-donazione,
.ui-badge-attenzione,
.ui-badge-volontariato,
.ui-badge-neutro,
.ui-badge-positivo {
    border: 1px solid;
}

.ui-badge-urgenza {
    border-color: var(--ui-danger-border);
    background: var(--ui-danger-bg);
    color: var(--ui-danger);
}

.ui-badge-donazione {
    border-color: var(--ui-attention-border);
    background: var(--ui-attention-bg);
    color: var(--ui-attention);
}

/* Qualcosa aspetta una nostra azione. Stessi colori di "donazione", che usa gia'
   il livello attenzione, ma il nome dice il significato e non il caso d'uso: un
   badge che segnala un'attesa non puo' chiamarsi come una raccolta fondi. */
.ui-badge-attenzione {
    border-color: var(--ui-attention-border);
    background: var(--ui-attention-bg);
    color: var(--ui-attention);
}

.ui-badge-volontariato,
.ui-badge-positivo {
    border-color: var(--ui-positive-border);
    background: var(--ui-positive-bg);
    color: var(--ui-positive);
}

.ui-badge-neutro {
    border-color: var(--ui-border);
    background: var(--ui-surface-subtle);
    color: var(--ui-text);
}

.ui-titolo-urgenza,
.ui-testo-urgenza {
    color: var(--ui-danger);
}

.ui-titolo-volontariato,
.ui-testo-volontariato {
    color: var(--ui-positive);
}

.ui-card-donazione {
    border-color: var(--ui-attention-border);
    border-radius: var(--ds-radius-xl);
    background: var(--ui-surface);
}

.ui-valore-copiabile {
    border-color: var(--ui-border-soft);
    background: var(--ui-surface-subtle);
    color: var(--ui-heading);
}

.ui-btn-copia {
    border-color: var(--ui-attention-border);
    background: var(--ui-attention-bg);
    color: var(--ui-attention);
}

.ui-btn-copia:hover {
    border-color: var(--ui-attention);
    background: var(--ui-surface);
}

.ui-btn-copia.is-copiato {
    border-color: var(--ui-positive-border);
    background: var(--ui-positive-bg);
    color: var(--ui-positive);
}

.ui-nota-donazione {
    border-color: var(--ui-attention-border);
    border-radius: var(--ds-radius-xl);
    background: var(--ui-attention-bg);
    color: var(--ui-attention);
}

.ui-modal-intestazione {
    border-color: var(--ui-border-soft);
    background: var(--ui-surface-elevated);
}

.ui-modal-corpo {
    background: var(--ui-surface-elevated);
    color: var(--ui-text);
}

.ui-modal-azioni {
    border-color: var(--ui-border-soft);
    background: var(--ui-surface-subtle);
}

.ui-modal-separatore {
    border-color: var(--ui-border-soft);
}

.ui-guida-passaggio {
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ds-radius-xl);
    background: var(--ui-surface-subtle);
    color: var(--ui-text);
}

.ui-guida-passaggio.is-attenzione {
    border-color: var(--ui-attention-border);
    background: var(--ui-attention-bg);
    color: var(--ui-attention);
}

.ui-guida-passaggio.is-urgenza {
    border-color: var(--ui-danger-border);
    background: var(--ui-danger-bg);
    color: var(--ui-danger);
}

.ui-guida-contatto {
    border-color: var(--ui-positive-border);
    border-radius: var(--ds-radius-xl);
    background: var(--ui-positive-bg);
    color: var(--ui-positive);
}

.ui-file-input,
.ui-file-input-accento {
    width: 100%;
    min-height: 3.25rem;
    padding: var(--ds-space-1) var(--ds-space-2);
    cursor: pointer;
}

.ui-file-input::file-selector-button,
.ui-file-input-accento::file-selector-button {
    min-height: 2.5rem;
    margin-right: var(--ds-space-3);
    padding: var(--ds-space-2) var(--ds-space-4);
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm);
    cursor: pointer;
    font: inherit;
    font-size: var(--ds-font-sm);
    font-weight: 700;
    line-height: var(--ds-line-tight);
    transition: background-color var(--ds-transition-fast), border-color var(--ds-transition-fast);
}

.ui-file-input::file-selector-button {
    background: var(--ui-positive-bg);
    color: var(--ui-positive);
}

.ui-file-input:hover::file-selector-button {
    background: var(--ui-surface-subtle);
}

.ui-file-input-accento::file-selector-button {
    background: var(--ui-accent);
    color: var(--ui-accent-contrast);
}

.ui-file-input-accento:hover::file-selector-button {
    background: var(--ui-accent-hover);
}

.ui-media-storia {
    border-radius: var(--ds-radius-xl);
}

.ui-media-storia,
.ui-media-gatto {
    background: var(--ui-surface-subtle);
}

.ui-badge-sovrapposto {
    background: var(--ui-overlay);
    color: var(--ui-overlay-text);
}

.ui-avatar-referente {
    border-color: var(--ui-attention-border);
    background: var(--ui-attention-bg);
    color: var(--ui-attention);
}

.ui-badge-referente-admin {
    border-color: var(--ui-positive-border);
    background: var(--ui-positive-bg);
    color: var(--ui-positive);
}

.ui-badge-referente-operatore {
    border-color: var(--ui-border);
    background: var(--ui-surface-subtle);
    color: var(--ui-text);
}

.ui-card-interattiva:hover {
    border-color: var(--ui-accent-caldo);
}

.ui-riga-interattiva:hover {
    background: var(--ui-surface-subtle);
}

/* Nome dell'area sopra il titolo del riquadro: dice dove porta il riquadro
   con le stesse parole della voce di menu. */
.ui-dashboard-occhiello {
    display: block;
    margin-bottom: 2px;
    font-size: var(--ds-font-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

/* Perche' un contenuto non e' online, in una frase. Non e' un dettaglio
   secondario: e' l'unica riga che dice cosa fare, quindi non si attenua
   fino a sparire. */
.ui-dashboard-motivo {
    margin-top: 2px;
    font-size: var(--ds-font-xs);
    line-height: var(--ds-line-relaxed);
    color: var(--ui-text);
}

.ui-opzione-selezionabile {
    border-color: var(--ui-border-soft);
    background: var(--ui-surface);
    color: var(--ui-text);
}

.ui-opzione-selezionabile:hover {
    background: var(--ui-surface-subtle);
}

.ui-opzione-selezionabile.is-selezionata {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
    box-shadow: 0 0 0 2px var(--ui-focus-halo);
}

.ui-combobox {
    margin-top: var(--ui-field-gap);
}

.ui-combobox-list {
    position: absolute;
    z-index: var(--ds-z-navigation);
    top: calc(100% + var(--ds-space-1));
    left: 0;
    right: 0;
    max-height: 15rem;
    overflow-y: auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ds-shadow-3);
}

.ui-combobox-option {
    display: block;
    padding: var(--ds-space-2) var(--ds-space-3);
    color: var(--ui-text);
    cursor: pointer;
}

.ui-combobox-option:hover,
.ui-combobox-option[aria-selected="true"] {
    background: var(--ui-accent-soft);
    color: var(--ui-text);
}

.ui-combobox-option.hidden {
    display: none;
}

.ui-colori-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--ds-space-2);
}

.ui-colore-chip {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-width: 0;
    padding: var(--ds-space-2) var(--ds-space-3);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-font-xs);
    font-weight: 600;
    cursor: pointer;
}

.ui-colore-chip:has(input:checked) {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
}

.ui-colore-campione {
    flex: 0 0 1.75rem;
    width: 1.75rem;
    aspect-ratio: 1;
    border: 1px solid var(--ui-border);
    border-radius: var(--ds-radius-full);
    box-shadow: inset 0 0 0 var(--ds-space-half) var(--ui-surface);
}

.ui-colore-campione.is-bianco { background: linear-gradient(135deg, var(--ds-cat-white-light), var(--ds-cat-white-dark)); }
.ui-colore-campione.is-nero { background: linear-gradient(135deg, var(--ds-cat-black-light), var(--ds-cat-black-dark)); }
.ui-colore-campione.is-blu { background: linear-gradient(135deg, var(--ds-cat-blue-light), var(--ds-cat-blue-dark)); }
.ui-colore-campione.is-rosso { background: linear-gradient(135deg, var(--ds-cat-red-light), var(--ds-cat-red-dark)); }
.ui-colore-campione.is-crema { background: linear-gradient(135deg, var(--ds-cat-cream-light), var(--ds-cat-cream-dark)); }
.ui-colore-campione.is-cioccolato { background: linear-gradient(135deg, var(--ds-cat-chocolate-light), var(--ds-cat-chocolate-dark)); }
.ui-colore-campione.is-cannella { background: linear-gradient(135deg, var(--ds-cat-cinnamon-light), var(--ds-cat-cinnamon-dark)); }
.ui-colore-campione.is-lilla { background: linear-gradient(135deg, var(--ds-cat-lilac-light), var(--ds-cat-lilac-dark)); }
.ui-colore-campione.is-fawn { background: linear-gradient(135deg, var(--ds-cat-fawn-light), var(--ds-cat-fawn-dark)); }
.ui-colore-campione.is-altro {
    background: conic-gradient(
        var(--ds-cat-red-light),
        var(--ds-cat-black-light),
        var(--ds-cat-white-dark),
        var(--ds-cat-blue-light),
        var(--ds-cat-red-light)
    );
}
.ui-colore-campione.is-non-noto {
    background: repeating-linear-gradient(
        135deg,
        var(--ds-cat-unknown-light) 0 var(--ds-space-1),
        var(--ds-cat-unknown-dark) var(--ds-space-1) var(--ds-space-2)
    );
}

.ui-dashboard-operativa {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
    .ui-dashboard-operativa {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

.ui-badge-documento {
    border: 1px solid;
}

.ui-badge-documento.is-pdf {
    border-color: var(--ui-danger-border);
    background: var(--ui-danger-bg);
    color: var(--ui-danger);
}

.ui-badge-documento.is-word {
    border-color: var(--ui-info-border);
    background: var(--ui-info-bg);
    color: var(--ui-info);
}

.ui-badge-disponibile {
    background: var(--ui-positive);
    color: var(--ui-inverse-text);
}

.ui-badge-disponibile-punto {
    background: var(--ui-inverse-text);
}

.ui-chip-evidenza {
    border-color: var(--ui-attention-border);
    background: var(--ui-attention-bg);
    color: var(--ui-attention);
}

.ui-chip-rimuovi {
    color: var(--ui-attention);
}

.ui-chip-rimuovi:hover {
    background: var(--ui-danger-bg);
    color: var(--ui-danger);
}

.ui-chip-neutro {
    border-color: var(--ui-border);
    background: var(--ui-surface-subtle);
    color: var(--ui-text);
}

/* Glossario pubblico: termine con spiegazione a scomparsa.
   Il termine resta nel flusso del testo, la spiegazione si apre sotto come
   blocco a piena larghezza del contenitore, cosi' non serve posizionamento
   assoluto e non esce dallo schermo su un telefono. */
.ui-glossario {
    display: inline;
}

.ui-glossario-termine {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: help;
}

.ui-glossario-parola {
    border-bottom: 1px dotted currentColor;
}

.ui-glossario-segno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05em;
    height: 1.05em;
    margin-left: 0.25em;
    border-radius: 999px;
    background: var(--ui-info);
    color: var(--ui-inverse-text);
    font-size: 0.72em;
    font-weight: 800;
    line-height: 1;
    vertical-align: baseline;
    translate: 0 -0.08em;
}

.ui-glossario-termine:hover .ui-glossario-parola,
.ui-glossario-termine[aria-expanded="true"] .ui-glossario-parola {
    border-bottom-style: solid;
}

.ui-glossario-termine:hover .ui-glossario-segno,
.ui-glossario-termine[aria-expanded="true"] .ui-glossario-segno {
    background: var(--ui-azione);
}

.ui-glossario-testo {
    display: block;
    margin-top: var(--ds-space-2);
    margin-bottom: var(--ds-space-2);
    padding: var(--ds-space-3);
    border: 1px solid var(--ui-info-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-info-bg);
    color: var(--ui-text);
    font-size: var(--ui-font-sm);
    font-weight: 400;
    line-height: 1.55;
    text-transform: none;
    letter-spacing: normal;
}

.ui-glossario-titolo {
    display: block;
    color: var(--ui-info);
    font-size: var(--ui-font-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ui-glossario-corpo {
    display: block;
    margin-top: var(--ds-space-1);
}


.ui-pannello-informativo {
    border-color: var(--ui-info-border);
    border-radius: var(--ds-radius-2xl);
    background: var(--ui-info-bg);
    color: var(--ui-info);
}

/* Il "e adesso?" accanto al badge di stato di una pratica pubblica. */
.ui-nota-stato {
    border-left: 3px solid var(--ui-info-border);
    padding-left: var(--ds-space-3);
    color: var(--ui-text);
    font-size: var(--ui-font-sm);
    font-weight: 500;
    line-height: 1.55;
}

.ui-badge-informativo {
    border-color: var(--ui-info-border);
    background: var(--ui-info);
    color: var(--ui-inverse-text);
}

.ui-icona-informativa {
    color: var(--ui-info);
}

.ui-scheda-dati,
.ui-stato-sanitario,
.ui-nota-sanitaria,
.ui-passaggio-adozione {
    border-color: var(--ui-border-soft);
    border-radius: var(--ds-radius-xl);
    background: var(--ui-surface-subtle);
    color: var(--ui-text);
}

.ui-stato-sanitario .is-completo {
    color: var(--ui-positive);
}

.ui-thumbnail {
    border-color: var(--ui-border);
    background: var(--ui-surface-subtle);
}

/* ==========================================================================
   MODALI & DIALOG SEMANTICI (Native <dialog> & .ui-modal-dialog)
   Centratura fissa nel viewport dello schermo, elevazione e backdrop
   ========================================================================== */
dialog.ui-modal-dialog,
.ui-modal-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    height: auto;
    max-height: min(90vh, 90dvh);
    max-width: min(94vw, 48rem);
    width: 100%;
    padding: 0;
    border: 1px solid var(--ui-border-soft, #cbd5e1);
    border-radius: var(--ds-radius-3xl, 1.5rem);
    background: var(--ui-surface-elevated);
    box-shadow: 0 25px 50px -12px rgba(2, 6, 23, 0.45);
    z-index: var(--ds-z-modal);
    overflow: hidden;
    display: none;
    flex-direction: column;
}

dialog.ui-modal-dialog:not([open]),
.ui-modal-dialog:not([open]) {
    display: none;
}

dialog.ui-modal-dialog[open],
.ui-modal-dialog[open] {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

dialog.ui-modal-dialog > form,
dialog.ui-modal-dialog > div,
.ui-modal-dialog > form,
.ui-modal-dialog > div {
    display: flex;
    flex-direction: column;
    max-height: min(90vh, 90dvh);
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--ui-surface-elevated);
}

dialog.ui-modal-dialog::backdrop,
.ui-modal-dialog::backdrop,
.ui-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--ui-velo-modale);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: var(--ds-z-modal-backdrop);
}

body:has(dialog.ui-modal-dialog[open]),
body.has-modal-open {
    overflow: hidden;
}

@media (max-width: 639px) {
    dialog.ui-modal-dialog,
    .ui-modal-dialog {
        max-width: 95vw;
        max-height: min(94vh, 94dvh);
        border-radius: var(--ds-radius-2xl, 1.25rem);
    }
    dialog.ui-modal-dialog > form,
    dialog.ui-modal-dialog > div,
    .ui-modal-dialog > form,
    .ui-modal-dialog > div {
        max-height: min(94vh, 94dvh);
    }
}

/* ==========================================================================
   STORIE A LIETO FINE (Hero, Badge, Quote & Controls)
   Stili ad alto contrasto garantito per la sezione storie adozioni
   ========================================================================== */
.ui-storie-hero {
    background: linear-gradient(135deg, var(--ui-storie-hero-da) 0%, var(--ui-storie-hero-mid) 45%, var(--ui-storie-hero-a) 100%) !important;
    color: var(--ui-storie-hero-testo) !important;
    display: grid;
    align-items: center;
    gap: var(--ds-space-5);
    border: 1px solid var(--ui-storie-badge-bordo);
    border-radius: var(--ds-radius-2xl);
    padding: clamp(1.25rem, 3vw, 2.5rem);
    box-shadow: var(--ds-shadow-3);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.ui-storie-hero::before {
    content: '';
    position: absolute;
    width: 24rem;
    height: 24rem;
    right: -8rem;
    top: -10rem;
    border: 3rem solid var(--ui-storie-badge-bordo);
    border-radius: var(--ds-radius-full);
    opacity: 0.3;
    pointer-events: none;
    z-index: var(--ds-z-media-background);
}

.ui-storie-introduzione,
.ui-storie-anteprima {
    position: relative;
    min-width: 0;
    z-index: var(--ds-z-content);
}

.ui-storie-hero h1 {
    color: var(--ui-storie-hero-testo) !important;
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: var(--ds-line-tight);
    text-wrap: balance;
}

.ui-storie-introduzione p {
    color: var(--ui-storie-hero-testo-tenue) !important;
    max-width: 52ch;
    margin-top: var(--ds-space-3);
    font-size: var(--ds-font-sm);
    line-height: var(--ds-line-relaxed);
}

.ui-storie-anteprima {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--ds-space-3);
    padding: var(--ds-space-2);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ds-radius-xl);
    background: var(--ui-surface);
    color: var(--ui-heading);
    box-shadow: var(--ds-shadow-4);
    text-decoration: none;
}

.ui-storie-anteprima-foto {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--ds-radius-lg);
}

.ui-storie-anteprima-testo {
    display: grid;
    gap: var(--ds-space-1);
    overflow-wrap: anywhere;
}

.ui-storie-anteprima-testo strong {
    color: var(--ui-heading);
    font-size: var(--ds-font-xl);
    font-weight: 900;
    line-height: var(--ds-line-tight);
}

.ui-storie-anteprima-etichetta {
    color: var(--ui-storie-citazione-testo);
    font-size: var(--ds-font-2xs);
    font-weight: 700;
}

.ui-storie-anteprima-invito {
    color: var(--ui-storie-azione-forte);
    font-size: var(--ds-font-xs);
    font-weight: 700;
}

.ui-storie-anteprima:hover .ui-storie-anteprima-invito,
.ui-storie-anteprima:focus-visible .ui-storie-anteprima-invito {
    text-decoration: underline;
}

.ui-storie-anteprima:focus-visible {
    outline: var(--ds-focus-ring-width) solid var(--ui-storie-hero-testo);
    outline-offset: 4px;
}

.ui-storie-filtri {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    /* Le etichette sono visibili: i campi sono pile etichetta-controllo di
       altezza diversa, e vanno allineate sul fondo, non sul centro. */
    align-items: end;
    gap: var(--ds-space-2);
    margin-top: var(--ds-space-3);
    padding: var(--ds-space-2);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ds-radius-xl);
    background: var(--ui-public-panel);
    box-shadow: var(--ds-shadow-1);
}

.ui-storie-ricerca { grid-column: 1 / -1; }
.ui-storie-ricerca,
.ui-storie-associazione { min-width: 0; }
.ui-storie-associazione select { width: 100%; min-width: 0; }
.ui-storie-filtri-azioni { display: contents; }
.ui-storie-filtri.is-filtrato .ui-storie-ricerca { grid-column: 1; }
.ui-storie-filtri .ui-storie-azzera { grid-column: 2; grid-row: 1; }
.ui-storie-filtro-attivo { overflow-wrap: anywhere; }

@media (min-width: 768px) {
    .ui-storie-hero { grid-template-columns: minmax(0, 1fr) minmax(14rem, 28%); }
    .ui-storie-introduzione p { font-size: var(--ds-font-base); }
    .ui-storie-anteprima { grid-template-columns: minmax(0, 1fr); transform: rotate(2deg); }
    .ui-storie-anteprima-foto { aspect-ratio: 16 / 10; }
    .ui-storie-anteprima-testo { padding: var(--ds-space-1) var(--ds-space-2); }
    .ui-storie-filtri { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; }
    .ui-storie-filtri.is-filtrato { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto; }
    .ui-storie-filtri .ui-storie-ricerca,
    .ui-storie-filtri .ui-storie-azzera { grid-column: auto; grid-row: auto; }
}

/* Variante di colore di .ui-badge, non un secondo componente: la forma della
   pastiglia la possiede gia' .ui-badge, e riscriverla qui con misure fisse
   faceva convivere due pastiglie diverse per lo stesso ruolo sulla stessa
   pagina (l'occhiello delle storie accanto a quello dei nuovi arrivi). */
.ui-storie-badge {
    background-color: var(--ui-storie-badge-bg) !important;
    color: var(--ui-storie-badge-testo) !important;
    border-color: var(--ui-storie-badge-bordo) !important;
    box-shadow: var(--ds-shadow-1);
}

.ui-btn-storie {
    background-color: var(--ui-storie-azione) !important;
    color: var(--ui-storie-azione-testo) !important;
    font-weight: 700;
    border: 1px solid var(--ui-storie-azione-forte) !important;
    box-shadow: var(--ds-shadow-1);
}

.ui-btn-storie:hover,
.ui-btn-storie:focus-visible {
    background-color: var(--ui-storie-azione-forte) !important;
    color: var(--ui-storie-azione-testo) !important;
}

.ui-storie-quote {
    background-color: var(--ui-storie-citazione-bg) !important;
    border-left: 3px solid var(--ui-storie-citazione-bordo) !important;
    color: var(--ui-storie-citazione-testo) !important;
    border-radius: var(--ds-radius-lg);
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-style: italic;
}

/* 15. COMPONENTI MIGRATI DA app.src.css */

/* Skip link: primo elemento focalizzabile della pagina, resta fuori schermo
   finche' non riceve il focus da tastiera (WCAG 2.1 SC 2.4.1). */
.skip-link {
    position: absolute;
    left: var(--ds-space-4);
    top: -5rem;
    z-index: var(--ds-z-skip-link);
    border-radius: var(--ds-radius-lg);
    background: var(--ui-accent-caldo);
    color: var(--ui-inverse-text);
    padding: var(--ds-space-3) var(--ds-space-5);
    font-weight: 800;
    font-size: var(--ds-font-sm);
    box-shadow: var(--ds-shadow-3);
    transition: top var(--ds-transition-fast);
}

.skip-link:focus,
.skip-link:focus-visible {
    top: var(--ds-space-4);
    outline: var(--ds-focus-ring-width) solid var(--ui-focus) !important;
    outline-offset: var(--ds-focus-ring-offset) !important;
}

/* Carosello campagne della homepage. */
.home-carousel-section {
    background-color: transparent;
    color: var(--ui-inverse-text);
    position: relative;
    overflow: hidden;
}

.home-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-slide.is-active {
    display: block;
    opacity: 1;
    animation: home-slide-fade 0.6s ease both;
}

@keyframes home-slide-fade {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* Pastiglie di stato sulle schede del carosello "Nuovi arrivi". */
.marquee-badge-new,
.marquee-badge-waiting {
    position: absolute;
    top: var(--ds-space-2);
    left: var(--ds-space-2);
    z-index: var(--ds-z-badge);
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
    border-radius: var(--ds-radius-full);
    font-size: 0.625rem;
    padding: 0.2rem 0.6rem;
}

.marquee-badge-new {
    background: linear-gradient(135deg, #f59e0b 0%, var(--ui-accent-caldo) 100%);
    color: var(--ui-inverse-text);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--ui-marquee-nuovo-bordo);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.4);
}

.marquee-badge-waiting {
    background: var(--ui-marquee-attesa-bg);
    border: 1px solid var(--ui-marquee-attesa-bordo);
    color: var(--ui-marquee-attesa-testo);
    font-weight: 800;
    letter-spacing: 0.04em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Notifiche email: diagramma, editor e anteprima. */
.ui-email-flow-groups,
.ui-email-flow-list,
.ui-email-event-list,
.ui-email-template-list {
    display: grid;
    gap: var(--ds-space-4);
}

.ui-email-event {
    display: grid;
    gap: var(--ds-space-3);
    min-width: 0;
}

.ui-email-event + .ui-email-event {
    border-top: 1px solid var(--ui-border-soft);
    padding-top: var(--ds-space-6);
}

.ui-email-event-header {
    display: grid;
    gap: var(--ds-space-1);
}

.ui-notifiche-stato {
    display: grid;
    gap: var(--ds-space-4);
    align-items: center;
}

.ui-notifiche-stato .ui-btn {
    justify-self: start;
}

.ui-notifiche-indice {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    padding-bottom: var(--ds-space-2);
}

.ui-notifiche-indice a {
    min-height: 2.75rem;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: var(--ds-space-2) var(--ds-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    color: var(--ui-azione);
    font-size: var(--ui-font-xs);
    font-weight: 700;
    text-decoration: none;
}

.ui-notifiche-casella > summary {
    min-height: 2.75rem;
    cursor: pointer;
    color: var(--ui-azione);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
}

.ui-notifiche-casella > summary > span:first-child {
    min-width: 0;
}

.ui-form-error-summary {
    padding: var(--ds-space-4);
    border: 1px solid var(--ui-danger-border);
    border-left-width: 4px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-danger-bg);
    color: var(--ui-text);
}

.ui-form-error-summary ul {
    margin: var(--ds-space-2) 0 0;
    padding-left: var(--ds-space-5);
}

.ui-form-error-summary a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    color: var(--ui-danger);
    font-weight: 700;
    text-underline-offset: .18em;
}

.ui-form-disclosure {
    padding: var(--ds-space-4);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-subtle);
}

.ui-form-disclosure > summary {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--ui-azione);
    font-weight: 800;
}

.ui-gatto-form-colonna {
    display: contents;
}

.ui-gatto-form-identita { grid-area: identita; }
.ui-gatto-form-adozione { grid-area: adozione; }
.ui-gatto-form-carattere { grid-area: carattere; }
.ui-gatto-form-foto { grid-area: foto; }
.ui-gatto-form-azioni { grid-area: azioni; }

.ui-gatto-form {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "identita" "adozione" "carattere" "foto" "azioni";
}

@media (min-width: 1024px) {
    .ui-gatto-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "identita adozione" "carattere foto" "azioni azioni";
    }
}

.ui-email-flow-group {
    display: grid;
    gap: var(--ds-space-3);
}

/* La sidebar riduce lo spazio utile anche quando il viewport è desktop. */
.ui-email-flow-groups {
    container-type: inline-size;
    container-name: email-flows;
}

.ui-email-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-4);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-subtle);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ui-email-flow:not(.is-manual):hover { border-color: var(--ui-accent); box-shadow: var(--ds-shadow-1); }

.ui-email-flow-node {
    min-width: 0;
    padding: var(--ds-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    color: var(--ui-text);
    overflow-wrap: anywhere;
}

.ui-email-flow.is-active [data-email-flow-route-node],
.ui-email-flow.is-active [data-email-flow-box-node] {
    border-color: var(--ui-positive-border);
    background: var(--ui-positive-bg);
    color: var(--ui-positive);
}

.ui-email-flow.is-inactive [data-email-flow-route-node],
.ui-email-flow.is-inactive [data-email-flow-box-node] {
    border-color: var(--ui-border);
    background: var(--ui-surface-subtle);
    color: var(--ui-muted);
}

.ui-email-flow-kicker,
.ui-email-flow-state,
.ui-email-flow-note {
    display: block;
    color: var(--ui-muted);
    font-size: var(--ui-font-xs);
    line-height: 1.45;
}

.ui-email-flow-kicker {
    margin-bottom: var(--ds-space-1);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ui-email-flow-state,
.ui-email-flow-note {
    margin-top: var(--ds-space-1);
}

.ui-email-flow-arrow {
    color: var(--ui-border);
    font-weight: 700;
    text-align: center;
    transform: rotate(90deg);
}

.ui-email-flow.is-manual {
    justify-items: stretch;
}

.ui-email-template {
    scroll-margin-top: var(--ds-space-8);
}

.ui-email-template-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    cursor: pointer;
    min-height: 2.25rem;
    padding-block: var(--ds-space-1);
}

.ui-email-template-summary::marker {
    color: var(--ui-accent);
}

.ui-email-template-heading {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-1) var(--ds-space-3);
    min-width: 0;
}

.ui-email-template-route {
    overflow-wrap: anywhere;
}

.ui-email-template-form {
    display: grid;
    gap: var(--ds-space-4);
    border-top: 1px solid var(--ui-border-soft);
    padding-top: var(--ds-space-4);
}

.ui-email-inheritance {
    padding: var(--ds-space-3);
    border-left: 3px solid var(--ui-accent);
    background: var(--ui-surface-subtle);
    color: var(--ui-text);
    font-size: var(--ui-font-sm);
    line-height: 1.55;
}

.ui-email-automatic-fields {
    min-width: 0;
    margin: 0;
    padding: var(--ds-space-3);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-subtle);
}

.ui-email-automatic-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
}


.ui-fondazione-foto-preview img,
.ui-fondazione-card-media img,
.ui-fondazione-hero img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.ui-fondazione-foto-preview,
.ui-fondazione-card-media,
.ui-fondazione-hero {
    background: var(--ui-surface-subtle);
    overflow: hidden;
}
.ui-fondazione-foto-preview { aspect-ratio: 16 / 9; border-radius: var(--ds-radius-lg); }
.ui-fondazione-foto-placeholder {
    align-items: center;
    color: var(--ui-muted);
    display: flex;
    font-size: var(--ds-font-xs);
    height: 100%;
    justify-content: center;
    margin: 0;
    padding: var(--ds-space-3);
    text-align: center;
}
.ui-fondazione-card-media { aspect-ratio: 16 / 9; }
.ui-fondazione-card-corpo { padding: var(--ds-space-6) var(--ds-space-6) 0; }
.ui-fondazione-card-azione { margin: var(--ds-space-6); }
.ui-fondazione-hero { aspect-ratio: 16 / 9; border-radius: var(--ds-radius-2xl); max-height: 30rem; }
.ui-social-links { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ui-social-link {
    align-items: center;
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-azione);
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    transition: transform .15s ease, background-color .15s ease;
    width: 2.75rem;
}
.ui-social-link:hover { background: var(--ui-surface); transform: translateY(-1px); }
.ui-note-sanitarie { position: relative; }
.ui-note-sanitarie > summary {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: var(--ds-space-2);
    list-style: none;
}
.ui-note-sanitarie > summary::-webkit-details-marker { display: none; }
.ui-note-sanitarie > summary::after {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: '';
    height: .45rem;
    transform: rotate(45deg) translateY(-.12rem);
    transition: transform var(--ds-transition-fast);
    width: .45rem;
}
.ui-note-sanitarie[open] > summary::after {
    transform: rotate(225deg) translateY(-.12rem);
}
.ui-note-sanitarie > p {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ds-radius-lg);
    color: var(--ui-text);
    font-size: .75rem;
    margin: .4rem 0 0;
    max-width: min(28rem, 70vw);
    min-width: min(16rem, 65vw);
    padding: .75rem;
    text-align: left;
    white-space: normal;
}

.ui-email-toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-3);
    min-height: 2.75rem;
}

.ui-email-toggle input {
    flex: 0 0 auto;
    margin-top: var(--ds-space-1);
    accent-color: var(--ui-positive);
}

.ui-email-variable {
    overflow-wrap: anywhere;
}

.ui-email-preview {
    border-top: 1px solid var(--ui-border-soft);
    padding-top: var(--ds-space-4);
}

.ui-email-preview-frame {
    display: block;
    width: 100%;
    min-height: 32rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
}

/* Revisione contenuti: ordine di lettura stabile e anteprima pubblica isolata. */
.ui-moderazione-card {
    overflow: hidden;
    padding: var(--ds-space-4);
    border: 1px solid var(--ui-border-card);
    border-radius: var(--ds-radius-2xl);
    background: var(--ui-surface);
    box-shadow: var(--ds-shadow-1);
}

.ui-moderazione-identita,
.ui-moderazione-sezione {
    min-width: 0;
}

.ui-moderazione-sezione {
    margin-top: var(--ds-space-5);
    padding-top: var(--ds-space-4);
    border-top: 1px solid var(--ui-border-soft);
}

.ui-moderazione-sezione-titolo {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1);
    margin-bottom: var(--ds-space-3);
}

/* L'anteprima e' l'oggetto su cui si decide: a 45vh si fermava a 405px contro
   schede pubbliche alte fino a 715px, e chi approvava ne vedeva poco piu'
   della meta'. Il riquadro resta comunque scorrevole, e accanto al titolo c'e'
   il collegamento che la apre intera. */
.ui-moderazione-preview-frame {
    display: block;
    width: 100%;
    height: clamp(22rem, 58vh, 34rem);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-subtle);
}

.ui-moderazione-azioni {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    align-items: stretch;
}

.ui-moderazione-motivazione {
    padding: var(--ds-space-4);
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-subtle);
}

.ui-moderazione-preview-document {
    min-height: 100vh;
    padding: var(--ds-space-4);
    background: var(--ui-bg);
}

/* L'anteprima resta scorrevole, ma i comandi della scheda non devono aprire
   pagine dentro l'iframe o dare l'impressione di agire sul sito pubblico. */
.ui-moderazione-preview-document :is(a, button, input, select, textarea) {
    pointer-events: none;
    cursor: default;
}

.ui-moderazione-preview-label {
    margin: 0 0 var(--ds-space-3);
    color: var(--ui-muted);
    font-size: var(--ds-font-xs);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ui-moderazione-preview-card {
    width: min(100%, 30rem);
    margin-inline: auto;
}

@media (min-width: 640px) {
    .ui-notifiche-stato {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ui-notifiche-stato .ui-btn {
        justify-self: end;
    }

    .ui-moderazione-card {
        padding: var(--ds-space-6);
    }

    .ui-moderazione-sezione-titolo {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--ds-space-4);
    }

    .ui-moderazione-azioni {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .ui-moderazione-preview-document {
        padding: var(--ds-space-6);
    }
}

@container email-flows (min-width: 52rem) {
    /* Cinque tappe piu' quattro frecce. Erano sei: la colonna della coda e'
       stata tolta perche' diceva la stessa cosa su ogni riga e non aiutava
       nessuno a capire il percorso. */
    .ui-email-flow:not(.is-manual) {
        grid-template-columns:
            minmax(7rem, 1fr) auto minmax(6.5rem, 1fr) auto
            minmax(5rem, .7fr) auto minmax(5.5rem, .75fr) auto
            minmax(7rem, 1fr);
    }

    .ui-email-flow-arrow {
        transform: none;
    }

    .ui-email-flow.is-manual {
        grid-template-columns: minmax(8rem, 16rem) minmax(0, 1fr);
    }
}

@media (max-width: 639px) {
    .ui-email-template-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .ui-email-template-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .ui-email-preview-frame {
        min-height: 26rem;
    }
}

@media (min-width: 640px) {
    .ui-email-event-header {
        grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
        align-items: baseline;
    }
}

/* Utenti e permessi: profili prima, personalizzazione e dettaglio dopo. */
.ui-permessi-configuratore {
    min-width: 0;
    padding: var(--ds-space-4);
    border: 1px solid var(--ui-border-card);
    border-radius: var(--ds-radius-2xl);
    background: var(--ui-surface-subtle);
}

.ui-profili-permessi {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-space-3);
    margin-bottom: var(--ds-space-5);
}

.ui-profilo-permessi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-1);
    min-height: 4.75rem;
    padding: var(--ds-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text);
    background: var(--ui-surface);
    text-align: left;
    cursor: pointer;
}

.ui-profilo-permessi:hover,
.ui-profilo-permessi[aria-pressed="true"] {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
}

.ui-profilo-permessi:focus-visible {
    outline: 3px solid var(--ui-focus);
    outline-offset: 2px;
}

.ui-profilo-permessi span {
    color: var(--ui-muted);
    font-size: var(--ds-font-sm);
    line-height: 1.45;
}

.ui-profili-permessi-esito {
    grid-column: 1 / -1;
}

.ui-permessi-avanzati {
    margin-top: 0;
}

.ui-permessi-aree {
    display: grid;
    gap: var(--ds-space-4);
    padding: var(--ds-space-4);
}

.ui-permessi-area {
    min-width: 0;
}

.ui-permessi-area h3 {
    margin: 0 0 var(--ds-space-2);
    color: var(--ui-text);
    font-size: var(--ds-font-sm);
}

.ui-permessi-area-elenco {
    display: grid;
    gap: var(--ds-space-2);
}

.ui-permesso-scelta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ds-space-3);
    align-items: start;
    min-height: 2.75rem;
    padding: var(--ds-space-2) var(--ds-space-3);
    border-radius: var(--ds-radius-xs);
    color: var(--ui-text);
    font-size: var(--ds-font-sm);
    line-height: 1.45;
    cursor: pointer;
}

.ui-permesso-scelta:hover {
    background: var(--ui-surface-subtle);
}

.ui-permesso-scelta input {
    margin-top: .15rem;
}

.ui-autorita-editoriale {
    margin: 0 var(--ds-space-4) var(--ds-space-4);
    padding: var(--ds-space-4);
    border-left: 4px solid var(--ui-attention);
    border-radius: var(--ds-radius-xs);
    background: var(--ui-attention-bg);
}

.ui-autorita-editoriale p {
    margin: var(--ds-space-1) 0 0;
    color: var(--ui-muted);
    font-size: var(--ds-font-sm);
    line-height: 1.5;
}

.ui-riepilogo-capacita {
    margin-top: var(--ds-space-5);
    padding: var(--ds-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
}

.ui-riepilogo-capacita h3 {
    margin: 0 0 var(--ds-space-2);
    font-size: var(--ds-font-base);
}

.ui-riepilogo-capacita ul {
    display: grid;
    gap: var(--ds-space-1);
    margin: var(--ds-space-3) 0 0;
    padding-left: 1.25rem;
}

.ui-riepilogo-editoriale {
    margin: var(--ds-space-3) 0 0;
    font-weight: 700;
}

@media (min-width: 640px) {
    .ui-permessi-configuratore {
        padding: var(--ds-space-5);
    }

    .ui-profili-permessi,
    .ui-permessi-aree {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ui-profili-permessi {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* Moduli documentali */

.ui-documento {
    max-width: 46rem;
    margin-inline: auto;
}

/* La misura di lettura di 65 caratteri vale per gli articoli, non per un
   contratto: qui il testo deve arrivare dove arrivano le righe da
   compilare, altrimenti il modulo sembra impaginato due volte. */
.ui-documento p,
.ui-documento li {
    max-width: none;
}

/* Testata: identifica il documento anche quando il foglio viene separato
   dal resto della pratica. Estremi e destinatario stanno qui, non nel
   corpo, perche' e' li' che un ufficio li cerca. */
.ui-documento-testata {
    border-bottom: 2px solid var(--ui-text);
    padding-bottom: var(--ds-space-4);
    margin-bottom: var(--ds-space-6);
}

.ui-documento-ente {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-accent-caldo);
}

.ui-documento-titolo {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.15;
    margin: var(--ds-space-2) 0 0;
}

.ui-documento-sottotitolo {
    margin: var(--ds-space-1) 0 0;
    color: var(--ui-muted);
}

/* Riga degli estremi: versione, data di emissione, protocollo. Su carta
   e' cio' che permette di dire quale copia si ha in mano. */
.ui-documento-estremi {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-1) var(--ds-space-5);
    margin-top: var(--ds-space-3);
    font-size: 0.75rem;
    color: var(--ui-muted);
}

.ui-documento-estremi strong {
    color: var(--ui-text);
    font-weight: 700;
}

.ui-documento-sezione + .ui-documento-sezione {
    margin-top: var(--ds-space-6);
}

.ui-documento-sezione > h2 {
    font-size: 1rem;
    font-weight: 800;
    border-bottom: 1px solid var(--ui-border-soft);
    padding-bottom: var(--ds-space-2);
    margin-bottom: var(--ds-space-3);
}

.ui-documento-griglia {
    display: grid;
    gap: var(--ds-space-3) var(--ds-space-5);
}

@media (min-width: 640px) {
    .ui-documento-griglia {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ui-campo-largo {
    grid-column: 1 / -1;
}

/* Il campo e' etichetta piccola sopra e riga scrivibile sotto. La riga ha
   un'altezza minima perche' una firma o un codice fiscale scritti a mano
   hanno bisogno di spazio, e un box alto dieci pixel invita a scrivere
   fuori dal modulo. */
.ui-campo-etichetta {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

.ui-campo-valore {
    display: block;
    min-height: 1.75rem;
    margin-top: var(--ds-space-1);
    padding: 0 0 var(--ds-space-1);
    border-bottom: 1px solid var(--ui-border);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Campo a scelta: quadratini da spuntare a penna. Niente controlli di modulo,
   perche' questi fogli si stampano e si barrano a mano, e una casella di
   sistema stampa in modo diverso su ogni browser. */
.ui-caselle {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2) var(--ds-space-4);
    margin-top: var(--ds-space-2);
}

.ui-casella {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-weight: 600;
}

.ui-casella-segno {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border: 1px solid var(--ui-border);
}

.ui-casella-altro {
    flex: 1 1 12rem;
}

.ui-casella-altro .ui-campo-inline {
    flex: 1 1 auto;
}

/* Estremo da compilare a penna dentro una riga di testo: stessa riga dei
   campi, larghezza minima sufficiente a scriverci un numero di protocollo. */
.ui-campo-inline {
    display: inline-block;
    min-width: 9rem;
    border-bottom: 1px solid var(--ui-border);
}

.ui-campo-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.06em;
}

/* Campo vuoto: nessun trattino basso, solo la riga. I trattini bassi non
   si allineano fra loro, cambiano lunghezza col carattere e in PDF
   diventano una fila di segni che non e' ne' un campo ne' un testo. */
.ui-campo-valore:empty::before {
    content: "\00a0";
}

.ui-campo-alto .ui-campo-valore {
    min-height: 3rem;
}

/* Riquadro firma: la firma vuole aria sopra la riga, e la riga vuole
   sotto di se' l'indicazione di chi firma. */
.ui-firma-griglia {
    display: grid;
    gap: var(--ds-space-5);
    margin-top: var(--ds-space-4);
}

@media (min-width: 640px) {
    .ui-firma-griglia {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ui-firma {
    border: 1px solid var(--ui-border-soft);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-4);
}

.ui-firma-riga {
    margin-top: var(--ds-space-8);
    border-top: 1px solid var(--ui-text);
    padding-top: var(--ds-space-1);
    font-size: 0.6875rem;
    color: var(--ui-muted);
}

/* Tabella dentro un documento: righe sottili, niente zebratura, nessuna
   colonna che scappa fuori dal foglio. Le tabelle operative del backoffice
   hanno un'altra forma perche' servono a lavorare, non a essere esibite. */
.ui-tabella-documento {
    width: 100%;
    margin-top: var(--ds-space-3);
    border-collapse: collapse;
    font-size: 0.8125rem;
    table-layout: fixed;
}

.ui-tabella-documento th,
.ui-tabella-documento td {
    border: 1px solid var(--ui-border-soft);
    padding: var(--ds-space-2);
    text-align: left;
    vertical-align: top;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Intestazioni in tondo e non in maiuscoletto: maiuscolo e spaziatura
   allargano le parole lunghe finche' non entrano piu' nella colonna, e
   'rappresentante' finiva spezzato a meta' senza trattino. */
.ui-tabella-documento thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ui-muted);
}

/* Nota a pie' di modulo: piccola, grigia, non entra nel corpo firmato. */
.ui-documento-nota {
    margin-top: var(--ds-space-6);
    padding-top: var(--ds-space-3);
    border-top: 1px solid var(--ui-border-soft);
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--ui-muted);
}

/* Blocchi che esistono solo su carta e solo sullo schermo. */
.ui-solo-stampa,
.ui-documento-piede-stampa {
    display: none;
}

/* Il foglio e' una tabella di una cella sola, e non e' un vezzo: un piede */
.ui-documento-foglio {
    width: 100%;
    /* Senza layout fisso la cella si stringe sul contenuto e il testo va a
       capo prima delle righe da compilare, come se il modulo avesse due
       larghezze diverse. */
    table-layout: fixed;
    border-collapse: collapse;
}

.ui-documento-foglio > tbody > tr > td,
.ui-documento-foglio > tfoot > tr > td {
    padding: 0;
}

/* Stampa dei modelli documentali */
@media print {
    /* A4 dichiarata: senza, il foglio segue il default della stampante e
       lo stesso modulo impagina diverso su due macchine. Il margine
       inferiore e' piu' alto degli altri perche' ospita il piede fisso. */
    @page {
        size: A4;
        margin: 18mm 16mm 20mm;
    }

    .skip-link,
    .ui-site-header,
    .ui-site-footer,
    .ui-breadcrumb,
    .ui-public-background,
    .ui-privacy-consent,
    .ui-admin-header,
    .ui-admin-sidebar,
    .ui-admin-footer,
    .ui-mobile-bottombar,
    .ui-no-print {
        display: none !important;
    }

    .ui-solo-stampa {
        display: block;
    }

    /* Su carta il fondo colorato e' inchiostro sprecato e il testo chiaro
       diventa illeggibile: si torna a nero su bianco. Il velo di lettura
       dell'area pubblica ha piu' specificita' della regola su `.ui-main`,
       quindi va spento dove e' stato acceso. */
    html,
    body {
        background: var(--ui-stampa-fondo) !important;
        color: var(--ui-stampa-testo) !important;
    }

    .ui-public-stage > .ui-main,
    .ui-public-stage .ui-card,
    .ui-public-stage .ui-superficie,
    .ui-public-stage .ui-superficie-attenuata,
    .ui-card,
    .ui-superficie,
    .ui-superficie-attenuata,
    .ui-guida-passaggio,
    .ui-alert,
    .ui-badge,
    .ui-table-wrapper {
        background: transparent !important;
        box-shadow: none !important;
    }

    .ui-table-wrapper {
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    /* Il fondo del backoffice e' dipinto da un selettore di combinazione
       (.ui-admin-header ~ main): una regola sulla sola classe non lo batte,
       e il registro usciva su una pagina grigia. */
    .ui-admin-page,
    .ui-admin-header ~ main,
    .ui-main,
    .ui-shell {
        background: transparent !important;
    }

    .ui-main,
    .ui-shell {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* La cornice a scheda serve a staccare il documento dallo sfondo del
       sito; sul foglio non c'e' sfondo da cui staccarsi, e il suo padding
       si somma al margine di pagina rubando una riga per lato. */
    .ui-documento {
        max-width: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 10pt e interlinea 1.45: un modulo si legge da fermi e si compila a
       penna, non si scorre. Sotto i 9pt la fotocopia perde i codici. */
    body {
        font-size: 10pt;
        line-height: 1.45;
    }

    .ui-documento-titolo { font-size: 16pt; }
    .ui-documento-sezione > h2 { font-size: 11pt; }
    .ui-documento-estremi,
    .ui-campo-etichetta,
    .ui-documento-nota,
    .ui-firma-riga { font-size: 8pt; }

    /* I bordi chiari sul monitor spariscono in stampa: le righe da
       compilare devono restare visibili anche in bianco e nero. */
    .ui-campo-valore,
    .ui-campo-inline,
    .ui-documento-testata { border-bottom-color: var(--ui-stampa-testo) !important; }
    .ui-firma { border-color: var(--ui-stampa-bordo-tenue) !important; }

    .ui-tabella-documento {
        font-size: 8.5pt;
    }

    .ui-tabella-documento th,
    .ui-tabella-documento td {
        border-color: var(--ui-stampa-bordo-tenue) !important;
    }

    /* Una tabella che continua sul foglio dopo senza intestazione costringe
       a tornare indietro per sapere che cosa si sta leggendo. */
    .ui-tabella-documento thead {
        display: table-header-group;
    }

    /* Si tiene unito cio' che perde senso spezzato: un campo diviso fra due
       fogli non si compila, una firma divisa non si firma. Le sezioni di
       solo testo si lasciano scorrere: tenerle intere spingerebbe un
       articolo lungo a pagina nuova lasciando mezzo foglio bianco. */
    .ui-campo,
    .ui-firma,
    .ui-documento-griglia,
    .ui-superficie-attenuata,
    fieldset,
    tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    h1,
    h2,
    h3 {
        break-after: avoid;
        page-break-after: avoid;
    }

    p,
    li {
        orphans: 3;
        widows: 3;
    }

    /* Il colore del collegamento non aggiunge niente su carta e il testo
       sottolineato in blu su un contratto sembra un refuso. */
    a {
        color: inherit !important;
        text-decoration: none !important;
    }

    /* Piede ripetuto su ogni foglio: dice di quale documento e di quale
       versione e' la pagina che si ha in mano. Il numero di pagina non c'e'
       perche' i fogli di stile non hanno un contatore dei fogli: lo aggiunge
       il browser dalle proprie opzioni di stampa. */
    .ui-documento-piede-stampa {
        display: table-footer-group;
    }

    .ui-documento-piede-stampa td {
        border-top: 1px solid var(--ui-stampa-riga);
        padding-top: 2mm;
        font-size: 7.5pt;
        color: var(--ui-stampa-testo-tenue);
    }

    .ui-documento-piede-riga {
        display: flex;
        justify-content: space-between;
        gap: 4mm;
    }
}