:root {
    --sfondo: #f4efe6;
    --sfondo-card: rgba(255, 252, 247, 0.92);
    --sfondo-card-forte: #fffaf2;
    --testo: #1f2933;
    --testo-secondario: #586574;
    --bordo: rgba(127, 90, 48, 0.16);
    --accento: #b45a2b;
    --accento-scuro: #7f3d1d;
    --verde: #2f7d57;
    --giallo: #c48a1f;
    --rosso: #b13d32;
    --ombra: 0 22px 45px rgba(64, 44, 24, 0.1);
    --raggio: 22px;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Trebuchet MS", "Segoe UI Variable", "Segoe UI", sans-serif;
    color: var(--testo);
    background:
        radial-gradient(circle at top left, rgba(224, 158, 95, 0.25), transparent 34%),
        radial-gradient(circle at top right, rgba(56, 94, 78, 0.12), transparent 25%),
        linear-gradient(180deg, #f8f4ec 0%, var(--sfondo) 40%, #efe6da 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

.pagina {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 20px 48px;
}

.landing {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 20px 48px;
}

.landing-header,
.landing-brand,
.landing-main,
.landing-hero,
.landing-sezione-head,
.landing-callout,
.landing-numeri,
.landing-grid,
.landing-stack {
    display: grid;
    gap: 18px;
}

.landing-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-bottom: 26px;
}

.landing-brand {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
}

.landing-brand small {
    display: block;
    color: var(--testo-secondario);
    margin-top: 4px;
}

.landing-main {
    gap: 28px;
}

.landing-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    align-items: center;
    gap: 26px;
}

.landing-eyebrow {
    margin: 0 0 12px;
    color: var(--accento-scuro);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 800;
}

.landing-hero h1,
.landing-sezione h2 {
    margin: 0;
    font-size: clamp(2.5rem, 5vw, 4.7rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.landing-sezione h2 {
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1;
}

.landing-copy {
    max-width: 60ch;
    color: var(--testo-secondario);
    font-size: 1.08rem;
}

.landing-numeri {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}

.landing-numero {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--bordo);
    background: rgba(255, 255, 255, 0.62);
}

.landing-numero strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1.5rem;
}

.landing-numero span,
.landing-stack-item p {
    color: var(--testo-secondario);
}

.landing-hero-card {
    background:
        linear-gradient(180deg, rgba(255, 248, 239, 0.95), rgba(255, 250, 245, 0.82)),
        radial-gradient(circle at top right, rgba(180, 90, 43, 0.1), transparent 38%);
}

.landing-stack-item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(127, 90, 48, 0.12);
}

.landing-stack-item:last-child {
    border-bottom: 0;
}

.landing-stack-item p {
    margin: 8px 0 0;
}

.landing-sezione {
    display: grid;
    gap: 22px;
}

.landing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-callout {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(255, 247, 236, 0.98), rgba(246, 233, 218, 0.96)),
        linear-gradient(90deg, rgba(180, 90, 43, 0.05), transparent);
}

.intestazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.logo-area {
    display: flex;
    gap: 16px;
    align-items: center;
}

