/* ============================================================================
   Stile Santa Benedetta
   ----------------------------------------------------------------------------
   Il tema Metronic parte da html{font-size:13px}: tutte le sue misure sono in
   rem, quindi testo e spaziature nascono compressi. Qui si alza la radice e si
   riscrivono i componenti che si vedono su ogni pagina (intestazione, menu,
   card, tabelle, pulsanti, campi), lasciando intatto il markup delle viste:
   sono 286 e non conviene toccarle una per una.

   I valori stanno in token --c-*, e i corrispondenti --bs-* del tema vengono
   ridefiniti sopra, cosi' le classi che le viste usano gia' (btn-primary,
   text-muted, badge-light-success...) prendono la palette nuova da sole.
   ========================================================================= */

html {
    /* 13px -> 14px: la scala del tema e' tutta in rem e si adegua da sola. */
    font-size: 14px !important;
}

/* Il tema mette height:100% su html e body, e questo teneva il telaio alto
   quanto la finestra: il contenuto usciva dal riquadro senza farlo crescere,
   e la colonna di sinistra - che e' position:sticky - non aveva nessuno
   spazio in cui restare ferma. Su una pagina lunga spariva verso l'alto dopo
   700px di scorrimento, lasciando il bianco al suo posto.

   Con l'altezza automatica il telaio cresce con il contenuto, lo sticky ha il
   suo contenitore alto e la colonna resta dov'e'. Le pagine che vogliono
   l'altezza piena (posta, chat, aree) la calcolano in vh e non dipendono da
   questa percentuale. */
html, body { height: auto; min-height: 100%; }

:root {
    --c-fondo: #F6F8FC;
    --c-carta: #FFFFFF;
    --c-bordo: #E7ECF4;
    --c-bordo-tenue: #F0F3F9;
    --c-inchiostro: #0F172A;
    --c-testo: #344054;
    --c-tenue: #667085;
    --c-debole: #98A2B3;

    --c-accento: #3B6FF5;
    --c-accento-scuro: #2F5FE0;
    --c-accento-fondo: #EEF3FF;

    --c-verde: #067647;  --c-verde-fondo: #DCFAE6;
    --c-ambra: #B54708;  --c-ambra-fondo: #FEF0C7;
    --c-rosso: #B42318;  --c-rosso-fondo: #FEE4E2;

    --c-r-carta: 14px;
    --c-r-campo: 10px;

    /* Il rientro laterale e in basso del contenuto. E' un token perche' le
       pagine a tutta altezza (posta, chat) devono sottrarlo dal 100vh, e un
       26 ricopiato la' si sarebbe scordato al primo cambio. */
    --c-bordo-pagina: 26px;

    /* --- riscritture del tema ------------------------------------------- */
    --bs-primary: var(--c-accento);
    --bs-primary-active: var(--c-accento-scuro);
    --bs-primary-light: var(--c-accento-fondo);
    --bs-primary-inverse: #FFFFFF;
    --bs-link-color: var(--c-accento);
    --bs-link-hover-color: var(--c-accento-scuro);

    --bs-body-color: var(--c-testo);
    --bs-body-bg: var(--c-carta);
    --bs-app-bg-color: var(--c-fondo);
    --bs-border-color: var(--c-bordo);
    --bs-text-muted: var(--c-tenue);

    --bs-gray-100: #F7F9FC;
    --bs-gray-200: var(--c-bordo-tenue);
    --bs-gray-300: var(--c-bordo);
    --bs-gray-400: #D3DAE6;
    --bs-gray-500: var(--c-debole);
    --bs-gray-600: var(--c-tenue);
    --bs-gray-700: #475467;
    --bs-gray-800: #1D2939;
    --bs-gray-900: var(--c-inchiostro);

    --bs-success: var(--c-verde);        --bs-success-light: var(--c-verde-fondo);
    --bs-warning: #DC6803;               --bs-warning-light: var(--c-ambra-fondo);
    --bs-danger: var(--c-rosso);         --bs-danger-light: var(--c-rosso-fondo);
    --bs-info: #6941C6;                  --bs-info-light: #F4F3FF;
}

[data-bs-theme="dark"] {
    --c-fondo: #12151C;
    --c-carta: #191C24;
    --c-bordo: #262A34;
    --c-bordo-tenue: #21242D;
    --c-inchiostro: #E7EAF0;
    --c-testo: #BCC3CF;
    --c-tenue: #8C94A3;
    --c-debole: #6E7685;

    --c-accento: #5B85F7;
    --c-accento-scuro: #7096F9;
    --c-accento-fondo: #1C2540;

    --c-verde: #6CE9A6;  --c-verde-fondo: #10291D;
    --c-ambra: #FEC84B;  --c-ambra-fondo: #2B2110;
    --c-rosso: #FDA29B;  --c-rosso-fondo: #2C1513;

    --bs-gray-100: #1B1E26;
    --bs-gray-700: #A0A8B5;
    --bs-gray-800: #CDD3DD;
}

body {
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--c-testo);
    background-color: var(--c-fondo);
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
   1. Intestazione e menu
   ------------------------------------------------------------------------ */
.app-header {
    background-color: var(--c-carta) !important;
    border-bottom: 1px solid var(--c-bordo) !important;
    box-shadow: none !important;
}

#kt_app_header_menu > .menu-item > .menu-link {
    padding: .5rem .85rem !important;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--c-tenue);
    transition: background-color .12s ease, color .12s ease;
}

#kt_app_header_menu > .menu-item > .menu-link:hover,
#kt_app_header_menu > .menu-item.show > .menu-link {
    background-color: var(--c-bordo-tenue);
    color: var(--c-inchiostro);
}

/* La voce della sezione aperta: sfondo tenue e testo dell'accento, cosi' si
   capisce dove si e'. Prima non c'era nessun segno. */
#kt_app_header_menu > .menu-item.csb-qui > .menu-link,
#kt_app_header_menu > .menu-item.csb-qui > .menu-link .menu-title {
    background-color: var(--c-accento-fondo);
    color: var(--c-accento);
    font-weight: 600;
}

#kt_app_header_menu .menu-title { color: inherit; }

/* Le tendine */
.menu-sub-dropdown,
#kt_app_header_menu .menu-sub-lg-dropdown {
    border: 1px solid var(--c-bordo) !important;
    border-radius: var(--c-r-carta) !important;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .14), 0 2px 6px -2px rgba(15, 23, 42, .06) !important;
    background-color: var(--c-carta) !important;
    padding: .5rem !important;
}

.menu-sub .menu-link {
    border-radius: 8px;
    padding: .5rem .75rem !important;
    font-size: .95rem;
    font-weight: 500;
    color: var(--c-testo);
}

.menu-sub .menu-link:hover,
.menu-sub .menu-item.show > .menu-link {
    background-color: var(--c-bordo-tenue);
    color: var(--c-inchiostro);
}

