/* ============================================================
   Baby Academy — Stile principale
   Brand: #0294bf (azzurro) | #61a229 (verde)
   Font: Amatic SC (titoli) | Assistant (corpo)
   ============================================================ */

/* ── Self-hosted fonts ── */
@font-face {
    font-family: 'Amatic SC';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/amatic-sc-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Amatic SC';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/amatic-sc-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/assistant-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/assistant-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
    --azzurro:      #0294bf;
    --azzurro-dark: #0178a0;
    --verde:        #61a229;
    --verde-dark:   #4e8220;
    --testo:        #333;
    --testo-light:  #666;
    --bordo:        #dde3e8;
    --sfondo:       #f4f8fb;
    --bianco:       #ffffff;
    --errore:       #d9534f;
    --successo:     #61a229;
}

html, body {
    height: 100%;
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 16px;
    color: var(--testo);
    background: var(--sfondo);
}

@media (hover: none), (max-width: 1024px) {
    html { font-size: 18px; }
}

h1, h2, h3 {
    font-family: 'Amatic SC', cursive;
    font-weight: 700;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(160deg, var(--azzurro) 0%, #017ea6 50%, var(--verde) 100%);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.login-wrap {
    background: var(--bianco);
    border-radius: 20px;
    padding: 40px 32px 32px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.login-logo {
    margin-bottom: 20px;
}

.login-logo img {
    width: 200px;
    height: auto;
}

.login-title {
    font-size: 2.8rem;
    color: var(--azzurro);
    line-height: 1;
    margin-bottom: 4px;
}

.login-subtitle {
    font-size: 0.9rem;
    color: var(--testo-light);
    margin-bottom: 28px;
}

/* --- Desktop split (login + cambia-password) --- */
.login-left { display: none; }

@media (min-width: 768px) {
    body.login-split {
        flex-direction: row;
        align-items: stretch;
        padding: 0;
        background: var(--bianco);
    }

    body.login-split .login-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        gap: 20px;
        background: linear-gradient(160deg, var(--azzurro) 0%, #017ea6 50%, var(--verde) 100%);
        padding: 48px;
    }

    body.login-split .login-left img {
        width: 75%;
        max-width: 300px;
        height: auto;
    }

    body.login-split .login-left p {
        color: rgba(255,255,255,0.85);
        font-size: 1.05rem;
        text-align: center;
    }

    body.login-split .login-right {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        padding: 48px 32px;
        background: var(--bianco);
    }

    body.login-split .login-right .login-wrap {
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }

    body.login-split .login-right .login-logo {
        display: none;
    }
}

/* Mobile: login card occupa quasi tutto lo schermo */
@media (hover: none), (max-width: 1024px) {
    body.login-page {
        padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom) 16px;
    }
    .login-right {
        width: 100%;
    }
    .login-wrap {
        padding: 32px 20px 28px;
        border-radius: 16px;
        max-width: 100%;
    }
}


/* ============================================================
   FORM
   ============================================================ */

.form-group {
    margin-bottom: 16px;
    text-align: left;
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--testo-light);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--bordo);
    border-radius: 10px;
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 1rem;
    color: var(--testo);
    background: var(--sfondo);
    transition: border-color 0.2s;
    -webkit-appearance: none;
}

.form-group input:focus {
    outline: none;
    border-color: var(--azzurro);
    background: var(--bianco);
}

.form-message {
    min-height: 20px;
    font-size: 0.9rem;
    margin-bottom: 12px;
    border-radius: 8px;
    padding: 0;
}

.form-message.error {
    color: var(--errore);
    background: #fdf2f2;
    padding: 10px 12px;
}

.form-message.success {
    color: var(--successo);
    background: #f2faf0;
    padding: 10px 12px;
}

/* ============================================================
   BOTTONI
   ============================================================ */

.btn-primary {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--azzurro);
    color: var(--bianco);
    border: none;
    border-radius: 10px;
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    -webkit-appearance: none;
}

.btn-primary:hover {
    background: var(--azzurro-dark);
}

.btn-primary:disabled {
    background: #aaa;
    cursor: not-allowed;
}

.btn-secondary {
    display: inline-block;
    padding: 10px 20px;
    background: transparent;
    color: var(--azzurro);
    border: 1.5px solid var(--azzurro);
    border-radius: 10px;
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.btn-secondary:hover {
    background: var(--azzurro);
    color: var(--bianco);
}

.login-link {
    display: inline-block;
    margin-top: 18px;
    font-size: 0.85rem;
    color: var(--testo-light);
    text-decoration: none;
}

.login-link:hover {
    color: var(--azzurro);
    text-decoration: underline;
}

.login-link-guida {
    display: block;
    margin-top: 10px;
}

/* ============================================================
   BANNER INSTALLAZIONE iOS
   ============================================================ */

.ios-install-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bianco);
    border-top: 1px solid var(--bordo);
    border-radius: 18px 18px 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    z-index: 1000;
    align-items: center;
    gap: 14px;
}

.ios-install-banner.visible {
    display: flex;
}

.ios-install-icon img {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    flex-shrink: 0;
}

.ios-install-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.88rem;
    color: var(--testo);
}

.ios-install-text strong {
    font-size: 0.95rem;
}

.ios-install-text span {
    color: var(--testo-light);
    line-height: 1.4;
}

.ios-install-steps {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    color: var(--testo) !important;
    margin-top: 2px;
}

.ios-install-steps svg {
    color: var(--azzurro);
    vertical-align: middle;
    flex-shrink: 0;
}

.ios-install-steps em {
    font-style: normal;
    font-weight: 600;
    color: var(--azzurro);
}

.btn-install-chrome {
    margin-top: 6px;
    padding: 8px 18px;
    background: var(--azzurro);
    color: var(--bianco);
    border: none;
    border-radius: 8px;
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
}

.btn-install-chrome:hover {
    background: var(--azzurro-dark);
}

.ios-install-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: var(--sfondo);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
    color: var(--testo-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ============================================================
   LAYOUT PRINCIPALE (post-login)
   Struttura: body flex-column → header + app-body
              app-body flex-row → sidebar (desktop) + app-main
              app-main flex-column → child-selector + app-content + bottom-nav
   ============================================================ */

body.app-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ── App header ── */
.app-header {
    background: var(--azzurro);
    height: 62px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    z-index: 10;
    gap: 12px;
}

.app-header .brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.app-header .brand img {
    height: 38px;
    width: auto;
    object-fit: contain;
    transition: opacity 0.15s;
}
@keyframes logo-pulse {
    0%   { opacity: 1; }
    40%  { opacity: 0.4; }
    100% { opacity: 1; }
}
.app-header .brand img.logo-refreshing {
    animation: logo-pulse 0.35s ease-out 1;
    cursor: default;
    pointer-events: none;
}

.brand-ruolo {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    margin-top: 2px;
}

.header-children {
    display: none; /* visibile solo su desktop via media query */
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.admin-gear {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 1.0625rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}
.admin-gear:hover { background: rgba(255,255,255,0.35); }
.admin-gear.hidden { display: none; }

.btn-guida {
    font-family: 'Assistant', Arial, sans-serif;
    font-weight: 700;
}
.btn-guida.active { background: var(--bianco); color: var(--azzurro); }

.btn-logout {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 0.8125rem;
    font-family: 'Assistant', Arial, sans-serif;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-logout:hover { background: rgba(255,255,255,0.35); }

/* ── Child pills (header desktop) ── */
.child-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 24px;
    padding: 4px 13px 4px 6px;
    cursor: pointer;
    color: rgba(255,255,255,0.8);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: 'Assistant', Arial, sans-serif;
    transition: all 0.15s;
}
.child-pill.active,
.child-pill:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.6);
    color: white;
}
.child-pill-av {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.25);
    color: white;
}

/* ── App body ── */
.app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Sidebar (desktop only) ── */
.sidebar {
    display: none;
}

/* ── App main ── */
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ── Child selector bar (mobile) ── */
.child-selector-bar {
    background: var(--bianco);
    border-bottom: 1px solid var(--bordo);
    padding: 10px 16px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.child-selector-bar::-webkit-scrollbar { display: none; }
.child-selector-bar.hidden { display: none; }

.child-avatar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    min-width: 50px;
    -webkit-tap-highlight-color: transparent;
}
.child-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    border: 3px solid var(--bordo);
    transition: all 0.2s;
    color: #8a9ab0;
    background: #eef4f8;
    overflow: hidden;
}
.child-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.child-pill-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.child-name {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #8a9ab0;
    transition: color 0.2s;
    white-space: nowrap;
}
.child-avatar-btn.active .child-name { color: var(--child-color, var(--azzurro)); }
.child-avatar-btn.active .child-avatar {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px var(--child-color, var(--azzurro));
}
.child-avatar-btn:not(.active):not(.solo) .child-avatar {
    filter: grayscale(1);
    opacity: 0.4;
    transition: filter 0.2s, opacity 0.2s;
}
.child-avatar-btn.solo { cursor: default; }

