:root {
    --lavagna: #23413A;
    --lavagna-scura: #183029;
    --gesso: #F3F5F2;
    --inchiostro: #1B2421;
    --grafite: #5F6B66;
    --linea: #CDD5D0;
    --errore: #A8322A;
    --errore-fondo: #F8E7E5;
    --ocra: #9A6512;
    --ocra-fondo: #FBF1DC;
    --bianco: #FFFFFF;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --raggio: 6px;
    --spazio: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--inchiostro);
    background: var(--gesso);
    min-height: 100dvh;
}

h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -0.01em; }
p  { margin: 0 0 1rem; }

.muted { color: var(--grafite); }

/* ---------- Campi e pulsanti ---------- */

label {
    display: block;
    font-weight: 600;
    font-size: .9375rem;
    margin: 1.25rem 0 .375rem;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    font: inherit;
    font-size: 1.0625rem;      /* evita lo zoom automatico sui telefoni */
    padding: .75rem .875rem;
    color: var(--inchiostro);
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
}

input:focus-visible,
button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--lavagna) 45%, transparent);
    outline-offset: 2px;
    border-color: var(--lavagna);
}

input:disabled { background: #E9ECEA; color: var(--grafite); }

#code {
    font-size: 1.5rem;
    letter-spacing: .35em;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

button {
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.login-form > button[type="submit"],
.login-form form > button[type="submit"],
.setup form > button[type="submit"] {
    width: 100%;
    margin-top: 1.75rem;
    padding: .875rem;
    font-size: 1.0625rem;
    color: var(--gesso);
    background: var(--lavagna);
    border: 0;
    border-radius: var(--raggio);
}

.login-form > button[type="submit"]:hover,
.login-form form > button[type="submit"]:hover,
.setup form > button[type="submit"]:hover { background: var(--lavagna-scura); }
.login-form > button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }

.link-button {
    background: none;
    border: 0;
    padding: .5rem .25rem;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.alert {
    margin: 0 0 .5rem;
    padding: .75rem .875rem;
    color: var(--errore);
    background: var(--errore-fondo);
    border-left: 4px solid var(--errore);
    border-radius: 0 var(--raggio) var(--raggio) 0;
}

/* ---------- Login ---------- */

.is-login { background: var(--lavagna); }

.login {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.login-head {
    padding: calc(3rem + env(safe-area-inset-top)) 1.5rem 2rem;
    color: var(--gesso);
}

.login-head h1 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.login-head p {
    margin: 0;
    color: color-mix(in srgb, var(--gesso) 72%, var(--lavagna));
}

.login-form {
    flex: 1;
    padding: 1.5rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
    background: var(--gesso);
    border-radius: 18px 18px 0 0;
}

@media (min-width: 640px) {
    .login {
        justify-content: center;
        align-items: center;
        padding: 2rem;
    }
    .login-head,
    .login-form {
        width: 100%;
        max-width: 420px;
    }
    .login-head { padding: 0 0 1.5rem; }
    .login-form {
        flex: none;
        padding: 2rem;
        border-radius: 12px;
    }
}

/* ---------- Area riservata ---------- */

.topbar {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(.75rem + env(safe-area-inset-top)) 1rem .75rem;
    color: var(--gesso);
    background: var(--lavagna);
}

.topbar form { margin: 0; }
.topbar-title { font-weight: 700; }

.page {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

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

/* ---------- Installer ---------- */

.is-setup { background: var(--gesso); }

.setup {
    max-width: 560px;
    margin: 0 auto;
    padding: calc(2rem + env(safe-area-inset-top)) 1.25rem calc(3rem + env(safe-area-inset-bottom));
}

.setup h1 { font-size: 2rem; }

.setup h2,
.setup legend {
    font-size: 1.125rem;
    font-weight: 700;
    padding: 0;
    margin: 0 0 .5rem;
}

.setup-block {
    margin: 1.5rem 0 0;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
}

fieldset.setup-block { min-width: 0; }

.setup-block > label:first-of-type,
.setup-block .field-row label { margin-top: .75rem; }

.hint {
    margin: .375rem 0 0;
    font-size: .875rem;
    color: var(--grafite);
}

.alert p { margin: 0; }
.alert p + p { margin-top: .5rem; }
.setup .alert { margin-top: 1rem; }

.field-row { display: flex; gap: .75rem; }
.field-row-grow { flex: 1; min-width: 0; }
.field-row-small { flex: 0 0 6.5rem; }

.check {
    display: flex;
    gap: .625rem;
    align-items: flex-start;
    font-weight: 400;
    margin-top: .5rem;
}
.check input { width: 1.25rem; height: 1.25rem; margin: .125rem 0 0; accent-color: var(--lavagna); }

.checklist { list-style: none; margin: .5rem 0 0; padding: 0; }
.checklist li {
    display: flex;
    gap: .625rem;
    padding: .5rem 0;
    border-top: 1px solid var(--linea);
}
.checklist li:first-child { border-top: 0; }
.checklist-mark { font-weight: 700; width: 1rem; text-align: center; }
.checklist .ok .checklist-mark { color: var(--lavagna); }
.checklist .ko { color: var(--errore); font-weight: 600; }

.totp { text-align: center; }
.totp-qr { width: min(240px, 70vw); margin: 0 auto 1rem; aspect-ratio: 1; }
.totp-qr svg { width: 100%; height: 100%; display: block; }
.totp-link {
    display: inline-block;
    font-weight: 600;
    color: var(--lavagna);
    text-underline-offset: 3px;
}
.totp-key-label { margin: 1.25rem 0 .25rem; font-weight: 600; }
.totp-key {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
    user-select: all;
}

.secondary-action { margin-top: 1rem; text-align: center; }
.secondary-action .link-button { color: var(--grafite); }

a.button {
    display: block;
    margin-top: 1.75rem;
    padding: .875rem;
    text-align: center;
    font-weight: 600;
    color: var(--gesso);
    background: var(--lavagna);
    border-radius: var(--raggio);
    text-decoration: none;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.trusted-note {
    margin: 1.25rem 0 0;
    padding: .75rem .875rem;
    font-size: .9375rem;
    background: color-mix(in srgb, var(--lavagna) 8%, #fff);
    border-left: 4px solid var(--lavagna);
    border-radius: 0 var(--raggio) var(--raggio) 0;
}
.login-form .check { margin-top: 1.25rem; }

/* =========================================================
   App
   ========================================================= */

.is-app {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Barra superiore ---------- */

.appbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: .25rem;
    min-height: 3.5rem;
    padding: calc(.5rem + env(safe-area-inset-top)) .5rem .5rem 1rem;
    color: var(--gesso);
    background: var(--lavagna);
}
.appbar-back {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: -.75rem;
    color: inherit;
    border-radius: 50%;
}
.appbar-back[hidden] { display: none; }
.appbar-back svg { width: 1.5rem; height: 1.5rem; }
.appbar-text { flex: 1; min-width: 0; }
.appbar-kicker {
    margin: 0;
    font-size: .8125rem;
    color: color-mix(in srgb, var(--gesso) 70%, var(--lavagna));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.appbar-title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.appbar-actions { display: flex; }
.appbar-actions button {
    padding: .625rem .75rem;
    color: inherit;
    background: none;
    border: 0;
    border-radius: var(--raggio);
}

.app-warning { margin: .75rem 1rem 0; }

/* ---------- Contenuto ---------- */

.view {
    max-width: 760px;
    margin: 0 auto;
    padding: 1rem 1rem 6rem;
    outline: none;
}

.state {
    padding: 2rem 0;
    text-align: center;
    color: var(--grafite);
}
.state button { margin-top: 1rem; }

.section { margin-top: 1.75rem; }
.section:first-child { margin-top: .25rem; }
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem;
}
.section-head h2 { margin: 0; font-size: 1.0625rem; }
.section-head button {
    padding: .375rem 0;
    color: var(--lavagna);
    font-size: .9375rem;
    background: none;
    border: 0;
}

.empty {
    padding: 1.25rem 1rem;
    color: var(--grafite);
    text-align: center;
    background: var(--bianco);
    border: 1px dashed var(--linea);
    border-radius: var(--raggio);
}
.empty p { margin: 0; }

input[type="search"] {
    width: 100%;
    font: inherit;
    font-size: 1.0625rem;
    padding: .75rem .875rem;
    color: var(--inchiostro);
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    -webkit-appearance: none;
}

.search {
    position: relative;
    margin-bottom: 1rem;
}
.search input[type="search"] { padding-left: 2.625rem; }
.search svg {
    position: absolute;
    left: .875rem;
    top: 50%;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--grafite);
    transform: translateY(-50%);
    pointer-events: none;
}

/* ---------- Elenchi ---------- */

.list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
}
.list > li + li { border-top: 1px solid var(--linea); }

.row {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 3.5rem;
    padding: .75rem 1rem;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    background: none;
    border: 0;
}
a.row:active, button.row:active { background: color-mix(in srgb, var(--lavagna) 6%, transparent); }
.row-main { flex: 1; min-width: 0; }
.row-title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.row-sub {
    display: block;
    margin-top: .125rem;
    font-size: .875rem;
    color: var(--grafite);
    overflow-wrap: anywhere;
}
.row-chevron { width: 1.125rem; height: 1.125rem; color: var(--linea); flex: none; }
.row-badges { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .375rem; }

.badge {
    display: inline-flex;
    align-items: center;
    padding: .125rem .5rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--grafite);
    background: var(--gesso);
    border-radius: 999px;
}
.badge.is-todo { color: var(--ocra); background: var(--ocra-fondo); }
.badge.is-dsga { color: var(--gesso); background: var(--lavagna); }

.group-label {
    margin: 1.25rem 0 .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--grafite);
}

/* ---------- Registro interventi ---------- */

.reg { counter-reset: none; }
.reg-row {
    display: grid;
    grid-template-columns: 3rem 3rem 1fr;
    align-items: start;
}
.reg-toggle {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3.5rem;
    padding: 0;
    background: none;
    border: 0;
}
.reg-toggle span {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--ocra);
    border-radius: 50%;
}
.reg-toggle svg { width: 1rem; height: 1rem; stroke-width: 3; opacity: 0; }
.reg-row.is-fatto .reg-toggle span { background: var(--lavagna); border-color: var(--lavagna); color: var(--gesso); }
.reg-row.is-fatto .reg-toggle svg { opacity: 1; }
.reg-row.is-busy .reg-toggle { opacity: .4; }

.reg-date {
    padding-top: .75rem;
    text-align: center;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    border-right: 1px solid var(--linea);
    align-self: stretch;
}
.reg-date b { display: block; font-size: 1.25rem; }
.reg-date small { font-size: .75rem; color: var(--grafite); }

.reg-body {
    display: block;
    min-width: 0;
    padding: .75rem 1rem .75rem .75rem;
    color: inherit;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
}
.reg-title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.reg-row.is-fatto .reg-title { color: var(--grafite); font-weight: 500; }
.reg-desc {
    display: -webkit-box;
    margin-top: .125rem;
    font-size: .875rem;
    color: var(--grafite);
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: pre-line;
}

/* ---------- Schede (dettaglio) ---------- */

.facts {
    margin: 0;
    padding: .25rem 1rem;
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
}
.facts div { padding: .625rem 0; }
.facts div + div { border-top: 1px solid var(--linea); }
.facts dt { font-size: .8125rem; color: var(--grafite); }
.facts dd { margin: .125rem 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.facts a { color: var(--lavagna); font-weight: 600; text-underline-offset: 3px; }

.tabs {
    position: sticky;
    top: var(--appbar-h, 3.5rem);
    z-index: 5;
    display: flex;
    margin: -1rem -1rem 1rem;
    padding: 0 .5rem;
    overflow-x: auto;
    background: var(--gesso);
    border-bottom: 1px solid var(--linea);
    scrollbar-width: none;
}
.tabs button {
    flex: 1 0 auto;
    padding: .875rem .75rem .75rem;
    color: var(--grafite);
    font-size: .9375rem;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
}
.tabs button[aria-selected="true"] { color: var(--lavagna); border-bottom-color: var(--lavagna); }
.tabs .count { margin-left: .25rem; font-variant-numeric: tabular-nums; }

.chips { display: flex; gap: .5rem; margin-bottom: 1rem; overflow-x: auto; scrollbar-width: none; }
.chips button {
    flex: none;
    padding: .5rem .875rem;
    color: var(--inchiostro);
    font-size: .9375rem;
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: 999px;
}
.chips button[aria-pressed="true"] { color: var(--gesso); background: var(--lavagna); border-color: var(--lavagna); }

.contact-actions { display: flex; gap: .25rem; flex: none; }
.icon-button {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--lavagna);
    background: color-mix(in srgb, var(--lavagna) 8%, var(--bianco));
    border: 0;
    border-radius: 50%;
}
.icon-button svg { width: 1.25rem; height: 1.25rem; }

.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.125rem;
    color: var(--lavagna);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
}
.btn.is-primary { color: var(--gesso); background: var(--lavagna); border-color: var(--lavagna); }
.btn.is-danger { color: var(--errore); border-color: color-mix(in srgb, var(--errore) 35%, var(--linea)); }
.btn:disabled { opacity: .5; }

