/* Impronta, il design system di PharmaCare, sui pannelli Filament: lo stile
   di tutti i pannelli sta qui. Senza build, in CSS normale: le variabili del
   CSS compilato di Filament per i valori di base, le sue classi fi- (le
   classi "hook" che Filament mette apposta per personalizzare) per i
   ritocchi. Quando Filament cambia versione maggiore si ricontrollano le
   pagine, perche' qualche classe puo' cambiare nome. Le regole di Filament
   stanno in un @layer e quelle di questo file no, quindi vincono sempre, in
   qualunque ordine si carichino. I colori e il
   logo stanno in app/Filament/Impronta.php, perche' Filament li usa anche lato
   server per scegliere il contrasto dei bottoni. Valori da
   PharmaCare-srl/css/style.css, sezione 1. Un modulo cambia quello che gli
   serve nel suo file (public/css/incall.css). */

/* Onest servito dalla piattaforma, mai da una CDN: gli stessi due file
   variabili (400-900) del sito, che il browser scarica solo se servono.
   Impronta::apply() aggancia questo file come carattere del pannello. */
@font-face {
    font-family: 'Onest';
    src: url('../fonts/onest/onest-latin.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    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: 'Onest';
    src: url('../fonts/onest/onest-latin-ext.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
    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;
}

:root {
    /* Raggi: 6 px per bottoni, campi e menu (--radius-s), 10 px per sezioni,
       tabelle e finestre (--radius-m). */
    --radius-lg: 6px;
    --radius-xl: 10px;

    /* Pesi: 400 nel corpo, 600 nella UI, 900 nei titoli, con il salto minimo
       di 200 del sito. Il "medium" di Filament diventa 600, il "bold" 900. */
    --font-weight-medium: 600;
    --font-weight-bold: 900;
    --font-weight-extrabold: 900;

    /* Titoli col tracking negativo del sito. */
    --tracking-tight: -0.015em;

    /* Scala del testo: xs le etichette (--text-xs), sm la UI e le didascalie
       (--text-s), base il corpo, lg i titoli di card (--text-l), xl-3xl i
       titoli di pagina, piu' contenuti del sito perche' qui si lavora. */
    --text-xs: 0.74rem;
    --text-sm: 0.9rem;
    --text-base: 1rem;
    --text-lg: 1.2rem;
    --text-xl: 1.45rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.1rem;

    /* Movimento: --pace e --ease del sito. */
    --default-transition-duration: 180ms;
    --default-transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Il sottotitolo di una pagina, sotto il titolo: alla misura del corpo e non
   a quella dei titoli di card che Filament gli da', perche' e' una frase da
   leggere e non un secondo titolo (Andrea, 22 ottobre 2026). */
.fi-header-subheading {
    margin-top: 4px;
    font-size: var(--text-base);
    line-height: 1.5;
}

/* I badge restano a pillola: sono indicatori, non azioni (REGOLE.md, la
   pillola e' bocciata solo sulle azioni). */
.fi-badge {
    border-radius: 9999px;
}

/* Nessun testo centrato, nemmeno i loghi (Andrea, 15 ottobre 2026). Filament
   centra intestazione e logo delle pagine di accesso, registrazione e
   attivazione, gli stati vuoti e le finestre di conferma. Restano centrati
   solo i giorni del calendario e le cifre dei codici, che non sono testo da
   leggere, e le etichette della barra delle schede del telefono, come
   nell'app (.pc-tabbar, in fondo). */
.fi-simple-header {
    align-items: flex-start;
}

.fi-simple-header-heading,
.fi-simple-header-subheading,
.fi-logo {
    text-align: start;
}

.fi-empty-state-content,
.fi-ta-empty-state-content,
.fi-empty-state-text-ctn {
    justify-items: start;
    margin-inline: 0;
    text-align: start;
}

/* Gli stati vuoti senza icona: la X cerchiata che Filament mette sopra una
   tabella vuota sembrava un bottone per chiudere qualcosa (Andrea, 22
   ottobre 2026). Restano titolo e frase. */
.fi-empty-state-icon-bg,
.fi-ta-empty-state-icon-bg {
    display: none;
}

.fi-modal-header {
    align-items: flex-start;
    text-align: start;
}

/* Sul telefono le pagine semplici (accesso, registrazione, prenotazione,
   password dimenticata) sono bianche da cima a fondo e partono dall'alto: il
   riquadro centrato di Filament lasciava due fasce grigie vuote, sopra e
   sotto. */
@media (max-width: 39.999rem) {
    body:has(.fi-simple-layout) {
        background-color: var(--color-white);
    }

    .fi-simple-main-ctn {
        align-items: flex-start;
    }

    .fi-simple-main {
        margin-top: 16px;
        box-shadow: none;
    }
}

/* Le pagine di accesso divise in due (Andrea, 15 ottobre 2026 per InCall, 21
   ottobre 2026 per tutti i pannelli): a sinistra cos'e' il servizio
   (app/Filament/AccessAside.php), a destra il modulo di Filament. Le regole
   valgono solo dove c'e' la colonna (.pc-access) e da 900 px in su: sul
   telefono la colonna non si vede e la pagina resta quella di sempre. */
.pc-access {
    display: none;
}

@media (min-width: 900px) {
    /* A tutto schermo, ma col contenuto vicino al centro: il testo di
       sinistra si appoggia al bordo interno della sua meta', il modulo al
       bordo interno della sua, cosi' sugli schermi grandi non restano
       lontani. --pc-gap e' la distanza di ognuno dal centro. */
    .fi-simple-layout:has(.pc-access) {
        --pc-gap: clamp(48px, 5vw, 96px);
        --pc-text: 32rem;
        --pc-form: 26rem;

        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
        width: 100%;
        min-height: 100dvh;
        margin: 0;
        background: var(--color-white);
    }

    /* La colonna resta ferma mentre i moduli lunghi scorrono. */
    .pc-access {
        position: sticky;
        top: 0;
        align-self: start;
        height: 100dvh;
        display: flex;
        justify-content: flex-end;
        padding: 48px var(--pc-gap) 48px 48px;
        background: var(--primary-100);
    }

    .pc-access-inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 48px;
        width: min(100%, var(--pc-text));
    }

    .fi-simple-layout:has(.pc-access) .fi-simple-main-ctn {
        position: relative;
        justify-content: flex-start;
        align-items: center;
        padding: 96px 48px 48px var(--pc-gap);
    }

    .fi-simple-layout:has(.pc-access) .fi-simple-main {
        max-width: var(--pc-form);
        margin: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Il logo sta gia' nella colonna di sinistra. */
    .fi-simple-layout:has(.pc-access) .fi-simple-header .fi-logo {
        display: none;
    }

    /* "Non hai un account? Registrati" in alto, allineato al bordo destro
       del modulo. */
    .fi-simple-layout:has(.pc-access) .fi-simple-header-subheading {
        position: absolute;
        top: 32px;
        inset-inline-start: var(--pc-gap);
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        width: min(var(--pc-form), calc(100% - var(--pc-gap) - 48px));
        margin: 0;
        color: var(--gray-600);
    }
}

.pc-access-masse {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--primary-600);
    pointer-events: none;
}

.pc-access-masse svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pc-drift {
    transform-box: fill-box;
    animation: pc-drift 7s ease-in-out infinite alternate;
}

.pc-drift.pc-d2 {
    animation-duration: 9s;
    animation-delay: -4s;
}

@keyframes pc-drift {
    from {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    to {
        transform: translate(34px, -24px) rotate(2.5deg) scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-drift {
        animation: none;
    }
}

.pc-access-logo {
    width: 150px;
    height: auto;
}

.pc-access-title {
    font-size: var(--text-3xl);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--gray-950);
}

/* Il marcatore di Impronta: l'acido del sito (--accent-2), una parola sola. */
.pc-marker {
    --pc-marker: oklch(0.86 0.17 128);

    padding: 0 0.08em;
    background: linear-gradient(var(--pc-marker), var(--pc-marker)) no-repeat 0 86%;
    background-size: 100% 0.32em;
}

.pc-access-list {
    display: grid;
    gap: 14px;
    margin-top: 32px;
}

.pc-access-list li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.4;
    color: var(--gray-900);
}

.pc-access-check {
    width: 22px;
    height: 22px;
    color: var(--primary-600);
}

.pc-access-foot {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.pc-access-foot a {
    color: inherit;
    text-decoration: underline;
}

/* Il bottone secondario di Impronta (.btn-secondary del sito): contorno e
   testo nell'inchiostro, fondo trasparente, stessa taglia del primario. E'
   l'outlined grigio di Filament, che sul grigio non mette la classe del
   colore e disegna il contorno con un'ombra. */
.fi-btn.fi-outlined:not(.fi-color) {
    color: var(--gray-950);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--gray-950);
}

.fi-btn.fi-outlined:not(.fi-color):hover {
    background: color-mix(in oklch, var(--gray-950) 6%, transparent);
}

/* Un'azione dentro una frase ("Cambia numero"): testo sottolineato, non un
   bottone. */
.pc-link {
    color: var(--primary-600);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.pc-link:hover {
    color: var(--primary-700);
}

/* Il link accanto all'etichetta di un campo ("Hai dimenticato la password?"):
   piccolo e di peso normale, per non contendere l'attenzione al campo. */
.pc-link.pc-hint-link {
    font-size: var(--text-xs);
    font-weight: 400;
}

/* Il telefono dei pazienti (App\Filament\PhoneFields): il prefisso in una
   colonna stretta e il numero nel resto della riga. Chiusa, la tendina mostra
   solo bandiera e prefisso; aperta, anche il paese, e per questo e' piu'
   larga della colonna. */
.pc-phone > .fi-grid {
    grid-template-columns: 7.5rem minmax(0, 1fr);
}

.pc-phone .fi-select-input-value-label .pc-prefix-country {
    display: none;
}

.pc-phone .fi-dropdown-panel {
    min-width: 16rem;
}

.pc-nowrap {
    white-space: nowrap;
}

/* "- obbligatorio" e "- facoltativo" in coda alla frase di una casella
   (App\Filament\ConsentCheckboxes): in grigio e di peso normale, piu' leggero
   della frase, che e' un'etichetta. */
.pc-consent-note {
    font-weight: 400;
    color: var(--gray-500);
    white-space: nowrap;
}

/* I bottoni a tutta larghezza uno sotto l'altro, il primario in alto: sul
   telefono, dove vivono queste pagine, due bottoni affiancati non ci
   stanno. */
.pc-stack .fi-ac.fi-width-full {
    grid-template-columns: minmax(0, 1fr);
}

/* La conferma di una prenotazione: giorno e ora sono la cosa da ricordare,
   in grande; lo stato sopra, piccolo, in verde. */
.pc-booking {
    padding: 20px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    background: var(--primary-50);
}

.pc-booking-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--success-700);
}

.pc-booking-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: var(--success-600);
}

