/* Storefy - foglio di stile.
   Sobrio e leggibile: si lavora qui dentro tutti i giorni. */

:root {
  --inchiostro: #131a24;
  --grigio: #5b6675;
  --tenue: #8b95a3;
  --bordo: #e2e6eb;
  --fondo: #f5f6f8;
  --carta: #ffffff;
  /* colore di marca Storefy: un indigo deciso, non il solito blu aziendale */
  --blu: #4636d6;
  --blu-scuro: #372aa8;
  --blu-chiaro: #eeecfb;
  --rosso: #b3261e;
  --verde: #1e7a4d;
  /* accenti per blocchi, tipi di appuntamento e portali */
  --ambra: #b7791f;
  --ambra-chiaro: #fbf1de;
  --teal: #0b6e99;
  --teal-chiaro: #e3f1f7;
  --slate: #495366;
  --corallo: #c2410c;
  --corallo-chiaro: #fbe9e0;
  --viola: #7c3aed;
  --viola-chiaro: #f1eafd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* sfondo astratto a strisce diagonali: grigio chiaro e azzurro chiaro,
     con qualche accento di blu intenso e viola */
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201600%20900%22%3E%3Cg%20transform=%22rotate(-22%201150%20450)%22%3E%3Crect%20x=%22620%22%20y=%22-400%22%20width=%2270%22%20height=%221700%22%20fill=%22%23dfe6f0%22%20opacity=%22.55%22/%3E%3Crect%20x=%22740%22%20y=%22-400%22%20width=%2226%22%20height=%221700%22%20fill=%22%23a9c9ef%22%20opacity=%22.55%22/%3E%3Crect%20x=%22800%22%20y=%22-400%22%20width=%22100%22%20height=%221700%22%20fill=%22%23dfe6f0%22%20opacity=%22.4%22/%3E%3Crect%20x=%22950%22%20y=%22-400%22%20width=%2240%22%20height=%221700%22%20fill=%22%233450d6%22%20opacity=%22.32%22/%3E%3Crect%20x=%221020%22%20y=%22-400%22%20width=%2218%22%20height=%221700%22%20fill=%22%238a5cf6%22%20opacity=%22.38%22/%3E%3Crect%20x=%221075%22%20y=%22-400%22%20width=%22130%22%20height=%221700%22%20fill=%22%23bfdcf5%22%20opacity=%22.42%22/%3E%3Crect%20x=%221245%22%20y=%22-400%22%20width=%2230%22%20height=%221700%22%20fill=%22%232f4fd6%22%20opacity=%22.32%22/%3E%3Crect%20x=%221305%22%20y=%22-400%22%20width=%2260%22%20height=%221700%22%20fill=%22%237c4dff%22%20opacity=%22.24%22/%3E%3Crect%20x=%221405%22%20y=%22-400%22%20width=%2220%22%20height=%221700%22%20fill=%22%23a9c9ef%22%20opacity=%22.5%22/%3E%3Crect%20x=%221455%22%20y=%22-400%22%20width=%2290%22%20height=%221700%22%20fill=%22%23dfe6f0%22%20opacity=%22.45%22/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #f6f8fb 0%, #eef4fb 45%, #e2ecf9 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  color: var(--inchiostro);
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.nascosto { display: none !important; }

.centro {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.attesa { color: var(--tenue); }

.scheda {
  width: 100%;
  max-width: 400px;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 2px rgba(19, 26, 36, .04), 0 8px 24px rgba(19, 26, 36, .06);
}

.marchio {
  display: flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blu);
  font-weight: 700;
  margin-bottom: 22px;
}
.marchio.piccolo { margin: 0; color: var(--inchiostro); }
.marchio-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--blu);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  margin-right: 7px;
}

h1 { font-size: 21px; margin: 0 0 8px; letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 0 0 10px; }

.spiega { color: var(--grigio); margin: 0 0 20px; font-size: 14px; }

label {
  display: block;
  font-size: 13px;
  color: var(--grigio);
  margin: 14px 0 5px;
}

input[type=text], input[type=password], input:not([type]) {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--inchiostro);
}

input:focus {
  outline: none;
  border-color: var(--blu);
  box-shadow: 0 0 0 3px var(--blu-chiaro);
}

.cifre {
  font-size: 26px;
  letter-spacing: .35em;
  text-align: center;
  padding: 12px;
  font-variant-numeric: tabular-nums;
}

.riga {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--grigio);
}
.riga input { width: auto; margin: 0; }

button {
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  border-radius: 8px;
}

.principale {
  width: 100%;
  margin-top: 20px;
  padding: 11px;
  background: var(--blu);
  color: #fff;
  border: 1px solid var(--blu);
  font-weight: 500;
}
.principale:hover { background: var(--blu-scuro); }
.principale:disabled { opacity: .55; cursor: default; }

.lieve {
  background: transparent;
  border: 1px solid var(--bordo);
  color: var(--grigio);
  padding: 6px 12px;
  font-size: 13px;
}
.lieve:hover { border-color: var(--tenue); color: var(--inchiostro); }

.minore { font-size: 13px; margin: 18px 0 0; text-align: center; }
a { color: var(--blu); text-decoration: none; }
a:hover { text-decoration: underline; }

.errore {
  margin: 18px 0 0;
  padding: 10px 12px;
  background: #fdf2f1;
  border: 1px solid #f2d4d1;
  border-radius: 8px;
  color: var(--rosso);
  font-size: 13.5px;
}

.piede { color: var(--tenue); font-size: 12px; margin-top: 20px; }

/* QR */
.qr {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: 10px;
}
.qr img, .qr canvas { display: block; }

.dettaglio { margin: 14px 0 0; font-size: 13px; color: var(--grigio); }
.dettaglio summary { cursor: pointer; }
.segreto {
  display: block;
  margin-top: 8px;
  padding: 9px 10px;
  background: var(--fondo);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
}

/* dentro */
.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px;
  background: var(--carta);
  border-bottom: 1px solid var(--bordo);
}
.chi { display: flex; align-items: center; gap: 14px; font-size: 14px; }

.contenuto { max-width: 720px; margin: 0 auto; padding: 34px 26px 60px; }

/* ---------- layout con sidebar ---------- */
.corpo-app {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  /* due colonne laterali: comunicazioni e note a sinistra, calendario a destra */
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 26px;
}
.colonna-principale { flex: 1; min-width: 0; }
.barra-laterale.sinistra { width: 260px; flex: 0 0 260px; }
.colonna-principale .contenuto { max-width: none; margin: 0; padding: 34px 0 60px; }

.barra-laterale {
  width: 280px;
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 20px;
  position: sticky;
  top: 20px;
}
.riquadro-laterale {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 14px 14px 10px;
}
.testa-laterale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mc-titolo { font-size: 13px; font-weight: 600; color: var(--inchiostro); text-transform: capitalize; }

.mc-settimana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; }
.mc-intestazione span {
  text-align: center; font-size: 9.5px; text-transform: uppercase;
  color: var(--tenue); display: block;
}
.mc-giorno {
  display: flex; align-items: center; justify-content: center;
  height: 26px; font-size: 12px; border-radius: 6px; cursor: pointer;
  color: var(--inchiostro);
}
.mc-giorno:hover { background: var(--fondo); }
.mc-giorno.mc-fuori { color: var(--tenue); opacity: .5; }
.mc-giorno.mc-oggi { background: var(--blu); color: #fff; font-weight: 600; }
.mc-giorno.mc-scelto:not(.mc-oggi) { background: var(--blu-chiaro); color: var(--blu); font-weight: 600; }

.oggi-lista { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.app-laterale {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 2px; border-bottom: 1px solid var(--bordo); cursor: pointer;
}
.app-laterale:last-child { border-bottom: 0; }
.app-laterale:hover { background: var(--fondo); }
.app-laterale.fatto .cosa-laterale strong { text-decoration: line-through; opacity: .6; }
.app-laterale.annullato { opacity: .5; }
.ora-laterale {
  font-size: 11.5px; color: var(--grigio); min-width: 36px;
  font-variant-numeric: tabular-nums; padding-top: 1px;
}
.cosa-laterale { flex: 1; font-size: 12.5px; min-width: 0; }
.cosa-laterale strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cosa-laterale .sotto { font-size: 11px; }
.app-laterale .targhetta { margin-top: 2px; font-size: 10px; padding: 1px 6px; white-space: nowrap; }
.attesa.piccolo { font-size: 12px; }

@media (max-width: 1100px) {
  .barra-laterale.sinistra { width: 220px; flex: 0 0 220px; }
}
@media (max-width: 880px) {
  .corpo-app { flex-direction: column; }
  .barra-laterale.sinistra { order: 2; }
  .barra-laterale { width: 100%; flex: none; position: static; padding-top: 0; }
}

.riquadro {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 20px 22px;
  margin-top: 18px;
  box-shadow: 0 1px 2px rgba(19, 26, 36, .03), 0 6px 18px -10px rgba(19, 26, 36, .10);
}

/* home: scelta del portale */
.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.portale {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 20px;
  text-align: left;
  background: var(--carta);
  border: 1.5px solid color-mix(in srgb, var(--acc, var(--bordo)) 35%, var(--bordo));
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.portale:hover {
  border-color: var(--acc, var(--blu));
  box-shadow:
    0 0 0 1px var(--acc, var(--blu)),
    0 0 26px 3px color-mix(in srgb, var(--acc, var(--blu)) 50%, transparent),
    0 12px 28px -10px rgba(19, 26, 36, .22);
  transform: translateY(-2px);
}
.badge-portale {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  margin-bottom: 4px;
}
.badge-portale svg { width: 18px; height: 18px; }
.titolo-portale { font-size: 16px; font-weight: 600; color: var(--inchiostro); }
.testo-portale { font-size: 13.5px; color: var(--grigio); line-height: 1.45; }

/* cruscotto: i numeri veri della giornata, sopra i riquadri */
.cruscotto { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.stat-cruscotto {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--acc, var(--blu));
  cursor: pointer;
  font-size: 13px;
  color: var(--grigio);
  transition: box-shadow .12s, transform .12s;
}
.stat-cruscotto:hover { box-shadow: 0 4px 14px rgba(19, 26, 36, .07); transform: translateY(-1px); }
.stat-cruscotto strong { font-size: 19px; color: var(--inchiostro); }
.targhetta {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tenue);
  background: var(--fondo);
  border: 1px solid var(--bordo);
  border-radius: 20px;
  padding: 2px 9px;
}
.portale.in-arrivo .titolo-portale { color: var(--grigio); }

.sinistra { display: flex; align-items: center; gap: 12px; }
.briciola { font-size: 14px; color: var(--grigio); }
.briciola::before { content: "/"; color: var(--bordo); margin-right: 12px; }
.nome { color: var(--inchiostro); }
.spiega.piccolo { font-size: 12.5px; margin: 14px 0 0; }

.permessi { margin: 0; padding-left: 18px; color: var(--grigio); font-size: 14px; }
.permessi li { margin: 3px 0; }

/* ---------- gestione ---------- */
.linguette {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--bordo);
  margin-top: 22px;
}
.linguetta {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--grigio);
  border-radius: 0;
}
.linguetta:hover { color: var(--inchiostro); }
.linguetta.scelta { color: var(--blu); border-bottom-color: var(--blu); font-weight: 500; }