/* ── Header children (desktop) ── */
.header-child-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 20px;
    padding: 5px 14px 5px 5px;
    cursor: pointer;
    color: rgba(255,255,255,0.85);
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    transition: background 0.15s, color 0.15s;
}
.header-child-btn:hover { background: rgba(255,255,255,0.25); }
.header-child-btn.solo { cursor: default; }
.header-child-btn.solo:hover { background: rgba(255,255,255,0.15); }
.header-child-btn.active { background: var(--bianco); color: var(--azzurro); }
.header-child-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
    background: rgba(255,255,255,0.3);
    color: white;
}
.header-child-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.header-child-btn.active .header-child-avatar { background: var(--child-color, var(--azzurro)); color: white; }

/* ── App content ── */
.app-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ── Sezioni ── */
.app-section {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}
.app-section.active { display: block; }

.section-scroll {
    position: absolute;
    inset: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 18px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.section-scroll::after {
    content: '';
    display: block;
    flex-shrink: 0;
    height: calc(76px + env(safe-area-inset-bottom));
}

.section-loading {
    color: var(--testo-light);
    font-size: 0.9rem;
    padding: 20px 0;
}

/* ── Bottom nav (mobile) ── */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bianco);
    border-top: 1px solid var(--bordo);
    display: flex;
    z-index: 100;
}
.bottom-nav .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 7px 2px 5px;
    color: #aabbcc;
    font-family: 'Assistant', Arial, sans-serif;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav .nav-item.active { color: var(--azzurro); }
.bottom-nav .nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: var(--azzurro);
    border-radius: 0 0 3px 3px;
}
.nav-icon-wrap {
    position: relative;
    font-size: 1.375rem;
    line-height: 1;
}
.nav-label {
    font-size: 0.625rem;
    font-weight: 600;
}
/* ── Mini calendario presenze (staff) ── */
.cal-icon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 26px;
    border-radius: 3px;
    overflow: hidden;
    border: 1.5px solid var(--azzurro);
    line-height: 1;
    vertical-align: middle;
}
.cal-icon .cal-month {
    width: 100%;
    background: var(--azzurro);
    color: #fff;
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-align: center;
    padding: 2px 0;
    font-family: inherit;
}
.cal-icon .cal-day {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #333;
    padding: 1px 0 2px;
    font-family: inherit;
}
.nav-item.active .cal-icon .cal-day { color: var(--azzurro); }

/* ── Badge nav (bottom + sidebar) ── */
.nav-badge {
    position: absolute;
    top: -5px;
    right: -9px;
    background: #e74c3c;
    color: white;
    font-size: 0.5625rem;
    font-weight: 700;
    font-family: 'Assistant', Arial, sans-serif;
    min-width: 15px;
    height: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 1.5px solid white;
}
.nav-badge.hidden { display: none; }

/* ── Desktop: sidebar visibile ── */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {

    .header-children { display: flex; }

    .sidebar {
        display: flex;
        flex-direction: column;
        width: 220px;
        flex-shrink: 0;
        background: var(--bianco);
        border-right: 1px solid var(--bordo);
        padding: 12px 0;
        overflow-y: auto;
    }

    .sidebar-sep {
        height: 1px;
        background: var(--bordo);
        margin: 8px 16px;
    }

    .sidebar .nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 20px;
        cursor: pointer;
        border: none;
        background: none;
        text-align: left;
        width: 100%;
        color: #8a9ab0;
        font-family: 'Assistant', Arial, sans-serif;
        font-size: 0.9375rem;
        font-weight: 600;
        border-left: 3px solid transparent;
        transition: background 0.12s, color 0.12s;
    }
    .sidebar .nav-item:hover { color: #556677; background: #f8fafc; }
    .sidebar .nav-item.active {
        color: var(--azzurro);
        background: #eef8fc;
        border-left-color: var(--azzurro);
    }
    .sidebar .nav-icon { font-size: 1.125rem; width: 22px; text-align: center; flex-shrink: 0; }
    .sidebar .nav-badge {
        position: static;
        margin-left: auto;
        min-width: 18px;
        height: 18px;
        font-size: 0.6875rem;
        border: none;
        border-radius: 9px;
    }

    .bottom-nav { display: none !important; }
    .child-selector-bar { display: none !important; }

    .section-scroll {
        padding: 28px 32px 0;
    }
    .section-scroll::after {
        height: 40px;
    }
}

/* ============================================================
   CARD (generica)
   ============================================================ */

.card {
    background: var(--bianco);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 16px;
}

.card-title {
    font-family: 'Amatic SC', cursive;
    font-size: 1.5rem;
    color: var(--azzurro);
    margin-bottom: 8px;
}

/* ============================================================
   HOME GENITORE — greeting + section cards
   ============================================================ */

.section-greeting {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sg-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--bordo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    flex-shrink: 0;
    background: #eef4f8;
    color: #8a9ab0;
}
.sg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sg-text {
    font-family: 'Amatic SC', cursive;
    font-size: 1.75rem;
    color: #223344;
    line-height: 1.1;
}
.sg-text .sub {
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 0.8125rem;
    color: #8a9ab0;
    font-weight: 400;
    display: block;
    margin-top: 4px;
}

.home-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-card {
    background: var(--bianco);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 13px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    border-left: 4px solid transparent;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 0.15s;
}
.section-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.10); }