.pc-booking-day {
    margin-top: 12px;
    font-size: var(--text-2xl);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: var(--tracking-tight);
    color: var(--gray-950);
}

.pc-booking-time {
    font-size: var(--text-2xl);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: var(--tracking-tight);
    color: var(--primary-600);
}

.pc-booking-note {
    margin-top: 16px;
    color: var(--gray-700);
}

/* Le date di una prenotazione con le ripetizioni, una per riga. */
.pc-booking-dates {
    margin-top: 12px;
    display: grid;
    gap: 4px;
    color: var(--gray-950);
}

/* Il codice della prestazione, una volta sola sotto le date. */
.pc-booking-code {
    margin-top: 12px;
    font-size: var(--text-sm);
    color: var(--gray-700);
}

.pc-summary-note {
    font-size: var(--text-sm);
    color: var(--gray-500);
}

/* La prenotazione delle prestazioni (BookService, vista
   filament/patient/pages/book-service). Un solo stile di etichetta per
   tutti i passi, riepilogo compreso: pc-label e' l'etichetta dei campi di
   Filament (Andrea, 23 ottobre 2026: cambiarla nel riepilogo confondeva). */
.pc-book {
    display: grid;
    gap: 24px;
}

.pc-book-step,
.pc-field {
    display: grid;
    gap: 8px;
}