.freccia { color: var(--tenue); text-align: right; width: 20px; font-size: 17px; }

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 0;
}
.conteggio { font-size: 13.5px; color: var(--grigio); }
.principale.stretto, .stretto { width: auto; margin-top: 0; padding: 9px 16px; }
.sinistra-testo { text-align: left; }
.tenue { color: var(--tenue); }

.avviso {
  margin-top: 20px;
  padding: 11px 14px;
  background: #fff8e6;
  border: 1px solid #f0e0b0;
  border-radius: 8px;
  font-size: 13.5px;
  color: #6b4e00;
}

.riquadro.senza-imbottitura { padding: 0; overflow: hidden; }
.riquadro.stretto-form { max-width: 460px; }

.tabella.elenco { font-size: 14px; }
.tabella.elenco th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tenue);
  font-weight: 500;
  padding: 12px 18px;
  border-bottom: 1px solid var(--bordo);
}
.tabella.elenco td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--bordo);
  color: var(--inchiostro);
  width: auto;
  white-space: normal;
}
.tabella.elenco td.quando { color: var(--tenue); white-space: nowrap; width: 150px; }
.tabella.elenco tr:last-child td { border-bottom: 0; }
.cliccabile { cursor: pointer; }
.cliccabile:hover { background: #fafbfc; }
.spenta td { color: var(--tenue); }
.sotto { font-size: 12.5px; color: var(--tenue); margin-top: 2px; }
.sotto-riga { font-size: 12.5px; color: var(--tenue); }

.targhetta.verde { color: var(--verde); background: #eef7f2; border-color: #cfe6db; }
.targhetta.rossa { color: var(--rosso); background: #fdf2f1; border-color: #f2d4d1; }

.pallino {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blu);
  vertical-align: middle;
  margin: 0 3px;
}

.testa-scheda {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.testa-scheda h2 { margin-bottom: 4px; }
.testa-scheda .spiega { margin-bottom: 4px; }
.modello-scelta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

select {
  padding: 8px 10px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  color: var(--inchiostro);
}

.sezione-permessi { margin-top: 18px; }
.sezione-permessi h3 {
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tenue);
  font-weight: 600;
  margin: 0 0 6px;
}
.interruttore {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--inchiostro);
  cursor: pointer;
}
.interruttore:hover { background: #fafbfc; }
.interruttore input { width: auto; margin: 0; }
.interruttore.diverso { background: var(--blu-chiaro); }

.azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.lieve.pericolo { color: var(--rosso); border-color: #f2d4d1; }
.lieve.pericolo:hover { background: #fdf2f1; border-color: var(--rosso); }

.cerca { flex: 1; max-width: 380px; }

#messaggino {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(12px);
  background: var(--inchiostro);
  color: #fff;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s, transform .16s;
  max-width: 90vw;
}
#messaggino.visibile { opacity: 1; transform: translateX(-50%) translateY(0); }
#messaggino.brutto { background: var(--rosso); }

/* ---------- gara: blocchi e tipologie ---------- */
.blocchi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.blocco {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--acc, var(--bordo));
  border-radius: 12px;
  overflow: hidden;
}
.blocco.spento { opacity: .6; }
.pallino-blocco {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--acc, var(--blu));
  margin-right: 7px;
  vertical-align: middle;
}
.testa-blocco {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--bordo);
}
.testa-blocco h3 { margin: 0; font-size: 15px; }
.strumenti-blocco { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.lieve.minuto { padding: 3px 9px; font-size: 12px; }
.riga.minuta { margin: 0; font-size: 12px; gap: 5px; }

.cassetto { padding: 12px; min-height: 74px; transition: background .12s; }
.cassetto.sopra { background: var(--blu-chiaro); box-shadow: inset 0 0 0 2px var(--blu); }
.vuoto { color: var(--tenue); font-size: 12.5px; margin: 6px 4px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 11px;
  margin-bottom: 7px;
  background: var(--fondo);
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font-size: 13.5px;
}
.chips .chip { margin-bottom: 0; }
.chip.trascinabile { cursor: grab; }
.chip.trascinabile:hover { border-color: var(--blu); background: #fff; }
.chip.in-volo { opacity: .4; }
.chip.spenta { opacity: .5; }
.chip-nome { flex: 1; cursor: pointer; }
.chip-nome:hover { color: var(--blu); text-decoration: underline; }
.chip-punti { color: var(--tenue); font-size: 12px; white-space: nowrap; }
.menu-chip {
  background: none;
  border: 0;
  color: var(--tenue);
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}
.menu-chip:hover { color: var(--inchiostro); }

.tendina {
  position: absolute;
  right: 4px;
  top: 100%;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(19, 26, 36, .12);
  padding: 5px;
  min-width: 170px;
}
.titolo-tendina {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tenue);
  padding: 5px 8px;
}
.tendina button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 7px 8px;
  font-size: 13.5px;
  color: var(--inchiostro);
}
.tendina button:hover:not(:disabled) { background: var(--fondo); }
.tendina button:disabled { color: var(--tenue); cursor: default; }

.separatore { border-top: 1px solid var(--bordo); margin: 20px 0 4px; }
.titoletto { font-size: 14px; margin: 14px 0 4px; }
.tariffe { display: flex; gap: 8px; margin-top: 10px; }
.tariffe > div { flex: 1; }
.tariffe label { margin: 0 0 4px; }
.gradino {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 7px 0;
  font-size: 13px;
  color: var(--grigio);
}
.gradino input { width: 80px; }