/* ---------- Pulsante azione principale ---------- */

.fab {
    position: fixed;
    right: 1rem;
    bottom: calc(5rem + env(safe-area-inset-bottom));
    z-index: 15;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .9375rem 1.25rem;
    color: var(--gesso);
    font-size: 1rem;
    background: var(--lavagna);
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--lavagna) 35%, transparent);
}
.fab svg { width: 1.25rem; height: 1.25rem; }
.fab[hidden] { display: none; }

/* ---------- Barra di navigazione ---------- */

.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bianco);
    border-top: 1px solid var(--linea);
}
.tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .125rem;
    padding: .5rem 0 .625rem;
    color: var(--grafite);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
}
.tabbar svg { width: 1.5rem; height: 1.5rem; }
.tabbar a[aria-current="page"] { color: var(--lavagna); }
.tabbar a[aria-current="page"] svg { stroke-width: 2.5; }

/* ---------- Pannello dei moduli ---------- */

.sheet {
    width: 100%;
    max-width: 560px;
    max-height: 92dvh;
    margin: auto auto 0;
    padding: 0;
    color: var(--inchiostro);
    background: var(--gesso);
    border: 0;
    border-radius: 18px 18px 0 0;
}
.sheet::backdrop { background: rgb(24 48 41 / .5); }
.sheet[open] { animation: sheet-in .2s ease-out; }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }

@media (min-width: 640px) {
    .sheet { margin: auto; border-radius: 14px; }
}

.sheet form { padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sheet-head h2 { margin: 0; font-size: 1.25rem; }
.sheet-close {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: -.5rem;
    color: var(--grafite);
    background: none;
    border: 0;
    border-radius: 50%;
}
.sheet-close svg { width: 1.25rem; height: 1.25rem; }
.sheet .alert { margin: 1rem 0 0; }

.sheet textarea,
.sheet select,
.sheet input[type="date"],
.sheet input[type="tel"],
.sheet input[type="email"] {
    width: 100%;
    font: inherit;
    font-size: 1.0625rem;
    padding: .75rem .875rem;
    color: var(--inchiostro);
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
}
.sheet textarea { min-height: 6.5rem; resize: vertical; line-height: 1.45; }
.sheet select { -webkit-appearance: none; appearance: none; background-image: none; }
.field-error { margin: .375rem 0 0; font-size: .875rem; font-weight: 600; color: var(--errore); }
[aria-invalid="true"] { border-color: var(--errore) !important; }

.segmented {
    display: flex;
    padding: .25rem;
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
}
.segmented label {
    flex: 1;
    margin: 0;
    padding: .625rem .5rem;
    font-weight: 600;
    text-align: center;
    color: var(--grafite);
    border-radius: calc(var(--raggio) - 2px);
    cursor: pointer;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { color: var(--gesso); background: var(--lavagna); }
.segmented label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--lavagna) 45%, transparent); }

.sheet-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.75rem; }
.sheet-actions .btn { width: 100%; padding: .875rem; font-size: 1.0625rem; }

