body {
    background-color: #f0f4f4;
    min-height: 100vh;
}

/* -- Header pagina -- */
.page-header-san {
    background: #006666;
    padding: 1rem 0;
    margin-bottom: 2rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

    .page-header-san img.logo {
        height: 52px;
        width: auto;
    }

    .page-header-san .header-title {
        color: #fff;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: .03em;
        opacity: .9;
    }

    /* -- Footer pagina -- */
.page-footer-san {
    text-align: center;
    padding: 1.5rem 0;
    font-size: .8rem;
    color: #6c757d;
    border-top: 1px solid #dee2e6;
    margin-top: 1rem;
}

/* ================================================
   stili custom (senza master)
   ================================================ */

:root {
    --san-primary: #006666;
    --san-primary-label: #6c757d;
    --san-primary-input: #212529;
}

/* -- Card header personalizzato -- */
.card-header-san {
    background: var(--san-primary);
    color: #fff;
    border-radius: .375rem .375rem 0 0 !important;
    padding: 1rem 1.25rem;
}

    .card-header-san.secondary {
        background: #455a64;
    }

    .card-header-san.tertiary {
        background: #37474f;
    }

    .card-header-san .header-icon {
        background: rgba(255,255,255,.15);
        border-radius: 50%;
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: .6rem;
        font-size: 1rem;
    }

    /* -- Note obbligatorietà -- */
.req-note {
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    color: #6c757d;
    margin-bottom: 1.25rem;
}

    .req-note .req-star {
        color: #dc3545;
        font-weight: 700;
    }

    /* -- Label con asterisco obbligatorio -- */
.form-label.req::after {
    content: ' *';
    color: #dc3545;
    font-weight: 700;
}

/* -- Input group con icona -- */
.input-group-text {
    background: #f8f9fa;
    border-right: 0;
    color: var(--san-primary);
    border-top-left-radius: .35rem;
    border-bottom-left-radius: .35rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .form-control {
    border-left: 0;
}

    .input-group .form-control:focus {
        border-color: #ced4da;
        box-shadow: none;
    }

    /* -- Badge causale / avviso -- */
.causale-badge {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: .25rem;
    padding: .6rem 1rem;
    font-weight: 600;
    color: #856404;
}

/* -- Badge informativo generico -- */
.info-badge {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: .25rem;
    padding: .6rem 1rem;
    font-weight: 600;
    color: #856404;
}

/* -- Bottone Conferma -- */
.btn-conferma {
    background: var(--san-primary);
    border-color: var(--san-primary);
    color: #fff;
    padding: .6rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .2s, transform .1s;
}

    .btn-conferma:hover {
        background: #004d4d;
        border-color: #004d4d;
        color: #fff;
        transform: translateY(-1px);
    }

    .btn-conferma:active {
        transform: translateY(0);
    }

    /* -- Bottone Show Password -- */
.btn-ShowPassword {
    line-height: 16px !important;
}

/* -- Card affiancate – altezza uniforme -- */
.card.h-100 .card-body {
    display: flex;
    flex-direction: column;
}

/* -- Sesso picker -- */
.sesso-picker {
    display: flex;
    gap: .5rem;
}

.sesso-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    width: 80px;
    padding: .5rem .4rem;
    border: 2px solid #dee2e6;
    border-radius: .5rem;
    background: #fff;
    color: #6c757d;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, transform .1s;
    line-height: 1;
}

    .sesso-btn i {
        font-size: 1.4rem;
        line-height: 1;
    }

    .sesso-btn:hover {
        border-color: var(--san-primary);
        color: var(--san-primary);
        background: #f0fafa;
        transform: translateY(-1px);
    }

/*    .sesso-btn.active[data-value="M"] {
        border-color: #0d6efd;
        background: #e8f0fe;
        color: #0d6efd;
    }

    .sesso-btn.active[data-value="F"] {
        border-color: #d63384;
        background: #fde8f3;
        color: #d63384;
    }*/

    .sesso-btn.active[data-value="M"] {
        border-color: var(--san-primary);
        color: var(--san-primary);
        background: #f0fafa;
/*        transform: translateY(-1px);*/
    }

    .sesso-btn.active[data-value="F"] {
        border-color: var(--san-primary);
        color: var(--san-primary);
        background: #f0fafa;
/*        transform: translateY(-1px);*/
    }

    /* -- Sesso picker – stato readonly/disabled -- */
.sesso-picker.sesso-readonly {
    opacity: .6;
    pointer-events: none;
    cursor: not-allowed;
}

    .sesso-picker.sesso-readonly .sesso-btn {
        cursor: not-allowed;
    }

    /* -- form-select / form-select-sm --
   Backport da Bootstrap 5 per compatibilità */
.form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6e707e;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%235a5c69' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 8px 10px;
    border: 1px solid #d1d3e2;
    border-radius: .35rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

    .form-select:focus {
        border-color: #bac8f3;
        outline: 0;
        box-shadow: 0 0 0 .1rem rgba(255, 160, 0, 0.5);
    }

    .form-select:disabled {
        color: #858796;
        background-color: #eaecf4;
        pointer-events: none;
    }

.form-select-sm {
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    font-size: .875rem;
    height: calc(1.5em + .75rem);
}

/* -- Label riga form – colore e allineamento -- */
.col-form-label {
    color: var(--san-primary-label);
    font-size: .82rem;
    text-align: right;
}

@media (max-width: 575.98px) {
    .row .col-4.col-form-label {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        text-align: left;
        padding-bottom: .1rem;
    }

        .row .col-4.col-form-label + .col {
            flex: 0 0 100%;
            max-width: 100%;
        }
}

/* -- Input – testo più leggibile -- */
.form-control,
.form-select {
    color: var(--san-primary-input);
}

    .form-control:disabled,
    .form-control[readonly],
    .form-select:disabled {
        color: var(--san-primary-input);
    }

    /* -- Sezione separatore dentro card -- */
.card-section-title {
    font-size: .8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding-bottom: .35rem;
    border-bottom: 2px solid var(--san-primary);
    margin-bottom: .5rem;
    margin-top: .25rem;
}

/* -- App Tiles -- */
.app-tile {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 150px;
    border-radius: .75rem;
    cursor: pointer;
    background: #fff !important;
    border: 1px solid var(--san-primary) !important;
    color: #5a5c69;
    text-decoration: none;
    font-weight: 600;
    font-size: .82rem;
    padding: 1rem .75rem;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .app-tile:hover {
        transform: translateY(4px);
        box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
        color: #5a5c69;
        text-decoration: none;
    }

    .app-tile i {
        font-size: 2rem;
        line-height: 1;
        color: var(--san-primary) !important;
        margin-bottom: .5rem;
    }
/*  Pill picker  */
.pill-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .25rem 0;
}

.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border: 2px solid #dee2e6;
    border-radius: 2rem;
    background: #fff;
    color: #6c757d;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    white-space: nowrap;
}

    .pill-btn i {
        font-size: .9rem;
    }

    .pill-btn:hover {
        border-color: var(--san-primary);
        color: var(--san-primary);
        background: #f0fafa;
    }

    .pill-btn.active {
        border-color: var(--san-primary);
        background: var(--san-primary);
        color: #fff;
    }

