/* Modulo Gelo (buyer del congelato): cruscotto /gelo e scheda articolo.
   Il linguaggio e' quello dell'app — tessere KPI tinte, tabella estendibile, card
   grafico — con le pill di fascia come lessico proprio: la copertura si legge a
   colpo d'occhio dal colore, il numero preciso sta accanto. */

/* ---- LE TESSERE DI COMANDO del cruscotto ("tutto parte da quelle" — Mattias
   2026-08-10): card con icona nel suo colore di ruolo, valore grande, UNA riga di
   contesto, freccia solo dove si clicca. Ambra = azione, rosso = dorme, corallo =
   produzione, blu = cassa, azzurro = scorta. Il filtro attivo porta l'anello. ---- */

.gelo-kpi-griglia {
  display: grid;
  /* Otto card TUTTE uguali, 4 + 4 su due file piene (Mattias 2026-08-11): con le
     card-lista piu' larghe delle altre i conti delle file non tornavano piu' e la
     griglia si sbriciolava in 4+3+1. I nomi lunghi si troncano con l'ellissi. */
  grid-template-columns: repeat(12, 1fr);
  gap: 0.9rem;
  margin: 1.4rem 0 1.6rem;
}

.gelo-kpi {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  grid-column: span 3;
  padding: 1.15rem 1.2rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* La barra d'accento in cima, nel colore di ruolo: si vede da lontano chi e' chi. */
.gelo-kpi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--kpi-accento, var(--border));
}

a.gelo-kpi:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.gelo-kpi.is-attiva {
  outline: 2px solid var(--navy-bright);
  outline-offset: 1px;
}

/* L'icona nel cerchio morbido del colore di ruolo, con un velo d'anello. */
.gelo-kpi-icona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6) inset;
}

.gelo-kpi-icona .icon {
  width: 22px;
  height: 22px;
}

.gelo-kpi-corpo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.gelo-kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-text);
}

/* Il sottotitolo delle tessere gemelle "Da acquistare" (Mattias 2026-08-11):
   stesso titolo, la distinzione sta qui — piu' scuro del label per leggersi al volo. */
.gelo-kpi-sottotitolo {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
}

.gelo-kpi-valore {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.gelo-kpi-valore small {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-text);
}

.gelo-kpi-riga {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--gray-text);
}

.gelo-kpi-riga strong {
  color: var(--ink);
}

.gelo-kpi-freccia {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gray-text);
  transition: all 0.15s ease;
}

a.gelo-kpi:hover .gelo-kpi-freccia {
  background: var(--navy-bright);
  border-color: var(--navy-bright);
  color: #fff;
  transform: translateX(3px);
}

/* I colori di ruolo: barra, icona e valore. */
.gelo-kpi.is-azione {
  --kpi-accento: #b45309;
}

.gelo-kpi.is-azione .gelo-kpi-icona {
  background: #fdf0e3;
  color: #b45309;
}

.gelo-kpi.is-azione .gelo-kpi-valore {
  color: #b45309;
}

.gelo-kpi.is-cassa {
  --kpi-accento: var(--navy-bright);
}

.gelo-kpi.is-cassa .gelo-kpi-icona {
  background: var(--azure-soft);
  color: var(--navy-bright);
}

.gelo-kpi.is-cassa .gelo-kpi-valore {
  color: var(--navy-bright);
}

.gelo-kpi.is-dorme {
  --kpi-accento: var(--danger);
}

.gelo-kpi.is-dorme .gelo-kpi-icona {
  background: #fdecea;
  color: var(--danger);
}

.gelo-kpi.is-dorme .gelo-kpi-valore {
  color: var(--danger);
}

.gelo-kpi.is-scorta {
  --kpi-accento: var(--azure);
}

.gelo-kpi.is-scorta .gelo-kpi-icona {
  background: var(--azure-soft);
  color: var(--navy);
}

.gelo-kpi.is-produzione {
  --kpi-accento: var(--corallo);
}

.gelo-kpi.is-produzione .gelo-kpi-icona {
  background: var(--corallo-soft);
  color: var(--corallo-dark);
}