/* ---------- Avvisi brevi ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(9.25rem + env(safe-area-inset-bottom));
    z-index: 30;
    width: max-content;
    max-width: calc(100% - 2rem);
    padding: .75rem 1.125rem;
    color: var(--gesso);
    font-weight: 600;
    background: var(--inchiostro);
    border-radius: var(--raggio);
    transform: translate(-50%, 1rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: var(--errore); }

@media (min-width: 760px) {
    .tabs { margin-left: 0; margin-right: 0; }
}

.row-button {
    all: unset;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.row-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--lavagna) 45%, transparent); border-radius: 4px; }
.group-label a { color: inherit; text-underline-offset: 3px; }
.section-intro { margin: 0 0 .75rem; }
.btn.is-block { width: 100%; }
.list .row .btn { flex: none; padding: .5rem .875rem; }

/* ---------- Importazione dall'anagrafe ---------- */

.sheet-text { margin: 1rem 0 0; }
.sheet input[type="search"] { margin-top: 0; }
.pick-results { margin-top: 1rem; }
.pick-results .list { max-height: 50dvh; overflow-y: auto; }

.pick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pick-head .link-button { color: var(--lavagna); font-size: .9375rem; }
.pick-hint { margin: -.25rem 0 .5rem; }

.pick { display: flex; gap: .25rem; padding: .625rem .75rem .75rem .25rem; }
.pick-check {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
}
.pick-check input { width: 1.375rem; height: 1.375rem; accent-color: var(--lavagna); }
.pick-body { flex: 1; min-width: 0; }
.sheet .pick-name {
    width: 100%;
    padding: .5rem .625rem;
    font-size: 1rem;
    font-weight: 600;
}
.pick:has(input[type="checkbox"]:not(:checked)) .pick-name { color: var(--grafite); font-weight: 500; }
.pick .row-sub { margin-top: .25rem; }

/* ---------- Oggi ---------- */

.today {
    margin-bottom: 1.25rem;
    padding: 1.125rem 1.25rem 1.25rem;
    color: var(--gesso);
    background: var(--lavagna);
    border-radius: 12px;
}
.today p { margin: 0; }
.today-kicker { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.today-title {
    display: block;
    margin-top: .125rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    color: inherit;
    text-decoration: none;
}
.today-sub { margin-top: .25rem !important; color: color-mix(in srgb, var(--gesso) 78%, var(--lavagna)); }
.today-times { display: flex; gap: 2rem; margin-top: .875rem; }
.today-times small { display: block; font-size: .8125rem; opacity: .75; }
.today-times b { font-size: 1.75rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.today .btn.is-light {
    margin-top: 1rem;
    width: 100%;
    color: var(--lavagna);
    background: var(--gesso);
    border-color: var(--gesso);
}
.today-next {
    margin-top: 1rem !important;
    padding-top: .75rem;
    font-size: .9375rem;
    border-top: 1px solid color-mix(in srgb, var(--gesso) 25%, transparent);
}
.today-next .link-button { color: var(--gesso); font-weight: 600; padding: 0 0 0 .5rem; }

/* ---------- Calendario ---------- */

.cal-row { align-items: center; }
.cal-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
    width: 2.75rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.cal-date b { font-size: 1.25rem; }
.cal-date small { font-size: .75rem; color: var(--grafite); }
.cal-row.is-libero .row-title,
.cal-row.is-assenza .row-title { color: var(--grafite); font-weight: 500; }
.cal-row.is-today .cal-date b { color: var(--lavagna); }

.sheet input[type="time"],
.sheet input[type="number"] {
    width: 100%;
    font: inherit;
    font-size: 1.0625rem;
    padding: .75rem .875rem;
    color: var(--inchiostro);
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
}
.field[hidden] { display: none; }
.tabbar a span { white-space: nowrap; }

/* ---------- Password ---------- */

.row-icon { flex: none; width: 2.5rem; height: 2.5rem; }
.btn svg { width: 1.125rem; height: 1.125rem; }

.vault-locked {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--grafite);
}
.vault-locked svg { width: 3rem; height: 3rem; color: var(--lavagna); }
.vault-locked p { max-width: 22rem; margin: 1rem auto 1.25rem; }
.vault-hint { margin-top: 1.25rem; text-align: center; }

.cred { align-items: flex-start; }
.cred .contact-actions { padding-top: .125rem; }
.cred-secret {
    display: block;
    margin-top: .375rem;
    padding: .375rem .5rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .9375rem;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
    background: var(--gesso);
    border-radius: 4px;
    user-select: all;
}
.cred-secret[hidden] { display: none; }

.pw-tools { display: flex; justify-content: flex-end; gap: 1rem; margin-top: .25rem; }
.pw-tools .link-button { color: var(--lavagna); font-size: .9375rem; padding: .25rem 0; }

/* ---------- Report ---------- */

.report-dates { margin: -.25rem 0 1rem; }
.report-dates label { margin-top: 0; }
.report-dates input[type="date"] {
    width: 100%;
    font: inherit;
    padding: .625rem .75rem;
    color: var(--inchiostro);
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
}
.report-options { display: grid; gap: .25rem; }
.report-options .check { margin-top: .25rem; }
.report-preview .reg-row { grid-template-columns: 3rem 1fr; }
.report-preview .reg-date { border-right: 1px solid var(--linea); }
.report-preview .section-head .hint { margin: 0; }
.report-actions { display: grid; gap: .625rem; margin-top: 1.25rem; }
.report-actions .btn { width: 100%; }
.view > label { margin-top: 1.5rem; }

/* Intervento iniziato ma non concluso: cerchio pieno a metà */
.reg-row.is-da_terminare .reg-toggle span {
    background: linear-gradient(90deg, var(--ocra) 50%, transparent 50%);
}
.segmented label { white-space: nowrap; font-size: .9375rem; padding-left: .25rem; padding-right: .25rem; }

/* ---------- Profilo ---------- */

.profile-head { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 1.25rem; }
.profile-head p { margin: 0; }
.profile-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 4rem;
    height: 4rem;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--gesso);
    background: var(--lavagna);
    border-radius: 50%;
}
.profile-avatar.is-small { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
.profile-name { font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.profile-role { color: var(--grafite); }
.profile-head .row-badges { margin-top: .375rem; }
.profile-firma { margin-top: 1.25rem; text-align: center; }
.button-row-center { justify-content: center; }
.section[hidden] { display: none; }
.sheet .totp { margin-top: 1rem; }

.profile-card {
    margin: .25rem 0 1.5rem;
    padding: 1.25rem;
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: 12px;
}
.profile-card .profile-head { margin: 0 0 1rem; }
.profile-card .profile-role + .profile-role { font-size: .875rem; margin-top: .125rem; }
a.btn.is-block { display: flex; }

/* ---------- Collegamenti sotto i moduli di accesso ---------- */

.login-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin: 0;
    padding: 0 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    background: var(--gesso);
}
.login-links a, .login-links .link-button { color: var(--lavagna); font-weight: 600; text-underline-offset: 3px; }
@media (min-width: 640px) {
    .login-links { max-width: 420px; width: 100%; background: none; padding: 1rem 0 0; }
    .login-links a, .login-links .link-button { color: var(--gesso); }
}
.login-form input[type="email"] {
    width: 100%;
    font: inherit;
    font-size: 1.0625rem;
    padding: .75rem .875rem;
    color: var(--inchiostro);
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
}
.auth-title { margin: 0 0 1rem; font-size: 1.375rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.login-form .check a { color: var(--lavagna); }
.login-form form { margin: 0; }
.setup-select { width: 100%; font: inherit; font-size: 1.0625rem; padding: .75rem .875rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--raggio); }
.setup input[type="email"] { width: 100%; font: inherit; font-size: 1.0625rem; padding: .75rem .875rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--raggio); }
.setup code { font-size: .8125rem; overflow-wrap: anywhere; }

