/* ==========================================================
 * styles.css — La Barberia · Backoffice
 * Design system moderno (Bootstrap 5 + custom). Caricato per ultimo.
 * Brand: RAL 6005 verde muschio · crema · nero.
 * ========================================================== */

:root {
    --bs-primary: #2F4538;
    --bs-primary-rgb: 47, 69, 56;

    --barber-green: #2F4538;
    --barber-green-600: #24382c;
    --barber-green-300: #6f8a78;
    --barber-cream: #F5F0E8;
    --barber-ink: #14171a;
    --barber-leather: #8B5E3C;
    --barber-wine: #7A2E2E;

    --app-bg: #eef0ec;          /* sfondo area lavoro, verde-grigio tenue */
    --card-bg: #ffffff;
    --text: #23272b;
    --muted: #8a9299;
    --line: #e7e9e4;
    --sidebar-w: 256px;

    --radius: 12px;
    --radius-sm: 9px;
    --shadow-sm: 0 1px 2px rgba(20,23,26,.04), 0 1px 3px rgba(20,23,26,.06);
    --shadow: 0 4px 16px rgba(20,23,26,.06);
    --shadow-lg: 0 12px 32px rgba(20,23,26,.12);

    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --bs-border-radius: var(--radius-sm);
}

body {
    background: var(--app-bg);
    color: var(--text);
    font-family: var(--bs-body-font-family);
    font-size: .925rem;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .page-title, .header-logo, .navbar-brand, .card-title, .modal-title {
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: .2px;
    color: var(--barber-ink);
}

a { color: var(--barber-green); text-decoration: none; }
a:hover { color: var(--barber-green-600); }

/* ===================== SIDEBAR ===================== */
.app-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: linear-gradient(180deg, #1b2420 0%, #14171a 100%);
    border-right: 1px solid rgba(255,255,255,.05);
    overflow-y: auto;
    z-index: 1040;
    box-shadow: 2px 0 20px rgba(0,0,0,.06);
}
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

.main-sidebar-header {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    text-align: center;
    position: relative;
}
.header-logo { display: block; }
.header-logo .logo-text {
    color: var(--barber-cream);
    letter-spacing: 1.5px; text-transform: uppercase;
    font-size: 1.15rem; font-weight: 600;
}
/* Logo del negozio nella sidebar. Il fondo della sidebar e' scuro, quindi un logo con parti
   scure va reso bianco — ma il trucco `brightness(0) invert(1)` sbianca TUTTO il rettangolo,
   quindi funziona solo con i PNG/WEBP a fondo trasparente. Con un JPEG (fondo bianco pieno)
   il risultato era un quadrato bianco: il logo scompariva. Ora il filtro si applica solo dove
   ha senso, e le immagini opache si mostrano su una targhetta chiara. */
.header-logo .sidebar-logo-img {
    display: block;
    margin: 0 auto;
    max-height: 72px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}
.header-logo .sidebar-logo-img.logo-mono {
    filter: brightness(0) invert(1);
}
.header-logo .sidebar-logo-img.logo-flat {
    background: #fff;
    padding: 6px;
    border-radius: 8px;
    max-height: 64px;
}

.main-menu { list-style: none; padding: .85rem .6rem; margin: 0; }
.main-menu .slide { margin-bottom: 2px; }
.main-menu .side-menu__item {
    display: flex; align-items: center; gap: .8rem;
    padding: .62rem .8rem;
    color: #b9c2bc;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 500; font-size: .9rem;
    transition: background .15s, color .15s;
}
.main-menu .side-menu__item:hover { background: rgba(255,255,255,.06); color: #fff; }

/* --- Voci di menu con sotto-elenco -------------------------------------
   Servono a tenere corta la barra laterale: le pagine parenti stanno sotto
   un'unica voce che si apre solo quando serve. */
.main-menu .slide.has-sub .side-menu__angle {
    margin-left: auto;
    font-size: .7rem;
    transition: transform .18s;
}
.main-menu .slide.has-sub.open .side-menu__angle { transform: rotate(180deg); }
.main-menu .slide-menu {
    list-style: none;
    margin: 2px 0 4px;
    padding: 0 0 0 1.65rem;      /* rientro sotto l'icona della voce padre */
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
}
.main-menu .slide.has-sub.open > .slide-menu { max-height: 30rem; }
.main-menu .slide-menu .side-menu__item {
    padding: .45rem .8rem;
    font-size: .86rem;
}
.main-menu .slide-menu .side-menu__icon { font-size: .8rem; opacity: .85; }

.main-menu .side-menu__item.active {
    background: var(--barber-green);
    color: #fff;
    box-shadow: 0 4px 12px rgba(47,69,56,.4);
}
.main-menu .side-menu__icon { font-size: 1.1rem; width: 20px; text-align: center; opacity: .95; }
.main-menu .side-menu__label { flex: 1; }

/* Blocco utente in fondo alla sidebar */
.sidebar-user {
    margin: .5rem .6rem 1rem;
    padding: .7rem .8rem;
    background: rgba(255,255,255,.05);
    border-radius: var(--radius-sm);
    color: #cdd4cf;
    display: flex; align-items: center; gap: .6rem;
    font-size: .82rem;
}
.sidebar-user .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--barber-green); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-family: Georgia, serif;
    flex: 0 0 34px;
}

