/* porkàpp - linguaggio visivo dei giudizi
   verde = bene, ambra = attenzione, rosso = male. Sempre gli stessi colori, in ogni schermata. */
:root { --su-tenue: #e3f4ea; --giu-tenue: #fde8e6; }

/* ---------------------------------------------------------------- righe metrica */
.metriche { background: var(--surface); border: 1px solid var(--linea); border-radius: var(--r-card); padding: 2px 18px; }
.metrica { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.metrica:last-child { border-bottom: 0; }
.mico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--surface-2); color: var(--testo-2); }
.metrica.buono .mico { background: var(--su-tenue); color: var(--su); }
.metrica.male .mico { background: var(--giu-tenue); color: var(--giu); }
.mt { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 4px; line-height: 1.25; }
.ms { font-size: 14px; color: var(--testo-3); margin-top: 1px; }
.mv { font-size: clamp(20px, 5.4vw, 24px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mv small { font-size: .6em; font-weight: 700; color: var(--testo-3); }
.cmp { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--testo-3); }
.cmp.buono { background: var(--su-tenue); color: var(--su); }
.cmp.male { background: var(--giu-tenue); color: var(--giu); }
.cmp .ph { font-size: 14px; }
@media (min-width: 900px) { .metriche.due { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; } .metriche.due .metrica:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }

/* ---------------------------------------------------------------- verdetto in alto */
.verdetto { border-radius: 22px; padding: 22px 20px 20px; color: #fff; position: relative; overflow: hidden; }
/* tinte del marchio: verde profondo (bene), arancio bruciato (attenzione), bordeaux (male), notte (neutro); testo crema 4,5:1+ */
.verdetto.buono { background: radial-gradient(120% 90% at 100% 0%, rgb(95 184 147 / .28), transparent 60%), linear-gradient(135deg, #17402F, #1F5C46); }
.verdetto.attenzione { background: radial-gradient(120% 90% at 100% 0%, rgb(232 160 85 / .3), transparent 60%), linear-gradient(135deg, #5E300C, #8A4B12); }
.verdetto.male { background: radial-gradient(120% 90% at 100% 0%, rgb(216 132 48 / .22), transparent 60%), linear-gradient(135deg, #3E101A, #6A1E2C); }
.verdetto.neutro { background: radial-gradient(120% 90% at 100% 0%, rgb(216 132 48 / .2), transparent 60%), linear-gradient(135deg, #190A11, #2E1A23); }
.verdetto { color: #F7EEE6; }
.verdetto .vt { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; opacity: .95; }
.verdetto .info { color: #fff; }
.verdetto .vv { font-size: clamp(40px, 12vw, 58px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 6px 0 6px; font-variant-numeric: tabular-nums; }
.verdetto .vv small { font-size: .4em; font-weight: 700; opacity: .85; margin-left: 4px; letter-spacing: 0; }
.verdetto .vf { font-size: 17px; line-height: 1.45; max-width: 56ch; }
.verdetto .vnum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / .25); }
.verdetto .vnum div { min-width: 0; }
.verdetto .vnum span { display: block; font-size: 13px; opacity: .88; font-weight: 600; }
.verdetto .vnum b { display: block; font-size: clamp(16px, 4.6vw, 22px); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .verdetto .vnum { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; } }

/* ---------------------------------------------------------------- termometro del premio */
.termo { margin-top: 18px; padding-top: 22px; }
.termo-bar { position: relative; height: 14px; border-radius: 999px; background: rgb(255 255 255 / .22); }
.termo-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; box-shadow: 0 0 0 2px rgb(255 255 255 / .95); }
.termo-zero { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; }
.termo-teo { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1px; border-radius: 2px; background: #fff; }
.termo-teo b { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; }

/* ---------------------------------------------------------------- cascata dei soldi */
.cascata { display: grid; gap: 14px; }
.casc-lab { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; margin-bottom: 6px; }
.casc-lab span { min-width: 0; }
.casc-lab b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.casc-bar { position: relative; height: 16px; border-radius: 6px; background: var(--surface-2); }
.casc-bar span { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.casc-riga.base .casc-bar span { background: var(--salvia); }
.casc-riga.piu .casc-bar span { background: var(--su); }
.casc-riga.piu b { color: var(--su); }
.casc-riga.meno .casc-bar span { background: var(--giu); }
.casc-riga.meno b { color: var(--giu); }
.casc-riga.totale { padding-top: 14px; border-top: 2px solid var(--linea-forte); }
.casc-riga.totale .casc-bar span { background: var(--verde); }
.casc-riga.totale .casc-lab { font-weight: 800; font-size: 18px; }
.casc-det { font-size: 13px; color: var(--testo-3); margin-top: 4px; }

/* ---------------------------------------------------------------- anni e filtri */
.anni { display: flex; gap: 8px; align-items: center; margin: 2px 0 16px; }
.anni .chips { flex: 1; min-width: 0; }
.anni .chips button.chip { min-height: 44px; padding: 0 18px; font-size: 16px; }
.anni .chips button.chip.on { background: var(--on-bg); border-color: var(--on-bg); color: var(--on-testo); }
.btn-filtri { position: relative; flex: none; }
.btn-filtri .badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--verde); color: var(--on-verde); font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
.filtri-attivi { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.filtri-attivi .chip { cursor: pointer; }

/* ---------------------------------------------------------------- titoli di sezione con icona */
.sez { display: flex; align-items: center; gap: 10px; margin: 32px 0 12px; }
.sez h2 { margin: 0; }
.sez > .ph { font-size: 24px; color: var(--verde); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--verde-tenue); }
.sez .sez-sub { margin-left: auto; font-size: 14px; color: var(--testo-3); font-weight: 600; }

/* ---------------------------------------------------------------- elenco consegne */
.mese-titolo { font-size: 14px; font-weight: 800; letter-spacing: .02em; color: var(--testo-3); margin: 20px 4px 8px; }
.mese-titolo:first-letter { text-transform: uppercase; }
.riga-c { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 14px 18px 14px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--linea); }
.riga-c:last-child { border-bottom: 0; }
a.riga-c:hover { background: var(--surface-2); }
.riga-c .striscia { align-self: stretch; border-radius: 0 4px 4px 0; background: var(--linea-forte); }
.riga-c.buono .striscia { background: var(--su); }
.riga-c.male .striscia { background: var(--giu); }
.riga-c.attesa .striscia { background: var(--ambra); }
.riga-c .titolo { font-weight: 800; font-size: 18px; }
.riga-c .sotto { font-size: 15px; color: var(--testo-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riga-c .dx { text-align: right; }
.riga-c .dx small { display: block; font-size: 14px; color: var(--testo-3); font-weight: 600; margin-top: 4px; }
.premio-chip { display: inline-block; font-weight: 800; font-size: 16px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.premio-chip.buono { background: var(--su-tenue); color: var(--su); }
.premio-chip.male { background: var(--giu-tenue); color: var(--giu); }
.premio-chip.attesa { background: var(--ambra-tenue); color: var(--ambra); font-size: 13px; }

/* ---------------------------------------------------------------- macelli a confronto */
.macelli { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding-top: 8px; }
.macello-card { background: var(--surface); border: 1px solid var(--linea); border-radius: var(--r-card); padding: 18px; position: relative; }
.macello-card.top { border: 2px solid var(--su); }
.macello-card .nastro { position: absolute; top: -12px; left: 14px; background: var(--su); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.macello-card h3 { margin: 0 0 4px; font-size: 18px; }
.macello-card .grande { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.macello-card .grande small { font-size: .5em; color: var(--testo-3); }
.macello-card dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 10px 0 0; font-size: 15px; }
.macello-card dt { color: var(--testo-3); }
.macello-card dd { margin: 0; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- verifica guidata */
.passi-flusso { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 700; color: var(--testo-3); margin: 0 0 12px; flex-wrap: wrap; }
.passi-flusso span { display: inline-flex; align-items: center; gap: 6px; }
.passi-flusso .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--linea-forte); font-size: 13px; }
.passi-flusso .on { color: var(--testo); }
.passi-flusso .on .n { background: var(--on-bg); border-color: var(--on-bg); color: var(--on-testo); }
.passi-flusso .fatto .n { background: var(--su-tenue); border-color: transparent; color: var(--su); }
.passi-flusso .sep { width: 16px; height: 2px; background: var(--linea-forte); }
.da-controllare { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--r-card); background: var(--giallo); border: 1px solid var(--giallo-bordo); color: var(--giallo-testo); margin: 0 0 12px; }
.da-controllare strong { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.da-controllare .chips button.chip { background: var(--surface); border-color: var(--giallo-bordo); color: var(--testo); min-height: 40px; }
.da-controllare.ok { background: var(--su-tenue); border-color: transparent; color: var(--su); }
.campo.evidenzia { animation: lampo 1.2s ease-out 2; }
@keyframes lampo { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--giallo-bordo) 45%, transparent); border-radius: 12px; } }

/* ---------------------------------------------------------------- onboarding */
.tre-passi { display: grid; gap: 12px; text-align: left; max-width: 520px; margin: 0 auto 24px; }
.tre-passi div { display: grid; grid-template-columns: 52px 1fr; gap: 2px 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--linea); }
.tre-passi .ph { grid-row: span 2; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: var(--verde-tenue); color: var(--verde); }
.tre-passi strong { font-size: 17px; }
.tre-passi span { font-size: 15px; color: var(--testo-3); }

/* grafico con selettore */
.seg-mini { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--linea); }
.seg-mini button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-weight: 700; font-size: 14px; color: var(--testo-3); cursor: pointer; min-height: 36px; }
.seg-mini button.on { background: var(--surface); color: var(--testo); box-shadow: var(--ombra); }
.card-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.card-testa h3 { margin: 0; display: flex; align-items: center; gap: 6px; }

.verdetto .termo-fill { background: #fff !important; box-shadow: none; }
.verdetto.male .termo-fill, .verdetto.attenzione .termo-fill { background: rgb(255 255 255 / .9) !important; }

.sez { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 520px) { .sez .sez-sub { width: 100%; margin: 0 0 0 50px; } }

.metrica .cmp { grid-column: 2 / 4; justify-self: start; margin-top: 0; }
.metrica .mico { align-self: start; }

.campo.evidenza, details.evidenza { animation: lampo 1.2s ease-out 2; }

.campo.mini.incerto label::after { display: none; }
.campo.mini label { font-size: 18px; font-weight: 800; }

/* documenti in lettura nella lista "Da completare" */
.premio-chip .ph-circle-notch, .btn .ph-circle-notch { display: inline-block; animation: gira 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .premio-chip .ph-circle-notch, .btn .ph-circle-notch { animation: none; } }

/* CUN settimana per settimana */
.anni .chips a.chip { min-height: 44px; padding: 0 18px; font-size: 16px; display: inline-flex; align-items: center; text-decoration: none; }
.anni .chips a.chip.on { background: var(--on-bg); border-color: var(--on-bg); color: var(--on-testo); }
.tab-scroll { overflow-x: auto; margin: 0 -4px; -webkit-overflow-scrolling: touch; }
.tab-cun { min-width: 760px; }
.tab-cun th { white-space: normal; vertical-align: bottom; }
.tab-cun td.su { color: var(--su); font-weight: 700; }
.tab-cun td.giu { color: var(--giu); font-weight: 700; }
.tab-cun tfoot td { border-top: 1.5px solid var(--linea-forte); border-bottom: 0; background: var(--surface-2, transparent); }
.tab-cun tbody tr:not([data-v="1"]) td { color: var(--testo-3); }
.ico-tono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: var(--surface-2, #eef1ea); flex: none; }
.ico-tono.su { color: var(--su); }
.ico-tono.giu { color: var(--giu); }

/* "Stai guardando" di Creator e Controller */
.vista-sel:empty { display: none; }
.vista-sel { margin: 10px 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2, rgba(0,0,0,.035)); border: 1px solid var(--linea); }
.vista-sel .vista-lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--testo-3); margin-bottom: 6px; }
.vista-sel select { width: 100%; min-height: 40px; font-size: 14px; }

/* barra "Anteprima" di Visualizza come: sempre in vista, colore deciso per non confondersi con l'app reale */
.barra-anteprima { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--arancio); color: var(--notte); font-size: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.barra-anteprima span { flex: 1; min-width: 180px; }
.barra-anteprima .btn { background: var(--notte); color: var(--crema); border-color: var(--notte); }
body.in-anteprima { padding-top: 48px; }
body.in-anteprima .sidebar { top: 48px; height: calc(100vh - 48px); }
body.in-anteprima .topbar { top: 48px; }

/* "Dove perdi soldi": saldo in evidenza, righe che si aprono sulle consegne */
.saldo-soldi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.saldo-soldi > div { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; }
.saldo-soldi span { font-size: 13px; color: var(--testo-3); }
.saldo-soldi b { font-size: 20px; }
.saldo-soldi .meno b { color: var(--giu); }
.saldo-soldi .piu b { color: var(--su); }
.saldo-soldi .tot { background: var(--testo); }
.saldo-soldi .tot span, .saldo-soldi .tot b { color: var(--surface); }
.casc-tit { margin: 18px 0 8px; font-size: 15px; }
.casc-det > summary { list-style: none; cursor: pointer; }
.casc-det > summary::-webkit-details-marker { display: none; }
.casc-det[open] > summary .casc-lab > span::after { content: ' ▴'; color: var(--testo-3); }
.casc-orig { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.casc-orig a { display: inline-flex; gap: 8px; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13px; text-decoration: none; color: inherit; }
.casc-orig a b { font-weight: 700; }
.macello-card .nastro.poche { background: var(--surface-2); color: var(--testo-3); }

/* consulenza nutrizionale: un invito a parte, non mescolato agli export */
.card.consulenza { display: flex; gap: 14px; align-items: flex-start; border-left: 4px solid var(--su); }
.card.consulenza > .ph { font-size: 28px; color: var(--su); flex: none; }
/* menu in basso: le voci nascoste non lasciano buchi */
.bottomnav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.bottomnav a[hidden] { display: none; }
/* "Stai guardando" dentro le pagine: solo su telefono, dove il menu laterale non c'è */
.vista-mobile { display: block; }
@media (min-width: 1024px) { .vista-mobile { display: none; } }

/* Qualità dei dati */
.card.qualita { margin-bottom: 12px; }
.card.qualita > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.card.qualita > summary::-webkit-details-marker { display: none; }
.card.qualita .q-ico { font-size: 22px; display: inline-flex; }
.card.qualita .q-ico.da-vedere { color: #b26a00; }
.card.qualita .q-ico.ok { color: var(--su); }
.card.qualita .q-n { margin-left: auto; font-weight: 700; color: var(--testo-3); }
.card.qualita .coppia { border-left: 3px solid #b26a00; padding-left: 6px; margin-bottom: 10px; }
.card.contesta { display: flex; gap: 14px; align-items: flex-start; border-left: 4px solid #b26a00; }
.card.contesta > .ph { font-size: 28px; color: #b26a00; flex: none; }

/* Assistenza */
.sidebar .voci .menu-n, .bottomnav .menu-n { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--giu); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.card.richiesta { margin-bottom: 10px; }
.card.richiesta > summary { display: flex; gap: 10px; align-items: center; cursor: pointer; list-style: none; }
.card.richiesta > summary::-webkit-details-marker { display: none; }
.card.richiesta.nuova { border-left: 4px solid var(--giu); }
.card.richiesta .pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--giu); margin-right: 6px; vertical-align: middle; }
.thread { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.thread .msg { max-width: 88%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); }
.thread .msg.ass { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--su) 14%, var(--surface)); }
.thread .msg .testo { white-space: normal; word-break: break-word; }
.card.richiesta textarea { width: 100%; }

/* ================================================================ Animàre: marchio, tipografia, forme
   Regola delle forme: pulsanti e chip a pillola, schede 18px, campi 12px. */
h1, h2, h3, .topbar h1 { font-weight: 600; letter-spacing: -.02em; }
.topbar h1 { font-weight: 650; }
.btn { border-radius: 999px; font-weight: 600; }
.btn.small { min-height: 42px; }
.icon-btn { border-radius: 999px; }
.etichetta { font-family: var(--font-etichetta); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 500; }

/* marchio tipografico (dal sito): "Anim" + "à" arancio + "re" in Newsreader, sotto il nome del prodotto in Jost maiuscolo */
.marchio { display: inline-flex; flex-direction: column; gap: 3px; text-decoration: none; color: inherit; line-height: 1; }
.marchio .nome { font-family: var(--font-marchio); font-weight: 400; font-size: 27px; letter-spacing: -.01em; color: currentColor; }
.marchio .nome i { font-style: normal; color: var(--arancio); }
.marchio .sotto { font-family: var(--font-etichetta); text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; font-weight: 500; opacity: .72; }
.topbar .marchio .nome { font-size: 23px; }
.topbar .marchio { color: var(--testo); }

/* menu laterale su fondo notte */
@media (min-width: 1024px) {
  .sidebar .marchio { margin: 0 12px 20px; color: var(--crema); }
  .sidebar .marchio .sotto { color: var(--crema-2); }
  .sidebar .cta { margin: 4px 0 10px; min-height: 48px; }
  .sidebar .vista-sel { background: rgb(240 228 216 / .05); border-color: rgb(240 228 216 / .12); }
  .sidebar .vista-sel .vista-lbl { color: #A8968C; font-family: var(--font-etichetta); letter-spacing: .18em; font-weight: 500; }
  .sidebar .vista-sel select { background: var(--notte-2); color: var(--crema); border: 1px solid rgb(240 228 216 / .18); border-radius: 10px; }
  .sidebar .voci .menu-n { background: var(--arancio); color: var(--notte); }
  .sidebar :focus-visible { outline-color: var(--arancio-2); }
}
.topbar .logo { height: auto; }
/* accesso */
.accesso .form-box .logo { display: block; height: auto; margin-bottom: 30px; color: var(--testo); }
.accesso .form-box .logo .marchio .nome { font-size: 34px; }
.accesso .lato .mark { color: var(--crema); }
.accesso .lato .mark .marchio .nome { font-size: 36px; }
.accesso .lato .mark .marchio .sotto { color: var(--crema-2); }
.accesso .lato h2 { color: var(--crema); font-weight: 600; }
@media (min-width: 960px) { .accesso .form-box .logo { display: none; } }
/* telefono: nella barra in alto basta il nome, il titolo della pagina ha bisogno di spazio */
@media (max-width: 1023px) { .topbar .marchio .sotto { display: none; } .topbar .marchio .nome { font-size: 22px; } }
/* menu laterale compatto: deve stare in uno schermo da portatile (≈700px) senza nascondere Profilo ed Esci */
@media (min-width: 1024px) {
  .sidebar { padding-top: 20px; }
  .sidebar .marchio { margin-bottom: 14px; }
  .sidebar a { padding: 8px 14px; font-size: 15.5px; }
  .sidebar a .ph { font-size: 21px; }
  .sidebar .gruppo { padding: 12px 14px 4px; }
  .sidebar .vista-sel { margin: 4px 0 2px; padding: 8px 10px; }
  .sidebar .vista-sel select { min-height: 36px; }
  .sidebar .utente { padding-top: 10px; }
}
@media (min-width: 1024px) and (max-height: 760px) { .sidebar .gruppo { display: none; } .sidebar .vista-sel .vista-lbl { display: none; } }
@media (min-width: 1024px) { .sidebar { box-shadow: inset -1px 0 0 rgb(240 228 216 / .08); } }
@media (min-width: 768px) { .tabs { flex-wrap: wrap; overflow: visible; } }

/* ================================================================ porkàpp: solo chiaro (29/10/2026)
   Fondo bianco, accenti arancio e bordeaux, niente superfici scure. Il logo è porkàpp; Animàre firma in piccolo in fondo. */
.logo-app { display: block; width: auto; height: 40px; }
.topbar .logo { display: inline-flex; }
.topbar .logo .logo-app { height: 30px; }
@media (min-width: 1024px) {
  .sidebar { background: var(--surface); color: var(--testo); box-shadow: inset -1px 0 0 var(--linea); scrollbar-color: var(--linea-forte) transparent; }
  .sidebar .logo-link { display: block; margin: 0 10px 18px; }
  .sidebar .logo-link .logo-app { height: 46px; }
  .sidebar a { color: var(--testo-2); }
  .sidebar a:hover { background: var(--surface-2); color: var(--testo); }
  .sidebar a.active { background: #FBEEE1; color: var(--bordeaux); font-weight: 600; }
  .sidebar a.active .ph { color: var(--arancio); }
  .sidebar .gruppo { color: var(--testo-3); }
  .sidebar .utente { color: var(--testo-3); border-top-color: var(--linea); }
  .sidebar .utente strong { color: var(--testo); }
  .sidebar .utente .btn.ghost { color: var(--testo-2); }
  .sidebar .utente .btn.ghost:hover { background: var(--surface-2); color: var(--testo); }
  .sidebar .vista-sel { background: var(--surface-2); border-color: var(--linea); }
  .sidebar .vista-sel .vista-lbl { color: var(--testo-3); }
  .sidebar .vista-sel select { background: var(--surface); color: var(--testo); border-color: var(--linea-forte); }
  .sidebar :focus-visible { outline-color: var(--arancio); }
  .topbar .logo { display: none; }
}
/* accesso: chiaro, con il calore dell'arancio e il bordeaux nei titoli */
@media (min-width: 960px) {
  .accesso .lato { background: radial-gradient(90% 70% at 100% 0%, rgb(216 132 48 / .18), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgb(84 24 36 / .10), transparent 70%), #FFF9F3; color: var(--testo); border-right: 1px solid var(--linea); }
  .accesso .lato h2 { color: var(--bordeaux); }
  .accesso .lato p { color: var(--testo-2); }
}
.accesso .lato .mark .logo-app { height: 64px; }
.accesso .form-box .logo .logo-app { height: 52px; }
/* risultato in alto: colori pieni ma chiari, mai notte */
.verdetto.buono { background: radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / .18), transparent 60%), linear-gradient(135deg, #2F7A57, #3C9068); color: #fff; }
.verdetto.attenzione { background: radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / .25), transparent 60%), linear-gradient(135deg, #D88430, #E8A055); color: #2A0F18; }
.verdetto.attenzione .info, .verdetto.attenzione .termo-zero, .verdetto.attenzione .termo-teo { color: #2A0F18; }
.verdetto.male { background: radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / .14), transparent 60%), linear-gradient(135deg, #541824, #7A2232); color: #fff; }
.verdetto.neutro { background: radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / .16), transparent 60%), linear-gradient(135deg, #6E2A38, #8C3A48); color: #fff; }
/* firma Animàre */
.credito { margin: 48px 0 8px; padding-top: 18px; border-top: 1px solid var(--linea); text-align: center; }
.credito a { display: inline-flex; align-items: baseline; gap: 6px; color: var(--testo-3); font-size: 13px; text-decoration: none; }
.credito a:hover { color: var(--bordeaux); }
.credito .marchio .nome { font-size: 16px; color: var(--bordeaux); }
.nome-app i { font-style: normal; color: var(--arancio); }
.accesso .lato .mark { height: auto; }
.accesso .lato .mark .logo-app { height: 96px; }
@media (min-width: 1024px) { .sidebar .logo-link .logo-app { height: auto; width: 100%; max-width: 210px; } }
/* fondo bianco: le schede si staccano con bordo e ombra leggera */
.card, .kpi, .riga, .lista { border-color: var(--linea); }

/* ---------------------------------------------------------------- Utenti (pagina iniziale della Creator) */
.utenti-filtri { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.utenti-filtri .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.utenti-filtri .chip b { font-weight: 600; margin-left: 4px; opacity: .7; }
.utenti-filtri .chip.on { background: var(--on-bg); border-color: var(--on-bg); color: var(--on-testo); }
.utenti-filtri .cerca { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 360px; padding: 0 12px; border: 1px solid var(--linea-forte); border-radius: 999px; background: var(--surface); }
.utenti-filtri .cerca:focus-within { border-color: var(--arancio); box-shadow: 0 0 0 3px rgba(216, 132, 48, .18); }
.utenti-filtri .cerca input { border: 0; outline: 0; background: transparent; padding: 10px 0; width: 100%; font: inherit; }
.utenti-filtri .cerca .ph { color: var(--testo-3); }
.tab-utenti tbody tr.apribile { cursor: pointer; transition: background .15s ease; }
.tab-utenti tbody tr.apribile:hover, .tab-utenti tbody tr.apribile:focus-visible { background: var(--surface-2); outline: none; }
.tab-utenti tbody tr.apribile:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--arancio); }
.tab-utenti tbody tr.spento { opacity: .55; }
.tab-utenti .apri { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.tab-utenti .freccia { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: var(--bordeaux); transition: background .15s ease, transform .15s ease; }
.tab-utenti tr.apribile:hover .freccia { background: var(--arancio); color: #fff; transform: translateX(2px); }
.tab-utenti td:nth-child(3) { min-width: 120px; }
.tab-utenti td { vertical-align: middle; }
.tipo-utente { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--testo-2); }
.tipo-utente.t-allevatore { background: #FBEEE1; color: #8A4B14; }
.tipo-utente.t-mediatore { background: #F6E3E6; color: var(--bordeaux); }
.tipo-utente.t-soccide_pba { background: #E9F3EE; color: #2F7A57; }
.tipo-utente.t-controller { background: #EEEAF3; color: #4D3B6E; }
@media (max-width: 760px) {
  .tab-utenti thead { display: none; }
  .tab-utenti, .tab-utenti tbody, .tab-utenti tr, .tab-utenti td { display: block; width: 100%; }
  .tab-utenti tr { padding: 12px 14px; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
  .tab-utenti td { padding: 0 !important; border: 0 !important; text-align: left !important; }
  .tab-utenti tr { position: relative; padding-right: 48px !important; }
  .tab-utenti td:nth-child(1) { grid-column: 1; }
  .tab-utenti td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .tab-utenti td:nth-child(n+3):not(:last-child) { grid-column: 1 / -1; font-size: 13px; color: var(--testo-3); }
  .tab-utenti td:nth-child(4)::before { content: 'Consegne: '; }
  .tab-utenti td:nth-child(4) div { display: inline; margin-left: 6px; }
  .tab-utenti td:nth-child(5)::before { content: 'Ultimo accesso: '; }
  .tab-utenti td:last-child { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: auto; }
}

/* ---------------------------------------------------------------- Mediatore: clienti, scheda cliente, cliente della liquidazione */
.avviso-carica { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 0 0 14px; text-decoration: none; color: inherit;
  background: #FFF6EC; border-color: #F1D3B0; transition: transform .15s ease, box-shadow .15s ease; }
.avviso-carica > .ph:first-child { font-size: 24px; color: var(--arancio); }
.avviso-carica:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(84, 24, 36, .08); }
.cerca-clienti { display: flex; align-items: center; gap: 8px; padding: 0 12px; margin: 0 0 10px; border: 1px solid var(--linea-forte); border-radius: 999px; background: var(--surface); max-width: 360px; }
.cerca-clienti input { border: 0; outline: 0; background: transparent; padding: 10px 0; width: 100%; font: inherit; }
.cerca-clienti:focus-within { border-color: var(--arancio); }
.clienti-rete .cliente-riga { grid-template-columns: 1fr auto; text-decoration: none; color: inherit; transition: background .15s ease; }
.clienti-rete .cliente-riga:hover { background: var(--surface-2); }
.clienti-rete .cliente-riga .sotto .ph { color: var(--arancio); }
.clienti-rete .cliente-riga .dx { display: flex; align-items: center; gap: 10px; text-align: right; }
.clienti-rete .cliente-riga .dx span.small { display: block; }
.clienti-rete .cliente-riga .dx strong { color: var(--bordeaux); white-space: nowrap; }
.clienti-rete .cliente-riga .dx > .ph { color: var(--testo-3); transition: transform .15s ease; }
.clienti-rete .cliente-riga:hover .dx > .ph { transform: translateX(3px); color: var(--arancio); }

.cliente-testa { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin: -4px 0 14px; }
.cliente-testa .dati { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--testo-2); font-size: 14px; }
.cliente-testa .dati span { display: inline-flex; align-items: center; gap: 5px; }
.cliente-testa .azioni { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.provvigione-cliente { margin-top: 14px; }
.provvigione-cliente h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.provvigione-cliente h3 .ph { color: var(--arancio); }
.provvigione-cliente .condizione { font-size: 17px; margin: 6px 0 12px; }
.mini-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mini-kpi div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.mini-kpi span { display: block; font-size: 12.5px; color: var(--testo-3); }
.mini-kpi strong { font-size: 17px; color: var(--bordeaux); }
@media (max-width: 640px) { .mini-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.provvigione-cliente .storico { margin-top: 12px; }
.provvigione-cliente .storico summary { cursor: pointer; color: var(--testo-2); font-size: 14px; }
.prov-cella { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.prov-cella > span:first-child { font-weight: 600; }

.per-cliente { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-bottom: 14px; }
.per-cliente > .ph { font-size: 24px; color: var(--arancio); }
.cliente-letto { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-weight: 500; }
.cliente-letto.sicuro { color: var(--su); }
.cliente-letto.probabile { color: #8A4B14; }
.cliente-letto.manca { color: var(--giu); }

.scelta-cliente { margin: 4px 0 14px; border-width: 1.5px; transition: border-color .2s ease, background .2s ease; }
.scelta-cliente .testa { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.scelta-cliente .testa > .ph { font-size: 24px; margin-top: 2px; }
.scelta-cliente .riga-scelta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.scelta-cliente select { flex: 1 1 240px; min-width: 0; }
.scelta-cliente.stato-sicuro, .scelta-cliente.stato-scelto { border-color: #BFE0CF; background: #F3FAF6; }
.scelta-cliente.stato-sicuro .testa > .ph, .scelta-cliente.stato-scelto .testa > .ph { color: var(--su); }
.scelta-cliente.stato-probabile { border-color: #F1D3B0; background: #FFF6EC; }
.scelta-cliente.stato-probabile .testa > .ph { color: var(--arancio); }
.scelta-cliente.stato-manca { border-color: #F2C4BF; background: #FDF3F2; }
.scelta-cliente.stato-manca .testa > .ph { color: var(--giu); }
.scelta-cliente.errato { animation: scuoti .35s ease; }
@keyframes scuoti { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .scelta-cliente.errato { animation: none; } }

/* ---------------------------------------------------------------- Accordi cliente-macello */
.accordi-lista .accordo-riga { grid-template-columns: 1fr auto; align-items: center; }
.accordi-lista .accordo-riga .sotto .ph { color: var(--arancio); }
.accordi-lista .accordo-riga.da-chiedere { background: #FFF6EC; }
.accordi-lista .accordo-riga.da-chiedere .sotto strong { color: #8A4B14; }
.accordi-cliente h3, .chiedi-accordo strong { display: flex; align-items: center; gap: 8px; }
.accordi-cliente h3 .ph { color: var(--arancio); }
.chiedi-accordo { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; background: #FFF6EC; border-color: #F1D3B0; }
.chiedi-accordo > .ph { font-size: 24px; color: var(--arancio); }
.segmenti-a-capo { flex-wrap: wrap; }
.segmenti-a-capo button { flex: 1 1 45%; }

.contratti-lista .contratto-riga { grid-template-columns: 1fr auto; align-items: center; }
.contratti-lista .contratto-riga .titolo .ph { color: var(--bordeaux); }
.contratti-lista .dx-azioni { display: flex; align-items: center; gap: 4px; }

/* ---------------------------------------------------------------- Ultima consegna: la prima cosa da vedere */
.ultima-consegna { border-radius: 20px; padding: 18px 20px; margin: 4px 0 6px; border: 1.5px solid var(--linea); background: var(--surface); box-shadow: 0 8px 26px rgba(84, 24, 36, .06); }
.ultima-consegna .uc-testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ultima-consegna .uc-tit { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; color: var(--testo-2); font-family: var(--font-etichetta, inherit); }
.ultima-consegna .uc-data { color: var(--testo-2); font-size: 14px; }
.ultima-consegna .uc-corpo { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin: 14px 0 12px; }
.ultima-consegna .uc-premio span { display: block; font-size: 12.5px; color: var(--testo-3); }
.ultima-consegna .uc-premio b { display: block; font-size: 34px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ultima-consegna .uc-premio small { color: var(--testo-3); font-size: 13px; }
.ultima-consegna .uc-esito { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.ultima-consegna .uc-esito .ph { font-size: 22px; margin-top: 1px; }
.ultima-consegna .uc-esito p { margin: 0; font-size: 15.5px; line-height: 1.45; }
.ultima-consegna .uc-piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; font-size: 14px; color: var(--testo-2); }
.ultima-consegna.tono-buono { border-color: #BFE0CF; }
.ultima-consegna.tono-buono .uc-premio b, .ultima-consegna.tono-buono .uc-esito .ph { color: var(--su); }
.ultima-consegna.tono-buono .uc-esito { background: #F3FAF6; }
.ultima-consegna.tono-male { border-color: #F2C4BF; }
.ultima-consegna.tono-male .uc-premio b, .ultima-consegna.tono-male .uc-esito .ph { color: var(--giu); }
.ultima-consegna.tono-male .uc-esito { background: #FDF3F2; }
.ultima-consegna.tono-neutro .uc-esito, .ultima-consegna.tono-attesa .uc-esito { background: #FFF6EC; }
.ultima-consegna.tono-neutro .uc-esito .ph, .ultima-consegna.tono-attesa .uc-esito .ph { color: var(--arancio); }
@media (max-width: 560px) { .ultima-consegna .uc-corpo { grid-template-columns: 1fr; gap: 10px; } }
.esito-ultima { display: flex; align-items: center; gap: 5px; font-weight: 500; }
.esito-ultima.tono-buono { color: var(--su); }
.esito-ultima.tono-male { color: var(--giu); }
.esito-ultima.tono-neutro, .esito-ultima.tono-attesa { color: #8A4B14; }

.link-btn { background: none; border: 0; padding: 0; color: var(--verde); text-decoration: underline; cursor: pointer; font: inherit; }
.informativa h3 { margin: 18px 0 6px; font-size: 17px; color: var(--bordeaux); }
.informativa h3:first-child { margin-top: 0; }
.informativa ul { margin: 6px 0 10px; padding-left: 20px; }
.informativa li { margin: 4px 0; }

/* ---------------------------------------------------------------- Da fare (in cima alla pagina iniziale) */
.da-fare { border: 1.5px solid var(--arancio); border-radius: 18px; background: var(--surface); padding: 6px 6px 8px; margin: 0 0 18px; box-shadow: 0 8px 22px rgba(84, 24, 36, .06); animation: df-entra .35s ease both; }
.da-fare .df-testa { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--bordeaux); font-family: var(--font-etichetta, inherit); }
.da-fare .df-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--arancio); color: var(--notte); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; }
.da-fare .df-riga { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border-radius: 12px; color: var(--testo); text-decoration: none; transition: background .15s ease, transform .15s ease; }
.da-fare .df-riga[hidden] { display: none; }
.da-fare .df-riga + .df-riga { border-top: 1px solid var(--linea); }
.da-fare .df-riga:hover { background: var(--crema); }
.da-fare .df-riga:active { transform: scale(.99); }
.da-fare .df-riga:focus-visible { outline: 3px solid var(--arancio); outline-offset: 1px; }
.da-fare .df-ico { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--ambra-tenue, var(--crema)); color: var(--bordeaux); font-size: 19px; }
.da-fare .df-riga.male .df-ico { background: var(--rosso-tenue); color: var(--rosso); }
.da-fare .df-testo { font-size: 15px; line-height: 1.35; }
.da-fare .df-azione { font-weight: 700; color: var(--bordeaux); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.da-fare .df-altre { background: none; border: 0; color: var(--testo-2); font: inherit; font-size: 14px; padding: 8px 12px; cursor: pointer; text-decoration: underline; min-height: 44px; }
@media (max-width: 560px) { .da-fare .df-riga { grid-template-columns: 32px 1fr; } .da-fare .df-azione { grid-column: 2; font-size: 14px; } }
@keyframes df-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .da-fare { animation: none; } }

/* Soccide PBA: scelta tra "Per soccidario" e "Totale dell'anno" */
.seg-vista { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--crema); margin: 0 0 16px; max-width: 100%; }
.seg-vista a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 10px; font-weight: 700; font-size: 15px; color: var(--testo-2); text-decoration: none; transition: background .15s ease, color .15s ease; }
.seg-vista a.on { background: var(--surface); color: var(--bordeaux); box-shadow: 0 2px 8px rgba(84, 24, 36, .10); }
.seg-vista a:focus-visible { outline: 3px solid var(--arancio); outline-offset: 1px; }
@media (max-width: 420px) { .seg-vista { display: flex; } .seg-vista a { flex: 1; justify-content: center; padding: 0 8px; font-size: 14px; } }
.manca-accordo { color: var(--giallo-testo, var(--testo-2)); }
.altri-soccidari summary { cursor: pointer; color: var(--testo-2); min-height: 44px; display: flex; align-items: center; }

/* Esito subito dopo il salvataggio di una consegna */
.esito-salvato { border-radius: 18px; padding: 14px 16px; margin: 0 0 16px; border: 1.5px solid var(--linea); background: var(--surface); animation: df-entra .35s ease both; }
.esito-salvato .es-testa { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--su); }
.esito-salvato p { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 12px; font-size: 16px; line-height: 1.4; }
.esito-salvato.tono-buono { border-color: var(--su); background: var(--su-tenue, var(--surface)); }
.esito-salvato.tono-male { border-color: var(--giu); background: var(--giu-tenue, var(--surface)); }
.esito-salvato.tono-male p .ph { color: var(--giu); }
.esito-salvato .es-azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.card.contesta.evidenzia { box-shadow: 0 0 0 3px var(--arancio); animation: df-pulsa 1.2s ease 2; }
@keyframes df-pulsa { 50% { box-shadow: 0 0 0 7px rgba(232, 125, 40, .25); } }
@media (prefers-reduced-motion: reduce) { .esito-salvato, .card.contesta.evidenzia { animation: none; } }

/* Cruscotto di Creator e Controller */
.cruscotto .lista-tipi { display: flex; flex-direction: column; }
.cruscotto .riga-tipo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--linea); font-size: 15px; }
.cruscotto .riga-tipo:first-child { border-top: 0; }
.cruscotto .riga-tipo strong { font-size: 18px; color: var(--bordeaux); }
.cruscotto .lista-servizi { display: flex; flex-direction: column; gap: 12px; }
.cruscotto .servizio { display: flex; gap: 10px; align-items: flex-start; }
.cruscotto .servizio > .ph { font-size: 22px; margin-top: 1px; }
.cruscotto .servizio.ok > .ph { color: var(--su); }
.cruscotto .servizio.ko > .ph { color: var(--giu); }
.sidebar .voci a.sotto-voce { padding-left: 30px; font-size: 14px; }

/* Clienti: semaforo dell'ultima consegna rispetto all'accordo */
.semaforo { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--linea-forte); }
.semaforo.s-buono { background: var(--su); }
.semaforo.s-male { background: var(--giu); box-shadow: 0 0 0 3px var(--giu-tenue, rgba(200, 40, 40, .15)); }
.clienti-elenco strong.giu { color: var(--giu); }
/* Note tecniche */
.note-tecniche .nota { border-top: 1px solid var(--linea); padding: 12px 2px; }
.note-tecniche .nota:first-of-type { border-top: 0; }
.note-tecniche .nota-testa { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--testo-2); }
.note-tecniche .nota-tipo { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--bordeaux); }
.note-tecniche .nota p { margin: 6px 0 0; white-space: pre-wrap; }
.note-tecniche .esito-int { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--crema); font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.note-tecniche .esito-int.meglio { background: var(--su-tenue, var(--crema)); }
.note-tecniche .esito-int.peggio { background: var(--giu-tenue, var(--crema)); }

/* ================================================================ Cruscotti (stile pannello di controllo, palette Animàre) */
.crs-sotto { margin: -6px 0 18px; color: var(--testo-3); font-size: 14px; }
.crs-btn-scuro { background: var(--notte); color: var(--crema); border-color: var(--notte); min-height: 44px; }
.crs-btn-scuro:hover { background: var(--bordeaux); color: #fff; }
.crs-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.crs-kpi-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--linea); border-radius: var(--r-card); padding: 16px 16px 14px; box-shadow: var(--ombra); min-height: 148px; animation: df-entra .4s ease both; }
.crs-kpi-card:nth-child(2) { animation-delay: .05s; } .crs-kpi-card:nth-child(3) { animation-delay: .1s; } .crs-kpi-card:nth-child(4) { animation-delay: .15s; }
.crs-kpi-t { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--testo-2); font-size: 14px; }
.crs-kpi-t .ph { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--ambra-tenue); color: var(--bordeaux); font-size: 17px; }
.crs-kpi-v { position: relative; z-index: 1; margin-top: 12px; font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--testo); line-height: 1; font-variant-numeric: tabular-nums; }
.crs-kpi-v small { font-size: 14px; font-weight: 500; color: var(--testo-3); margin-left: 6px; letter-spacing: 0; }
.crs-kpi-d { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; max-width: 70%; }
.delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-weight: 700; background: var(--crema); color: var(--testo-2); }
.delta.su { background: var(--su-tenue, #E3F1EA); color: var(--su); }
.delta.giu { background: var(--rosso-tenue); color: var(--giu); }
.delta-t { color: var(--testo-3); }
.crs-spark { position: absolute; right: 0; bottom: 0; width: 46% !important; height: 62px !important; opacity: .9; }
.crs-riga { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 16px; }
.crs-card { border-radius: var(--r-card); box-shadow: var(--ombra); }
.crs-card-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.crs-card-testa h3 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.crs-grafico { position: relative; height: 270px; }
.crs-ciambella { position: relative; height: 190px; margin: 4px 0 10px; }
.crs-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.crs-centro b { font-size: 30px; color: var(--bordeaux); line-height: 1; }
.crs-centro span { font-size: 13px; color: var(--testo-3); }
.crs-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.crs-legenda li { display: flex; align-items: center; gap: 8px; }
.crs-legenda li b { margin-left: auto; }
.crs-legenda i { width: 10px; height: 10px; border-radius: 50%; background: var(--linea-forte); flex: none; }
.crs-legenda .c0 { background: var(--bordeaux); } .crs-legenda .c1 { background: var(--arancio); } .crs-legenda .c2 { background: var(--oliva); } .crs-legenda .c3 { background: var(--salvia); } .crs-legenda .c4 { background: var(--arancio-2); }
.crs-tab td { vertical-align: middle; }
.crs-tab td.con-avatar { display: flex; align-items: center; gap: 10px; }
.crs-tab td.con-avatar > span:last-child, .crs-tab td .tiny { display: block; }
.crs-tab tr[hidden] { display: none; }
.avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--crema); color: var(--bordeaux); font-weight: 800; font-size: 13px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.p-ok { background: var(--su-tenue, #E3F1EA); color: var(--su); }
.pill.p-ko { background: var(--rosso-tenue); color: var(--giu); }
.pill.p-attesa { background: var(--ambra-tenue); color: var(--ambra); }
.pill.p-info { background: var(--crema); color: var(--bordeaux); }
.crs-piede { padding: 12px 18px 16px; font-size: 14px; }
/* pannello scuro delle notifiche */
.crs-notifiche { background: linear-gradient(160deg, var(--notte) 0%, var(--bordeaux) 140%); color: var(--crema); border-radius: var(--r-card); padding: 16px 16px 12px; box-shadow: var(--ombra); }
.crs-notifiche h3 { color: #fff; }
.crs-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--arancio); color: var(--notte); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.crs-notifica { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 10px 4px; border-top: 1px solid rgba(240, 228, 216, .12); color: var(--crema); text-decoration: none; font-size: 14px; line-height: 1.35; }
.crs-notifica:first-of-type { border-top: 0; }
.crs-notifica .ph { font-size: 18px; color: var(--arancio-2); margin-top: 1px; }
.crs-notifica.male .ph { color: #FF9C8F; }
.crs-notifica b { color: var(--arancio-2); white-space: nowrap; font-size: 13px; }
.crs-notifica time { color: rgba(240, 228, 216, .6); font-size: 12px; white-space: nowrap; }
a.crs-notifica:hover { background: rgba(240, 228, 216, .06); border-radius: 10px; }
.crs-notifica.evento strong { color: #fff; font-weight: 600; }
.crs-vuoto { display: flex; gap: 8px; align-items: center; color: var(--crema); margin: 4px 0 8px; }
@media (max-width: 1100px) { .crs-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crs-riga { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .crs-kpi { grid-template-columns: 1fr; } .crs-kpi-v { font-size: 30px; } .crs-grafico { height: 220px; } .crs-tab th:nth-child(3), .crs-tab td:nth-child(3) { display: none; } }

/* Gestionale del mediatore (stile CRM) */
.crm-alto { display: grid; grid-template-columns: 1.1fr .8fr 1.1fr 1fr; gap: 14px; margin-bottom: 16px; }
.crm-blocco { background: var(--surface); border: 1px solid var(--linea); border-radius: var(--r-card); padding: 16px; box-shadow: var(--ombra); animation: df-entra .4s ease both; }
.crm-t { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-etichetta, inherit); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--testo-3); }
.crm-v { font-size: 26px; font-weight: 800; color: var(--testo); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.crm-v.grande { font-size: 32px; }
.crm-top { display: flex; flex-direction: column; padding: 8px 10px; margin-top: 8px; border: 1px solid var(--linea); border-radius: 12px; text-decoration: none; color: var(--testo); transition: background .15s ease, transform .15s ease; }
.crm-top:hover { background: var(--surface-2); transform: translateX(2px); }
.crm-top strong { color: var(--bordeaux); font-size: 15px; }
.crm-verde { background: linear-gradient(160deg, #EAF4EE, #F7FBF8); border-color: #CFE5D8; }
.crm-verde .crm-v { color: var(--su); }
.crm-bordeaux { background: linear-gradient(160deg, var(--bordeaux), var(--notte)); color: var(--crema); border-color: var(--bordeaux); }
.crm-bordeaux .crm-t, .crm-bordeaux .small { color: rgba(240, 228, 216, .75); }
.crm-bordeaux .crm-v { color: #fff; }
.crm-due { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(84, 24, 36, .12); }
.crm-bordeaux .crm-due { border-top-color: rgba(240, 228, 216, .18); }
.crm-due span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.crm-due b { font-size: 17px; }
.crm-bacheca { border-radius: var(--r-card); box-shadow: var(--ombra); margin-bottom: 18px; }
.crm-colonne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.crm-colonna { background: var(--surface-2); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.crm-col-testa { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 700; font-size: 14px; }
.crm-col-testa b { margin-left: auto; }
.crm-col-testa i { font-style: normal; min-width: 22px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .7); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.col-attesa .crm-col-testa { background: var(--ambra-tenue); color: var(--ambra); }
.col-ok .crm-col-testa { background: var(--crema); color: var(--bordeaux); }
.col-fatto .crm-col-testa { background: #E3F1EA; color: var(--su); }
.crm-col-corpo { padding: 8px; display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; }
.crm-scheda { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--linea); border-radius: 12px; text-decoration: none; color: var(--testo); box-shadow: 0 1px 2px rgba(25, 10, 17, .04); transition: transform .15s ease, box-shadow .15s ease; }
.crm-scheda:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(25, 10, 17, .3); }
.crm-scheda strong { grid-column: 1; font-size: 15px; }
.crm-scheda .small { grid-column: 1; }
.crm-scheda b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--bordeaux); white-space: nowrap; }
@media (max-width: 1100px) { .crm-alto { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .crm-alto, .crm-colonne { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .crm-blocco, .crs-kpi-card { animation: none; } }