/* ---------- Abbonamento ---------- */

.banner {
    display: block;
    padding: .625rem 1rem;
    color: var(--ocra);
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
    background: var(--ocra-fondo);
    border-bottom: 1px solid color-mix(in srgb, var(--ocra) 30%, transparent);
}
.banner.is-expired { color: var(--gesso); background: var(--errore); border-color: var(--errore); }
.banner[hidden] { display: none; }
.profile-plan {
    display: block;
    margin: 0 0 1rem;
    padding: .625rem .75rem;
    color: var(--lavagna);
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
    background: var(--gesso);
    border-radius: var(--raggio);
}
.profile-plan.is-urgent { color: var(--ocra); background: var(--ocra-fondo); }

/* ---------- Punteggio ---------- */

.score {
    margin: 0 0 1rem;
    padding: 1rem 1.125rem;
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: 12px;
}
.score-title { margin: 0 0 .625rem; font-weight: 700; color: var(--lavagna); }
.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: .75rem; }
.score-grid small { display: block; min-height: 2.2em; font-size: .75rem; color: var(--grafite); line-height: 1.15; }
.score-grid b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.score-grid em { font-style: normal; font-size: .8125rem; font-weight: 600; color: var(--lavagna); }
.score-req { margin: 0 0 .5rem; font-weight: 600; }
.score-bar { height: .5rem; background: var(--gesso); border-radius: 999px; overflow: hidden; }
.score-bar span { display: block; height: 100%; width: var(--p); background: var(--lavagna); border-radius: 999px; }
.score .hint { margin-top: .5rem; }
.score-details summary { cursor: pointer; font-weight: 600; padding: .5rem 0; }
.table-wrap { overflow-x: auto; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.table-wrap th, .table-wrap td { padding: .5rem .625rem; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
.table-wrap th { font-size: .75rem; color: var(--grafite); }
.score-note { margin-top: 1.5rem; }
.profile-score { margin-bottom: .625rem; }

/* ---------- Piani ---------- */

.plans { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.plan { padding: 1.125rem; background: var(--bianco); border: 1px solid var(--linea); border-radius: 12px; }
.plan p { margin: 0; }
.plan-name { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--lavagna); }
.plan-price { margin-top: .375rem !important; font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-days { margin: .25rem 0 1rem !important; color: var(--grafite); }
.plan-days strong { color: var(--ocra); }

/* ---------- Gestione ---------- */

.admin-nav a, .chips a.chip {
    flex: none;
    padding: .5rem .875rem;
    color: var(--inchiostro);
    font-size: .9375rem;
    text-decoration: none;
    background: var(--bianco);
    border: 1px solid var(--linea);
    border-radius: 999px;
}
.admin-nav a[aria-current="page"], .chips a.chip[aria-pressed="true"] { color: var(--gesso); background: var(--lavagna); border-color: var(--lavagna); }
.admin-alerts { margin: 0 0 1rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.stat {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: .75rem; color: inherit; text-decoration: none;
    background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio);
}
.stat b { font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--lavagna); }
.stat small { font-size: .8125rem; color: var(--grafite); line-height: 1.2; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .5rem; }
.admin-pay .button-row { margin-top: .5rem; }
.admin-pay .row-title a { color: var(--lavagna); }
.tabbar a[hidden] { display: none; }

/* ---------- Pagine pubbliche ---------- */

body.is-public { background: var(--gesso); }
.pub { min-height: 100vh; display: flex; flex-direction: column; }
.pub-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
    padding: calc(.875rem + env(safe-area-inset-top)) 1.25rem .875rem;
    background: var(--lavagna);
}
.pub-logo { color: var(--gesso); font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.pub-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.pub-nav a { color: color-mix(in srgb, var(--gesso) 85%, transparent); font-weight: 600; text-decoration: none; padding: .25rem 0; }
.pub-nav a:hover { color: var(--gesso); text-decoration: underline; }
.pub-nav .pub-cta { padding: .5rem .875rem; color: var(--lavagna); background: var(--gesso); border-radius: var(--raggio); }
.pub-nav .pub-cta:hover { text-decoration: none; }
.pub-main { flex: 1; width: 100%; max-width: 64rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.pub-doc { max-width: 46rem; line-height: 1.6; }
.pub-doc h1 { font-size: 1.75rem; line-height: 1.25; margin: .5rem 0 .25rem; }
.pub-doc h2 { font-size: 1.1875rem; margin: 2rem 0 .5rem; color: var(--lavagna); }
.pub-doc h3 { font-size: 1rem; margin: 1.25rem 0 .25rem; }
.pub-doc p, .pub-doc li { margin: .5rem 0; }
.pub-doc ul, .pub-doc ol { padding-left: 1.25rem; }
.pub-doc .doc-meta { color: var(--grafite); font-size: .9375rem; margin: 0 0 1.5rem; }
.pub-doc .doc-box { padding: .875rem 1rem; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); }
.pub-doc table { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: .75rem 0; }
.pub-doc th, .pub-doc td { padding: .5rem .625rem; border: 1px solid var(--linea); text-align: left; vertical-align: top; background: var(--bianco); }
.pub-doc th { background: var(--gesso); }
.pub-doc .table-wrap { margin: .75rem 0; }
mark.da-completare { padding: 0 .25em; color: #fff; background: var(--errore); border-radius: 3px; font-weight: 600; }
.pub-foot { padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); font-size: .875rem; color: var(--grafite); background: var(--bianco); border-top: 1px solid var(--linea); }
.pub-foot nav { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; margin-bottom: .75rem; }
.pub-foot a { color: var(--lavagna); }
.pub-foot p { margin: 0; }
.hero { padding: 2rem 0 1rem; max-width: 40rem; }
.hero h1 { font-size: clamp(1.75rem, 6vw, 2.75rem); line-height: 1.15; margin: 0 0 1rem; color: var(--lavagna); }
.hero p { font-size: 1.125rem; line-height: 1.5; margin: 0 0 1.25rem; }
.hero .hint { font-size: .9375rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }
.hero-cta .btn { min-width: 10rem; text-align: center; justify-content: center; }
.pub-section { margin-top: 2.5rem; }
.pub-section h2 { font-size: 1.5rem; margin: 0 0 1rem; color: var(--lavagna); }
.features { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.feature { padding: 1.125rem; background: var(--bianco); border: 1px solid var(--linea); border-radius: 12px; }
.feature h3 { margin: 0 0 .375rem; font-size: 1.0625rem; }
.feature p { margin: 0; line-height: 1.5; color: var(--grafite); }
.pub-section details { padding: .875rem 1rem; margin-bottom: .5rem; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); }
.pub-section summary { cursor: pointer; font-weight: 600; }
.pub-section details p { margin: .625rem 0 0; line-height: 1.5; }
.login-legal { margin: 0; padding: 0 1.5rem calc(1rem + env(safe-area-inset-bottom)); font-size: .8125rem; background: var(--gesso); }
.login-legal a { color: var(--grafite); margin-right: .75rem; }
@media (min-width: 640px) { .login-legal { background: none; padding: .5rem 0 0; } .login-legal a { color: color-mix(in srgb, var(--gesso) 80%, transparent); } }
.consenso-acquisto { margin: 0 0 1rem; padding: .75rem .875rem; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); font-size: .9375rem; }
.consenso-acquisto a { color: var(--lavagna); }
.app-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem 1rem; margin: 1.5rem 0 .5rem; font-size: .875rem; }
.app-legal a { color: var(--grafite); }

