/* 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;
  /* (12/10) il portale Amministrazione */
  --verde-chiaro: #e6f4ec;
  /* 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[type=email], 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;
  /* (14/10) una sola colonna laterale, a sinistra */
  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;
  /* La colonna del totale settimana deve restare visibile **senza
     scorrere**: con 760px di larghezza minima, su un monitor normale
     affiancato al pannello laterale la Σ finiva oltre il bordo e per vederla
     bisognava trascinare la tabella. Stretta cosi' il mese ci sta tutto. */
  grid-template-columns: repeat(7, 1fr) 62px;
  min-width: 620px;
}
.mese-cella { font-size: 12.5px; }
.mese-cella .mese-valore { line-height: 1.3; }
.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 colonne uguali: dalle / alle / totale (richieste di Store Time) */
.tre-uguali { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.tre-uguali label { margin-top: 14px; }
.tre-uguali input[readonly] { background: var(--fondo); font-weight: 600; }
.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; }
/* (3/10) le foto si vedono in miniatura; un clic le apre in grande */
.foto-pezzo { position: relative; display: inline-block; }
.foto-pezzo img { display: block; width: 110px; height: 110px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--bordo); cursor: zoom-in; background: var(--fondo); }
.foto-pezzo .bottone { position: absolute; top: 4px; right: 4px; padding: 2px 7px; }
.foto-grande { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto;
  border-radius: 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; }

/* il listino del modello, dentro il passo del dispositivo */
.rf-listino { border: 1px solid var(--bordo); border-radius: 10px;
  padding: 14px 16px; margin: 12px 0; background: var(--fondo); }
.rf-listino h4 { margin: 0 0 8px; }
.rf-listino .cerca { width: 100%; max-width: 360px; padding: 7px 11px;
  border: 1px solid var(--bordo); border-radius: 8px; font-size: 13px;
  margin: 8px 0 4px; }
.listino-righe { max-height: 320px; overflow-y: auto; margin-top: 6px;
  border: 1px solid var(--bordo); border-radius: 8px; background: var(--carta); }
.voce-listino { display: flex; align-items: center; gap: 10px;
  padding: 6px 11px; border-bottom: 1px solid var(--fondo); font-size: 13px; }
.voce-listino .vl-s { display: flex; align-items: center; gap: 10px; flex: 1;
  cursor: pointer; min-width: 0; }