/* ===================== CONTENUTO ===================== */
.main-content { margin-left: var(--sidebar-w); padding: 1.75rem 2rem 3rem; min-height: 100vh; }

.page-header-breadcrumb {
    background: transparent;
    margin: 0 0 1.5rem !important;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}
.page-title { font-size: 1.55rem !important; margin-bottom: .15rem !important; }
.breadcrumb { font-size: .82rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }

/* ===================== CARD ===================== */
.card {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s;
}
.card:hover { box-shadow: var(--shadow); }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.25rem;
    font-weight: 600;
}
.card-body { padding: 1.25rem; }
.card-title { font-size: 1.05rem; }

/* Card statistiche dashboard */
.card h2, .card h3 { color: var(--barber-ink); }
.card h6.text-muted { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; color: var(--muted) !important; }

/* ===================== TABELLE ===================== */
.table { --bs-table-bg: transparent; margin: 0; }
.table thead th {
    background: #f7f8f6;
    color: #5b6b60;
    text-transform: uppercase; font-size: .7rem; letter-spacing: .6px; font-weight: 700;
    border-bottom: 1px solid var(--line);
    padding: .75rem 1rem;
}
.table tbody td { padding: .8rem 1rem; border-color: var(--line); vertical-align: middle; }
.table-hover tbody tr:hover { background: #f7f9f7; }

/* ===================== BOTTONI ===================== */
.btn { border-radius: var(--radius-sm); font-weight: 600; padding: .5rem .95rem; }
.btn-sm { padding: .3rem .6rem; border-radius: 7px; }
.btn-lg { border-radius: var(--radius); }
.btn-primary { --bs-btn-bg:#2F4538; --bs-btn-border-color:#2F4538; --bs-btn-hover-bg:#24382c; --bs-btn-hover-border-color:#24382c; --bs-btn-active-bg:#1c2c22; }
.btn-outline-primary { --bs-btn-color:#2F4538; --bs-btn-border-color:#cdd6cf; --bs-btn-hover-bg:#2F4538; --bs-btn-hover-border-color:#2F4538; }
.btn-success { --bs-btn-bg:#3E7A52; --bs-btn-border-color:#3E7A52; --bs-btn-hover-bg:#336646; }

/* ===================== BADGE ===================== */
.badge { font-weight: 600; padding: .38em .65em; border-radius: 999px; letter-spacing: .2px; }
.badge.bg-primary { background-color: var(--barber-green) !important; }

/* ===================== FORM ===================== */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: #dfe3dd;
    padding: .55rem .8rem;
    font-size: .9rem;
}
/* i select hanno bisogno di spazio a destra per la freccia, altrimenti il testo la tocca */
.form-select {
    padding-right: 2.25rem;
    background-position: right .75rem center;
}
.form-select.form-select-sm { padding-right: 2rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--barber-green-300);
    box-shadow: 0 0 0 .2rem rgba(47,69,56,.12);
}
.form-label { font-weight: 600; font-size: .82rem; color: #4b524d; margin-bottom: .35rem; }
.input-group-text { border-radius: var(--radius-sm); background: #f3f5f2; border-color: #dfe3dd; }

/* ===================== MODAL ===================== */
.modal-content { border: none; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--line); padding: 1.1rem 1.25rem; }
.modal-body { padding: 1.25rem; }

/* ===================== ALERT ===================== */
.alert { border: none; border-radius: var(--radius-sm); border-left: 4px solid transparent; }
.alert-info { background: #eef3f0; border-left-color: var(--barber-green); color: #2b3a31; }
.alert-warning { background: #fdf6e9; border-left-color: #d9a441; color: #7a5b18; }
.alert-success { background: #edf6ef; border-left-color: #3E7A52; }
.alert-danger { background: #fbeceb; border-left-color: var(--barber-wine); }

/* ===================== NAV TABS ===================== */
.nav-tabs { border-bottom: 1px solid var(--line); }
.nav-tabs .nav-link { color: var(--muted); font-weight: 600; border: none; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: var(--barber-green); border-bottom-color: var(--barber-green); background: transparent; }

/* ===================== PROGRESS (report) ===================== */
.progress { background: #e9ece8; border-radius: 999px; }
.progress-bar { border-radius: 999px; }

/* ===================== LOGIN ===================== */
.login-page {
    background: radial-gradient(1200px 600px at 50% -10%, #24312a 0%, #14171a 60%) !important;
}
.login-page .card { background: var(--barber-cream); border: none; border-radius: 16px; box-shadow: var(--shadow-lg); }
.login-page h1 { color: var(--barber-ink); }

/* ===================== MOBILE ===================== */
@media (max-width: 992px) {
    .app-sidebar { transform: translateX(-100%); transition: transform .2s; z-index: 1045; width: 272px; box-shadow: 0 0 40px rgba(0,0,0,.35); }
    [data-toggled="open"] .app-sidebar { transform: translateX(0); }
    .main-content { margin-left: 0; padding: 1rem; padding-top: 4rem; }   /* spazio per il tasto menu */
    #sidebarToggle { box-shadow: 0 4px 14px rgba(0,0,0,.25); width: 44px; height: 44px; }
    #sidebarBackdrop { display: none; position: fixed; inset: 0; background: rgba(15,18,14,.45); z-index: 1044; }
    [data-toggled="open"] #sidebarBackdrop { display: block; }
}
@media (min-width: 993px){ #sidebarBackdrop { display: none !important; } }

/* Mobile piccolo: leggibilità + tasti grandi (touch) */
@media (max-width: 575px){
    body { font-size: 1rem; }
    .app-content .btn, .app-content .btn-sm { min-height: 44px; }
    .btn { padding-top: .5rem; padding-bottom: .5rem; }
    .card-body { padding: 1rem; }
    .table td, .table th { padding: .6rem .5rem; }
    .page-title, .page-header h1 { font-size: 1.45rem; }
    .modal-dialog { margin: .5rem; }
    .form-control, .form-select { font-size: 1rem; min-height: 44px; }
    .qa-tiles .qa-tile { flex: 1 1 46%; }
}

/* toastr */
#toast-container > div { opacity: .97; border-radius: var(--radius-sm); box-shadow: var(--shadow); }

/* ==========================================================
 * REFRESH 2026 — rifinitura visiva (card, bottoni, menu, tooltip, setup)
 * ========================================================== */
:root{ --shadow-soft: 0 1px 2px rgba(20,23,26,.04), 0 6px 20px rgba(20,23,26,.06); }
body{ font-size:.93rem; }

/* Card: elevazione morbida + lift all'hover + header con filo brand */
.card{ box-shadow: var(--shadow-soft); transition: box-shadow .2s ease, transform .2s ease; }
.card:hover{ box-shadow: var(--shadow); transform: translateY(-2px); }
.card:has(.table){ transform:none; } /* non muovere le card-tabella all'hover */
.card:has(.table):hover{ transform:none; }
.card-header{ background:linear-gradient(0deg, rgba(47,69,56,.015), transparent); }
.card-header h5, .card-header h6{ display:flex; align-items:center; gap:.5rem; }

/* Bottoni: micro-lift + ombra sul primario */
.btn{ transition: transform .12s ease, box-shadow .15s ease, background .15s ease; }
.btn-primary{ box-shadow: 0 4px 12px rgba(47,69,56,.18); }
.btn:active{ transform: translateY(1px); }
.btn-primary:hover, .btn-success:hover{ box-shadow: 0 6px 16px rgba(47,69,56,.24); }
.btn-outline-secondary{ --bs-btn-color:#4b544d; --bs-btn-border-color:#d7ddd7; --bs-btn-hover-bg:#eef1ec; --bs-btn-hover-border-color:#c7cfc7; --bs-btn-hover-color:#24382c; }

/* Sidebar: voce attiva con barra accento + icona in chip */
.main-menu .side-menu__item{ position:relative; }
.main-menu .side-menu__item.active::before{ content:""; position:absolute; left:-.6rem; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--barber-leather); }
.main-menu .side-menu__icon{ transition: transform .15s; }
.main-menu .side-menu__item:hover .side-menu__icon{ transform: scale(1.12); }

/* Tooltip in tinta */
.tooltip.show{ --bs-tooltip-bg:#1b2420; --bs-tooltip-color:#f3ead4; opacity:1; }
.tooltip-inner{ font-size:.78rem; padding:.4rem .6rem; border-radius:8px; box-shadow:var(--shadow); }
/* pallino "?" di aiuto accanto ai titoli */
.help{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:#e2e7e2; color:#5b6b60; font-size:.68rem; font-weight:700; cursor:help; }
.help:hover{ background:var(--barber-green); color:#fff; }

/* Badge soft (stati) */
.badge.bg-warning{ color:#5a4409 !important; }
.badge.soft-green{ background:rgba(62,122,82,.14); color:#2f6b41; }
.badge.soft-wine{ background:rgba(122,46,46,.12); color:var(--barber-wine); }

/* Empty state coerente */
.empty-state{ text-align:center; color:var(--muted); padding:2.2rem 1rem; }
.empty-state .bi{ font-size:2.2rem; opacity:.6; }

/* Checklist setup (mini-wizard dashboard) */
.setup-card{ border:1px solid var(--line); border-left:4px solid var(--barber-leather); }
.setup-item{ display:flex; align-items:center; gap:.7rem; padding:.55rem 0; border-top:1px solid var(--line); }
.setup-item:first-child{ border-top:0; }
.setup-item .tick{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex:none; }
.setup-item .tick.ok{ background:rgba(62,122,82,.15); color:#2f6b41; }
.setup-item .tick.todo{ background:#eceee9; color:#9aa39c; }
.setup-item.done .setup-lbl{ color:var(--muted); text-decoration:line-through; }
.setup-item .setup-lbl{ flex:1; font-weight:600; font-size:.92rem; }

/* payoff sotto il logo nella sidebar */
.sidebar-payoff{ text-align:center; font-size:.58rem; letter-spacing:3px; text-transform:uppercase; color:var(--barber-green-300); margin-top:4px; padding:0 .5rem; font-family:var(--bs-body-font-family); }

/* ===== Aletta "Calendario" fissa a destra ===== */
.cal-flag{
    position:fixed; right:0; top:50%; transform:translateY(-50%);
    z-index:60; display:flex; align-items:center; gap:.4rem;
    writing-mode:vertical-rl; text-orientation:mixed;
    background:#c0392b; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.5px;
    padding:.9rem .45rem; border-radius:12px 0 0 12px;
    box-shadow:-4px 4px 16px rgba(192,57,43,.4);
    transition:padding-right .18s, background .18s, box-shadow .18s;
}
.cal-flag i{ font-size:1.2rem; margin-bottom:.2rem; }
.cal-flag span{ font-size:.9rem; }
.cal-flag:hover{ color:#fff; background:#a93226; padding-right:.8rem; box-shadow:-6px 6px 22px rgba(192,57,43,.5); }
@media(max-width:575px){ .cal-flag{ padding:.7rem .35rem; } .cal-flag span{ font-size:.82rem; } }
@media print{ .cal-flag{ display:none; } }

/* scrollbar leggera */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#d5dbd4; border-radius:6px; border:2px solid transparent; background-clip:content-box; }

/* ===== TOPBAR con profilo utente ===== */
:root{ --topbar-h:60px; }
.app-topbar{ position:fixed; top:0; left:var(--sidebar-w); right:0; height:var(--topbar-h); z-index:45;
    background:var(--card-bg,#fff); border-bottom:1px solid var(--line,#e8ece7);
    display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 2rem; }
/* testo motivazionale scorrevole nella topbar */
.tb-ticker{ flex:1; min-width:0; display:flex; align-items:center; gap:.6rem; overflow:hidden; }
.tb-ticker .ic{ flex:none; color:var(--barber-green); font-size:1rem; }
.tb-ticker .vp{ flex:1; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 2%,#000 94%,transparent); }
.tb-ticker .trk{ display:inline-flex; gap:3.5rem; white-space:nowrap; animation:hpTick 60s linear infinite; will-change:transform; }
.tb-ticker:hover .trk{ animation-play-state:paused; }
.tb-ticker .trk span{ font-family:Georgia,serif; font-style:italic; color:var(--ink,#1b211d); font-size:.92rem; }
@keyframes hpTick{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce){ .tb-ticker .trk{ animation:none } }
.main-content{ padding-top:calc(var(--topbar-h) + 1.25rem) !important; }
.tb-user{ display:flex; align-items:center; gap:.6rem; background:transparent; border:1px solid transparent; border-radius:999px; padding:.3rem .6rem .3rem .35rem; cursor:pointer; transition:background .15s,border-color .15s; }
.tb-user:hover{ background:rgba(var(--bs-primary-rgb),.07); border-color:var(--line); }
.tb-user::after{ display:none; } /* rimuovo caret bootstrap default */
.tb-av{ width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--barber-green),var(--barber-green-600)); color:#fff; font-weight:700; font-size:.9rem; overflow:hidden; }
.tb-av img{ width:100%; height:100%; object-fit:cover; }
.tb-meta{ text-align:left; line-height:1.1; max-width:170px; }
.tb-meta .n{ font-weight:600; font-size:.9rem; color:var(--ink,#1b211d); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-meta .r{ font-size:.72rem; color:var(--muted,#7b857e); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-caret{ color:var(--muted,#7b857e); font-size:.8rem; }
.app-topbar .dropdown-menu{ min-width:230px; }
@media(max-width:991.98px){
    .app-topbar{ left:0; padding:0 1rem 0 64px; height:56px; }
    :root{ --topbar-h:56px; }
    .main-content{ padding-top:calc(56px + 1rem) !important; }
    .tb-meta{ display:none; }
    .tb-ticker{ display:none; }
}

/* Handoff "scatta col telefono" (QR) nelle schede prodotto/servizio */
.cam-box{border:1px dashed #d7dad3;border-radius:12px;padding:12px;background:#fafbf9}
.cam-qr .cam-qr-code{display:inline-block;background:#fff;padding:8px;border-radius:10px;border:1px solid #eef0ec}
.cam-qr .cam-qr-code img,.cam-qr .cam-qr-code canvas{display:block}

/* ===================== SOTTO-NAVIGAZIONE MARKETING =====================
   Un selettore unico (inc/marketing-tabs.php), non quattro bottoni: la parte
   accesa e' la pagina in cui ti trovi. */
.mkt-tabs{
    display:inline-flex; gap:2px; padding:4px; margin-bottom:1.1rem;
    background:#e6e9e4; border-radius:999px; max-width:100%; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.mkt-tabs::-webkit-scrollbar{ display:none; }
.mkt-tab{
    display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
    padding:.5rem 1rem; border-radius:999px; font-size:.88rem; font-weight:600;
    color:#5b6b60; transition:background .15s, color .15s, box-shadow .15s;
}
.mkt-tab i{ font-size:.95rem; opacity:.85; }
.mkt-tab:hover{ color:var(--barber-green); background:rgba(255,255,255,.65); }
.mkt-tab.on{
    background:var(--card-bg); color:var(--barber-green);
    box-shadow:0 1px 2px rgba(20,23,26,.10), 0 2px 8px rgba(20,23,26,.06);
}
.mkt-tab.on i{ opacity:1; }
@media(max-width:575.98px){
    .mkt-tabs{ display:flex; width:100%; }
    .mkt-tab{ padding:.5rem .8rem; font-size:.84rem; }
    .mkt-tab span{ display:none; }
    .mkt-tab.on span{ display:inline; }
}

/* ===================== PAGAMENTI PREPAGATI =====================
   Premio, pacchetto e gift card erano gialli: su fondo chiaro il giallo di
   Bootstrap si legge male e quei pulsanti, che sono la scelta meno ovvia,
   finivano per essere i meno visibili. Tre tonalita' del verde del salone
   (RAL 6005), distinte fra loro: piu' scura il premio, media il pacchetto,
   salvia la gift card. */
.btn-prep{
    --prep: var(--barber-green);
    color:#fff; background:var(--prep); border:1px solid var(--prep);
}
.btn-prep:hover, .btn-prep:focus, .btn-prep:active{
    color:#fff; background:var(--prep); border-color:var(--prep); filter:brightness(.92);
}
.btn-prep:focus-visible{ box-shadow:0 0 0 .2rem rgba(47,69,56,.25); }

/* Stessa famiglia, ma da spento: serve ai radio (btn-check) della vendita al banco. */
.btn-prep-out{
    --prep: var(--barber-green);
    color:var(--prep); background:var(--card-bg); border:1px solid var(--prep);
}
.btn-prep-out:hover{ color:#fff; background:var(--prep); }
.btn-check:checked + .btn-prep-out{ color:#fff; background:var(--prep); border-color:var(--prep); }

.btn-premio   { --prep:#24382C; }   /* verde scuro */
.btn-pacchetto{ --prep:#3F6350; }   /* verde medio */
.btn-gift     { --prep:#6F8A78; }   /* verde salvia */