/* ---------- Firma ---------- */

.firma-tela { border: 1px dashed var(--linea); border-radius: var(--raggio); background: #fff; touch-action: none; }
.firma-tela canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair; }
.firma-anteprima { padding: .5rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--raggio); margin-bottom: .75rem; }
.firma-anteprima img { display: block; max-width: 100%; max-height: 7rem; margin: 0 auto; }
.riga-corrente td { background: var(--ocra-fondo); }
.ripristino { margin-top: 1.25rem; padding: 1rem; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); }
.ripristino input[type="file"] { margin: .5rem 0 .75rem; max-width: 100%; }
.ripristino input[type="password"], .ripristino input[type="text"] { width: 100%; font: inherit; padding: .625rem .75rem; border: 1px solid var(--linea); border-radius: var(--raggio); margin-bottom: .5rem; }
.promo-nota { margin: 0 0 1rem; padding: .75rem .875rem; font-weight: 600; color: var(--lavagna); background: var(--ocra-fondo); border-radius: var(--raggio); }
.hero-promo { display: inline-block; margin: 0 0 1rem; padding: .5rem .875rem; font-weight: 700; color: var(--lavagna); background: var(--ocra-fondo); border-radius: 999px; }

/* ---------- Guide ---------- */

.guida { line-height: 1.6; overflow-wrap: anywhere; }
.guida h2 { font-size: 1.25rem; margin: 1.25rem 0 .5rem; color: var(--lavagna); }
.guida h3 { font-size: 1.0625rem; margin: 1rem 0 .375rem; }
.guida h4 { font-size: 1rem; margin: .875rem 0 .25rem; }
.guida p, .guida li { margin: .375rem 0; }
.guida ul, .guida ol { padding-left: 1.25rem; }
.guida code { padding: .05em .3em; font-size: .9em; background: var(--gesso); border-radius: 4px; }
.guida pre { padding: .75rem; overflow-x: auto; background: var(--gesso); border-radius: var(--raggio); }
.guida pre code { padding: 0; background: none; }
.guida a { color: var(--lavagna); }
[data-installa][hidden] { display: none !important; }
.link-invito input { width: 100%; font: inherit; padding: .625rem .75rem; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--bianco); }
[data-invito-email] input { width: 100%; font: inherit; padding: .625rem .75rem; border: 1px solid var(--linea); border-radius: var(--raggio); margin-bottom: .5rem; }