.logo {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: linear-gradient(135deg, #d67a47, #8d4723);
    color: #fffaf4;
    box-shadow: var(--ombra);
}

.titolo-pagina {
    margin: 0;
    font-size: clamp(1.9rem, 2.8vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.sottotitolo {
    margin: 6px 0 0;
    color: var(--testo-secondario);
    max-width: 72ch;
}

.barra-azioni,
.azioni-inline,
.navigazione {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.navigazione {
    margin-bottom: 28px;
}

.badge-utente,
.badge-stato {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.93rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--bordo);
}

.badge-stato {
    padding: 6px 10px;
    font-size: 0.82rem;
}

.badge-stato.attivo,
.badge-stato.approvato,
.badge-stato.completato,
.badge-stato.completata,
.badge-stato.fatturata,
.badge-stato.valido,
.badge-stato.aperta,
.badge-stato.interno,
.badge-stato.materiale,
.badge-stato.lavorazione,
.badge-stato.nota {
    background: rgba(47, 125, 87, 0.12);
    color: var(--verde);
}

.badge-stato.in_pausa,
.badge-stato.proposta,
.badge-stato.in_scadenza,
.badge-stato.media,
.badge-stato.terzista,
.badge-stato.altro {
    background: rgba(196, 138, 31, 0.14);
    color: #8b600f;
}

.badge-stato.bozza,
.badge-stato.inviato,
.badge-stato.principale,
.badge-stato.documento,
.badge-stato.cantiere,
.badge-stato.operatore {
    background: rgba(73, 105, 151, 0.12);
    color: #35507f;
}

.badge-stato.scaduto,
.badge-stato.scaduta,
.badge-stato.annullata,
.badge-stato.rifiutata,
.badge-stato.alta,
.badge-stato.problema {
    background: rgba(177, 61, 50, 0.12);
    color: var(--rosso);
}

.nav-link {
    padding: 11px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid transparent;
    color: var(--testo-secondario);
    transition: 0.18s ease;
}

.nav-link:hover,
.nav-link.attivo {
    transform: translateY(-1px);
    background: #fffaf3;
    border-color: var(--bordo);
    color: var(--accento-scuro);
}

.griglia {
    display: grid;
    gap: 18px;
}

.griglia.metriche {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.griglia.due-colonne {
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
}

.scheda {
    background: var(--sfondo-card);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.pad,
.scheda-contenuto {
    padding: 20px;
}

.scheda-header {
    padding: 18px 20px 0;
}

.scheda h2,
.scheda h3,
.scheda h4 {
    margin: 0;
}

.scheda-titolo {
    font-size: 1.08rem;
    margin-bottom: 6px;
}

.scheda-meta,
.lista-meta {
    color: var(--testo-secondario);
    font-size: 0.95rem;
}

.metrica {
    display: grid;
    gap: 8px;
    min-height: 136px;
}

.metrica .etichetta {
    color: var(--testo-secondario);
    font-size: 0.95rem;
}

.metrica .valore {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
}

.tabella-wrap {
    overflow-x: auto;
}

.tabella {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.tabella th,
.tabella td {
    text-align: left;
    padding: 14px 14px;
    border-bottom: 1px solid rgba(127, 90, 48, 0.12);
    vertical-align: top;
}

.tabella th {
    color: var(--testo-secondario);
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tabella tr:last-child td {
    border-bottom: 0;
}

.lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.lista-item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(127, 90, 48, 0.12);
}

.lista-item:last-child {
    border-bottom: 0;
}

.galleria-cartelle,
.galleria-foto {
    display: grid;
    gap: 18px;
}

.galleria-cartelle {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.galleria-foto {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cartella-card,
.foto-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(127, 90, 48, 0.14);
    border-radius: 20px;
    padding: 18px;
}

.foto-card {
    padding: 14px;
}

.foto-card-body {
    padding-top: 12px;
}

.foto-preview {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(127, 90, 48, 0.14);
    background: rgba(255, 255, 255, 0.68);
}

.lista-titolo {
    font-weight: 700;
    margin: 0 0 6px;
}

.bottone,
.bottone-secondario,
.bottone-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: 0.18s ease;
    font: inherit;
}

.bottone {
    background: linear-gradient(135deg, var(--accento), #d67a47);
    color: #fffaf3;
    box-shadow: 0 14px 26px rgba(180, 90, 43, 0.22);
}

.bottone-secondario {
    background: #fffaf3;
    border-color: var(--bordo);
    color: var(--accento-scuro);
}

.bottone-ghost {
    background: transparent;
    border-color: rgba(127, 90, 48, 0.14);
    color: var(--testo-secondario);
}

.form-grid {
    display: grid;
    gap: 16px;
}

.form-grid.due-colonne,
.dettagli {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid.tre-colonne {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.campo {
    display: grid;
    gap: 8px;
}

.campo label {
    font-weight: 700;
    font-size: 0.94rem;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(127, 90, 48, 0.18);
    background: rgba(255, 255, 255, 0.75);
    padding: 13px 14px;
    font: inherit;
    color: var(--testo);
}

.campo textarea {
    min-height: 110px;
    resize: vertical;
}

.messaggio,
.messaggio-errore,
.vuoto,
.dettaglio {
    padding: 14px 16px;
    border-radius: 16px;
}

.messaggio {
    background: rgba(47, 125, 87, 0.12);
    color: var(--verde);
    border: 1px solid rgba(47, 125, 87, 0.18);
}

.messaggio-errore {
    background: rgba(177, 61, 50, 0.12);
    color: var(--rosso);
    border: 1px solid rgba(177, 61, 50, 0.18);
    margin-bottom: 16px;
}

.vuoto {
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed rgba(127, 90, 48, 0.22);
    color: var(--testo-secondario);
}

.dettaglio {
    background: rgba(180, 90, 43, 0.06);
    border: 1px solid rgba(127, 90, 48, 0.1);
}

.dettaglio .titolo {
    display: block;
    margin-bottom: 6px;
    color: var(--testo-secondario);
    font-size: 0.9rem;
}

.dettaglio .valore {
    font-weight: 700;
}

.grande-evidenza {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    background:
        linear-gradient(145deg, rgba(255, 246, 233, 0.92), rgba(248, 235, 219, 0.76)),
        linear-gradient(135deg, rgba(180, 90, 43, 0.08), transparent);
}

.pagina-accesso {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 26px;
}

.pannello-accesso {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    background: rgba(255, 252, 247, 0.9);
    border: 1px solid var(--bordo);
    border-radius: 28px;
    box-shadow: 0 28px 60px rgba(62, 41, 17, 0.16);
    overflow: hidden;
}

.hero-accesso {
    padding: 42px;
    background:
        radial-gradient(circle at top left, rgba(214, 122, 71, 0.26), transparent 34%),
        linear-gradient(150deg, #2b3a42 0%, #354a57 36%, #5b5449 100%);
    color: #f9f5ef;
}

.hero-accesso h1 {
    margin: 20px 0 16px;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.hero-accesso p {
    max-width: 38ch;
    color: rgba(249, 245, 239, 0.82);
}

.pannello-form {
    padding: 42px 34px;
}

.check-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--testo-secondario);
}

.check-inline input {
    width: auto;
}

@media (max-width: 1024px) {
    .griglia.due-colonne,
    .pannello-accesso,
    .form-grid.due-colonne,
    .form-grid.tre-colonne,
    .dettagli,
    .landing-hero,
    .landing-grid,
    .landing-numeri,
    .landing-callout,
    .landing-header {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .pagina {
        padding: 18px 14px 34px;
    }

    .intestazione {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-accesso,
    .pannello-form {
        padding: 28px 22px;
    }
}