@media (max-width: 991.98px) {
    #kt_app_header_menu { padding: .75rem !important; }
    #kt_app_header_menu > .menu-item > .menu-link { padding: .7rem .85rem !important; }
    #kt_app_header_menu .menu-sub-lg-down-accordion { padding-left: .5rem !important; }
}

/* Titoletto di gruppo dentro una tendina */
.csb-gruppo {
    padding: .7rem .75rem .3rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-debole);
}

.csb-separatore {
    height: 1px;
    margin: .45rem .35rem;
    background-color: var(--c-bordo-tenue);
}

/* ---------------------------------------------------------------------------
   2. Barra del titolo
   ------------------------------------------------------------------------ */
.app-toolbar { background: transparent; }

.page-heading,
h1.page-heading {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: -.02em;
    color: var(--c-inchiostro) !important;
}

.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a { font-size: .88rem; color: var(--c-debole); }

/* ---------------------------------------------------------------------------
   3. Card
   ------------------------------------------------------------------------ */
.card {
    --bs-card-border-color: var(--c-bordo);
    --bs-card-border-radius: var(--c-r-carta);
    --bs-card-inner-border-radius: calc(var(--c-r-carta) - 1px);
    --bs-card-bg: var(--c-carta);
    --bs-card-box-shadow: none;
    border: 1px solid var(--c-bordo);
    box-shadow: none;
}

.card-header {
    min-height: 62px !important;
    padding: 0 1.5rem !important;
    border-bottom: 1px solid var(--c-bordo) !important;
}

.card-header .card-title,
.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--c-inchiostro);
    margin: 0;
}

.card-title .card-label { font-weight: 600; }

.card-body { padding: 1.5rem; }
.card-footer { padding: 1.15rem 1.5rem; border-top: 1px solid var(--c-bordo); }

/* Le card senza intestazione non hanno bisogno del doppio margine */
.card > .card-body:first-child { border-radius: inherit; }

/* ---------------------------------------------------------------------------
   4. Tabelle
   ------------------------------------------------------------------------ */
.table {
    --bs-table-border-color: var(--c-bordo-tenue);
    color: var(--c-testo);
    font-size: .95rem;
}

.table > thead > tr > th,
.table > thead > tr > td {
    padding: .8rem .85rem !important;
    font-size: .76rem !important;
    font-weight: 600 !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-debole) !important;
    border-bottom: 1px solid var(--c-bordo) !important;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: .85rem !important;
    border-bottom: 1px solid var(--c-bordo-tenue) !important;
    vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: 0 !important; }
.table > tbody > tr:hover > td { background-color: var(--c-bordo-tenue); }

.table.table-row-dashed > tbody > tr { border-bottom-style: solid !important; }
.table a { color: var(--c-accento); text-decoration: none; }
.table a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   5. Pulsanti
   ------------------------------------------------------------------------ */