.pc-book-step {
    gap: 24px;
}

.pc-label {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--gray-950);
}

.pc-hint {
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.pc-error {
    font-size: var(--text-sm);
    color: var(--danger-600);
}

/* I passi, come Steps dell'app degli infermieri: una barretta per passo,
   piena per quelli fatti, a meta' per quello in corso, col nome sotto; il
   nome del passo in corso in grassetto, quelli fatti con la spunta e
   toccabili per tornarci. */
.pc-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-step button {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: start;
}

.pc-step button:disabled {
    cursor: default;
}

.pc-step-bar {
    height: 4px;
    border-radius: 9999px;
    background: var(--gray-200);
}

.pc-step.pc-done .pc-step-bar {
    background: var(--primary-600);
}

.pc-step.pc-now .pc-step-bar {
    background: linear-gradient(90deg, var(--primary-600) 50%, var(--gray-200) 50%);
}

.pc-step-lb {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    font-size: var(--text-xs);
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--gray-500);
}

.pc-step-lb svg {
    flex: none;
    width: 14px;
    height: 14px;
}

.pc-step.pc-done .pc-step-lb {
    color: var(--gray-950);
}

.pc-step.pc-now .pc-step-lb {
    font-weight: 600;
    color: var(--gray-950);
}

/* I filtri sopra le prestazioni: chip col raggio dei controlli, mai a
   pillola (in Impronta la pillola sulle azioni e' bocciata), quello acceso
   pieno. */