.gelo-kpi.is-produzione .gelo-kpi-valore {
  color: var(--corallo-dark);
}

.gelo-kpi.is-venduti {
  --kpi-accento: var(--navy-bright);
}

.gelo-kpi.is-venduti .gelo-kpi-icona {
  background: var(--azure-soft);
  color: var(--navy-bright);
}

.gelo-kpi.is-rotture {
  --kpi-accento: var(--danger);
}

.gelo-kpi.is-rotture .gelo-kpi-icona {
  background: #fdecea;
  color: var(--danger);
}

.gelo-kpi.is-rotture .gelo-kpi-valore {
  color: var(--danger);
}

/* Le tessere-lista: i primi tre articoli dentro la card, nome troncato a sinistra e
   numero a destra — la classifica completa e' il filtro al clic. */
.gelo-kpi-lista {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.2rem 0;
  min-width: 0;
}

.gelo-kpi-lista-riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--gray-text);
}

.gelo-kpi-lista-riga + .gelo-kpi-lista-riga {
  border-top: 1px solid var(--border-soft);
  padding-top: 0.25rem;
}

/* Il numero di classifica dei piu' venduti. */
.gelo-kpi-rank {
  flex-shrink: 0;
  width: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--navy-bright);
}

.gelo-kpi-lista-riga strong {
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gelo-kpi-lista-nome {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 1100px) {
  .gelo-kpi-griglia {
    grid-template-columns: 1fr 1fr;
  }

  .gelo-kpi {
    grid-column: span 1;
  }
}

@media (max-width: 720px) {
  .gelo-kpi-griglia {
    grid-template-columns: 1fr;
  }

  .gelo-kpi {
    grid-column: span 1;
    padding: 0.9rem;
  }

  .gelo-kpi-valore {
    font-size: 1.35rem;
  }
}

/* ---- L'occhiello che torna al cruscotto dalla scheda articolo. ---- */

.eyebrow-link {
  color: inherit;
  text-decoration: none;
}

.eyebrow-link:hover {
  text-decoration: underline;
}

/* ---- I blocchi della pagina (tabella articoli, fornitori). ---- */

.gelo-block {
  margin-top: 1.6rem;
  padding: 1.2rem 1.4rem 1.4rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.gelo-block-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.gelo-block-note {
  margin: 0.25rem 0 0.9rem;
  font-size: 0.85rem;
  color: var(--gray-text);
  max-width: 68ch;
}

/* ---- La tabella articoli. ---- */

.gelo-table th[scope="row"] {
  font-weight: 600;
}

.gelo-articolo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  text-decoration: none;
}

.gelo-articolo-link:hover .gelo-nome {
  color: var(--navy-bright);
  text-decoration: underline;
}

.gelo-capitale {
  font-weight: 700;
}

.gelo-unita,
.gelo-mesi,
.gelo-quando {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--gray-text);
  white-space: nowrap;
}

/* ---- Le pill di fascia: la copertura come colore. Verde = gira, ambra = alta,
   rosso tenue = capitale che dorme. "Senza vendite" e' grigio, non rosso: non e'
   un allarme, e' un'assenza — spesso un doppione decongelato. ---- */