.sc-comunicazioni { border-left-color: var(--azzurro); }
.sc-diario        { border-left-color: var(--verde); }
.sc-quaderno      { border-left-color: #f39c12; }
.sc-armadietto    { border-left-color: #9b59b6; }

.sc-icon-wrap { position: relative; flex-shrink: 0; }

.sc-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
}
.sc-comunicazioni .sc-icon { background: #e8f6fb; }
.sc-diario        .sc-icon { background: #eef7e6; }
.sc-quaderno      .sc-icon { background: #fef5e7; }
.sc-armadietto    .sc-icon { background: #f5eefa; }

.sc-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    background: #e74c3c;
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid white;
}
.sc-badge.hidden { display: none; }

.sc-body { flex: 1; min-width: 0; }
.sc-title { font-size: 0.9375rem; font-weight: 700; color: #223344; margin-bottom: 2px; }
.sc-preview {
    font-size: 0.75rem;
    color: #8a9ab0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-arrow { color: #c8d4e0; font-size: 1.25rem; flex-shrink: 0; }

/* Desktop: griglia 2×2 */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    .sg-text { font-size: 2.25rem; }
    .sg-avatar { width: 72px; height: 72px; font-size: 1.625rem; }
    .home-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        max-width: 820px;
    }
}

/* ============================================================
   HOME GENITORE — card presenze
   ============================================================ */

.presenze-card {
    background: var(--bianco);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-left: 4px solid #e74c3c;
}

.pc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.pc-cal-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.pc-cal-top {
    background: #e25449;
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-align: center;
    padding: 2px 0 1px;
    line-height: 1;
}
.pc-cal-day {
    flex: 1;
    background: #fdecea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: #223344;
    line-height: 1;
}
.pc-title { font-size: 0.9375rem; font-weight: 700; color: #223344; }
.pc-sub   { font-size: 0.75rem; color: #8a9ab0; margin-top: 1px; }

.pc-assenze-future {
    margin: 8px 0 6px;
    border-top: 1px solid #eef2f6;
    padding-top: 8px;
}
.pc-assenze-title {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #8a9ab0;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.pc-assenza-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
}
.pc-assenza-data {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #e74c3c;
    white-space: nowrap;
}
.pc-assenza-nota {
    font-size: 0.75rem;
    color: var(--testo-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.pc-assenza-allegato {
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.btn-assenza {
    width: 100%;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 11px;
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-assenza:hover { background: #c0392b; }

.assenza-form { display: none; margin-top: 10px; }
.assenza-form.open { display: block; }

.af-row { display: flex; gap: 8px; }
.af-group { flex: 1; margin-top: 8px; }
.af-group-full { flex: none; width: 100%; }
.af-group label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #8a9ab0;
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.af-opz { font-weight: 400; color: #aabbcc; text-transform: none; letter-spacing: 0; }
.af-group input {
    width: 100%;
    border: 1.5px solid var(--bordo);
    border-radius: 8px;
    padding: 9px 10px;
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 0.875rem;
    color: var(--testo);
    outline: none;
    background: var(--bianco);
    -webkit-appearance: none;
}
.af-group input:focus { border-color: var(--azzurro); }
.af-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.btn-annulla-assenza {
    flex: 1;
    background: var(--bianco);
    border: 1.5px solid var(--bordo);
    border-radius: 8px;
    padding: 10px;
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--testo-light);
    cursor: pointer;
}
.btn-conferma-assenza {
    flex: 2;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-conferma-assenza:hover  { background: #c0392b; }
.btn-conferma-assenza:disabled { background: #aaa; cursor: not-allowed; }

.af-file-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1.5px dashed var(--bordo);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--testo-light);
    background: var(--sfondo);
    transition: border-color .15s, background .15s;
    user-select: none;
}
.af-file-label:hover { border-color: var(--azzurro); background: #f0f8fb; color: var(--azzurro); }
.af-file-icon { font-size: 0.875rem; flex-shrink: 0; }
#af-file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.af-msg {
    font-size: 0.8125rem;
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 8px;
}
.af-msg.error   { color: var(--errore);   background: #fdf2f2; }
.af-msg.success { color: var(--successo); background: #f2faf0; }
.af-msg.warning { color: #b7600a;         background: #fef8f0; }
.af-msg.info    { color: #1a6b8a;         background: #f0f8fc; }

/* ============================================================
   SEZIONI — messaggi stato
   ============================================================ */

.section-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    text-align: center;
    flex: 1;
}
.sp-icon  { font-size: 3rem; line-height: 1; }
.sp-title { font-family: 'Amatic SC', cursive; font-size: 2rem; color: var(--azzurro); }
.sp-sub   { font-size: 0.9rem; color: var(--testo-light); }

.section-empty,
.section-error {
    font-size: 0.9rem;
    color: var(--testo-light);
    padding: 20px 0;
    line-height: 1.6;
}
.retry-btn {
    margin-left: 8px;
    background: none;
    border: 1px solid var(--azzurro);
    color: var(--azzurro);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.85rem;
    cursor: pointer;
}

/* ============================================================
   GESTIONE ADMIN
   ============================================================ */

.g-page {
    padding: 0 0 40px;
}

.g-page-title {
    font-family: 'Amatic SC', cursive;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--azzurro);
    padding: 16px 16px 12px;
}

/* Header con back button */
.g-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bordo);
    background: var(--bianco);
    position: sticky;
    top: 0;
    z-index: 10;
}

.g-back {
    background: none;
    border: none;
    color: var(--azzurro);
    font-size: 0.95rem;
    font-family: 'Assistant', Arial, sans-serif;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.g-back:hover { background: #e8f5fb; }

.g-header-title {
    font-size: 1rem;
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid home */
.g-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 16px;
}

.g-card {
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: 14px;
    padding: 24px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: box-shadow .15s, transform .1s;
    text-align: center;
}
.g-card:hover  { box-shadow: 0 4px 16px rgba(2,148,191,.12); }
.g-card:active { transform: scale(.97); }

.g-card-icon  { font-size: 2.2rem; line-height: 1; }
.g-card-label { font-size: 0.9rem; font-weight: 600; color: var(--testo); }

/* Lista */
.g-list {
    padding: 0 16px;
    margin-top: 12px;
}

.g-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bordo);
}
.g-item:last-child { border-bottom: none; }
.g-item-disabled   { opacity: .55; }

.g-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.g-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--testo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.g-item-sub {
    font-size: 0.8rem;
    color: var(--testo-light);
}

.g-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Badge */
.g-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; }
.g-badge-ok { background: #e8f8e8; color: var(--verde-dark); border: 1px solid #c3e6c3; }

/* Bottoni */
.g-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid var(--bordo);
    background: var(--bianco);
    color: var(--testo);
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    white-space: nowrap;
}
.g-btn:hover { background: var(--sfondo); }
.g-btn:disabled { opacity: .5; cursor: default; }

.g-btn-primary { background: var(--azzurro); color: #fff; border-color: var(--azzurro); }
.g-btn-primary:hover { background: var(--azzurro-dark); }

.g-btn-danger  { background: #f8d7da; color: #842029; border-color: #f5c2c7; }
.g-btn-danger:hover  { background: #f5c2c7; }

.g-btn-secondary { background: var(--sfondo); color: var(--testo-light); border-color: var(--bordo); }

.g-btn-sm { padding: 4px 10px; font-size: 0.82rem; border-radius: 6px; }

.g-btn-add {
    width: 100%;
    justify-content: center;
    padding: 10px;
}

/* Form */
.g-form-section {
    padding: 16px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.g-form {
    background: var(--sfondo);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.g-form.hidden { display: none; }

.g-form-card {
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    padding: 16px;
    margin: 12px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.g-form-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.g-form-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.g-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.g-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--testo-light);
}

.g-hint {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--testo-light);
}

.g-hint-block {
    font-size: 0.82rem;
    color: var(--testo-light);
    background: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0;
}

.g-input, .g-select, .g-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 0.92rem;
    color: var(--testo);
    background: var(--bianco);
    transition: border-color .15s;
}
.g-input:focus, .g-select:focus, .g-textarea:focus {
    outline: none;
    border-color: var(--azzurro);
    box-shadow: 0 0 0 2px rgba(2,148,191,.15);
}
.g-input[readonly] { background: var(--sfondo); color: var(--testo-light); }
.g-textarea { resize: vertical; min-height: 60px; }

.g-select-sm { width: auto; padding: 6px 10px; }
.g-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.g-toolbar .g-select-sm { flex: 1; max-width: 220px; }

.g-input-search {
    background: var(--bianco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.868-3.834zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 10px center;
    padding-left: 32px;
}

/* Messaggio inline */
.g-msg {
    font-size: 0.85rem;
    padding: 8px 10px;
    border-radius: 8px;
}
.g-msg.hidden   { display: none; }
.g-msg-err      { color: var(--errore);   background: #fdf2f2; border: 1px solid #f5c6cb; }
.g-msg-ok       { color: var(--verde-dark); background: #f0fff0; border: 1px solid #c3e6c3; }

/* Stato vuoto */
.g-empty    { font-size: 0.88rem; color: var(--testo-light); padding: 12px 0; }
.g-empty-sm { font-size: 0.82rem; color: var(--testo-light); margin: 0; padding: 6px 0; }

/* Tabs utenti */
.g-tabs {
    display: flex;
    border-bottom: 2px solid var(--bordo);
    padding: 0 16px;
    margin-top: 8px;
}

.g-tab {
    background: none;
    border: none;
    padding: 8px 14px;
    font-family: 'Assistant', Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--testo-light);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.g-tab:hover  { color: var(--azzurro); }
.g-tab.active { color: var(--azzurro); border-bottom-color: var(--azzurro); }

/* Ricerca */
.g-search-row {
    padding: 10px 16px 4px;
}

/* Sezione genitori nel form bambino */
.g-section-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--testo-light);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 20px 16px 6px;
}

.g-genitori-list {
    margin-top: 0;
}

.g-genitore-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bordo);
}
.g-genitore-item:last-child { border-bottom: none; }

/* Foto bambino nel form admin */
.g-foto-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: var(--bianco);
    border-bottom: 1px solid var(--bordo);
}

.g-foto-preview-box {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: #eef4f8;
    border: 3px solid var(--bordo);
    display: flex;
    align-items: center;
    justify-content: center;
}

.g-foto-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.g-foto-placeholder {
    font-size: 2.4rem;
    line-height: 1;
    color: #b0bec5;
}

.g-foto-actions {
    display: flex;
    gap: 8px;
}

/* Copertina argomento — quadrata */
.g-arg-foto-box {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    display: block;   /* override flex da g-foto-preview-box: evita height:100% ambiguo */
    overflow: hidden;
}
.g-arg-foto-box .g-foto-img {
    border-radius: 10px;
    display: block;
    width: 100%;
    height: 100%;
}
.g-arg-foto-placeholder {
    font-size: 2.4rem;
}

/* Thumbnail nella lista argomenti */
.g-arg-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: #eef4f8;
    border: 1px solid var(--bordo);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.g-arg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.g-arg-thumb span { font-size: 1.4rem; }

.g-foto-label {
    cursor: pointer;
}

/* Desktop: grid 2 colonne per le card home */
@media (min-width: 600px) {
    .g-grid { grid-template-columns: repeat(3, 1fr); }
    .g-form-card { margin: 12px 0 0; }
    .g-list { padding: 0; }
    .g-form-section { padding: 16px 0 0; }
    .g-search-row { padding: 10px 0 4px; }
    .g-tabs { padding: 0; }
    .g-section-label { padding: 20px 0 6px; }
}
.section-error { color: var(--errore); }

/* ── Presenze Staff ── */
.pr-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--bordo);
    position: sticky;
    top: 0;
    z-index: 10;
}
.pr-date-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.pr-nav-arr {
    width: 30px;
    height: 30px;
    background: none;
    border: 1px solid var(--bordo);
    border-radius: 6px;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--testo);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}
.pr-nav-arr:disabled { opacity: .3; cursor: default; }
.pr-nav-arr { touch-action: manipulation; }
.pr-date-label {
    min-width: 110px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}
.pr-toolbar select {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--bordo);
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: inherit;
    background: #fff;
}
.pr-mens-btn {
    background: none;
    border: 1px solid var(--azzurro);
    color: var(--azzurro-dark);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.pr-mens-btn:hover { background: #e3f2f9; }
.pr-mens-back {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--testo);
    cursor: pointer;
    vertical-align: middle;
    margin-right: 4px;
    padding: 0 4px 0 0;
}
.pr-mens-scroll { overflow-x: auto; }
.pr-mens-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.pr-mens-table th, .pr-mens-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--bordo);
    white-space: nowrap;
}
.pr-mens-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--testo-light);
    font-weight: 700;
}
.pr-mens-cl { color: var(--testo-light); font-size: 0.8125rem; }
.pr-mens-num { text-align: center; font-weight: 600; }
.pr-mens-si { color: #2e7d32; }
.pr-mens-no { color: #c62828; }
.pr-row {
    padding: 10px 16px;
    border-bottom: 1px solid var(--bordo);
}
.pr-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pr-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--azzurro);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.pr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pr-info { flex: 1; min-width: 0; }
.pr-nome { font-size: 0.875rem; font-weight: 600; }
.pr-classe { font-size: 0.75rem; color: var(--testo-light); }
.pr-toggle {
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    min-width: 96px;
    text-align: center;
}
.pr-toggle-nd  { background: #f0f0f0; color: #888; }
.pr-toggle-si  { background: #e8f5e9; color: #2e7d32; }
.pr-toggle-no  { background: #fde8e8; color: #c62828; }
.pr-toggle-gen { background: #fff3e0; color: #e65100; }
.pr-toggle:disabled { opacity: .6; cursor: default; }
.pr-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding-left: 46px;
    flex-wrap: wrap;
}
.pr-nota {
    font-size: 0.75rem;
    color: var(--testo-light);
    font-style: italic;
}
.pr-cert-link {
    font-size: 0.75rem;
    color: var(--azzurro);
    text-decoration: none;
    font-weight: 600;
}
.pr-cert-link:hover { text-decoration: underline; }
.pr-del-btn {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9375rem;
    padding: 0 2px;
    opacity: .5;
    flex-shrink: 0;
}
.pr-del-btn:hover { opacity: 1; }
.pr-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 2px 46px;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--testo-light);
}
.pr-confirm.hidden { display: none; }
.pr-confirm-si {
    padding: 4px 10px;
    background: #c62828;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
}
.pr-confirm-no {
    padding: 4px 10px;
    background: #f0f0f0;
    color: #555;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
}

/* ── Presenze: barra contatori ── */
.pr-contatori {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    flex-wrap: wrap;
}
.pr-cnt {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
}
.pr-cnt-si  { background: #e8f5e9; color: #2e7d32; }
.pr-cnt-no  { background: #fde8e8; color: #c62828; }
.pr-cnt-gen { background: #fff3e0; color: #e65100; }
.pr-cnt-nd  { background: #f0f0f0; color: #666; }
.pr-cnt-total {
    font-size: 1rem;
    font-weight: 700;
    color: var(--azzurro-dark);
    background: #e3f2f9;
    padding: 4px 12px;
    border-radius: 20px;
}

/* ============================================================
   LOG ACCESSI (admin)
   ============================================================ */
.log-filters {
    display: flex;
    gap: 8px;
    padding: 0 0 12px;
    flex-wrap: wrap;
}
.log-search {
    flex: 1;
    min-width: 160px;
    padding: 7px 10px;
    border: 1px solid var(--bordo);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
}
.log-esito-sel {
    padding: 7px 10px;
    border: 1px solid var(--bordo);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
    background: var(--bianco);
}
.log-info {
    font-size: 0.75rem;
    color: var(--testo-light);
    margin-bottom: 8px;
}
.log-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--bordo);
    border-radius: 8px;
}
.log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}
.log-table th {
    background: var(--sfondo);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 0.6875rem;
    color: var(--testo-light);
    border-bottom: 1px solid var(--bordo);
    white-space: nowrap;
}
.log-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--sfondo);
    vertical-align: top;
}
.log-table tr:last-child td { border-bottom: none; }
.log-ua { color: var(--testo-light); max-width: 220px; word-break: break-all; }
.log-esito { padding: 2px 7px; border-radius: 10px; font-size: 0.6875rem; font-weight: 600; }
.log-ok    { background: #e8f5e9; color: #2e7d32; }
.log-fail  { background: #fde8e8; color: #c62828; }
.log-block { background: #fff3e0; color: #e65100; }
.log-nav   { background: #f0f0f0; color: #666; }
.log-sez   { font-size: 0.6875rem; font-weight: 600; color: var(--azzurro); }
.log-badge { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 0.625rem; font-weight: 700; margin: 1px 1px 0 0; }
/* Dispositivi utenti */
.dv-table th, .dv-table td { white-space: nowrap; }
.dv-email { color: var(--testo-light); font-size: 0.8125rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.dv-dt { color: var(--testo-light); font-size: 0.75rem; }
.dv-nd { color: #bbb; }
.dv-row-disabled td { opacity: 0.45; }
.dv-badge { display: inline-block; padding: 2px 7px; border-radius: 8px; font-size: 0.6875rem; font-weight: 600; }
.dv-ruolo-g { background: #e8f5e9; color: #2e7d32; }
.dv-ruolo-i { background: #e3f2fd; color: #1565c0; }
.dv-ruolo-a { background: #fff3e0; color: #e65100; }
.dv-ruolo-ge { background: #e0f2f1; color: #00695c; }
.dv-os-ios     { background: #f3e5f5; color: #6a1b9a; }
.dv-os-android { background: #e8f5e9; color: #2e7d32; }
.dv-os-win     { background: #e3f2fd; color: #1565c0; }
.dv-os-mac     { background: #fafafa; color: #444; border: 1px solid #ddd; }
.dv-os-linux   { background: #fff8e1; color: #f57f17; }
.dv-os-other   { background: #f0f0f0; color: #888; }
.log-pwa-on  { background: #e3f0fd; color: #1565c0; }
.log-pwa-off { background: #f0f0f0; color: #888; }
.log-notif-on  { background: #e8f5e9; color: #2e7d32; }
.log-notif-off { background: #fde8e8; color: #c62828; }
.log-notif-def { background: #fff8e1; color: #f57f17; }
.dv-azioni { white-space: nowrap; }
.dv-btn-email { padding: 3px 10px; border: 1px solid #0294bf; border-radius: 6px; background: #fff; color: #0294bf; font-size: 0.75rem; cursor: pointer; }
.dv-btn-email:hover:not(:disabled) { background: #e8f6fb; }
.dv-btn-email:disabled { opacity: 0.5; cursor: default; }
.log-empty { text-align: center; color: var(--testo-light); padding: 20px; }
.log-pager {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    justify-content: flex-end;
}

/* ============================================================
   PROMOZIONE MASSIVA
   ============================================================ */
.g-btn-promo { background: var(--azzurro); color: #fff; margin-left: 6px; }
.g-btn-promo:hover { background: #2a6fc4; }
.g-btn-danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.g-btn-danger:hover { background: #a93226; }

.g-promo-box { padding: 16px; max-width: 640px; }
.g-promo-intro { margin-bottom: 6px; }
.g-promo-note { font-size: 0.85rem; color: var(--testo-light); margin-bottom: 18px; line-height: 1.5; }
.g-promo-preview { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bordo); }
.g-promo-riepilogo { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.g-promo-stat { padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600;
                background: #e8f8e8; color: #2e7d32; border: 1px solid #c3e6c3; }
.g-promo-stat-out  { background: #fef3e2; color: #b45309; border-color: #f9d89a; }
.g-promo-stat-warn { background: #fde8e8; color: #c62828; border-color: #f5b7b7; }
.g-promo-avvisi { background: #fff8e1; border: 1px solid #ffe082; border-radius: 8px;
                  padding: 10px 14px; margin-bottom: 14px; font-size: 0.87rem; }
.g-promo-avvisi ul { margin: 6px 0 0 18px; padding: 0; }
.g-promo-avvisi li { margin-bottom: 4px; }
.g-promo-details { margin-bottom: 10px; font-size: 0.87rem; }
.g-promo-details summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.g-promo-lista { margin: 6px 0 0 18px; padding: 0; }
.g-promo-lista li { margin-bottom: 3px; }

/* ============================================================
   PUSH NOTIFICATION BANNER
   ============================================================ */
.push-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #e3f2fd;
    border-left: 4px solid var(--azzurro);
    padding: 12px 16px;
    border-radius: 8px;
    margin: 0 0 12px;
    flex-wrap: wrap;
}
.push-banner.hidden { display: none; }
.push-banner-text {
    flex: 1;
    font-size: 0.875rem;
    min-width: 150px;
    color: var(--testo);
}
.push-banner-btn {
    padding: 7px 14px;
    background: var(--azzurro);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.push-banner-btn:hover { background: var(--azzurro-dark); }
.push-banner-btn:disabled { opacity: .6; cursor: default; }
.push-banner-close {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: var(--testo-light);
    padding: 2px 4px;
    line-height: 1;
    flex-shrink: 0;
}

/* ============================================================
   DIARIO
   ============================================================ */

/* ── Layout split (desktop) ── */
.diar-split {
    display: flex;
    height: 100%;
    overflow: hidden;
}
.diar-panel-left {
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid var(--bordo);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.diar-panel-right {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* section-scroll senza padding e senza scroll quando contiene il split */
@media (hover: hover) and (min-width: 1025px) {
    #section-diario .section-scroll:has(.diar-split) {
        overflow: hidden;
        padding: 0;
    }
}
@media (hover: hover) and (min-width: 1025px) {
    #section-presenze .section-scroll {
        padding: 0;
    }
}
@media (max-width: 1024px), (hover: none) {
    #section-presenze .section-scroll {
        padding: 0;
    }
}

/* Mobile: pannelli in colonna, section-scroll scorre */
@media (max-width: 1024px), (hover: none) {
    .diar-split      { display: block; height: auto; overflow: visible; }
    .diar-panel-left,
    .diar-panel-right { width: 100%; overflow-y: visible; }
    .diar-panel-left.hidden,
    .diar-panel-right.hidden { display: none; }
    #section-diario .section-scroll:has(.diar-split) { padding: 0; }
}

/* ── Toolbar livelli ── */
.diar-toolbar {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--bordo);
    flex-wrap: wrap;
    background: var(--bianco);
    position: sticky;
    top: 0;
    z-index: 2;
}
.diar-tab {
    padding: 5px 13px;
    border: 1px solid var(--bordo);
    border-radius: 20px;
    background: var(--bianco);
    font-family: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--testo);
    transition: background .15s;
}
.diar-tab:hover { background: var(--sfondo); }
.diar-tab.active {
    background: var(--azzurro);
    color: #fff;
    border-color: var(--azzurro);
}

/* ── Lista bambini ── */
.diar-bambino-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--bordo);
    cursor: pointer;
    transition: background .12s;
    border-left: 3px solid transparent;
}
.diar-bambino-item:hover { background: #f5fbff; }
.diar-bambino-item.active {
    background: #e8f4fb;
    border-left-color: var(--azzurro);
}
.diar-bambino-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--azzurro);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.diar-bambino-av img { width: 100%; height: 100%; object-fit: cover; }
.diar-bambino-nome { font-weight: 600; font-size: 0.875rem; }
.diar-bambino-cl   { font-size: 0.75rem; color: var(--testo-light); margin-top: 2px; }

/* ── Empty state (pannello destro vuoto) ── */
.diar-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    height: 100%;
    color: var(--testo-light);
    gap: 14px;
    font-size: 0.9375rem;
}
.diar-empty-icon { font-size: 3em; }

/* ── Header dettaglio bambino ── */
.diar-det-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bordo);
    background: var(--bianco);
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
}
.diar-back-btn {
    background: none;
    border: none;
    font-size: 1.375rem;
    cursor: pointer;
    color: var(--azzurro);
    padding: 0 4px;
    line-height: 1;
}
.diar-det-titolo { font-weight: 700; font-size: 1rem; }
.diar-det-cl {
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--testo-light);
    margin-left: 8px;
}

/* ── Form nuova nota ── */
.diar-form-nuova {
    padding: 14px 16px;
    border-bottom: 2px solid var(--bordo);
    background: #fafcff;
    flex-shrink: 0;
}
.diar-textarea {
    width: 100%;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
    color: var(--testo);
    background: var(--bianco);
    transition: border-color .15s;
}
.diar-textarea:focus { outline: none; border-color: var(--azzurro); }
.diar-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 8px;
}
.diar-push-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--testo-light);
    cursor: pointer;
    user-select: none;
}
.diar-push-label input { cursor: pointer; }
.diar-btn-salva {
    padding: 8px 20px;
    background: var(--azzurro);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.diar-btn-salva:hover    { background: var(--azzurro-dark); }
.diar-btn-salva:disabled { opacity: .6; cursor: default; }
.diar-char-count { font-size: 0.6875rem; color: var(--testo-light); text-align: right; margin-top: 4px; }
.diar-char-warn  { color: #e67e22; font-weight: 600; }
.diar-msg { font-size: 0.8125rem; margin-top: 8px; min-height: 18px; }
.diar-msg.ok  { color: var(--successo); }
.diar-msg.err { color: var(--errore); }

/* ── Lista note ── */
.diar-note-lista { padding: 16px; flex: 1; }

.diar-nota-card {
    border: 1px solid var(--bordo);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--bianco);
    transition: background 1s ease, border-color 1s ease;
}
.diar-nota-nuova {
    background: #eaf4ff;
    border-color: var(--azzurro);
}
.diar-nota-nuova .diar-nota-data {
    font-size: 0.8125rem;
}
.diar-nota-data {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--azzurro);
    text-transform: capitalize;
    margin-bottom: 8px;
}
.diar-nota-testo {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--testo);
}
.diar-nota-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}
.diar-nota-autore { font-size: 0.75rem; color: var(--testo-light); }
.diar-nota-del {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    opacity: .35;
    padding: 2px 4px;
    transition: opacity .15s;
}
.diar-nota-del:hover { opacity: 1; }

/* ── Vista genitore ── */
.diar-genitore { max-width: 780px; margin: 0 auto; width: 100%; }
.diar-genitore-title {
    font-family: 'Amatic SC', cursive;
    font-size: 2em;
    color: var(--azzurro);
    margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════════════
   QUADERNO — STAFF
══════════════════════════════════════════════════════════════ */

/* Split layout (desktop) */
.quad-split {
    display: flex;
    height: 100%;
    overflow: hidden;
}
.quad-panel-left {
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid var(--bordo);
    overflow-y: auto;
}
.quad-panel-right {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
}

@media (hover: hover) and (min-width: 1025px) {
    #section-quaderno .section-scroll:has(.quad-split) {
        overflow: hidden;
        padding: 0;
    }
}
@media (max-width: 1024px), (hover: none) {
    .quad-split        { display: block; height: auto; overflow: visible; }
    .quad-panel-left,
    .quad-panel-right  { width: 100%; overflow-y: visible; }
    .quad-panel-left.hidden,
    .quad-panel-right.hidden { display: none; }
    #section-quaderno .section-scroll:has(.quad-split) { padding: 0; }
}

/* Lista argomenti (pannello sinistro) */
.quad-arg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--bordo);
    transition: background .15s;
}
.quad-arg-item:hover   { background: var(--sfondo); }
.quad-arg-item.quad-arg-active { background: #e8f6fb; }
.quad-list-thumb {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--bordo);
}
.quad-list-thumb-ph {
    background: #eef4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.quad-arg-info { flex: 1; min-width: 0; }
.quad-arg-title {
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--testo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quad-arg-sub  { font-size: 0.78rem; color: var(--testo-light); }

/* Header argomento selezionato (pannello destro) */
.quad-detail-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bordo);
    background: var(--bianco);
}
.quad-detail-cover {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--bordo);
    display: block;
}
.quad-detail-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--testo);
}
.quad-detail-desc { font-size: 0.83rem; color: var(--testo-light); margin-top: 2px; }

/* Bambino selezionato — label nel pannello argomenti */
.quad-bambino-label {
    display: block;
    padding: 10px 16px 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--azzurro);
}
/* Contatore foto per argomento */
.quad-nfiles { font-size: 0.6875rem; color: var(--testo-light); }
.quad-nfiles-zero { color: #bbb; }
/* Lista argomenti nel pannello destra */
.quad-arg-lista { padding: 8px 0; }

/* Lista bambini (vecchio layout, mantenuto per compatibilità) */
.quad-bambini-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 14px; }

.quad-notifica-row {
    padding: 12px 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.quad-notifica-btn {
    background: var(--sfondo);
    border: 1.5px solid var(--bordo);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--testo);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.quad-notifica-btn:hover    { background: #e8f6fb; border-color: var(--azzurro); color: var(--azzurro); }
.quad-notifica-btn:disabled { opacity: .5; cursor: default; }
.quad-notifica-msg { font-size: 0.8125rem; min-height: 16px; }
.quad-notifica-msg.ok  { color: var(--successo); }
.quad-notifica-msg.err { color: var(--errore); }
.quad-bambino {
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    overflow: hidden;
}
.quad-b-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bordo);
}
.quad-b-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--azzurro);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.quad-b-av img { width: 100%; height: 100%; object-fit: cover; }
.quad-b-nome { flex: 1; font-size: 0.9rem; font-weight: 600; color: var(--testo); }
.quad-upload-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--azzurro);
    color: white;
    font-size: 1.3rem;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    padding-bottom: 1px;
    transition: background .15s;
}
.quad-upload-btn:hover { background: var(--azzurro-dark, #0278a0); }

/* Strip foto */
.quad-file-strip {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    overflow-x: auto;
    min-height: 80px;
    align-items: center;
}
.quad-strip-empty { font-size: 0.82rem; color: var(--testo-light); }
.quad-file-thumb {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--bordo);
    cursor: pointer;
}
.quad-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quad-file-pdf-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: #f0f0f0;
}
.quad-file-del {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
    line-height: 1;
}
.quad-file-thumb:hover .quad-file-del { opacity: 1; }
/* su touch: sempre visibile */
@media (hover: none) { .quad-file-del { opacity: 1; } }

.quad-file-uploading { opacity: .6; }
.quad-upload-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    color: white;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile — back button e stato vuoto */
.quad-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--azzurro);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    padding: 12px 16px;
}
.quad-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 10px;
    color: var(--testo-light);
    font-size: 0.9rem;
}
.quad-empty-icon { font-size: 2.5rem; }
.quad-empty-msg  { padding: 20px 16px; color: var(--testo-light); font-size: 0.9rem; }
.quad-mobile-detail { padding-bottom: 24px; }

/* ══════════════════════════════════════════════════════════════
   QUADERNO — GENITORE
══════════════════════════════════════════════════════════════ */

.qgen-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 900px;
    width: 100%;
}

.qgen-card {
    background: var(--bianco);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    border-left: 4px solid #f39c12;
}
@media (min-width: 1025px) and (hover: hover) {
    .qgen-card { padding: 20px; }
    .qgen-card:hover { box-shadow: 0 5px 18px rgba(0,0,0,.09); }
}

.qgen-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.qgen-cover {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}
.qgen-cover-ph {
    background: #fef5e7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}
.qgen-card-info { flex: 1; min-width: 0; }
.qgen-card-title {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--testo);
    margin-bottom: 3px;
}
.qgen-card-sub {
    font-size: 0.78rem;
    color: var(--testo-light);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.qgen-nuovi-badge {
    font-size: 0.7rem;
    background: var(--azzurro);
    color: white;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.qgen-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.qgen-strip::-webkit-scrollbar { display: none; }
.qgen-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform .12s;
}
.qgen-thumb:hover { transform: scale(1.06); }
@media (min-width: 1025px) and (hover: hover) {
    .qgen-thumb { width: 82px; height: 82px; border-radius: 12px; }
}

/* Carosello */
.qgen-carosello {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.92);
    display: flex;
    flex-direction: column;
}
.qgen-car-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    flex-shrink: 0;
}
.qgen-car-counter {
    color: rgba(255,255,255,.6);
    font-size: 0.87rem;
}
.qgen-car-actions { display: flex; gap: 10px; }
.qgen-car-btn {
    background: rgba(255,255,255,.15);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.qgen-car-btn:hover { background: rgba(255,255,255,.28); }
.qgen-car-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.qgen-car-foto {
    max-width: calc(100% - 112px);
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    border-radius: 4px;
}
@media (max-width: 600px) {
    .qgen-car-foto { max-width: 100%; }
}
.qgen-car-pdf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: calc(100% - 112px);
    padding: 0 16px;
    color: #fff;
    text-decoration: none;
    text-align: center;
}
@media (max-width: 600px) {
    .qgen-car-pdf { max-width: 100%; }
}
.qgen-car-pdf-thumb {
    max-width: 220px;
    max-height: 40vh;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.qgen-car-pdf-icon { font-size: 3rem; }
.qgen-car-pdf-nome {
    font-size: 0.9rem;
    color: rgba(255,255,255,.75);
    word-break: break-word;
}
.qgen-car-pdf-open {
    background: rgba(255,255,255,.15);
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 1rem;
}
.qgen-car-pdf:hover .qgen-car-pdf-open { background: rgba(255,255,255,.28); }
.qgen-car-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.45);
    box-shadow: 0 1px 6px rgba(0,0,0,.5);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    color: white;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.qgen-car-nav.prev { left: 12px; }
.qgen-car-nav.next { right: 12px; }
.qgen-car-nav:disabled { opacity: .2; pointer-events: none; }
.qgen-car-nav:hover:not(:disabled) { background: rgba(0,0,0,.6); }
@media (max-width: 480px) {
    .qgen-car-nav { width: 36px; height: 36px; font-size: 1.3rem; }
    .qgen-car-nav.prev { left: 6px; }
    .qgen-car-nav.next { right: 6px; }
}
.qgen-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 14px;
    flex-shrink: 0;
}
.qgen-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    transition: background .2s;
}
.qgen-dot.active { background: white; }

/* ══════════════════════════════════════════════════════════════
   ARMADIETTO — STAFF
══════════════════════════════════════════════════════════════ */

/* Accordion inline per bambino */
/* ── Layout split (desktop) ── */
.arm-split {
    display: flex;
    height: 100%;
    overflow: hidden;
}
.arm-panel-left {
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid var(--bordo);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.arm-panel-right {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

@media (hover: hover) and (min-width: 1025px) {
    #section-armadietto .section-scroll:has(.arm-split) {
        overflow: hidden;
        padding: 0;
    }
}
@media (max-width: 1024px), (hover: none) {
    .arm-split { display: block; height: auto; overflow: visible; }
    .arm-panel-left,
    .arm-panel-right { width: 100%; overflow-y: visible; }
    .arm-panel-left.hidden,
    .arm-panel-right.hidden { display: none; }
    #section-armadietto .section-scroll:has(.arm-split) { padding: 0; }
}

/* Intestazione pannello destro */
.arm-det-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--bordo);
    flex-shrink: 0;
    background: #fff;
}
.arm-det-titolo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--testo);
}
.arm-det-cl {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--testo-light);
    margin-left: 6px;
}
.arm-back-btn {
    background: none;
    border: none;
    font-size: 1.375rem;
    color: var(--azzurro);
    cursor: pointer;
    padding: 0 6px 0 0;
    line-height: 1;
}
.arm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 10px;
    color: var(--testo-light);
    font-size: 0.9375rem;
}
.arm-empty-icon { font-size: 2.5rem; }