.pc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pc-filter {
    padding: 6px 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-700);
    transition: background-color 180ms var(--default-transition-timing-function), border-color 180ms var(--default-transition-timing-function);
}

.pc-filter.pc-on {
    border-color: var(--primary-600);
    background: var(--primary-600);
    color: var(--color-white);
}

/* Un riquadro da scegliere, come .choice dell'app: raggio dei controlli,
   quello scelto col fondo tint-1 (la primaria 100: la 50 e' il grigio della
   pagina e il riquadro scelto sembrava vuoto), il bordo nel primario
   raddoppiato e la spunta, cosi' lo stato non sta solo nel colore. Le
   prestazioni, le fasce, l'indirizzo, ogni quanto. */
.pc-services,
.pc-choices {
    display: grid;
    gap: 8px;
}

.pc-choices.pc-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pc-choice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    text-align: start;
    color: var(--gray-950);
    transition: background-color 180ms var(--default-transition-timing-function), border-color 180ms var(--default-transition-timing-function);
}

.pc-choice:not(.pc-static):hover {
    border-color: var(--gray-400);
}

.pc-choice.pc-on,
.pc-choice.pc-on:hover {
    border-color: var(--primary-600);
    background: var(--primary-100);
    box-shadow: inset 0 0 0 1px var(--primary-600);
}

/* La spunta ha sempre il suo posto, trasparente finche' il riquadro non e'
   scelto: scegliendo, prezzo e testo non si spostano. */