.gelo-fascia {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.gelo-fascia.is-ok {
  background: #e5f3e9;
  color: var(--semaforo-verde);
}

.gelo-fascia.is-alta {
  background: #fdf0e3;
  color: var(--semaforo-arancio);
}

.gelo-fascia.is-ferma {
  background: #fdecea;
  color: var(--danger);
}

/* Scorta lunga: oltre 12 mesi ma VIVA — informazione neutra, mai rossa
   (Mattias 2026-08-09: "se ho comprato un sacco ma vendo, la merce non e' morta"). */
.gelo-fascia.is-scorta {
  background: var(--azure-soft);
  color: var(--navy);
}

.gelo-fascia.is-muta {
  background: var(--border-soft);
  color: var(--gray-text);
}

/* Il lavorato non e' un'anomalia: e' merce che nasce in casa. Corallo soft come il
   badge decongelato — un accento, non uno stato. */
.gelo-fascia.is-lavorazione {
  background: var(--corallo-soft);
  color: var(--corallo-dark);
}

/* L'arrivo piu' recente nella tabella fornitori: il fornitore ATTUALE. */
.gelo-fascia.is-recente {
  background: var(--azure-soft);
  color: var(--navy);
}

/* Materia prima della produzione: piena se mappata, bordata col punto di domanda se
   presunta dal rapporto comprato/venduto (da mappare in lavorazioni_gelo.yml). */
.gelo-fascia.is-produzione {
  background: var(--corallo-soft);
  color: var(--corallo-dark);
}

.gelo-fascia.is-produzione-presunta {
  background: var(--surface);
  color: var(--corallo-dark);
  border: 1px dashed var(--corallo);
}

/* ---- Il giudizio dell'ultimo prezzo contro la mediana della propria storia. ---- */

.gelo-delta {
  font-weight: 700;
}

.gelo-delta.is-caro {
  color: var(--danger);
}

.gelo-delta.is-buono {
  color: var(--semaforo-verde);
}

/* Il consumo stimato via lavorazioni, sotto il ritmo: seconda riga discreta, il
   dettaglio dei lavorati sta nel tooltip. */
.gelo-indotto {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--corallo-dark);
  white-space: nowrap;
}

/* L'ultima vendita sotto il ritmo: su una scorta lunga "ultima ieri" e "ultima 3
   mesi fa" sono due articoli diversi. */
.gelo-ultima {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--gray-text);
  white-space: nowrap;
}

/* ---- Le liste delle lavorazioni nella scheda (nasce da / esce anche come). ---- */

.gelo-lavorazione-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gelo-lavorazione-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
}

.gelo-lavorazione-lista li + li {
  border-top: 1px solid var(--border-soft);
}

.gelo-lavorazione-ritmo {
  font-size: 0.8rem;
  color: var(--gray-text);
  white-space: nowrap;
}

/* ---- Avvisi e note dichiarate. ---- */

.gelo-notice {
  margin: 1rem 0 0;
  padding: 0.7rem 1rem;
  background: var(--corallo-soft);
  border-radius: var(--radius-small);
  font-size: 0.85rem;
  color: var(--corallo-dark);
}

/* La variante informativa: la rilettura delle basi e' una nota di metodo, non un
   allarme — azzurro come le note di cassa, non corallo. */
.gelo-notice.is-info {
  background: var(--azure-soft);
  color: var(--navy);
}

.gelo-fuori {
  margin-top: 1.4rem;
  padding: 0.9rem 1.2rem;
  background: var(--surface);
  border-radius: var(--radius-small);
  font-size: 0.85rem;
  color: var(--gray-text);
}

.gelo-fuori summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}

.gelo-fuori ul {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
}

.gelo-fuori li + li {
  margin-top: 0.4rem;
}

/* ---- La scheda articolo. ---- */

.gelo-badge-decongelato {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15rem 0.6rem;
  background: var(--corallo-soft);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--corallo-dark);
  vertical-align: middle;
}

.gelo-chart-card {
  margin-top: 1.6rem;
}

/* Il grafico unico della scheda: tre pannelli in colonna (venduto/stima, prezzi &
   guadagno, cella) sulla stessa asse del tempo — serve aria in verticale. */
.gelo-chart-box {
  width: 100%;
  height: 380px;
}

.gelo-chart-box.is-oracle {
  height: 660px;
}

/* ---- I fornitori della scheda. ---- */

.gelo-lead {
  display: inline-block;
  margin-right: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gelo-lead.is-import {
  background: var(--azure-soft);
  color: var(--navy);
}

.gelo-lead.is-nazionale {
  background: #e5f3e9;
  color: var(--semaforo-verde);
}

.gelo-lead.is-locale {
  background: var(--border-soft);
  color: var(--gray-text);
}

.gelo-minimo {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.75rem;
  color: var(--gray-text);
}

.gelo-non-profilato {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--corallo-dark);
}

/* Capitale non valorizzabile (prezzi a collo/pezzo): il trattino porta la spiegazione
   nel title — un numero finto qui e' esattamente il bug che ha scoperto Mattias. */