.btn {
    border-radius: var(--c-r-campo) !important;
    font-weight: 500;
    letter-spacing: 0;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn:not(.btn-icon):not(.btn-sm):not(.btn-lg) { padding: .62rem 1.1rem; font-size: .95rem; }
.btn.btn-sm:not(.btn-icon) { padding: .45rem .85rem; font-size: .88rem; }
.btn.btn-lg:not(.btn-icon) { padding: .8rem 1.4rem; font-size: 1rem; }

.btn.btn-light,
.btn.btn-secondary {
    background-color: var(--c-carta);
    border: 1px solid var(--c-bordo);
    color: var(--c-testo);
}

.btn.btn-light:hover,
.btn.btn-secondary:hover {
    background-color: var(--c-bordo-tenue);
    border-color: var(--c-debole);
    color: var(--c-inchiostro);
}

.btn.btn-primary { border: 1px solid var(--c-accento); }

/* btn-bg-light del tema mette solo un fondo, che nella nostra palette e'
   quasi identico a quello della pagina: "Aggiungi firma", "Etichetta" e il
   tasto dei tre punti si leggevano come testo semplice, non come tasti.
   Tredici punti del gestionale lo usano, quindi la correzione sta qui e non
   nelle viste. */
.btn.btn-bg-light {
    background-color: var(--c-carta);
    border: 1px solid var(--c-bordo);
    color: var(--c-testo);
}
.btn.btn-bg-light:hover,
.btn.btn-bg-light:focus {
    background-color: var(--c-bordo-tenue);
    border-color: var(--c-debole);
    color: var(--c-inchiostro);
}

/* La riga delle azioni della pagina: sotto al titolo, a destra come il
   contenuto. Era sparita insieme al blocco della ricerca quando ho tolto i
   comandi dalla barra in alto - la cancellazione ha preso quattro righe di
   troppo - e senza di lei ogni pagina con dei tasti li mostrava incolonnati
   a sinistra, senza spazi fra loro, con l'ultimo contenitore allargato a
   tutta la riga. */
.telaio__azioni {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end;
    flex-wrap: wrap; gap: 10px;
    padding: 0 var(--c-bordo-pagina) 14px;
}
.telaio__azioni:empty { display: none; }
.telaio__azioni form { margin: 0; }

/* Le azioni di stato nella riga dei comandi erano quattro blocchi di colore
   pieno in fila - arancione, blu, verde, viola - e insieme urlavano piu' del
   contenuto della pagina. Il colore resta, perche' e' l'informazione (dice
   in quale stato porta il tasto), ma tinto come le pastiglie negli elenchi:
   la stessa cosa detta con la stessa voce in tutto il gestionale. */
.telaio__azioni .btn.azione {
    border: 1px solid transparent;
    font-weight: 600;
}
.telaio__azioni .btn.azione.btn-primary   { background: var(--bs-primary-light);   color: var(--bs-primary); }
.telaio__azioni .btn.azione.btn-success   { background: var(--bs-success-light);   color: var(--bs-success); }
.telaio__azioni .btn.azione.btn-warning   { background: var(--bs-warning-light);   color: var(--bs-warning); }
.telaio__azioni .btn.azione.btn-info      { background: var(--bs-info-light);      color: var(--bs-info); }
.telaio__azioni .btn.azione.btn-danger    { background: var(--bs-danger-light);    color: var(--bs-danger); }
.telaio__azioni .btn.azione.btn-secondary { background: var(--c-bordo-tenue);      color: var(--c-tenue); }
/* Al passaggio il colore si riempie: cosi' si vede quale si sta premendo. */
.telaio__azioni .btn.azione:hover { border-color: currentColor; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; }

/* ---------------------------------------------------------------------------
   6. Etichette di stato
   ------------------------------------------------------------------------ */
.badge {
    border-radius: 999px;
    padding: .3rem .65rem;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.45;
}

.badge.badge-light        { background-color: var(--c-bordo-tenue); color: var(--c-tenue); }
.badge.badge-light-primary{ background-color: #E0EAFF; color: var(--c-accento); }
.badge.badge-light-success{ background-color: var(--c-verde-fondo); color: var(--c-verde); }
.badge.badge-light-warning{ background-color: var(--c-ambra-fondo); color: var(--c-ambra); }
.badge.badge-light-danger { background-color: var(--c-rosso-fondo); color: var(--c-rosso); }
.badge.badge-light-info   { background-color: #EBE9FE; color: #5925DC; }

/* Le etichette piene del tema sono blocchi di colore saturo: qui diventano
   pillole tenui come le altre, altrimenti in un elenco pesano piu' del dato. */
.badge.badge-primary { background-color: #E0EAFF; color: var(--c-accento); }
.badge.badge-success { background-color: var(--c-verde-fondo); color: var(--c-verde); }
.badge.badge-warning { background-color: var(--c-ambra-fondo); color: var(--c-ambra); }
.badge.badge-danger  { background-color: var(--c-rosso-fondo); color: var(--c-rosso); }
.badge.badge-info    { background-color: #EBE9FE; color: #5925DC; }
.badge.badge-secondary { background-color: var(--c-bordo-tenue); color: var(--c-tenue); }

/* ---------------------------------------------------------------------------
   7. Campi
   ------------------------------------------------------------------------ */
.form-control,
.form-select,
.select2-container--bootstrap5 .select2-selection {
    border-radius: var(--c-r-campo) !important;
    border: 1px solid var(--c-bordo) !important;
    background-color: var(--c-carta) !important;
    color: var(--c-inchiostro) !important;
    font-size: .95rem;
}

.form-control:not(.form-control-sm):not(.form-control-lg),
.form-select:not(.form-select-sm):not(.form-select-lg) { padding: .62rem .85rem; }

.form-control:focus,
.form-select:focus {
    border-color: var(--c-accento) !important;
    box-shadow: 0 0 0 3px var(--c-accento-fondo) !important;
}

.form-control-solid,
.form-select-solid {
    background-color: var(--c-fondo) !important;
    border-color: var(--c-bordo) !important;
}

.form-label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--c-testo);
    margin-bottom: .45rem;
}

.form-check-input { border-color: var(--c-bordo); }
.form-check-input:checked { background-color: var(--c-accento); border-color: var(--c-accento); }
.invalid-feedback, .text-danger { color: var(--c-rosso) !important; }

/* ---------------------------------------------------------------------------
   8. Linguette, avvisi, paginazione, finestre
   ------------------------------------------------------------------------ */
.nav-line-tabs .nav-item .nav-link {
    border-bottom: 2px solid transparent;
    color: var(--c-tenue);
    font-size: .98rem;
    font-weight: 500;
    padding: .7rem .15rem;
    margin-right: 1.5rem;
}

.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover {
    border-bottom-color: var(--c-accento);
    color: var(--c-inchiostro);
    font-weight: 600;
}

.alert {
    border-radius: var(--c-r-carta);
    border: 1px solid var(--c-bordo);
    font-size: .95rem;
    padding: .9rem 1.15rem;
}

.alert.alert-primary { background-color: var(--c-accento-fondo); border-color: #D5E1FD; color: var(--c-accento-scuro); }
.alert.alert-success { background-color: #ECFDF3; border-color: #ABEFC6; color: var(--c-verde); }
.alert.alert-warning { background-color: #FFFAEB; border-color: #FEDF89; color: var(--c-ambra); }
.alert.alert-danger  { background-color: #FEF3F2; border-color: #FECDCA; color: var(--c-rosso); }

.page-link {
    border-radius: 8px !important;
    color: var(--c-testo);
    font-size: .92rem;
}

.page-item.active .page-link {
    background-color: var(--c-accento);
    border-color: var(--c-accento);
    color: #fff;
}

.modal-content {
    border-radius: 16px;
    border: 1px solid var(--c-bordo);
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .22);
}

.modal-header { border-bottom: 1px solid var(--c-bordo); padding: 1.25rem 1.5rem; }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--c-bordo); padding: 1.15rem 1.5rem; }
.modal-title { font-size: 1.15rem; font-weight: 600; color: var(--c-inchiostro); }

/* Il segnaposto tondo del tema (iniziali utente, avatar in elenco) */
.symbol .symbol-label { border-radius: 50%; font-weight: 600; }
.symbol.symbol-square .symbol-label { border-radius: var(--c-r-campo); }

.app-footer { border-top: 1px solid var(--c-bordo); background-color: var(--c-carta); }

/* Il titolo pagina del tema e' forzato bianco da una regola con !important
   pensata per le intestazioni scure: qui l'intestazione e' chiara. */
[data-kt-app-layout="light-header"] .page-heading { color: var(--c-inchiostro) !important; }

/* ---------------------------------------------------------------------------
   9. Guscio di macro area: elenco a sinistra, contenuto a destra
   ---------------------------------------------------------------------------
   Le voci in alto sono le macro aree; aperta un'area, quello che contiene sta
   nella colonna di sinistra. Il guscio e' qui e non nella pagina della chat
   perche' serve allo stesso modo a ogni area che ha un elenco.
   ------------------------------------------------------------------------ */
.area {
    display: flex; align-items: stretch;
    height: calc(100vh - 200px); min-height: 560px;
    background: var(--c-carta);
    border: 1px solid var(--c-bordo);
    border-radius: 18px;
    overflow: hidden;
}

.area__lato {
    width: 292px; flex: 0 0 292px;
    border-right: 1px solid var(--c-bordo);
    background: var(--c-fondo);
    display: flex; flex-direction: column;
}

.area__centro { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.area__testa { flex: 0 0 auto; padding: 16px 18px; border-bottom: 1px solid var(--c-bordo); }
.area__scorri { flex: 1 1 auto; overflow-y: auto; }

.area__gruppo {
    padding: 16px 18px 6px;
    font-size: .72rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--c-debole);
}

.area__voce {
    display: block; padding: 11px 18px;
    border-left: 3px solid transparent;
    text-decoration: none; color: var(--c-testo);
}
.area__voce:hover { background: #EFF3FA; text-decoration: none; }
.area__voce--attiva { background: var(--c-carta); border-left-color: var(--c-accento); }
.area__voce__titolo { font-size: .95rem; font-weight: 500; color: var(--c-inchiostro); line-height: 1.4; }
.area__voce--attiva .area__voce__titolo { font-weight: 600; }
.area__voce__riga { font-size: .8rem; color: var(--c-debole); margin-top: 2px; }

.area__vuoto { padding: 18px; font-size: .88rem; color: var(--c-debole); line-height: 1.6; }

[data-bs-theme="dark"] .area__voce:hover { background: #1E222B; }

/* Sotto i 992px la colonna diventa una striscia sopra al contenuto: due
   colonne su un portatile piccolo lasciano al centro troppo poco. */
@media (max-width: 991.98px) {
    .area { flex-direction: column; height: auto; min-height: 0; }
    .area__lato { width: auto; flex: 0 0 auto; border-right: 0;
                  border-bottom: 1px solid var(--c-bordo); max-height: 260px; }
    .area__centro { min-height: 70vh; }
}

/* ---------------------------------------------------------------------------
   10. Telaio: macro aree nella colonna a sinistra
   ---------------------------------------------------------------------------
   Le macro aree stanno a sinistra e sotto, nella stessa colonna, quello che
   l'area contiene (per la chat: nuova conversazione e le recenti). A destra
   una barra sottile con tema, ricerca e utente, e sotto il contenuto.

   E' un guscio nostro, non quello del tema: le classi .app-* di Metronic
   danno per scontata l'intestazione in alto e i suoi margini, e mescolarle
   con una colonna a sinistra vuol dire combattere due sistemi insieme.
   ------------------------------------------------------------------------ */
.telaio { display: flex; align-items: stretch; min-height: 100vh; background: var(--c-fondo); }

.telaio__lato {
    width: 262px; flex: 0 0 262px;
    position: sticky; top: 0; align-self: flex-start;
    height: 100vh;
    display: flex; flex-direction: column;
    background: var(--c-carta);
    border-right: 1px solid var(--c-bordo);
    z-index: 30;
}

.telaio__logo { flex: 0 0 auto; padding: 20px 22px 14px; }
.telaio__logo img { height: 30px; width: auto; }

/* La sfera al posto del logo: la stessa della chat, in piccolo.
   I gradienti sono in percentuale, quindi la sfera regge qualunque misura
   senza ritoccare niente: cambia solo width/height. */
.telaio__sfera {
    position: relative; flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 50%;
    background:
        radial-gradient(circle at 32% 26%, rgba(255,255,255,.96), rgba(255,255,255,0) 40%),
        radial-gradient(circle at 74% 78%, rgba(182,146,255,.9), rgba(182,146,255,0) 55%),
        radial-gradient(circle at 44% 40%, #FFFFFF 0%, #E4ECFF 18%, #B9CCFB 46%, #9DB4F5 72%, #B9A6EC 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7),
                inset -3px -4px 9px rgba(120, 140, 220, .35),
                0 0 14px rgba(150, 170, 250, .45),
                0 4px 10px -3px rgba(120, 140, 220, .45);
    animation: telaio-respira 7s ease-in-out infinite;
}

/* L'alone: sta dietro e sfuma, cosi' la sfera non sembra appiccicata alla
   colonna. Pulsa in controtempo rispetto alla sfera. */
.telaio__sfera::before {
    content: ''; position: absolute; inset: -40%; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, rgba(150,175,255,.3), rgba(180,150,250,.16) 42%, transparent 68%);
    filter: blur(4px);
    animation: telaio-alone 7s ease-in-out infinite;
}

/* Sette secondi per ciclo e un 6% di scala: su una palla da 30px in un
   angolo che si vede su ogni pagina, tutto cio' che si nota disturba. */
@keyframes telaio-respira {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
@keyframes telaio-alone {
    0%, 100% { opacity: .75; }
    50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .telaio__sfera, .telaio__sfera::before { animation: none; }
}

.telaio__aree { flex: 0 0 auto; padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 2px; }

.telaio__area {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 11px;
    font-size: 1rem; font-weight: 500; color: var(--c-tenue);
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.telaio__area:hover { background: var(--c-bordo-tenue); color: var(--c-inchiostro); text-decoration: none; }
.telaio__area svg { width: 20px; height: 20px; flex: 0 0 20px; }
.telaio__area--qui { background: var(--c-accento-fondo); color: var(--c-accento); font-weight: 600; }
.telaio__area__conta { margin-left: auto; }

/* Lo spazio dell'area aperta: elenco, filtri, quello che serve. Scorre da
   solo, cosi' le macro aree in alto e l'utente in basso restano fermi. */
.telaio__dentro { flex: 1 1 auto; min-height: 0; overflow-y: auto;
                  border-top: 1px solid var(--c-bordo-tenue); padding: 14px; }
.telaio__dentro:empty { display: none; }

.telaio__utente {
    flex: 0 0 auto; display: flex; align-items: center; gap: 11px;
    padding: 14px 18px; border-top: 1px solid var(--c-bordo);
}
/* Serve dappertutto: un figlio flessibile senza min-width:0 non si
   restringe, e il testo lungo scappa fuori invece di troncarsi. */
.min-w-0 { min-width: 0; }

/* Tutta la riga apre il menu del profilo: prima il bersaglio era il solo
   avatar da 35px, e su un portatile col trackpad si sbaglia. Il rientro
   negativo tiene l'area cliccabile piu' larga del testo senza spostare
   niente di quello che si vede. */
.telaio__utente__chi { position: relative; flex: 1 1 auto; min-width: 0; }
.telaio__utente__grilletto {
    display: flex; align-items: center; gap: 11px; min-width: 0;
    padding: 6px; margin: -6px; border-radius: 10px; cursor: pointer;
}
.telaio__utente__grilletto:hover { background: var(--c-bordo-tenue); }
.telaio__utente__nome { font-size: .95rem; font-weight: 600; color: var(--c-inchiostro); line-height: 1.3; }
.telaio__utente__ruolo { font-size: .8rem; color: var(--c-debole); }

.telaio__utente__tema { position: relative; flex: 0 0 auto; display: flex; }
.telaio__utente__icona {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    color: var(--c-debole);
}
.telaio__utente__icona:hover { background: var(--c-bordo-tenue); color: var(--c-inchiostro); }
.telaio__utente__icona svg { width: 18px; height: 18px; }
.telaio__utente__icona > span { display: flex; }

.telaio__corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.telaio__alto {
    flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
    padding: 14px 26px 10px; min-height: 62px;
    background: var(--c-fondo);
    position: sticky; top: 0; z-index: 20;
}
.telaio__titolo { font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em;
                  color: var(--c-inchiostro); margin: 0;
                  /* Una riga sola: un titolo che andava a capo alzava la barra
                     e spingeva giu' tutto il contenuto. */
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* I tre comandi che valgono su ogni pagina, tutti della stessa misura. */


.telaio__menu { display: none; border: 1px solid var(--c-bordo); background: var(--c-carta);
                border-radius: 10px; padding: 8px 10px; color: var(--c-testo); }
.telaio__menu svg { width: 18px; height: 18px; }

.telaio__velo { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .38); z-index: 25; }

[data-bs-theme="dark"] .telaio__area:hover { background: #1E222B; }

@media (max-width: 991.98px) {
    .telaio__lato { position: fixed; left: 0; top: 0; bottom: 0; height: 100vh;
                    transform: translateX(-100%); transition: transform .2s ease; }
    .telaio--aperto .telaio__lato { transform: translateX(0); box-shadow: 0 0 60px rgba(15, 23, 42, .25); }
    .telaio--aperto .telaio__velo { display: block; }
    .telaio__menu { display: flex; }
    .telaio__alto { padding: 12px 16px 8px; }
    .telaio__azioni { padding: 0 16px 12px; }
    .telaio__contenuto { padding: 0 16px 20px; }
    .telaio__titolo { font-size: 1.15rem; }
}

/* Il guscio dell'area a due colonne resta per le pagine che lo usano (posta):
   con la colonna del telaio a sinistra l'altezza disponibile e' diversa. */
.area, .chat-guscio { height: calc(100vh - 150px); }

/* ---------------------------------------------------------------------------
   11. Colonna stretta: solo le icone
   ---------------------------------------------------------------------------
   La classe sta su <html> e non sul telaio perche' va applicata prima che la
   pagina si dipinga: uno script in testa la legge da localStorage, altrimenti
   a ogni caricamento si vedrebbe la colonna larga che si stringe.
   ------------------------------------------------------------------------ */
.telaio__piega {
    margin-left: auto; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 8px; background: transparent;
    color: var(--c-debole); cursor: pointer;
}
.telaio__piega:hover { background: var(--c-bordo-tenue); color: var(--c-inchiostro); }
.telaio__piega svg { width: 17px; height: 17px; }
.telaio__logo { display: flex; align-items: center; gap: 10px; }

html.telaio-stretto .telaio__lato { width: 68px; flex: 0 0 68px; }

/* Il passaggio e' graduale, ma solo la larghezza: animare il contenuto lo
   farebbe ballare mentre le etichette escono dal flusso. */
.telaio__lato { transition: width .16s ease, flex-basis .16s ease; }
@media (prefers-reduced-motion: reduce) { .telaio__lato { transition: none; } }

/* Le etichette escono dal flusso invece di essere solo trasparenti: se
   restassero, la colonna non si stringerebbe. */
html.telaio-stretto .telaio__area__testo,
html.telaio-stretto .telaio__utente__nome,
html.telaio-stretto .telaio__utente__ruolo,
html.telaio-stretto .telaio__dentro { display: none; }

html.telaio-stretto .telaio__aree { padding: 6px 10px 14px; }
html.telaio-stretto .telaio__area { justify-content: center; padding: 11px 0; position: relative; }
html.telaio-stretto .telaio__logo { flex-direction: column; gap: 12px;
                                    justify-content: center; padding: 18px 0 12px; }
html.telaio-stretto .telaio__logo img { height: 26px; }
html.telaio-stretto .telaio__sfera { width: 26px; height: 26px; }
html.telaio-stretto .telaio__piega { margin: 0; }
/* A icone i due non ci stanno in fila: uno sopra l'altro, centrati. */
html.telaio-stretto .telaio__utente { flex-direction: column; gap: 10px;
                                      justify-content: center; padding: 14px 0; }
html.telaio-stretto .telaio__utente__chi { flex: 0 0 auto; }
html.telaio-stretto .telaio__utente__grilletto { justify-content: center; margin: 0; padding: 0; }
html.telaio-stretto .telaio__utente__grilletto:hover { background: transparent; }

/* Il conteggio non ci sta di fianco: diventa un punto sull'icona. */
html.telaio-stretto .telaio__area__conta {
    position: absolute; top: 6px; right: 12px;
    min-width: 8px; width: 8px; height: 8px; padding: 0;
    border-radius: 50%; background: #D92D20; color: transparent;
    font-size: 0; overflow: hidden;
}

@media (max-width: 991.98px) {
    /* Fuori schermo la colonna si apre intera: stringerla a icone su un
       telefono non lascerebbe spazio a niente, lo occuperebbe il velo. */
    html.telaio-stretto .telaio__lato { width: 262px; flex: 0 0 262px; }
    html.telaio-stretto .telaio__area__testo,
    html.telaio-stretto .telaio__utente__nome,
    html.telaio-stretto .telaio__utente__ruolo,
    html.telaio-stretto .telaio__dentro { display: revert; }
    html.telaio-stretto .telaio__area { justify-content: flex-start; padding: 10px 12px; }
    html.telaio-stretto .telaio__logo { flex-direction: row; gap: 10px;
                                       justify-content: flex-start; padding: 20px 22px 14px; }
    html.telaio-stretto .telaio__logo img { height: 30px; }
    html.telaio-stretto .telaio__sfera { width: 30px; height: 30px; }
    html.telaio-stretto .telaio__utente { flex-direction: row; gap: 11px;
                                          justify-content: flex-start; padding: 14px 18px; }
    html.telaio-stretto .telaio__utente__chi { flex: 1 1 auto; }
    html.telaio-stretto .telaio__utente__grilletto { justify-content: flex-start;
                                                     margin: -6px; padding: 6px; }
    html.telaio-stretto .telaio__area__conta { position: static; width: auto; height: auto;
        min-width: 0; border-radius: 999px; font-size: .8rem; color: inherit;
        background: var(--c-rosso-fondo); padding: .3rem .65rem; overflow: visible; }
    .telaio__piega { display: none; }
}

/* ---------------------------------------------------------------------------
   12. Schede di dettaglio: un vocabolario riusabile
   ---------------------------------------------------------------------------
   La pagina di un evento (e domani quella di un cliente, di un ordine, di una
   prenotazione) e' sempre la stessa cosa: una testata che dice in tre parole
   di cosa si tratta, dei blocchi di testo, delle coppie etichetta-valore, una
   tabellina. Prima ogni pezzo se lo ridisegnava per conto suo nella view, e
   la stessa pagina finiva con due stili diversi sopra e sotto.

   Qui c'e' un pezzo per ciascuna di quelle quattro cose. Tutte si appoggiano
   ai token --c-*, quindi seguono il tema chiaro e scuro da sole, e nessuna
   dipende dalle classi di Metronic: una view nuova le usa e basta.
   ------------------------------------------------------------------------ */

/* --- il riquadro ---------------------------------------------------------- */
.scheda {
    background: var(--c-carta);
    border: 1px solid var(--c-bordo);
    border-radius: var(--c-r-carta);
    padding: 24px 26px;
    margin-bottom: 20px;
}
.scheda:last-child { margin-bottom: 0; }

/* Il titolo sta dentro al riquadro e non in una barra con la riga sotto:
   la barra da 62px alta quanto il titolo faceva sembrare ogni scheda
   l'inizio di una pagina nuova.

   Ed e' scritto come le etichette dei fatti e dei blocchi di testo: blu,
   maiuscoletto, lo stesso corpo. In una pagina il nome di un pezzo di
   contenuto si scrive in un modo solo - prima i titoli delle schede erano
   grossi e neri, e sembravano titoli di pagine diverse dentro la pagina. */
.scheda__titolo {
    font-size: .74rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--c-accento); margin: 0 0 14px;
}
.scheda__vuoto { font-size: .95rem; color: var(--c-tenue); }

/* Titolo con un dato di servizio a destra ("25 email collegate"). */
.scheda__riga-titolo { display: flex; align-items: baseline; justify-content: space-between;
                       gap: 16px; flex-wrap: wrap; }
.scheda__riga-titolo .scheda__titolo { margin-bottom: 16px; }
.scheda__conta { font-size: .8rem; color: var(--c-tenue); }
.scheda__piede { margin-top: 14px; padding-top: 12px; font-size: .8rem; color: var(--c-tenue);
                 border-top: 1px solid var(--c-bordo-tenue); }

/* --- la testata: titolo, stati, e i fatti che si cercano per primi -------- */
.testata__alto { display: flex; align-items: flex-start; justify-content: space-between;
                 gap: 16px; flex-wrap: wrap; }
.testata__titolo { font-size: 1.45rem; font-weight: 700; line-height: 1.25;
                   color: var(--c-inchiostro); margin: 0; overflow-wrap: anywhere; }
.testata__stati { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }

/* La riga sotto il titolo: la classificazione della cosa, in evidenza, e
   accanto il dato che le da' senso (per un evento l'ora di arrivo). */
.testata__riga { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                 margin-top: 10px; }
.testata__genere { font-size: .95rem; font-weight: 700; color: var(--c-accento);
                   background: var(--c-accento-fondo); border-radius: 999px;
                   padding: 4px 13px; }
.testata__spicco { font-size: 1.05rem; font-weight: 700; color: var(--c-inchiostro); }
.testata__spicco span { font-size: .78rem; font-weight: 600; letter-spacing: .05em;
                        text-transform: uppercase; color: var(--c-tenue); margin-right: 6px; }

.fatti { display: flex; flex-wrap: wrap; gap: 20px 30px; margin-top: 18px;
         padding-top: 16px; border-top: 1px solid var(--c-bordo-tenue); }

/* L'etichetta e' quella dei blocchi di testo, stesso colore e stesso corpo:
   sopra e sotto sono la stessa pagina, e due grigi diversi per la stessa
   cosa - il nome di un dato - si notano subito senza sapere perche'. */
.fatto__etichetta { font-size: .74rem; font-weight: 700; letter-spacing: .07em;
                    text-transform: uppercase; color: var(--c-accento); }
.fatto__valore { font-size: 1.05rem; font-weight: 600; color: var(--c-inchiostro);
                 margin-top: 5px; overflow-wrap: anywhere; }
.fatto__sotto { font-size: .8rem; font-weight: 500; color: var(--c-tenue); margin-top: 2px; }

/* Un valore lungo prende la riga per se': in fila con gli altri stringerebbe
   tutto e si leggerebbe a parole spezzate. Ed essendo una frase, non un
   numero, si legge come una frase. */
.fatto--largo { flex: 1 1 100%; }
.fatto--largo .fatto__valore { font-size: .97rem; font-weight: 500; line-height: 1.6;
                               color: var(--c-testo); max-width: 80ch; }

/* --- i blocchi di testo lungo --------------------------------------------- */
.blocco + .blocco { margin-top: 22px; padding-top: 22px;
                    border-top: 1px solid var(--c-bordo-tenue); }

/* L'etichetta ha il colore dell'accento e non il grigio del contorno: sono i
   titoli con cui si cerca a occhio il pezzo che serve. */
.blocco__etichetta { font-size: .74rem; font-weight: 700; letter-spacing: .07em;
                     text-transform: uppercase; color: var(--c-accento); margin: 0 0 7px; }
/* Una riga larga mezzo schermo non si rilegge: 80 caratteri sono la misura in
   cui l'occhio ritrova l'inizio della riga dopo. */
.blocco__testo { font-size: .97rem; line-height: 1.7; color: var(--c-testo);
                 max-width: 80ch; overflow-wrap: anywhere; }

/* Cio' che non si stampa per il cliente si distingue a vista, altrimenti e'
   un blocco gemello degli altri e nessuno sa cosa finisce nella stampa. */
.blocco--interno { background: var(--c-fondo); border: 1px solid var(--c-bordo-tenue);
                   border-radius: var(--c-r-campo); padding: 16px 18px; }
.blocco--interno + .blocco--interno { margin-top: 12px; padding-top: 16px; }
.blocco:not(.blocco--interno) + .blocco--interno { margin-top: 22px; }
.blocco--interno .blocco__etichetta { color: var(--c-tenue); }
.blocco__nota { display: inline-block; text-transform: none; letter-spacing: 0;
                font-size: .7rem; font-weight: 600; color: var(--c-ambra);
                background: var(--c-ambra-fondo); border-radius: 999px;
                padding: 2px 8px; margin-left: 8px; vertical-align: 1px; }

/* --- le coppie etichetta-valore ------------------------------------------- */
.attributo { display: flex; align-items: baseline; justify-content: space-between;
             gap: 20px; padding: 11px 0; border-top: 1px solid var(--c-bordo-tenue); }
.attributo:first-child { padding-top: 0; border-top: 0; }
.attributo__etichetta { font-size: .95rem; color: var(--c-tenue); flex: 0 0 auto; }
.attributo__valore { font-size: .95rem; font-weight: 600; color: var(--c-inchiostro);
                     text-align: right; overflow-wrap: anywhere; }

/* Un paragrafo prende la riga intera e si legge da sinistra: incolonnato al
   margine destro come un numero, ha il bordo sinistro sfrangiato e non si
   legge. La view decide quali valori sono paragrafi. */
.attributo--lungo { display: block; }
.attributo--lungo .attributo__etichetta { font-size: .72rem; font-weight: 700;
                                          letter-spacing: .05em; text-transform: uppercase;
                                          color: var(--c-debole); display: block;
                                          margin-bottom: 4px; }
.attributo--lungo .attributo__valore { font-size: .95rem; font-weight: 500; line-height: 1.6;
                                       color: var(--c-testo); text-align: left;
                                       max-width: 80ch; }

/* --- la tabellina dentro una scheda --------------------------------------- */
.tabellina { width: 100%; border-collapse: collapse; }
.tabellina th {
    padding: 0 12px 9px 0; text-align: left;
    font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--c-debole); border-bottom: 1px solid var(--c-bordo);
}
.tabellina td { padding: 11px 12px 11px 0; font-size: .95rem; color: var(--c-testo);
                border-top: 1px solid var(--c-bordo-tenue); vertical-align: middle; }
.tabellina thead + tbody > tr:first-child > td { border-top: 0; }
.tabellina th:last-child, .tabellina td:last-child { padding-right: 0; }
.tabellina .a-destra { text-align: right; }
.tabellina .a-centro { text-align: center; }

/* --- i tasti per spostarsi fra una scheda e l'altra ----------------------- */
.spostamenti { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
               margin-right: auto; }
.spostamenti__tasto { display: inline-flex; align-items: center; gap: 6px; }
.spostamenti__icona { width: 16px; height: 16px; flex: 0 0 auto; }
/* Il primo e l'ultimo record non hanno un prima e un dopo: il tasto resta al
   suo posto spento, cosi' gli altri non si spostano. */
.spostamenti__tasto--spento { opacity: .4; pointer-events: none; }

@media (max-width: 767.98px) {
    .scheda { padding: 18px 16px; }
    .fatti { gap: 18px; }
}

/* ---------------------------------------------------------------------------
   13. Cassa
   ---------------------------------------------------------------------------
   Il registratore si usa in piedi al banco, spesso su un tablet, con le mani
   occupate: i bersagli sono grandi, le tre cose che servono stanno sullo
   stesso schermo senza scorrere, e il totale si legge dall'altra parte del
   banco. Le tre colonne sono - cosa si vende, i prodotti, lo scontrino.
   ------------------------------------------------------------------------ */
.cassa {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

/* --- la colonna di cosa si vende ----------------------------------------- */
.cassa__lato { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 76px; }

.cassa__gruppo {
    background: var(--c-carta); border: 1px solid var(--c-bordo);
    border-radius: var(--c-r-carta); padding: 14px;
}
.cassa__gruppo__titolo {
    font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--c-accento); margin: 0 0 10px; padding: 0 6px;
}

.cassa__voce {
    width: 100%; display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; margin-bottom: 2px;
    border: 0; border-radius: var(--c-r-campo); background: transparent;
    font-size: .95rem; font-weight: 500; color: var(--c-testo); text-align: left;
    cursor: pointer;
}
.cassa__voce:hover { background: var(--c-bordo-tenue); color: var(--c-inchiostro); }
.cassa__voce--attiva { background: var(--c-accento-fondo); color: var(--c-accento); font-weight: 600; }
.cassa__voce__icona { display: flex; flex: 0 0 auto; color: currentColor; }
.cassa__voce__icona svg { width: 18px; height: 18px; }
.cassa__voce__testo { min-width: 0; overflow-wrap: anywhere; }
.cassa__voce__freccia { margin-left: auto; display: flex; }
.cassa__voce__freccia svg { width: 15px; height: 15px; }

/* --- le azioni sullo scontrino ------------------------------------------- */
.cassa__azioni { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 12px; }

.cassa__azione {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 16px;
    background: var(--c-carta); border: 1px solid var(--c-bordo);
    border-radius: var(--c-r-carta);
    font-size: .95rem; font-weight: 600; color: var(--c-inchiostro);
    text-decoration: none; cursor: pointer; text-align: left;
}
.cassa__azione:hover { border-color: var(--c-debole); color: var(--c-inchiostro); text-decoration: none; }
.cassa__azione__icona { display: flex; flex: 0 0 auto; }
.cassa__azione__icona svg { width: 20px; height: 20px; }
.cassa__azione__testo { display: flex; flex-direction: column; min-width: 0; }
.cassa__azione__sotto { font-size: .8rem; font-weight: 400; opacity: .8; }
.cassa__azione__freccia { margin-left: auto; display: flex; opacity: .8; }
.cassa__azione__freccia svg { width: 18px; height: 18px; }

/* La spedizione e' l'azione che cambia il modo di battere tutto il resto:
   finche' e' aperta ogni riga ci finisce dentro, quindi si vede. */
.cassa__azione--primaria { background: var(--c-accento); border-color: var(--c-accento); color: #fff; }
.cassa__azione--primaria:hover { background: var(--c-accento-scuro); border-color: var(--c-accento-scuro); color: #fff; }
.cassa__azione--in-corso { background: var(--c-verde-fondo); border-color: var(--c-verde); color: var(--c-verde); }

/* --- l'intestazione del listino ------------------------------------------ */
.cassa__testa { display: flex; align-items: flex-end; justify-content: space-between;
                gap: 16px; margin: 22px 2px 14px; }
.cassa__titolo { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em;
                 color: var(--c-inchiostro); margin: 0; line-height: 1.2; }
.cassa__titolo__sep { color: var(--c-bordo); font-weight: 400; }
.cassa__sottotitolo { font-size: .95rem; color: var(--c-tenue); margin-top: 3px; }
.cassa__conteggio { font-size: .88rem; color: var(--c-tenue); flex: 0 0 auto; }

/* --- le schede dei prodotti ---------------------------------------------- */
.cassa__griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

.cassa__scheda {
    position: relative; display: flex; flex-direction: column;
    background: var(--c-carta); border: 1px solid var(--c-bordo);
    border-radius: var(--c-r-carta); padding: 12px;
}

/* La giacenza e' una pastiglia sull'angolo e non una riga in mezzo al testo:
   e' il dato che si guarda prima di battere, e a scontrino aperto si
   controlla venti volte. */
.cassa__giacenza {
    position: absolute; top: 9px; right: 9px; z-index: 2;
    padding: 2px 8px; border-radius: 999px;
    font-size: .72rem; font-weight: 600;
    background: var(--c-verde-fondo); color: var(--c-verde);
}
.cassa__giacenza--finito { background: var(--c-rosso-fondo); color: var(--c-rosso); }

.cassa__figura {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: 96px; margin-bottom: 9px;
    border-radius: var(--c-r-campo); overflow: hidden;
}
.cassa__figura img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Il riquadro e' grigio solo quando l'immagine manca: dietro a una foto di
   bottiglia, che e' su fondo bianco, il grigio diventava due fasce ai lati. */
.cassa__figura--senza { background: var(--c-fondo); }
.cassa__figura__vuota { display: none; }
.cassa__figura--senza .cassa__figura__vuota { display: flex; color: var(--c-bordo); }
.cassa__figura__vuota svg { width: 34px; height: 34px; }

/* Il nome e' quello che si cerca scorrendo la griglia: e' la riga piu'
   grande della scheda. Il prezzo si legge dopo, per conferma, e non ha
   bisogno di essere il doppio. */
.cassa__scheda__nome { font-size: 1.1rem; font-weight: 700; color: var(--c-inchiostro);
                       margin: 0; line-height: 1.25; overflow-wrap: anywhere; }
.cassa__scheda__formato { font-size: .8rem; color: var(--c-debole); margin-top: 1px; }
/* Tre righe di descrizione: le schede restano alte uguali in griglia, e chi
   deve leggere tutto apre l'anagrafica del prodotto. */
.cassa__scheda__testo {
    font-size: .82rem; line-height: 1.45; color: var(--c-tenue); margin: 6px 0 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Il fondo si attacca in basso: i tasti "Aggiungi" di tutte le schede finiscono
   sulla stessa riga anche quando i nomi vanno a capo in modo diverso. */
.cassa__scheda__fondo { margin-top: auto; padding-top: 9px; }
.cassa__prezzo { font-size: .98rem; font-weight: 700; color: var(--c-verde); text-align: center; }
.cassa__prezzo--variabile { font-size: .9rem; color: var(--c-accento); }

.cassa__contatore { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 7px 0; }
.cassa__contatore__tasto {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: 0 0 auto;
    border: 1px solid var(--c-bordo); border-radius: var(--c-r-campo);
    background: var(--c-carta); color: var(--c-tenue); cursor: pointer;
}
.cassa__contatore__tasto:hover { border-color: var(--c-accento); color: var(--c-accento); }
.cassa__contatore__tasto svg { width: 16px; height: 16px; }
.cassa__contatore__numero { min-width: 32px; text-align: center;
                            font-size: .95rem; font-weight: 700; color: var(--c-inchiostro); }

.cassa__aggiungi {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 12px; border: 0; border-radius: var(--c-r-campo);
    background: var(--c-accento); color: #fff;
    font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.cassa__aggiungi:hover { background: var(--c-accento-scuro); color: #fff; text-decoration: none; }
.cassa__aggiungi svg { width: 16px; height: 16px; }

/* --- lo scontrino -------------------------------------------------------- */
.cassa__carrello { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 76px; }
.cassa__carrello__testa { display: flex; align-items: center; justify-content: space-between;
                          gap: 12px; margin-bottom: 12px; }
.cassa__carrello__titolo { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em;
                           color: var(--c-inchiostro); margin: 0; }
.cassa__nuovo {
    padding: 5px 12px; border: 1px solid var(--c-bordo); border-radius: 999px;
    background: var(--c-carta); color: var(--c-accento);
    font-size: .82rem; font-weight: 600; cursor: pointer;
}
.cassa__nuovo:hover { background: var(--c-accento-fondo); border-color: var(--c-accento); }

.cassa__vuoto {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 34px 16px; border: 1px dashed var(--c-bordo); border-radius: var(--c-r-campo);
}
.cassa__vuoto__icona { display: flex; align-items: center; justify-content: center;
                       width: 64px; height: 64px; border-radius: 50%;
                       background: var(--c-fondo); color: var(--c-debole); margin-bottom: 12px; }
.cassa__vuoto__icona svg { width: 30px; height: 30px; }
.cassa__vuoto__titolo { font-size: 1rem; font-weight: 600; color: var(--c-testo); }
.cassa__vuoto__sotto { font-size: .85rem; color: var(--c-debole); margin-top: 2px; }

.cassa__righe { display: flex; flex-direction: column; }
.cassa__riga { display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
               align-items: center; gap: 10px; padding: 10px 0;
               border-bottom: 1px solid var(--c-bordo-tenue); }
.cassa__riga:last-child { border-bottom: 0; }
.cassa__riga__nome { font-size: .92rem; font-weight: 500; color: var(--c-inchiostro);
                     overflow-wrap: anywhere; }
.cassa__riga__bollino { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
                        margin-right: 5px; vertical-align: 1px; }
.cassa__riga__importo { font-size: .95rem; font-weight: 700; color: var(--c-inchiostro);
                        min-width: 68px; text-align: right; }
.cassa__contatore--riga { margin: 0; }
.cassa__contatore--riga .cassa__contatore__tasto { width: 28px; height: 28px; }
.cassa__contatore--riga .cassa__contatore__numero { min-width: 26px; font-size: .92rem; }

.cassa__conti { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-bordo); }
.cassa__conti__riga { display: flex; justify-content: space-between; gap: 12px;
                      font-size: .85rem; color: var(--c-tenue); padding: 3px 0; }
.cassa__conti__riga--sconto { color: var(--c-ambra); font-weight: 600; }
.cassa__togli-sconto { border: 0; background: transparent; padding: 0 0 0 4px;
                       color: var(--c-rosso); cursor: pointer; vertical-align: -3px; }
.cassa__togli-sconto svg { width: 15px; height: 15px; }

/* Il totale e' il numero che si legge dall'altra parte del banco. */
.cassa__totale {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 12px; padding: 16px 18px; border-radius: var(--c-r-campo);
    background: var(--c-verde); color: #fff;
}
.cassa__totale__parola { font-size: 1.05rem; font-weight: 600; }
.cassa__totale__cifra { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }

.cassa__pagamento { margin-top: 18px; }
.cassa__pagamento__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cassa__metodo {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 12px; border: 1px solid var(--c-bordo); border-radius: var(--c-r-campo);
    background: var(--c-carta); color: var(--c-testo);
    font-size: .85rem; font-weight: 500; text-align: left; cursor: pointer;
}
.cassa__metodo:hover { border-color: var(--c-debole); color: var(--c-inchiostro); }
.cassa__metodo svg { width: 17px; height: 17px; flex: 0 0 auto; }
.cassa__metodo--scelto { background: var(--c-accento-fondo); border-color: var(--c-accento);
                         color: var(--c-accento); font-weight: 600; }

.cassa__chiudi { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.cassa__termina {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px; border: 0; border-radius: var(--c-r-campo);
    background: var(--c-verde); color: #fff;
    font-size: 1.05rem; font-weight: 600; cursor: pointer;
}
.cassa__termina:hover { filter: brightness(.94); }
.cassa__termina--stampa { background: var(--c-accento); }
.cassa__termina svg { width: 19px; height: 19px; }
/* Senza righe non c'e' niente da chiudere: il tasto resta al suo posto
   spento, cosi' la colonna non si riorganizza appena si batte il primo. */
.cassa__termina:disabled { background: var(--c-bordo-tenue); color: var(--c-debole); cursor: default; }
.cassa__termina:disabled:hover { filter: none; }

.cassa__spedizione { display: flex; align-items: center; font-size: .9rem; color: var(--c-testo);
                     padding: 4px 0; }
.cassa__saldo { font-size: 1rem; font-weight: 700; color: var(--c-inchiostro); }
.cassa__movimenti { display: flex; gap: 8px; }
.cassa__movimento {
    flex: 1 1 0; text-align: center; padding: 9px 12px;
    border: 1px solid var(--c-bordo); border-radius: var(--c-r-campo);
    background: var(--c-carta); color: var(--c-testo);
    font-size: .88rem; font-weight: 500; text-decoration: none;
}
.cassa__movimento:hover { border-color: var(--c-accento); color: var(--c-accento); text-decoration: none; }

/* --- la riga in fondo ---------------------------------------------------- */
.cassa__piede {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 10px;
    margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--c-bordo);
    font-size: .82rem; color: var(--c-debole);
}
.cassa__piede__nome { font-weight: 600; color: var(--c-tenue); letter-spacing: .04em; }
.cassa__piede__sep { color: var(--c-bordo); }
.cassa__piede__destra { margin-left: auto; }

@media (max-width: 1399.98px) {
    .cassa { grid-template-columns: 184px minmax(0, 1fr) 320px; gap: 14px; }
    .cassa__azioni { grid-template-columns: 1.6fr 1fr 1fr; }
    .cassa__azioni .cassa__azione:last-child { grid-column: 2 / -1; }
}

@media (max-width: 1199.98px) {
    /* Sotto questa larghezza tre colonne diventano tre strisce: meglio
       impilare lo scontrino sotto ai prodotti che comprimerli tutti. */
    .cassa { grid-template-columns: 184px minmax(0, 1fr); }
    .cassa__carrello { grid-column: 1 / -1; position: static; }
    .cassa__carrello .cassa__gruppo { max-width: 520px; }
}

@media (max-width: 767.98px) {
    .cassa { grid-template-columns: minmax(0, 1fr); }
    .cassa__lato { grid-column: 1 / -1; position: static; flex-direction: row; flex-wrap: wrap; }
    .cassa__lato .cassa__gruppo { flex: 1 1 240px; }
    .cassa__azioni { grid-template-columns: 1fr 1fr; }
    .cassa__azioni .cassa__azione--larga { grid-column: 1 / -1; }
    .cassa__azioni .cassa__azione:last-child { grid-column: auto; }
    .cassa__titolo { font-size: 1.4rem; }
}