.pc-choice:not(.pc-static)::after {
    content: '';
    flex: none;
    width: 20px;
    height: 20px;
    background-color: transparent;
    transition: background-color 180ms var(--default-transition-timing-function);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4l3.3 3.3 7.3-7.3a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pc-choice.pc-on::after {
    background-color: var(--primary-600);
}

/* Il testo prende lo spazio che avanza: prezzo e spunta restano a destra. */
.pc-choice-text,
.pc-service-text {
    flex: 1;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.pc-choice-name,
.pc-service-name {
    font-weight: 600;
}

.pc-choice-line,
.pc-service-who,
.pc-service-details {
    font-size: var(--text-sm);
    color: var(--gray-600);
}

.pc-service {
    align-items: flex-start;
}

.pc-service-who {
    color: var(--primary-600);
    font-weight: 600;
}

.pc-service-price {
    flex: none;
    font-weight: 900;
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
}

/* I suggerimenti di Google sotto il campo dell'indirizzo. */
.pc-suggestions {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.pc-suggestion {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-200);
    text-align: start;
    color: var(--gray-950);
}

.pc-suggestion:last-child {
    border-bottom: 0;
}

.pc-suggestion:hover {
    background: var(--primary-50);
}

/* Il calendario aperto, col primo giorno utile gia' scelto: sabato e
   domenica e i giorni fuori dalla finestra spenti. I numeri stanno al
   centro della loro casella: e' un controllo, come le schede della barra.
   La pagina ha la larghezza delle altre; il calendario no, o sul computer
   le caselle diventerebbero enormi. */
.pc-when {
    display: grid;
    gap: 24px;
}

/* Sul computer giorno e orario affiancati: il calendario a sinistra, le
   fasce a destra (Andrea, 23 ottobre 2026). */
@media (min-width: 48rem) {
    .pc-when {
        grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
        align-items: start;
    }
}

.pc-calendar {
    max-width: 26rem;
    padding: 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-xl);
    background: var(--color-white);
}

.pc-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.pc-calendar-month {
    font-weight: 600;
    color: var(--gray-950);
}

.pc-calendar-nav {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    color: var(--gray-700);
}

.pc-calendar-nav svg {
    width: 20px;
    height: 20px;
}

.pc-calendar-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.pc-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.pc-calendar-weekday {
    padding-block: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
    color: var(--gray-500);
}

.pc-day {
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    font-weight: 600;
    text-align: center;
    color: var(--gray-950);
}

.pc-day:disabled {
    font-weight: 400;
    color: var(--gray-300);
    cursor: default;
}

.pc-day:not(:disabled):hover {
    background: var(--primary-50);
}

.pc-day.pc-on,
.pc-day.pc-on:hover {
    background: var(--primary-600);
    color: var(--color-white);
}

/* Quante volte: meno, il numero, piu'. */
.pc-counter {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pc-counter-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    color: var(--gray-950);
}

.pc-counter-btn svg {
    width: 20px;
    height: 20px;
}

.pc-counter-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.pc-counter-value {
    min-width: 7ch;
    font-weight: 600;
    color: var(--gray-950);
}

.pc-dates {
    color: var(--gray-950);
}

.pc-textarea {
    width: 100%;
    min-height: 6rem;
    resize: vertical;
}

/* Il riepilogo: le stesse etichette dei passi, una riga sottile fra le voci,
   "Modifica" a destra dell'etichetta, il totale in fondo piu' grande. */
/* Senza riga sopra la prima voce: la separa gia' l'intestazione del riquadro. */
.pc-recap {
    display: grid;
}

.pc-recap-row:first-child {
    padding-top: 0;
}

.pc-recap-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-200);
}

.pc-recap-row > .pc-link {
    grid-row: 1;
    grid-column: 2;
    font-size: var(--text-sm);
}

.pc-recap-row > p {
    grid-column: 1 / -1;
}

.pc-recap-value {
    color: var(--gray-950);
}

/* Giorno e fascia sulla stessa riga, che va a capo solo se non ci stanno. */
.pc-recap-when {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
}

.pc-recap-band {
    color: var(--primary-600);
}

