/* Stili specifici del prodotto. Usare SEMPRE le variabili della palette (var(--pri), var(--panel), var(--tx),
   var(--mut), var(--line), var(--ok), var(--warn), var(--crit)...) così funzionano in tutte le palette e temi. */
.vis { border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: var(--panel); }
.vis.svolto { border-left-color: var(--ok); }
.vis.annullato { border-left-color: var(--line); opacity: .65; }
.vis .vh { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.vis .vn { font-weight: 600; }
.vis .vs { margin-top: 3px; font-size: 14px; }
.vis .vb { margin-top: 8px; gap: 6px; flex-wrap: wrap; }
.vis .btn { min-height: 44px; }
.daynav { margin: 8px 0; gap: 6px; flex-wrap: wrap; }
.daynav .btn, .daynav input { min-height: 44px; }
.dl { text-transform: capitalize; margin: 10px 0 4px; }
.cl { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cc { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; min-height: 44px; }
.cc:hover { border-color: var(--pri); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px; padding: 3px 0; font-size: 14px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.th { position: relative; }
.th img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; display: block; }
.th button { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--crit); color: #fff; cursor: pointer; }
.al .row { gap: 6px; }
@media (max-width: 600px) { .kv { grid-template-columns: 1fr; gap: 0; } .vis .btn { flex: 1 1 auto; } }