/* ---------- Illustrazioni ---------- */

.hero { max-width: none; display: grid; gap: 1rem; padding-bottom: 0; }
.hero-testo { max-width: 40rem; }
.hero-visual img { display: block; width: 100%; height: auto; }
@media (min-width: 760px) {
    /* Testo nella parte libera a sinistra dell'illustrazione */
    .hero { grid-template-areas: "tutto"; align-items: center; }
    .hero-testo, .hero-visual { grid-area: tutto; }
    .hero-testo { position: relative; z-index: 1; max-width: 44%; }
}
.empty-img { display: block; width: 240px; max-width: 70%; height: auto; margin: 0 auto .75rem; border-radius: 16px; }

/* ---------- Cronologia dell'intervento ---------- */

.cronologia-box { margin-bottom: 1rem; }
.cronologia { list-style: none; margin: 0 0 .75rem; padding: 0 0 0 .875rem; border-left: 2px solid var(--linea); }
.cron-voce { position: relative; display: flex; gap: .5rem; align-items: baseline; padding: .25rem 0; }
.cron-voce::before { content: ""; position: absolute; left: -1.22rem; top: .7rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--lavagna); }
.cron-data { flex: none; min-width: 5.25rem; font-size: .875rem; color: var(--grafite); font-variant-numeric: tabular-nums; }
.cron-testo { flex: 1; overflow-wrap: anywhere; }
.cron-voce .link-button { flex: none; padding: 0 .375rem; font-size: 1.125rem; line-height: 1; }

/* ---------- Logo ---------- */

.pub-logo img { display: block; height: 2.25rem; width: auto; }
.login-logo { margin: 0 0 .75rem; line-height: 0; }
.login-logo img { display: block; width: min(300px, 82%); height: auto; }

/* ---------- Attivazione guidata ---------- */