.pc-recap-sep {
    color: var(--gray-300);
}

.pc-recap-row > .pc-label {
    grid-column: 1;
}

.pc-total {
    font-size: var(--text-3xl);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: var(--tracking-tight);
    color: var(--gray-950);
}

/* La barra delle azioni, come ActionBar dell'app ma senza la riga sopra
   (Andrea, 23 ottobre 2026): ferma in fondo, Indietro a sinistra largo
   quanto il suo testo e il primario a destra. Sul telefono sta appena sopra
   la barra delle schede; sul computer resta in fondo al riquadro mentre si
   scorre, sul suo fondo bianco. */
.pc-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    gap: 12px;
    padding: 16px 0 0;
    background: var(--color-white);
}

/* I bottoni come il .btn di Impronta: alti 46px, 12px per 20px. */
.pc-actionbar .fi-btn {
    min-height: 46px;
    padding: 12px 20px;
}

/* Sul computer larghi quanto il testo, Indietro a sinistra e il primario a
   destra; sul telefono il primario prende il resto della barra, come
   nell'app. */
.pc-actionbar-primary {
    margin-inline-start: auto;
    min-width: 10rem;
}

@media (max-width: 63.999rem) {
    .pc-actionbar-primary {
        flex: 1;
        margin-inline-start: 0;
        min-width: 0;
    }

    .pc-actionbar {
        position: fixed;
        inset-inline: 0;
        bottom: calc(56px + env(safe-area-inset-bottom));
        z-index: 29;
        padding: 12px calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left));
        background: var(--color-white);
    }

    /* Sotto l'ultimo campo lo spazio di tutte e due le barre, piu' un
       respiro: la regola della barra delle schede, piu' in basso nel file,
       ne darebbe solo 56px. */
    body:has(.pc-tabbar):has(.pc-actionbar) .fi-main-ctn {
        padding-bottom: calc(56px + 69px + 24px + env(safe-area-inset-bottom));
    }
}

/* L'occhiello di Impronta (.kicker del sito): maiuscoletto piccolo sopra
   un gruppo di azioni, come "Aggiungi al calendario". */
.pc-kicker {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-600);
}

/* Un documento accettato nel profilo del paziente: la casella spuntata e
   bloccata col titolo, e sotto, allineata al titolo, la data in piccolo. */
.pc-document .fi-sc-text {
    margin-top: -4px;
    padding-inline-start: 1.75rem;
    font-size: var(--text-xs);
    color: var(--gray-500);
}

/* La barra laterale si stacca dal contenuto: fondo bianco e una riga sottile
   a destra (in Impronta le righe sottili sono identita'). Da 64rem in su,
   dove la barra e' fissa; sotto e' un cassetto che si apre sopra la pagina e
   ha gia' il suo fondo. */
@media (min-width: 64rem) {
    .fi-sidebar {
        background-color: var(--color-white);
        border-inline-end: 1px solid var(--gray-200);
    }

    /* Niente barra in alto, per lasciare lo spazio alla pagina (Andrea, 22
       ottobre 2026): il logo in cima alla barra laterale, con una riga
       sottile sotto, e nome e "Disconnetti" in fondo, sopra una riga sottile
       (.pc-account, sotto). Sotto i 64rem la barra in alto resta, col logo, e
       il menu e' la barra delle schede in fondo (.pc-tabbar, sotto); nel
       pannello dell'ufficio, che non ce l'ha, il menu resta il cassetto. */
    .fi-topbar-ctn {
        display: none;
    }

    .fi-body-has-topbar .fi-sidebar {
        top: 0;
        height: 100dvh;
    }

    .fi-body-has-topbar .fi-sidebar-header {
        display: flex;
        background-color: transparent;
        box-shadow: none;
    }
}

/* Sul telefono la barra in alto ha il logo: Filament lo mette solo nel
   cassetto, e senza l'avatar la barra restava col solo bottone del menu. */