/*  Privacy toggle  */
.privacy-box {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: .75rem 1rem;
    max-height: 120px;
    overflow-y: auto;
    font-size: .82rem;
    color: #495057;
    line-height: 1.5;
    margin-bottom: .75rem;
}

.privacy-accept-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    border: 2px solid #dee2e6;
    background: #fff;
    transition: border-color .15s, background .15s;
}

    .privacy-accept-row.accepted {
        border-color: var(--san-primary);
        background: #f0fafa;
    }

    .privacy-accept-row.refused {
        border-color: #dc3545;
        background: #fff5f5;
    }

.privacy-toggle-label {
    font-size: .85rem;
    font-weight: 600;
    color: #495057;
    flex: 1;
}

/* toggle switch */
.privacy-switch {
    position: relative;
    width: 52px;
    height: 26px;
    flex-shrink: 0;
}

    .privacy-switch input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

.privacy-slider {
    position: absolute;
    inset: 0;
    background: #dc3545;
    border-radius: 26px;
    cursor: pointer;
    transition: background .2s;
}

    .privacy-slider::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        left: 3px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
        transition: transform .2s;
    }

    .privacy-switch input:checked + .privacy-slider {
        background: var(--san-primary);
    }

    .privacy-switch input:checked + .privacy-slider::before {
        transform: translateX(26px);
    }

.privacy-status-text {
    font-size: .82rem;
    font-weight: 600;
    min-width: 75px;
    text-align: right;
}

/* -- Registrazione: lista bottoni grandi -- */
.reg-btn-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.reg-btn {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: #fff;
    border: 1px solid #d9e8e8;
    border-radius: .75rem;
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: #212529;
    transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}

    .reg-btn:hover {
        border-color: var(--san-primary);
        background: #f0fafa;
        color: #212529;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(0, 102, 102, .12) !important;
    }

    .reg-btn:active {
        transform: translateY(0);
    }

.reg-btn-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e6f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--san-primary);
    transition: background .15s;
}

.reg-btn:hover .reg-btn-icon {
    background: var(--san-primary);
    color: #fff;
}

.reg-btn-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.reg-btn-title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    color: #212529;
}

.reg-btn-sub {
    font-size: .82rem;
    color: #6c757d;
    line-height: 1.4;
}

.reg-btn-arrow {
    flex-shrink: 0;
    font-size: .95rem;
    color: #adb5bd;
    transition: color .15s, transform .15s;
}

.reg-btn:hover .reg-btn-arrow {
    color: var(--san-primary);
    transform: translateX(3px);
}

@media (max-width: 575.98px) {
    .reg-btn {
        padding: .9rem 1rem;
        gap: .85rem;
    }

    .reg-btn-icon {
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
    }

    .reg-btn-title {
        font-size: .92rem;
    }
}