.gelo-non-valorizzato {
  color: var(--gray-text);
  cursor: help;
  border-bottom: 1px dotted var(--gray-text);
}

@media (max-width: 720px) {
  .gelo-chart-box {
    height: 300px;
  }

  .gelo-block {
    padding: 1rem;
  }
}

/* ---- La proposta d'acquisto: bottone nelle liste del riordino e modal. ---- */

.gelo-proposta-bottone {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy-bright);
  cursor: pointer;
}

.gelo-proposta-bottone:hover {
  border-color: var(--navy-bright);
  background: var(--azure-soft);
}

/* I tasti che aprono una scheda in una NUOVA SCHEDA del browser (Mattias 2026-09-04) sono
   link, non bottoni: stesso aspetto, niente sottolineatura. */
a.gelo-proposta-bottone,
a.gelo-gruppo-tasto,
a.gelo-gruppo-apri,
a.gelo-proposta-card {
  text-decoration: none;
}

a.gelo-proposta-card {
  color: inherit;
}

/* La proposta come PAGINA (link in nuova scheda): larghezza del modal, centrata. */
.gelo-proposta-pagina .gelo-proposta {
  max-width: 1200px;
  margin: 0 auto;
}

/* LA CARD-AZIONE della scheda: sta TRA le tessere e si deve vedere — ambra come
   tutte le azioni del gelo, testo grande, freccia. E' un <button>, non un div. */
.gelo-proposta-card {
  border: 2px solid #b45309;
  background: #fdf0e3;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.gelo-proposta-card .proposal-stat-value {
  color: #b45309;
}

.gelo-proposta-card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

/* La sfera d'attesa nel dialog appena aperto: spazio vero, niente filo rosso. */
.gelo-proposta-attesa {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 2rem;
}

.gelo-proposta-dialog {
  width: min(1280px, 96vw);
  max-height: 94vh;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.gelo-proposta-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

.gelo-proposta {
  padding: 1.5rem 1.8rem 1.8rem;
}

.gelo-proposta-testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.gelo-proposta-testa h3 {
  margin: 0.15rem 0 0;
  font-size: 1.4rem;
}

/* Il grafico dentro il modal: due pannelli soli (venduto e cella) su un'altezza
   da pagina intera — a 420px la cella restava un nastro (Mattias 2026-08-11). */
.gelo-proposta .gelo-chart-box {
  height: 580px;
}

/* Il blocco "ordine fatto": prima il salvataggio stava nell'ultima colonna della
   tabella, fuori dallo schermo — nessuno lo trovava. */
.gelo-proposta-salva {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  margin: 1.1rem 0 0.4rem;
  padding: 0.9rem 1.1rem;
  background: #e7f4ec;
  border-left: 4px solid #1b6e3d;
  border-radius: var(--radius-small);
}

.gelo-proposta-salva-testa {
  font-size: 1rem;
  font-weight: 800;
  color: #1b6e3d;
}

.gelo-proposta-salva-form {
  display: inline-flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.gelo-proposta-salva-campo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-text);
}

.gelo-proposta-input.is-grande {
  width: 6.5rem;
  padding: 0.45rem 0.6rem;
  font-size: 1rem;
  font-weight: 700;
}

.gelo-proposta-select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  font-size: 0.9rem;
  background: var(--surface);
}

.gelo-proposta-salva-bottone {
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: var(--radius-small);
  background: #1b6e3d;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.gelo-proposta-salva-bottone:hover {
  background: #14572f;
}

/* Gli ordini gia' registrati: una card STANDARD dell'app, non un semaforo verde
   (Mattias 2026-08-11: "cosa c'entra questo verde?") — il verde resta solo al
   blocco-azione del salvataggio. */
.gelo-proposta-ordini {
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.gelo-proposta-ordini-titolo {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-text);
}

/* Il tasto del completamento camion: discreto dentro il blocco verde, su riga sua. */
.gelo-proposta-altri-link {
  width: 100%;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy-bright);
}