.voce-listino:last-child { border-bottom: 0; }
.voce-listino:hover { background: var(--fondo); }
.voce-listino.presa { background: #f2f0fd; }
.voce-listino .vl-n { flex: 1; }
.voce-listino .vl-g { color: var(--tenue); font-size: 11.5px; white-space: nowrap; }
.voce-listino .vl-p { font-weight: 600; white-space: nowrap; min-width: 72px;
  text-align: right; font-variant-numeric: tabular-nums; }
/* il prezzo si corregge qui, senza aprire niente */
input.vl-p { width: 84px; max-width: 84px; padding: 3px 7px; font-size: 13px;
  text-align: right; }
/* anche la garanzia si decide caso per caso */
input.vl-g { width: 92px; max-width: 92px; padding: 3px 7px; font-size: 12.5px;
  color: var(--grigio); }
input.vl-p:focus, input.vl-g:focus { border-color: var(--blu); outline: none;
  color: var(--inchiostro); }

/* i tre pulsanti legati al modello che si sta accettando */
.slot-modello { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 10px 0 2px; }
.slot-modello .nota { margin: 0; font-size: 12px; }
.nota-grande { font-size: 14.5px; color: var(--grigio); line-height: 1.6;
  max-width: 60ch; }

/* i tre gruppi di intervento: stanno sopra le categorie e pesano di piu' */
.chips.gruppi { margin-bottom: 4px; }
.chips.gruppi .chip { font-weight: 600; padding: 7px 13px; }
.chips.gruppi .chip small { color: var(--tenue); font-weight: 400;
  margin-left: 3px; }
.chips.gruppi .chip.attivo small { color: rgba(255,255,255,.75); }
.campo .facolt { font-style: normal; font-weight: 400; color: var(--tenue);
  font-size: 11.5px; margin-left: 4px; }

/* il cliente richiamato dall'archivio */
.cliente-preso { display: flex; align-items: center; gap: 10px;
  background: var(--accento-tenue, #eef2fd); border: 1px solid var(--bordo);
  border-radius: 8px; padding: 9px 13px; margin-bottom: 12px; font-size: 14px; }
.cliente-preso small { color: var(--tenue); font-size: 12.5px; }
.cliente-preso .bottone { margin-left: auto; }
.sugg-vuoto { padding: 9px 12px; font-size: 13px; color: var(--tenue); }
/* i dispositivi che ha gia' portato */
.disp-noti { margin: 10px 0; }
.disp-noti h4 { margin: 0 0 6px; }
.disp-noti .chip { display: inline-flex; flex-direction: column;
  align-items: flex-start; gap: 1px; }
.disp-noti .chip small { color: var(--tenue); font-size: 11px; }

/* la sagoma sotto ai segni: si clicca attraverso, se no i segni si
   metterebbero solo dove la sagoma non c'e' */
.tela-sagoma { position: absolute; inset: 0; pointer-events: none; }
.tela-sagoma svg { width: 100%; height: 100%; display: block; }
/* il disegno dentro al contratto stampato */
.doc-disegno { border: 1px solid var(--bordo); border-radius: 8px;
  padding: 8px; margin: 8px 0; display: inline-block; background: #fff; }
@media print { .doc-disegno { break-inside: avoid; } }
/* la legenda dei simboli, sotto il disegno stampato */
.doc-legenda { font-size: 12px; color: var(--grigio); margin: 2px 0 0; }

/* la scelta della sede, all'ultimo passo: decide chi intesta il contratto */
.scegli-sede .sedi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px; margin: 10px 0; }
.scegli-sede .sede { display: flex; flex-direction: column; gap: 2px;
  text-align: left; padding: 11px 13px; border: 1px solid var(--bordo);
  border-radius: 10px; background: var(--carta); cursor: pointer; font: inherit;
  color: var(--inchiostro); }
.scegli-sede .sede:hover { border-color: var(--tenue); }
.scegli-sede .sede.scelta { border-color: var(--blu); border-width: 2px;
  padding: 10px 12px; background: #f4f2fe; }
.scegli-sede .sede small { color: var(--tenue); font-size: 11.5px; }
.scegli-sede .sede .soc { color: var(--grigio); font-weight: 600; font-size: 11.5px; }
/* l'intestazione in cima al documento stampato */
.doc-testata { border-bottom: 2px solid var(--inchiostro); padding-bottom: 8px;
  margin-bottom: 10px; font-size: 12.5px; line-height: 1.5; }
.barra-filtri .sep-filtri { width: 1px; height: 22px; background: var(--bordo);
  margin: 0 4px; }

/* --- la lista dei solleciti ---
   Il pulsante si accende solo quando c'e' davvero qualcuno da chiamare: un
   badge sempre colorato smette di voler dire qualcosa dopo due giorni. */
.chip.allarme {
  color: var(--ambra); background: var(--ambra-chiaro); border-color: #e8d5ae;
  font-weight: 600;
}
.gruppo-sollecito { margin: 22px 0 2px; }
.gruppo-sollecito:first-child { margin-top: 0; }
.gruppo-sollecito small { color: var(--tenue); font-weight: 400; }
.azioni-sollecito td {
  padding-top: 0; border-top: 0; color: var(--grigio); font-size: 13px;
}
.azioni-sollecito .chip { margin: 2px 0 6px; font-size: 12.5px; padding: 3px 9px; }

/* Inserimenti, passo "Chi": i clienti trovati sotto la casella di ricerca */
.trovati { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; }
.trovati:empty { margin: 0; }
.trovato {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; padding: 8px 12px; border: 1px solid var(--bordo);
  border-radius: 8px; background: #fff; cursor: pointer;
}
.trovato:hover { border-color: var(--blu); background: var(--blu-chiaro); }
.trovato .sotto { font-size: 12px; color: var(--tenue); }
.trovato.nuovo { border-style: dashed; }

/* i pacchetti Sky: lista in Settings e spunte sul contratto */
.riga-pacchetto { border: 1px solid var(--bordo); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.riga-pacchetto-testa { display: flex; gap: 8px; align-items: center; }
.riga-pacchetto .pk-label { flex: 1; margin: 0; }
.riga-pacchetto .pk-valore { width: auto; margin: 0; }
.riga-pacchetto .pk-descrizione, .riga-pacchetto .pk-opzioni { margin: 6px 0 0; font-size: 13px; }
.pacchetti { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 4px 0 10px; }
.pacchetto { border: 1px solid var(--bordo); border-radius: 10px; padding: 4px 8px; }
.pacchetto.scelto { border-color: var(--blu); background: var(--blu-chiaro); }
.pacchetto .interruttore { margin: 0; border: 0; padding: 2px 0; background: none; cursor: help; }
.opzioni-pacchetto { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0 2px; }
.opzioni-pacchetto .attributo { font-size: 12px; color: var(--tenue); display: flex; flex-direction: column; gap: 2px; }
.opzioni-pacchetto select { width: auto; margin: 0; font-size: 13px; padding: 3px 6px; }

/* SIM Sky Mobile: i campi della portabilita' */
.campi-mnp { display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 0 2px; }
.campi-mnp .attributo { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--tenue); }
.campi-mnp input { margin: 0; min-width: 12em; }

/* il secondo passo: dati del cliente e documenti */
.griglia-pratica { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 14px; }
.campo-pratica.largo { grid-column: 1 / -1; }
.campo-pratica label { display: block; }
.pratica .allegati { list-style: none; padding: 0; margin: 6px 0 10px; }
.pratica .allegati li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--bordo); }
.pratica .allegati li .sotto { margin: 0 0 0 auto; }
.pratica .allegati li.vuoto { color: var(--tenue); border: 0; }
.bottone-file { position: relative; overflow: hidden; display: inline-block; cursor: pointer; }
.bottone-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.avviso.verde-avviso { background: #eef7f2; border-color: #cfe6db; color: var(--verde); }
.targhetta.gialla { color: #8a5a00; background: #fff6e0; border-color: #f0dba0; }

/* il cliente nella schermata della pratica */
.cliente-riassunto { margin: 10px 0 4px; padding: 8px 12px; border: 1px dashed var(--bordo); border-radius: 10px; }
.trovato.scelto-cliente { border-color: var(--blu); background: var(--blu-chiaro); cursor: default; margin-bottom: 8px; }

/* lo stato della pratica */
.avviso.blu-avviso { background: var(--blu-chiaro); border-color: #cfcaf3; color: var(--blu-scuro, #372aa8); }
.avviso.rosso-avviso { background: #fdf2f1; border-color: #f2d4d1; color: var(--rosso); }
.targhetta.blu { color: var(--blu); background: var(--blu-chiaro); border-color: #cfcaf3; }

/* Inserimenti: la tabellina delle pratiche, a tutta larghezza */
.griglia-giro { padding: 8px 12px; }
.griglia-giro table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.griglia-giro th { font-weight: 500; font-size: 11.5px; color: var(--tenue); text-transform: uppercase;
  letter-spacing: .04em; text-align: center; padding: 6px 2px; overflow-wrap: anywhere; }
.griglia-giro th:first-child, .griglia-giro td:first-child { text-align: left; width: 32%; }
.griglia-giro td { text-align: center; padding: 6px 2px; border-top: 1px solid var(--bordo); overflow-wrap: anywhere; }
.griglia-giro tr.totale td { font-weight: 600; }
.griglia-giro .zero { color: var(--tenue); }
.num-giro { min-width: 2.2em; padding: 2px 8px; border: 1px solid transparent; border-radius: 8px;
  background: none; font: inherit; color: var(--blu); cursor: pointer; }
.num-giro:hover { border-color: var(--bordo); background: #fafbfc; }
.num-giro { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tabella-pratiche { table-layout: fixed; width: 100%; }
.tabella-pratiche td { overflow-wrap: anywhere; vertical-align: top; }
.rosso-testo { color: var(--rosso); }
.verde-testo { color: var(--verde); }

/* ---------- schermo stretto: il pannello a scomparsa (come Windows) ---------- */
.apri-cassetto { display: none; }
.numerino { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 10px;
  background: var(--rosso); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; }
.cassetto {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 92vw);
  background: var(--fondo); box-shadow: -8px 0 28px rgba(15, 20, 30, .16);
  transform: translateX(105%); transition: transform .2s ease;
  z-index: 60; overflow-y: auto; padding: 0 14px 30px;
}
body.cassetto-aperto .cassetto { transform: none; }
.velo-cassetto { position: fixed; inset: 0; background: rgba(15, 20, 30, .25);
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 55; }
body.cassetto-aperto .velo-cassetto { opacity: 1; pointer-events: auto; }
.cassetto-testa { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between;
  align-items: center; padding: 12px 0 10px; background: var(--fondo); }
.cassetto .barra-laterale, .cassetto .barra-laterale.sinistra {
  width: auto; flex: none; position: static; padding-top: 0; margin-bottom: 18px; }
@media (max-width: 1200px) {
  .apri-cassetto { display: inline-flex; align-items: center; gap: 6px; }
  .corpo-app { display: block; }
}
@media (max-width: 620px) {
  .cassetto { width: 100vw; }
  .apri-cassetto { padding: 6px 10px; }
}

/* la scheda di lavoro del back office */
.tabella-pratiche tr.scelta-riga td { background: var(--blu-chiaro); }
.griglia-lavoro { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .griglia-lavoro { grid-template-columns: 1fr; } }
.testa-scheda-lavoro { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.titoletto-lavoro { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue);
  margin: 14px 0 4px; font-weight: 500; }
.righe-copia { display: grid; grid-template-columns: 150px minmax(0, 1fr) 30px; gap: 2px 10px; align-items: center; font-size: 14px; }
.righe-copia .k { color: var(--tenue); font-size: 12.5px; }
.righe-copia .val { overflow-wrap: anywhere; }
.copia { border: 0; background: none; color: var(--blu); cursor: pointer; font-size: 17px; line-height: 1; padding: 3px 5px; border-radius: 6px; }
.copia:hover { background: var(--blu-chiaro); }
.copiato { font-size: 11px; color: var(--verde); }
.documenti-lavoro { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-doc { border: 1px solid var(--bordo); border-radius: 8px; padding: 4px 10px; font-size: 13px; }
.esito-lavoro button { width: 100%; margin: 6px 0 0; }
.esito-lavoro textarea { width: 100%; }
.riga-pezzo { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 8px; align-items: center; margin: 4px 0; font-size: 14px; }
.riga-pezzo select { margin: 0; }
@media (max-width: 620px) { .righe-copia { grid-template-columns: 110px minmax(0, 1fr) 30px; } }

/* presa in carico: la scritta e il pop-up Si' / No */
.in-lavorazione-da { margin: 8px 0 4px; padding: 8px 12px; border-radius: 10px; background: #fff6e0;
  border: 1px solid #f0dba0; color: #8a5a00; font-size: 13px; letter-spacing: .02em; }
.in-lav-lista { color: #8a5a00; font-weight: 600; font-size: 11.5px; }
.velo-domanda { position: fixed; inset: 0; background: rgba(15, 20, 30, .35); z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.domanda { background: #fff; border-radius: 14px; padding: 18px 20px; max-width: 380px; width: 100%;
  box-shadow: 0 12px 32px rgba(15, 20, 30, .25);
  /* una finestra piu' alta dello schermo deve scorrere, se no i tasti in
     fondo restano fuori e non si chiude piu' niente (13/10) */
  max-height: 88vh; overflow-y: auto; }
.domanda h3 { margin: 0 0 6px; font-size: 17px; }
.domanda .azioni button { min-width: 90px; }

/* l'esempio di dove si trova l'ICCID */
.dove-iccid { background: none; border: 0; padding: 0; margin: 0; color: var(--blu, #2563eb);
  text-decoration: underline; cursor: pointer; font: inherit; font-size: .85em; }
.domanda.esempio-sim { max-width: 560px; }
.disegno-sim { display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto; margin: 8px auto 4px; border-radius: 10px; }
/* la SIM Optima consegnata: ICCID e MSISDN */
.campi-sim { display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 0 2px; }
.campi-sim .attributo { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--tenue); }
.campi-sim input { margin: 0; min-width: 14em; }

/* il bottone del preventivo (1/10): il piu' evidente della schermata */
a.principale.scarica-preventivo {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 18px 20px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

/* (2/10) ReFix: il totale sotto le righe degli interventi, ben leggibile */
.tabella .totale-righe td, .tabella.stretta .totale-righe td { color: var(--inchiostro); font-size: 14.5px; border-top: 2px solid var(--bordo); padding-top: 10px; }
.totale-listino { border-top: 2px solid var(--bordo); color: var(--inchiostro); }

/* (2/10) OCR negli inserimenti: l'icona accanto a ogni campo */
.ocr-riga { display: flex; align-items: center; gap: 6px; width: 100%; }
.ocr-riga > input { flex: 1; min-width: 0; }
.ocr-riga:has(> input.nascosto) { display: none; }
.ocr-btn { flex: none; border: 1px solid var(--bordo); background: #fff; border-radius: 8px; color: var(--grigio);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; font-size: 16px; line-height: 1; cursor: pointer; }
.ocr-btn:hover { background: var(--fondo); }
input.ocr-letto { background: #fff8d6; border-color: #e0b400; }
.ocr-qr { display: flex; justify-content: center; margin: 10px 0; }

/* (2/10) Inserimenti: dove va il contratto, in evidenza sotto il venditore */
.destinazione-box { margin: 10px 0 4px; }
.destinazione-box label { display: block; margin: 0 0 6px; }
.destinazione-box select { width: 100%; font-weight: 600; }

/* (2/10) pratica: i documenti che arrivano dal telefono, accanto al QR */
.p-qr-arrivati { margin: 8px 0 10px; padding: 8px 10px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--fondo); }
.p-qr-arrivati ul { margin: 6px 0 0; }

/* (2/10) OCR: i due pulsanti in cima alle schermate dell'inserimento */
.ocr-barra { margin: 4px 0 14px; padding: 10px 12px; border: 1px solid var(--bordo);
  border-radius: 12px; background: var(--fondo); }
.ocr-pulsanti { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ocr-pulsanti > .lieve { flex: 1 1 200px; margin: 0; display: inline-flex; align-items: center;
  justify-content: center; min-height: 40px; font-weight: 600; text-align: center; }
.ocr-barra .spiega { margin: 8px 0 0; }
.ocr-riga-esito { font-size: 13px; margin-top: 6px; }
.ocr-intestatario { margin-top: 8px; }
.ocr-intestatario .lieve { margin-top: 6px; }
.ocr-esiti:not(:empty) { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--bordo); }
.ocr-esiti:not(:empty)::before { content: "Caricati in questa schermata"; display: block; font-weight: 700;
  font-size: 13px; margin-bottom: 2px; }
.ocr-riga-esito { padding: 4px 0; border-bottom: 1px dashed var(--bordo); }
.ocr-riga-esito:last-child { border-bottom: 0; }

/* (2/10) dato da controllare: bordo arancione e la riga che dice cosa non torna */
input.dato-dubbio { border-color: #e07b00 !important; box-shadow: 0 0 0 2px rgba(224, 123, 0, .15); }
.avviso-dato { display: block; color: #b45f00; font-size: 12px; line-height: 1.35; margin-top: 3px; font-weight: 500; }

/* (3/10) Inserimenti: la barra di ricerca */
.ricerca-ins { padding: 12px 14px; }
.ricerca-ins #ri-q { width: 100%; }
.ricerca-filtri { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.ricerca-filtri select { flex: 1 1 160px; }
.ri-data { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ri-data input { width: 120px; }

/* (3/10) confronto: il tipo di servizio */
.sv-dettaglio { margin-top: 12px; }
.sv-riga { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.sv-riga select { width: auto; }
.sv-flags { display: flex; flex-wrap: wrap; gap: 2px 26px; }
.riga-scelta input:disabled + span { opacity: .5; }

/* centralino (3/10) */
.filtri-centralino { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 6px 0 14px; }
.filtri-centralino label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--grigio); margin: 0; }
.filtri-centralino input, .filtri-centralino select { width: auto; min-width: 120px; margin: 0;
  height: 40px; box-sizing: border-box; padding: 6px 10px; font-size: 14px; }
.filtri-centralino .principale { height: 40px; }
.tabella-scorre .tabella th { text-align: left; }
.tabella-scorre { overflow-x: auto; }
.cen-lettore audio { display: block; width: 240px; max-width: 100%; margin-top: 6px; }

/* (3/10, regola dell'utente) gli elenchi di ReFix dentro un riquadro bianco,
   con scritte piu' marcate: sullo sfondo a righe si leggevano male */
.rf-elenco { margin-top: 10px; }
.rf-elenco .tabella th { padding: 10px 12px; background: var(--fondo); color: var(--inchiostro);
  font-weight: 700; text-align: left; border-bottom: 1px solid var(--bordo); }
.rf-elenco .tabella td { padding: 10px 12px; color: var(--inchiostro); font-weight: 500; }
.rf-elenco .tabella td:first-child { color: var(--inchiostro); width: auto; }
.rf-elenco .tabella td b { font-weight: 700; }
.rf-elenco .tabella td small { color: var(--grigio); font-weight: 500; }
.rf-elenco .tabella td small.ambra { color: var(--ambra); font-weight: 600; }
.rf-elenco .tabella tr.cliccabile:hover td { background: var(--blu-chiaro); }
.rf-elenco .tabella th.destra { text-align: right; }

/* (5/10) codice fiscale: CF straniero e calcolo */
.cf-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 4px 0 8px; font-size: 13px; }
.cf-barra .cf-straniero { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.cf-barra .cf-straniero input { width: auto; margin: 0; }
.cf-barra .cf-calcola { padding: 3px 10px; font-size: 12.5px; }
.cf-esito { flex-basis: 100%; color: var(--tenue); font-size: 12.5px; }
.cf-esito.cf-male { color: #b45f00; }
.cf-luoghi { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 240px; overflow-y: auto; }
.cf-luogo { text-align: left; background: var(--carta); border: 1px solid var(--bordo); border-radius: 8px;
            padding: 6px 10px; cursor: pointer; font: inherit; color: inherit; }
.cf-luogo:hover { border-color: var(--blu); }
.cf-luogo-vecchio { opacity: .7; }
.collegate-cliente { margin: 6px 0 0; padding-left: 18px; }
/* il calcolo del codice fiscale si apre anche sopra la scheda cliente */
#modale-cf { z-index: 120; }
#modale-cf select, #modale-cf input[type=date] { display: block; width: 100%; margin-top: 4px; }

/* (6/10) Store Time: avvisi agli admin */
.avviso-orario { border: 1px solid var(--bordo); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.avviso-orario p { margin: 0 0 8px; }
.azioni-avviso { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.av-gruppo { display: inline-flex; gap: 6px; align-items: center; }
.av-gruppo input, .av-gruppo select { width: auto; margin: 0; }

/* (7/10) Posta */
.testa-posta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.elenco-posta td { vertical-align: top; cursor: pointer; }
.elenco-posta .quando-mail { white-space: nowrap; color: var(--tenue); font-size: 13px; width: 1%; }
.elenco-posta tr.da-leggere b { font-weight: 700; }
.elenco-posta tr.da-leggere .sotto { color: var(--inchiostro); }
.lavoro-mail { border-top: 1px solid var(--bordo); margin-top: 12px; padding-top: 12px; }
.lavoro-mail textarea { margin-top: 8px; }
.mail-singola .testa-mail { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.testo-mail { white-space: pre-wrap; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
#modale-mail textarea { font-family: inherit; }

/* (9/10) in alto: le mail di Optima da prendere in carico */
.posta-testata { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; }
.posta-testata.posta-da-fare { color: var(--rosso, #c0392b); font-weight: 600; }
.posta-testata.posta-da-fare .numerino { background: var(--rosso, #c0392b); color: #fff; }

/* (9/10) il muro per le utenze disattivate */
.muro-revocata { text-align: center; }
.muro-revocata h1 { color: var(--rosso, #c0392b); }

/* --- la finestra per scrivere una mail -----------------------------------
   Due difetti che si vedevano a occhio nudo.

   Il primo: un <textarea> non e' un <input>, e la regola dei campi di testo
   prende solo gli input. Senza niente che lo governi, il browser gli da' la
   sua misura di default - venti caratteri - e usciva un cubetto stretto con
   l'etichetta "Testo" di fianco e mezza finestra vuota accanto. Qui prende
   lo stesso vestito degli altri campi.

   Il secondo: "Carica dal PC" e' un <label> e "Carica dal cellulare" un
   <button>. Stessa classe addosso, ma il bordo, l'imbottitura e il tondo
   arrivano dalla regola dell'elemento <button>, che a un <label> non si
   applica: due comandi vicini che fanno la stessa cosa e sembravano due
   oggetti diversi. E' lo stesso inciampo gia' visto nelle schede delle
   offerte, e si risolve allo stesso modo: la riga e' un .azioni, e il label
   porta .come-bottone. */
.corpo-modale textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
  background: #fff;
  color: var(--inchiostro);
  resize: vertical;
  min-height: 120px;
}
.corpo-modale textarea:focus,
.corpo-modale input:focus { outline: none; border-color: var(--blu); }

.pm-allegati {
  margin: 18px 0 0;
  padding: 14px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--fondo);
}
.pm-allegati .titolo-allegati {
  font-size: 13px; color: var(--grigio); margin: 0 0 10px;
}
.pm-allegati .azioni { margin: 0; }
.pm-allegati .allegati { margin: 12px 0 0; }
.pm-allegati .allegati:empty { margin: 0; }

/* La copia fissa al referente: una spunta, non una scritta. Parte accesa -
   e' la regola - ma non tutte le mail che escono da questa casella lo
   riguardano, e una copia che non c'entra e' solo rumore per chi la riceve. */
.pm-copia {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 0; font-size: 13px; color: var(--grigio);
}
.pm-copia input { width: auto; margin: 0; }


/* --- straordinari e pause dimenticate, sotto il calendario ---------------
   Si guardano a fine mese, tutte insieme: un giorno per volta non si vede
   mai il quadro, e sono soldi in busta paga. */
.stra-riga {
  display: grid;
  grid-template-columns: 26px 1fr auto 86px auto;
  align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--bordo);
}
.stra-riga:last-child { border-bottom: 0; }
.stra-riga input[type=checkbox] { width: auto; margin: 0; }
.stra-riga .stra-ore { width: 80px; padding: 5px 8px; font-size: 13px; text-align: right; }
.stra-riga .stra-quando { font-size: 13.5px; }
.stra-riga .stra-quando .sotto { font-size: 11.5px; }
.stra-riga .azioni { margin: 0; gap: 6px; }
.stra-riga.accettato { background: #f3faf6; }
.stra-riga.rifiutato { opacity: .62; }
.stra-testa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 0 0 10px;
}
.stra-testa .azioni { margin: 0; }
.stra-vuoto { padding: 14px 12px; font-size: 13.5px; color: var(--grigio); }

/* I campi della malattia nella finestra del giorno: compaiono solo quando il
   codice scelto e' M, se no sono due caselle da saltare a ogni correzione. */
.rt-malattia {
  margin: 14px 0 4px; padding: 12px 14px;
  border: 1px solid var(--bordo); border-radius: 10px; background: var(--fondo);
}
.rt-malattia .spiega { margin: 0 0 8px; }
.rt-malattia label { margin-top: 0; }

/* chi mettere nell'estrazione delle ore (12/10) */
.st-chi { margin: 10px 0 4px; }
.st-chi > summary { cursor: pointer; padding: 6px 0; }
.st-chi-righe {
  display: grid; gap: 2px 14px; margin: 6px 0 4px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.st-chi-righe .sotto { display: inline; }

/* anno e mese dell'estrazione (12/10) */
.st-periodo { gap: 8px; }
.st-periodo select { max-width: 160px; }
.st-periodo #st-anno { max-width: 100px; }

/* Sky Mobile: cliente nuovo o gia' cliente, e le SIM in piu' (12/10) */
.cliente-sky { display: grid; gap: 10px; margin: 10px 0; }
.cliente-sky .box-codice-sky { max-width: 340px; }
.titoletto-sim { margin: 14px 0 6px; font-size: 1rem; }
.componente.sim-sky { margin-top: 12px; }

/* Amministrazione: scadenziario e cassa (12/10) */
.cs-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cs-sezioni { margin-top: 10px; }
.cs-fascia { margin: 16px 0 6px; font-size: 1rem; }
.cs-fascia.rosso { color: var(--rosso); }
.cs-fascia .sotto { font-weight: normal; }
.cs-scaduto-totale { margin: 6px 0 0; color: var(--rosso); font-size: 1.05rem; }
.cs-saldo { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0; }
.cs-grosso { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.cs-grosso span { display: block; font-size: .85rem; font-weight: 400; color: var(--grigio); }
.cs-numeri { display: flex; gap: 18px; flex-wrap: wrap; }
.cs-numero span { display: block; font-size: .8rem; color: var(--grigio); }
.cs-negozio { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.cs-negozio input { flex: 1; }
.cs-iban { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
.numero { text-align: right; white-space: nowrap; }

/* posta: selettore della casella e rubrica (12/10) */
.testa-posta select { margin: 4px 0; max-width: 260px; }
.corpo-modale.rubrica { max-width: 640px; }
/* i tasti in fondo restano attaccati al bordo mentre si scorre: in una
   giornata con venti movimenti il "Fine" non si deve andare a cercare */
.corpo-modale .azioni:last-child {
  position: sticky; bottom: 0; background: #fff;
  padding: 10px 0 2px; margin-top: 4px;
  box-shadow: 0 -8px 10px -8px rgba(15, 20, 30, .18);
}
.corpo-modale.rubrica table { font-size: .92rem; }

/* esito della prova di una casella (12/10) */
.spiega.verde { color: var(--verde); }
.spiega.rosso { color: var(--rosso); }

/* il mese giorno per giorno (12/10) */
.cs-mese th { font-size: .78rem; }
.cs-mese td { padding: 4px 8px; }
.cs-cliccabile { cursor: pointer; }
.cs-cliccabile:hover { background: var(--fondo); }
.cs-vuoto td { color: var(--tenue); }
.cs-vuoto:hover td { color: var(--grigio); }
.cs-rosso td:first-child { box-shadow: inset 3px 0 0 var(--rosso); }
.cs-totale td { background: #f3f6f4; font-weight: 600; }
.cs-periodo { margin: 10px 0; }
.cs-periodo select { max-width: 150px; }
.cs-scheda { border-top: 1px solid var(--bordo); padding: 10px 0; }
.cs-scheda .targhetta { margin-left: 8px; }

/* scadenziario a calendario (12/10) */
.sc-grid { grid-template-columns: repeat(7, 1fr); }
.sc-punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ambra); display: block;
}
.sc-punto.rosso { background: var(--rosso); }
.mese-cella.scelto { background: var(--blu-chiaro); box-shadow: inset 0 0 0 2px var(--blu); }

/* il totale dello scaduto, in alto nello scadenziario (12/10) */
.cs-tab-scaduto {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 2px; padding: 6px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid #f0c7c4; background: #fdeeed; color: var(--rosso);
  font: inherit; text-align: left;
}
.cs-tab-scaduto:hover { background: #fbe3e1; }
.cs-tab-scaduto span { font-size: .75rem; color: var(--grigio); }
.cs-tab-scaduto b { font-size: 1.05rem; }
.cs-tab-scaduto.vuoto {
  border-color: var(--bordo); background: var(--fondo); color: var(--grigio);
  cursor: default;
}

/* il riquadro per aggiungere una societa' (12/10) */
.riquadro.portale.portale-aggiungi {
  border-style: dashed;
  background: transparent;
}
.riquadro.portale.portale-aggiungi .titolo-portale { color: var(--grigio); }

/* Prima Nota: i riquadri di caricamento (12/10) */
.pn-caricamenti {
  display: grid; gap: 12px; margin: 12px 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.pn-box {
  border: 1px dashed var(--bordo); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.pn-box .sotto { min-height: 32px; }
.bottone-file {
  display: inline-block; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--bordo); background: var(--carta); cursor: pointer;
  font-size: .9rem;
}
.bottone-file:hover { background: var(--fondo); }
.bottone-file input { display: none; }
.riquadro-qr { display: flex; gap: 16px; align-items: center; margin-top: 12px; }

/* la testata di una societa' (12/10): il nome e basta */
.cs-intestazione { margin: 4px 0 18px; }
.cs-torna {
  display: inline-block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--blu);
  text-decoration: none;
  padding: 5px 12px 5px 9px;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: var(--carta);
}
.cs-torna:hover { background: var(--blu-chiaro); border-color: var(--blu); }
.cs-nome-societa {
  margin: 6px 0 2px; font-size: 2rem; line-height: 1.15; letter-spacing: -.02em;
}
.cs-sottotitolo { margin: 0; color: var(--grigio); font-size: .95rem; }

/* le righe di un estratto da lavorare (12/10) */
.ri-aperta td:first-child { box-shadow: inset 3px 0 0 var(--ambra); }
.ri-riga .targhetta { margin-right: 4px; }
.allegati { margin: 6px 0 0; padding-left: 18px; font-size: .9rem; }

/* il numero dell'assegno: tendina e casella a mano, affiancate (12/10) */
#cs-sc-assegno-box { display: flex; flex-direction: column; gap: 6px; }
#cs-sc-assegno-scelta { max-width: 100%; }

/* i numeri degli assegni ancora da staccare (12/10) */
.cs-numeri-assegni { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.cs-pezzo {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .85rem; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--bordo); background: var(--fondo);
}

/* l'elenco degli assegni da caricare (12/10) */
.cs-li-griglia { display: grid; gap: 6px; margin: 8px 0; }
.cs-li-riga { display: flex; align-items: center; gap: 8px; }
.cs-li-riga .cs-pezzo { flex: 1; }
.cs-li-riga .cs-li-num {
  flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* la password provvisoria, da ricopiare (13/10) */
.pw-provvisoria {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.3rem; font-weight: 600; letter-spacing: .02em;
  background: var(--fondo); border: 1px solid var(--bordo);
  border-radius: 10px; padding: 12px; text-align: center; margin: 10px 0;
  user-select: all;
}

/* le foto del giorno, in anteprima (13/10) */
.cs-doc-griglia {
  display: grid; gap: 10px; margin: 8px 0;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.cs-doc { border: 1px solid var(--bordo); border-radius: 10px; padding: 8px; }
.cs-doc img {
  width: 100%; height: 90px; object-fit: cover; border-radius: 6px;
  background: var(--fondo);
}
.cs-doc-finta {
  display: flex; align-items: center; justify-content: center;
  height: 90px; border-radius: 6px; background: var(--fondo);
  color: var(--grigio); font-weight: 600;
}
.cs-doc-nome { font-size: .8rem; margin-top: 4px; word-break: break-all; }
.cs-doc .azioni { margin-top: 6px; }
.cs-pr-importo { width: 90px; text-align: right; }
.cs-pr-codice { width: 140px; }

/* I colori dei giorni di cassa (13/10, richiesta dell'utente).
   Tinte a bassa opacita': si vedono sul chiaro e sullo scuro, e non
   coprono i numeri. */
.cs-col-verde > td { background: rgba(46, 160, 67, .16); }
.cs-col-giallo > td { background: rgba(240, 190, 20, .18); }
.cs-col-rosso > td { background: rgba(220, 70, 60, .14); }
.cs-col-azzurro > td { background: rgba(50, 130, 220, .14); }
.cs-col-lilla > td { background: rgba(150, 90, 220, .14); }
.cs-col-grigio > td { background: rgba(130, 130, 130, .16); }

/* la pennellata: invisibile finche' non si passa sopra la riga */
.cs-tinta {
  background: none; border: 0; padding: 0 6px 0 0; cursor: pointer;
  color: var(--grigio); opacity: 0; transition: opacity .12s;
  vertical-align: middle; line-height: 1;
}
tr:hover .cs-tinta, .cs-tinta:focus-visible { opacity: 1; }
.cs-tinta:hover { color: var(--blu); }

.cs-tavolozza {
  position: fixed; z-index: 60; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: 10px; padding: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18); width: 214px;
}
.cs-tinte { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-tinta-scelta {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--bordo); font-size: .8rem; color: var(--grigio);
  background: transparent;
}
.cs-tinta-scelta.scelto { outline: 2px solid var(--blu); outline-offset: 1px; }
.cs-col-verde.cs-tinta-scelta { background: rgba(46, 160, 67, .35); }
.cs-col-giallo.cs-tinta-scelta { background: rgba(240, 190, 20, .4); }
.cs-col-rosso.cs-tinta-scelta { background: rgba(220, 70, 60, .32); }
.cs-col-azzurro.cs-tinta-scelta { background: rgba(50, 130, 220, .32); }
.cs-col-lilla.cs-tinta-scelta { background: rgba(150, 90, 220, .32); }
.cs-col-grigio.cs-tinta-scelta { background: rgba(130, 130, 130, .35); }
.cs-tav-azioni { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

/* la settimana sotto la tabella: com'e' impostata la chiusura fissa */
.cs-sett-righe { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-sett-giorno {
  border: 1px solid var(--bordo); border-radius: 10px; padding: 8px 10px;
  background: transparent; cursor: pointer; text-align: left; min-width: 104px;
  font: inherit; color: inherit;
}
.cs-sett-giorno .sotto { display: block; }
.cs-sett-giorno:hover { border-color: var(--blu); }

/* (13/10, regola dell'utente) "non devo spostarmi anche a destra e sinistra,
   basta in alto e basso": dentro una finestra non esiste lo scorrimento
   laterale. Le tabelle stanno nella larghezza che c'e', le parole lunghe
   vanno a capo, i numeri restano interi, i campi non sfondano il bordo. */
.domanda { overflow-x: hidden; }
.domanda input, .domanda select, .domanda textarea, .domanda img {
  max-width: 100%; box-sizing: border-box;
}
.domanda table { table-layout: fixed; width: 100%; }
.domanda .tabella.elenco td { padding: 10px 8px; overflow-wrap: anywhere; }
.domanda .tabella.elenco td.numero { white-space: nowrap; }
.corpo-modale.rubrica { max-width: 760px; }

/* lo scaduto: titolo largo, data stretta, importo e tasti al loro posto */
.cs-scadute td:nth-child(1) { width: 40%; }
.cs-scadute td:nth-child(2) { width: 22%; }
.cs-scadute td:nth-child(3) { width: 17%; }
.cs-scadute td:nth-child(4) { width: 21%; }
.cs-scadute .targhetta { white-space: normal; display: inline-block; }
.cs-scadute td:nth-child(4) button { width: 100%; margin: 0 0 4px; }

/* su uno schermo stretto quattro colonne non ci stanno: la riga si apre in
   verticale invece di stringersi fino a diventare illeggibile */
@media (max-width: 560px) {
  .cs-scadute, .cs-scadute tbody, .cs-scadute tr, .cs-scadute td {
    display: block; width: auto;
  }
  /* le larghezze in percentuale delle colonne qui non valgono piu' */
  .cs-scadute td:nth-child(1), .cs-scadute td:nth-child(2),
  .cs-scadute td:nth-child(3), .cs-scadute td:nth-child(4) { width: auto; }
  .cs-scadute tr { border-bottom: 1px solid var(--bordo); padding: 8px 0; }
  .cs-scadute td { border: 0; padding: 2px 0; }
  .cs-scadute td.numero { text-align: left; font-size: 1.05em; }
  .cs-scadute td:nth-child(4) { display: flex; gap: 6px; margin-top: 4px; }
  .cs-scadute td:nth-child(4) button { width: auto; flex: 1; margin: 0; }
}

/* la tabella del mese ha molte colonne: su uno schermo stretto si stringono
   i margini invece di mandare la pagina fuori squadra */
@media (max-width: 1100px) {
  .cs-mese td, .cs-mese th { padding-left: 8px; padding-right: 8px; }
}

/* (13/10, dall'utente) la fascia delle reco da chiamare: fissa in alto,
   sopra tutto, e non si chiude da sola - la telefonata o si fa o resta li'. */
#fascia-reco {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: var(--ambra-chiaro, #fdf3dd);
  border-bottom: 2px solid var(--ambra, #b7791f);
  color: #5a4300; padding: 8px 16px; font-size: 14px;
}
.fascia-reco-dentro {
  max-width: 1200px; margin: 0 auto; display: flex; gap: 10px;
  align-items: baseline; flex-wrap: wrap;
}
.fascia-reco-elenco { overflow-wrap: anywhere; }
body.con-fascia-reco { padding-top: 42px; }

/* (14/10) lette e da leggere si devono distinguere a colpo d'occhio */
.elenco-posta tr.riga-mail:not(.da-leggere) b { font-weight: 400; }
.elenco-posta tr.riga-mail:not(.da-leggere) .sotto { color: var(--tenue, #6b7280); }
.elenco-posta tr.da-leggere td:first-child { box-shadow: inset 3px 0 0 var(--blu, #2563eb); font-weight: 700; }
.elenco-posta .azioni-riga { white-space: nowrap; text-align: right; }

/* (14/10) l'andamento degli indici nei Confronti */
.grafico-indici .gx-testa { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.grafico-indici h3 { margin: 0; }
.gx-legenda { display: flex; gap: 14px; font-size: 12.5px; color: var(--inchiostro); }
.gx-legenda i, .gx-riquadro i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.gx-contenitore { position: relative; }
.grafico-ix { width: 100%; height: auto; display: block; }
.grafico-ix .gx-griglia { stroke: var(--bordo); stroke-width: 1; }
.grafico-ix .gx-base { stroke: var(--tenue); stroke-dasharray: 3 3; }
.grafico-ix .gx-asse { font-size: 11px; fill: var(--tenue); }
.grafico-ix .gx-etichetta { font-size: 12px; fill: var(--inchiostro); font-weight: 600; }
.grafico-ix .gx-mirino { stroke: var(--tenue); stroke-width: 1; }
.gx-riquadro { position: absolute; top: 8px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 8px;
  padding: 6px 10px; font-size: 12.5px; box-shadow: 0 4px 14px rgba(15, 20, 30, .12); pointer-events: none; white-space: nowrap; }

/* (14/10) il foglio di accesso da consegnare al dipendente: si vede solo in stampa */
#foglio-accesso { display: none; }
@media print {
  body.stampa-foglio > *:not(#foglio-accesso) { display: none !important; }
  body.stampa-foglio { background: #fff !important; }
  body.stampa-foglio #foglio-accesso { display: block; color: #111; font-size: 13pt; padding: 10mm 6mm; }
  #foglio-accesso .fa-testa { display: flex; align-items: center; gap: 8px; font-size: 14pt; border-bottom: 1px solid #ccc; padding-bottom: 6mm; }
  #foglio-accesso .fa-data { margin-left: auto; font-size: 10pt; color: #555; }
  #foglio-accesso h1 { font-size: 22pt; margin: 8mm 0 2mm; }
  #foglio-accesso h2 { font-size: 15pt; margin: 9mm 0 2mm; }
  #foglio-accesso .fa-per { margin: 0 0 6mm; }
  #foglio-accesso .fa-dati { border-collapse: collapse; width: 100%; }
  #foglio-accesso .fa-dati th, #foglio-accesso .fa-dati td { border: 1px solid #999; padding: 4mm 5mm; text-align: left; }
  #foglio-accesso .fa-dati th { width: 38%; font-weight: 600; background: #f3f3f3; }
  #foglio-accesso .fa-dati td { font-family: Consolas, "Courier New", monospace; font-size: 16pt; }
  #foglio-accesso .fa-pw { font-size: 20pt !important; letter-spacing: 2px; font-weight: 700; }
  #foglio-accesso .fa-nota { margin: 6mm 0 2mm; font-size: 11pt; color: #444; }
  #foglio-accesso .fa-caselle { display: flex; flex-wrap: wrap; gap: 2mm; }
  #foglio-accesso .fa-car { display: inline-flex; flex-direction: column; align-items: center; border: 1px solid #999;
    border-radius: 2mm; padding: 1.5mm 2mm; min-width: 13mm; }
  #foglio-accesso .fa-car b { font-family: Consolas, "Courier New", monospace; font-size: 18pt; }
  #foglio-accesso .fa-car i { font-style: normal; font-size: 7pt; color: #555; }
  #foglio-accesso ol { padding-left: 6mm; line-height: 1.5; }
  #foglio-accesso .fa-piede { margin-top: 10mm; font-size: 10pt; color: #444; border-top: 1px solid #ccc; padding-top: 4mm; }
  @page { size: A4; margin: 12mm; }
}

/* authenticator di scorta (15/10) */
.aut-passi { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bordo); max-width: 420px; }
.aut-qr { display: inline-block; padding: 10px; background: #fff; border: 1px solid var(--bordo); border-radius: 10px; margin: 4px 0 8px; }
.aut-qr img, .aut-qr canvas { display: block; }
#aut-elenco .tabella td:last-child { text-align: right; }
#aut-aggiungi { margin-top: 12px; }

/* scadenziario: ripetizioni previste (15/10) */
.sc-punto.previsto { background: var(--tenue); }
.cs-scheda.prevista { opacity: .75; }

/* ex dipendenti (16/10) */
.ex-pagina { max-width: 760px; margin: 0 auto; padding: 20px 16px 40px; }
.ex-testa { display: flex; align-items: baseline; gap: 6px; margin: 0 0 16px; color: var(--blu); }
.ex-testa #ex-esci { margin-left: auto; font-size: 14px; }
.ex-doc .azioni { margin-top: 10px; }
.ex-cartacea { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bordo); }
.ex-scarica { display: inline-block; margin-top: 10px; text-decoration: none; }

/* ===== (16/10) Produzione > Preventivi > Reco ===== */
.rc-regole summary { cursor: pointer; font-weight: 600; color: var(--inchiostro); }
.rc-regole p { margin: 8px 0 0; font-size: 13.5px; color: var(--grigio); }
.rc-elenco { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 12px; font-size: 14px; }
.rc-elenco th { text-align: right; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tenue); font-weight: 500; padding: 6px 4px; border-bottom: 1px solid var(--bordo); }
.rc-elenco th:first-child { text-align: left; width: 58%; }
.rc-elenco td { padding: 6px 4px; border-bottom: 1px solid var(--bordo); text-align: right; white-space: nowrap; }
.rc-elenco td:first-child { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.rc-elenco td .spunta { font-size: 14px; color: var(--inchiostro); align-items: flex-start; }
.rc-elenco tr.rc-spento td { color: var(--tenue); }
.rc-elenco tfoot td { font-weight: 600; border-bottom: 0; color: var(--inchiostro); }
.rc-rilancio { margin-top: 14px; flex-wrap: wrap; }
.rc-schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 10px; }
.rc-scheda { border: 1px solid var(--bordo); border-radius: 10px; padding: 12px 14px; background: var(--carta); }
.rc-scheda h3 { margin: 0 0 8px; font-size: 15px; color: var(--blu); }
.rc-conto { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rc-conto td { padding: 3px 0; color: var(--grigio); }
.rc-conto td:last-child { text-align: right; white-space: nowrap; color: var(--inchiostro); }
.rc-conto tr.rc-totale td { font-weight: 700; color: var(--inchiostro); border-top: 1px solid var(--bordo); padding-top: 6px; }
.rc-conto tr.rc-meno td { color: var(--verde); }
.rc-risparmio { margin: 10px 0 4px; padding: 8px 10px; border-radius: 8px; background: var(--verde-chiaro);
  color: var(--verde); font-size: 13.5px; display: flex; justify-content: space-between; gap: 8px; }
.rc-scheda .rc-stampa { margin-top: 8px; width: 100%; }
.rc-imp-testa, .rc-imp-riga { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr) 60px 74px;
  gap: 6px; align-items: center; }
.rc-imp-testa { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue); margin-bottom: 4px; }
.rc-imp-riga { padding: 4px 0; border-bottom: 1px solid var(--bordo); }
.rc-imp-riga input:not([type=checkbox]) { width: 100%; min-width: 0; margin: 0; }
.rc-imp-azioni { display: flex; gap: 4px; justify-content: flex-end; }
.rc-solo-telefono { display: none; }
.rc-sconti { display: flex; flex-wrap: wrap; gap: 10px; }
.rc-sconto { display: flex; align-items: center; gap: 6px; border: 1px solid var(--bordo); border-radius: 8px; padding: 6px 8px; }
.rc-sconto input[data-k=pct] { width: 64px; margin: 0; }
.rc-corto { max-width: 100px; }
#rc-regole { width: 100%; }
@media (max-width: 620px) {
  .rc-imp-testa { display: none; }
  .rc-imp-riga { grid-template-columns: 1fr 1fr 1fr; padding: 10px 0; }
  .rc-imp-riga input[data-k=nome] { grid-column: 1 / -1; }
  .rc-imp-riga input[data-k=gruppo] { grid-column: 1 / 3; }
  .rc-solo-telefono { display: inline; }
  .rc-elenco th:first-child { width: 50%; }
}

/* (16/10) Ex dipendenti: la situazione di una persona */
.exa-situa { max-width: 640px; max-height: 88vh; }
.exa-risposte { display: grid; gap: 8px; margin: 10px 0 14px; }
.exa-risposte > div { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
  padding: 10px 12px; border: 1px solid var(--bordo); border-radius: 10px; }
.exa-risposte b { min-width: 110px; }
.exa-doc { padding: 8px 0; border-bottom: 1px solid var(--bordo); overflow-wrap: anywhere; }
.exa-eventi { list-style: none; padding: 0; margin: 6px 0 12px; font-size: 13.5px; }
.exa-eventi li { padding: 5px 0; border-bottom: 1px solid var(--bordo); overflow-wrap: anywhere; }

/* (16/10) i tasti di un ex dipendente: tre uguali, sotto "Visualizza
   situazione" lungo quanto i tre insieme */
.exa-azioni { display: grid; grid-template-columns: repeat(3, auto); gap: 6px; justify-content: end; }
.exa-tasto { display: inline-flex; align-items: center; justify-content: center; margin: 0;
  padding: 5px 12px; font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.2; color: var(--grigio);
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 8px; cursor: pointer;
  text-decoration: none; white-space: nowrap; }
.exa-tasto:hover { border-color: var(--tenue); color: var(--inchiostro); }
.exa-tasto.pericolo { color: var(--rosso); border-color: #f2d4d1; }
.exa-tasto.pericolo:hover { background: #fdf2f1; border-color: var(--rosso); }
.exa-tasto.exa-vedi { grid-column: 1 / -1; color: var(--blu); background: var(--blu-chiaro); border-color: #d7d2f7; }
.exa-tasto.exa-vedi:hover { border-color: var(--blu); color: var(--blu-scuro); }
.exa-riga { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--bordo); }
.exa-riga:last-child { border-bottom: 0; }
.exa-chi { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }

/* (16/10) Store Time > La mia posizione */
.mp-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mp-testa h2 { margin: 0; text-transform: capitalize; }
.mp-testa .lieve { min-width: 40px; font-size: 18px; padding: 2px 10px; }
.mp-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 14px; }
.mp-numeri > div { border: 1px solid var(--bordo); border-radius: 10px; padding: 10px 12px; }
.mp-numeri span { display: block; font-size: 12px; color: var(--tenue); }
.mp-numeri b { font-size: 20px; color: var(--inchiostro); }
.mp-numeri b.mp-meno { color: var(--rosso); }
.mp-assenze { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.mp-giorni { display: grid; }
.mp-giorno { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--bordo); font-size: 13.5px; }
.mp-giorno.oggi { background: var(--blu-chiaro); }
.mp-giorno:last-child { border-bottom: 0; }
.mp-data { color: var(--grigio); font-weight: 500; }
.mp-dett { overflow-wrap: anywhere; }
.mp-ore { text-align: right; white-space: nowrap; }