@media (max-width: 63.999rem) {
    .fi-topbar-start {
        display: flex;
    }
}

/* La riga sottile sotto il logo della barra laterale e sopra il nome, anche
   nel cassetto del telefono. */
.fi-sidebar-header {
    border-bottom: 1px solid var(--gray-200);
}

.fi-sidebar-footer {
    border-top-color: var(--gray-200);
}

/* In fondo alla barra laterale (resources/views/filament/sidebar-account):
   l'avatar, accanto il nome e sotto "Disconnetti", gia' visibile. Un nome
   lungo si tronca invece di andare a capo. */
.pc-account {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pc-account-text {
    display: grid;
    min-width: 0;
}

.pc-account-name {
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-950);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-link.pc-account-logout {
    justify-self: start;
    font-size: var(--text-sm);
    font-weight: 400;
}

/* Sul telefono il menu e' una barra delle schede in fondo allo schermo, con
   le azioni principali, e il profilo sta in alto a destra: le iniziali
   aprono dal basso il foglio dell'account (Andrea, 22 ottobre 2026;
   App\Filament\TabBar e resources/views/filament/tab-bar e account-button).
   Sono la tab bar (C10) e lo sheet (C06) dell'app degli infermieri, repo
   pharmacare-app, design/design_system.html, con le stesse misure: barra
   alta 56 piu' lo spazio sotto la barretta dell'iPhone, bianca con la riga
   sopra, ma senza l'ombra dell'app, che qui non serve (Andrea); icona da 24
   e testo accanto, la scheda attiva nella primaria con l'icona piena e la
   tacca in alto, le altre nel testo attenuato. Icona e testo stanno al
   centro della scheda, come nell'app: e' l'unico testo centrato dei
   pannelli. Da 64rem in su barra, iniziali e foglio non ci sono. */
.pc-tabbar-ctn {
    display: none;
}

/* Il meta viewport delle pagine con la barra ha viewport-fit=cover: col
   telefono di lato il contenuto resta fuori dalla tacca. Senza, i margini
   valgono zero. */
body {
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

@media (max-width: 63.999rem) {
    .pc-tabbar-ctn {
        display: block;
    }

    /* Il cassetto e il bottone che lo apriva non servono piu', anche dove
       c'e' una voce sola e la barra non c'e'. */
    body:has(.pc-account-button) .fi-topbar-open-sidebar-btn,
    body:has(.pc-account-button) .fi-topbar-close-sidebar-btn,
    body:has(.pc-account-button) .fi-sidebar,
    body:has(.pc-account-button) .fi-sidebar-close-overlay {
        display: none;
    }

    /* Filament scosta il logo per il bottone del menu alla sua sinistra:
       senza il bottone il logo si allinea al contenuto. */
    body:has(.pc-account-button) .fi-topbar-start .fi-logo {
        margin-inline-start: 0;
    }

    /* La fine della pagina si ferma sopra la barra. */
    body:has(.pc-tabbar) .fi-main-ctn {
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }
}

.pc-tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    border-top: 1px solid var(--gray-300);
    background-color: var(--color-white);
}

.pc-tab {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    height: 56px;
    align-items: center;
    container-type: inline-size;
    color: var(--gray-600);
    -webkit-tap-highlight-color: transparent;
}

.pc-tab:active {
    background-color: color-mix(in oklch, var(--gray-950) 6%, transparent);
}

.pc-tab:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: -2px;
}

.pc-tab.pc-active {
    color: var(--primary-600);
}

.pc-tab.pc-active::before {
    content: "";
    position: absolute;
    top: -1px;
    inset-inline: 32px;
    height: 4px;
    border-radius: 0 0 6px 6px;
    background-color: var(--primary-600);
}

.pc-tab-body {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-inline: 8px;
}

.pc-tab-body .fi-icon {
    flex: none;
    width: 24px;
    height: 24px;
}