/* ---- Il calendario della copertura "tipo Booking": bottone col periodo,
   pannello a due mesi, range colorato. ---- */

.calendario-copertura {
  position: relative;
  display: inline-block;
}

.calendario-copertura-bottone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--navy-bright);
  border-radius: var(--radius-small);
  background: var(--surface);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.calendario-copertura-bottone:hover {
  background: var(--azure-soft);
}

/* La variante compatta per le righe della registrazione multipla. */
.calendario-copertura-bottone.is-compatto {
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-color: var(--border);
}

.calendario-pannello {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  padding: 0.9rem 1rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.calendario-navigazione {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.calendario-freccia {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}

.calendario-freccia:hover {
  border-color: var(--navy-bright);
  color: var(--navy-bright);
}

.calendario-mesi {
  display: flex;
  gap: 1.4rem;
}

.calendario-mese-titolo {
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  text-transform: capitalize;
  color: var(--ink);
}

.calendario-griglia {
  display: grid;
  grid-template-columns: repeat(7, 34px);
  gap: 2px;
}

.calendario-intesta {
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: var(--gray-text);
  padding-bottom: 0.2rem;
}

.calendario-giorno {
  height: 32px;
  border: none;
  border-radius: var(--radius-small);
  background: transparent;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
}

.calendario-giorno:hover:not(:disabled) {
  background: var(--azure-soft);
}

.calendario-giorno:disabled {
  color: var(--border);
  cursor: default;
}

.calendario-giorno.is-nel-range {
  background: var(--azure-soft);
  border-radius: 0;
}

.calendario-giorno.is-estremo {
  background: var(--navy-bright);
  color: #fff;
  font-weight: 700;
}

.calendario-azioni {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.7rem;
}

.calendario-applica {
  padding: 0.45rem 1rem;
  border: none;
  border-radius: var(--radius-small);
  background: var(--navy-bright);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.calendario-applica:hover {
  background: var(--navy);
}

/* La testa dell'elenco fornitore col suo chiudi. */
.gelo-proposta-altri-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.gelo-proposta-altri-chiudi {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-text);
  white-space: nowrap;
}

.gelo-proposta-altri-chiudi:hover {
  color: var(--danger);
}

/* La registrazione multipla: date compatte in colonna, piede col bottone. */
.gelo-proposta-batch-date {
  white-space: nowrap;
}

.gelo-proposta-data.is-compatta {
  padding: 0.25rem 0.35rem;
  font-size: 0.78rem;
}

.gelo-proposta-batch-piede {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-top: 0.7rem;
}

/* L'invito a scegliere le date: neutro, al posto del fabbisogno finche' non c'e'. */
.gelo-proposta-invito {
  margin: 0 0 1.1rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-small);
  font-size: 0.95rem;
  color: var(--gray-text);
}

.gelo-proposta-invito strong {
  color: var(--ink);
}

/* La tabellina degli ordini: righe compatte, niente doppio sfondo. */
.gelo-proposta-ordini-tabella {
  font-size: 0.88rem;
}

.gelo-proposta-ordini-tabella td {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

/* "Com'e' andata" (Mattias 2026-09-04): la colonna della stima nello stesso ambra del
   fabbisogno, cosi' l'occhio la confronta con gli anni passati accanto. */
.gelo-storico-stima {
  color: #b45309;
  font-weight: 700;
}

.gelo-proposta-storico tfoot th,
.gelo-proposta-storico tfoot td {
  border-top: 2px solid var(--border);
}

/* La frase prima della tabella: il confronto in una riga, i numeri in tabella sotto. */
.gelo-proposta-storico-frase {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
}

/* Le celle mute (cella vuota, non c'era): centrate e leggere, si distinguono dai numeri. */
.gelo-storico-tabella .gelo-storico-muta {
  text-align: center;
}

.gelo-storico-tabella th.gelo-storico-stima {
  color: #b45309;
}

/* Il link "apri il gruppo" dentro la frase: in linea, non a tutta larghezza. */
.gelo-proposta-altri-link.is-inline {
  display: inline;
  width: auto;
  margin-left: 0.3rem;
}

.gelo-proposta-elimina {
  margin-left: 0.4rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--danger);
  cursor: pointer;
}

.gelo-proposta-elimina:hover {
  border-color: var(--danger);
  background: #fdecea;
}

.gelo-proposta .forecast-table {
  font-size: 0.9rem;
}

.gelo-proposta-chiudi {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--gray-text);
}

