/* =====================================================================
   STILE 4SV - sopra Bulma. Nessun JavaScript nel progetto:
   menu mobile, notifiche e colori delle select sono gestiti qui in CSS.
   ===================================================================== */

/* --- GENERALE --- */
/* Colori presi dalle variabili di Bulma: cambiano da soli con il tema chiaro/scuro */
html, body { background-color: var(--bulma-scheme-main-bis); }
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { flex: 1; }
.main-box { padding: 1.25rem; }

::placeholder { color: var(--bulma-text-weak) !important; font-weight: 300; opacity: .7; }

.id-tecnico { font-weight: 500; font-size: .8rem; letter-spacing: .5px; color: var(--bulma-text-strong); }

/* Campo in sola lettura */
.input.is-static-box { background-color: var(--bulma-background); color: var(--bulma-text); box-shadow: none; cursor: default; }

/* --- MENU MOBILE SENZA JAVASCRIPT --- */
.menu-toggle { display: none; }
.navbar-burger { color: #fff; }
@media screen and (max-width: 1023px) {
    .menu-toggle:checked ~ .navbar-menu { display: block; }
    .menu-toggle:checked ~ .navbar-brand .navbar-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
    .menu-toggle:checked ~ .navbar-brand .navbar-burger span:nth-child(2) { opacity: 0; }
    .menu-toggle:checked ~ .navbar-brand .navbar-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
    .menu-toggle:checked ~ .navbar-brand .navbar-burger span:nth-child(4) { opacity: 0; }
}

/* --- AVVISI DELL'APP (senza JavaScript): riquadri in alto a destra, colori da Colori dell'app --- */
.avvisi { position: fixed; top: 64px; right: 16px; z-index: 100; width: 340px; max-width: calc(100vw - 32px);
          display: flex; flex-direction: column; gap: .55rem; pointer-events: none; }
.avviso { --c: var(--c-notifica_info, #3e8ed0); pointer-events: auto; position: relative; display: flex; gap: .65rem;
          padding: .7rem 2.1rem .8rem .7rem; border-radius: 10px; overflow: hidden; max-height: 400px;
          background: var(--bulma-scheme-main); color: var(--bulma-text); border: 1px solid var(--bulma-border);
          box-shadow: 0 8px 24px rgba(0, 0, 0, .28); font-size: .85rem; word-break: break-word; }
.avviso-success { --c: var(--c-notifica_success, #48c78e); --ct: var(--c-notifica_success-t, #fff); }
.avviso-info    { --c: var(--c-notifica_info, #3e8ed0); --ct: var(--c-notifica_info-t, #fff); }
.avviso-warning { --c: var(--c-notifica_warning, #ffb70f); --ct: var(--c-notifica_warning-t, #111); }
.avviso-danger  { --c: var(--c-notifica_danger, #f14668); --ct: var(--c-notifica_danger-t, #fff); }
.avviso-icona { width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                background: var(--c); color: var(--ct, #fff); font-size: 1.05rem; }
.avviso-corpo { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.avviso-corpo b { font-size: .9rem; }
.avviso-corpo span { color: var(--bulma-text-weak); }
.avviso-azione { color: var(--c); font-weight: 700; margin-top: .2rem; }
.avviso-chiudi { position: absolute; top: .45rem; right: .55rem; cursor: pointer; color: var(--bulma-text-weak); font-size: .85rem; }
.avviso-chiudi:hover { color: var(--bulma-text); }
.avviso-tempo { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c);
                animation: avviso-tempo var(--ritardo, 5s) linear forwards; }
.avviso-fisso { position: absolute; right: .55rem; bottom: .3rem; font-size: .62rem; color: var(--bulma-text-weak); }
.avviso-danger .avviso-corpo { padding-bottom: .5rem; }
@keyframes avviso-tempo { to { width: 0; } }
.flash-chiudi, .avvisi-tutti { display: none; }
.flash-chiudi:checked + .avviso { display: none; }                  /* chiusura con la X */
.avviso.auto { animation: flash-sparisci .45s ease forwards; animation-delay: var(--ritardo, 5s); }
.avviso:hover, .avviso:hover .avviso-tempo { animation-play-state: paused; }   /* col mouse sopra non sparisce */
@keyframes flash-sparisci {
    to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; visibility: hidden; }
}
.avviso-oltre { display: none; }                                     /* al massimo 3, gli altri a richiesta */
.avvisi-tutti:checked ~ .avviso-oltre { display: flex; }
.avvisi-tutti:checked ~ .avvisi-altri { display: none; }
.avvisi-altri { pointer-events: auto; align-self: flex-end; font-size: .75rem; cursor: pointer; padding: .2rem .7rem; border-radius: 12px;
                background: var(--bulma-scheme-main); border: 1px solid var(--bulma-border); color: var(--bulma-text-weak); }
@media (max-width: 768px) {                                          /* telefono: in basso, a tutta larghezza */
    .avvisi { top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; max-width: none; flex-direction: column-reverse; }
}
@media (prefers-reduced-motion: reduce) { .avviso-tempo { animation: none; } }

/* --- TABELLE --- */
.table.is-narrow td, .table.is-narrow th { vertical-align: middle; }
.data-compatta { line-height: 1.1; display: block; text-align: center; white-space: nowrap; }
.data-compatta .ora { font-size: .72rem; color: var(--bulma-text-weak); }
code.token { font-size: .7rem; }
form.inline { display: inline; }

/* --- CARD CLICCABILI (home) --- */
.card-hover { transition: transform .3s ease, box-shadow .3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, .1); }

/* --- GRIGLIA PERMESSI: la select si colora da sola con :has() --- */
.tab-perm td, .tab-perm th { vertical-align: middle; }
.tab-perm .riga-modulo td { background: var(--bulma-background); font-weight: 600; }
/* casella a 3 stati (eredita / Sì / No) senza JavaScript: radio nascosti + etichetta dello stato scelto */
.tri { display: inline-block; vertical-align: middle; }
.tri input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.tri-box { display: none; width: 1.35rem; height: 1.35rem; border: 2px solid #b5b5b5; border-radius: 4px;
           align-items: center; justify-content: center; cursor: pointer; font-size: .85rem; line-height: 1; user-select: none; }
.tri input:nth-of-type(1):checked ~ .tri-n,
.tri input:nth-of-type(2):checked ~ .tri-s,
.tri input:nth-of-type(3):checked ~ .tri-x { display: inline-flex; }
.tri-s, .tri-legenda.is-si { border-color: #48c78e; background: #48c78e; color: #fff; }
.tri-x, .tri-legenda.is-no { border-color: #f14668; background: #f14668; color: #fff; }
.tri-legenda { display: inline-flex; width: 1rem; height: 1rem; font-size: .65rem; cursor: default; vertical-align: middle; }
.tri input:focus-visible ~ .tri-box { outline: 2px solid #485fc7; outline-offset: 2px; }
.tri input:disabled ~ .tri-box { cursor: not-allowed; opacity: .6; }
.eff { font-size: .7rem; margin-left: .2rem; }

/* --- BARRA PERCORSO + INDIETRO --- */
.barra-percorso {
    margin: -.25rem 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--bulma-border-weak);
}
.barra-percorso .breadcrumb li.is-active a { color: var(--bulma-text-strong); font-weight: 600; }

/* --- SALUTO E DATA AL CENTRO DELLA BARRA (solo desktop) --- */
@media screen and (min-width: 1024px) {
    .navbar-centro { flex-grow: 1; justify-content: center; margin-right: 0; }
}

/* --- MENU TEMA --- */
.navbar-dropdown .navbar-item.is-active { font-weight: 600; }

/* --- FOTO ARTICOLI --- */
.foto-mini { object-fit: cover; border-radius: 4px; width: 48px; height: 48px; }
.foto-articolo img { max-height: 220px; object-fit: contain; border-radius: 6px; }
.foto-vuota { border: 2px dashed var(--bulma-border); border-radius: 6px; padding: 2.5rem 0; color: var(--bulma-text-weak); font-size: 2rem; }
.foto-vuota span { font-size: .75rem; }
.modello-card .foto-modello { object-fit: contain; background: var(--bulma-scheme-main-bis); }
.foto-mini { width: 1.1rem; height: 1.1rem; object-fit: cover; border-radius: 3px; vertical-align: middle; }
.foto-mini-pezzo { width: 2rem; height: 2rem; object-fit: contain; border-radius: 4px; background: var(--bulma-scheme-main-bis); display: block; }
.riga-filtri td { padding: .25rem .2rem !important; background: var(--bulma-scheme-main-bis); vertical-align: top; }
.riga-filtri .input, .riga-filtri select { min-width: 4.5rem; }
.tabella-pezzi .riga-filtri td { padding: .25rem .2rem; background: var(--bulma-scheme-main-bis); }
.tabella-pezzi .riga-filtri .input, .tabella-pezzi .riga-filtri select { min-width: 4.5rem; }
.foto-vuota-modello { padding: 1.5rem 0; border-radius: 6px 6px 0 0; }
select[multiple] { width: 100%; }
.prezzo-listino { max-width: 7.5rem; text-align: right; }

/* --- FOOTER --- */
.footer-4sv { padding: .75rem 0 1rem; font-size: .7rem; }
.footer-4sv .logo-footer { opacity: .5; vertical-align: middle; margin-right: .4rem; }

/* --- Nuovo articolo: campi foto diversi per Vendita / Comodato (senza JavaScript) --- */
form:has(select[name="uso"] option[value="vendita"]:checked) .solo-comodato { display: none; }

/* --- STRISCIA FOTO DELL'ARTICOLO (foto dei modelli): miniature piccole, le altre scorrendo, senza JavaScript --- */
.foto-striscia { display: flex; gap: .35rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .35rem;
                 justify-content: safe center; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.foto-striscia-voce { flex: 0 0 3.75rem; scroll-snap-align: start; text-align: center;
                      border: 2px solid transparent; border-radius: 5px; padding: .1rem; color: inherit; }
.foto-striscia-voce img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 3px;
                          background: var(--bulma-scheme-main-bis); display: block; }
.foto-striscia-voce span { display: block; font-size: .6rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foto-striscia-voce:hover { border-color: var(--bulma-border); }
.foto-striscia-voce.is-attiva { border-color: var(--bulma-link); }

/* --- USCITA DEL PEZZO: il prezzo solo se "Venduto" (senza JavaScript) --- */
.solo-venduto { display: none; }
form:has(select[name="motivo"] option[value="venduto"]:checked) .solo-venduto { display: block; }

/* --- CARD DEI MODELLI: bottoni del piede che stanno nella card, la stella stretta --- */
.modello-card .card-footer-item { padding: .4rem .25rem; min-width: 0; }
.modello-card .footer-stella { flex: 0 0 2.25rem; }
.modello-card .footer-stella .button { padding: 0; height: 100%; }

/* --- numero di maglia grande e centrato (elenco comodati) --- */
.numero-maglia { vertical-align: middle !important; width: 3.5rem; line-height: 1.1; }
.foto-mini-pezzo { min-width: 2rem; min-height: 2rem; }

/* --- MESSAGGI: anteprima con gli a capo del testo --- */
.messaggio-anteprima { white-space: pre-wrap; background: var(--bulma-scheme-main-bis); border-radius: 4px; padding: .5rem; margin-top: .25rem; }

/* --- MENU LATERALE (senza JavaScript) --- */
.app-con-menu { display: flex; align-items: flex-start; min-height: calc(100vh - 3.25rem); }
.app-pagina { flex: 1; min-width: 0; }
.menu-lato { flex: 0 0 15.5rem; width: 15.5rem; background: var(--bulma-scheme-main); border-right: 1px solid var(--bulma-border-weak);
             padding: .9rem .6rem; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; font-size: .875rem; }
.menu-lato.is-compatto { flex-basis: 3.5rem; width: 3.5rem; padding: .9rem .35rem; }
.menu-lato-mobile { display: none; }
.menu-voce { display: flex; align-items: center; gap: .55rem; padding: .38rem .6rem; border-radius: 6px; color: var(--bulma-text); }
.menu-voce:hover { background: var(--bulma-scheme-main-bis); color: var(--bulma-text-strong); }
.menu-voce.is-attiva { background: var(--bulma-link); color: #fff; }
.menu-voce .bi { font-size: 1rem; width: 1.1rem; text-align: center; }
.menu-sotto { padding-left: 1.7rem; }
.menu-dashboard { margin-bottom: .5rem; font-weight: 600; }
.menu-sezione { margin-bottom: .3rem; }
.menu-sezione > summary { list-style: none; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .55rem;
                          padding: .45rem .6rem; border-radius: 6px; }
.menu-sezione > summary::-webkit-details-marker { display: none; }
.menu-sezione[open] > summary { background: var(--bulma-scheme-main-bis); }
.menu-freccia { margin-left: auto; font-size: .7rem; color: var(--bulma-text-weak); transition: transform .15s; }
.menu-sezione[open] > summary .menu-freccia { transform: rotate(90deg); }
.menu-gruppo { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bulma-text-weak); margin: .45rem 0 .1rem 1.75rem; }
.menu-riduci { margin-top: .8rem; color: var(--bulma-text-weak); font-size: .8rem; }
.menu-lato.is-compatto .menu-voce { justify-content: center; padding: .45rem 0; }
.menu-lato.is-compatto .menu-testo { display: none; }
.menu-separatore { text-align: center; border-top: 1px solid var(--bulma-border-weak); margin: .45rem .2rem .2rem; padding-top: .45rem; }
@media screen and (max-width: 1023px) {
    .app-con-menu { display: block; }
    .menu-lato, .menu-lato.is-compatto { width: auto; position: static; max-height: none; border-right: 0;
                                          border-bottom: 1px solid var(--bulma-border-weak); padding: .4rem .75rem; }
    .menu-lato-mobile { display: block; cursor: pointer; font-weight: 600; padding: .35rem 0; }
    .menu-lato-voci { display: none; }
    #menu-lato-apri:checked ~ .menu-lato-voci { display: block; }
    .menu-lato.is-compatto .menu-testo { display: inline; }
    .menu-lato.is-compatto .menu-voce { justify-content: flex-start; padding: .38rem .6rem; }
    .menu-riduci { display: none; }
}

/* --- DASHBOARD --- */
.kpi { display: block; height: 100%; border-radius: 10px; padding: 1rem; background: var(--bulma-scheme-main);
       box-shadow: 0 1px 3px rgba(0,0,0,.1); color: inherit; border-left: 5px solid var(--bulma-border); }
.kpi:hover { box-shadow: 0 3px 10px rgba(0,0,0,.15); color: inherit; }
.kpi-num { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.kpi-tit { font-size: .75rem; color: var(--bulma-text-weak); text-transform: uppercase; letter-spacing: .03em; }
.kpi-icona { float: right; font-size: 1.6rem; opacity: .35; }
.kpi-blu { border-left-color: var(--bulma-link); }
.kpi-viola { border-left-color: #8e5cd9; }
.kpi-riga .kpi { position: relative; padding: .9rem .9rem .8rem 1rem; }
.kpi-riga .kpi-icona { position: absolute; top: .75rem; right: .75rem; float: none; font-size: 1.25rem; }
.kpi-riga .kpi-tit { padding-right: 1.6rem; min-height: 2.3em; line-height: 1.15; }
.da-fare-gruppo { margin-bottom: 1.2rem; }
.da-fare-gruppo > h2 { display: flex; align-items: center; gap: .5rem; }
.dash-box { color: inherit; }
a.dash-box:hover { box-shadow: 0 3px 10px rgba(0,0,0,.15); }

/* anteprima dell'aspetto delle mail (Società sportiva): sfondo bianco come nei programmi di posta */
.anteprima-mail { background: #fff; border: 1px solid #dbdbdb; border-radius: 6px; padding: .75rem 1rem; }

/* --- dashboard: da fare, squadre, magazzino a schede, settimane, attivita' --- */
.fare { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-bottom: 1px solid var(--bulma-border-weak); }
.fare:last-child { border-bottom: 0; }
.fare-ic { width: 2rem; height: 2rem; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: 0 0 2rem; }
.fare-rosso { background: var(--bulma-danger-soft, #feecf0); color: var(--bulma-danger-on-scheme, #cc0f35); }
.fare-giallo { background: var(--bulma-warning-soft, #fffaeb); color: var(--bulma-warning-on-scheme, #946c00); }
.fare-verde { background: var(--bulma-success-soft, #effaf5); color: var(--bulma-success-on-scheme, #257953); }
.fare-blu { background: var(--bulma-link-soft, #eff1fa); color: var(--bulma-link-on-scheme, #3853c7); }
.fare-ciano { background: var(--bulma-info-soft, #eff5fb); color: var(--bulma-info-on-scheme, #296fa8); }
.fare-tx { flex: 1; font-size: .82rem; line-height: 1.3; min-width: 0; }
.fare-tx small { color: var(--bulma-text-weak); }
.fare-altre summary { cursor: pointer; list-style: none; }
.fare-altre summary::-webkit-details-marker { display: none; }
.fare-altre[open] summary { display: none; }
details.sq > summary { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; font-size: .82rem; cursor: pointer; list-style: none; }
details.sq > summary::-webkit-details-marker { display: none; }
.anello { width: 4.2rem; height: 4.2rem; border-radius: 50%; flex: 0 0 4.2rem; display: flex; align-items: center; justify-content: center; }
.anello > div { width: 3rem; height: 3rem; border-radius: 50%; background: var(--bulma-scheme-main); display: flex; flex-direction: column;
                align-items: center; justify-content: center; line-height: 1; }
.anello b { font-size: 1.05rem; } .anello small { font-size: .55rem; color: var(--bulma-text-weak); }
.taglie { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .45rem; }
.taglie span { font-size: .66rem; font-weight: 600; border-radius: 4px; padding: .05rem .35rem;
               background: var(--bulma-success-soft, #effaf5); color: var(--bulma-success-on-scheme, #257953); }
.taglie span.is-zero { background: var(--bulma-danger-soft, #feecf0); color: var(--bulma-danger-on-scheme, #cc0f35); }
.settimane { display: flex; align-items: flex-end; gap: .35rem; height: 8rem; padding-top: .6rem; }
.settimane > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%;
                   font-size: .65rem; color: var(--bulma-text-weak); }
.settimane > div span { width: 100%; background: var(--bulma-link); border-radius: 4px 4px 0 0; opacity: .8; }
.settimane > div span.is-picco { background: var(--bulma-danger); }
.settimane > div b { font-size: .72rem; color: var(--bulma-text); }
.att { display: flex; gap: .55rem; font-size: .78rem; padding: .3rem 0; align-items: flex-start; }
.att i { margin-top: .1rem; } .att small { color: var(--bulma-text-weak); margin-left: auto; white-space: nowrap; }
@media screen and (max-width: 768px) {
    .kpi { padding: .7rem; } .kpi-num { font-size: 1.6rem; } .kpi-tit { font-size: .65rem; } .kpi-icona { font-size: 1.2rem; }
}
.campione-colore { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: middle; margin-right: .3rem;
                   border: 1px solid var(--bulma-border); }
.tab-massiva td { vertical-align: middle; }
.numero-massiva { width: 4.5rem; text-align: center; font-weight: 700; }
.tab-massiva tr.riga-uscita td { opacity: .75; }

/* Campo Tesserato con ricerca mentre si scrive (datalist) e nuova consegna in comodato a schede */
.input.campo-tesserato { font-size: 1.05rem; height: 2.6em; }
.consegna-chi .label { font-size: .9rem; }
.consegna-tesserato { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 8px;
                      background: color-mix(in srgb, var(--bulma-link) 14%, transparent); border-left: 4px solid var(--bulma-link); }
.consegna-form { counter-reset: scelti; }
.pezzi-scelta { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; }
.pezzo-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; cursor: pointer;
              padding: .55rem .4rem .45rem; border: 1px solid var(--bulma-border); border-radius: 8px; text-align: center;
              background: var(--bulma-scheme-main); transition: border-color .15s, background .15s; }
.pezzo-card:hover { border-color: var(--bulma-link); }
.pezzo-card input { position: absolute; top: .45rem; left: .45rem; width: 1.05rem; height: 1.05rem; cursor: pointer; }
.pezzo-card:has(input:checked) { counter-increment: scelti; border: 2px solid var(--bulma-success); background: color-mix(in srgb, var(--bulma-success) 22%, transparent); }
.pezzo-card:has(input:focus-visible) { outline: 2px solid var(--bulma-link); outline-offset: 2px; }
.pezzo-num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.pezzo-mod { font-size: .72rem; color: var(--bulma-text-weak); line-height: 1.2; }
.consegna-fine { position: sticky; bottom: .5rem; z-index: 5; }
.conteggio-scelti::before { content: "Pezzi scelti: " counter(scelti); font-weight: 600; }
/* Consegna / Vendita: articoli disponibili per foto e taglie */
.art-uscita { display: flex; gap: .9rem; padding: .8rem; margin-bottom: .7rem; border: 1px solid var(--bulma-border-weak);
              border-radius: 10px; background: var(--bulma-scheme-main); }
.art-uscita-foto { flex: 0 0 84px; height: 84px; display: flex; align-items: center; justify-content: center;
                   border-radius: 8px; background: var(--bulma-background); overflow: hidden; }
.art-uscita-foto img { width: 100%; height: 100%; object-fit: contain; }
.art-uscita-corpo { flex: 1; min-width: 0; }
.taglia-riga { display: flex; align-items: flex-start; gap: .6rem; padding: .3rem 0; border-top: 1px dashed var(--bulma-border-weak); }
.taglia-nome { flex: 0 0 3.2rem; font-weight: 700; font-size: 1.05rem; padding-top: .5rem; }
.taglia-riga .pezzi-scelta { flex: 1; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: .35rem; }
.taglia-riga .pezzo-card { padding: .9rem .2rem .25rem; border-left: 4px solid var(--colore-mod, var(--bulma-border)); }
.taglia-riga .pezzo-card input { top: .2rem; left: .25rem; width: .85rem; height: .85rem; }
.taglia-riga .pezzo-num { font-size: 1.25rem; }
.taglia-riga .pezzo-mod { font-size: .8rem; }
.taglia-riga { padding: .2rem 0; }
.taglia-nome { flex-basis: 2.6rem; font-size: .95rem; padding-top: .35rem; }
/* modello (Giocatore, Libero...): fascia colorata, lo stesso colore sul bordo di ogni numero */
.modello-blocco { margin: .4rem 0 .6rem; padding-left: .6rem; border-left: 4px solid var(--colore-mod); }
.modello-nome { margin-bottom: .1rem; }
.modello-nome span { display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-weight: 700; font-size: .85rem;
                     color: #fff; background: var(--colore-mod); }
.modello-nome small { color: var(--bulma-text-weak); font-size: .75rem; }
.mod-0 { --colore-mod: #3e8ed0; } .mod-1 { --colore-mod: #e5484d; } .mod-2 { --colore-mod: #8e4ec6; }
.mod-3 { --colore-mod: #e08a00; } .mod-4 { --colore-mod: #12a594; } .mod-5 { --colore-mod: #6b7280; }
/* scelta Comodato / Vendita */
.scelta-modo { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; }
.modo { display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; border-radius: 10px; border: 2px solid var(--bulma-border);
        color: var(--bulma-text); background: var(--bulma-scheme-main); }
.modo i { font-size: 1.6rem; }
.modo span { display: flex; flex-direction: column; line-height: 1.2; }
.modo strong { font-size: 1.15rem; color: inherit; }
.modo small { font-size: .75rem; color: var(--bulma-text-weak); }
.modo:hover { border-color: var(--bulma-link); color: var(--bulma-text); }
.modo-comodato.attivo { border-color: var(--bulma-link); background: color-mix(in srgb, var(--bulma-link) 20%, transparent); }
.modo-comodato.attivo i { color: var(--bulma-link); }
.modo-vendita.attivo { border-color: var(--bulma-warning); background: color-mix(in srgb, var(--bulma-warning) 22%, transparent); }
.modo-vendita.attivo i { color: var(--bulma-warning); }
.modo-ordine.attivo { border-color: var(--bulma-info); background: color-mix(in srgb, var(--bulma-info) 20%, transparent); }
.modo-ordine.attivo i { color: var(--bulma-info); }
.modo.attivo::after { content: "✓"; margin-left: auto; font-weight: 700; font-size: 1.2rem; }
.modo.spento { opacity: .45; cursor: not-allowed; }
.varianti-scelta { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
.variante-card { display: flex; flex-direction: column; gap: .2rem; padding: .5rem; border: 1px solid var(--bulma-border);
                 border-radius: 8px; text-align: center; }
.variante-card .input { text-align: center; font-size: 1rem; }
.variante-card:has(input:not(:placeholder-shown)):not(.variante-prezzo) { border: 2px solid var(--bulma-success);
                 background: color-mix(in srgb, var(--bulma-success) 18%, transparent); }
.variante-nome { font-weight: 700; }
.variante-prezzo { border-style: dashed; }
@media (max-width: 600px) { .art-uscita { flex-direction: column; } .art-uscita-foto { flex-basis: 70px; height: 70px; width: 70px; } }

/* "Spunta tutte" nell'intestazione della tabella, senza JavaScript (macro spunta_tutte / spunta_riga) */
.sel-finta { display: none; }
.sel-tutte, .sel-riga, .sel-finta { width: 1rem; height: 1rem; cursor: pointer; vertical-align: middle; }
table:has(.sel-tutte:checked) .sel-riga { display: none; }
table:has(.sel-tutte:checked) .sel-finta { display: inline-block; pointer-events: none; }
table tr:has(.sel-riga:checked) > td, table:has(.sel-tutte:checked) tr:has(.sel-finta) > td { background: color-mix(in srgb, var(--bulma-link) 12%, transparent); }
/* eta' dei tesserati */
.eta { display: inline-block; min-width: 2.2rem; text-align: center; font-weight: 700; border-radius: 999px; padding: 0 .45rem; }
.eta-minore { color: var(--c-eta_minore-t); background: var(--c-eta_minore); }
.eta-maggiore { color: var(--c-eta_maggiore-t); background: var(--c-eta_maggiore); }
/* Incarichi: prima il ruolo, poi le sue squadre (le squadre si attivano spuntando il ruolo, solo CSS) */
.ruolo-blocco { padding: .3rem 0; border-bottom: 1px solid var(--bulma-border-weak); }
.ruolo-blocco:last-of-type { border-bottom: 0; }
.ruolo-nome { font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.ruolo-nome input, .pill input { width: 1rem; height: 1rem; cursor: pointer; }
.squadre-pill { display: flex; flex-wrap: wrap; gap: .25rem; margin: .2rem 0 0 1.35rem; }
.ruolo-blocco:not(:has(.ruolo-check:checked)) .squadre-pill { display: none; }
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border: 1px solid var(--bulma-border);
        border-radius: 999px; font-size: .8rem; cursor: pointer; }
.pill:has(input:checked) { border-color: var(--bulma-link); background: color-mix(in srgb, var(--bulma-link) 16%, transparent); font-weight: 600; }
.pill-radio:has(input:checked) { border-color: var(--bulma-success); background: color-mix(in srgb, var(--bulma-success) 18%, transparent); }
.blocco-tesserati .squadre-pill { margin-left: 0; }
/* barra dei titoli di tutte le tabelle: testo bianco su fondo nero (come gli elenchi con ordinamento) */
.table thead th, .table thead tr.has-background-dark th { background-color: #1f2329 !important; color: #fff !important; border-color: #1f2329 !important; }
.table thead th a, .table thead th .has-text-grey, .table thead th .has-text-grey-light { color: #fff !important; }
/* Aiuti compatti: icona (i) con il testo che compare al passaggio del mouse o al tocco (macro info) */
.aiuto { position: relative; display: inline-flex; align-items: center; vertical-align: middle; color: var(--bulma-link);
         cursor: help; font-size: .9rem; font-weight: 400; line-height: 1; outline: none; }
.title .aiuto { font-size: 1rem; margin-left: .2rem; }
.aiuto-testo { display: none; position: absolute; z-index: 60; top: calc(100% + 6px); left: -.5rem; width: max-content;
               max-width: min(26rem, 80vw); padding: .6rem .75rem; border-radius: 8px; background: #1f2329; color: #f1f3f5;
               font-size: .78rem !important; font-weight: 400 !important; line-height: 1.45; text-align: left; white-space: normal;
               box-shadow: 0 8px 24px rgba(0, 0, 0, .28); letter-spacing: normal; }
.aiuto-testo::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }  /* ponte: il mouse puo' entrare nel testo */
.aiuto.a-sinistra .aiuto-testo { left: auto; right: -.5rem; }
.aiuto:hover .aiuto-testo, .aiuto:focus .aiuto-testo, .aiuto:focus-within .aiuto-testo { display: block; }
.aiuto-testo strong, .aiuto-testo b { color: #fff; font-weight: 700 !important; }
.aiuto-testo a { color: #9ecbff; text-decoration: underline; }
.aiuto-testo code { background: #343a40; color: #fff; }
.aiuto:hover > .bi, .aiuto:focus > .bi { color: var(--bulma-link-dark, var(--bulma-link)); }
p.aiuto-riga { margin-bottom: .4rem; line-height: 1; }
/* assegnazione in blocco dei tesserati: compatta, chiusa di base; le squadre compaiono scelto un ruolo */
.blocco-tesserati summary { cursor: pointer; }
.blocco-riga { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.squadre-blocco { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.blocco-tesserati:has(.ruolo-radio[value="0"]:checked) .squadre-blocco { display: none; }
.pill-piccola { font-size: .72rem; padding: .05rem .45rem; gap: .2rem; }
.pill-piccola input { width: .8rem; height: .8rem; }
/* modifica in blocco: riga da eliminare barrata */
.tab-massiva tr:has(.elimina-riga:checked) > td { text-decoration: line-through; opacity: .55; background: color-mix(in srgb, var(--bulma-danger) 12%, transparent); }
.elimina-riga { width: 1rem; height: 1rem; accent-color: var(--bulma-danger); cursor: pointer; }
/* kit: tipo di prezzo a pulsanti; lo sconto si scrive solo con "sconto" scelto */
.kit-tipi { display: flex; flex-wrap: wrap; gap: .35rem; }
.kit-tipi .pill input { width: .9rem; height: .9rem; }
.kit-prezzo:has(input[name="tipo"][value="listino"]:checked) .kit-sconto { display: none; }
.kit-righe td { border-top: 0 !important; }
.kit-testa td { background: color-mix(in srgb, var(--bulma-primary) 12%, transparent) !important; font-weight: 600; }
/* Consegna / Vendita: kit con la taglia di ogni pezzo */
.kit-uscita { border-left: 4px solid var(--bulma-primary); }
.kit-scelta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; cursor: pointer; }
.kit-scelta input { width: 1.05rem; height: 1.05rem; margin-right: .3rem; }
.kit-pezzi { display: flex; flex-wrap: wrap; gap: .4rem .8rem; }
.kit-pezzo { display: inline-flex; flex-direction: column; gap: .15rem; font-size: .78rem; font-weight: 600; }
.kit-uscita:not(:has(.kit-scelta input:checked)) .kit-pezzi { opacity: .45; }
.kit-uscita:has(.kit-scelta input:checked) { background: color-mix(in srgb, var(--bulma-primary) 8%, var(--bulma-scheme-main)); }

.taglie .is-kit { background: color-mix(in srgb, var(--bulma-primary) 16%, transparent); }

/* --- Tabelle: elenco delle liste a sinistra, lista modificabile a destra --- */
.liste-tabelle { border: 1px solid var(--bulma-border); border-radius: 8px; padding: .4rem; background: var(--bulma-scheme-main); }
.liste-area { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bulma-text-weak);
              margin: .6rem .4rem .2rem; }
.liste-area:first-child { margin-top: .2rem; }
.lista-voce { display: flex; align-items: center; gap: .45rem; padding: .3rem .5rem; border-radius: 6px; font-size: .85rem; color: var(--bulma-text); }
.lista-voce > span:first-of-type { flex: 1; }
.lista-voce:hover { background: var(--bulma-background); }
.lista-voce.attiva { background: #111; color: #fff; font-weight: 600; }
.lista-voce.attiva .lista-n { background: #fff; color: #111; }
.lista-n { font-size: .7rem; min-width: 1.6rem; text-align: center; border-radius: 99px; padding: 0 .35rem; background: var(--bulma-background); }
.tab-valori td { vertical-align: middle; }
.tab-valori .frecce { white-space: nowrap; }
.tab-valori .frecce .button { padding: 0 .35rem; height: 1.6rem; }
.tab-valori tr.riga-spenta input[type=text] { color: var(--bulma-text-weak); font-style: italic; }
.tab-valori tr.riga-nuova td { background: color-mix(in srgb, var(--bulma-success) 8%, transparent); }
.invio-salva { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Scheda fornitore: carichi per DDT / fattura --- */
.doc-carico > summary.doc-testa { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem; padding: .6rem .9rem; cursor: pointer;
                                  list-style: none; font-size: .85rem; }
.doc-carico > summary.doc-testa::-webkit-details-marker { display: none; }
.doc-carico > summary.doc-testa::before { content: "\25B8"; color: var(--bulma-text-weak); }
.doc-carico[open] > summary.doc-testa::before { content: "\25BE"; }
.doc-carico[open] > summary.doc-testa { border-bottom: 1px solid var(--bulma-border); margin-bottom: .4rem; }
.doc-num { font-weight: 700; min-width: 9rem; }
.doc-data { min-width: 6rem; color: var(--bulma-text-weak); }
.doc-pezzi { color: var(--bulma-text-weak); }
.doc-tot { margin-left: auto; }
.doc-carico tfoot th { border-top: 2px solid var(--bulma-border); }
.doc-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; border-top: 1px dashed var(--bulma-border); padding-top: .6rem; }

/* --- Intestazioni delle pagine (titolo a sinistra, bottoni / schede a destra): se lo spazio non basta i bottoni
       vanno a capo SOTTO il titolo invece di uscire dalla pagina --- */
main .level { flex-wrap: wrap; gap: .5rem .75rem; }
main .level > .level-left, main .level > .level-right { flex-wrap: wrap; flex-shrink: 1; min-width: 0; max-width: 100%; }
main .level > .level-left > *, main .level > .level-right > * { flex-shrink: 1; min-width: 0; max-width: 100%; }
main .level > .level-left .title { white-space: normal; overflow-wrap: anywhere; }
main .level > .level-right { margin-left: auto; justify-content: flex-end; }
main .level > .level-right.buttons, main .level > .level-right .buttons { flex-wrap: wrap; }
main .level .tabs ul { flex-wrap: wrap; border-bottom: 0; }
main .level .tabs.is-toggle li { margin-bottom: .25rem; }
main .column { min-width: 0; }                       /* una colonna non allarga la pagina: il contenuto va a capo o scorre */
main input[type=date] { max-width: 100%; }
main .breadcrumb { white-space: normal; }
main .breadcrumb ul { flex-wrap: wrap; row-gap: .2rem; }
main .breadcrumb li a, main .breadcrumb li span { overflow-wrap: anywhere; }
main .breadcrumb li.is-active a, main .breadcrumb li:last-child span { max-width: min(22rem, 70vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
/* riquadri apribili (details): i campi dentro non escono dal bordo */
.dettagli-box, .dettagli-box * { box-sizing: border-box; }
/* scheda vendita: le tre date (ordine, consegna, pagamento) */
/* scheda vendita: date di ogni articolo (ordinato, consegnato, pagato) e spunte degli articoli pagati */
.date-riga { color: var(--bulma-text-weak); font-size: .72rem; }
.paga-righe { display: flex; flex-direction: column; gap: .2rem; max-height: 12rem; overflow-y: auto; }
/* etichetta del kit con il suo colore (Tabelle › Colori) o, senza colore, quello della vestibilità */
.kit-tag { font-weight: 600; }
.kit-tag i { margin-right: .25rem; }
.annulla-consegna { border: 0; background: none; color: var(--bulma-danger); cursor: pointer; padding: 0 .2rem; font-size: .75rem; }
.annulla-consegna:hover { text-decoration: underline; }
/* ===== Tappe ORDINATO -> CONSEGNATO -> PAGATO (uguali in tutta l'app) ===== */
.tappe { --t-ord: var(--c-tappa_ordinato); --t-con: var(--c-tappa_consegnato); --t-pag: var(--c-tappa_pagato); --t-attesa: var(--c-tappa_attesa); --t-vuoto: var(--bulma-border);
         display: inline-flex; align-items: flex-start; vertical-align: middle; }
.tappa { --c: var(--t-vuoto); position: relative; display: flex; flex-direction: column; align-items: center; min-width: 5.6rem;
         text-align: center; line-height: 1.15; font-size: .72rem; color: var(--bulma-text-weak); }
.tappa-ord { --col: var(--t-ord); } .tappa-con { --col: var(--t-con); } .tappa-pag { --col: var(--t-pag); }
.tappa-punto { position: relative; z-index: 1; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: flex; align-items: center;
               justify-content: center; font-size: .8rem; border: 2px dashed var(--t-vuoto); background: var(--bulma-scheme-main);
               color: var(--bulma-text-weak); margin-bottom: .2rem; }
/* la linea che unisce la tappa a quella prima: piena se fatta, tratteggiata se no */
.tappa + .tappa::before { content: ""; position: absolute; top: .8rem; right: 50%; width: 100%; border-top: 2px dashed var(--t-vuoto); z-index: 0; }
.tappa-fatto .tappa-punto { border: 2px solid var(--col); background: var(--col); color: #fff; }
.tappa-fatto + .tappa-fatto::before, .tappa-fatto + .tappa-parte::before { border-top: 2px solid var(--col); }
.tappa-parte .tappa-punto { border: 2px solid var(--t-attesa); color: var(--t-attesa);
                            background: linear-gradient(90deg, color-mix(in srgb, var(--t-attesa) 55%, transparent) 50%, var(--bulma-scheme-main) 50%); }
.tappa-attesa .tappa-punto { border: 2px solid var(--t-attesa); color: var(--t-attesa); background: color-mix(in srgb, var(--t-attesa) 18%, var(--bulma-scheme-main)); }
.tappa-attesa .tappa-nome, .tappa-attesa .tappa-data { color: var(--t-attesa); font-weight: 700; }
.tappa-attesa .tappa-nome { text-transform: uppercase; font-size: .66rem; }
.tappa-fatto + .tappa-attesa::before  { border-top: 2px dashed var(--t-attesa); }
.tappa-fatto, .tappa-parte { color: var(--bulma-text); }
.tappa-fatto .tappa-nome { color: var(--col); font-weight: 700; }
.tappa-parte .tappa-nome, .tappa-parte .tappa-data small { color: var(--t-attesa); font-weight: 700; }
.tappa-da_fare .tappa-nome { font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: .66rem; }
.tappa-data small { color: var(--bulma-text-weak); }
.tappe-piccole .tappa { min-width: 3.9rem; font-size: .66rem; }
.tappe-piccole .tappa-punto { width: 1.15rem; height: 1.15rem; font-size: .6rem; margin-bottom: .1rem; }
.tappe-piccole .tappa + .tappa::before { top: .57rem; }
.tappe-legenda { font-size: .7rem; color: var(--bulma-text-weak); }
.tappe-legenda b { font-weight: 700; }
.tappe-spente .tappe { opacity: .4; filter: grayscale(1); }
/* ===== Costi e margini ===== */
.an-kpi { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .8rem; border: 1px solid var(--bulma-border); border-radius: 10px;
          background: var(--bulma-scheme-main); height: 100%; }
.an-kpi-tit { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bulma-text-weak); }
.an-kpi-num { font-size: 1.15rem; font-weight: 700; }
.an-kpi-sotto { font-size: .72rem; color: var(--bulma-text-weak); }
.an-margine { border-color: color-mix(in srgb, var(--bulma-success) 50%, var(--bulma-border)); }
.an-sezione.an-vendita { border-left: 4px solid var(--bulma-warning); }
.an-sezione.an-comodato { border-left: 4px solid var(--bulma-link); }
.an-tab td, .an-tab th { white-space: nowrap; }
.an-tab td:first-child { white-space: normal; }
/* dashboard: tesserati divisi per gruppo del ruolo */
.kpi-gruppi { display: flex; flex-direction: column; font-size: .75rem; line-height: 1.3; color: var(--bulma-text); }
.kpi-gruppi small { color: var(--bulma-text-weak); margin-left: .2rem; }
/* note da tenere in evidenza (vendite) */
.nota-evidenza { margin-top: .25rem; padding: .15rem .45rem; border-left: 3px solid var(--bulma-warning); border-radius: 4px;
                 background: color-mix(in srgb, var(--bulma-warning) 16%, transparent); color: var(--bulma-text); font-size: .75rem;
                 white-space: normal; }
.nota-evidenza i { color: var(--bulma-warning); }
.nota-grande { font-size: .85rem; padding: .45rem .7rem; }
.kit-prezzo .input { width: 7.5rem; } .kit-prezzo span { color: var(--bulma-success); }
.riga-corrente td { background: color-mix(in srgb, var(--bulma-success) 12%, transparent) !important; } .riga-corrente td:first-child { box-shadow: inset 3px 0 0 var(--bulma-success); }
/* ===== Dashboard: tre blocchi COMODATO / VENDITE / KIT ===== */
.dash-sezione { --col-sez: var(--bulma-warning); border: 1px solid var(--bulma-border); border-top: 4px solid var(--col-sez);
                border-radius: 12px; padding: .9rem 1rem 1rem; margin-bottom: 1.25rem; background: var(--bulma-scheme-main); }
.dash-vendite { --col-sez: var(--bulma-success); }
.dash-kit { --col-sez: var(--bulma-primary); }
.dash-sezione .box.dash-box { box-shadow: none; border: 1px solid var(--bulma-border); }
/* Nuovo articolo: scelta del tipo */
.tipo-articolo .box { display: block; height: 100%; border-top: 4px solid var(--col-tipo, var(--bulma-border)); color: var(--bulma-text); }
.tipo-articolo .box:hover { box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.tipo-articolo .tipo-comodato { --col-tipo: var(--bulma-warning); }
.tipo-articolo .tipo-vendita { --col-tipo: var(--bulma-success); }
.tipo-articolo .tipo-kit { --col-tipo: var(--bulma-primary); }
.tipo-icona { font-size: 2rem; color: var(--col-tipo); display: block; margin-bottom: .4rem; }
.tag.tag-attesa { background: color-mix(in srgb, #eab308 20%, transparent); color: #854d0e; }
[data-theme="dark"] .tag.tag-attesa { color: #fde047; }
.elenchi-uso ul { flex-wrap: wrap; }
/* Dashboard: tre riquadri con un anello complessivo */
.dash-tre .dash-sezione { height: 100%; display: flex; flex-direction: column; align-items: stretch; margin-bottom: 0; }
.dash-tit { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .8rem; }
.dash-tit i { color: var(--col-sez); margin-right: .4rem; }
.dash-tit small { font-size: .72rem; font-weight: 500; color: var(--bulma-text-weak); text-transform: none; letter-spacing: 0; margin-left: .3rem; }
.anello-grande { width: 9rem; height: 9rem; flex: 0 0 9rem; margin: 0 auto .9rem; }
.anello-grande > div { width: 6.6rem; height: 6.6rem; }
.anello-grande b { font-size: 2rem; } .anello-grande small { font-size: .72rem; }
.dash-voci { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.dash-voce { display: flex; align-items: baseline; gap: .45rem; padding: .3rem .5rem; border-radius: 6px; color: var(--bulma-text); font-size: .85rem; }
a.dash-voce:hover { background: color-mix(in srgb, var(--col-sez) 12%, transparent); }
.dash-voce b { font-size: 1.05rem; min-width: 2ch; text-align: right; }
.dash-voce span { color: var(--bulma-text-weak); }
.pallino { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; flex: 0 0 .7rem; }
.pallino-vuoto { border: 2px solid currentColor; opacity: .5; }
.dash-voce.is-attesa { background: color-mix(in srgb, #eab308 15%, transparent); }
.dash-voce.is-attesa b { color: #ca8a04; }
.dash-voce.is-allarme { background: color-mix(in srgb, var(--bulma-danger) 12%, transparent); }
.dash-voce.is-allarme b, .dash-voce.is-allarme .pallino-vuoto { color: var(--bulma-danger); }
.dash-voce.is-attesa .pallino-vuoto { color: #ca8a04; opacity: 1; }
/* Tabelle › Colori: nome e codice leggibili, "dove si usa" come piccole caselle in riga */
.tab-colori input[name^="nome_"], .tab-colori input[name="nuovo_nome"] { min-width: 8.5rem; }
.tab-colori input[name^="valore_"], .tab-colori input[name="nuovo_valore"] { min-width: 5.8rem; font-family: monospace; }
.tab-colori td.usi-colore { min-width: 13rem; }
.tab-colori .usi-colore label { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; margin: .1rem .5rem .1rem 0; }
.tab-colori input[name^="parola_"], .tab-colori input[name="nuovo_parola"] { min-width: 6rem; }
/* Colori dell'app: tendine leggibili */
.colori-sezione td .select { min-width: 8rem; }

@media (max-width: 768px) { .colori-sezione td .select { min-width: 0; } .colori-sezione .tag { white-space: normal; height: auto; } }
/* Vendite: i kit venduti in evidenza, distinti dagli articoli venduti da soli */
.kit-in-vendita { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .5rem .2rem 0; }
.articoli-con-kit { display: block; color: var(--bulma-text-weak); }
.avvisi-anteprima { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
.dash-voce.dash-sottovoce { font-size: .8rem; }
/* ===== Tavolozza dei colori (Colori dell'app, colore nell'app degli articoli): solo CSS ===== */
.tavolozza { display: grid; grid-template-columns: repeat(12, minmax(1.4rem, 2rem)); gap: .3rem; align-items: center; max-width: 30rem; }
.tavolozza .tav-r { position: absolute; opacity: 0; width: 0; height: 0; }
.tav-quadrato { aspect-ratio: 1; border-radius: 5px; cursor: pointer; border: 1px solid rgba(127, 127, 127, .25); }
.tav-quadrato:hover { transform: scale(1.12); }
.tav-r:checked + label.tav-quadrato { outline: 2px solid var(--bulma-text); outline-offset: 2px; }
.tav-r:focus-visible + label { outline: 2px dashed var(--bulma-link); outline-offset: 2px; }
.tav-pre, .tav-altro { grid-column: span 4; display: flex; align-items: center; gap: .35rem; cursor: pointer; font-size: .75rem;
                       border: 1px solid var(--bulma-border); border-radius: 14px; padding: .2rem .55rem; white-space: nowrap; }
.tav-altro { grid-column: span 6; }
.tav-mappa { grid-column: span 2; width: 100%; height: 1.9rem; padding: 0 .1rem; border: 1px solid var(--bulma-border); border-radius: 6px; background: transparent; cursor: pointer; }
.tav-campione { width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid var(--bulma-border); }
.tav-r:checked + .tav-pre, .tav-r:checked + .tav-altro { border-color: var(--bulma-link); background: color-mix(in srgb, var(--bulma-link) 14%, transparent); font-weight: 700; }
.tav-anteprima { --sc: var(--sc0); --sc-t: var(--sc0-t); grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
                 margin-top: .4rem; padding: .5rem .6rem; border: 1px dashed var(--bulma-border); border-radius: 8px; }
.tav-pre-r:checked ~ .tav-anteprima { --sc: var(--sc-pre); --sc-t: var(--sc-pre-t); }
.tav-altro-r:checked ~ .tav-anteprima { --sc: var(--sc-altro); --sc-t: var(--sc-altro-t); }
.tav-tag { background: var(--sc) !important; color: var(--sc-t) !important; }
.tav-pallino { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sc); color: var(--sc-t); }
.tav-testo { color: var(--sc); font-weight: 700; font-size: .85rem; }
.tav-nota-altro { display: none; font-size: .7rem; color: var(--bulma-text-weak); width: 100%; }
.tav-altro-r:checked ~ .tav-anteprima .tav-nota-altro { display: block; }
@media (max-width: 480px) { .tavolozza { grid-template-columns: repeat(12, 1fr); gap: .2rem; } .tav-pre, .tav-altro { font-size: .68rem; } }
.colore-app summary { cursor: pointer; } .colore-app[open] summary { margin-bottom: .4rem; }