.pc-tab-label {
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Con tre schede su un telefono stretto (il medico di InCall, i pazienti
   quando arrivera' "Prenota") icona e testo non stanno sulla stessa riga:
   il testo va sotto l'icona, piu' piccolo. */
@container (max-width: 8.5rem) {
    .pc-tab-body {
        flex-direction: column;
        gap: 2px;
        padding-inline: 4px;
    }

    .pc-tab-label {
        max-width: 100%;
        font-size: 0.75rem;
        line-height: 16px;
    }
}

/* Le iniziali in alto a destra, nel bersaglio da 44 dell'app, con il cerchio
   a filo del margine del contenuto; sulle pagine del profilo hanno l'anello,
   perche' li' nessuna scheda e' attiva. */
.pc-account-button {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-inline-end: -6px;
    border-radius: 9999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pc-account-button:active {
    background-color: color-mix(in oklch, var(--gray-950) 6%, transparent);
}

.pc-account-button:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

.pc-account-button .fi-avatar {
    width: 32px;
    height: 32px;
}

.pc-account-button.pc-active .fi-avatar {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

/* Il foglio dell'account: sale dal basso sopra un velo dell'inchiostro, largo
   quanto lo schermo, raggio 10 solo sopra, la maniglia in testa, poi avatar e
   nome come titolo e le voci da 56 con l'icona da 20 e una riga sotto. La
   corsa e' di 500 ms, senza con "Riduci movimento". */
.pc-sheet-veil {
    position: fixed;
    inset: 0;
    z-index: 40;
    background-color: color-mix(in oklch, var(--gray-950) 50%, transparent);
}

.pc-sheet {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    max-height: calc(100dvh - 32px);
    flex-direction: column;
    overflow-y: auto;
    padding: 8px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    border-radius: 10px 10px 0 0;
    background-color: var(--color-white);
    box-shadow:
        0 4px 8px color-mix(in oklch, var(--gray-950) 6%, transparent),
        0 18px 44px color-mix(in oklch, var(--gray-950) 14%, transparent);
}

.pc-sheet-handle {
    flex: none;
    width: 36px;
    height: 4px;
    margin: 0 auto 16px;
    border-radius: 9999px;
    background-color: var(--gray-500);
}

.pc-sheet-who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px 12px;
    border-bottom: 1px solid var(--gray-300);
}

.pc-sheet-who .fi-avatar {
    flex: none;
    width: 40px;
    height: 40px;
}

.pc-sheet-name {
    overflow: hidden;
    font-size: var(--text-lg);
    font-weight: 900;
    letter-spacing: var(--tracking-tight);
    color: var(--gray-950);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-sheet-item {
    display: flex;
    width: 100%;
    min-height: 56px;
    align-items: center;
    gap: 12px;
    padding-inline: 4px;
    border-bottom: 1px solid var(--gray-300);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--gray-950);
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pc-sheet form .pc-sheet-item {
    border-bottom: 0;
}

/* "Disconnetti" si stacca dalle voci che aprono una pagina (Andrea, 22
   ottobre 2026): nel prugna attenuato del testo secondario, perche' il rosso
   nei pannelli e' delle azioni che cancellano qualcosa. */
.pc-sheet-item.pc-sheet-logout {
    color: var(--gray-600);
}

.pc-sheet-item:active {
    background-color: color-mix(in oklch, var(--gray-950) 6%, transparent);
}

.pc-sheet-item.pc-active {
    color: var(--primary-600);
}

.pc-sheet-item .fi-icon {
    flex: none;
    width: 20px;
    height: 20px;
}

.pc-sheet-move {
    transition: transform 500ms var(--default-transition-timing-function);
}

.pc-sheet-out {
    transform: translateY(100%);
}

.pc-sheet-fade {
    transition: opacity 500ms var(--default-transition-timing-function);
}

.pc-sheet-clear {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .pc-sheet-move,
    .pc-sheet-fade {
        transition: none;
    }
}