.gelo-proposta-chiudi:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.gelo-proposta-mesi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.gelo-proposta-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-text);
}

.gelo-proposta-form {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.gelo-proposta-input {
  width: 4.2rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  font-size: 0.85rem;
}

/* I calendari della copertura per finestra ("dal... al...", buyer 2026-08-11):
   input date nativi — il calendario lo mette il browser. */
.gelo-proposta-data {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  font-size: 0.85rem;
  font-family: inherit;
}

.gelo-proposta-form.is-periodo-attivo .gelo-proposta-data {
  border-color: var(--navy-bright);
}

.gelo-proposta-conto {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--gray-text);
}

.gelo-proposta-conto strong {
  color: var(--ink);
}

/* IL NUMERO della proposta, a caratteri da tessera: e' la risposta alla domanda
   del buyer, non una riga di prosa (Mattias 2026-08-11). */
.gelo-proposta-fabbisogno {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0 0 1.1rem;
  padding: 0.9rem 1.1rem;
  background: #fdf0e3;
  border-left: 4px solid #b45309;
  border-radius: var(--radius-small);
}

.gelo-proposta-fabbisogno-numero {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #b45309;
  white-space: nowrap;
}

.gelo-proposta-fabbisogno-testo {
  flex: 1;
  min-width: 260px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--gray-text);
}

.gelo-proposta-fabbisogno-testo strong {
  color: var(--ink);
}