.tabella { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabella td { padding: 7px 0; border-bottom: 1px solid var(--bordo); color: var(--grigio); }
.tabella td:first-child { color: var(--tenue); white-space: nowrap; width: 150px; }
.tabella tr:last-child td { border-bottom: 0; }

.blocco.parcheggio { border-style: dashed; background: transparent; opacity: 1; }
.blocco.parcheggio .testa-blocco { border-bottom-style: dashed; }
.nota-parcheggio {
  margin: 10px 14px 0;
  font-size: 12.5px;
  color: var(--tenue);
  line-height: 1.45;
}

/* ---------- inserimenti ---------- */
.da-fare { color: var(--rosso); font-weight: 600; }
.componente {
  border: 1px solid var(--bordo);
  border-radius: 9px;
  padding: 11px 12px;
  margin-top: 9px;
  background: var(--fondo);
}
.riga-componente { display: flex; align-items: center; gap: 9px; }
.riga-componente strong { min-width: 58px; font-size: 13.5px; }
.riga-componente select { flex: 0 0 auto; }
.riga-componente input { flex: 1; }
.attributi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.attributo { font-size: 12px; color: var(--grigio); margin: 0; }
.attributo select { width: 100%; margin-top: 3px; font-size: 13px; }
#scelta-mese { min-width: 170px; }

/* ---------- importazioni da sistemare ---------- */
.riquadro.da-sistemare { border-left: 3px solid #d99000; }
.correzione {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.correzione label { margin: 0; font-size: 12px; }
.correzione input, .correzione select { width: 100%; margin-top: 3px; font-size: 13.5px; }
.riquadro.da-sistemare .azioni { margin-top: 14px; }

/* ---------- box importazioni ---------- */
.filtri { display: flex; gap: 9px; margin-top: 22px; flex-wrap: wrap; }
.filtri .cerca { flex: 1; min-width: 220px; max-width: none; }
.barra-scelte {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 11px 14px;
  background: var(--blu-chiaro);
  border: 1px solid #cbdaea;
  border-radius: 10px;
  font-size: 13.5px;
}
#quante-scelte { font-weight: 600; color: var(--blu); margin-right: 4px; }
.barra-scelte select { max-width: 190px; }
.guai { font-size: 12.5px; color: #8a6100; }

/* ---------- agenda ---------- */
.navmese { display: flex; align-items: center; gap: 8px; }
.titolo-mese { font-size: 15px; font-weight: 600; min-width: 150px; text-align: center; }
.calendario { padding: 10px 12px 12px; }
.settimana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.settimana.intestazione div {
  text-align: center; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tenue); padding: 4px 0 6px;
}
.giorno {
  min-height: 56px; border: 1px solid transparent; border-radius: 8px;
  padding: 5px 6px; cursor: pointer; background: var(--fondo);
}
.giorno:hover { border-color: var(--bordo); background: #fff; }
.giorno.fuori { opacity: .35; }
.giorno.oggi .numero { background: var(--blu); color: #fff; border-radius: 50%;
  width: 21px; height: 21px; display: inline-flex; align-items: center;
  justify-content: center; }
.giorno.scelto { border-color: var(--blu); background: var(--blu-chiaro); }
.giorno .numero { font-size: 12.5px; color: var(--inchiostro); }
.pallini { display: flex; gap: 3px; margin-top: 5px; flex-wrap: wrap; }
.pallini .p { width: 6px; height: 6px; border-radius: 50%; background: var(--blu); }
.pallini .p.richiamo { background: var(--ambra); }
.pallini .p.consegna { background: var(--verde); }
.pallini .p.scadenza { background: var(--rosso); }
.pallini .p.visita { background: var(--teal); }
.pallini .p.attivazione { background: var(--viola); }
.pallini .p.altro { background: var(--slate); }

/* un colore per tipo di appuntamento, coerente col pallino del calendario */
.targhetta.tipo-richiamo { color: var(--ambra); background: var(--ambra-chiaro); border-color: #f0dba0; }
.targhetta.tipo-appuntamento { color: var(--blu); background: var(--blu-chiaro); border-color: #d7d2f7; }
.targhetta.tipo-visita { color: var(--teal); background: var(--teal-chiaro); border-color: #bfe3ee; }
.targhetta.tipo-consegna { color: var(--verde); background: #e6f4ec; border-color: #bfe0cc; }
.targhetta.tipo-attivazione { color: var(--viola); background: var(--viola-chiaro); border-color: #d9c8f2; }
.targhetta.tipo-scadenza { color: var(--rosso); background: #fdf2f1; border-color: #f2d4d1; }
.targhetta.tipo-altro { color: var(--grigio); background: var(--fondo); border-color: var(--bordo); }
.pallini .piu { font-size: 10px; color: var(--tenue); line-height: 1; }

.appuntamenti { display: flex; flex-direction: column; }
.appuntamento {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid var(--bordo); cursor: pointer;
}
.appuntamento:last-child { border-bottom: 0; }
.appuntamento:hover { background: #fafbfc; }
.appuntamento .ora {
  min-width: 92px; font-size: 13px; color: var(--grigio);
  font-variant-numeric: tabular-nums;
}
.appuntamento .cosa { flex: 1; font-size: 14px; }
.appuntamento .etichette { display: flex; gap: 5px; flex-wrap: wrap; }
.appuntamento .targhetta { margin-top: 0; }
.appuntamento.fatto .cosa, .appuntamento.annullato .cosa { opacity: .55; }
.appuntamento.fatto strong { text-decoration: line-through; }

.due { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.due label { margin-top: 14px; }
tr.da-richiamare td { background: #fff8e6; }

/* ---------- note sui clienti ---------- */
.azioni-testa { display: flex; align-items: center; gap: 8px; }
.area-note {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  color: var(--inchiostro);
}
.area-note:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-chiaro); }
.nota { padding: 10px 4px; border-bottom: 1px solid var(--bordo); }
.nota:last-child { border-bottom: 0; }
.nota-testa { display: flex; justify-content: space-between; align-items: center; }
.nota p { margin: 5px 0 0; font-size: 14px; white-space: pre-wrap; }

/* ---------- controlli e pagamenti ---------- */
.carica-file { cursor: pointer; }
.sommario-controlli {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.stat-esito {
  display: flex; align-items: baseline; gap: 7px;
  padding: 8px 13px; border-radius: 9px;
  background: var(--fondo); border: 1px solid var(--bordo);
  cursor: pointer; font-size: 12.5px; color: var(--grigio);
}
.stat-esito strong { font-size: 16px; color: var(--inchiostro); }
.stat-esito.rossa { border-color: #f2d4d1; }
.stat-esito.rossa strong { color: var(--rosso); }
.stat-esito.verde { border-color: #cfe6db; }
.stat-esito.verde strong { color: var(--verde); }
.stat-esito.scelto { background: var(--blu-chiaro); border-color: #cbdaea; }
.targhetta.rossa { color: var(--rosso); background: #fdf2f1; border-color: #f2d4d1; }
.targhetta.verde { color: var(--verde); background: #eef7f2; border-color: #cfe6db; }

/* ---------- popup generico ---------- */
.velo-popup {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(19, 26, 36, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 20px 20px;
  overflow-y: auto;
}
.popup {
  width: 100%; max-width: 520px;
  background: var(--carta);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(19, 26, 36, .25);
  max-height: 80vh;
  display: flex; flex-direction: column;
}
.popup-testa {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--bordo); flex-shrink: 0;
}
.popup-testa h2 { margin: 0; }
.popup-chiudi {
  background: none; border: 0; font-size: 22px; line-height: 1;
  color: var(--tenue); padding: 2px 6px; cursor: pointer;
}
.popup-chiudi:hover { color: var(--inchiostro); }
.popup-corpo { padding: 16px 18px 20px; overflow-y: auto; }

/* targhetta "cliente gia' visto" nel modulo contratto */
.cliente-noto {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 8px 0 0; padding: 6px 12px;
  background: var(--ambra-chiaro); color: var(--ambra);
  border: 1px solid #f0dba0; border-radius: 20px;
  font-size: 12.5px; cursor: pointer;
}
.cliente-noto:hover { border-color: var(--ambra); }

/* ---------- scheda cliente (popup) ---------- */
.storico-contratti { display: flex; flex-direction: column; }
.riga-storico {
  display: grid; grid-template-columns: 70px 1fr auto;
  align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--bordo);
  font-size: 13px;
}
.riga-storico:last-child { border-bottom: 0; }
.quando-storico { color: var(--tenue); font-size: 12px; }
.riga-storico .sotto-riga { grid-column: 2; font-size: 11.5px; margin-top: -2px; }

/* ---- Store Time ---- */
.orologio-box { text-align: center; padding: 34px 20px; }
.orologio-stato { font-size: 16px; margin: 0 0 20px; color: var(--grigio); }
.orologio-stato strong { color: var(--inchiostro); }
.orologio-bottoni { display: flex; gap: 14px; justify-content: center; }
.principale.grande, .lieve.grande {
  width: auto;
  padding: 15px 38px;
  font-size: 16px;
  border-radius: 10px;
}
.riga-affiancata { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.riga-affiancata input { flex: 1; }
.lista-assenze { display: flex; flex-direction: column; gap: 8px; }
.riga-assenza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--carta);
}

/* ---- calendario presenze ---- */
.cal-testa {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
}
.cal-testa h2 { margin: 0 0 4px; }
.cal-testa-destra { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.cal-mese-nav { justify-content: flex-end; margin-top: 0; }
.saldo-banca { color: var(--verde); }
.mese-grid-scroll { overflow-x: auto; }
.mese-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr) 76px;
  min-width: 760px;
}
.mese-intestazione {
  padding: 9px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--grigio);
  text-align: center;
  background: var(--fondo);
  border-bottom: 1px solid var(--bordo);
}
.mese-cella {
  min-height: 62px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
  cursor: pointer;
}
.mese-cella:hover { background: var(--blu-chiaro); }
.mese-cella.vuota { cursor: default; background: var(--fondo); }
.mese-cella.vuota:hover { background: var(--fondo); }
.mese-num { font-size: 11.5px; color: var(--tenue); }
.mese-valore { font-size: 12px; font-weight: 600; color: var(--inchiostro); }
.mese-cella.sab { border-left: 3px solid var(--ambra); }
.mese-cella.dom { border-left: 3px solid var(--corallo); }
.mese-cella.somma-sett {
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--blu);
  background: var(--fondo);
  cursor: default;
}
.mese-cella.somma-sett:hover { background: var(--fondo); }

/* ---- orario settimanale ---- */
.tabella-orario { margin-top: 16px; border: 1px solid var(--bordo); border-radius: 8px; overflow: hidden; }
.riga-orario {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr) 0.9fr;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bordo);
}
.riga-orario:last-child { border-bottom: 0; }
.riga-orario.intestazione {
  background: var(--fondo);
  font-size: 12px;
  font-weight: 600;
  color: var(--grigio);
}
.riga-orario input { margin: 0; padding: 7px 9px; font-size: 13px; }
.ore-giorno { font-size: 12.5px; color: var(--grigio); text-align: right; }
.scost-meno { color: var(--rosso); }
.scost-piu { color: var(--verde); }

/* --- registro: filtri e colpo d'occhio ------------------------------------
   La targhetta dell'ambito e la riga piu' marcata per le cose critiche
   servono a una cosa sola: far vedere il permesso tolto in mezzo a
   duecento timbrature senza doverlo cercare. */
.barra-registro { flex-wrap: wrap; gap: 8px; }
.barra-registro select,
.barra-registro input[type="date"] {
  height: 34px; font-size: 13px; padding: 0 8px;
  border: 1px solid var(--bordo); border-radius: 8px;
  background: var(--carta); color: var(--inchiostro);
}
.barra-registro .cerca { min-width: 180px; }

.pastiglie { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.pastiglia {
  border: 1px solid var(--bordo); background: var(--carta); color: var(--grigio);
  border-radius: 20px; padding: 4px 12px; font-size: 12.5px; cursor: pointer;
}
.pastiglia:hover { border-color: var(--blu); color: var(--blu); }
.pastiglia b { color: var(--inchiostro); margin-left: 2px; }
.pastiglia.scelta {
  background: var(--blu-chiaro); border-color: var(--blu); color: var(--blu-scuro);
}
.pastiglia.scelta b { color: var(--blu-scuro); }

/* la targhetta nel registro sta in riga, non sotto come nel cruscotto */
.elenco .targhetta {
  display: inline-block; margin: 0 6px 0 0; vertical-align: 1px;
  font-size: 10px; letter-spacing: .05em;
}
.targhetta.t-accessi      { color: var(--teal);    background: var(--teal-chiaro);    border-color: #cbe4ef; }
.targhetta.t-permessi     { color: var(--rosso);   background: #fdf2f1;               border-color: #f2d4d1; }
.targhetta.t-orari        { color: var(--blu);     background: var(--blu-chiaro);     border-color: #d8d3f6; }
.targhetta.t-sedi         { color: var(--viola);   background: var(--viola-chiaro);   border-color: #e0d3fb; }
.targhetta.t-anagrafiche  { color: var(--slate);   background: var(--fondo);          border-color: var(--bordo); }
.targhetta.t-contratti    { color: var(--verde);   background: #eef7f2;               border-color: #cfe6db; }
.targhetta.t-controlli    { color: var(--ambra);   background: var(--ambra-chiaro);   border-color: #eeddb8; }
.targhetta.t-clienti      { color: var(--corallo); background: var(--corallo-chiaro); border-color: #f3d6c6; }
.targhetta.t-impostazioni { color: var(--grigio);  background: var(--fondo);          border-color: var(--bordo); }
.targhetta.t-sistema      { color: var(--tenue);   background: var(--fondo);          border-color: var(--bordo); }

.elenco tr.riga-critico td { box-shadow: inset 3px 0 0 var(--rosso); }
.elenco tr.riga-ordinario td { color: var(--grigio); }

/* --- ticket ---------------------------------------------------------------
   Il rosso qui non e' decorativo: e' l'unico modo perche' chi ha il documento
   in mano si accorga dell'errore mentre e' ancora davanti al cliente. */
.errore-dati, .riquadro-errore { color: var(--rosso); }
.riquadro-errore {
  background: #fdf2f1; border: 1px solid #f2d4d1; border-radius: 12px;
  padding: 12px 14px; margin: 12px 0; font-size: 14px;
}
.riquadro-errore ul { margin: 6px 0 0; padding-left: 18px; }
.riquadro-errore li { margin: 3px 0; }

.testa-ticket { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.stato { font-size: 12px; padding: 3px 10px; border-radius: 20px; white-space: nowrap;
         border: 1px solid var(--bordo); background: var(--fondo); color: var(--grigio); }
.stato.s-aperto    { color: var(--corallo); background: var(--corallo-chiaro); border-color: #f3d6c6; }
.stato.s-in_carico { color: var(--blu);     background: var(--blu-chiaro);     border-color: #d8d3f6; }
.stato.s-sospeso   { color: var(--ambra);   background: var(--ambra-chiaro);   border-color: #eeddb8; }
.stato.s-risolto   { color: var(--verde);   background: #eef7f2;               border-color: #cfe6db; }
.stato.s-respinto  { color: var(--rosso);   background: #fdf2f1;               border-color: #f2d4d1; }
.stato-ticket { text-align: right; width: 1%; }

.targhetta.t-backoffice      { color: var(--blu);     background: var(--blu-chiaro);     border-color: #d8d3f6; }
.targhetta.t-amministrazione { color: var(--ambra);   background: var(--ambra-chiaro);   border-color: #eeddb8; }
.targhetta.t-tecnico         { color: var(--teal);    background: var(--teal-chiaro);    border-color: #cbe4ef; }
.targhetta.t-direzione       { color: var(--slate);   background: var(--fondo);          border-color: var(--bordo); }
.targhetta.t-ticket          { color: var(--teal);    background: var(--teal-chiaro);    border-color: #cbe4ef; }

.scelte-modulo { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.scelta-modulo {
  text-align: left; border: 1px solid var(--bordo); background: var(--carta);
  border-radius: 12px; padding: 10px 14px; cursor: pointer; font-size: 14px;
  color: var(--inchiostro); line-height: 1.3;
}
.scelta-modulo:hover { border-color: var(--blu); }
.scelta-modulo.scelta { border-color: var(--blu); background: var(--blu-chiaro); }
.scelta-modulo .sotto { display: block; font-size: 12px; color: var(--tenue); }

.modulo-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--grigio); }
.campo.campo-largo { grid-column: 1 / -1; }
.campo input, .campo textarea {
  border: 1px solid var(--bordo); border-radius: 9px; padding: 9px 10px;
  font: inherit; font-size: 14px; color: var(--inchiostro); background: var(--carta);
}
.campo .valore { font-size: 14px; color: var(--inchiostro); padding: 9px 0; }
.campo .valore.oscurato { color: var(--tenue); letter-spacing: .12em; }
.obbl { color: var(--rosso); }
.riservato { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
             color: var(--tenue); border: 1px solid var(--bordo); border-radius: 20px;
             padding: 0 6px; margin-left: 4px; }

.zona-trascina {
  border: 2px dashed var(--bordo); border-radius: 14px; padding: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--grigio); text-align: center; transition: border-color .12s, background .12s;
}
.zona-trascina.sopra { border-color: var(--blu); background: var(--blu-chiaro); }
.zona-trascina.in-corso { opacity: .6; pointer-events: none; }
.come-bottone { cursor: pointer; }
.riquadro-qr { display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
               margin-top: 14px; padding: 14px; border: 1px solid var(--bordo);
               border-radius: 14px; background: var(--fondo); }

.allegati { list-style: none; margin: 14px 0 0; padding: 0; }
.allegati li { display: flex; align-items: center; gap: 10px; padding: 9px 0;
               border-top: 1px solid var(--bordo); font-size: 14px; }
.allegati li a { flex: 1; }
.allegati li .sotto { font-size: 12px; color: var(--tenue); }

.messaggi { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.messaggio { background: var(--fondo); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.messaggio .sotto { font-size: 12px; color: var(--tenue); margin-bottom: 3px; }
.scrivi { display: flex; gap: 8px; align-items: flex-start; }
.scrivi textarea { flex: 1; border: 1px solid var(--bordo); border-radius: 9px;
                   padding: 9px 10px; font: inherit; font-size: 14px; }
.nota-ticket { font-size: 14px; color: var(--grigio); margin: 14px 0 0; }
.azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.spunta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grigio); }

/* --- ticket: schede, priorita', riquadro laterale ------------------------- */
/* Le linguette usano la classe di casa (.linguette/.linguetta, piu' su):
   qui c'era un duplicato chiamato .scheda che finiva addosso al riquadro
   della schermata di accesso, che quella classe la usava da prima. */

.prio { font-size: 11px; padding: 2px 8px; border-radius: 20px; white-space: nowrap;
        border: 1px solid var(--bordo); color: var(--grigio); background: var(--fondo); }
.prio.p-alta       { color: var(--ambra);   background: var(--ambra-chiaro);   border-color: #eeddb8; }
.prio.p-urgente    { color: var(--corallo); background: var(--corallo-chiaro); border-color: #f3d6c6; }
.prio.p-escalation { color: #fff; background: var(--rosso); border-color: var(--rosso); font-weight: 600; }

.stato.s-nuovo               { color: var(--corallo); background: var(--corallo-chiaro); border-color: #f3d6c6; }
.stato.s-in_lavorazione      { color: var(--blu);     background: var(--blu-chiaro);     border-color: #d8d3f6; }
.stato.s-attesa_informazioni,
.stato.s-attesa_lavorazione,
.stato.s-sospeso             { color: var(--ambra);   background: var(--ambra-chiaro);   border-color: #eeddb8; }
.stato.s-inoltrato           { color: var(--viola);   background: var(--viola-chiaro);   border-color: #e0d3fb; }
.stato.s-concluso_ok         { color: var(--verde);   background: #eef7f2;               border-color: #cfe6db; }
.stato.s-concluso_ko         { color: var(--rosso);   background: #fdf2f1;               border-color: #f2d4d1; }

.ticket-conti { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ticket-conti th { font-weight: 500; color: var(--tenue); font-size: 11px;
                   text-align: right; padding: 2px 4px; }
.ticket-conti th:first-child { text-align: left; }
.ticket-conti td { padding: 5px 4px; text-align: right; color: var(--grigio);
                   border-top: 1px solid var(--bordo); }
.ticket-conti td:first-child { text-align: left; color: var(--inchiostro); }
.ticket-conti td.acceso { color: var(--corallo); font-weight: 700; }
.ticket-conti tr[data-settore] { cursor: pointer; }
.ticket-conti tr[data-settore]:hover td { background: var(--fondo); }

/* --- barra laterale: comunicazioni e blocco note -------------------------- */
.badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 10px;
         background: var(--corallo); color: #fff; font-size: 11px; font-weight: 700;
         text-align: center; vertical-align: 1px; }
.com { border-top: 1px solid var(--bordo); padding: 8px 0; font-size: 13px; }
.com-testa { cursor: pointer; }
.com-testa b { display: block; color: var(--inchiostro); }
.com.non-letta .com-testa b::before { content: "●"; color: var(--corallo); margin-right: 5px; font-size: 9px; vertical-align: 2px; }
.com-corpo { margin-top: 6px; color: var(--grigio); line-height: 1.45; }
.com-sezione { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
               color: var(--tenue); margin: 10px 0 2px; }
.com-nuova, .bn-cliente { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.com-nuova input, .com-nuova textarea, .com-nuova select,
.bn-cliente input, #note-laterale textarea, #note-laterale select {
  width: 100%; box-sizing: border-box; border: 1px solid var(--bordo); border-radius: 8px;
  padding: 7px 9px; font: inherit; font-size: 13px; color: var(--inchiostro);
  background: var(--carta);
}
#note-laterale textarea, #note-laterale select { margin-top: 6px; }
.com-inviate { margin-top: 10px; font-size: 13px; }
.com-inviate summary { cursor: pointer; color: var(--grigio); }
.bn-tipi { display: flex; flex-wrap: wrap; gap: 4px; }
.bn-tipi .pastiglia { padding: 2px 9px; font-size: 12px; }
.bn-elenco { margin-top: 10px; }
.bn-nota { border-top: 1px solid var(--bordo); padding: 7px 0; font-size: 13px; color: var(--inchiostro); }
.bn-nota .sotto { font-size: 11.5px; color: var(--tenue); margin-top: 2px; }
.targhetta.t-nota-personale { color: var(--viola); background: var(--viola-chiaro); border-color: #e0d3fb; }
.targhetta.t-nota-sede      { color: var(--teal);  background: var(--teal-chiaro);  border-color: #cbe4ef; }
.targhetta.t-nota-cliente   { color: var(--verde); background: #eef7f2;             border-color: #cfe6db; }
#note-laterale .targhetta, #com-laterale .targhetta { display: inline-block; margin: 0 4px 0 0; font-size: 10px; vertical-align: 1px; }
.riquadro-laterale .azioni { margin-top: 6px; gap: 6px; }

/* i bottoni della barra laterale non sono a tutta larghezza come nel portale */
.riquadro-laterale .azioni button, .riquadro-laterale .azioni .come-bottone { width: auto; }

/* le colonne laterali: i riquadri prendono tutta la larghezza anche se hanno poco dentro */
.barra-laterale { align-items: stretch; }
.barra-laterale > .riquadro-laterale { width: 100%; box-sizing: border-box; }

/* --- Confronto: materiale commerciale ------------------------------------
   Le schede sono grandi apposta: chi cerca un volantino ha il cliente
   davanti e deve trovarlo al primo sguardo, non leggere una tabella. */
.griglia-materiale {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px; margin-top: 14px;
}
.scheda-materiale {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.scheda-materiale h3 { margin: 2px 0; font-size: 16px; line-height: 1.3; }
.scheda-materiale p { margin: 4px 0 0; font-size: 13.5px; color: var(--grigio); }
.scheda-materiale .sotto { font-size: 12px; color: var(--tenue); }
.scheda-materiale .azioni { margin-top: auto; padding-top: 10px; align-items: center; }
/* una voce scaduta la vede solo chi la gestisce: va scolorita, non nascosta,
   perche' il punto e' accorgersene e rimetterci mano */
.scheda-materiale.s-scaduta { opacity: .62; border-style: dashed; }
.scheda-materiale.s-futura { border-color: #d8d3f6; }

.testa-materiale { display: flex; justify-content: space-between;
                   align-items: center; gap: 8px; }
.stato.v-in_corso { color: var(--verde);  background: #eef7f2;             border-color: #cfe6db; }
.stato.v-futura   { color: var(--blu);    background: var(--blu-chiaro);   border-color: #d8d3f6; }
.stato.v-scaduta  { color: var(--rosso);  background: #fdf2f1;             border-color: #f2d4d1; }

.targhetta.f-sky    { color: var(--blu);   background: var(--blu-chiaro);   border-color: #d8d3f6; }
.targhetta.f-optima { color: var(--verde); background: #eef7f2;             border-color: #cfe6db; }
.targhetta.f-altro  { color: var(--grigio); background: var(--fondo);       border-color: var(--bordo); }
.targhetta.t-materiale { color: var(--ambra); background: var(--ambra-chiaro); border-color: #eeddb8; }

.file-materiale { list-style: none; margin: 10px 0 0; padding: 0; }
.file-materiale li { display: flex; align-items: center; gap: 8px;
                     padding: 7px 0; border-top: 1px solid var(--bordo);
                     font-size: 13.5px; }
.file-materiale li a { flex: 1; word-break: break-word; }

/* --- finestra unica di caricamento --- */
.rapporto { border-left: 3px solid var(--verde); background: var(--fondo); border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 13.5px; }
.rapporto.ko { border-left-color: var(--rosso); }
.rapporto-testa { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.rapporto-esito { margin-top: 4px; color: var(--inchiostro); }
.targhetta.t-carica { color: var(--ambra); background: var(--ambra-chiaro); border-color: #eeddb8; display: inline-block; font-size: 10px; margin: 0; }
.campo-data { margin-top: 8px; font-size: 12px; }
.campo-data input { width: auto; }
.testa-sezione { padding: 18px 18px 0; }
.stato.s-torna { color: var(--verde); background: #eef7f2; border-color: #cfe6db; }
.stato.s-non_torna { color: #fff; background: var(--rosso); border-color: var(--rosso); font-weight: 600; }
.stato.s-manca_estratto, .stato.s-manca_fattura { color: var(--ambra); background: var(--ambra-chiaro); border-color: #eeddb8; }

/* I bottoni dentro la barra dei filtri sono comandi, non azioni principali
   della pagina: non devono prendersi tutta la riga come fa un pulsante di
   conferma dentro un riquadro. */
.barra button { width: auto; flex: 0 0 auto; }
.barra .spunta { flex: 0 0 auto; }

/* --- listini: un blocco per servizio --- */
.blocco-servizio { border: 1px solid var(--bordo); border-radius: 12px;
                   padding: 12px 14px; margin-top: 12px; background: var(--carta); }
.blocco-servizio > .spunta { font-size: 14px; margin-bottom: 4px; }
.blocco-servizio .modulo-campi { margin-top: 10px; }
.unita { font-style: normal; color: var(--tenue); font-size: 11px; }
tr.riga-azienda { cursor: pointer; }
tr.riga-azienda:hover td { background: var(--fondo); }
tr.riga-azienda.scelta td { background: var(--blu-chiaro); }
.tabella .numero { text-align: right; font-variant-numeric: tabular-nums; }

/* Anche nelle azioni i bottoni sono comandi affiancati, non un pulsante di
   conferma a tutta pagina: senza questo il primo si prende tutta la riga. */
.azioni button, .azioni .come-bottone { width: auto; flex: 0 0 auto; }

/* --- il confronto con la bolletta del cliente ---------------------------
   Tre cose devono saltare all'occhio senza doverle leggere: se un numero e'
   un risparmio o un aggravio, quale offerta ha vinto, e quali caselle sono
   ancora da riempire. */

.verde { color: var(--verde); font-weight: 600; }
.rosso { color: var(--rosso); font-weight: 600; }

.totale-confronto { margin-top: 16px; padding: 14px 16px; border-radius: 10px;
                    border: 1px solid var(--bordo); font-size: 16px; }
.totale-confronto.buono { color: var(--verde); background: #eef7f2;
                          border-color: #cfe6db; }
.totale-confronto.cattivo { color: var(--rosso); background: #fdf2f1;
                            border-color: #f2d4d1; }
.totale-confronto .sotto { color: inherit; opacity: .75; font-size: 13px;
                           margin-top: 4px; }

/* l'offerta piu' conveniente: si vede, non si cerca */
.elenco tr.vincitore td { background: #eef7f2;
                          box-shadow: inset 3px 0 0 var(--verde); }

/* le offerte fra cui scegliere, raggruppate per azienda */
.gruppo-scelte { display: grid; gap: 12px;
                 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gruppo-scelte fieldset { border: 1px solid var(--bordo); border-radius: 10px;
                          padding: 10px 12px 12px; margin: 0; }
.gruppo-scelte legend { font-size: 12px; text-transform: uppercase;
                        letter-spacing: .04em; color: var(--tenue);
                        padding: 0 4px; }
.riga-scelta { display: flex; align-items: baseline; gap: 8px; margin: 6px 0;
               cursor: pointer; }
.riga-scelta input { width: auto; margin: 0; flex: 0 0 auto; }
.riga-scelta .sotto { color: var(--tenue); font-size: 12px; margin-left: 6px; }

.tre { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.tre label { margin-top: 14px; }

/* i numeri della bolletta, uno per riga con scritto da dove viene */
.servizio-manuale { border: 1px solid var(--bordo); border-radius: 10px;
                    padding: 8px 14px 14px; margin: 12px 0 0; }
.servizio-manuale legend { font-size: 13px; font-weight: 600; padding: 0 6px; }
.campo-manuale { display: block; margin-top: 12px; }
.campo-manuale .sotto { display: block; color: var(--tenue); font-size: 11.5px;
                        margin-top: 3px; }
/* una casella vuota che serve al conto non deve passare inosservata: e' il
   motivo per cui il preventivo resterebbe a meta' */
.campo-manuale.da-scrivere input { border-color: var(--ambra);
                                   background: var(--ambra-chiaro); }

@media (max-width: 620px) {
  .tre { grid-template-columns: 1fr; }
}

/* --- un riquadro per azienda, dentro un riquadro per offerta ------------
   Il marchio si riconosce prima del nome: chi apre questa pagina di corsa
   cerca il colibri', non la parola "Optima". Sta sotto al nome e non al
   posto suo, perche' un logo da solo non si puo' cercare col Ctrl+F. */

.griglia-aziende {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px; margin-top: 16px;
  /* stessa altezza sulla riga: riquadri di altezze diverse fanno una fila
     sbrecciata, e i pulsanti in fondo finiscono ognuno a una quota sua */
  align-items: stretch;
}
.scheda-azienda {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 16px;
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.scheda-azienda.spenta { opacity: .6; border-style: dashed; }
.scheda-azienda > .azioni { margin-top: auto; padding-top: 4px;
                            align-items: center; }

.testa-azienda { display: flex; flex-direction: column; gap: 8px;
                 align-items: flex-start; }
.testa-azienda h3 { margin: 0; font-size: 18px; line-height: 1.2; }
.testa-azienda .sotto { margin: 0; font-size: 12.5px; color: var(--tenue); }
.logo-azienda { max-height: 34px; max-width: 190px; width: auto;
                object-fit: contain; }
.targhette { display: flex; flex-wrap: wrap; gap: 6px; }

.offerte-azienda { display: flex; flex-direction: column; gap: 10px; }
.scheda-offerta {
  border: 1px solid var(--bordo); border-radius: 12px; padding: 12px 14px;
  background: var(--fondo); display: flex; flex-direction: column; gap: 4px;
}
.scheda-offerta.s-scaduta { opacity: .62; border-style: dashed; }
.scheda-offerta.s-futura { border-color: #d8d3f6; }
.scheda-offerta .sotto { font-size: 12px; color: var(--tenue); }
/* I comandi vanno in fondo al riquadro, non subito sotto il testo: cosi'
   stanno tutti sulla stessa riga anche quando un'offerta ha due servizi e
   quella accanto ne ha quattro. */
.scheda-offerta .azioni { margin-top: auto; padding-top: 10px;
                          align-items: center; }
/* Il titolo si prende due righe anche quando ne occupa una: senza, la prima
   voce del riquadro accanto parte cinque pixel piu' su e la fila sembra
   storta. */
.scheda-offerta .testa-materiale { align-items: flex-start; }
/* interlinea fissata insieme al minimo: se le due non combaciano, un titolo
   su due righe sfora lo spazio riservato e la voce sotto parte piu' in basso
   di quella del riquadro accanto */
.scheda-offerta .testa-materiale strong { line-height: 1.3; min-height: 2.6em;
                                          display: flex; align-items: center; }

/* i numeri dell'offerta: sopra la piega, senza dover aprire niente */
.voci-offerta { margin: 6px 0 0; display: grid;
                grid-template-columns: auto 1fr; gap: 3px 10px; }
.voci-offerta dt { font-size: 11px; text-transform: uppercase;
                   letter-spacing: .04em; color: var(--tenue);
                   padding-top: 1px; }
.voci-offerta dd { margin: 0; font-size: 13px; color: var(--inchiostro);
                   font-variant-numeric: tabular-nums; }
.nota-offerta { margin: 6px 0 0; font-size: 12.5px; color: var(--grigio); }

@media (max-width: 560px) {
  .voci-offerta { grid-template-columns: 1fr; gap: 1px; }
  .voci-offerta dd { margin-bottom: 5px; }
}

/* il marchio dentro l'intestazione del gruppo di offerte, in piccolo: il nome
   resta, perche' un logo da solo non si legge a voce al telefono */
.gruppo-scelte legend { display: flex; align-items: center; gap: 6px; }
.logo-scelta { height: 16px; width: auto; object-fit: contain; }
.riga-scelta > span { display: flex; flex-direction: column; }
.riga-scelta > span .sotto { margin-left: 0; }

/* Le condizioni per esteso, chiuse finche' non servono: sono quattro
   paragrafi per offerta e con nove offerte seppelliscono i numeri. */
.condizioni-offerta { margin-top: 6px; }
.condizioni-offerta > summary { cursor: pointer; font-size: 12px;
                                color: var(--blu); list-style: none;
                                width: fit-content; }
.condizioni-offerta > summary::-webkit-details-marker { display: none; }
.condizioni-offerta > summary::before { content: "\25B8 "; }
.condizioni-offerta[open] > summary::before { content: "\25BE "; }
.condizioni-offerta > summary:hover { text-decoration: underline; }

/* --- l'azienda si apre come un riquadro, non come una riga di tabella --- */
button.scheda-azienda.apribile {
  width: 100%; text-align: left; font: inherit; color: inherit;
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
button.scheda-azienda.apribile:hover {
  border-color: var(--blu); box-shadow: 0 2px 10px rgba(70, 54, 214, .10);
}
button.scheda-azienda.apribile .testa-azienda { width: 100%; }
button.scheda-azienda.apribile h3 { margin: 0; font-size: 18px; }
button.scheda-azienda.apribile .sotto { color: var(--tenue); font-size: 12.5px; }

/* --- i filtri per servizio ---------------------------------------------
   Si sommano invece di escludersi: spuntare Luce e Fibra vuol dire "tutte e
   due", ed e' il motivo per cui sono caselle e non un menu a tendina. */
.filtri-servizio { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip-servizio {
  width: auto; flex: 0 0 auto; padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--bordo); background: var(--carta);
  color: var(--grigio); font-size: 13px; cursor: pointer;
}
.chip-servizio:hover { border-color: var(--blu); color: var(--blu); }
.chip-servizio.acceso { background: var(--blu); border-color: var(--blu);
                        color: #fff; }
.chip-servizio.pulisci { color: var(--tenue); border-style: dashed; }

.griglia-offerte { display: grid; gap: 12px; margin-top: 12px;
                   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                   align-items: stretch; }
.griglia-offerte .scheda-offerta { background: var(--carta); }

/* --- i comandi di una riga sono tutti uguali ----------------------------
   Un <label> usato come pulsante (serve a nascondere l'input dei file) non
   e' un <button>: non prende gli angoli arrotondati della regola dei
   pulsanti, e l'altezza gliela decide il testo invece dell'imbottitura.
   Accanto a due <button> stirati dal flex diventavano tre scatole diverse -
   53px, 34px, 53px, una squadrata e due arrotondate - per comandi che fanno
   la stessa cosa. Qui si scrive una volta com'e' fatto un comando, e vale
   per tutti e due i tag. */
.azioni button, .azioni .come-bottone {
  display: inline-flex; align-items: center; justify-content: center;
  /* niente stiramento: l'altezza la decide il testo, non il vicino piu' alto */
  align-self: center;
  font-family: inherit; line-height: 1.35; border-radius: 8px;
  text-align: center;
  /* un <label> qui non e' l'etichetta di un campo e non ne vuole i margini:
     erano loro a spostarlo di cinque pixel piu' in basso degli altri due */
  margin: 0;
}

/* --- la scheda dell'offerta ---------------------------------------------
   Fatta come il listino che manda l'azienda: il numero grande, sotto la riga
   che dice cos'e'. Chi ha il cliente al telefono cerca una cifra, non un
   paragrafo, e la trova nello stesso posto dove la cerca sul volantino. */

.riga-condizioni { margin-top: 6px; }
.vedi-dettagli { color: var(--blu); border-color: #d8d3f6; }
.vedi-dettagli:hover { background: var(--blu-chiaro); border-color: var(--blu);
                       color: var(--blu); }

body.con-modale { overflow: hidden; }
.velo-modale {
  position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(19, 26, 36, .45);
}
.modale {
  background: var(--carta); border-radius: 16px; width: min(720px, 100%);
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 50px rgba(19, 26, 36, .22);
}
.testa-modale { display: flex; justify-content: space-between; gap: 14px;
                align-items: flex-start; padding: 18px 20px 14px;
                border-bottom: 1px solid var(--bordo); }
.testa-modale h3 { margin: 6px 0 2px; font-size: 19px; line-height: 1.25; }
.testa-modale .sotto { margin: 0; font-size: 12.5px; color: var(--tenue); }
.logo-modale { max-height: 26px; max-width: 150px; object-fit: contain;
               display: block; }
.testa-modale .chiudi-modale { font-size: 18px; line-height: 1;
                               padding: 4px 10px; }

.corpo-modale { padding: 4px 20px 18px; overflow-y: auto; }
.blocco-dettaglio { padding: 16px 0; border-bottom: 1px solid var(--bordo); }
.blocco-dettaglio:last-child { border-bottom: 0; }
.blocco-dettaglio h4 { margin: 0 0 12px; font-size: 12px; letter-spacing: .06em;
                       text-transform: uppercase; color: var(--tenue); }

/* NON si chiama .cifre: quel nome ce l'ha gia' l'input del codice a sei
   cifre, con 0,35em di spaziatura fra le lettere per staccarle una a una.
   Ereditata qui dentro faceva uscire "0 , 0 4 4 0" e "S p r e a d". Prima di
   battezzare una classe si cerca nel foglio se il nome e' libero. */
.cifre-offerta { display: grid; gap: 10px;
         grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
.cifra-offerta { border: 1px solid var(--bordo); border-radius: 10px; padding: 10px 12px;
         background: var(--fondo); }
.cifra-offerta b { display: block; font-size: 21px; line-height: 1.15;
           color: var(--blu); font-variant-numeric: tabular-nums; }
.unita-cifra { display: block; font-size: 11.5px; color: var(--grigio);
               margin-top: 1px; }
.etichetta-cifra { display: block; font-size: 11px; color: var(--tenue);
                   margin-top: 5px; line-height: 1.3; }

.blocco-dettaglio .segni { display: flex; flex-wrap: wrap; gap: 6px;
                           margin-top: 10px; }
.note-dettaglio { margin: 10px 0 0; padding-left: 18px; }
.note-dettaglio li { font-size: 13px; color: var(--grigio); margin: 3px 0;
                     line-height: 1.45; }

.piede-modale { display: flex; justify-content: space-between; gap: 14px;
                align-items: center; padding: 12px 20px 16px;
                border-top: 1px solid var(--bordo); background: var(--fondo); }
/* la spiegazione si stringe, i comandi no: senza questo i quattro pulsanti
   andavano a capo uno per riga e il piede diventava una scaletta */
.piede-modale .spiega { margin: 0; font-size: 12px; flex: 1 1 180px;
                        min-width: 0; }
.piede-modale .azioni { flex: 0 0 auto; flex-wrap: nowrap; }
.piede-modale button, .piede-modale .come-bottone { flex: 0 0 auto; }

@media (max-width: 560px) {
  .velo-modale { padding: 0; align-items: stretch; }
  .modale { max-height: 100vh; border-radius: 0; width: 100%; }
  .piede-modale { flex-direction: column; align-items: stretch; }
}

/* la pagina del listino dentro la finestra: alta quanto basta a leggerla
   senza aprire un'altra scheda del browser */
.foglio-listino { margin: 14px 0 6px; border: 1px solid var(--bordo);
                  border-radius: 10px; overflow: hidden; background: var(--fondo); }
/* A4 orizzontale (841x595): la cornice prende la stessa forma della pagina,
   se no sotto resta una fascia nera del visualizzatore. Il tetto in vh serve
   ai portatili bassi, dove una pagina intera non ci starebbe. */
.foglio-listino iframe { display: block; width: 100%; border: 0;
                         aspect-ratio: 842 / 595; height: auto;
                         max-height: 66vh; }
.sotto-foglio { margin: 0 0 6px; font-size: 12px; }
.piede-modale .azioni { margin-top: 0; }

/* una riga per SIM: operatore, canone, e la crocetta per toglierla. In una
   famiglia le SIM non hanno lo stesso prezzo, quindi ognuna ha la sua riga. */
.riga-sim { display: grid; grid-template-columns: 2fr 1fr auto; gap: 10px;
            align-items: end; margin-top: 10px; }
.riga-sim label { margin: 0; }
.riga-sim .sim-togli { align-self: end; margin-bottom: 1px; padding: 6px 11px;
                       font-size: 15px; line-height: 1.2; color: var(--tenue); }
.riga-sim .sim-togli:hover { color: var(--rosso); border-color: #f2d4d1; }
@media (max-width: 560px) {
  .riga-sim { grid-template-columns: 1fr auto; }
}

/* la riga che dice come cambia una voce dal secondo anno: si legge, non e'
   una postilla in fondo */
.elenco .sotto.forte { color: var(--grigio); font-weight: 500; }

/* il conto in chiaro: ogni passaggio con il suo numero, cosi' il venditore
   lo puo' rifare a mano davanti al cliente */
.conto-aperto { margin-top: 16px; border: 1px solid var(--bordo);
                border-radius: 12px; padding: 12px 14px; background: var(--fondo); }
.conto-aperto > summary { cursor: pointer; font-size: 13px; color: var(--blu);
                          list-style: none; width: fit-content; }
.conto-aperto > summary::-webkit-details-marker { display: none; }
.conto-aperto > summary::before { content: "\25B8 "; }
.conto-aperto[open] > summary::before { content: "\25BE "; }
.titolo-conto { margin: 14px 0 4px; font-size: 12px; letter-spacing: .05em;
                text-transform: uppercase; color: var(--tenue); }
.tabella.conto { width: 100%; border-collapse: collapse; }
.tabella.conto td { padding: 4px 8px; font-size: 13px; border: 0;
                    vertical-align: baseline; }
.tabella.conto td.numero { font-variant-numeric: tabular-nums;
                           white-space: nowrap; }
.tabella.conto td.sotto { color: var(--tenue); font-size: 11.5px; }
.tabella.conto tr.conto-somma td { border-top: 1px solid var(--bordo); }

/* lo sconto che recupera un'energia sfavorevole: si vede, non si nasconde
   dentro i prezzi */
.riquadro-sconto { margin-top: 14px; padding: 10px 14px; border-radius: 10px;
                   background: var(--ambra-chiaro); border: 1px solid #f0dfba;
                   color: var(--inchiostro); font-size: 13.5px; }

/* Un risparmio negativo non e' un errore del portale: e' un dato di quel
   cliente. Ambra invece che rosso - il rosso qui dentro vuol dire "guasto",
   e chi lo vede smette di leggere il numero. */
.sfavore { color: var(--ambra); font-weight: 600; }
.totale-confronto.cattivo { color: var(--ambra); background: var(--ambra-chiaro);
                            border-color: #f0dfba; }

/* la testa della pratica: di chi e', quando e' stata presa, com'e' finita */
.testa-pratica { display: flex; justify-content: space-between; gap: 14px;
                 align-items: flex-start; }
.testa-pratica .sotto { color: var(--tenue); font-size: 12.5px; margin-top: 2px; }

/* agenda: le caselle "con chi" (colleghi ed esterni) */
.scelte-con { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 10px; }
.scelte-con .interruttore { margin: 0; }

/* Il prezzo di listino sbarrato accanto a quello che paga davvero: si legge
   quanto varrebbe la SIM e si legge che non la paga, in un colpo solo. */
.conto s.prima { color: var(--tenue); margin-right: .4em; font-weight: 400; }

/* box con il marchio di un'azienda al posto dell'icona */
.badge-portale:has(.logo-box) { width: auto; padding: 0 10px; background: #fff !important; box-shadow: inset 0 0 0 1px var(--bordo, #e4e7ec); }
.badge-portale .logo-box { height: 26px; width: auto; max-width: 120px; object-fit: contain; display: block; }

/* le tabelle larghe scorrono dentro il riquadro, non fuori dalla pagina */
.riquadro.senza-imbottitura { overflow-x: auto; }

/* le spunte OK / KO sulle uscite dal ricorrente Optima */
.verdetti { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 150px; }
.verdetti .pastiglia { width: auto; flex: 0 0 auto; cursor: pointer; }
.verdetti .pastiglia.scelta[data-esito="ko"] { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.verdetti .pastiglia.scelta[data-esito="ok"] { background: var(--verde); border-color: var(--verde); color: #fff; }
.verdetti .opt-verdetto-nota { width: 100%; margin-top: 4px; font-size: 12px; padding: 4px 6px; }

/* la tabella delle uscite dal ricorrente sta nello schermo: le spunte si vedono
   senza scorrere, e i nomi lunghi vanno a capo invece di allargare la colonna */
.tabella-uscite { table-layout: fixed; width: 100%; }
.tabella-uscite th:nth-child(1), .tabella-uscite td:nth-child(1) { width: 40%; }
.tabella-uscite th:nth-child(2), .tabella-uscite td:nth-child(2) { width: 11%; }
.tabella-uscite th:nth-child(3), .tabella-uscite td:nth-child(3) { width: 21%; }
.tabella-uscite th:nth-child(4), .tabella-uscite td:nth-child(4) { width: 28%; }
.tabella-uscite td { overflow-wrap: anywhere; white-space: normal; }
.tabella-uscite td b { display: block; overflow-wrap: anywhere; }
.verdetti { min-width: 0; }

/* i clienti doppi (Store Note) */
.tabella-doppioni td { vertical-align: top; overflow-wrap: anywhere; }
.tabella-doppioni .azioni-riga { min-width: 13em; }
.tabella-doppioni .azioni-riga button { display: block; margin: 0 0 6px; width: 100%; }
.filtri #dp-ai, .filtri #dp-indietro, .filtri #sn-doppioni { flex: 0 0 auto; }
.parere-ai { margin-top: 6px; font-size: .9em; }
.parere-si b { color: var(--verde, #2a7); }
.parere-no b { color: var(--rosso, #c33); }

/* Store Note: la tabella sta nel riquadro, i clienti a gruppi per lettera */
.tabella-clienti { table-layout: fixed; width: 100%; }
.tabella-clienti th:nth-child(1), .tabella-clienti td:nth-child(1) { width: 46%; }
.tabella-clienti th:nth-child(2), .tabella-clienti td:nth-child(2) { width: 14%; }
.tabella-clienti th:nth-child(3), .tabella-clienti td:nth-child(3) { width: 40%; }
.tabella-clienti td { overflow-wrap: anywhere; vertical-align: top; }
.tabella-clienti .testa-gruppo td { background: #f6f7fa; padding: 8px 18px; color: var(--grigio); }
.tabella-clienti .freccia-gruppo { display: inline-block; width: 14px; color: var(--tenue); }
.sn-viste { margin: 10px 0 8px; }
.sn-viste .conta { color: var(--tenue); font-weight: 400; font-size: 12.5px; margin-left: 2px; }

/* ===================== ReFix — l'officina =====================
   La schermata del banco. Tutto quello che c'e' qui e' pensato per essere
   letto in piedi, con un cliente davanti che aspetta: numeri grandi, un
   colore solo per lo stato, e i passi del check-in sempre visibili in cima
   cosi' si sa quanto manca. */

.riquadri { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 6px; }
.riquadri .riquadro { flex: 1 1 150px; border: 1px solid var(--bordo);
  border-radius: 10px; padding: 12px 14px; background: #fff; }
.riquadri .numero { font-size: 26px; font-weight: 700; line-height: 1.1; }
.riquadri .etichetta { color: var(--tenue); font-size: 12px; margin-top: 2px; }

/* i passi del check-in: quello fatto si puo' riaprire, perche' al banco il
   cliente si ricorda le cose fuori ordine */
.briciole { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 12px 0 14px; font-size: 12.5px; }
.briciole .briciola { display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 20px; color: var(--tenue);
  border: 1px solid var(--bordo); background: #fff; }
.briciole .briciola b { display: inline-flex; align-items: center;
  justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--fondo); font-size: 11px; font-weight: 700; }
.briciole .briciola.qui { color: var(--inchiostro); border-color: var(--inchiostro);
  font-weight: 600; }
.briciole .briciola.qui b { background: var(--inchiostro); color: #fff; }
.briciole .briciola.fatta { cursor: pointer; color: var(--verde);
  border-color: #cfe6da; }
.briciole .briciola.fatta b { background: #e5f3ec; color: var(--verde); }

.griglia-due { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-items: start; }
@media (max-width: 900px) { .griglia-due { grid-template-columns: 1fr; } }

/* il documento: si legge come un foglio, perche' e' un foglio */
.documento { border: 1px solid var(--bordo); border-radius: 10px;
  padding: 20px 24px; background: #fff; max-height: 60vh; overflow: auto;
  font-size: 13px; line-height: 1.55; }
.documento h2 { font-size: 17px; margin: 0 0 10px; }
.documento h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--grigio); margin: 16px 0 6px; padding-bottom: 3px;
  border-bottom: 1px solid var(--bordo); }
.documento table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.documento td { padding: 4px 6px; border-bottom: 1px solid var(--fondo);
  vertical-align: top; }
.documento td:last-child { text-align: right; white-space: nowrap; }

/* il diagramma dei danni: si clicca dove c'e' il graffio */
.tela .segno { font-size: 20px; color: var(--rosso); user-select: none;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff; }

.stato.ambra { background: var(--ambra-chiaro); color: var(--ambra); }
.stato.grigia { background: var(--fondo); color: var(--tenue); }

.tabella.stretta td { padding: 6px 8px; font-size: 13px; }
.tabella.stretta input.mini { width: 90px; }
.tabella.stretta input.piena { width: 100%; }
.tabella .destra, .destra { text-align: right; }
.tabella.conti .saldo td { border-top: 2px solid var(--bordo);
  background: var(--fondo); }

.barra-filtri { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 12px; }
.barra-filtri .spazio { flex: 1; }
.barra-filtri .cerca { flex: 0 1 340px; padding: 8px 12px;
  border: 1px solid var(--bordo); border-radius: 8px; font-size: 13px; }

.foto-elenco { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.nota.verde { color: var(--verde); }
.nota.ambra { color: var(--ambra); }
.rosso { color: var(--rosso); }

/* nelle righe del banco la seconda informazione va sotto, non in coda: sono
   due cose diverse (il cliente e il suo telefono, il modello e il guasto) e
   lette di fila si incollano in una parola sola */
.tabella td small { display: block; color: var(--tenue); font-size: 11.5px;
  margin-top: 2px; font-weight: 400; }
.tabella td small b { font-weight: 600; }

/* due pulsanti in testata: comprare usato e accettare una riparazione sono
   due strade diverse dallo stesso banco */
.pulsanti-testata { display: flex; gap: 8px; flex-wrap: wrap; }
.verde { color: var(--verde); }

/* La scheda del banco non e' quella dell'accesso: `.scheda` sta a 400px
   fissi perche' li' dentro c'e' un modulo di login, qui invece ci sono
   moduli lunghi che a una colonna sola diventerebbero interminabili. */
.rf-scheda { width: 100%; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 14px; }
.rf-scheda h3 { margin: 0 0 10px; font-size: 15px; }
.rf-scheda h4 { margin: 16px 0 6px; font-size: 13px; color: var(--grigio); }
.rf-scheda .griglia { margin-top: 8px; }

/* l'avviso che ferma: il doppione appena aperto da un collega */
.avviso.rosso { background:#FDECEA; border-left:3px solid var(--rosso);
  color:#7F1D1A; padding:9px 12px; border-radius:6px; margin-top:8px;
  font-size:13.5px; }

/* la sequenza di sblocco: nove punti come sul telefono */
.rf-seq { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;
  border:1px solid var(--bordo); border-radius:10px; padding:14px 16px;
  margin-top:10px; background:var(--fondo); }
.rf-seq-t { width:100%; font-size:13px; font-weight:600; margin-bottom:4px; }
.rf-seq-c svg { background:var(--carta); border:1px solid var(--bordo);
  border-radius:10px; }
.rf-seq-lato { flex:1; min-width:200px; }
.rf-seq-lato .nota { margin:0 0 8px; }
.rf-seq-val { font-size:19px; font-weight:600; letter-spacing:.06em;
  margin-bottom:6px; }
.rf-seq-mini { margin-top:6px; }
.rf-seq-mini svg { width:96px; height:96px; border:1px solid var(--bordo);
  border-radius:8px; background:var(--carta); }

/* I chip nati nel portale erano etichette: non avevano ne' il puntatore ne'
   uno stato acceso, perche' nessuno ci cliccava sopra. In officina invece si
   scelgono - gli accessori lasciati, la priorita', il tipo di danno - e una
   scelta che non si vede e' una scelta che l'operatore rifa' tre volte
   credendo di aver sbagliato mira. */
button.chip { cursor: pointer; font-family: inherit; color: var(--inchiostro);
  transition: border-color .12s, background .12s; }
button.chip:hover { border-color: var(--tenue); background: var(--carta); }
button.chip:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.chip.attivo { background: var(--blu); border-color: var(--blu); color: #fff;
  font-weight: 600; }
.chip.attivo:hover { background: var(--blu); border-color: var(--blu); }
/* il segno di spunta dice "preso" anche a chi il colore non lo distingue */
.chip.attivo::before { content: "✓"; font-weight: 700; margin-right: -2px; }

/* i suggerimenti dei modelli, sotto il campo mentre si scrive */
.campo.suggerisce { position: relative; }
.sugg { display: none; position: absolute; top: 100%; left: 0; right: 0;
  z-index: 30; background: var(--carta); border: 1px solid var(--bordo);
  border-radius: 8px; box-shadow: 0 6px 18px rgba(19,26,36,.11);
  overflow: hidden; max-height: 260px; overflow-y: auto; }
.sugg.aperta { display: block; }
.sugg-r { display: flex; align-items: baseline; gap: 6px; width: 100%;
  text-align: left; padding: 8px 11px; background: none; border: 0;
  border-bottom: 1px solid var(--fondo); font: inherit; font-size: 13.5px;
  cursor: pointer; color: var(--inchiostro); }
.sugg-r:last-child { border-bottom: 0; }
.sugg-r:hover, .sugg-r:focus-visible { background: var(--fondo); }
.sugg-r small { margin-left: auto; color: var(--tenue); font-size: 11.5px; }

/* le voci di listino: si aggiungono con un clic, e portano prezzo e garanzia */
.chips .chip small { color: var(--tenue); font-size: 11.5px; margin-left: 2px; }
.chip.attivo small, button.chip:hover small { color: inherit; opacity: .85; }
button.chip[disabled] { opacity: .5; cursor: not-allowed; }
.rf-scheda h4 .conta { font-weight: 400; color: var(--tenue); font-size: 12px; }
#rf-listino .cerca { width: 100%; max-width: 380px; padding: 7px 11px;
  border: 1px solid var(--bordo); border-radius: 8px; font-size: 13px;
  margin-bottom: 4px; }

/* un campo che si modifica dentro una tabella, senza aprire un modulo */
.in-riga { border: 1px solid var(--bordo); border-radius: 6px; padding: 3px 7px;
  font: inherit; font-size: 13px; width: 100%; max-width: 220px;
  background: var(--carta); }
.riga-azione { display: flex; gap: 8px; margin-top: 10px; }
.riga-azione input { flex: 1; border: 1px solid var(--bordo); border-radius: 8px;
  padding: 7px 11px; font: inherit; font-size: 13px; }