/* Toolbar filtro classe */
.arm-toolbar {
    display: flex;
    gap: 4px;
    padding: 10px 12px 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.arm-tab {
    border: none;
    background: none;
    padding: 5px 12px;
    border-radius: 14px;
    font-family: 'Assistant', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--testo-light);
    cursor: pointer;
    transition: all .15s;
}
.arm-tab:hover  { background: var(--sfondo); }
.arm-tab.active { background: var(--azzurro); color: white; }

/* Lista bambini */
.arm-lista { flex: 1; overflow-y: auto; }
.arm-bambino-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--bordo);
    transition: background .12s;
    border-left: 3px solid transparent;
}
.arm-bambino-item:hover  { background: #f5fbff; }
.arm-bambino-item.active { background: #e8f6fc; border-left-color: var(--azzurro); }
.arm-bambino-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--azzurro);
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.arm-bambino-av img { width: 100%; height: 100%; object-fit: cover; }
.arm-bambino-nome { font-weight: 600; font-size: 0.875rem; }
.arm-bambino-cl   { font-size: 0.75rem; color: var(--testo-light); margin-top: 2px; }
.arm-bambino-info { flex: 1; }
.arm-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
.arm-badge-warn  { background: #fff3cd; color: #856404; }
.arm-badge-ok    { background: #d4edda; color: #155724; }
.arm-badge-empty { background: var(--sfondo); color: var(--testo-light); }

/* Empty state */
.arm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--testo-light);
    gap: 10px;
    font-size: 0.875rem;
}
.arm-empty-icon { font-size: 3em; }


/* Lista oggetti */
.arm-oggetti-lista {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.arm-obj {
    border-bottom: 1px solid var(--bordo);
}
.arm-obj-main {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}
.arm-stato {
    font-size: 1.4rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform .1s;
}
.arm-stato:active   { transform: scale(.85); }
.arm-stato:disabled { opacity: .5; cursor: default; }
.arm-obj-body  { flex: 1; min-width: 0; }
.arm-obj-nome  { font-weight: 600; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arm-obj-nota  {
    display: block;
    width: 100%;
    margin-top: 4px;
    border: none;
    border-bottom: 1px solid var(--bordo);
    background: transparent;
    font-family: 'Assistant', sans-serif;
    font-size: 0.75rem;
    color: var(--testo-light);
    padding: 2px 0;
    outline: none;
}
.arm-obj-nota:focus { border-bottom-color: var(--azzurro); color: var(--testo); }
.arm-obj-data { font-size: 0.6875rem; color: var(--testo-light); white-space: nowrap; flex-shrink: 0; }
.arm-obj-del  {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: .3;
    padding: 4px;
    transition: opacity .15s;
    flex-shrink: 0;
}
.arm-obj-del:hover    { opacity: .9; }
.arm-obj-del:disabled { opacity: .2; cursor: default; }

/* Footer dettaglio */
.arm-det-footer {
    border-top: 1px solid var(--bordo);
    padding: 12px 14px;
    flex-shrink: 0;
}
.arm-det-actions {
    display: flex;
    gap: 8px;
}
.arm-btn-add {
    flex: 1;
    padding: 9px 12px;
    border: 1px dashed var(--azzurro);
    border-radius: 8px;
    background: none;
    color: var(--azzurro);
    font-family: 'Assistant', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.arm-btn-add:hover { background: #f0faff; }
.arm-btn-push {
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    background: var(--sfondo);
    color: var(--testo);
    font-family: 'Assistant', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.arm-btn-push:hover    { background: var(--bordo); }
.arm-btn-push:disabled { opacity: .6; cursor: default; }

/* Form aggiungi oggetto */
.arm-form-aggiungi {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.arm-input-aggiungi {
    flex: 1;
    min-width: 120px;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: 'Assistant', sans-serif;
    font-size: 0.8125rem;
    outline: none;
}
.arm-input-aggiungi:focus { border-color: var(--azzurro); }
.arm-btn-agg-ok {
    padding: 8px 14px;
    background: var(--azzurro);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Assistant', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}
.arm-btn-agg-ok:disabled { opacity: .6; cursor: default; }
.arm-btn-agg-cancel {
    padding: 8px 10px;
    background: none;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    font-size: 0.8125rem;
    cursor: pointer;
}
.arm-msg { width: 100%; font-size: 0.75rem; min-height: 16px; }
.arm-msg.err { color: var(--errore); }
.arm-msg.ok  { color: var(--successo); }

/* ── Armadietto Genitore ── */
.arm-genitore { max-width: 780px; margin: 0 auto; width: 100%; }
.arm-gen-title {
    font-family: 'Amatic SC', cursive;
    font-size: 2em;
    color: var(--azzurro);
    margin-bottom: 16px;
}
.arm-gen-obj {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 6px;
    border-bottom: 1px solid var(--bordo);
    border-left: 3px solid transparent;
    transition: background 1s ease, border-color 1s ease;
}
.arm-gen-nuova {
    background: #eaf4ff;
    border-left-color: var(--azzurro);
}
.arm-gen-stato { font-size: 1.3rem; flex-shrink: 0; }
.arm-gen-body  { flex: 1; }
.arm-gen-nome  { font-weight: 600; font-size: 0.9375rem; }
.arm-gen-nota  { font-size: 0.8125rem; color: var(--testo-light); margin-top: 2px; }
.arm-gen-data  { font-size: 0.75rem; color: var(--testo-light); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   COMUNICAZIONI
══════════════════════════════════════════════════════════════ */

/* ── Split staff ── */
.com-split {
    display: flex;
    height: 100%;
    overflow: hidden;
}
.com-panel-left {
    width: 300px;
    border-right: 1px solid var(--bordo);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}
.com-panel-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
#section-comunicazioni .section-scroll:has(.com-split) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
@media (hover: hover) and (min-width: 1025px) {
    #section-comunicazioni .section-scroll:has(.com-split) {
        padding: 0;
    }
}
@media (hover: none), (max-width: 1024px) {
    .com-split      { display: block; height: auto; overflow: visible; }
    .com-panel-left,
    .com-panel-right { width: 100%; overflow-y: visible; }
    .com-panel-left.hidden,
    .com-panel-right.hidden { display: none; }
    #section-comunicazioni .section-scroll:has(.com-split) {
        overflow: auto;
        display: block;
        padding: 0;
    }
}

/* ── Gestione admin: padding desktop ── */
@media (hover: hover) and (min-width: 1025px) {
    #section-gestione .section-scroll { padding: 0 32px; }
}

/* ── Armadietto staff: section-scroll come flex column (allineato alle altre sezioni) ── */
#section-armadietto .section-scroll:has(.arm-split) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
@media (hover: none), (max-width: 1024px) {
    #section-armadietto .section-scroll:has(.arm-split) {
        overflow-y: auto;
        display: block;
    }
}

/* ── Pannello sinistro lista ── */
.com-panel-left-title,
.com-split-list-title {
    font-size: 1.0625rem;
    font-weight: 700;
    padding: 16px;
    border-bottom: 1px solid var(--bordo);
    flex-shrink: 0;
}
.com-lista-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

/* ── Item lista comunicazioni (staff) ── */
.com-item {
    padding: 14px 16px;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    margin-bottom: 10px;
    background: var(--bianco);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.com-item:hover  { background: #f5fbff; border-color: #b3d9f0; }
.com-item.active { background: #e8f6fb; border-color: #0294bf; }
.com-title   { font-size: 0.875rem; font-weight: 600; color: var(--testo); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.com-preview { font-size: 0.75rem; color: var(--testo-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.com-meta    { display: flex; align-items: center; gap: 8px; font-size: 0.6875rem; color: #99aabb; flex-wrap: wrap; }

.com-badge         { background: #e8f6fb; color: #0294bf; padding: 2px 7px; border-radius: 10px; font-size: 0.6875rem; font-weight: 600; }
.com-badge.classe  { background: #f0f8e8; color: #61a229; }
.com-badge.bambino { background: #fff3e8; color: #e88a29; }
.com-badge.scuola  { background: #f1ebfa; color: #7b4bb7; }

/* ── Messaggio del genitore alla scuola ── */
.com-scrivi-btn {
    display: block;
    margin: 10px 16px;
    padding: 9px 14px;
    background: var(--azzurro);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}
.com-scrivi-btn:hover { background: var(--azzurro-dark); }
.diar-genitore-title + .com-scrivi-btn { margin: 0 0 12px; }
.com-scuola-stato {
    font-size: 0.8125rem;
    color: var(--testo-light);
    background: var(--bianco);
    border-radius: 8px;
    padding: 8px 12px;
}
.com-scuola-stato.letta { color: var(--successo); font-weight: 600; }
.com-scuola-nota {
    font-size: 0.8125rem;
    color: var(--testo);
    background: #e3f2fd;
    border-left: 4px solid var(--azzurro);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 12px;
}
.com-riguarda { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.875rem; }
.com-riguarda label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ── FAB nuova comunicazione ── */
.com-fab {
    margin: 12px 16px 16px auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--azzurro);
    color: white;
    border: none;
    font-size: 1.375rem;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(2,148,191,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.com-fab:hover { background: var(--azzurro-dark, #0278a0); }

/* ── Pannello destro (detail / form) ── */
.com-detail-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.com-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--testo-light);
    gap: 8px;
    padding: 32px;
    text-align: center;
}
.com-empty-icon { font-size: 3em; }

.com-right-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--testo);
    line-height: 1.3;
}
.com-detail-meta {
    font-size: 0.75rem;
    color: var(--testo-light);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.com-detail-corpo {
    font-size: 0.875rem;
    color: var(--testo);
    line-height: 1.65;
    background: var(--bianco);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.com-detail-allegato {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--azzurro);
    text-decoration: none;
    background: #f0f8fb;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 500;
}
.com-detail-allegato:hover { background: #e4f2f8; }

.com-detail-actions { display: flex; gap: 8px; }
.com-detail-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background .15s;
}
.com-detail-btn.modifica { background: var(--sfondo); color: var(--testo); }
.com-detail-btn.modifica:hover { background: #e4eaf0; }
.com-detail-btn.elimina  { background: #fff0f0; color: #cc3333; }
.com-detail-btn.elimina:hover  { background: #ffe0e0; }

/* ── Thread chat ── */
.com-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}
.com-thread-empty { font-size: 0.8125rem; color: var(--testo-light); text-align: center; padding: 8px 0; }
.cm-left  { display: flex; flex-direction: column; align-items: flex-start; }
.cm-right { display: flex; flex-direction: column; align-items: flex-end; }
.cm-author { font-size: 0.6875rem; color: #aabbcc; margin: 0 4px 2px; }
.cm-bubble-l {
    background: var(--bianco);
    border-radius: 4px 16px 16px 16px;
    padding: 9px 13px;
    max-width: 80%;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    font-size: 0.875rem;
    color: var(--testo);
    line-height: 1.45;
}
.cm-bubble-r {
    background: var(--azzurro);
    border-radius: 16px 4px 16px 16px;
    padding: 9px 13px;
    max-width: 80%;
    font-size: 0.875rem;
    color: white;
    line-height: 1.45;
}
.cm-time { font-size: 0.625rem; color: #c0cad8; margin: 2px 4px 0; }
.cm-msg-stato { color: var(--testo-light); }
.cm-msg-stato.cm-msg-letto { color: var(--successo); font-weight: 600; }

/* ── Chi ha letto (staff) ── */
.com-letture {
    background: var(--bianco);
    border-radius: 12px;
    padding: 10px 14px;
    margin: 12px 0;
    font-size: 0.8125rem;
}
.com-letture summary { cursor: pointer; font-weight: 600; color: var(--testo); }
.com-lett-bambino { padding: 8px 0; border-bottom: 1px solid var(--bordo); }
.com-lett-bambino:last-child { border-bottom: none; }
.com-lett-nome { font-weight: 600; color: var(--testo); }
.com-lett-bambino.letta .com-lett-nome { color: var(--successo); }
.com-lett-classe { font-weight: 400; color: var(--testo-light); font-size: 0.75rem; }
.com-lett-gen {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 2px 0 0 18px;
    flex-wrap: wrap;
    color: var(--testo-light);
}
.com-lett-gen.letta .com-lett-stato { color: var(--successo); font-weight: 600; }
.com-lett-stato { text-align: right; }
.com-lett-ultima { font-weight: 400; color: var(--testo-light); font-size: 0.75rem; }
.com-lett-canale { font-size: 0.75rem; }

/* ── Input risposta ── */
.com-reply-box {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    background: var(--bianco);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.com-reply-textarea {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Assistant', sans-serif;
    font-size: 0.875rem;
    color: var(--testo);
    resize: none;
    background: transparent;
    line-height: 1.4;
}
.com-reply-send {
    background: var(--azzurro);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.9375rem;
    color: white;
}
.com-reply-send:hover     { background: var(--azzurro-dark, #0278a0); }
.com-reply-send:disabled  { opacity: .5; cursor: default; }

/* ── Form comunicazione ── */
.com-form-msg { font-size: 0.8125rem; min-height: 18px; margin: 0 16px; }
.com-form-msg.ok  { color: var(--successo); }
.com-form-msg.err { color: var(--errore); }

/* ── Back button ── */
.com-detail-back-btn {
    background: none;
    border: none;
    font-size: 1.625rem;
    color: var(--azzurro);
    cursor: pointer;
    padding: 0 6px 0 0;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Lista messaggi genitore ── */
.msg-list { display: flex; flex-direction: column; }
.msg-item {
    padding: 14px 16px;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    margin-bottom: 12px;
    background: var(--bianco);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.msg-item:hover    { background: #f5fbff; border-color: #b3d9f0; }
.msg-item.selected { background: #e8f6fb; border-color: #b3d9f0; }
.msg-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--testo);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.msg-preview {
    font-size: 0.75rem;
    color: var(--testo-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.msg-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.6875rem;
    color: #99aabb;
}
.unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--azzurro);
    flex-shrink: 0;
    display: inline-block;
}
.com-new-badge {
    background: var(--azzurro);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    vertical-align: middle;
}

/* ── Split genitore desktop ── */
.com-split-g {
    display: flex;
    height: 100%;
    overflow: hidden;
}
.com-split-list {
    width: 340px;
    border-right: 1px solid var(--bordo);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}
.com-split-list-scroll { flex: 1; overflow-y: auto; }
.com-split-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
#section-comunicazioni .section-scroll:has(.com-split-g) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
@media (hover: none), (max-width: 1024px) {
    .com-split-g { display: block; height: auto; overflow: visible; }
    .com-split-list,
    .com-split-detail { width: 100%; overflow-y: visible; }
    #section-comunicazioni .section-scroll:has(.com-split-g) {
        overflow: auto;
        display: block;
    }
}

/* ── Turni di lavoro (Gestione) ── */
.tu-colore-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid rgba(0,0,0,0.18);
    margin-right: 4px;
}
.tu-colore-dot:hover { border-color: #555; }
.tu-colore-popover {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    padding: 8px;
    display: none;
    grid-template-columns: repeat(5, 26px);
    gap: 5px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.18);
}
.tu-colore-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    box-sizing: border-box;
}
.tu-colore-swatch:hover, .tu-colore-swatch.selezionato { border-color: #333; }

.tu-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
}
.tu-week-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.tu-toolbar #tu-esporta-msg { font-size: 0.8rem; }

#tu-grid-wrap, #tu-form-turno { margin: 0 16px 16px; }
#tu-form-turno { margin-top: 0; }

.tu-tabella-wrap, .tu-griglia-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.turni-grid {
    border-collapse: collapse;
    min-width: 600px;
    width: 100%;
    font-size: 0.85rem;
}
.turni-grid th, .turni-grid td {
    border: 1px solid var(--bordo);
    padding: 6px 8px;
    vertical-align: top;
}
.turni-grid thead th {
    background: var(--sfondo);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.turni-grid tbody td:first-child {
    white-space: nowrap;
    font-weight: 600;
    background: var(--sfondo);
}
.turno-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.8rem;
    margin: 2px 2px;
    white-space: nowrap;
}
.tu-edit-turno { cursor: pointer; }
.turno-chip .del-turno {
    cursor: pointer;
    color: #c00;
    font-weight: bold;
    line-height: 1;
    background: none;
    border: none;
    padding: 0 2px;
    font-size: 0.9rem;
}
.turno-chip .del-turno:hover { color: #900; }
.btn-add-turno {
    font-size: 0.78rem;
    padding: 2px 7px;
    border: 1px dashed #aaa;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    color: #555;
    margin-top: 4px;
    display: inline-block;
}
.btn-add-turno:hover { border-color: var(--azzurro); color: var(--azzurro); }

@media (min-width: 600px) {
    #tu-grid-wrap, #tu-form-turno { margin: 0 0 16px; }
    .tu-toolbar { padding: 10px 0; }
}

/* === Stato connessione (js/main.js: _netShowOffline / netToast) === */
/* La striscia è inserita subito dopo .app-header: nel layout flex del body spinge giù il contenuto */
.net-banner {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 0.9rem;
    line-height: 1.35;
    color: #fff;
    background: #3d3d3d;
    z-index: 9;
}
.net-banner.online { background: #1f7a4d; }
body > .net-banner:last-child { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; }
.net-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1100;
    max-width: calc(100% - 32px);
    width: max-content;
    box-sizing: border-box;
    padding: 11px 18px;
    border-radius: 8px;
    background: #b0141b;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
/* Sopra la bottom nav (60px) quando è visibile */
@media (hover: none), (max-width: 1024px) {
    .net-toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
.net-banner[hidden], .net-toast[hidden] { display: none; }

/* ── Gestione → Dispositivi utenti ── */
.dv-contenuto { padding: 14px 16px 0; }
.dv-nota { font-size: 0.8125rem; color: var(--testo-light); margin-bottom: 10px; }
.dv-riepilogo {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-left: 4px solid var(--azzurro);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}
.dv-riepilogo strong { color: var(--azzurro); font-size: 1.05rem; }
.dv-gruppo-titolo {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--testo-light);
    margin: 18px 0 8px;
}
.dv-utente {
    background: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.dv-utente-nome { font-weight: 700; font-size: 0.95rem; }
.dv-utente-nome .dv-email { font-weight: 400; margin-left: 6px; }
.dv-riga {
    font-size: 0.85rem;
    padding-top: 6px;
    margin-top: 6px;
    border-top: 1px solid var(--bordo);
}
.dv-device { font-weight: 600; }
.dv-stato { color: var(--testo-light); font-size: 0.8rem; margin-top: 1px; }
.dv-stato .dv-btn-email { margin-left: 6px; }
.dv-ok { color: var(--successo); font-weight: 600; }
.dv-attenzione { color: #9a6b00; font-weight: 600; }

/* ── Visualizzatore documenti (PDF e immagini, js: vsApri) ── */
/* z-index sopra il carosello del quaderno (1000), sotto banner/toast di rete (1100) */
.vs-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    background: #525659;
}
.vs-overlay.hidden, .vs-overlay .hidden { display: none; }

.vs-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left));
    background: var(--azzurro);
    color: var(--bianco);
    flex-shrink: 0;
}
.vs-titolo {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vs-azioni { display: flex; gap: 6px; flex-shrink: 0; }
.vs-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    color: var(--bianco);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.vs-btn:hover { background: rgba(255,255,255,0.28); }
.vs-chiudi { background: var(--bianco); color: var(--azzurro); font-weight: 700; }
.vs-chiudi:hover { background: var(--sfondo); }

.vs-corpo {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
}
/* Blocco (non flex): da ingrandita la pagina deve poter scorrere anche a sinistra */
.vs-pagina {
    margin: 0 auto 12px;
    background: var(--bianco);
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.vs-pagina canvas, .vs-pagina img { display: block; width: 100%; height: 100%; }

.vs-messaggio {
    margin: 40px auto;
    max-width: 420px;
    padding: 0 16px;
    text-align: center;
    color: var(--bianco);
}
.vs-messaggio.errore { color: #ffd2d4; }