.gelo-proposta-ordina {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.gelo-proposta-ordinato strong {
  color: var(--navy);
}

/* Il tag "gia' ordinato" nelle liste del riordino: verde = deciso, in viaggio. */
.gelo-fascia.is-ordinato {
  background: #e7f4ec;
  color: #1b6e3d;
}

.gelo-proposta-scegli {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.gelo-proposta-grafico-nota {
  margin: 1rem 0 0.5rem;
  font-size: 0.85rem;
  color: var(--gray-text);
}

.gelo-proposta-grafico-nota strong {
  color: var(--ink);
}

.gelo-proposta-disclaimer {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: var(--gray-text);
}

/* ---- I gruppi di sostituzione (Mattias 2026-09-03). Un esaurito COPERTO da un
   compagno in cella e' un allarme spento, non un'allerta: azzurro soft come la
   scorta lunga. Il rosso resta agli scoperti. ---- */

.gelo-kpi.is-coperti {
  --kpi-accento: var(--azure);
}

.gelo-kpi.is-coperti .gelo-kpi-icona {
  background: var(--azure-soft);
  color: var(--navy);
}

.gelo-fascia.is-coperto {
  background: var(--azure-soft);
  color: var(--navy);
}

a.gelo-fascia.is-coperto {
  text-decoration: none;
}

a.gelo-fascia.is-coperto:hover {
  background: var(--azure);
}

.gelo-muto {
  color: var(--gray-text);
}

.gelo-gruppo-link {
  color: var(--navy-bright);
  text-decoration: none;
}

.gelo-gruppo-link:hover {
  text-decoration: underline;
}

/* Il form a una riga: campo + bottone. */
.gelo-gruppo-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.gelo-gruppo-input {
  min-width: 18rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font: inherit;
}

.gelo-gruppo-input:focus {
  outline: 2px solid var(--azure);
  outline-offset: 1px;
}

.gelo-gruppo-bottone {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.gelo-gruppo-bottone:hover {
  background: var(--navy-dark);
}

.gelo-gruppo-bottone.is-secondario {
  background: var(--surface);
  color: var(--navy);
}

.gelo-gruppo-bottone.is-secondario:hover {
  background: var(--azure-soft);
}

.gelo-gruppo-bottone.is-elimina {
  background: var(--surface);
  color: var(--danger);
  border-color: var(--danger);
}

.gelo-gruppo-bottone.is-elimina:hover {
  background: #fdecea;
}

/* Il picker "aggiungi un articolo" / "collega a un gruppo": largo quanto serve. */
.gelo-gruppo-aggiungi {
  max-width: 32rem;
}



/* La ✕ di riga: piccola, muta finche' non ci si passa sopra. */
.gelo-gruppo-rimuovi-cella {
  width: 2.5rem;
  text-align: right;
}

.gelo-gruppo-rimuovi {
  border: 1px solid transparent;
  background: transparent;
  color: var(--gray-text);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  cursor: pointer;
}

.gelo-gruppo-rimuovi:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* L'ingresso ai gruppi di sostituzione in testa al cruscotto: bottone + una riga di
   contesto, sulla stessa riga dove c'e' spazio. */
.gelo-header-azioni {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 0;
}

.gelo-header-azioni .gelo-gruppo-bottone {
  text-decoration: none;
}

/* ---- Il modal "collega" dei gruppi di sostituzione: un dialog stretto con la ricerca
   unica su gruppi e articoli. La lista dei risultati ha bisogno di aria sotto il campo,
   da qui l'altezza minima. ---- */

.gelo-collega-bottone {
  display: inline-block;
  margin-top: 0.35rem;
  margin-right: 0.35rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}

.gelo-collega-bottone:hover {
  border-color: var(--navy-bright);
  background: var(--azure-soft);
}

.gelo-collega-dialog {
  width: min(720px, 96vw);
  max-height: 94vh;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.gelo-collega-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

.gelo-collega {
  min-height: 36rem;
  padding: 1.5rem 1.8rem 1.8rem;
}

.gelo-collega .gelo-proposta-testa h3 {
  font-size: 1.2rem;
}

.gelo-collega-nuovo {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}

.gelo-collega-nuovo-testo {
  margin: 0 0 0.6rem;
  color: var(--gray-text);
}

.picker-sezione {
  padding: 0.45rem 0.65rem 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-text);
}

.gelo-sostituti-azioni {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.gelo-sostituti-azioni .gelo-gruppo-bottone {
  margin-top: 0;
}

/* La pill del gruppo sulla riga del cruscotto, quando l'articolo e' in cella: e'
   un'informazione, non uno stato — bordo leggero, testo navy. I toni degli altri casi
   sono quelli di sempre: azzurro = coperto, rosso = a zero con tutti i compagni finiti. */
.gelo-fascia.is-gruppo {
  background: var(--surface);
  color: var(--navy);
  border: 1px solid var(--border);
}

a.gelo-fascia.is-gruppo,
a.gelo-fascia.is-ferma,
a.gelo-fascia.is-muta {
  text-decoration: none;
}

a.gelo-fascia.is-gruppo:hover {
  background: var(--azure-soft);
  border-color: var(--azure);
}

/* ---- La scheda del gruppo (partial _scheda): la stessa nel modal e nella pagina. ---- */

.gelo-gruppo-dialog {
  width: min(1040px, 96vw);
}

.gelo-gruppo-dialog-chiudi {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

.gelo-gruppo-dialog .gelo-proposta-attesa {
  padding: 3rem 1.5rem;
}

.gelo-scheda-gruppo {
  padding: 1.5rem 1.8rem 1.8rem;
}

.gelo-block > turbo-frame > .gelo-scheda-gruppo {
  padding: 0;
}

.gelo-scheda-gruppo-testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
  padding-right: 2.5rem;
}

.gelo-scheda-gruppo-titolo h3 {
  margin: 0.15rem 0 0.4rem;
  font-size: 1.4rem;
}

.gelo-scheda-gruppo-riassunto {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  color: var(--gray-text);
}

.gelo-scheda-gruppo-azioni {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.gelo-scheda-gruppo-rinomina summary {
  list-style: none;
  display: inline-block;
}

.gelo-scheda-gruppo-rinomina summary::-webkit-details-marker {
  display: none;
}

.gelo-scheda-gruppo-rinomina[open] summary {
  display: none;
}

.gelo-scheda-gruppo-tabella tr.is-esaurito th,
.gelo-scheda-gruppo-tabella tr.is-esaurito td {
  color: var(--gray-text);
}

.gelo-scheda-gruppo-piede {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}

.gelo-scheda-gruppo-piede .gelo-gruppo-aggiungi {
  flex: 1 1 24rem;
}

/* Una pill che e' un bottone (apre il modal del gruppo): stesso aspetto della pill. */
.gelo-fascia-bottone {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.gelo-fascia-bottone.is-gruppo {
  border: 1px solid var(--border);
}

.gelo-fascia-bottone:hover {
  filter: brightness(0.95);
}

button.gelo-gruppo-link {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* ---- L'elenco dei gruppi: tessere, "nuovo gruppo" a scomparsa, righe che aprono il modal. ---- */

.gelo-gruppi-testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.gelo-gruppi-nuovo summary {
  list-style: none;
  display: inline-block;
}

.gelo-gruppi-nuovo summary::-webkit-details-marker {
  display: none;
}

.gelo-gruppi-nuovo[open] summary {
  display: none;
}

.gelo-gruppi-nuovo .gelo-gruppo-input {
  min-width: 24rem;
}

.gelo-gruppo-apri {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.gelo-gruppo-apri:hover .gelo-nome {
  color: var(--navy-bright);
  text-decoration: underline;
}

.gelo-gruppo-apri:focus-visible {
  outline: 2px solid var(--navy-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.gelo-gruppo-apri-freccia {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--gray-logo);
}

.gelo-gruppi-tabella tr.is-spotlight th,
.gelo-gruppi-tabella tr.is-spotlight td {
  background: #fff7f5;
}

/* ---- Il tasto del gruppo sulla riga: corto, riconoscibile, col semaforo dei compagni.
   Il nome del gruppo NON sta qui (era una frase lunga un rigo): sta nel tooltip e nel
   modal. Toni: neutro se l'articolo e' in cella, azzurro se e' coperto, rosso se e' a
   zero e nessun compagno lo copre. ---- */

.gelo-gruppo-tasto {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  margin-right: 0.35rem;
  padding: 0.15rem 0.5rem 0.15rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  vertical-align: middle;
}

.gelo-gruppo-tasto .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.gelo-gruppo-tasto:hover {
  border-color: var(--navy-bright);
  background: var(--azure-soft);
}

.gelo-gruppo-tasto:focus-visible {
  outline: 2px solid var(--navy-bright);
  outline-offset: 2px;
}

.gelo-gruppo-tasto.is-coperto {
  background: var(--azure-soft);
  border-color: var(--azure);
}

.gelo-gruppo-tasto.is-ferma {
  color: var(--danger);
  border-color: var(--danger);
}

.gelo-gruppo-tasto.is-muta {
  color: var(--gray-text);
}

/* Il semaforo: numerini in cerchietti, uno per stato, solo quelli che contano. */
.gelo-gruppo-semaforo {
  display: inline-flex;
  gap: 0.2rem;
}

.gelo-gruppo-semaforo b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}

.gelo-gruppo-semaforo b.is-ok {
  background: #e5f3e9;
  color: var(--semaforo-verde);
}

.gelo-gruppo-semaforo b.is-alta {
  background: #fdf0e3;
  color: var(--semaforo-arancio);
}

.gelo-gruppo-semaforo b.is-ferma {
  background: #fdecea;
  color: var(--danger);
}

.gelo-gruppo-semaforo b.is-muta {
  background: var(--border-soft);
  color: var(--gray-text);
  font-weight: 600;
}

/* I due tasti del salvataggio nel modal (dal 2026-09-04): il principale REGISTRA E INVIA
   a Ergon, verde come tutto il blocco-azione; il secondario registra il solo appunto,
   bianco col bordo verde. */
.gelo-proposta-salva-azioni {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.gelo-proposta-salva-bottone.is-secondario {
  background: var(--surface);
  color: #1b6e3d;
  border: 1px solid #1b6e3d;
}

.gelo-proposta-salva-bottone.is-secondario:hover {
  background: #e5f3e9;
}