.guida-passi { display: flex; gap: .5rem; justify-content: center; margin: .5rem 0 1rem; }
.guida-passi .passo { width: .75rem; height: .75rem; border-radius: 50%; background: var(--linea); }
.guida-passi .passo.is-fatto { background: var(--ocra); }
.guida-passi .passo.is-attuale { background: var(--lavagna); transform: scale(1.3); }
.guida-kicker { margin: 0; text-align: center; color: var(--grafite); font-size: .875rem; }
.guida-titolo { margin: .25rem 0 1rem; text-align: center; color: var(--lavagna); font-size: 1.5rem; }
.guida-form label { display: block; margin-bottom: .75rem; font-weight: 600; }
.guida-form input, .guida-form select { display: block; width: 100%; margin-top: .25rem; font: inherit; font-weight: 400; padding: .625rem .75rem; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--bianco); }
.guida-settimana { display: grid; gap: .5rem; }
.giorno-riga { display: grid; grid-template-columns: 5.5rem 1fr 6.5rem; gap: .5rem; align-items: center; }
.giorno-riga select, .giorno-riga input { font: inherit; padding: .5rem; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--bianco); min-width: 0; }
.giorno-nome { font-weight: 600; }
.guida-azioni { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.guida-azioni .link-button { justify-self: center; }
.configura .avanzamento { height: .5rem; margin: .5rem 0 .75rem; background: var(--linea); border-radius: 999px; overflow: hidden; }
.configura .avanzamento span { display: block; height: 100%; background: var(--ocra); }

/* ---------- Segnalazioni ---------- */

.testo-lungo { white-space: pre-wrap; overflow-wrap: anywhere; }
.segnalazione .risposta { display: block; margin-top: .375rem; padding: .5rem .625rem; background: var(--ocra-fondo); border-radius: var(--raggio); white-space: pre-wrap; }
.guida-form textarea { display: block; width: 100%; margin-top: .25rem; font: inherit; font-weight: 400; padding: .625rem .75rem; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--bianco); resize: vertical; }
.guida-form .check { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
.guida-form .check input { width: auto; margin-top: .2rem; }
.guida-form .segmented { margin-bottom: .75rem; } .guida-form .segmented label { margin: 0; font-weight: 600; }

/* ---------- Colori del calendario ---------- */

:root {
    --festa: #A8322A; --festa-fondo: #F8E7E5; --festa-testo: #791F1F;
    --ferie: #185FA5; --ferie-fondo: #E6F1FB; --ferie-testo: #0C447C;
    --assente: #534AB7; --assente-fondo: #EEEDFE; --assente-testo: #3C3489;
    --scegliere-testo: #633806;
    --modificato-fondo: #EEF4F1;
}
.cal-ico { width: 1em; height: 1em; margin-right: .3em; vertical-align: -.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cal-row { border-left: 4px solid transparent; border-radius: 0; }
.cal-row.cal-sede { border-left-color: var(--lavagna); }
.cal-row.cal-modificato { border-left-color: var(--lavagna); background: var(--modificato-fondo); }
.cal-row.cal-scegliere { border-left-color: var(--ocra); background: var(--ocra-fondo); }
.cal-row.cal-scegliere .row-title, .cal-row.cal-scegliere .cal-date b { color: var(--scegliere-testo); }
.cal-row.cal-festa { border-left-color: var(--festa); background: var(--festa-fondo); }
.cal-row.cal-festa .row-title, .cal-row.cal-festa .cal-date b { color: var(--festa-testo); }
.cal-row.cal-ferie { border-left-color: var(--ferie); background: var(--ferie-fondo); }
.cal-row.cal-ferie .row-title, .cal-row.cal-ferie .cal-date b { color: var(--ferie-testo); font-weight: 600; }
.cal-row.cal-assente { border-left-color: var(--assente); background: var(--assente-fondo); }
.cal-row.cal-assente .row-title, .cal-row.cal-assente .cal-date b { color: var(--assente-testo); font-weight: 600; }
.cal-row.cal-libero { padding-top: .5rem; padding-bottom: .5rem; }
.cal-row.cal-libero .cal-date b { color: var(--grafite); font-weight: 500; }
.cal-row.cal-pianificata { outline: 1.5px dashed var(--ferie); outline-offset: -3px; }
.badge.is-pian { color: var(--ferie-testo); background: var(--ferie-fondo); }

.legenda { margin-bottom: 1rem; font-size: .875rem; }
.legenda summary { cursor: pointer; color: var(--grafite); font-weight: 600; }
.legenda ul { display: flex; flex-wrap: wrap; gap: .375rem .75rem; margin: .625rem 0 0; padding: 0; list-style: none; }
.legenda li { display: flex; align-items: center; gap: .375rem; }
.legenda li::before { content: ""; width: .875rem; height: .875rem; border-radius: 3px; background: var(--bianco); border: 1px solid var(--linea); }
.legenda .cal-sede::before { border-left: 4px solid var(--lavagna); }
.legenda .cal-modificato::before { background: var(--modificato-fondo); border-left: 4px solid var(--lavagna); }
.legenda .cal-scegliere::before { background: var(--ocra-fondo); border-color: var(--ocra); }
.legenda .cal-festa::before { background: var(--festa-fondo); border-color: var(--festa); }
.legenda .cal-ferie::before { background: var(--ferie-fondo); border-color: var(--ferie); }
.legenda .cal-assente::before { background: var(--assente-fondo); border-color: var(--assente); }
.legenda .cal-libero::before { background: transparent; }
.legenda .cal-pianificata::before { border: 1.5px dashed var(--ferie); }

.mese-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.mese-head h2 { margin: 0; font-size: 1.125rem; text-transform: capitalize; }
.mese-head .icon-button { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--lavagna); }
.mese-head .icon-button svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mese-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.mese-dow { text-align: center; font-size: .6875rem; font-weight: 600; color: var(--grafite); padding-bottom: 1px; }
/* Celle compatte: numero in alto, sigla del tipo di giornata sotto */
.mese-giorno { position: relative; height: 2.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; font: inherit; line-height: 1.05; cursor: pointer;
    background: var(--bianco); border: 1px solid var(--linea); border-radius: 6px; color: var(--inchiostro); overflow: hidden; }
.mese-giorno b { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mese-giorno small { font-size: .5625rem; font-weight: 600; letter-spacing: -.01em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.mese-giorno.cal-sede { box-shadow: inset 0 -3px 0 var(--lavagna); }
.mese-giorno.cal-modificato { background: var(--modificato-fondo); box-shadow: inset 0 -3px 0 var(--lavagna); }
.mese-giorno.cal-scegliere { background: var(--ocra-fondo); border-color: var(--ocra); color: var(--scegliere-testo); }
.mese-giorno.cal-festa { background: var(--festa-fondo); border-color: var(--festa); color: var(--festa-testo); }
.mese-giorno.cal-ferie { background: var(--ferie-fondo); border-color: var(--ferie); color: var(--ferie-testo); }
.mese-giorno.cal-assente { background: var(--assente-fondo); border-color: var(--assente); color: var(--assente-testo); }
.mese-giorno.cal-libero { background: transparent; color: var(--grafite); }
.mese-giorno.cal-libero b { font-weight: 400; }
.mese-giorno.cal-pianificata { border: 1.5px dashed var(--ferie); }
.mese-giorno.is-today { outline: 2px solid var(--lavagna); outline-offset: 1px; }
.mese-sosp { position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--ocra); }

.today.oggi-festa { background: var(--festa-testo); }
.today.oggi-ferie { background: var(--ferie-testo); }
.today.oggi-assente { background: var(--assente-testo); }
.today.oggi-scegliere { background: #7A4F0E; }
.legenda .cal-sospensione::before { width: .4rem; height: .4rem; border-radius: 50%; border: 0; background: var(--ocra); margin: 0 .25rem; }

/* ---------- Certificazioni e scadenze ---------- */

.badge.scad-scaduta { color: var(--festa-testo); background: var(--festa-fondo); }
.badge.scad-in { color: var(--scegliere-testo); background: var(--ocra-fondo); }
.badge.scad-ok { color: var(--lavagna); background: var(--modificato-fondo); }
.row.scad-scaduta { border-left: 4px solid var(--festa); }
.row.scad-in_scadenza { border-left: 4px solid var(--ocra); }
.imminenti .list { margin: .25rem 0 0; }
.allega { position: relative; margin-top: .5rem; cursor: pointer; text-align: center; }