/* Gestionale 27 - grafica ispirata a M_Clienti di Access, pensata per mezzo schermo */
:root {
  color-scheme: only light;
  --sfondo: #dfe7f1;
  --carta: #ffffff;
  --testo: #1d2430;
  --tenue: #5d6878;
  --bordo: #b9c6d6;
  --blu: #22426b;          /* pulsanti scuri della barra */
  --scheda: #dbe8f8;       /* pulsanti schede */
  --scheda-attiva: #f7c89b;
  --rosa: #f6b3f2;         /* fascia nome e luce */
  --rosa-forte: #f08ae9;
  --azzurro: #b7dcfb;      /* gas */
  --verde: #9ed36a;        /* offerta disponibile */
  --verde-scuro: #0f6b2a;
  --giallo: #fdf6b5;
  --rosso: #c62828;
  --raggio: 6px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.35;
}
button, input, select { font: inherit; color: inherit; }
.caricamento { padding: 40px 16px; text-align: center; color: var(--tenue); }

/* ---------- Accesso ---------- */
.accesso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.accesso-box { width: 100%; max-width: 380px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 28px 22px; }
.accesso-box h1 { margin: 0 0 6px; font-size: 1.4rem; color: var(--blu); }
.accesso-box p { margin: 0 0 14px; color: var(--tenue); }
.campo { display: block; margin-bottom: 14px; }
.campo span { display: block; font-size: .85rem; color: var(--tenue); margin-bottom: 4px; }
.campo input { width: 100%; padding: 11px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: #f7f9fc; }
.pulsante { width: 100%; padding: 11px; border: 0; border-radius: var(--raggio); background: var(--blu); color: #fff; font-weight: 600; cursor: pointer; }
.pulsante:disabled { opacity: .6; }
.link { background: none; border: 0; color: var(--blu); padding: 8px 0; cursor: pointer; font-size: .9rem; text-decoration: underline; }
.messaggio { margin-top: 12px; font-size: .9rem; color: var(--tenue); }
.messaggio.errore { color: var(--rosso); }

/* ---------- Barra in alto ---------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--sfondo); border-bottom: 1px solid var(--bordo);
}
.operatore {
  min-width: 44px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: #f8d7d7; border: 1px solid #c99; border-radius: var(--raggio); font-weight: 700; font-size: 1.1rem;
}
.ricerca-box { position: relative; flex: 1; }
.cerca { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--carta); }
.cerca:focus { outline: 2px solid var(--blu); outline-offset: 0; }
.tendina {
  position: absolute; left: 0; right: 0; top: 42px; z-index: 30;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  max-height: 60vh; overflow-y: auto; box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.tendina:empty { display: none; }
.tendina .voce { padding: 8px 12px; border-bottom: 1px solid #eef2f7; cursor: pointer; }
.tendina .voce:hover, .tendina .voce.evidenziata { background: #eef4fb; }
.tendina .voce .n { font-weight: 600; }
.tendina .voce .d { font-size: .8rem; color: var(--tenue); }
.tendina .info { padding: 10px 12px; color: var(--tenue); font-size: .9rem; }
.btn-scuro {
  height: 38px; padding: 0 12px; border: 0; border-radius: var(--raggio);
  background: var(--blu); color: #fff; font-weight: 600; cursor: pointer; font-size: .85rem;
}

/* ---------- Contenitore: mezzo schermo ---------- */
.pagina { padding: 10px; max-width: 1000px; }
.vuoto { color: var(--tenue); padding: 30px 8px; text-align: center; }

/* ---------- Testata cliente ---------- */
.testata { display: grid; grid-template-columns: 1fr 300px; gap: 10px; align-items: start; }
.schede { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.schede button {
  flex: 1 1 auto; padding: 9px 10px; border: 1px solid #8fa7c4; border-radius: var(--raggio);
  background: var(--scheda); font-weight: 600; font-size: .85rem; letter-spacing: .02em; cursor: pointer; color: var(--blu);
}
.schede button.attiva { background: var(--scheda-attiva); border-color: #d89a5e; color: #5a3410; }
.fascia {
  border: 1px solid var(--rosa-forte); background: var(--rosa); border-radius: 4px;
  padding: 7px 10px; text-align: center; font-weight: 700; margin-bottom: 6px;
}
.fascia.nome { font-size: 1.15rem; }
.fascia.contatti { font-size: .95rem; font-weight: 600; }
.fascia .archiviato { background: #777; color: #fff; border-radius: 4px; padding: 0 6px; font-size: .75rem; margin-left: 6px; vertical-align: middle; }

.relazioni { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.relazioni h3 { margin: 0; padding: 6px 10px; font-size: .85rem; letter-spacing: .04em; border-bottom: 1px solid var(--bordo); }
.relazioni ul { list-style: none; margin: 0; padding: 0; max-height: 150px; overflow-y: auto; }
.relazioni li { padding: 5px 10px; border-bottom: 1px solid #eef2f7; font-size: .85rem; cursor: pointer; }
.relazioni li:hover { background: #eef4fb; }
.relazioni li .tipo { color: var(--tenue); }
.relazioni .nessuna { padding: 8px 10px; color: var(--tenue); font-size: .85rem; }

/* ---------- Riquadri e tabelle ---------- */
.riquadro { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); margin-top: 10px; }
.riquadro > h3 { margin: 0; padding: 7px 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); border-bottom: 1px solid var(--bordo); }
.scorre { overflow-x: auto; }
table.dati { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.dati th { text-align: left; font-size: .72rem; color: var(--tenue); font-weight: 600; padding: 5px 6px; border-bottom: 1px solid var(--bordo); white-space: nowrap; background: #f3f6fa; }
table.dati td { padding: 5px 6px; border-bottom: 1px solid #edf1f6; vertical-align: middle; }
table.dati tr.selezionabile { cursor: pointer; }
table.dati tr.selezionata td { background: #fff7d6; }
.num { color: var(--tenue); font-variant-numeric: tabular-nums; }
.pod { background: #fde3fb; border-radius: 4px; padding: 2px 6px; font-family: inherit; font-size: .82rem; }
.pdr { background: #e1f0fd; border-radius: 4px; padding: 2px 6px; font-family: inherit; font-size: .82rem; }
.spunta { width: 16px; height: 16px; accent-color: var(--blu); pointer-events: none; }

/* ---------- Griglia offerte ---------- */
.offerte { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 10px; }
.offerte label.k { display: block; font-size: .72rem; font-weight: 700; color: var(--blu); text-transform: uppercase; margin-bottom: 4px; }
.offerte select, .offerte input[type=search] { width: 100%; padding: 7px 8px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: #fff; }
.categoria select { background: var(--rosa); font-weight: 600; }
.griglia-box { max-height: 300px; overflow: auto; border: 1px solid var(--bordo); border-radius: 4px; margin-top: 6px; }
table.griglia { border-collapse: collapse; width: 100%; font-size: .8rem; }
table.griglia th { position: sticky; top: 0; z-index: 1; background: #f3f6fa; font-size: .68rem; color: var(--tenue); padding: 4px 2px; border-bottom: 1px solid var(--bordo); text-align: center; line-height: 1.1; }
table.griglia th.sx { text-align: left; padding-left: 6px; }
table.griglia td { border: 1px solid #c8d4e2; padding: 0; height: 34px; }
table.griglia td.offerta { background: #ececec; padding: 3px 6px; min-width: 210px; }
table.griglia td.tipo { text-align: center; font-weight: 700; width: 40px; }
table.griglia td.tipo.ele { background: var(--rosa); }
table.griglia td.tipo.gas { background: var(--azzurro); }
table.griglia td.cella { width: 52px; background: #dbe6f3; }
table.griglia td.cella.si { background: var(--verde); cursor: pointer; text-align: center; font-size: .7rem; font-weight: 600; line-height: 1.1; }
table.griglia td.cella.si:hover { outline: 2px solid var(--verde-scuro); outline-offset: -2px; }

.dual-rientro { display: grid; grid-template-columns: 1fr 200px; gap: 10px; padding: 0 10px 10px; }
.dual { display: flex; border: 1px solid #e0c600; background: var(--giallo); border-radius: 4px; overflow: hidden; font-size: .78rem; min-height: 40px; }
.dual .t { padding: 6px; font-weight: 700; width: 70px; text-align: center; display: flex; align-items: center; }
.dual .ele { flex: 1; background: var(--rosa); padding: 6px; color: #7a2d75; }
.dual .gas { flex: 1; background: var(--azzurro); padding: 6px; color: #1f4f7a; }
.rientro { font-size: .78rem; color: var(--tenue); }
.rientro .riga { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.rientro input { width: 60px; padding: 4px; border: 1px solid var(--bordo); border-radius: 4px; text-align: center; background: #eee; }
.rientro button { padding: 4px 8px; border: 1px solid var(--bordo); border-radius: 4px; background: #f3f6fa; font-size: .75rem; cursor: not-allowed; color: var(--tenue); }
.fase2 { font-size: .72rem; color: var(--tenue); font-style: italic; padding: 0 10px 8px; }

/* ---------- Operazioni ---------- */
.tipologia { padding: 2px 5px; border-radius: 3px; font-weight: 600; }
.tipologia.ele { background: var(--rosa); }
.tipologia.gas { background: var(--azzurro); }
.tipologia.dual { background: linear-gradient(90deg, var(--rosa) 50%, var(--azzurro) 50%); }
.stato { display: inline-block; padding: 2px 6px; border-radius: 3px; white-space: nowrap; border: 1px solid #ccd; background: #fff; }
.stato.annullato { background: var(--verde-scuro); color: #fff; border-color: var(--verde-scuro); }
.stato.completato { background: #dfe7ef; }
.cte { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Scheda Cliente ---------- */
.griglia-dati { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; padding: 10px; }
.dato .k { font-size: .72rem; color: var(--tenue); }
.dato .v { word-break: break-word; }
.recapiti { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
.recapiti a { text-decoration: none; color: var(--testo); border: 1px solid var(--bordo); border-radius: 6px; padding: 5px 9px; font-size: .88rem; background: #f7f9fc; }
.recapiti a .tipo { color: var(--tenue); font-size: .72rem; margin-right: 5px; }

/* ---------- Avviso ---------- */
.avviso {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50;
  background: #263247; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: .9rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 90vw;
}

/* ---------- Schermi stretti (cellulare) ---------- */
@media (max-width: 700px) {
  .testata { grid-template-columns: 1fr; }
  .offerte { grid-template-columns: 1fr; }
  .dual-rientro { grid-template-columns: 1fr; }
  .schede button { font-size: .75rem; padding: 8px 6px; }
  .barra .esci-testo { display: none; }
}

/* ---------- Finestra sopra la pagina (cambio password) ---------- */
.finestra {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 30, 45, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}

/* ---------- Barra di navigazione come in Access ---------- */
.nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.nav button {
  height: 38px; min-width: 58px; padding: 0 9px; border: 0; border-radius: var(--raggio);
  background: var(--blu); color: #fff; font-weight: 700; font-size: .75rem; line-height: 1.05;
  cursor: pointer; text-transform: uppercase;
}
.nav button.attivo { outline: 3px solid #f7c89b; outline-offset: -3px; }
.nav button.chat { background: #c62828; }
.nav button.archivia { background: #8fb0d8; color: #12305a; font-size: 1rem; min-width: 40px; }
.barra .servizio { display: flex; gap: 4px; }
.barra .servizio .btn-scuro { background: #5b6f8a; }

/* ---------- Pagine elenco (FrontOffice, BackOffice, ...) ---------- */
.ricerca-pagina { position: relative; margin-bottom: 10px; }
.ricerca-pagina .tendina { top: 42px; }
.titolo-pagina { font-size: 1.1rem; font-weight: 700; color: var(--blu); margin: 4px 0 10px; }

/* ---------- Colori dei campi (stessa regola di Access) ----------
   bianco  = campo vuoto (da compilare)
   giallo  = campo dove si sta scrivendo
   grigio  = campo compilato                                     */
:root { --campo-vuoto: #ffffff; --campo-focus: #fff7b8; --campo-pieno: #e1e1e1; }
input[type=text], input[type=search], input[type=email], input[type=password], input:not([type]), select, textarea {
  background: var(--campo-vuoto) !important;
}
input:not(:placeholder-shown), textarea:not(:placeholder-shown) { background: var(--campo-pieno) !important; }
select:has(option:checked:not([value=""])) { background: var(--campo-pieno) !important; }
input:focus, select:focus, textarea:focus { background: var(--campo-focus) !important; }

/* Campi in sola lettura: stessa regola, grigio se compilato, bianco se manca */
.campi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 12px; padding: 10px; }
.campo-v .k { font-size: .72rem; color: var(--tenue); margin-bottom: 2px; }
.campo-v .v {
  min-height: 30px; padding: 5px 8px; border: 1px solid var(--bordo); border-radius: 4px;
  background: var(--campo-pieno); word-break: break-word;
}
.campo-v.vuoto .v { background: var(--campo-vuoto); border-color: #e08b8b; }
.campo-v.largo { grid-column: 1 / -1; }

/* Pulsanti piccoli A / C / V / E */
.mini {
  width: 26px; height: 24px; border: 1px solid #8fa7c4; border-radius: 4px; background: var(--scheda);
  color: var(--blu); font-weight: 700; font-size: .8rem; cursor: pointer; padding: 0;
}
.fascia-riga { display: flex; gap: 6px; align-items: stretch; }
.fascia-riga .fascia { flex: 1; }
.fascia-riga .mini { width: 34px; height: auto; margin-bottom: 6px; background: #9ed36a; border-color: #6aa23a; }
.relazioni li { display: flex; align-items: center; gap: 6px; }
.relazioni li .testo { flex: 1; }

/* =====================================================================
   Sfondi grigi ovunque: il bianco resta solo ai campi vuoti da compilare
   ===================================================================== */
:root {
  --sfondo: #cfd3d8;
  --carta: #e4e6e9;
  --bordo: #b3b8bf;
  --grigio-testa: #d3d7dc;
}
.riquadro, .relazioni, .tendina, .accesso-box { background: var(--carta); }
.riquadro > h3 { background: var(--grigio-testa); }
table.dati th { background: var(--grigio-testa); }
table.dati td { border-bottom-color: #cdd1d6; }
table.dati tr.selezionata td { background: #c9ced5; font-weight: 600; }
.tendina .voce { border-bottom-color: #d0d4d9; }
.tendina .voce:hover, .tendina .voce.evidenziata { background: #d3d8de; }
.recapiti a { background: var(--campo-pieno); }
.vuoto { background: transparent; }

/* Relazioni nello stesso rosa della fascia nome */
.relazioni { background: var(--rosa); border-color: var(--rosa-forte); }
.relazioni h3 { border-bottom-color: var(--rosa-forte); }
.relazioni li { border-bottom-color: #ea9ee4; }
.relazioni li:hover { background: #f19fea; }
.relazioni .mini { background: #fbe0f9; border-color: var(--rosa-forte); }

/* Griglia offerte in grigio */
table.griglia th { background: var(--grigio-testa); }
table.griglia td { border-color: #bfc4ca; }
table.griglia td.offerta { background: #dadde1; }
table.griglia td.cella { background: #cbd0d6; }

/* Nuovo contratto compatto: altezza massima 10 cm */
.nuovo-contratto { max-height: 10cm; display: flex; flex-direction: column; overflow: hidden; }
.nc-testa { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: var(--grigio-testa); border-bottom: 1px solid var(--bordo); flex-wrap: wrap; }
.nc-titolo { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); }
.nc-testa label { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--blu); text-transform: uppercase; }
.nc-testa select, .nc-testa input { padding: 4px 6px; border: 1px solid var(--bordo); border-radius: 4px; font-size: .85rem; text-transform: none; font-weight: 400; color: var(--testo); }
.nc-cat select { min-width: 120px; }
.nc-cte { flex: 1; min-width: 160px; }
.nc-cte input { flex: 1; width: 100%; }
.nuovo-contratto .griglia-box { flex: 1 1 auto; min-height: 0; max-height: none; margin: 0; border: 0; border-radius: 0; overflow: auto; }
.nuovo-contratto table.griglia td { height: 26px; }
.nuovo-contratto table.griglia td.offerta { padding: 2px 6px; }
.nuovo-contratto .dual-rientro { display: flex; gap: 8px; padding: 5px 8px; border-top: 1px solid var(--bordo); background: var(--grigio-testa); align-items: center; }
.nuovo-contratto .dual { flex: 1; min-height: 26px; font-size: .72rem; }
.nuovo-contratto .dual .t { width: 46px; padding: 3px; }
.nuovo-contratto .dual .ele, .nuovo-contratto .dual .gas { padding: 4px 6px; }
.nuovo-contratto .rientro { display: flex; align-items: center; gap: 4px; font-size: .72rem; white-space: nowrap; }
.nuovo-contratto .rientro input { width: 44px; padding: 2px; }
.nuovo-contratto .rientro button { padding: 3px 6px; }
@media (max-width: 700px) {
  .nuovo-contratto { max-height: none; }
  .nuovo-contratto .griglia-box { max-height: 8cm; }
  .nuovo-contratto .dual-rientro { flex-wrap: wrap; }
}

/* ---------- Tabella forniture: POD azzurro, PDR rosa ---------- */
table.forniture { table-layout: fixed; }
table.forniture col.c-stampa { width: 52px; }
table.forniture col.c-num { width: 62px; }
table.forniture col.c-civico { width: 50px; }
table.forniture col.c-attivo { width: 48px; }
table.forniture col.c-codice { width: 170px; }
table.forniture td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.forniture th.centro, table.forniture td.centro { text-align: center; padding-left: 2px; padding-right: 2px; }
table.forniture td.centro + td { padding-left: 2px; }
.codice {
  display: block; min-height: 24px; padding: 3px 6px; border-radius: 4px; border: 1px solid transparent;
  font-family: inherit; font-size: .82rem; overflow: hidden; text-overflow: ellipsis;
}
.codice.pod { background: var(--azzurro); border-color: #8cc3f0; }
.codice.pdr { background: var(--rosa); border-color: var(--rosa-forte); }
.codice.manca { background: var(--campo-vuoto); border-color: #e08b8b; }
.spunta-pod { accent-color: #3d8fd6; }
.spunta-pdr { accent-color: #d653cc; }

/* ---------- Correzioni: luce rosa, gas azzurro (come in Access) ---------- */
.codice.pod { background: var(--rosa); border-color: var(--rosa-forte); }
.codice.pdr { background: var(--azzurro); border-color: #8cc3f0; }
.codice.manca { background: var(--campo-vuoto); border-color: #e08b8b; }
.spunta-pod { accent-color: #d653cc; }
.spunta-pdr { accent-color: #3d8fd6; }

/* Nuovo contratto: altri 3 cm in meno (massimo 7 cm) */
.nuovo-contratto { max-height: 7cm; }

/* Relazioni: 2 cm più bassa e pulsante Nuova */
.relazioni ul { max-height: calc(150px - 2cm); }
.relazioni h3 { display: flex; align-items: center; gap: 8px; }
.relazioni .nuova {
  margin-left: auto; padding: 2px 10px; border: 1px solid var(--rosa-forte); border-radius: 4px;
  background: #fbe0f9; color: var(--blu); font-weight: 700; font-size: .78rem; cursor: pointer;
}

/* Relazioni: 0,8 cm più alta */
.relazioni ul { max-height: calc(150px - 1.2cm); }

/* Relazioni: elenco interno 2 mm più basso */
.relazioni ul { max-height: calc(150px - 1.4cm); }

/* Carattere simile a quello dell'interfaccia di Claude (quello originale non e' disponibile) */
html, body, button, input, select, textarea { font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* =====================================================================
   Parte alta: a sinistra barra, schede e fasce; a destra le relazioni
   a tutta altezza. Pulsanti blu più chiari. Esci in fondo alla barra.
   ===================================================================== */
:root { --blu-pulsante: #456f9f; }
.guscio {
  display: grid; max-width: 1000px; padding: 0 10px 10px; column-gap: 10px;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: "barra barra" "testa rel" "pagina pagina" "piede piede";
}
.guscio.senza-cliente { grid-template-areas: "barra barra" "testa testa" "pagina pagina" "piede piede"; }
.guscio > .piede-cliente { grid-area: piede; }
.guscio.senza-cliente .box-relazioni { display: none; }
.guscio > .barra { grid-area: barra; position: static; background: transparent; border-bottom: 0; padding: 8px 0; }
.guscio > .testata-cliente { grid-area: testa; }
.guscio > .box-relazioni { grid-area: rel; position: relative; margin-top: 0; min-height: 120px; }
.guscio > .pagina { grid-area: pagina; padding: 0; max-width: none; }
.box-relazioni .relazioni { position: absolute; inset: 0 0 6px 0; display: flex; flex-direction: column; }
.box-relazioni .relazioni ul { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }

.nav button { background: var(--blu-pulsante); }
.nav button.chat { background: #d33b3b; }
.nav button.archivia { background: #9fbbdc; color: #12305a; }
.nav button.esci { margin-left: auto; background: #6b7d93; text-transform: none; }

@media (max-width: 700px) {
  .guscio, .guscio.senza-cliente { grid-template-columns: 1fr; grid-template-areas: "barra" "testa" "rel" "pagina" "piede"; }
  .guscio > .box-relazioni { min-height: 0; margin-bottom: 8px; }
  .box-relazioni .relazioni { position: static; }
  .box-relazioni .relazioni ul { max-height: 140px; }
}

/* ---------- Pulsanti della matrice offerte e della zona DUAL ---------- */
table.griglia td.cella { padding: 2px; text-align: center; }
.btn-matrice {
  width: 100%; height: 100%; min-height: 22px; padding: 1px 2px; border: 1px solid #5f9b34; border-radius: 4px;
  background: linear-gradient(#b4e283, #8cc95a); color: #1f3d0c; font-weight: 700; font-size: .66rem; line-height: 1.05;
  cursor: pointer; box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.btn-matrice:hover { background: linear-gradient(#c4ec98, #9bd66a); }
.btn-matrice:active { transform: translateY(1px); box-shadow: none; }
.btn-matrice:disabled { background: #d3d7dc; border-color: #b9bec5; color: #9aa1aa; cursor: default; box-shadow: none; }
table.griglia td.offerta { cursor: default; user-select: none; }
table.griglia td.offerta.scelta-dual { background: #fff1a8; font-weight: 700; }

.nuovo-contratto .dual { align-items: stretch; }
.nuovo-contratto .dual .ele, .nuovo-contratto .dual .gas { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.nuovo-contratto .dual b { overflow: hidden; text-overflow: ellipsis; }
.dual .togli { cursor: pointer; font-weight: 700; padding: 0 3px; }
.dual-pulsanti { display: flex; gap: 2px; padding: 2px; background: var(--giallo); }
.dual-pulsanti .btn-matrice { width: 46px; min-height: 26px; }

/* ---------- Codice operatore con menu (nome + Esci) ---------- */
.operatore-box { position: relative; }
button.operatore { cursor: pointer; font-family: inherit; color: var(--testo); }
button.operatore:hover { background: #f4c4c4; }
.menu-operatore {
  position: absolute; top: 44px; left: 0; z-index: 40; min-width: 170px;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 6px;
}
.menu-operatore[hidden] { display: none; }
.menu-operatore .nome-operatore { padding: 4px 6px 8px; font-weight: 700; border-bottom: 1px solid var(--bordo); margin-bottom: 6px; }
.menu-operatore button {
  width: 100%; text-align: left; padding: 7px 8px; border: 0; border-radius: 4px;
  background: transparent; cursor: pointer; font-weight: 600; color: var(--blu);
}
.menu-operatore button:hover { background: var(--grigio-testa); }

/* Righe della griglia offerte: rosa se luce, azzurra se gas */
table.griglia tr.riga-ele td.offerta, table.griglia tr.riga-ele td.cella { background: #f8cdf5; }
table.griglia tr.riga-gas td.offerta, table.griglia tr.riga-gas td.cella { background: #cfe6fb; }
table.griglia tr td.offerta.scelta-dual { background: #fff1a8; }

/* A di archivia cliente: stesso colore e bordo della A delle operazioni */
.nav button.archivia { background: var(--scheda); color: var(--blu); border: 1px solid #8fa7c4; }
.nav button.archivia:hover { background: #cddff5; }

/* Bordo della casella PDR sempre blu, anche quando e' vuota */
.codice.pdr, .codice.pdr.manca { border-color: #3d8fd6; }

/* Tabella forniture: nomi dei campi centrati sulle colonne */
table.forniture th { text-align: center; }

/* Intestazioni della griglia cliccabili: filtro per richiesta e per Ele/Gas (verde = filtro attivo) */
table.griglia th.filtro-col { cursor: pointer; }
table.griglia th.filtro-col:hover { background: #c3c9d0; }
table.griglia th.filtro-col.acceso { background: #92d050; color: #1f3d0c; }
table.griglia th.filtro-tip span { display: inline-block; padding: 1px 3px; border-radius: 3px; cursor: pointer; }
table.griglia th.filtro-tip span:hover { background: #c3c9d0; }
table.griglia th.filtro-tip span.acceso { background: #92d050; color: #1f3d0c; }

/* Spunta Stampa cliccabile, riga offerta selezionata, campo giorni rientro */
input.spunta-stampa { width: 16px; height: 16px; accent-color: var(--blu); cursor: pointer; }
table.griglia tr.selezionata td.offerta { outline: 2px solid var(--blu); outline-offset: -2px; font-weight: 700; }
.nuovo-contratto .rientro input { background: var(--campo-pieno); }
.nuovo-contratto .rientro button { cursor: pointer; color: var(--blu); font-weight: 600; }
.nuovo-contratto .rientro button:disabled { cursor: wait; opacity: .6; }

/* ---------- Lista operazioni modificabile ---------- */
.ope-testa { display: flex; align-items: center; gap: 12px; padding: 6px 8px; background: var(--grigio-testa); border-bottom: 1px solid var(--bordo); }
.ope-testa label { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--blu); text-transform: uppercase; }
.ope-testa select { padding: 3px 6px; border: 1px solid var(--bordo); border-radius: 4px; font-size: .85rem; text-transform: none; font-weight: 400; }
select.stato-sel { padding: 2px 4px; border: 1px solid #ccd; border-radius: 3px; font-size: .82rem; background: #fff !important; }
select.stato-sel.annullato { background: var(--verde-scuro) !important; color: #fff; border-color: var(--verde-scuro); }
select.stato-sel.completato { background: #dfe7ef !important; }
td.nota { cursor: text; min-width: 60px; }
td.nota:hover { outline: 1px dashed var(--bordo); outline-offset: -2px; }
.nota-box { max-width: 520px; }
.nota-box textarea { width: 100%; padding: 8px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; resize: vertical; }
.nota-pulsanti { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.nota-pulsanti .pulsante { width: auto; padding: 8px 20px; }

/* Spunte Attivo luce/gas modificabili */
input.spunta-attivo { width: 16px; height: 16px; cursor: pointer; }

/* Colonna CTE delle operazioni su due righe, piu' stretta */
table.operazioni td.cte {
  max-width: 190px; min-width: 120px; white-space: normal; line-height: 1.2; font-size: .8rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
table.operazioni td.cte.nota { max-width: 120px; }

/* Correzione: la cella resta una cella di tabella, si accorcia il contenuto */
table.operazioni td.cte { display: table-cell; -webkit-line-clamp: unset; overflow: visible; }
table.operazioni td.cte .due-righe {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  white-space: normal; word-break: break-word; line-height: 1.2;
}
table.operazioni td.cte.nota { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Note FO: colonna stretta, gialla se c'e' una nota, un clic apre la finestra */
table.operazioni td.cte.nota { max-width: 70px; min-width: 50px; width: 60px; cursor: pointer; font-size: .75rem; }
table.operazioni td.cte.nota.piena { background: #ffd500; font-weight: 600; }

/* Precedente fornitore: campo modificabile; bianco se obbligatorio e vuoto */
input.campo-prec {
  width: 100px; padding: 3px 5px; border: 1px solid var(--bordo); border-radius: 3px; font-size: .82rem;
}
input.campo-prec.obbligatorio { background: var(--campo-vuoto) !important; border-color: #e08b8b; }
input.campo-prec:not(.obbligatorio):placeholder-shown { background: var(--campo-pieno) !important; }
input.campo-prec:focus { background: var(--campo-focus) !important; }

/* Prec.Forn in sola lettura: casella grigia, bianca se obbligatoria e vuota */
span.campo-prec {
  display: block; min-width: 70px; max-width: 110px; min-height: 22px; padding: 2px 5px;
  border: 1px solid var(--bordo); border-radius: 3px; background: var(--campo-pieno);
  font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
span.campo-prec.obbligatorio { background: var(--campo-vuoto); border-color: #e08b8b; }

/* Note FO larga 2 cm; CTE 2 cm piu' larga */
table.operazioni td.cte.nota { width: 2cm; min-width: 2cm; max-width: 2cm; }
table.operazioni td.cte:not(.nota) { max-width: calc(190px + 2cm); min-width: calc(120px + 2cm); }

/* Prec.Forn di nuovo modificabile */
input.campo-prec { width: 105px; min-height: 24px; cursor: text; }

/* Tasti documenti C / V / E */
.doc-tasti { display: inline-flex; gap: 2px; }
.mini.doc { width: 22px; height: 22px; font-size: .72rem; }
.mini.doc.presente { background: #92d050; border-color: #5f9b34; color: #1f3d0c; cursor: default; }

/* =====================================================================
   SCHEDA FORNITURA UNICA (uguale in Contratti e Forniture)
   ===================================================================== */
.forn-griglia { display: grid; gap: 3px; align-items: center; }
.forn-griglia.testa { grid-template-columns: minmax(130px, 2fr) 71px minmax(100px, 1.2fr) 48px 34px 118px 52px; }
/* POD/PDR 3 cm piu' stretto, Fornitore 1,5 cm piu' stretto, Consumo 0,5 cm piu' largo */
.forn-griglia.serv  { grid-template-columns: 58px 62px 46px 110px 81px 45px 150px 93px 44px 112px; width: max-content; margin-left: auto; }
.forn-intest { display: flex; padding-right: 5px; padding-left: 0; font-size: .68rem; font-weight: 600; color: var(--tenue); margin-bottom: 2px; }
.forn-intest .forn-griglia span { white-space: nowrap; overflow: hidden; }
.forn-intest .testa { color: var(--blu); }
.forn-intest .serv { margin-top: 1px; font-weight: 500; font-style: italic; }
.centro { text-align: center; }

.forn { display: flex; gap: 4px; margin-bottom: 6px; padding: 4px; border: 1px solid var(--bordo); border-radius: 6px; background: var(--grigio-testa); }
.forn.in-stampa { border: 2px solid #2f8a3a; padding: 3px; }
.forn.archiviata { opacity: .65; }
.forn.archiviata .forn-corpo { pointer-events: none; }
.forn-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.forn .forn-a { width: 26px; height: auto; align-self: stretch; font-size: 1rem; }
.forn .forn-a:disabled { opacity: .4; cursor: default; }
.forn-n { font-weight: 700; color: var(--blu); font-size: .8rem; }

.forn input.cf, .forn select.cf {
  width: 100%; min-width: 0; height: 24px; padding: 1px 5px; font: inherit; font-size: .8rem;
  border: 1px solid var(--bordo); border-radius: 3px;
}
.forn select.cf { padding: 0 2px; }
.forn input.cf { text-align: center; }
.forn select.cf { text-align: center; text-align-last: center; }
.forn-sx { width: 52px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 2px 0; }
.forn-sx .spunta-stampa { width: 18px; height: 18px; }
.forn-sx small { display: block; font-size: .62rem; font-weight: 600; text-align: center; }
.forn input.cf.codice-in { font-family: inherit; font-size: .78rem; }
/* campi facoltativi vuoti: grigi; obbligatori vuoti: bianchi con bordo rosso; focus giallo */
.forn input.cf:not(.obbl):placeholder-shown, .forn select.cf:not(.obbl) { background: var(--campo-pieno) !important; }
.forn input.cf.obbl:placeholder-shown, .forn select.cf.obbl:has(option:checked[value=""]) { border-color: #e08b8b; }
.forn input.cf:focus, .forn select.cf:focus { background: var(--campo-focus) !important; }
.forn .ro { text-align: center; height: 24px; line-height: 22px; padding: 0 4px; font-size: .78rem; border: 1px solid var(--bordo); border-radius: 3px; background: var(--campo-pieno); overflow: hidden; white-space: nowrap; }

.forn-griglia.serv { padding: 2px 3px; border-radius: 4px; }
.forn-griglia.serv.ele { background: var(--rosa); }
.forn-griglia.serv.gas { background: var(--azzurro); }
.forn-griglia.serv.spento { background: #c9cdd2; }
.forn-griglia.serv.spento > :not(.attivo) { display: none; }
.forn-griglia.serv.spento { padding-top: 0; padding-bottom: 0; }
/* servizio disattivato ma con una nota (es. "gas con GPL"): la nota resta visibile al suo posto */
.forn-griglia.serv.spento > .forn-nota.piena { display: block; grid-column: 6; grid-row: 1; height: 20px; line-height: 18px; }
.forn .attivo { display: flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 700; cursor: pointer; }
.forn-griglia.serv.ele .attivo { color: #7a2d75; }
.forn-griglia.serv.gas .attivo { color: #1f4f7a; }

.forn-nota {
  height: 24px; line-height: 22px; padding: 0 3px; font-size: .7rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border: 1px solid var(--bordo); border-radius: 3px; background: var(--campo-pieno); cursor: pointer;
}
.forn-nota.piena { background: #ffd500; font-weight: 600; }
.forn-boll { height: 24px; line-height: 22px; text-align: center; font-size: .75rem; font-weight: 600; border: 1px solid var(--bordo); border-radius: 3px; background: var(--campo-pieno); }
.forn-boll.presente { background: #92d050; border-color: #5f9b34; }
.forn .doc-tasti { display: flex; gap: 2px; align-items: center; }
.forn .mini.doc { width: 19px; height: 22px; font-size: .7rem; }
.forn .ind-insoluto { width: 16px; height: 22px; line-height: 20px; text-align: center; font-size: .7rem; font-weight: 700; border-radius: 3px; }
.forn .ind-insoluto.si { background: #e02020; color: #fff; border: 1px solid #a01010; }
.mostra-arch { font-size: .75rem; color: var(--tenue); display: flex; align-items: center; gap: 4px; margin-left: auto; }
#b-nuova-fornitura { margin-left: 8px; padding: 2px 12px; border: 1px solid #6aa23a; border-radius: 4px; background: #9ed36a; color: #1f3d0c; font-weight: 700; font-size: .78rem; cursor: pointer; }

/* tablet / telefono: la stessa scheda va a capo */
@media (max-width: 760px) {
  .forn-intest { display: none; }
  .forn-griglia.testa { grid-template-columns: 1fr 1fr 52px 40px; }
  .forn-griglia.testa [data-campo="for_via"] { grid-column: span 3; }
  .forn-griglia.testa [data-campo="for_comune"] { grid-column: span 2; }
  .forn-griglia.testa [data-campo="for_uso"] { grid-column: span 3; }
  .forn-griglia.serv { grid-template-columns: 56px 62px 46px 1fr 1fr; width: auto; margin-left: 0; }
  .forn-griglia.serv [data-campo$="pod"], .forn-griglia.serv [data-campo$="pdr"] { grid-column: span 2; }
  .forn-griglia.serv.gas [data-campo$="pdr"] { grid-column: 2 / span 4; }
  .forn-griglia.serv select[data-campo^="for_id"] { grid-column: span 2; }
  .forn-griglia.serv .doc-tasti { grid-column: span 3; }
  .forn-griglia.serv .boll-tasto { grid-column: span 3 !important; }
  .forn-griglia.serv .punto-box { grid-column: span 2; }
  .forn-griglia.serv.gas .punto-box { grid-column: 2 / span 4; }
  .forn-griglia.serv.spento { grid-template-columns: 1fr; }
  .forn-griglia.serv.spento > .forn-nota.piena { grid-column: 1; grid-row: auto; }
}

/* Intestazioni allineate ai campi: A (1+4+26+4) + colonna N./Stampa (52) + spazio (4) */
.intest-sx { flex: none; width: 87px; padding-left: 35px; display: flex; flex-direction: column; align-items: center; }
.intest-sx span { width: 52px; text-align: center; }
.intest-dx { flex: 1; min-width: 0; padding-left: 4px; }
.intest-dx .forn-griglia span { text-align: center; }
.forn input.cf.codice-in { padding-left: 2px; padding-right: 2px; letter-spacing: -.2px; }

/* Contratti: si vedono due forniture (la Stampa in alto + una), le altre scorrendo; intestazioni ferme */
#box-forniture.due-forniture { max-height: 242px; overflow-y: auto; }
#box-forniture.due-forniture .forn-intest { position: sticky; top: 0; z-index: 2; background: var(--carta); padding-top: 2px; }

/* Testa della fornitura: Via, Numero, Comune e Uso piu' grandi e in grassetto */
.forn .testa input.cf, .forn .testa select.cf { font-size: .92rem; font-weight: 700; height: 27px; }
.forn .testa .ro { height: 27px; line-height: 25px; }

/* FORNITURE e NUOVA al posto di N./Stampa, a sinistra delle intestazioni */
.forn-intest { align-items: center; }
.forn-intest .intest-sx { position: relative; z-index: 1; padding-left: 4px; flex-direction: row; align-items: center; gap: 6px; overflow: visible; white-space: nowrap; }
.forn-intest .intest-sx span { width: auto; }
.forn-intest .intest-sx .nc-titolo { font-size: .78rem; }
.forn-intest .intest-sx #b-nuova-fornitura { margin-left: 0; }
.mostra-arch { margin: 6px 4px 2px; }

/* =====================================================================
   SCHEDA OPERAZIONE SU DUE RIGHE (Contratti e Operazioni)
   ===================================================================== */
.ope, .ope-intest { display: flex; gap: 4px; margin-left: 10px; }
.ope { margin-bottom: 4px; padding: 3px; border: 1px solid var(--bordo); border-radius: 6px; background: var(--grigio-testa); }
.ope.archiviata { opacity: .6; }
.ope.archiviata .ope-corpo { pointer-events: none; }
.ope-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ope-griglia { display: grid; gap: 3px; align-items: center; }
.ope-griglia.r1 { grid-template-columns: 54px 56px 116px 66px 60px minmax(80px, 1fr) 96px 52px minmax(140px, 2fr); }
.ope-griglia.r2 { grid-template-columns: minmax(80px, 1fr) 124px 60px 116px 50px 50px minmax(80px, 1fr) 116px; }
.ope-doc { flex: none; width: 66px; display: flex; flex-direction: column; gap: 3px; justify-content: space-between; }
.ope-doc .doc-riga { height: 24px; display: flex; align-items: center; justify-content: center; }
.ope-tasti { flex: none; width: 52px; display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: space-between; }
.ope-tasti span { display: flex; gap: 2px; }
.ope-tasti .mini { width: 24px; height: 24px; font-size: .78rem; }
.ope-tasti .mini:disabled { opacity: .4; cursor: default; }
.ope .mini.doc { width: 22px; height: 22px; }

.ope-intest { padding: 0 3px; border: 1px solid transparent; font-size: .66rem; font-weight: 600; color: var(--tenue); margin-bottom: 1px; }
.ope-intest .ope-griglia span, .ope-intest .ope-doc span { text-align: center; white-space: nowrap; overflow: hidden; }
.ope-intest .r1 { color: var(--blu); }
.ope-intest .r2 { font-style: italic; font-weight: 500; }
.ope-intest .ope-doc { justify-content: space-around; }
#box-operazioni .ope-intest, #box-operazioni-tutte .ope-intest { position: sticky; top: 0; z-index: 2; background: var(--carta); }

.ope input.co, .ope select.co, .ope select.stato-sel {
  width: 100%; min-width: 0; height: 24px; padding: 1px 3px; font: inherit; font-size: .78rem; text-align: center; text-align-last: center;
  border: 1px solid var(--bordo); border-radius: 3px;
}
.ope input.co:placeholder-shown, .ope select.co { background: var(--campo-pieno) !important; }
.ope input.co.manca { background: var(--campo-vuoto) !important; border-color: #e08b8b; }
.ope input.co:focus, .ope select.co:focus { background: var(--campo-focus) !important; }
.ope input.co.data { padding: 0 1px; font-size: .74rem; }
.ope-id { font-weight: 400; color: var(--blu); font-size: .68rem; text-align: center; }
.ope input.co.dual-id { font-size: .68rem; font-weight: 400; }
.ope input.co.dual-id:not(:placeholder-shown) { background: #d9b8f0 !important; border-color: #a26cc9; font-weight: 400; }
.ope input.co.tip.ele { background: var(--rosa) !important; border-color: var(--rosa-forte); font-weight: 600; }
.ope input.co.tip.gas { background: var(--azzurro) !important; border-color: #8cc3f0; font-weight: 600; }
.ope input.co.tip.dual { background: linear-gradient(90deg, var(--rosa) 50%, var(--azzurro) 50%) !important; font-weight: 600; }
.ope-cte {
  height: 24px; line-height: 11px; padding: 1px 4px; font-size: .68rem; overflow: hidden; word-break: break-all;
  border: 1px solid var(--bordo); border-radius: 3px; background: var(--campo-pieno);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ope-nota {
  height: 24px; line-height: 22px; padding: 0 3px; font-size: .7rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border: 1px solid var(--bordo); border-radius: 3px; background: var(--campo-pieno); cursor: pointer;
}
.ope-nota.piena { background: #ffd500; font-weight: 600; }

/* Dual: due schede unite dalla barra viola */
.ope-dual { position: relative; margin-bottom: 4px; padding-left: 4px; border-left: 6px solid #8e44ad; border-radius: 4px; }
.ope-dual .ope { margin-left: 0; margin-bottom: 2px; }

@media (max-width: 760px) {
  .ope { flex-wrap: wrap; }
  .ope-intest { display: none; }
  .ope-corpo { flex-basis: 100%; }
  .ope-griglia.r1 { grid-template-columns: 54px 56px 1fr 66px; }
  .ope-griglia.r2 { grid-template-columns: 1fr 124px 60px; }
  .ope-cte { grid-column: 1 / -1; }
  .ope-doc { flex-direction: row; width: auto; }
  .ope-tasti { flex-direction: row; width: auto; }
}

/* Operazioni: misure fisse, tutto verso destra (Data -8 mm, Richiesta -5 mm, CTE -3 mm, Note FO 15 mm in riga 1;
   Prec.Forn e N. Contratto -20 mm) */
.ope-griglia.r1 { grid-template-columns: 54px 56px 86px 66px 60px 84px 96px 52px 45px 208px; width: max-content; margin-left: auto; }
.ope-griglia.r2 { grid-template-columns: 73px 124px 60px 116px 45px 78px 116px; width: max-content; margin-left: auto; }
.ope input.co.data.corta { padding: 0; cursor: pointer; }
.ope input.co.data.corta::-webkit-calendar-picker-indicator { display: none; }
.ope input.co.data.manca { background: var(--campo-vuoto) !important; border-color: #e08b8b; }

/* Note piene: giallo vivo (come in Access) */
.ope-nota.piena, .forn-nota.piena { background: #ffff00; }

/* Tasti: V ed E verdi, C bianco; tutti cambiano colore al passaggio del mouse (come Nuovo contratto) */
.mini { transition: background .12s; }
.mini:not(:disabled):hover { background: #cddff5; }
.mini.verde { background: linear-gradient(#b4e283, #8cc95a); border-color: #5f9b34; color: #1f3d0c; }
.mini.verde:not(:disabled):hover { background: linear-gradient(#c4ec98, #9bd66a); }
.mini.bianco { background: #fff; border-color: #8fa7c4; }
.mini.bianco:not(:disabled):hover { background: #fff7b8; }
.mini:not(:disabled):active { transform: translateY(1px); }
@media (max-width: 760px) {
  .ope-griglia.r1 { grid-template-columns: 54px 56px 1fr 66px; width: auto; margin-left: 0; }
  .ope-griglia.r2 { grid-template-columns: 1fr 124px 60px; width: auto; margin-left: 0; }
}

/* Mezzo schermo: misure fisse a scalini secondo la larghezza del riquadro (intestazioni sempre allineate,
   niente barra orizzontale). Si stringono Pagamento, Fornitore, CTE, Richiesta. */
#box-forniture, #box-operazioni, #box-operazioni-tutte { container-type: inline-size; }
@container (max-width: 940px) {
  .forn-griglia.serv { grid-template-columns: 58px 62px 46px 110px 81px 45px 112px 80px 44px 112px; }
  .ope-griglia.r1 { grid-template-columns: 54px 56px 86px 66px 60px 70px 80px 52px 45px 162px; }
}
@container (max-width: 880px) {
  .forn-griglia.serv { grid-template-columns: 58px 58px 42px 106px 72px 41px 92px 72px 44px 112px; }
  .ope-griglia.r1 { grid-template-columns: 54px 52px 84px 60px 52px 62px 70px 50px 41px 127px; }
  .ope-griglia.r2 { grid-template-columns: 70px 116px 52px 112px 41px 79px 112px; }
}
@container (max-width: 800px) {
  .forn-griglia.serv { grid-template-columns: 56px 56px 40px 104px 66px 37px 80px 64px 44px 112px; }
  .ope-griglia.r1 { grid-template-columns: 50px 50px 82px 56px 48px 56px 64px 46px 37px 103px; }
  .ope-griglia.r2 { grid-template-columns: 70px 116px 52px 112px 37px 83px 112px; }
}

/* Intestazioni di Nuovo contratto e Operazioni: grigio chiaro come le Forniture */
.nuovo-contratto .nc-testa, .ope-testa { background: var(--carta) !important; }
/* NUOVA (forniture e relazioni) ed E delle relazioni: verdi con bordo blu */
#b-nuova-fornitura, .relazioni .nuova, .relazioni .mini {
  background: linear-gradient(#b4e283, #8cc95a); border: 1px solid #456f9f; color: #1f3d0c;
}
#b-nuova-fornitura:hover, .relazioni .nuova:hover, .relazioni .mini:not(:disabled):hover { background: linear-gradient(#c4ec98, #9bd66a); }

/* Stati delle operazioni: colori di Access */
.ope select.stato-sel.st-viola { background: #c9a3f2 !important; }
.ope select.stato-sel.st-verdino { background: #a8f5a2 !important; }
.ope select.stato-sel.st-bianco { background: #ffffff !important; }
.ope select.stato-sel.st-verde { background: #66ff66 !important; }
.ope select.stato-sel.st-verde-scuro { background: #2fc22f !important; }
.ope select.stato-sel.st-rosa { background: #f7b3f0 !important; }
.ope select.stato-sel.st-annullato { background: #006400 !important; color: #fff; border-color: #004d00; }
select.stato-sel option { background: #fff; color: #222; }

/* Tutti i tasti cambiano colore al passaggio del mouse */
button { transition: filter .12s, background .12s; }
button:not(:disabled):hover { filter: brightness(.9) saturate(1.15); }
button:not(:disabled):active { filter: brightness(.82); }

/* Tasti a destra: riga 1 A + Ins.Ele/Ins.Gas/Ins.Dual, riga 2 lente + stampa */
.ope-tasti { width: 76px; align-items: flex-start; }
.ope-tasti > span { display: flex; gap: 2px; align-items: center; }
.ins-posto { display: inline-flex; }
button.ins {
  height: 24px; padding: 0 4px; border-radius: 4px; font-size: .68rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--rosa-forte); background: var(--rosa); color: #6d1f68;
}
button.ins.ins-gas { border-color: #8cc3f0; background: var(--azzurro); color: #1f4f7a; }
button.ins.ins-dual { border-color: #a26cc9; background: linear-gradient(90deg, var(--rosa) 50%, var(--azzurro) 50%); color: #3d2a55; }

button.ins.ins-controllo { border-color: #a01010; background: #e02020; color: #fff; }
pre.mancanti { white-space: pre-wrap; font: inherit; font-size: .9rem; background: #fff; border: 1px solid var(--bordo); border-radius: 6px; padding: 8px 10px; max-height: 50vh; overflow: auto; }

/* A, lente e stampa sopra; Ins.Ele / Controllo sotto, largo quanto i tre tasti */
.ope-tasti { width: 80px; align-items: stretch; }
.ope-tasti .ins-posto { display: flex; }
.ope-tasti .ins-posto button.ins { width: 100%; }

/* Lente: dati da inserire nel portale (M_CopiaDatiPortale) */
.finestra.mancanti-finestra { z-index: 70; }
.cdp-finestra { align-items: flex-start; overflow: auto; }
.cdp { width: min(1100px, 100%); background: #c5d6ea; border: 1px solid var(--bordo); border-radius: 10px; padding: 10px 12px 16px; }
.cdp-testa { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; position: sticky; top: -16px; background: #c5d6ea; padding: 4px 0; z-index: 2; }
.cdp-stato { font-weight: 700; font-size: .95rem; color: var(--blu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdp-stato.ok { color: #1f8a34; }
.cdp-stato.ko { color: #dc3545; }
.cdp-sez { margin-top: 8px; }
.cdp-sez h4 { margin: 4px 0 2px; font-size: .82rem; text-transform: uppercase; color: #3d5a1e; }
.cdp-riga { display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-end; margin-bottom: 3px; }
.cdp-c label { display: block; font-size: .62rem; font-weight: 700; text-transform: uppercase; color: #4a5b2a; text-align: center; white-space: nowrap; overflow: hidden; }
.cdp-v {
  min-height: 26px; padding: 3px 5px; font-size: .85rem; text-align: center; cursor: copy; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--campo-pieno); border: 1px solid #b5bec8; border-radius: 3px; transition: background .15s;
}
.cdp-v:hover { outline: 2px solid #7fa6d6; outline-offset: -2px; }
.cdp-v.vuoto { background: #fff; }
.cdp-v.alta { min-height: 60px; white-space: pre-wrap; text-align: left; background: #fff; }
.cdp-v.nota:not(.vuoto) { background: #ffff00; white-space: pre-wrap; }
.cdp-v.ele:not(.vuoto) { background: var(--rosa); }
.cdp-v.gas:not(.vuoto) { background: var(--azzurro); }
.cdp-v.copiato { background: #92d050 !important; }
.cdp-doc .cdp-riga { flex-wrap: nowrap; margin: 0; }
.cdp-doc .cdp-v { flex: 1; min-width: 0; font-size: .75rem; }
.cdp-doc .mini { height: 26px; }
.cdp-ins { margin-left: 12px; padding: 4px 10px 8px; border: 1px solid #456f9f; background: #dbe6f3; border-radius: 4px; min-width: 190px; }
.cdp-ins label { display: block; font-size: .62rem; font-weight: 700; text-transform: uppercase; color: #4a5b2a; text-align: center; }
.cdp-ins .ins-posto button.ins { width: 100%; height: 34px; font-size: 1.1rem; }
.cdp-sez.cdp-ele { background: #f9d3f6; border: 1px solid var(--rosa-forte); border-radius: 4px; padding: 4px 6px; }
.cdp-sez.cdp-gas { background: #d6ebfc; border: 1px solid #8cc3f0; border-radius: 4px; padding: 4px 6px; }
#cdp-torna { width: auto; flex: none; padding: 8px 18px; }

.cdp-ins .ins-posto { display: flex; }
.cdp-v.facoltativo { background: var(--campo-pieno); }

/* Lente piu' compatta (circa 5 cm in meno): sta tutta nella finestra anche col dual */
.cdp-finestra { padding-top: 8px; padding-bottom: 8px; }
.cdp { padding: 6px 10px 8px; }
.cdp-testa { margin-bottom: 2px; padding: 2px 0; top: -8px; }
.cdp-testa .pulsante { padding: 5px 14px; }
.cdp-sez { margin-top: 3px; }
.cdp-sez h4 { margin: 2px 0 0; font-size: .74rem; }
.cdp-riga { gap: 3px; margin-bottom: 1px; }
.cdp-c label { font-size: .56rem; line-height: 1.15; }
.cdp-v { min-height: 22px; padding: 1px 4px; font-size: .8rem; line-height: 1.3; }
.cdp-v.alta { min-height: 34px; }
.cdp-doc .mini { height: 22px; }
.cdp-ins { padding: 2px 8px 4px; }
.cdp-ins .ins-posto button.ins { height: 28px; font-size: 1rem; }
.cdp-sez.cdp-ele, .cdp-sez.cdp-gas { padding: 2px 6px; }
/* Lente: 4 cm piu' alta (campi e scritte piu' grandi) */
.cdp-sez { margin-top: 5px; }
.cdp-sez h4 { margin: 3px 0 1px; font-size: .8rem; }
.cdp-riga { margin-bottom: 3px; }
.cdp-c label { font-size: .62rem; line-height: 1.25; }
.cdp-v { min-height: 27px; padding: 3px 5px; font-size: .86rem; }
.cdp-v.alta { min-height: 48px; }
.cdp-doc .mini { height: 27px; }
.cdp-ins .ins-posto button.ins { height: 32px; font-size: 1.1rem; }

/* Lente: rosso = dato sbagliato, giallo = attenzione (passando il mouse si legge il motivo) */
.cdp-v.errore { background: #ff8080 !important; border-color: #c62828; color: #3b0000; font-weight: 600; cursor: help; }
.cdp-v.attenzione { background: #ffff00 !important; border-color: #c9b800; cursor: help; }
.cdp-v.copiato.errore, .cdp-v.copiato.attenzione { background: #92d050 !important; }

.cdp-v.alta.facoltativo { background: var(--campo-pieno); }

.cdp-sez.cdp-delegato { background: #fffbb0; border: 2px solid #e0c800; border-radius: 4px; padding: 2px 6px; }

/* Stampa contratti e moduli */
.stampa-finestra { align-items: flex-start; }
.stampa { width: min(760px, 100%); background: #c5d6ea; border: 1px solid var(--bordo); border-radius: 10px; padding: 10px 14px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; }
.stampa-testa { width: 100%; display: flex; align-items: center; gap: 12px; }
.stampa-testa h2 { flex: 1; text-align: center; margin: 0; font-weight: 500; color: var(--blu); font-size: 1.3rem; }
#stampa-torna { width: auto; padding: 6px 14px; }
.stampa-titolo { width: 100%; background: #fff; border: 1px solid var(--bordo); padding: 6px 10px; text-align: center; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
#stampa-data { width: 170px; text-align: center; font-size: 1rem; padding: 4px; }
.stampa-elenco { width: 320px; min-height: 160px; background: #fff; border: 1px solid var(--bordo); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.stampa-elenco label { display: flex; gap: 6px; align-items: center; padding: 3px 4px; cursor: pointer; font-size: .9rem; }
.stampa-elenco label:hover { background: #eef4fb; }
#stampa-crea { width: auto; padding: 8px 26px; }
.stampa-stato { min-height: 1.2em; font-weight: 600; color: var(--blu); }

/* Tutti i pulsanti al passaggio del mouse: giallo del focus e bordo blu evidenziato */
button:not(:disabled):hover,
.btn-matrice:not(:disabled):hover,
.mini:not(:disabled):hover,
.mini.verde:not(:disabled):hover,
.mini.bianco:not(:disabled):hover,
button.ins:hover,
#b-nuova-fornitura:hover, .relazioni .nuova:hover, .relazioni .mini:not(:disabled):hover {
  background: var(--campo-focus) !important;
  border-color: #1f5fbf !important;
  box-shadow: 0 0 0 2px #1f5fbf;
  color: #1a2b44 !important;
  filter: none;
}

/* ---------- FrontOffice ---------- */
.fo-alto { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 8px; }
.fo-alto .pulsante, .fo-testa .pulsante, .fo-box-testa .pulsante { width: auto; margin: 0; font-size: .78rem; padding: 8px 12px; }
.fo-griglia { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(420px, 1.25fr); gap: 10px; align-items: start; }
.fo-colonna { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fo-box { background: #c9d9ec; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 8px; min-width: 0; }
.fo-testa { display: flex; gap: 8px; align-items: flex-end; }
.fo-ricerca { display: flex; flex-direction: column; flex: 1 1 auto; font-weight: 700; font-size: .78rem; color: var(--blu); gap: 3px; min-width: 0; }
.fo-ricerca input { font-size: 1rem; padding: 7px 9px; border: 2px solid #1f5fbf; border-radius: var(--raggio); background: var(--campo-focus) !important; }
.fo-info { font-size: .78rem; color: var(--tenue); margin: 6px 2px 4px; }
.fo-lista, .age-lista { display: flex; flex-direction: column; gap: 3px; outline: none; overflow-y: auto; position: relative; }
.fo-riga, .age-riga, .comu-riga, .pic-riga { flex-shrink: 0; }
.fo-sotto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; align-items: start; }
.pic-lista { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.pic-riga { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; min-height: 36px; gap: 4px; background: var(--carta); border-bottom: 1px solid var(--bordo); font-size: .8rem; padding: 3px 6px; cursor: pointer; }
.pic-riga:hover { background: var(--campo-focus); }
.pic-cliente { font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1100px) {
  .fo-sotto { gap: 6px; }
  .fo-piccolo { padding: 6px 5px; }
  .fo-piccolo .fo-box-titolo { font-size: .74rem; }
  .pic-riga { grid-template-columns: 66px minmax(0, 1fr); font-size: .74rem; padding: 3px 4px; }
}
@media (max-width: 600px) { .fo-sotto { grid-template-columns: 1fr; } .pic-riga { font-size: .8rem; grid-template-columns: 76px minmax(0, 1fr); } }
.comu-lista { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.comu-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: center; }
.comu-testo { background: var(--carta); border: 1px solid var(--bordo); padding: 4px 6px; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.comu-testo:hover { background: var(--campo-focus); border-color: #1f5fbf; }
.comu-nonrec { font-size: .75rem; padding: 4px 8px; border: 1px solid var(--bordo); border-radius: 3px; background: #fff; cursor: pointer; white-space: nowrap; }
@media (max-width: 600px) { .comu-testo { white-space: normal; } }
.fo-riga { display: grid; grid-template-columns: 80px 1fr auto; align-items: stretch; background: var(--carta); border: 1px solid var(--bordo); border-radius: 4px; cursor: pointer; overflow: hidden; }
.fo-riga:hover, .fo-riga.sel { background: var(--campo-focus); border-color: #1f5fbf; box-shadow: 0 0 0 1px #1f5fbf; }
.fo-cat { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .74rem; background: #e1e1e1; }
.fo-cat.cat-casa { background: var(--rosa); }
.fo-cat.cat-azienda { background: var(--azzurro); }
.fo-cat.cat-condominio { background: #c8f0c0; }
.fo-testo { padding: 3px 8px; min-width: 0; }
.fo-r1 { font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-r2 { font-size: .8rem; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-agente { display: flex; align-items: center; padding: 0 10px; font-weight: 700; font-size: .85rem; color: var(--blu); }
.fo-box-testa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.fo-box-titolo { font-weight: 700; font-size: .85rem; color: var(--blu); margin-right: auto; }
.age-miei { font-size: .8rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.age-lista { gap: 1px; }
.age-riga { display: grid; grid-template-columns: 78px 92px 26px minmax(0, 1fr) minmax(0, 1.3fr) 26px 26px; align-items: center; gap: 4px; background: var(--carta); border-bottom: 1px solid var(--bordo); font-size: .8rem; padding: 2px 4px; }
.age-riga.indisp { background: #f3d6d6; }
.age-riga span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.age-riga .age-agente { cursor: pointer; text-align: center; border-radius: 3px; }
.age-riga .age-agente:hover { text-decoration: underline; }
.age-riga .age-agente.filtro { background: #F9CF19; font-weight: 700; }
.age-cliente { cursor: pointer; font-weight: 600; color: var(--blu); }
.age-cliente:hover { text-decoration: underline; }
.age-riga button { width: 24px; height: 22px; padding: 0; border: 1px solid var(--bordo); border-radius: 3px; background: #fff; cursor: pointer; font-size: .8rem; }
@media (max-width: 900px) {
  .fo-griglia { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .fo-alto .pulsante { flex: 1 1 0; font-size: .7rem; padding: 8px 4px; }
  .fo-testa .pulsante { font-size: .7rem; padding: 9px 6px; }
  .fo-riga { grid-template-columns: 66px 1fr auto; }
  .fo-r1, .fo-r2 { white-space: normal; }
  .age-riga { grid-template-columns: 72px 1fr 24px 24px 24px; }
  .age-riga { grid-auto-flow: row dense; }
  .age-modifica { grid-column: 4; grid-row: 1; }
  .age-annulla { grid-column: 5; grid-row: 1; }
  .age-cliente { grid-column: 1 / -1; }
  .age-oggetto { grid-column: 1 / -1; white-space: normal !important; }
  .fo-box-testa .pulsante { font-size: .7rem; padding: 7px 8px; }
  .fo-box-titolo { width: 100%; }
  .age-cliente:empty { display: none; }
}

/* FrontOffice a tutta larghezza: sugli schermi grandi i riquadri stanno affiancati */
.guscio.largo { max-width: none; }
.guscio.largo .fo-alto { max-width: none; }

/* Totali per data e operatore */
.fo-totali { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; align-items: start; }
.tot-tab { overflow: auto; background: var(--carta); border: 1px solid var(--bordo); }
table.tot { border-collapse: collapse; font-size: .74rem; width: 100%; }
table.tot th { position: sticky; top: 0; background: #dfe7f1; font-weight: 700; padding: 3px 4px; border-bottom: 1px solid var(--bordo); text-align: center; }
table.tot td { padding: 2px 4px; text-align: center; border-bottom: 1px solid #e3e8ef; }
table.tot td:first-child { text-align: left; white-space: nowrap; }
table.tot td.t { font-weight: 700; }
table.tot tbody tr:first-child td { background: #cfe0f5; }
@media (max-width: 1100px) { .fo-totali { grid-template-columns: 1fr; } }

/* ---------- BackOffice ---------- */
.fo-alto { flex-wrap: wrap; }
.bo-sotto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; align-items: start; }
.ins-lista { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.ins-riga { flex-shrink: 0; display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; gap: 4px; align-items: center; background: var(--carta); border-bottom: 1px solid var(--bordo); font-size: .74rem; padding: 2px 4px; cursor: pointer; }
.ins-riga:hover { background: var(--campo-focus); }
.ins-testo { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-stato { text-align: center; border-radius: 3px; padding: 1px 2px; }
.ins-stato.st-verde { background: #66ff66; }
.ins-stato.st-annullato { background: #006400; color: #fff; }
@media (max-width: 1100px) { .bo-sotto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bo-sotto { grid-template-columns: 1fr; } }
.co-riga { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 6px; }
.co-cella { display: flex; flex-direction: column; gap: 2px; }
.co-cella span { font-size: .72rem; font-weight: 600; color: var(--blu); }
.co-cella b { background: var(--carta); border: 1px solid var(--bordo); text-align: center; padding: 3px; font-size: .85rem; }
.co-cella b.rosso { background: #e52222; color: #fff; border-color: #a00; }
table.tot.incarico td { cursor: pointer; }
table.tot.incarico td:hover { background: var(--campo-focus); }
table.tot .sx { text-align: left; white-space: nowrap; }
.ins-riga.ope-bo { grid-template-columns: 70px minmax(0, 1fr); }
#bo-ope-mie { width: auto; margin: 0; font-size: .7rem; padding: 4px 8px; }
.ass-testa { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.ass-testa label { display: flex; flex-direction: column; font-size: .74rem; font-weight: 600; color: var(--blu); gap: 2px; }
.ass-testa select { min-width: 150px; padding: 4px; }
#ass-metti { width: auto; margin: 0; font-size: .75rem; padding: 6px 10px; }
.ass-carico { display: flex; gap: 12px; font-size: .74rem; font-weight: 600; color: var(--blu); margin-bottom: 6px; }
.ass-carico b { display: inline-block; min-width: 28px; text-align: center; background: var(--carta); border: 1px solid var(--bordo); padding: 1px 4px; color: var(--testo); }
.ins-riga.ass-riga { grid-template-columns: 18px 70px minmax(0, 1fr); }

/* Tasto A (Archivia cliente) solo con un cliente aperto */
.guscio.senza-cliente .nav button.archivia { display: none; }

/* Icone dei tasti */
.ico { width: 14px; height: 14px; display: block; margin: auto; pointer-events: none; }
.mini, .age-riga button { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #1a2b44; }
.forn .mini.doc .ico, .mini.doc .ico { width: 12px; height: 12px; }
.ope-tasti .mini .ico { width: 15px; height: 15px; }
.nav button.archivia .ico { width: 18px; height: 18px; }
.forn .ind-insoluto { display: inline-flex; align-items: center; justify-content: center; }
.forn .ind-insoluto .ico { width: 12px; height: 12px; }
.age-riga button.mini.verde { border: 1px solid #456f9f; }

/* Bordi dei pulsanti sempre sottili */
button, .mini, .pulsante { border-width: 1px !important; }

/* NUOVO, NUOVO CLIENTE, METTI IN CARICO: verdi con bordo blu come NUOVA delle forniture */
#age-nuovo, #fo-nuovo, #ass-metti {
  background: linear-gradient(#b4e283, #8cc95a); border: 1px solid #456f9f; color: #1f3d0c; text-transform: uppercase; font-weight: 700; white-space: nowrap;
}
#age-nuovo { padding: 2px 10px !important; font-size: .78rem !important; border-radius: 4px; }

/* Tasti che erano blu scuro: azzurri con testo e bordo blu */
.pulsante:not(.btn-verde), .btn-scuro, .nav button:not(.chat):not(.archivia) {
  background: #cfe6fb !important; color: #1f4f8f !important; border: 1px solid #1f5fbf !important;
}
.nav button[data-vai="front"] .ico, .nav button[data-vai="back"] .ico { width: 22px; height: 22px; }
.nav button[data-vai="front"], .nav button[data-vai="back"] { display: inline-flex; align-items: center; justify-content: center; }
/* Pagina in cui ci si trova: tasto disabilitato */
.nav button.attivo { outline: none !important; opacity: .4; cursor: default; }

/* Tutto quello che si può cliccare: giallo al passaggio del mouse */
.pulsante:not(.btn-verde):not(:disabled):hover, .btn-scuro:not(:disabled):hover,
.nav button:not(.chat):not(.archivia):not(:disabled):hover, .nav button:not(:disabled):hover, .btn-verde:not(:disabled):hover {
  background: var(--campo-focus) !important; color: #1a2b44 !important; border-color: #1f5fbf !important; box-shadow: 0 0 0 2px #1f5fbf;
}
.relazioni li:hover, .tendina .voce:hover, table.dati tr.selezionabile:hover td, .age-cliente:hover, .cdp-v:hover,
table.griglia td.cella.si:hover, table.griglia th.filtro-col:hover, .forn .attivo:hover, .stampa-elenco label:hover,
.fo-riga:hover .fo-testo, .fo-riga:hover .fo-agente, .age-riga:hover, .link:hover {
  background: var(--campo-focus) !important;
}

/* Tasti azzurri in alto a destra nella barra: scritta piccola su due righe */
.barra-destra { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.barra-destra .pulsante { width: auto; height: 38px; padding: 0 8px; font-size: .64rem; line-height: 1.1; font-weight: 700; text-align: center; }
@media (max-width: 600px) { .barra { flex-wrap: wrap; } .barra-destra { width: 100%; } }

/* ---------- Scheda CLIENTE modificabile (come M_Clienti) ---------- */
.scheda-cli { padding: 10px 12px; }
.cc-riga { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; margin-bottom: 12px; }
.cc { display: flex; flex-direction: column; gap: 2px; max-width: 100%; }
.cc > span { font-size: .74rem; font-weight: 700; color: #2f5d2f; text-align: center; white-space: nowrap; }
.cc input, .cc select, .cfisso { height: 30px; font-size: 1rem; text-align: center; border: 1px solid var(--bordo); border-radius: 3px; padding: 0 6px; width: 100%; box-sizing: border-box; }
.cc select { text-align-last: center; }
.cfisso { background: var(--campo-pieno); display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ateco-desc .cfisso { font-size: .8rem; white-space: normal; line-height: 1.1; justify-content: flex-start; text-align: left; }
.scheda-cli input.ccli:not(.obbl):placeholder-shown, .scheda-cli select.ccli:not(.obbl):not(.rosa) { background: var(--campo-pieno) !important; }
.scheda-cli input.ccli.obbl:placeholder-shown { border-color: #e08b8b; }
.scheda-cli input[type=date].ccli.vuota:not(.obbl) { background: var(--campo-pieno) !important; }
.scheda-cli input[type=date].ccli:not(.vuota) { background: var(--campo-pieno) !important; }
.scheda-cli .rosa, .scheda-cli select.ccli.rosa { background: var(--rosa) !important; }
.scheda-cli input.ccli:focus, .scheda-cli select.ccli:focus { background: var(--campo-focus) !important; }
.scheda-cli input.nota.piena { background: #ffff00 !important; }
.cc-con-ok { display: flex; align-items: flex-end; }
.okko { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; border: 1px solid var(--bordo); border-left: 0; background: var(--campo-pieno); }
.okko.ok { background: #9ed36a; }
.okko.ko { background: #e02020; color: #fff; }
.cc-pag { display: flex; flex-direction: column; gap: 2px; }
.cc-pag .cfisso { font-size: .8rem; justify-content: flex-start; }
.cc-arrivo { font-size: .78rem; color: var(--tenue); margin-top: 6px; }
.scheda-cli input[type=date].ccli.obbl.vuota { background: var(--campo-vuoto) !important; border-color: #e08b8b; }
.scheda-cli input[type=date].ccli.obbl.vuota:focus { background: var(--campo-focus) !important; }

/* Scheda cliente: giallo sul campo dove si scrive (vince su grigio/rosa) */
#contenuto .scheda-cli input.ccli:focus, #contenuto .scheda-cli select.ccli:focus { background: var(--campo-focus) !important; }
#contenuto .scheda-cli input.ccli.scaduta { background: #e02020 !important; color: #fff; }
#contenuto .scheda-cli input.ccli.in-scadenza { background: #ffa640 !important; }
#contenuto .scheda-cli input.ccli.scaduta:focus, #contenuto .scheda-cli input.ccli.in-scadenza:focus { color: inherit; }
#contenuto .scheda-cli input.ccli.scaduta:focus, #contenuto .scheda-cli input.ccli.in-scadenza:focus { background: var(--campo-focus) !important; color: inherit; }
.doc-cli .doc-tasti { display: flex; gap: 4px; justify-content: center; height: 30px; align-items: center; }
.doc-cli .mini.doc { width: 30px; height: 28px; }
.doc-cli .mini.doc .ico { width: 15px; height: 15px; }
.elenco-doc { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; text-align: left; }
.elenco-doc .link { text-align: left; padding: 4px 6px; }

/* Pagamenti del cliente */
.pag-testa { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pag-testa .pulsante { width: auto; margin: 0; padding: 1px 10px !important; font-size: .72rem !important; border-radius: 4px; }
.pag-riga { display: flex; align-items: stretch; background: var(--campo-pieno); border: 1px solid var(--bordo); border-radius: 3px; cursor: pointer; font-size: .8rem; min-height: 26px; }
.pag-riga span { flex: 1; padding: 4px 6px; }
.pag-riga .okko { height: auto; }
.pag-riga:hover { background: var(--campo-focus); }
.pag-riga.vuota { color: var(--tenue); padding: 4px 6px; }
.pag-box { max-width: 520px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.pag-box label { display: flex; flex-direction: column; font-size: .78rem; font-weight: 700; color: #2f5d2f; gap: 2px; }
.pag-box label[hidden] { display: none; }
.pag-box .pag-r { display: flex; gap: 10px; }
.pag-box .pag-r label { flex: 1; }
.pag-box #pg-iban-l { flex: 2; }
.pag-box #pg-iban-l { position: relative; }
.pag-box #pg-iban-l .okko { position: absolute; right: 0; bottom: 0; }
.pag-box input, .pag-box select, .pag-box textarea { padding: 6px; font-size: .95rem; border: 1px solid var(--bordo); border-radius: 3px; }
.pag-box .pag-chk { flex-direction: row; align-items: center; gap: 6px; }
.pag-int > span { font-size: .78rem; font-weight: 700; color: #2f5d2f; }
.pag-int > div { display: flex; gap: 8px; align-items: center; }
.pag-int .pulsante { width: auto; padding: 6px 10px; font-size: .75rem; }
.pag-int .cfisso { flex: 1; height: 30px; }
.pag-ricerca { margin-top: 6px; }
.pag-ricerca input { width: 100%; box-sizing: border-box; }
#pg-ris { max-height: 180px; overflow: auto; display: flex; flex-direction: column; }
#pg-ris .link { text-align: left; padding: 3px 4px; font-size: .82rem; }
.pag-int > div[hidden] { display: none; }
.btn-verde { background: linear-gradient(#b4e283, #8cc95a) !important; border: 1px solid #456f9f !important; color: #1f3d0c !important; font-weight: 700; }
.pag-ricerca { align-items: flex-start !important; }
.pag-ricerca #pg-ric { width: 165px !important; flex: none; }
.pag-ricerca #pg-ris { flex: 1; min-width: 0; }

/* Nuova relazione */
.rel-box { max-width: 560px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.rel-box label { display: flex; flex-direction: column; font-size: .78rem; font-weight: 700; color: #2f5d2f; gap: 2px; }
.rel-box select, .rel-box input { padding: 6px; font-size: .95rem; border: 1px solid var(--bordo); border-radius: 3px; }
.rl-ris { max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--bordo); min-height: 60px; }
.rl-voce { padding: 4px 6px; font-size: .85rem; cursor: pointer; border-bottom: 1px solid #eef2f7; }
.rl-voce:hover { background: var(--campo-focus); }
.rl-voce.sel { background: #9fcdf5; font-weight: 600; }

/* Avvisi ELEGAS.IT */
.avviso-fondo { position: fixed; inset: 0; z-index: 1000; background: rgba(30, 40, 60, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.avviso-box { width: 400px; max-width: 100%; background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.35); overflow: hidden; }
.avviso-testa { background: #c3e4d2; padding: 10px; text-align: center; }
.avviso-testa img { height: 42px; max-width: 90%; }
.avviso-box.pericolo .avviso-testa { background: #e8505b; }
.avviso-corpo { padding: 16px 20px 6px; font-size: .98rem; color: #1d2430; line-height: 1.45; text-align: center; }
.avviso-corpo b { color: #22426b; }
.avviso-box.pericolo .avviso-corpo b { color: #b3121f; }
.avviso-ico { font-size: 1.9rem; margin-bottom: 4px; }
.avviso-tasti { display: flex; gap: 10px; justify-content: center; padding: 14px 16px 18px; }
.avviso-tasti .pulsante { width: auto; min-width: 90px; padding: 9px 22px; font-weight: 700; }

/* Stampa tessera nella scheda cliente */
.tess-riga { display: flex; gap: 4px; align-items: stretch; }
.tess-riga .cfisso { flex: 1; min-width: 0; }
.tess-riga .pulsante { flex: 0 0 auto; width: auto; min-width: 0; margin: 0; padding: 0 6px; display: inline-flex; align-items: center; }
.cc-tasti-cli { display: flex; gap: 6px; margin-top: 8px; }
.cc-tasti-cli:empty { display: none; }
.avviso-corpo { max-height: 60vh; overflow-y: auto; }
.cc-omaggi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.cc-omaggi > span { font-size: .78rem; font-weight: 700; color: var(--tenue); margin-right: 4px; }
.cc-tasti-cli .pulsante, .cc-omaggi .pulsante { width: auto; flex: 0 0 auto; margin: 0; padding: 4px 12px; }
.cc-omaggi .buono-valore { width: 70px; text-align: right; }
.ultimo-omaggio { padding: 4px 12px; border: 1px solid #b8c9de; border-radius: 6px; background: #eef1f5; color: #1f4e79; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.ultimo-omaggio.recente { background: #fff176; border-color: #F9CF19; color: #12305a; }   /* meno di un anno fa */
.cc-spunta input[type="checkbox"] { width: 22px; height: 22px; margin: 6px auto 0; display: block; accent-color: #1f5fbf; cursor: pointer; }

/* Clienti casa da chiamare (M_FrontOffice_DaChiamareCasa) */
.chi-pagina { max-width: 900px; margin: 0 auto; }
.chi-titolo { display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%); color: #1f2d45;
  font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; padding: 12px 16px; border: 1px solid #c9d3e3; border-bottom: 0;
  border-radius: 12px 12px 0 0; position: relative; overflow: hidden; }
.chi-titolo::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #3aa357 0%, #1f5fbf 100%); }
.chi-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #e6eefb; color: #1f5fbf; }
.chi-ico svg { width: 20px; height: 20px; }
.chi-conta { margin-left: auto; font-size: .78rem; font-weight: 600; color: #1f4f8f; background: #e6eefb; border: 1px solid #c9d8f0; padding: 3px 10px; border-radius: 999px; }
.chi-conta:empty { display: none; }
.chi-tabella { background: #fff; border: 1px solid #c9d3e3; border-top: 0; max-height: calc(100vh - 210px); overflow-y: auto; }
.chi-tabella table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.chi-tabella th { position: sticky; top: 0; background: #edf0f7; color: #5b6b82; font-weight: 600; padding: 6px 8px; text-align: left; border-bottom: 1px solid #c9d3e3; }
.chi-tabella td { padding: 4px 8px; border-bottom: 1px solid #e6ebf3; }
.chi-tabella td.num { text-align: right; width: 70px; color: #5b6b82; }
.chi-tabella td.cen, .chi-tabella th:nth-child(4), .chi-tabella th:nth-child(5) { text-align: center; }
.chi-tabella tbody tr:nth-child(even) { background: #f7f9fc; }
.chi-nome { background: none; border: 1px solid transparent; padding: 2px 4px; font: inherit; color: #1f4f8f; cursor: pointer; text-align: left; border-radius: 4px; }
.chi-nome:hover, .chi-nome:focus { background: #fff7b8; border-color: #e0c200; }
.chi-tabella th:first-child { text-align: right; }

/* Appuntamento (M_ComunicazioniAppuntamento) */
.appu-box { max-width: 980px; width: 100%; }
.appu-griglia { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 16px; }
@media (max-width: 760px) { .appu-griglia { grid-template-columns: 1fr; } }
.appu-dati { display: flex; flex-direction: column; gap: 8px; }
.appu-dati label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; font-weight: 600; color: #2f5d3a; }
.appu-dati input, .appu-dati select, .appu-dati textarea { font: inherit; font-size: .95rem; padding: 6px 8px; border: 1px solid var(--bordo); border-radius: 6px; background: #fff; }
.appu-dati input:focus, .appu-dati select:focus, .appu-dati textarea:focus { background: #fff7b8; outline: none; }
.appu-dati .appu-spunta { flex-direction: row; align-items: center; gap: 8px; font-size: .9rem; color: #1d2430; }
.appu-dati .appu-spunta input { width: 18px; height: 18px; }
.appu-riga { display: flex; gap: 8px; }
.appu-riga label { flex: 1; }
.appu-riga label[hidden] { display: none; }
.appu-durata { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.appu-durata[hidden] { display: none; }
.appu-durata .pulsante { width: auto; margin: 0; padding: 4px 10px; }
#ap-durata-testo { font-size: .8rem; color: #5b6b82; }
.appu-agenda { border: 1px solid #c9d3e3; border-radius: 6px; background: #fff; display: flex; flex-direction: column; min-height: 260px; }
.appu-agenda-testa { background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%); color: #1f2d45; font-weight: 700; padding: 8px 12px; border-bottom: 1px solid #c9d3e3; border-left: 4px solid #1f5fbf; border-radius: 6px 6px 0 0; }
.appu-agenda-lista { overflow-y: auto; max-height: 380px; }
.appu-ag-riga { display: grid; grid-template-columns: 78px 92px 1fr 1fr 26px 26px; gap: 6px; align-items: center; padding: 3px 8px; font-size: .82rem; border-bottom: 1px solid #e6ebf3; }
.appu-ag-riga span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appu-agenda-lista.con-op .appu-ag-riga { grid-template-columns: 26px 78px 92px 1fr 1fr 26px 26px; }
.appu-ag-op { font-weight: 700; color: #1f5fbf; }
.appu-op-testa { font-size: .78rem; font-weight: 600; color: #2f5d3a; }
.appu-operatori { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 8px; padding: 6px 8px; border: 1px solid var(--bordo); border-radius: 6px; background: var(--campo-pieno, #e9ecf1); max-height: 132px; overflow-y: auto; }
.appu-dati .appu-op { flex-direction: row; align-items: center; gap: 5px; font-size: .82rem; font-weight: 500; color: #1d2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.appu-dati .appu-op input { width: 15px; height: 15px; padding: 0; margin: 0; flex: none; }
.appu-ag-riga.indisp { background: #fde8e8; }
.appu-ag-riga.questo { background: #fff7b8; }
.appu-annulla { width: auto; margin-right: auto; background: #fde8e8; color: #b3121f; border-color: #e8505b; }
.appu-box .pulsante.appu-annulla { background: #fde8e8; color: #b3121f; border-color: #e8505b; }
.appu-box .pulsante.appu-annulla:hover { background: #fff7b8; }

/* Template CTE (M_TemplateOperazioni) */
.cte-pagina { max-width: 1250px; margin: 0 auto; }
.cte-filtri { display: flex; flex-wrap: nowrap; gap: 8px; align-items: flex-end; padding: 8px 10px; background: #fff; border: 1px solid #c9d3e3; border-top: 0; }
.cte-filtri label { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; font-weight: 700; color: #2f5d3a; }
.cte-filtri label { flex: 1 1 0; min-width: 0; }
.cte-filtri select { width: 100%; min-width: 0; padding: 4px 6px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; font-size: .9rem; }
.cte-tasti { display: flex; gap: 6px; flex: 0 0 auto; }
.cte-filtri .pulsante { width: auto; margin: 0; padding: 6px 12px; white-space: nowrap; }
.cte-filtri .pulsante:disabled { opacity: .45; cursor: default; }
.cte-riga.ele td { background: #fbe3f3; }
.cte-riga.gas td { background: #dcecfb; }
.cte-riga.altro td { background: #e3f4dc; }
.cte-tabella tbody tr.cte-riga:nth-child(even) td { filter: brightness(.98); }
.cte-scelta { width: 16px; height: 16px; accent-color: #1f5fbf; cursor: pointer; }
.cte-tabella { max-height: calc(100vh - 290px); }
.cte-tabella { overflow-x: hidden; }
.cte-tabella table { table-layout: fixed; width: 100%; }
.cte-tabella td, .cte-tabella th { white-space: normal; overflow-wrap: anywhere; padding: 5px 6px; }
.cte-tabella th { font-size: .8rem; }
.cte-tabella th.num, .cte-tabella td.num { text-align: right; }
.cte-tabella th.cen { text-align: center; }
.cte-riga { cursor: pointer; }
.cte-riga:hover td { background: #fff7b8; }
.cte-riga.spenta td { color: #9aa5b4; }
.cte-box { max-width: 1100px; width: 100%; max-height: 92vh; overflow-y: auto; }
.cte-nome { font-size: .85rem; color: #5b6b82; margin: -6px 0 8px; }
.cte-sezioni { display: flex; flex-direction: column; gap: 8px; }
.cte-sezioni fieldset { border: 1px solid #c9d3e3; border-radius: 8px; padding: 6px 10px 10px; background: #fff; }
.cte-sezioni legend { font-size: .78rem; font-weight: 700; color: #1f4f8f; padding: 0 4px; }
.cte-campi { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.cte-campi label { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; font-weight: 600; color: #2f5d3a; }
.cte-campi input[type="text"], .cte-campi select { padding: 5px 7px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; font-size: .9rem; background: #ececec; }
.cte-campi input.num { text-align: right; }
.cte-campi input[type="text"]:focus, .cte-campi select:focus { background: #fff7b8; outline: none; }
.cte-campi .cte-spunta { flex-direction: row; align-items: center; gap: 5px; font-size: .85rem; color: #1d2430; padding: 4px 0; }
.cte-campi .cte-spunta input { width: 17px; height: 17px; accent-color: #1f5fbf; }
.cte-sep { width: 18px; }
.cte-campi .salvato { box-shadow: 0 0 0 2px #7cc36b; }
.cte-riga:hover td { background: #fff7b8; filter: none; }
.chi-tabella { border-radius: 0 0 12px 12px; box-shadow: 0 6px 18px rgba(31, 45, 69, .06); }
.cte-filtri { border-color: #c9d3e3; }
.cte-tabella th { white-space: nowrap; overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.cte-tabella th.num { text-align: right; }
.cte-tabella th.cen { text-align: center; }
.cte-tabella th:nth-child(n) { text-align: left; }
.cte-tabella th.num:nth-child(n) { text-align: right; }
.cte-tabella th.cen:nth-child(n) { text-align: center; }
.cte-tabella th:nth-child(n), .cte-tabella td:nth-child(n), .cte-tabella th.num:nth-child(n), .cte-tabella td.num:nth-child(n) { text-align: center; }

/* Fornitori (M_Fornitori) */
.forn-pagina { max-width: 1250px; margin: 0 auto; }
.forn-filtri .forn-cerca { flex: 0 1 320px; }
.forn-filtri .forn-cerca input { width: 100%; padding: 5px 8px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; }
.forn-filtri .cte-tasti { margin-left: auto; }
.forn-tabella { overflow-x: hidden; }
.forn-tabella table { table-layout: fixed; width: 100%; }
.forn-tabella th:nth-child(n) { text-align: center; white-space: nowrap; }
.forn-tabella td { vertical-align: top; padding: 4px 6px; }
.forn-tabella td.num, .forn-tabella td.cen { text-align: center; padding-top: 9px; }
.forn-tabella input[type="text"], .forn-tabella textarea { width: 100%; box-sizing: border-box; padding: 5px 7px; border: 1px solid #d6dde8; border-radius: 6px; font: inherit; font-size: .88rem; background: #f6f8fb; resize: none; overflow: hidden; }
.forn-tabella input[type="text"]:focus, .forn-tabella textarea:focus { background: #fff7b8; outline: none; }
.forn-tabella input[type="checkbox"] { width: 17px; height: 17px; accent-color: #1f5fbf; }
.forn-tabella .salvato { box-shadow: 0 0 0 2px #7cc36b; }
.forn-link { display: flex; gap: 4px; align-items: center; }
.forn-riga.spenta input[type="text"], .forn-riga.spenta textarea { color: #9aa5b4; }
.forn-tabella input[type="password"] { width: 100%; box-sizing: border-box; padding: 5px 7px; border: 1px solid #d6dde8; border-radius: 6px; font: inherit; font-size: .88rem; background: #f6f8fb; }
.forn-tabella input[readonly] { background: #eceff3; color: #5b6b82; }
.forn-tabella input[type="password"]:focus { background: #fff7b8; outline: none; }
.forn-link input { min-width: 0; }

/* Composizione PDF (M_PdfComposizione) */
.pdc-tabella td { padding: 3px 3px; }
.pdc-tabella select { width: 100%; box-sizing: border-box; padding: 4px 4px; border: 1px solid #d6dde8; border-radius: 6px; font: inherit; font-size: .85rem; background: #f6f8fb; }
.pdc-tabella select:focus { background: #fff7b8; outline: none; }
.pdc-tabella input[type="text"] { font-size: .85rem; padding: 4px 5px; }
.pdc-tabella input.cen { text-align: center; }
.pdc-tabella td.cen { padding-top: 7px; }

/* Regole pratiche (M_RegolePratiche) */
.rpr-pagina { max-width: 1000px; margin: 0 auto; }
.rpr-testa { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 10px; background: #fff; border: 1px solid #c9d3e3; border-top: 0; }
.rpr-testa label { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; font-weight: 700; color: #2f5d3a; flex: 1 1 220px; }
.rpr-testa input, .rpr-testa select { padding: 5px 8px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; font-size: .9rem; }
.rpr-testa .pulsante { width: auto; margin: 0; padding: 6px 12px; }
.rpr-corpo { background: #fff; border: 1px solid #c9d3e3; border-top: 0; border-radius: 0 0 12px 12px; padding: 12px; box-shadow: 0 6px 18px rgba(31, 45, 69, .06); }
.rpr-dati { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.rpr-dati label { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; font-weight: 700; color: #2f5d3a; }
.rpr-nome { flex: 1 1 280px; }
.rpr-note { flex: 1 1 100%; }
.rpr-dati input[type="text"], .rpr-dati textarea { padding: 5px 8px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; font-size: .9rem; background: #ececec; resize: vertical; }
.rpr-dati input[type="text"]:focus, .rpr-dati textarea:focus { background: #fff7b8; outline: none; }
.rpr-dati .cte-spunta, .rpr-colonne .cte-spunta { flex-direction: row; display: flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 400; color: #1d2430; padding: 3px 0; }
.rpr-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .rpr-colonne { grid-template-columns: 1fr; } }
.rpr-colonne fieldset { border: 1px solid #c9d3e3; border-radius: 8px; padding: 6px 12px 8px; margin: 0 0 12px; }
.rpr-colonne legend { font-size: .8rem; font-weight: 700; color: #1f4f8f; padding: 0 4px; }
.rpr-colonne input[type="checkbox"], .rpr-dati input[type="checkbox"] { width: 17px; height: 17px; accent-color: #1f5fbf; }
.rpr-pagina .salvato { box-shadow: 0 0 0 2px #7cc36b; }
.avviso-input { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 7px 9px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; }
.avviso-input:focus { background: #fff7b8; outline: none; }

/* Template comunicazioni (M_TemplateComunicazioni) */
.tco-tabella td.tco-corpo { white-space: pre-line; font-size: .82rem; color: #3b4658; }
.cte-riga.tco-email td { background: #dcecfb; }
.cte-riga.tco-notifica td { background: #e3f4dc; }
.cte-riga.tco-telefonata td { background: #fff1d6; }
.cte-riga.tco-email:hover td, .cte-riga.tco-notifica:hover td, .cte-riga.tco-telefonata:hover td { background: #fff7b8; }
.tco-testo { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; font-size: .92rem; background: #ececec; resize: vertical; }
.tco-testo:focus { background: #fff7b8; outline: none; }
.tco-testo.salvato { box-shadow: 0 0 0 2px #7cc36b; }
.tco-aiuto { font-size: .75rem; color: #5b6b82; margin-top: 4px; }
.tco-tabella td.tco-corpo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; text-align: left; }
.tco-tabella td.tco-corpo:hover { text-decoration: underline; color: #1f4f8f; }
.finestra-sopra { z-index: 80; }
.tco-nota { max-width: 760px; width: 100%; }
.tco-nota textarea { min-height: 260px; }
.tco-anteprima { white-space: pre-line; min-height: 70px; max-height: 180px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--bordo); border-radius: 6px; background: #ececec; font-size: .92rem; cursor: pointer; }
.tco-anteprima:hover { background: #fff7b8; }
.tco-vuoto { color: #8a96a8; font-style: italic; }
.tco-tabella td { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* Timeline del cliente (timeline.css) */
.tl-scheda { display: flex; flex-direction: column; gap: 8px; }
.tl-tasti { display: flex; gap: 6px; }
.tl-tasti .pulsante { width: auto; margin: 0; padding: 6px 16px; }
.tl-app { position: relative; display: flex; flex-direction: column; height: calc(100vh - 230px); min-height: 380px; border: 1px solid #c9d3e3; border-radius: 12px; overflow: hidden; background: #efeae2; font-family: "Segoe UI", Arial, sans-serif; }
.tl-barra { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #f7f8fa; border-bottom: 1px solid #d6d9dc; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tl-cerca { flex: 1 1 auto; min-width: 80px; height: 32px; padding: 0 12px; border: 1px solid #c9ced3; border-radius: 16px; font: inherit; font-size: 13px; }
.tl-cerca:focus { border-color: #3a8d73; box-shadow: 0 0 0 2px rgba(58,141,115,.13); outline: none; background: #fff; }
.tl-filtro { width: 130px; height: 32px; padding: 0 7px; border: 1px solid #c9ced3; border-radius: 5px; font: inherit; font-size: 13px; background: #fff; }
.tl-aggiorna { width: 32px; height: 32px; padding: 0; border: 1px solid #28745d; border-radius: 5px; color: #fff; font-size: 20px; line-height: 28px; background: #2f8066; cursor: pointer; }
.tl-aggiorna:hover { background: #286f59; }
.tl-conta { min-width: 24px; color: #687078; font-size: 12px; text-align: right; }
.tl-eventi { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 18px 28px; background-color: #efeae2;
  background-image: linear-gradient(45deg, rgba(255,255,255,.13) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.13) 75%), linear-gradient(45deg, rgba(255,255,255,.13) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.13) 75%);
  background-position: 0 0, 14px 14px; background-size: 28px 28px; }
.tl-giorno { text-align: center; margin: 10px 0 12px; }
.tl-giorno span { display: inline-block; padding: 5px 10px; border: 1px solid rgba(0,0,0,.06); border-radius: 12px; color: #526069; font-size: 11px; font-weight: 600; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
.tl-riga { display: flex; margin: 0 0 9px; }
.tl-evento { position: relative; min-width: 190px; max-width: 72%; cursor: pointer; outline: none; overflow-wrap: anywhere; }
.tl-evento:hover .tl-bolla { box-shadow: 0 2px 5px rgba(0,0,0,.17); }
.tl-evento:focus .tl-bolla { border-color: #4b9b81; box-shadow: 0 0 0 2px rgba(75,155,129,.18); }
.tl-evento.dir-ricevuta { margin-right: auto; }
.tl-evento.dir-ricevuta .tl-bolla { background: #fff; }
.tl-evento.dir-ricevuta .tl-bolla::before { content: ''; position: absolute; top: 10px; left: -8px; border-top: 7px solid transparent; border-right: 8px solid #fff; border-bottom: 7px solid transparent; }
.tl-evento.dir-inviata { margin-left: auto; }
.tl-evento.dir-inviata .tl-bolla { background: #d9fdd3; }
.tl-evento.dir-inviata .tl-bolla::after { content: ''; position: absolute; top: 10px; right: -8px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 8px solid #d9fdd3; }
.tl-evento.dir-neutra { max-width: 80%; margin: 0 auto; }
.tl-evento.dir-neutra .tl-bolla { background: #e7f3ff; }
.tl-evento.non-attivo { opacity: .6; }
.tl-testa { display: flex; align-items: center; gap: 9px; min-height: 18px; margin-bottom: 2px; padding: 0 3px; white-space: nowrap; }
.tl-tipo { color: #1f6f58; font-size: 12px; font-weight: 700; }
.tl-stato { max-width: 160px; overflow: hidden; text-overflow: ellipsis; color: #5d666d; font-size: 10px; }
.tl-stato.aperta { color: #b45309; font-weight: 700; }
.tl-stato.chiusa { color: #5f6b66; font-weight: 600; }
.tl-data { margin-left: auto; color: #7a8288; font-size: 10px; }
.tl-bolla { position: relative; padding: 9px 11px 7px; border: 1px solid rgba(0,0,0,.06); border-radius: 9px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.tl-titolo { margin-bottom: 4px; color: #1e2529; font-size: 14px; font-weight: 600; line-height: 19px; }
.tl-nascosto { display: none; }
.tl-allegati { display: inline-block; margin-top: 6px; padding: 3px 7px; border: 1px solid rgba(31,111,88,.22); border-radius: 10px; color: #1f6f58; font-size: 11px; font-weight: 600; background: rgba(255,255,255,.58); }
.tl-vuoto { width: 80%; max-width: 420px; margin: 55px auto 0; padding: 18px; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; color: #687078; text-align: center; background: rgba(255,255,255,.86); }
.tl-nessuno { display: none; }
.tl-ultimo { position: absolute; right: 22px; bottom: 18px; display: none; height: 32px; padding: 0 12px; border: 1px solid #c4c9ce; border-radius: 16px; color: #394147; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); cursor: pointer; }
.tl-menu { position: fixed; z-index: 90; display: none; width: 155px; padding: 4px 0; border: 1px solid #c9cdd1; border-radius: 5px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.24); }
.tl-menu button { display: block; width: 100%; padding: 7px 12px; border: 0; text-align: left; background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.tl-menu button:hover { background: #fff7b8; }
.tl-dettaglio { max-width: 680px; width: 100%; }
.tl-indirizzi { font-size: .82rem; color: #5b6b82; }
.tl-det-oggetto { font-weight: 700; font-size: 1rem; margin: 6px 0; }
.tl-det-testo { white-space: pre-line; max-height: 50vh; overflow-y: auto; padding: 10px 12px; border: 1px solid #d6dde8; border-radius: 8px; background: #fff; font-size: .92rem; line-height: 1.45; }
@media (max-width: 650px) { .tl-evento { min-width: 150px; max-width: 88%; } .tl-eventi { padding: 10px 11px 24px; } .tl-filtro { width: 92px; } }

/* Nuova telefonata */
.tel-box { max-width: 900px; width: 100%; }
.tel-griglia { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; }
@media (max-width: 760px) { .tel-griglia { grid-template-columns: 1fr; } }
.tel-griglia label[hidden] { display: none; }
.tel-griglia textarea { min-height: 240px; resize: vertical; }
.ml-allegati { display: flex; flex-direction: column; gap: 6px; }
.ml-allegati .pulsante { width: auto; align-self: flex-start; margin: 0; padding: 5px 14px; }
.ml-file { display: flex; align-items: center; gap: 8px; font-size: .85rem; background: #fff; border: 1px solid #d6dde8; border-radius: 6px; padding: 3px 6px; }
.ml-file span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-dim { color: #7a8288; font-size: .75rem; }
.ml-stato { margin-right: auto; font-size: .82rem; color: #5b6b82; }

/* Inserimento nel portale: riquadro di stato in basso a destra */
.ins-portale { position: fixed; right: 16px; bottom: 16px; z-index: 900; width: min(360px, calc(100vw - 32px));
  background: #fff; border: 1px solid #cfd8e3; border-left: 6px solid #e0a800; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 10px 12px; font-size: .95rem; text-align: left; }
.ins-portale.ok { border-left-color: #2e9d4f; }
.ins-portale.ko { border-left-color: #d02020; }
.ins-portale-testa { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ins-portale-x { border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: #667; width: auto; padding: 0 4px; }
.ins-portale-script { color: #667; font-size: .85rem; margin: 2px 0 6px; }
.ins-portale-testo { white-space: pre-line; }
.ins-portale-avvia { display: block; width: 100%; margin-top: 8px; padding: 7px 10px; border: 0; border-radius: 8px;
  background: #e0a800; color: #fff; font-weight: 700; letter-spacing: .03em; cursor: pointer; }
.ins-portale-avvia:hover { background: #c79500; }
.ins-portale-avvia[hidden] { display: none; }
.ins-portale.attesa { border-left-color: #1f6fd1; }
.ins-portale-scelta { display: flex; gap: 8px; margin-top: 8px; }
.ins-portale-scelta[hidden], .ins-portale-scelta button[hidden] { display: none; }
.ins-portale-scelta button { flex: 1; padding: 7px 10px; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; color: #fff; }
.ins-portale-completa { background: #2e9d4f; }
.ins-portale-annulla { background: #8a8f98; }
.ins-portale-scelta button:disabled { opacity: .5; cursor: default; }

/* Template CTE: fuori dalle date di validita' */
.cte-riga.fuori-date td { color: #8a8a8a; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.cte-validita { align-self: end; padding: 0 0 6px 4px; font-size: .9rem; color: #445; }

/* Fornitore colorato come la tipologia nelle operazioni */
.ope select.co.ope-fornitore.ele { background: var(--rosa) !important; border-color: var(--rosa-forte); font-weight: 600; }
.ope select.co.ope-fornitore.gas { background: var(--azzurro) !important; border-color: #8cc3f0; font-weight: 600; }
.ope select.co.ope-fornitore.dual { background: linear-gradient(90deg, var(--rosa) 50%, var(--azzurro) 50%) !important; font-weight: 600; }

/* Calendario ufficio */
.cal-pagina { max-width: 900px; margin: 0 auto; }
.cal-testa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
.cal-testa .pulsante { width: auto; }
.cal-mese { font-size: 1.25rem; font-weight: 700; min-width: 170px; text-align: center; }
.cal-legenda { margin-left: auto; display: flex; gap: 6px; }
.cal-legenda .cal-g { min-height: 0; padding: 3px 8px; font-size: .85rem; }
.cal-info { color: #556; font-size: .9rem; margin-bottom: 8px; }
.cal-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-intesta { text-align: center; font-weight: 700; color: #556; font-size: .9rem; }
.cal-g { min-height: 64px; border: 1px solid #d5dbe3; border-radius: 8px; background: #eef0f3; color: #777; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.cal-g.lav { background: #e3f4e6; border-color: #9fd3a9; color: #1f5130; }
.cal-g.oggi { outline: 2px solid #1f4e79; outline-offset: 1px; }
.cal-g.cliccabile { cursor: pointer; }
.cal-g.cliccabile:hover { filter: brightness(.96); }
.cal-num { font-weight: 700; font-size: 1.05rem; }
.cal-nota { font-size: .75rem; line-height: 1.15; }
@media (max-width: 600px) { .cal-g { min-height: 48px; padding: 4px; } .cal-nota { display: none; } }

/* testata cliente: carta d'identita' (occhio verde / freccia su fondo bianco) */
.mini.doc.ci-testata { width: 34px; height: 34px; }
.mini.doc.ci-testata .ico { width: 17px; height: 17px; }

/* Avviso breve ELEGAS.IT: si chiude da solo, non blocca il lavoro */
.avviso-fondo.breve { background: transparent; pointer-events: none; align-items: flex-start; padding-top: 18vh; }
.avviso-fondo.breve .avviso-box { pointer-events: auto; width: 320px; cursor: pointer; animation: avviso-entra .15s ease-out; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.avviso-fondo.breve .avviso-testa img { height: 32px; }
.avviso-fondo.breve .avviso-corpo { padding: 12px 16px 14px; font-weight: 600; }
@keyframes avviso-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* testata cliente: la riga nome - codice fiscale si copia con un clic */
.fascia.nome.copiabile { cursor: copy; }
.fascia.nome.copiabile:hover { filter: brightness(1.04); }
.fascia.contatti .copiabile { cursor: copy; border-radius: 4px; padding: 0 3px; }
.fascia.contatti .copiabile:hover { background: rgba(255,255,255,.55); }

/* ---------- Chat tra operatori: finestra in basso a destra ---------- */
.nav button.chat { position: relative; }
.nav button.chat .chat-conta { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ffd400; color: #7a0000; font-size: .78rem; font-weight: 800; line-height: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.nav button.chat.chat-nuovi { animation: chat-lampeggia 1.6s ease-in-out infinite; }
@keyframes chat-lampeggia { 50% { filter: brightness(1.35); } }
.chat-pannello { position: fixed; right: 16px; bottom: 16px; z-index: 950; width: 400px; height: min(620px, calc(100vh - 32px)); max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; background: #f4f6f9; border: 1px solid #b9c4d3; border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.3); overflow: hidden; }
.chat-testa { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #1f4e79; color: #fff; }
.chat-titolo { font-weight: 800; font-size: 1.05rem; }
.chat-dafare { font-size: .85rem; color: #d7e3f1; }
.chat-dafare.rosso { color: #fff; background: #c00000; border-radius: 10px; padding: 1px 8px; font-weight: 700; }
.chat-solo { margin-left: auto; font-size: .82rem; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.chat-x { width: auto; border: 0; background: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.chat-lista { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.chat-msg { background: #fff; border: 1px solid #d5dce6; border-radius: 9px; padding: 6px 9px; position: relative; max-width: 92%; align-self: flex-start; }
.chat-msg.mio { align-self: flex-end; background: #e5f4e8; border-color: #b6dcbf; }
.chat-msg.nuovo { border-left: 4px solid #c00000; }
.chat-msg.chiuso { opacity: .62; }
.chat-msg-testa { color: rgb(47, 85, 151); font-size: .74rem; font-weight: 700; cursor: pointer; padding-right: 54px; }
.chat-msg.mio .chat-msg-testa { cursor: default; }
.chat-msg-testo { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; margin-top: 2px; }
.chat-allegato { width: auto; margin-top: 4px; border: 1px solid #c9d4e2; background: #f2f6fb; border-radius: 6px; padding: 2px 8px; font-size: .8rem; cursor: pointer; }
.chat-fatto { position: absolute; top: 5px; right: 6px; width: auto; border: 1px solid #5f9b34; background: #92d050; color: #1f3d0c; border-radius: 6px; padding: 0 6px; font-size: .68rem; font-weight: 800; cursor: pointer; }
.chat-chiuso { position: absolute; top: 6px; right: 8px; font-size: .68rem; color: #778; }
.chat-scrivi { border-top: 1px solid #cdd6e2; padding: 8px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.chat-a { display: flex; gap: 6px; }
.chat-a select { flex: 1; min-width: 0; }
.chat-a select#chat-tipo { flex: 0 0 110px; }
.chat-risposta { font-size: .8rem; background: #fff6d6; border: 1px solid #ecd78a; border-radius: 6px; padding: 3px 6px; }
.chat-scrivi textarea { width: 100%; resize: none; font: inherit; font-size: .92rem; border: 1px solid #c3ccd8; border-radius: 6px; padding: 6px; }
.chat-tasti { display: flex; align-items: center; gap: 8px; }
.chat-tasti .pulsante { width: auto; padding: 6px 12px; }
.chat-tasti #chat-invia { margin-left: auto; }
.chat-file { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-togli { width: auto; border: 0; background: none; color: #a00; font-weight: 800; cursor: pointer; padding: 0 3px; }
@media (max-width: 600px) { .chat-pannello { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100vh; border-radius: 0; } }

/* ---------- Mail interna ---------- */
.int-pannello .chat-testa { background: #1f4e79; }
.int-schede { display: flex; gap: 2px; }
.int-schede button { width: auto; border: 1px solid #8fb0d8; background: transparent; color: #d7e3f1; border-radius: 6px; padding: 1px 8px; font-size: .78rem; cursor: pointer; }
.int-schede button.attiva { background: #fff; color: #1f4e79; font-weight: 700; }
.int-voce { cursor: pointer; align-self: stretch; max-width: none; }
.int-voce:hover { box-shadow: 0 2px 5px rgba(0,0,0,.15); }
.int-cliente { font-weight: 800; font-size: .9rem; color: #12305a; }
.int-oggetto { font-size: .85rem; font-weight: 600; }
.int-anteprima { font-size: .8rem; color: #556; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.int-piede { border-top: 1px solid #cdd6e2; padding: 6px 10px; font-size: .78rem; color: #556; background: #fff; display: flex; align-items: center; gap: 8px; }
.int-piede .pulsante { width: auto; margin-left: auto; padding: 6px 12px; white-space: nowrap; }
.int-senza { color: #778 !important; font-style: italic; }
.int-box { max-width: 620px; max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.int-box h1 { margin-bottom: 0; }
.int-box label[hidden] { display: none; }
.int-box label { display: flex; flex-direction: column; gap: 3px; font-size: .85rem; }
.int-box textarea { width: 100%; padding: 8px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; resize: vertical; }
.int-cli { font-weight: 800; color: #12305a; margin: 0; }
.int-a { display: flex; gap: 6px; }
.int-a select { flex: 1; min-width: 0; }
.int-a #int-tipo { flex: 0 0 120px; }
.int-allega { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.int-allega .pulsante { width: auto; padding: 5px 10px; }
.int-allega .pulsante.voce-attiva { background: #E4191C; color: #fff; animation: voce-pulsa 1.2s ease-in-out infinite; }
@keyframes voce-pulsa { 50% { opacity: .65; } }
.int-docs { max-height: 180px; overflow-y: auto; border: 1px solid #d5dce6; border-radius: 6px; padding: 4px 8px; background: #f7f9fc; }
.int-box label.int-doc { flex-direction: row; align-items: center; gap: 6px; font-size: .82rem; padding: 2px 0; }
.int-doc-nome { color: #778; font-size: .75rem; }
.int-elenco-all { display: flex; flex-wrap: wrap; gap: 4px; }
.int-file { font-size: .8rem; background: #f2f6fb; border: 1px solid #c9d4e2; border-radius: 6px; padding: 1px 4px 1px 8px; }
.int-conversazione { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px; background: #eef3f9; border-radius: 8px; }
.int-msg { background: #fff; border: 1px solid #d5dce6; border-radius: 9px; padding: 6px 9px; max-width: 92%; align-self: flex-start; }
.int-msg.mio { align-self: flex-end; background: #e5f4e8; border-color: #b6dcbf; }
.int-msg.scelto { box-shadow: 0 0 0 2px #f0a500; }
.int-msg-testa { font-size: .76rem; color: rgb(47, 85, 151); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.int-msg-oggetto { font-weight: 700; font-size: .88rem; margin-top: 2px; }
.int-msg-testo { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; margin: 3px 0; }
.int-ope { font-weight: 400; font-size: .75rem; color: #556; background: #eef; border-radius: 5px; padding: 0 5px; }
.int-rispondi[hidden] { display: none; }
.int-rispondi { display: flex; flex-direction: column; gap: 5px; }
.int-risp-a { font-size: .82rem; background: #fff6d6; border: 1px solid #ecd78a; border-radius: 6px; padding: 3px 6px; }
.int-box .int-fatto { background: #92d050; color: #1f3d0c; }
.int-dettaglio .nota-pulsanti { flex-wrap: wrap; }
.tl-tasti .tl-interna { background: #1f4e79; }
.tl-evento.tipo-interna .tl-bolla { background: #fff1c9; border-color: #e6c35c; }
.tl-evento.tipo-interna .tl-tipo { color: #8a5a00; }
.tl-evento.evidenziato .tl-bolla { box-shadow: 0 0 0 3px #f0a500; animation: int-lampo 1s ease-in-out 3; }
@keyframes int-lampo { 50% { box-shadow: 0 0 0 6px rgba(240,165,0,.35); } }

/* ---------- Tasti della barra: icona + scritta piccola sotto ---------- */
.nav button.nav-ico { position: relative; height: 38px; min-width: 58px; padding: 2px 8px 1px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: .58rem; font-weight: 800; line-height: 1; letter-spacing: .04em; text-transform: uppercase; animation: none;
  background: #cfe6fb !important; color: #1f4f8f !important; border: 1px solid #1f5fbf !important; }
.nav button.nav-ico .ico { width: 18px; height: 18px; }
.nav button.nav-ico .chat-conta { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #d32f2f; color: #fff; font-size: .78rem; font-weight: 800; line-height: 20px; letter-spacing: 0; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.nav button.nav-ico.chat-nuovi { animation: none; }
.nav button.nav-ico.chat-nuovi .chat-conta { animation: conta-pulsa 1.4s ease-in-out infinite; }
@keyframes conta-pulsa { 50% { transform: scale(1.25); } }
.chat-cli { font-size: .82rem; background: #eef4ff; border: 1px solid #b9cdf0; border-radius: 6px; padding: 3px 6px; }
.chat-cli[hidden] { display: none; }
.chat-allegato.chat-cliente { background: #eef4ff; border-color: #b9cdf0; color: #12305a; font-weight: 700; margin-right: 4px; }

/* Tutti i tasti Archivia (cliente, fornitura, operazione): bordo rosso */
.nav button.archivia, button.forn-a, button[data-archivia] { border: 1px solid #d32f2f !important; }
.nav button.archivia:disabled, button.forn-a:disabled, button[data-archivia]:disabled { border-color: #e9a3a3 !important; }

/* tendina della potenza */
.pot-tendina { position: absolute; z-index: 70; background: #fff; border: 1px solid #1f5fbf; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,.2); padding: 3px 0; }
.pot-voce { padding: 4px 12px; cursor: pointer; text-align: center; font-weight: 600; }
.pot-voce:hover { background: var(--campo-focus, #fff3b0); }
.pot-voce.scelta { background: #cfe6fb; }

/* ---------- Piano ricontatti ---------- */
.pia-pagina { max-width: none; }
.pia-tabella { overflow-x: auto; border: 1px solid #d5dbe3; border-radius: 8px; background: #fff; }
table.pia { border-collapse: collapse; font-size: .85rem; }
table.pia th, table.pia td { border-bottom: 1px solid #edf1f6; padding: 3px 3px; text-align: center; white-space: nowrap; }
table.pia thead th { background: #eef3f9; color: #1f4e79; font-size: .75rem; position: sticky; top: 0; }
table.pia th.oggi, table.pia td.oggi { background: #fff6d6; }
table.pia .pia-op { text-align: left; padding: 3px 8px; position: sticky; left: 0; background: #f7f9fc; z-index: 1; min-width: 120px; }
.pia-nome { display: block; font-weight: 400; font-size: .7rem; color: #778; }
table.pia input.pia-n, table.pia input.pia-base { width: 40px; height: 26px; padding: 0 2px; text-align: center; border: 1px solid #c9d4e2; border-radius: 5px; font: inherit; -moz-appearance: textfield; }
table.pia input::-webkit-outer-spin-button, table.pia input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
table.pia input.pia-n::placeholder { color: #9aa6b5; }
table.pia input.pia-n.cambiato { background: #fff3b0; border-color: #e0b400; font-weight: 700; }
table.pia input.pia-n.zero { background: #eceff3; color: #888; }
table.pia input.pia-base { font-weight: 700; background: #fff; border-color: #1f5fbf; }
table.pia .pia-imp { background: #f7f9fc; }
table.pia .pia-tot { font-weight: 700; background: #eef3f9; }
table.pia tr.pia-piccoli .pia-op { color: #8a5a00; }
table.pia tfoot th, table.pia tfoot td { border-top: 2px solid #c9d4e2; }
table.pia td.pia-df { font-weight: 700; line-height: 1.1; }
table.pia td.pia-df small { display: block; font-weight: 400; font-size: .65rem; }
table.pia td.pia-df.verde { background: #e3f4e6; color: #1f5130; }
table.pia td.pia-df.rosso { background: #fde2e2; color: #a01818; }

.pia-pari { background: #fff6d6; border: 1px solid #ecd78a; border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; font-size: .95rem; }
table.pia td.pia-nuovi { line-height: 1.1; color: #334; }
table.pia td.pia-nuovi small { display: block; font-size: .65rem; color: #778; }
table.pia td.pia-df.passato { color: #aaa; }

/* ---------- Regole ricontatti ---------- */
.reg-tabella { overflow-x: auto; border: 1px solid #d5dbe3; border-radius: 8px; background: #fff; }
.reg-tabella.reg-attesa { opacity: .5; pointer-events: none; }
table.reg { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.reg th { background: #eef3f9; color: #1f4e79; font-size: .78rem; padding: 6px; text-align: left; }
table.reg td { border-bottom: 1px solid #edf1f6; padding: 4px 6px; }
table.reg td.centro { text-align: center; }
table.reg input[type="text"], table.reg input[type="number"], table.reg select { width: 100%; height: 30px; padding: 0 6px; border: 1px solid #c9d4e2; border-radius: 5px; font: inherit; }
table.reg input[data-c="mesi"] { width: 70px; text-align: center; }
table.reg select.reg-prio { background: #e3f4e6; color: #1f5130; font-weight: 700; }
table.reg select.reg-escl { background: #fde2e2; color: #a01818; font-weight: 700; }
table.reg td.reg-n { font-weight: 800; text-align: right; white-space: nowrap; }
table.reg td.reg-forn { font-size: .75rem; color: #667; }
table.reg tr.spenta td { opacity: .5; }
table.reg tr.reg-nuova td { background: #f7f9fc; border-top: 2px solid #c9d4e2; }
table.reg .pulsante { width: auto; }

/* BackOffice: tasti di lavoro su due righe allineati a destra; la navigazione resta su una riga */
.barra .nav { flex: 0 0 auto; flex-wrap: nowrap; }
.barra-destra.due-righe { display: grid; grid-auto-flow: row; gap: 3px; justify-content: end; margin-left: auto; }
.barra-destra.due-righe .pulsante { height: 30px; min-width: 86px; }

.dual-rientro[hidden] { display: none !important; }

/* ---------- OGGI: clienti da ricontattare ---------- */
.oggi-pagina { max-width: 1200px; margin: 0 auto; }
.oggi-operatori { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.oggi-operatori .pulsante { width: auto; padding: 4px 10px; }
.oggi-operatori .pulsante.attiva { background: #1f4e79 !important; color: #fff !important; }
.oggi-operatori small { font-weight: 400; }
.oggi-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.oggi-riga { display: grid; grid-template-columns: 34px minmax(220px, 1.3fr) minmax(150px, .6fr) minmax(320px, 2fr); gap: 10px; align-items: center;
  background: #fff; border: 1px solid #d5dce6; border-left: 5px solid #8fb0d8; border-radius: 9px; padding: 8px 10px; }
.oggi-riga.importante { border-left-color: #e0a800; }
.oggi-riga.fatta { opacity: .55; background: #f4f6f9; }
.oggi-riga.attesa { opacity: .5; pointer-events: none; }
.oggi-n { font-weight: 800; color: #8899aa; text-align: center; }
.oggi-nome { width: auto; border: 0; background: none; padding: 0; font: inherit; font-weight: 800; font-size: 1rem; color: #12305a; cursor: pointer; text-align: left; }
.oggi-nome:hover { text-decoration: underline; }
.oggi-imp { margin-left: 6px; background: #e0a800; color: #fff; border-radius: 5px; padding: 0 5px; font-size: .65rem; font-weight: 800; }
.oggi-tent { margin-left: 6px; background: #fde2e2; color: #a01818; border-radius: 5px; padding: 0 5px; font-size: .65rem; font-weight: 700; }
.oggi-info { font-size: .78rem; color: #667; }
.oggi-motivo { font-size: .8rem; color: #8a5a00; font-weight: 600; }
.oggi-tel a { font-weight: 700; color: #1f4e79; text-decoration: none; white-space: nowrap; }
.oggi-azioni { display: flex; flex-direction: column; gap: 4px; }
.oggi-nota { height: 28px; padding: 0 6px; border: 1px solid #c9d4e2; border-radius: 5px; font: inherit; font-size: .85rem; }
.oggi-tasti { display: flex; flex-wrap: wrap; gap: 4px; }
.oggi-tasti .oggi-es { width: auto; padding: 3px 8px; font-size: .75rem; height: auto; }
.oggi-tasti .oggi-es.ok { background: #e3f4e6 !important; border-color: #2e9d4f !important; color: #1f5130 !important; }
.oggi-tasti .oggi-es.no { background: #fde2e2 !important; border-color: #d02020 !important; color: #a01818 !important; }
.oggi-tasti .oggi-es.data { background: #fff6d6 !important; border-color: #e0a800 !important; color: #6b4a00 !important; }
.oggi-esito { font-size: .9rem; }
.avviso-input + .avviso-input { margin-top: 6px; }
@media (max-width: 800px) { .oggi-riga { grid-template-columns: 28px 1fr; } .oggi-tel, .oggi-azioni, .oggi-esito { grid-column: 2; } }

/* spunta sotto al numero dell'operazione (archiviazione di piu' operazioni insieme) */
.ope { position: relative; }
.ope-spunta { position: absolute; left: 3px; bottom: 4px; width: 54px; display: flex; justify-content: center; cursor: pointer; }
.ope-spunta input { width: 18px; height: 18px; accent-color: #d32f2f; cursor: pointer; }
.ope:has(.ope-spunta input:checked) { outline: 2px solid #d32f2f; outline-offset: -1px; }
.pulsante.ope-arch-sel { width: auto; padding: 3px 12px; margin-left: 8px; border: 1px solid #d32f2f !important; color: #a01818 !important; font-weight: 800; }

.oggi-operatori .pulsante.oggi-rifai { margin-left: auto; border-color: #d32f2f !important; color: #a01818 !important; font-weight: 800; }

/* ---------- Resoconto ricontatti ---------- */
.res-pagina { max-width: 1200px; margin: 0 auto; }
.res-periodo .pulsante.attiva { background: #1f4e79 !important; color: #fff !important; }
.res-periodo label { display: flex; align-items: center; gap: 4px; font-size: .85rem; }
.res-periodo input[type="date"] { height: 32px; border: 1px solid #c9d4e2; border-radius: 6px; padding: 0 6px; font: inherit; }
table.res { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #d5dbe3; border-radius: 8px; overflow: hidden; font-size: .9rem; margin-top: 6px; }
table.res th, table.res td { padding: 6px 8px; border-bottom: 1px solid #edf1f6; text-align: center; }
table.res thead th { background: #eef3f9; color: #1f4e79; font-size: .75rem; }
table.res tbody th, table.res tfoot th { text-align: left; }
table.res tbody tr[data-res-op] { cursor: pointer; }
table.res tbody tr[data-res-op]:hover { background: #fff6d6; }
table.res tr.res-tot th, table.res tr.res-tot td { background: #eef3f9; font-weight: 800; border-top: 2px solid #c9d4e2; }
.res-perc { font-weight: 800; }
.res-perc.verde { color: #1f7a3a; } .res-perc.giallo { color: #8a5a00; } .res-perc.rosso { color: #c00000; }
.res-h { margin: 16px 0 4px; font-size: 1rem; color: #12305a; }
table.res-det td { text-align: left; }
table.res-det tr.res-nonfatto td { background: #fff4f4; }
.res-nf { color: #c00000; font-weight: 700; font-size: .8rem; }
.barra-destra { margin-left: auto; }

/* offerte che non sono Ele/Gas: righe verde chiaro (come la timeline), gialle al passaggio del mouse */
table.griglia.altre tbody td.offerta, table.griglia.altre tbody td.cella { background: #d9fdd3 !important; }
table.griglia.altre tbody tr:hover td.offerta, table.griglia.altre tbody tr:hover td.cella { background: var(--campo-focus) !important; }

.oggi-tasti .oggi-es.agente { background: #ece3fb !important; border-color: #7a4fc9 !important; color: #4b2a8a !important; }
.oggi-riga.passata { border-left-color: #7a4fc9; }
.oggi-passata { margin-top: 3px; font-size: .8rem; background: #ece3fb; color: #4b2a8a; border-radius: 6px; padding: 2px 6px; font-weight: 600; }

/* tendine agenti con il nome: allineate a sinistra */
select.con-nome, select.con-nome option { text-align: left; text-align-last: left; }

/* testata cliente: quadrato grigio con il codice dell'agente associato in fondo alla riga nome - codice fiscale */
.agente-testata { flex: 0 0 34px; width: 34px; height: 34px; padding: 0; box-sizing: border-box; font-size: .85rem !important; margin-bottom: 6px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #9aa3ae; border-radius: var(--raggio); background: #d9dde3; color: #3d4652; font-weight: 800; font-size: 1rem; white-space: nowrap; overflow: hidden; }

/* righe della testata cliente (nome - CF e contatti) tutte alte uguali, come i tasti quadrati */
#testata-cliente .fascia-riga { align-items: flex-start; }
#testata-cliente .fascia-riga .fascia { height: 34px; box-sizing: border-box; padding: 0 10px; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#testata-cliente .fascia-riga .mini { height: 34px; }
.cte-campi label[hidden]{display:none}
/* finestra CTE piu' compatta: alcune sezioni affiancate a due a due */
.cte-sezioni { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.cte-sezioni > fieldset { grid-column: 1 / -1; min-width: 0; padding: 4px 10px 8px; margin: 0; }
.cte-sezioni > fieldset.cte-meta { grid-column: auto; }
.cte-campi { gap: 6px 10px; }
.cte-campi .cte-spunta { padding: 2px 0; }
.cte-box h1 { margin-bottom: 4px; }
.cte-meta .cte-validita { font-size: .8rem; padding-bottom: 2px; flex: 1 1 100%; }
/* Claude: tasto CONTROLLO e finestra della proposta */
.pulsante.ai-tasto { width: auto; }
.pulsante.ai-tasto:disabled { opacity: .7; cursor: wait; }
.ai-box { background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.3); width: min(820px, 100%); max-height: 90vh; overflow-y: auto; padding: 14px 18px; }
.ai-testa { font-size: 1.1rem; font-weight: 700; color: #4b2a8c; margin-bottom: 8px; }
.ai-ok { padding: 12px 0; font-size: 1rem; color: #2f5d3a; }
.ai-modifiche { margin: 0 0 10px; padding-left: 20px; font-size: .88rem; color: #445; }
.ai-etichetta { font-size: .75rem; font-weight: 700; color: #2f5d3a; margin: 8px 0 3px; }
.ai-legenda { font-weight: 400; margin-left: 8px; }
.ai-testo { white-space: pre-wrap; border: 1px solid #c9d3e3; border-radius: 8px; padding: 8px 10px; font-size: .92rem; line-height: 1.45; background: #fbfbfd; max-height: 50vh; overflow-y: auto; }
.ai-testo.ai-ogg { max-height: none; }
.ai-box del { background: #fde2e2; color: #a01818; text-decoration: line-through; }
.ai-box ins { background: #d9f5d3; color: #1d5e14; text-decoration: none; }
.ai-box .pulsante { width: auto; min-width: 110px; }
.ai-box .btn-rosso { border: 1px solid #d32f2f !important; }
.ai-box ins.ai-acapo { font-size: .8em; padding: 0 2px; border-radius: 3px; }
.ai-note { background: #f4f0fc; border: 1px solid #c9b8ef; border-radius: 8px; padding: 6px 10px; font-size: .82rem; color: #3b2a66; margin-bottom: 6px; }
.ai-note[hidden] { display: none; }
.ai-note ul { margin: 4px 0 0; padding-left: 18px; }
.ai-dacompletare { color: #a01818; font-weight: 700; }
.tl-dettaglio .nota-pulsanti .pulsante { width: auto; }
/* Registro attivita' (solo 01) */
.rg-filtri label { display: flex; align-items: center; gap: 6px; }
.rg-filtri select, .rg-filtri input[type="search"] { padding: 4px 6px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; }
.rg-filtri .pulsante { width: auto; padding: 4px 10px; }
.rg-riep { margin-bottom: 10px; }
.rg-riep tbody tr { cursor: pointer; }
.rg-riep tbody tr:hover td, .rg-riep tbody tr.attiva td { background: #fff7b8; }
.rg-tab td { font-size: .85rem; vertical-align: top; }
.rg-ora { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rg-puls { font-weight: 600; }
.rg-det { color: #5b6b82; font-size: .8rem !important; }
.rg-cli { color: #1f5fbf; cursor: pointer; text-decoration: underline; }
.rg-filtra { padding: 0 5px; }
.oggi-finita { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; margin-bottom: 8px; background: #e3f4dc; border: 1px solid #9fd18f; border-radius: 10px; font-weight: 600; color: #2f5d3a; }
.oggi-finita .pulsante { width: auto; padding: 8px 18px; }

/* =====================================================================
   App installata con la barra del titolo nascosta (Window Controls Overlay):
   restano solo i tasti di Windows in alto a destra. La finestra si sposta
   trascinando la barra dei pulsanti; il riquadro Relazioni scende sotto i tasti.
   ===================================================================== */
@media (display-mode: window-controls-overlay) {
  .guscio { position: relative; }
  .guscio::before {
    content: ""; position: absolute; top: 0; right: 0;
    width: 320px; height: env(titlebar-area-height, 32px);
    -webkit-app-region: drag; app-region: drag;
  }
  .guscio > .barra { padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 8px); }
  .barra { -webkit-app-region: drag; app-region: drag; }
  .barra button, .barra input, .barra select, .barra a, .barra label,
  .barra .menu-operatore, .barra .tendina, .barra-destra {
    -webkit-app-region: no-drag; app-region: no-drag;
  }
  /* finestre e avvisi aperti sopra la barra: non sono maniglia, i loro tasti rispondono al mouse */
  .finestra, .avviso-fondo {
    -webkit-app-region: no-drag; app-region: no-drag;
  }
}

/* Mascotte in alto a sinistra, prima del codice operatore */
.barra .mascotte { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; user-select: none; }

/* ---------- PULSANTI: finestra con le maschere abilitate ---------- */
.nav button[hidden] { display: none !important; }
.pulsanti-box { width: min(620px, calc(100vw - 32px)); }
.pulsanti-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 14px 16px; }
.pulsanti-griglia .pulsante { width: 100%; height: 52px; padding: 0 8px; font-size: .72rem; line-height: 1.15; font-weight: 700; text-align: center; }

/* ---------- PERMESSI MASCHERE (solo 01) ---------- */
.pms-scorri { overflow: auto; max-height: calc(100vh - 170px); }
.pms-tabella { border-collapse: collapse; font-size: .82rem; }
.pms-tabella th, .pms-tabella td { border: 1px solid #c9d6e6; padding: 4px 6px; text-align: center; }
.pms-tabella thead th { position: sticky; top: 0; background: #e6eef8; z-index: 1; min-width: 46px; vertical-align: bottom; }
.pms-tabella thead th small { display: block; font-weight: 400; font-size: .68rem; color: #4a5d75; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pms-tabella tbody th { text-align: left; white-space: nowrap; background: #f4f8fc; position: sticky; left: 0; }
.pms-tabella tbody tr:hover td, .pms-tabella tbody tr:hover th { background: #fff6cf; }
.pms-tabella input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

/* maschera aperta con la sola V: niente tasti per creare/duplicare, campi grigi */
body.sola-lettura :is(#cte-nuova, #cte-duplica, #forn-nuovo, #pdc-nuova, #rpr-duplica, #rpr-nuova, #tco-nuovo, #tco-duplica) { display: none !important; }
body.sola-lettura :is([data-corpo], #tco-anteprima) { pointer-events: none; }
body.sola-lettura :is([data-cte-campo], [data-fcampo], [data-pcampo], [data-rcampo], [data-tco-campo]) { background: #eef1f5 !important; color: #4a5d75; }

/* PERMESSI: due spunte V e M in ogni casella */
.pms-coppia { display: inline-flex; gap: 6px; }
.pms-coppia label { display: inline-flex; flex-direction: column; align-items: center; font-size: .62rem; font-weight: 700; color: #4a5d75; cursor: pointer; }
.pms-tabella td { padding: 3px 5px; }
.pms-esito { margin-left: 12px; font-size: .85rem; font-weight: 700; color: #1e7b34; background: #e3f5e7; border-radius: 6px; padding: 2px 10px; opacity: 0; transition: opacity .3s; }
.pms-esito.visibile { opacity: 1; }

/* PULSANTI divisi per categoria */
.pulsanti-gruppi { padding: 8px 16px 4px; max-height: calc(100vh - 200px); overflow: auto; }
.pulsanti-gruppo { border: 1px solid #c9d6e6; border-radius: 8px; margin: 0 0 10px; padding: 0; }
.pulsanti-gruppo legend { font-size: .72rem; font-weight: 700; color: #1f4e79; text-transform: uppercase; padding: 0 6px; margin-left: 8px; }
.pulsanti-gruppo .pulsanti-griglia { padding: 6px 10px 10px; }
.pms-tabella tr.pms-categoria th { background: #1f4e79; color: #fff; text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; position: static; }

/* ---------- TOTALI ---------- */
.tot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 1100px) { .tot { grid-template-columns: 1fr; } }
.tot-anno { text-align: center; font-size: 1.3rem; font-weight: 700; color: #1f4e79; margin-bottom: 6px; }
.tot-anno select { font-size: 1.1rem; font-weight: 700; color: #1f4e79; border: 1px solid #8fa7c4; border-radius: 6px; padding: 2px 8px; }
.tot-blocco { background: var(--scheda, #dfe9f5); border: 1px solid #b8c9de; border-radius: 10px; padding: 8px; margin-bottom: 12px; }
.tot-titolo { font-size: .78rem; font-weight: 700; color: #1f4e79; text-transform: uppercase; margin-bottom: 4px; }
.tot-scorri { max-height: 230px; overflow: auto; background: #fff; border: 1px solid #c9d6e6; }
.tot-tab { border-collapse: collapse; width: 100%; font-size: .78rem; }
.tot-tab th, .tot-tab td { border: 1px solid #e1e8f0; padding: 2px 4px; text-align: center; white-space: nowrap; }
.tot-tab thead th { position: sticky; top: 0; background: #e6eef8; color: #1f4e79; z-index: 1; }
.tot-tab thead tr.tot-somma th { top: 22px; background: #fff6cf; }
.tot-forte { font-weight: 700; }
.tot-tab tbody tr:hover td { background: #fff6cf; }
.tot-tab .tot-voce { text-align: left; }
.tot-scorri.tot-alto { max-height: 420px; }

/* TOTALI: una colonna, pulsanti degli anni da confrontare in alto */
.tot { display: block; max-width: 1100px; }
.tot-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; position: sticky; top: 0; z-index: 3; background: var(--sfondo, #cfd5dc); padding: 4px 0; }
.tot-barra .tot-anno { margin: 0 10px 0 0; }
.tot-confronta { font-size: .8rem; font-weight: 700; color: #1f4e79; margin-right: 4px; }
.tot-barra .pulsante { height: 30px; padding: 0 10px; font-size: .8rem; width: auto; }
.tot-barra .pulsante.attiva { background: #f7c89b !important; color: #12305a !important; }
.tot-barra .torna-maschera { margin-left: auto; }
.tot-anno-pic { background: #1f4e79; color: #fff; border-radius: 5px; padding: 0 6px; margin-left: 6px; font-size: .72rem; }
.tot-blocco.tot-confronto { margin-top: -6px; background: #eef1f5; border-style: dashed; }
.tot-blocco.tot-confronto .tot-anno-pic { background: #c0630f; }

/* TOTALI: fascia "fino a oggi" */
.tot-oggi-due { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 900px) { .tot-oggi-due { grid-template-columns: 1fr; } }
.tot-tab.tot-oggi { background: #fff; font-size: .82rem; }
.tot-tab.tot-oggi thead th { position: static; }
.tot-tab.tot-oggi th small { display: block; font-weight: 400; font-size: .66rem; color: #4a5d75; }
.tot-tab.tot-oggi td, .tot-tab.tot-oggi th { padding: 4px 6px; }
.tot-diff { font-size: .72rem; font-weight: 700; margin-left: 4px; color: #4a5d75; }
.tot-diff.su { color: #1e7b34; }
.tot-diff.giu { color: #c62828; }

/* TOTALI: numeri cliccabili e finestra del dettaglio */
.tot-tab .tot-clic { cursor: pointer; }
.tot-tab .tot-clic:hover { background: #1f4e79 !important; color: #fff !important; }
.tot-det-box { width: min(1000px, calc(100vw - 32px)); }
.tot-det-testa { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #e6eef8; color: #1f4e79; }
.tot-det-testa #tot-det-conta { font-size: .8rem; color: #4a5d75; }
.tot-det-testa .pulsante { margin-left: auto; width: auto; height: 30px; padding: 0 12px; }
.tot-det-lista { max-height: calc(100vh - 160px); overflow: auto; }
.tot-tab.tot-det { font-size: .8rem; }
.tot-tab.tot-det tbody tr { cursor: pointer; }
.tot-tab.tot-det td { padding: 3px 6px; }
.barra-destra .btn-torna { background: #f7c89b !important; color: #12305a !important; font-size: .8rem; }
.tot-tab.tot-det tr.tot-det-ultimo td { background: #fff6cf; font-weight: 700; }
/* TOTALI SKY */
.tot.sky { max-width: none; }
.sky-scorri { max-height: calc(100vh - 170px); }
.sky-tab { font-size: .82rem; }
.sky-tab td, .sky-tab th { padding: 3px 8px; }
.sky-tab tr.sky-gruppo td { background: #1f4e79; color: #fff; font-weight: 700; text-transform: uppercase; font-size: .74rem; }
.sky-tab tr.tot-somma td { background: #fff6cf; font-weight: 700; }
.sky-tab tr.sky-tot td { background: #f7c89b; font-size: .9rem; }
/* colonna "Tipo di pratica" ferma quando si scorre in orizzontale */
.sky-tab .tot-voce { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: inset -1px 0 #c9d6e6; }
.sky-tab thead th.tot-voce { z-index: 3; background: #e6eef8; }

/* Frasi del caricamento */
.frase-caricamento { max-width: 560px; margin: 40px auto; text-align: center; color: #1f4e79; padding: 0 16px; }
.frase-testo { font-size: 1.25rem; font-style: italic; line-height: 1.45; }
.frase-autore { margin-top: 10px; font-size: .9rem; color: #4a5d75; }
.frase-sotto { margin-top: 22px; font-size: .8rem; color: #6b7d93; display: inline-flex; align-items: center; gap: 8px; }
.frase-giro { width: 14px; height: 14px; border: 2px solid #b8c9de; border-top-color: #1f4e79; border-radius: 50%; animation: frase-gira .8s linear infinite; }
@keyframes frase-gira { to { transform: rotate(360deg); } }
.doc-tasti.doc-dual { font-size: .62rem; font-weight: 700; color: #8a99ab; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; }
.mini.doc.doc-lettera { width: auto; min-width: 40px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.mini.doc.doc-lettera b { font-size: .8rem; font-weight: 800; line-height: 1; }
.doc-tasti.doc-dual { min-width: 40px; }
.ope-conta-forn { font-size: .72rem; color: #6b7d93; margin-left: 8px; }
.ope select.co[data-campo="ope_idfornitura"] { font-weight: 400 !important; }

/* Forniture: Tensione, Potenza e Consumo bianchi se vuoti, grigi se compilati */
.forn input.cf:is([data-campo="for_elepotenza"], [data-campo="for_eleconsumo"], [data-campo="for_gasconsumo"]):placeholder-shown { background: var(--campo-vuoto) !important; }
.forn select.cf[data-campo="for_eletensione"]:has(option:checked[value=""]) { background: var(--campo-vuoto) !important; }
.forn input.cf:is([data-campo="for_elepotenza"], [data-campo="for_eleconsumo"], [data-campo="for_gasconsumo"]):focus,
.forn select.cf[data-campo="for_eletensione"]:focus { background: var(--campo-focus) !important; }
.ope-mostra { text-align: center; padding: 4px 0 6px; }
.ope-mostra-btn { background: none; border: 0; color: #1f5fbf; font-size: .76rem; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* Allegati comuni (Dal PC / Documenti del cliente) in chat e nuova email */
.chat-tasti { align-items: flex-start; }
.chat-allegati { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.chat-allegati .int-allega .pulsante { padding: 4px 8px; font-size: .78rem; }
.chat-allegati .int-docs { max-height: 140px; overflow: auto; }
.ml-allegati .int-allega .pulsante { align-self: auto; }

/* Promemoria: rimanda */
.int-rimanda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: .82rem; font-weight: 600; color: #1f4e79; }
.int-rimanda .pulsante { width: auto; padding: 4px 10px; margin: 0; }
.int-rimanda input[type="date"], .int-rimanda input[type="time"] { padding: 3px 6px; border: 1px solid #b8c9de; border-radius: 5px; }


/* Appuntamento: fine modificabile e ricorrenza */
.appu-durata { flex-wrap: wrap; }
.appu-durata .ap-finoalle { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: #4a5d75; margin: 0; }
.appu-durata .ap-finoalle input { width: 110px; }
.appu-ripeti { display: flex; gap: 10px; flex-wrap: wrap; }
.appu-ripeti label { flex: 1; min-width: 150px; }
.appu-serie { font-size: .82rem; font-weight: 600; color: #1f4e79; background: #e6eef8; border-radius: 6px; padding: 4px 8px; }
.int-prom { display: flex; gap: 10px; flex-wrap: wrap; }
.int-prom label { flex: 1; min-width: 150px; }
.int-prom label:has(#int-prom-ora) { flex: 0 0 110px; min-width: 110px; }
.int-ripeti { font-size: .8rem; font-weight: 600; color: #1f4e79; background: #e6eef8; border-radius: 6px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }

/* Note al passaggio del mouse (al posto della nota del browser) */
.suggerimento {
  position: fixed; z-index: 10000; max-width: 320px; padding: 6px 10px; border-radius: 8px;
  background: #1f3550; color: #fff; font-size: .78rem; font-weight: 500; line-height: 1.35; white-space: pre-line;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); pointer-events: none;
  opacity: 0; transform: translateY(-3px); transition: opacity .12s ease, transform .12s ease; visibility: hidden;
}
.suggerimento.visibile { opacity: 1; transform: none; visibility: visible; }
.suggerimento::before {
  content: ''; position: absolute; top: -5px; left: var(--freccia, 50%); width: 10px; height: 10px; margin-left: -5px;
  background: #1f3550; transform: rotate(45deg); border-radius: 2px;
}
.suggerimento.sopra::before { top: auto; bottom: -5px; }
.suggerimento.sopra { transform: translateY(3px); }
.suggerimento.sopra.visibile { transform: none; }

/* Finestra CTE: testo dei campi al centro */
.cte-box input[data-cte-campo]:not([type="checkbox"]), .cte-box select[data-cte-campo] { text-align: center !important; text-align-last: center; }

/* CTE VALORI */
.ctv-schede { display: flex; gap: 6px; margin: 8px 0; }
.ctv-schede .pulsante { width: auto; padding: 6px 14px; }
.ctv-schede .pulsante.attiva { background: #f7c89b !important; color: #12305a !important; }
.ctv-filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.ctv-filtri .pulsante { width: auto; padding: 5px 12px; margin-left: auto; }
.ctv-info { font-size: .78rem; color: #4a5d75; }
.ctv-tabella { max-height: calc(100vh - 230px); overflow: auto; }
.ctv-tabella table { font-size: .78rem; }
.ctv-tabella thead th { position: sticky; top: 0; z-index: 1; background: #e6eef8; }
.ctv-tabella input[type="text"], .ctv-tabella select, .ctv-tabella input[type="date"] { width: 100%; min-width: 70px; text-align: center; }
.ctv-tabella td:nth-child(4) { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctv-tabella tr.spenta td { opacity: .55; }
.ctv-riga { cursor: pointer; }
.ctv-riga:hover td { background: #f1f6fc; }
.ctv-riga.aperta td { background: #fde9d6; font-weight: 600; }
.ctv-riass { color: #2f4a6b; white-space: nowrap; }
.ctv-vuoto { color: #8a99ab; font-style: italic; }
.ctv-dett > td { background: #fbf6f0; padding: 8px !important; }
.ctv-campi { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 10px; }
.ctv-campi label { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; color: #4a5d75; }
.ctv-campi label input, .ctv-campi label select { width: 100% !important; min-width: 0 !important; text-align: center; }
.ctv-campi .ctv-largo { grid-column: 1 / -1; }
.ctv-campi .ctv-largo input { text-align: left; }
.can-elenco { max-height: calc(100vh - 230px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.can-scheda { border: 1px solid #c9d6e6; border-radius: 8px; background: #fff; padding: 8px; }
.can-testa { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.can-testa .can-nome { flex: 1; font-weight: 700; font-size: .9rem; }
.can-tit { width: 100%; font-size: .72rem; color: #4a5d75; font-weight: 600; }
.can-livelli { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 6px; }
.can-livello { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #c9d6e6; border-radius: 6px; padding: 2px 6px; font-size: .76rem; }
.can-livello input { width: 64px !important; min-width: 0 !important; }
.can-nuovo-liv { display: inline-flex; gap: 4px; align-items: center; }
.can-nuovo-liv input { width: 140px !important; }
.can-nuovo-liv input[data-cai-nuovo-euro] { width: 64px !important; }
.can-nuovo-liv .pulsante { width: auto; padding: 3px 8px; }

.can-nuovoimp { width: auto !important; padding: 3px 10px !important; font-size: .74rem; white-space: nowrap; }
.can-insieme { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; color: #4a5d75; }
.can-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.can-chip { display: inline-flex; align-items: center; gap: 4px; background: #e6eef8; border: 1px solid #c9d6e6; border-radius: 12px; padding: 1px 8px; color: #12305a; font-size: .76rem; }
.can-chip button { border: 0; background: none; cursor: pointer; color: #a33; font-size: .9rem; padding: 0; line-height: 1; }
.can-chips select { width: auto !important; font-size: .74rem; }
.can-scheda.can-nuova { border-color: #e8a15c; box-shadow: 0 0 0 2px #fde2c8; }

.can-info { margin: 0 0 6px 2px; }

.cte-pdf { display: inline-flex; align-items: flex-end; gap: 6px; }
.cte-pdf .mini { margin-bottom: 2px; }
.cte-pdf-stato { font-size: .8rem; font-weight: 700; padding: 6px 4px; }
.cte-pdf-stato.si { color: #1f7a3a; }
.cte-pdf-stato.no { color: #b42318; }

.lav-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 14px; padding: 10px; align-items: end; }
.lav-box label { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; font-weight: 700; color: #2f5d3a; }
.lav-box select, .lav-box input { width: 100%; padding: 5px 6px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; font-size: .9rem; }
.lav-box input:disabled { background: #e3e6ea; }
.lav-tasti { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.lav-tasti .pulsante { width: auto; padding: 6px 16px; }

.tl-det-azioni { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 10px 0 4px; padding: 8px 10px; background: #f4f8fc; border: 1px solid #c9d6e6; border-radius: 8px; }
.tl-det-stato { display: flex; flex-direction: column; gap: 2px; flex: 1 1 160px; min-width: 0; font-size: .72rem; font-weight: 700; color: #2f5d3a; }
.tl-det-stato[hidden] { display: none; }
.tl-det-stato select, .tl-det-stato input { width: 100%; padding: 5px 6px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; font-size: .85rem; }
.tl-dettaglio .nota-pulsanti .pulsante { width: auto; min-width: 0; padding: 8px 16px; }

.tl-allegati { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; font-size: .85rem; }
.tl-allegato { border: 1px solid #c9d6e6; background: #f4f8fc; border-radius: 6px; padding: 3px 8px; cursor: pointer; font: inherit; font-size: .8rem; color: #12305a; }
.tl-allegato:hover { background: #e6eef8; }

.chat-msg:not(.mio) { cursor: pointer; }
.chat-msg.rispondo { outline: 2px solid #e8a15c; outline-offset: 1px; }
.chat-re { font-size: .74rem; color: #5a6b80; border-left: 3px solid #9fb6d3; padding: 1px 6px; margin: 2px 0 3px; background: rgba(255,255,255,.55); border-radius: 0 4px 4px 0; }

/* elenco documenti del cliente (chat, mail, mail interna): una riga per documento */
label.int-doc { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; padding: 3px 2px; font-size: .8rem; font-weight: 600; color: #1f3550; border-bottom: 1px solid #e3e8ef; line-height: 1.25; cursor: pointer; }
label.int-doc:last-child { border-bottom: 0; }
label.int-doc:hover { background: #eaf1fa; }
label.int-doc input { flex: 0 0 auto; width: auto; margin: 0; }
label.int-doc .int-doc-nome { margin-left: auto; color: #7a8796; font-size: .7rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }

.oggi-motivo.nonrisposto { color: #b42318; font-weight: 800; }
#box-forniture .ope-mostra { display: flex; justify-content: center; align-items: center; gap: 14px; }
#box-forniture .ope-mostra .mostra-arch { margin: 0; }
/* LISTINI COLLABORATORI */
.lis-collab { height: 32px; margin-left: 12px; padding: 0 8px; border: 1px solid #c9d4e2; border-radius: 6px; font: inherit; font-weight: 700; }
table.reg.lis tr.spenta td { opacity: .55; }
table.reg.lis { font-size: .82rem; table-layout: fixed; width: 100%; }
table.reg.lis th { text-align: center; padding: 5px 2px; white-space: normal; line-height: 1.1; }
table.reg.lis td { text-align: center; padding: 3px 2px; }
/* le caselle riempiono la loro colonna: niente spazi vuoti */
table.reg.lis select, table.reg.lis input[type="text"] { width: 100% !important; padding: 0 3px; text-align: center; text-align-last: center; }
table.reg.lis th:nth-child(1), table.reg.lis th:nth-child(2) { width: 12%; }
table.reg.lis th:nth-child(3) { width: 14%; }
table.reg.lis th:nth-child(4), table.reg.lis th:nth-child(5), table.reg.lis th:nth-child(6), table.reg.lis th:nth-child(7), table.reg.lis th:nth-child(8) { width: 8%; }
table.reg.lis th:nth-child(9) { width: 11%; }
table.reg.lis th:nth-child(10) { width: 5%; }
table.reg.lis th:nth-child(11) { width: 4%; }
table.reg.lis tfoot td[colspan] { padding: 3px 2px; }
table.reg.lis input.lis-note:not(:placeholder-shown) { background: #fff3a8 !important; border-color: #e0c341; }
table.reg.lis .pulsante#lis-aggiungi { width: 100%; padding: 6px 2px; font-size: .78rem; }
table.reg.lis th { white-space: nowrap; }
/* PAGAMENTI COLLABORATORI (sta in mezzo schermo) */
.pgc-filtri { flex-direction: column; align-items: stretch !important; gap: 6px !important; }
.pgc-fr { display: flex; gap: 8px; align-items: flex-end; }
.pgc-fr label { flex: 1 1 0; min-width: 0; }
.pgc-fr label.pgc-check { flex: 0 0 auto; }
.pgc-fr label.pgc-check span:last-child { display: flex; align-items: center; gap: 4px; height: 30px; color: #333; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.pgc-fr label.forn-cerca { flex: 2 1 0; }
.pgc-fr label.forn-cerca input { width: 100%; padding: 4px 6px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; font-size: .9rem; }
.pgc-tabella { max-height: calc(100vh - 290px); overflow: auto; }
.pgc-tab { font-size: .82rem !important; }
.pgc-tab th, .pgc-tab td { text-align: left !important; vertical-align: top; }
.pgc-tab th.dx, .pgc-tab td.dx { text-align: right !important; }
.pgc-tab th.cen, .pgc-tab td.cen { text-align: center !important; width: 26px; }
.pgc-tab td.pgc-cl { max-width: 230px; }
.pgc-sotto { color: #6b7a90; font-size: .72rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }
.pgc-tab a.pgc-cli { color: #1f5fbf; text-decoration: none; font-weight: 600; }
.pgc-tab a.pgc-cli:hover { text-decoration: underline; }
.pgc-tab input.pgc-imp { width: 76px; text-align: right; padding: 2px 4px; border: 1px solid #c9d4e2; border-radius: 4px; font: inherit; }
.pgc-tab tr.pgc-senza td { background: #fff3cd !important; }
.pgc-tab tr.pgc-senza input.pgc-imp { border-color: #d9a400; background: #fffbe6; }
.pgc-tab tr.pgc-dapagare td.pgc-st { color: #b8860b; font-weight: 700; }
.pgc-tab tr.pgc-dastornare td.pgc-st { color: #c0392b; font-weight: 700; }
.pgc-tab tr.pgc-pagato td.pgc-st { color: #2e7d32; font-weight: 700; }
.pgc-tab tr.pgc-annullato td { color: #999; }
.pgc-piede { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 8px 10px; background: #fff; border: 1px solid #c9d3e3; border-top: 0; border-radius: 0 0 12px 12px; font-size: .85rem; }
.pgc-cat { font-weight: 700; }
.pgc-cat-azienda { color: #8e44ad; }
.pgc-cat-casa { color: #1f7a3a; }
.pgc-cat-condominio { color: #b35c00; }
.pgc-ricbox { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 2px; }
.pgc-ricbox span { color: #6b7a90; font-size: .7rem; }
.pgc-tab input.pgc-ric { width: 62px; text-align: right; padding: 1px 4px; border: 1px solid #d5dbe3; border-radius: 4px; font: inherit; font-size: .75rem; background: #f4f8ff; }
/* VITANUOVA STATI */
.vns-tab tr.vns-ferma td { background: #fde8e8 !important; }
.vns-gg { color: #c0392b; font-weight: 700; }
.vns-diverso { color: #c0392b; font-weight: 700; }
.vns-tab select.vns-stato { font: inherit; font-size: .8rem; padding: 2px 4px; border: 1px solid #c9d4e2; border-radius: 4px; max-width: 120px; }
.vns-tab td.vns-note { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5b6b82; font-size: .75rem; }
.vns-tab td.vns-st { font-weight: 700; }
.vns-st-interessato, .vns-st-dainserire { color: #b8860b; }
.vns-st-inserito, .vns-st-incarico { color: #1f5fbf; }
.vns-st-completato { color: #2e7d32; }
.vns-st-annullato { color: #999; }
/* testata cliente: casellina della nota cliente accanto all'agente (gialla se c'e' una nota; clic = finestra della nota) */
.nota-testata { flex: 0 0 41px; width: 41px; height: 34px; margin-bottom: 6px; padding: 0 4px; box-sizing: border-box; display: flex; align-items: center;
  border: 1px solid #9aa3ae; border-radius: var(--raggio); background: #fff; color: #3d4652; font-size: .72rem; font-weight: 600; line-height: 1.1;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.nota-testata.piena { background: #ffff00; border-color: #c9b400; }
.nota-testata:hover { border-color: #1f5fbf; }
/* testata: nome e codice fiscale si copiano separati, il trattino copia tutto */
.fascia.nome .copia-parte { cursor: copy; border-radius: 4px; padding: 0 2px; }
.fascia.nome .copia-parte:hover { background: rgba(255, 255, 255, .55); }
.fascia.nome .copia-sep { cursor: copy; padding: 0 4px; }
.fascia.nome .copia-sep:hover { background: rgba(255, 255, 255, .55); border-radius: 4px; }
/* BackOffice IN ATTESA DOCUMENTI: nota BackOffice in fondo alla riga */
.ins-riga.att-bo { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 38%); }
.ins-riga.att-bo .att-nota { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .78rem; padding: 0 4px; border-radius: 4px; color: #3d4652; }
.ins-riga.att-bo .att-nota.piena { background: #ffff00; font-weight: 600; }

/* ---------- BACCHETTA MAGICA: lettura bolletta ---------- */
.magia { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; margin-left: 6px; flex: 0 0 auto;
  border: 2px dashed #8e6bd8; border-radius: 12px; background: linear-gradient(135deg, #f6f0ff, #fff7e0); color: #5a3ea8;
  font-weight: 800; font-size: .72rem; letter-spacing: .04em; cursor: pointer; user-select: none; -webkit-app-region: no-drag; app-region: no-drag;
  transition: transform .15s, box-shadow .15s; }
.magia:hover { box-shadow: 0 0 0 3px rgba(142, 107, 216, .18); }
.magia-bacchetta { font-size: 1.25rem; display: inline-block; transform-origin: 80% 80%; }
.magia-stelle { font-size: 1rem; display: inline-block; animation: stelline 2.4s ease-in-out infinite; }
@keyframes stelline { 0%, 100% { opacity: .55; transform: scale(.9) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(12deg); } }
.magia.sopra { transform: scale(1.12); border-style: solid; background: linear-gradient(135deg, #e9dcff, #fff1c4); box-shadow: 0 0 18px rgba(142, 107, 216, .55); }
.magia.sopra .magia-bacchetta { animation: bacchetta .5s ease-in-out infinite alternate; }
@keyframes bacchetta { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@media (max-width: 900px) { .magia .magia-testo { display: none; } }

/* lampadina mascotte sul pulsante BOLLETTA */
.lampy { flex: 0 0 auto; overflow: visible; margin: -4px 0 -2px -4px; }
.lampy-corpo { animation: lampy-salta 2.6s ease-in-out infinite; }
.lampy-occhio { transform-box: fill-box; transform-origin: center; animation: lampy-occhiolino 4s infinite; }
.lampy-alone { transform-box: fill-box; transform-origin: center; animation: lampy-luce 2.6s ease-in-out infinite; }
.lampy-bacchetta { transform-box: view-box; transform-origin: 34px 23px; animation: lampy-agita 2.6s ease-in-out infinite; }
.lampy-stella { transform-box: fill-box; transform-origin: center; animation: lampy-stella 1.3s ease-in-out infinite; }
@keyframes lampy-salta { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes lampy-occhiolino { 0%, 86%, 96%, 100% { transform: scaleY(1); } 90%, 92% { transform: scaleY(.12); } }
@keyframes lampy-luce { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: .7; transform: scale(1.05); } }
@keyframes lampy-agita { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(8deg); } }
@keyframes lampy-stella { 0%, 100% { transform: scale(.85) rotate(0); } 50% { transform: scale(1.2) rotate(20deg); } }
.magia.sopra .lampy-bacchetta { animation-duration: .5s; }
.magia.sopra .lampy-corpo { animation-duration: .6s; }

.bol-attesa { text-align: center; padding: 26px 34px !important; }
.attesa-magia { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 8px; }
.attesa-bacchetta { overflow: visible; }
.ab-bastone { transform-box: view-box; transform-origin: 14px 68px; animation: ab-agita 1.1s ease-in-out infinite; }
.ab-stella { transform-box: fill-box; transform-origin: center; animation: ab-stella 1.1s ease-in-out infinite; }
.ab-scintille circle { transform-box: fill-box; transform-origin: center; animation: ab-scintilla 1.1s ease-in-out infinite; animation-delay: var(--d); }
@keyframes ab-agita { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(12deg); } }
@keyframes ab-stella { 0%, 100% { transform: scale(.9) rotate(0); } 50% { transform: scale(1.15) rotate(25deg); } }
@keyframes ab-scintilla { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.2); } }
.attesa-scritta { font-size: 2rem !important; }
.attesa-frase { margin: 14px auto 0; min-height: 2.6em; max-width: 360px; padding: 10px 14px; background: #fff7d1; border: 2px solid #F9CF19; border-radius: 12px; box-shadow: 0 3px 0 #e0b400; color: #1f2d45; font-size: 1.05rem; font-weight: 700; font-style: italic; line-height: 1.35; }
.attesa-frase.entra { animation: frase-entra .5s ease-out; }
@keyframes frase-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ab-bastone, .ab-stella, .ab-scintille circle, .attesa-frase.entra { animation: none; } .ab-scintille circle { opacity: 1; } }
.bol-attesa .bol-nome { color: #5b6b82; font-size: .8rem; margin-top: 6px; word-break: break-all; }
.bol-attesa .bol-sub { color: #8a97a8; font-size: .75rem; margin-top: 2px; }

.bol-box { width: min(880px, 96vw) !important; max-width: none !important; max-height: 92vh; overflow-y: auto; text-align: left !important; padding: 14px 16px !important; }
.bol-titolo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 1.15rem; font-weight: 800; color: #5a3ea8; margin-bottom: 8px; }
.bol-titolo .bol-file { font-size: .75rem; font-weight: 500; color: #8a97a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
.bol-avvisi { background: #fff3cd; border: 1px solid #e0c341; border-radius: 8px; padding: 6px 10px; font-size: .82rem; margin-bottom: 8px; }
.bol-box fieldset { border: 1px solid #d5dbe3; border-radius: 10px; padding: 6px 10px 10px; margin: 0 0 8px; }
.bol-box fieldset.luce { background: #fdf2fb; } .bol-box fieldset.gas { background: #eef6fd; } .bol-box fieldset.bol-int { background: #f7f9fc; }
.bol-box legend { font-weight: 800; font-size: .85rem; padding: 0 4px; }
.bol-esiste { font-weight: 600; font-size: .75rem; color: #b8860b; margin-left: 6px; }
.bol-righe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 8px; }
.bol-righe label { display: flex; flex-direction: column; gap: 2px; font-size: .68rem; font-weight: 700; color: #5b6b82; grid-column: span 2; min-width: 0; }
.bol-righe label.largo { grid-column: span 3; } .bol-righe label.corto { grid-column: span 1; }
.bol-righe label i { font-weight: 500; font-style: normal; color: #8a97a8; }
.bol-righe input, .bol-righe select { height: 30px; padding: 0 6px; border: 1px solid #c9d4e2; border-radius: 6px; font: inherit; font-size: .85rem; color: #1f2d45; min-width: 0; width: 100%; box-sizing: border-box; background: #fff; }
.bol-righe label.rosso input { border-color: #c0392b; background: #fdecea; color: #a01818; font-weight: 700; }
.bol-note { font-size: .8rem; color: #5b6b82; margin: 2px 2px 8px; }
.bol-tasti { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; position: sticky; bottom: -14px; background: #fff; padding: 8px 0 4px; }
.bol-tasti .pulsante { width: auto; margin: 0; padding: 8px 14px; }
.bol-stato { text-align: right; font-size: .78rem; color: #5a3ea8; min-height: 1em; }
@media (max-width: 640px) { .bol-righe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bol-righe label, .bol-righe label.largo { grid-column: span 2; } .bol-righe label.corto { grid-column: span 1; } }
.bol-int.tipo-azienda .solo-persona, .bol-int.tipo-condominio .solo-persona, .bol-int.tipo-persona .solo-azienda { display: none !important; }
#bol-tasti-az { display: contents; }
.bol-diff { border: 1px solid #c9b8f0; background: #faf7ff; border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; font-size: .82rem; }
.bol-diff-titolo { font-weight: 700; color: #5a3ea8; margin-bottom: 6px; }
.bol-diff table { border-collapse: collapse; width: 100%; }
.bol-diff th { text-align: left; font-size: .72rem; color: #5b6b82; padding: 3px 6px; border-bottom: 1px solid #ddd3f5; }
.bol-diff td { padding: 3px 6px; border-bottom: 1px solid #efe9fb; }
.bol-diff td.ora { color: #8a97a8; text-decoration: line-through; }
.bol-diff td.nuovo { font-weight: 700; color: #1f2d45; }
.bol-diff td.cen { text-align: center; width: 60px; }
.bol-diff-ok { color: #2e7d32; }

.bol-voltura { background:#c62828; color:#fff; font-weight:700; font-size:1.05em; padding:8px 12px; border-radius:6px; margin:6px 0; text-align:center; }
.bol-voltura small { display:block; font-weight:400; font-size:.85em; margin-top:3px; }

.bol-assoc { display:flex; align-items:center; gap:8px; margin:4px 0 8px; padding:6px 8px; font-weight:700; font-size:.95rem;
  background:#fff3b0; border:2px solid #F9CF19; border-radius:8px; color:#1f2d45; }
.bol-assoc select { flex:1; min-width:0; font-weight:700; font-size:.95rem; background:#fff; border:2px solid #e0a100; border-radius:6px; padding:4px 6px; }

.bol-scad { background:#ff9800; color:#fff; font-weight:700; padding:6px 12px; border-radius:6px; margin:6px 0; text-align:center; }

/* ---------- MINI APP SCATTA (telefono) ---------- */
.scatta { max-width: 760px; margin: 0 auto; padding: 18px 16px 30px; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, #f6f0ff, #fff7e0); }
.sc-testa { display: flex; align-items: center; gap: 12px; }
.sc-testa .lampy { width: 64px; height: 70px; margin: 0; }
.sc-testa .sc-scritta { height: 54px; width: auto; display: block; }
.sc-nome { font-family: 'Noto Sans', sans-serif; font-weight: 900; font-size: 1.35rem; letter-spacing: .03em; line-height: 1.2; white-space: pre;
  text-shadow: -2px -2px 0 #030305, 2px -2px 0 #030305, -2px 2px 0 #030305, 2px 2px 0 #030305, 0 -2px 0 #030305, 0 2px 0 #030305, -2px 0 0 #030305, 2px 0 0 #030305, 3px 4px 0 #030305; }
.scatta:not(.sc-fatto) .sc-testa { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.sc-testa b { display: block; font-size: 1.6rem; font-weight: 800; color: #5a3ea8; letter-spacing: .04em; }
.sc-testa small { color: #5b6b82; font-size: .85rem; }
.sc-aiuto { margin: 0; color: #5b6b82; font-size: .95rem; }
.sc-foto-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-foto { position: relative; aspect-ratio: 3 / 4; border: 3px dashed #8e6bd8; border-radius: 16px; background: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; color: #5a3ea8; cursor: pointer; overflow: hidden; }
.sc-foto .sc-ico { font-size: 2.6rem; }
.sc-foto b { font-size: 1.1rem; } .sc-foto small { color: #8a97a8; font-size: .75rem; }
.sc-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-foto.fatta { border-style: solid; border-color: #2e7d32; }
.sc-foto.fatta b { position: relative; background: rgba(46,125,50,.9); color: #fff; padding: 2px 10px; border-radius: 10px; margin-top: auto; margin-bottom: 8px; }
.sc-foto.fatta .sc-ico, .sc-foto.fatta small { display: none; }
.scatta .pulsante { width: 100%; margin: 0; font-size: 1.15rem; padding: 14px; border-radius: 14px; text-align: center; text-decoration: none; box-sizing: border-box; }
.sc-leggi:disabled { opacity: .45; }
.sc-piede { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-size: .9rem; }
.sc-piede a { color: #5a3ea8; font-weight: 700; }
.sc-esito { background: #fff; border-radius: 12px; padding: 12px 14px; margin: 0; font-size: 1rem; color: #1f2d45; line-height: 1.45; }
.sc-nuovo { background: #fff !important; color: #5a3ea8 !important; border: 2px solid #8e6bd8 !important; }
/* finestre della lettura sul telefono */
@media (max-width: 600px) {
  .bol-box { width: 100vw !important; max-height: 100vh; height: 100vh; border-radius: 0 !important; }
  .bol-righe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bol-righe label, .bol-righe label.corto { grid-column: span 1; } .bol-righe label.largo { grid-column: span 2; }
  .bol-righe input, .bol-righe select { height: 38px; font-size: 1rem; }
  .bol-tasti { flex-direction: column-reverse; align-items: stretch; } .bol-tasti .pulsante { width: 100%; padding: 12px; font-size: 1rem; }
  .bol-tasti > span { display: flex; flex-direction: column; gap: 8px; }
  .bol-diff td, .bol-diff th { padding: 4px 3px; }
}

/* SCATTA a tutto schermo, piu' grande */
.scatta { font-size: 1.15rem; gap: 18px; }
.sc-testa .lampy { width: 84px; height: 92px; }
.sc-testa b { font-size: 2.1rem; } .sc-testa small { font-size: 1rem; }
.sc-aiuto { font-size: 1.1rem; }
.sc-foto-riga { grid-template-columns: 1fr; gap: 12px; } .sc-foto-riga.due { grid-template-columns: 1fr 1fr; }
.sc-foto { aspect-ratio: auto; min-height: 22vh; gap: 6px; border-width: 4px; border-radius: 20px; }
.sc-foto .sc-ico { font-size: 3.6rem; }
.sc-foto b { font-size: 1.7rem; } .sc-foto small { font-size: 1rem; text-align: center; }
.scatta .pulsante { font-size: 1.5rem; padding: 20px; border-radius: 18px; }
.sc-piede { font-size: 1.05rem; }

/* tasto SCATTA nella testata: solo su telefono e tablet */
.scatta-tasto { display: none; align-items: center; gap: 4px; height: 40px; padding: 0 10px; margin-left: 6px; flex: 0 0 auto; border: 2px solid #8e6bd8; border-radius: 12px;
  background: #fff; color: #5a3ea8; font-weight: 800; font-size: .72rem; letter-spacing: .04em; text-decoration: none; font-size: 1.1rem; }
.scatta-tasto span { font-size: .72rem; }
@media (pointer: coarse) { .scatta-tasto { display: flex; } }
@media (max-width: 900px) { .scatta-tasto span { display: none; } }

.sc-sez h3 { margin: 0 0 8px; font-size: 1.15rem; color: #5a3ea8; letter-spacing: .04em; display: flex; justify-content: space-between; align-items: center; }
.sc-sez .sc-via { font-size: .95rem; color: #c62828; }
.sc-foto.fatta small { display: block !important; position: relative; background: rgba(255,255,255,.9); padding: 1px 8px; border-radius: 8px; margin-bottom: 8px; color: #2e7d32; }
.sc-foto.fatta b { margin-bottom: 2px; }

.bol-box fieldset.bol-leg { background: #fff8ec; }
.bol-leg .bol-avvisi { margin: 2px 0 8px; }
.bol-leg-diff .bol-diff { margin: 8px 0 0; }

/* tasti Annulla / Apri il gestionale / Esci ben visibili */
.bol-tasti [data-az="annulla"], .mostra-doc [data-az="annulla"] { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; border: 2px solid #8a97a8;
  border-radius: 10px; background: #fff; color: #44546b; font-weight: 700; text-decoration: none; cursor: pointer; }
.sc-piede { gap: 12px; }
.sc-piede a, .sc-piede .sc-esci { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 14px; font-size: 1.1rem; font-weight: 700;
  text-decoration: none; box-sizing: border-box; }
.sc-piede a { background: #fff; color: #5a3ea8; border: 2px solid #8e6bd8; }
.sc-piede .sc-esci { background: #fff; color: #c62828; border: 2px solid #e57373; }
@media (max-width: 600px) { .bol-tasti [data-az="annulla"] { padding: 12px; font-size: 1rem; } }

.bol-leg-altro { background: #fdecea; border: 1px solid #e57373; color: #8e1b1b; border-radius: 8px; padding: 8px 10px; margin: 8px 0 0; font-size: .85rem; }
.bol-leg-altro label { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #1f2d45; font-weight: 600; cursor: pointer; }
.bol-leg-attuale .bol-diff-ok { margin-top: 8px; }

/* tasto SCANNER nella testata (solo computer) */
.scanner-tasto { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px; margin-left: 6px; flex: 0 0 auto; border: 2px solid #9aa4b2; border-radius: 12px;
  background: #fff; color: #5b6b82; font-weight: 800; font-size: 1.1rem; cursor: pointer; -webkit-app-region: no-drag; app-region: no-drag; }
.scanner-tasto span { font-size: .72rem; letter-spacing: .04em; }
.scanner-tasto.attivo { border-color: #2e7d32; color: #2e7d32; background: #eef8ef; }
.scanner-tasto.attivo::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2e7d32; animation: scn-luce 1.6s ease-in-out infinite; }
.scanner-tasto.riattiva { border-color: #ef6c00; color: #ef6c00; background: #fff4e5; }
@keyframes scn-luce { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (pointer: coarse) { .scanner-tasto { display: none; } }
@media (max-width: 900px) { .scanner-tasto span { display: none; } }

.scn-fumetto { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: flex; align-items: center; gap: 10px; max-width: 460px; padding: 10px 14px;
  background: #fff; border: 2px solid #8e6bd8; border-radius: 14px; box-shadow: 0 6px 24px rgba(60, 40, 120, .25); font-size: .88rem; color: #1f2d45; }
.scn-fumetto .lampy { flex: 0 0 auto; }
.scn-fumetto .pulsante { width: auto; margin: 0; padding: 8px 12px; white-space: nowrap; }

.scanner-tasto.manuale { border-color: #456f9f; color: #456f9f; background: #eef4fb; }

.scanner-tasto[hidden] { display: none !important; }

/* SCATTA: tutta larghezza, scritte grandi, riquadri che riempiono lo schermo */
.scatta { max-width: none; min-height: 100vh; min-height: 100dvh; font-size: 1.25rem; padding: 16px 14px 20px; gap: 14px; }
.sc-testa .lampy { width: 90px; height: 98px; }
.sc-testa b { font-size: 2.3rem; } .sc-testa small { font-size: 1.15rem; }
.sc-aiuto { font-size: 1.2rem; line-height: 1.35; }
.sc-sez { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.sc-sez h3 { font-size: 1.35rem; }
.sc-foto-riga { flex: 1 1 auto; display: grid; grid-auto-rows: 1fr; }
.sc-foto { min-height: 160px; height: 100%; }
.sc-foto .sc-ico { font-size: 4rem; }
.sc-foto b { font-size: 1.9rem; } .sc-foto small { font-size: 1.15rem; }
.scatta .sc-leggi { font-size: 1.6rem; padding: 22px; }
.scatta .sc-leggi:disabled { opacity: 1; background: #e3e7ed !important; color: #7a8696 !important; border-color: #cfd6df !important; font-size: 1.25rem; }
.sc-piede { margin-top: 0; }
.sc-piede a, .sc-piede .sc-esci { min-height: 58px; font-size: 1.2rem; }

/* REPORT OFFERTE: tendina fornitore e tabella offerta × mese */
.rpo-fornitore { height: 30px; font-size: .85rem; border: 1px solid #8fa7c4; border-radius: 6px; padding: 0 8px; max-width: 320px; }
.rpo-scorri { max-height: calc(100vh - 210px); }
.rpo-tab .rpo-offerta { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- CALENDARIO (./?calendario) ---------- */
.cal-tasto img { display: block; }
.cal-operatori { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-op { border: 2px solid var(--c); background: var(--c); color: #fff; border-radius: 20px; padding: 6px 14px; font-weight: 800; font-size: .9rem; cursor: pointer; }
.cal-op.spento { background: #fff; color: var(--c); opacity: .6; }
.cal-lista { display: flex; flex-direction: column; gap: 8px; }
.cal-giorno { margin: 12px 0 2px; font-size: 1rem; font-weight: 800; color: #5a3ea8; text-transform: uppercase; letter-spacing: .03em; }
.cal-giorno.oggi { color: #E4191C; }
.cal-riga { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: #fff; border-radius: 12px; padding: 10px 12px;
  border-left: 8px solid var(--c); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cal-riga.con-cliente { cursor: pointer; }
.cal-riga.indisp { background: #f1f1f1; color: #777; }
.cal-ora { font-weight: 800; font-size: .95rem; color: #333; white-space: nowrap; }
.cal-testo { min-width: 0; display: flex; flex-direction: column; }
.cal-testo b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-testo span { font-size: .85rem; color: #5b6b82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chi { font-size: .8rem; font-weight: 800; color: var(--c); text-align: right; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* tasto NUOVO del calendario sul telefono */
.agenda-tel .cal-nuovo { width: 100%; min-height: 52px; font-size: 1.2rem; font-weight: 800; border-radius: 14px; margin: 4px 0; }
.agenda-tel .cal-riga { cursor: pointer; }
.agenda-tel .cal-vai-cliente { background: none; border: 0; font-size: 1.1rem; padding: 0 0 0 6px; cursor: pointer; }
.agenda-tel .cal-chi { display: flex; align-items: center; justify-content: flex-end; max-width: none; overflow: visible; }
.agenda-tel .cal-chi-nome { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-tel .cal-elimina { background: none; border: 0; padding: 0 0 0 8px; cursor: pointer; line-height: 0; vertical-align: middle; }
.agenda-tel .cal-tasti { display: flex; align-items: center; gap: 10px; }
.agenda-tel .cal-tasti .cal-nuovo { flex: 1; width: auto; }
.agenda-tel .cal-p { background: none; border: 0; padding: 0 4px; cursor: pointer; line-height: 0; }
.agenda-tel .cal-p:active { transform: scale(.92); }
/* LETTERA P: finestra "Dimmi cosa faccio" */
.voce-box { text-align: center; }
.voce-box .voce-esempio { margin: 0 0 6px; font-size: .85rem; opacity: .7; }
.voce-box .voce-mic { width: 96px; height: 96px; border-radius: 50%; border: 3px solid #111; background: #f3f4f6; font-size: 2.6rem; cursor: pointer; margin: 6px auto; display: block; }
.voce-box .voce-mic.attivo { background: #E4191C; animation: voce-pulsa 1.2s ease-in-out infinite; }
.voce-box .voce-stato { min-height: 1.4em; margin: 4px 0 8px; font-weight: 600; }
.voce-box textarea { width: 100%; font-size: 1.05rem; text-align: center; }
.voce-clienti { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.voce-clienti .voce-cli { display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; }
.voce-clienti .voce-cli small { opacity: .7; font-weight: 400; }
.voce-fatto { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; font-size: 1.15rem; }
.voce-fatto b { font-size: 1.35rem; }
.voce-fatto .voce-tel { display: block; font-size: 1.3rem; padding: 12px; text-decoration: none; text-align: center; }
.voce-tutto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 55vh; border-radius: 18px;
  background: #45AC37; color: #fff; font-size: 2rem; font-weight: 800; text-decoration: none; text-align: center; padding: 16px; }
.voce-tutto b { font-size: 1.2rem; }
.voce-tutto small { font-size: .9rem; font-weight: 400; opacity: .85; }
.voce-fatto small { color: #b45309; font-size: .9rem; }
.voce-mail { text-align: left; display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.voce-mail small { display: block; font-size: .72rem; opacity: .65; }
.voce-mail span { font-size: .85rem; opacity: .75; }
.voce-mail pre { white-space: pre-wrap; font-family: inherit; margin: 0; padding: 8px 10px; background: #fff; border-radius: 8px; max-height: 40vh; overflow: auto; }
.appu-proposta { margin: 0 0 8px; font-style: italic; font-size: .9rem; }
.appu-proposta b { display: block; font-style: normal; color: #b45309; margin-top: 3px; }
/* finestra APPUNTAMENTO sugli schermi stretti: si scorre dentro la finestra */
@media (max-width: 760px) { .appu-box { max-height: calc(100vh - 32px); overflow-y: auto; } }

/* Tetto e fotovoltaico (finestra dalla fornitura) */
.forn-sx .forn-tetto { width: 26px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #F9CF19; }
.forn-sx .forn-tetto:hover { background: #fff6cc; }
.tetto-box { max-width: 720px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; }
.tetto-foto { position: relative; aspect-ratio: 640 / 420; background: #2b333b; border-radius: 8px; overflow: hidden; }
.tetto-foto img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: crosshair; }
.tetto-attesa, .tetto-no { padding: 14px; color: #fff; text-align: center; }
.tetto-dati .tetto-no { color: var(--tenue); background: #ececec; border-radius: 6px; margin-top: 10px; }
.tetto-zoom { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; font-size: .78rem; color: var(--tenue); }
.tetto-zoom .pulsante { width: 34px; padding: 4px 0; font-size: 1.1rem; line-height: 1; }
.tetto-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.tetto-griglia > div { background: var(--grigio-testa); border: 1px solid var(--bordo); border-radius: 6px; padding: 6px 8px; }
.tetto-griglia b { display: block; font-size: 1.05rem; color: var(--blu); }
.tetto-griglia small { color: var(--tenue); font-size: .72rem; }
.tetto-tab { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .85rem; }
.tetto-tab td { padding: 4px 6px; border-bottom: 1px solid var(--bordo); }
.tetto-nota { font-size: .72rem; color: var(--tenue); margin-top: 8px; }
@media (max-width: 600px) { .tetto-griglia { grid-template-columns: repeat(2, 1fr); } }
/* finestra Tetto nella meta' destra dello schermo (sul telefono resta a tutto schermo) */
.tetto-finestra { justify-content: flex-end; align-items: stretch; background: rgba(20, 30, 45, .25); }
.tetto-finestra .tetto-box { width: 50vw; max-width: none; max-height: none; border-radius: 12px 0 0 12px; }
@media (max-width: 800px) { .tetto-finestra .tetto-box { width: 100%; border-radius: 12px; } }
/* finestra Tetto aperta come finestra separata del browser */
body.tetto-pagina { margin: 0; padding: 12px; background: var(--carta, #fff); font-family: 'DM Sans', system-ui, sans-serif; }
body.tetto-pagina .tetto-box { max-width: none; width: 100%; max-height: none; border: 0; padding: 8px 12px; }
/* puntino del tetto disegnato dalla pagina (si sposta senza ricaricare la foto) */
.tetto-pin { position: absolute; width: 26px; height: 36px; transform: translate(-50%, -100%); pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.tetto-dati.in-calcolo { opacity: .45; transition: opacity .15s; }

/* Consumo luce: il campo mostra il totale, clic = finestra F1 F2 F3 */
.forn input.cf.consumo-fasce { cursor: pointer; }
.forn input.cf.consumo-fasce.divise { box-shadow: inset 3px 0 0 #2f8a3a; }
.fasce-box { max-width: 420px; }
.fasce-griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fasce-griglia label { display: flex; flex-direction: column; align-items: stretch; gap: 3px; font-size: .75rem; font-weight: 600; color: var(--tenue); text-align: center; }
.fasce-griglia input.cf { width: 100%; padding: 6px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; text-align: center; }
.fasce-griglia input.cf:placeholder-shown { background: #fff; }
.fasce-griglia input.cf:not(:placeholder-shown) { background: var(--campo-pieno); }
.fasce-griglia input.cf:focus { background: var(--campo-focus); }
.fasce-totale { display: block; padding: 6px; border: 1px solid var(--bordo); border-radius: 6px; background: var(--grigio-testa); text-align: center; font-weight: 700; color: var(--blu); min-height: 1.9em; }
.fasce-stato { font-size: .75rem; color: var(--tenue); margin-top: 8px; text-align: center; }

/* testa delle finestre: mascotte in alto a sinistra, titolo al centro, righetta tricolore sotto */
.fin-testa { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; }
.fin-testa h1 { margin: 0; text-align: center; padding: 0 52px; }
.fin-mascotte { position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; object-fit: contain; }
.fin-bandiera { display: block; width: 100%; height: 9px; margin: 6px 0 10px; }
.fasce-box > p { text-align: center; }
.fasce-box .nota-pulsanti { justify-content: center; }
.forn input.cf.consumo-fasce.solo-f1 { box-shadow: inset 3px 0 0 #d32f2f; }

/* avvisi: la banda colorata c'e' gia', si aggiunge solo la mascotte a sinistra */
.avviso-testa { position: relative; padding-left: 58px; padding-right: 58px; }
.avviso-testa img { max-width: 100%; }
.avviso-testa::before { content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  background: url(img/icona-192.png) center / contain no-repeat; }
.avviso-fondo.breve .avviso-testa::before { width: 36px; height: 36px; }
.stampa-testa .fin-mascotte { position: static; transform: none; width: 44px; height: 44px; }
.tetto-box > p { text-align: center; }
/* tasto con il focus da tastiera (Tab) nelle finestre: giallo come i campi */
.finestra button:focus-visible, .finestra .pulsante:focus-visible { background: var(--campo-focus) !important; color: #1b2b44 !important; border-color: #c9a800 !important; outline: 2px solid #c9a800; outline-offset: 1px; }

/* finestra Tetto compatta: tutto nello schermo senza barre di scorrimento */
body.tetto-pagina { padding: 6px 10px; height: 100vh; box-sizing: border-box; overflow: hidden; }
body.tetto-pagina .tetto-box { padding: 0; height: 100%; display: flex; flex-direction: column; }
.tetto-box .fin-testa { min-height: 38px; }
.tetto-box .fin-testa h1 { font-size: 1.15rem; }
.tetto-box .fin-mascotte { width: 38px; height: 38px; }
.tetto-box .fin-bandiera { height: 7px; margin: 3px 0 4px; }
.tetto-box > p { margin: 0 0 4px; font-size: .82rem; }
.tetto-box .tetto-foto { height: min(44vh, calc((100vw - 24px) * 0.656)); width: auto; max-width: 100%; aspect-ratio: 640 / 420; margin: 0 auto; flex: none; }
.tetto-box .tetto-zoom { margin: 4px 0 2px; }
.tetto-box .tetto-zoom .pulsante { width: 28px; padding: 2px 0; font-size: 1rem; }
.tetto-box .tetto-griglia { grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 4px; }
.tetto-box .tetto-griglia > div { padding: 3px 6px; }
.tetto-box .tetto-griglia b { font-size: .9rem; }
.tetto-box .tetto-griglia small { font-size: .65rem; line-height: 1.1; display: block; }
.tetto-box .tetto-tab { margin-top: 4px; font-size: .8rem; }
.tetto-box .tetto-tab td { padding: 2px 6px; }
.tetto-box .tetto-nota { margin-top: 3px; font-size: .66rem; }
.tetto-box .nota-pulsanti { margin-top: auto; padding-top: 4px; }
.tetto-box .nota-pulsanti .pulsante { padding: 5px 18px; }
@media (max-width: 600px) { .tetto-box .tetto-griglia { grid-template-columns: repeat(3, 1fr); } }
/* Tetto: frase del risparmio in alto e colonne in euro */
.tetto-risparmio { background: #fff8d6; border: 1px solid #f0d36a; border-left: 4px solid #2f8a3a; border-radius: 6px; padding: 5px 8px; margin: 0 0 5px; font-size: .84rem; line-height: 1.3; text-align: center; }
.tetto-risparmio small { display: block; color: var(--tenue); font-size: .68rem; margin-top: 2px; }
.tetto-prova { display: inline-block; background: #d32f2f; color: #fff; font-size: .62rem; font-weight: 700; border-radius: 4px; padding: 1px 5px; margin-right: 6px; vertical-align: 1px; }
.tetto-tab th { font-size: .68rem; color: var(--tenue); font-weight: 600; padding: 1px 6px; border-bottom: 1px solid var(--bordo); text-align: center; }
.tetto-tab td { text-align: center; }
.tetto-tab td.eur { font-weight: 600; color: #2f8a3a; }
/* frase del risparmio piu' grande: l'operatore la deve leggere bene */
.tetto-risparmio { font-size: 1.12rem; line-height: 1.35; padding: 8px 12px; }
.tetto-risparmio b { color: #1b5e20; }
.tetto-risparmio small { font-size: .74rem; margin-top: 4px; }
.tetto-prova { font-size: .7rem; vertical-align: 2px; }
.tetto-tab .det { color: #1b5e20; font-weight: 600; }

/* proprietario: se No il sole e' grigio; se vuoto avviso nella finestra Tetto */
.forn-sx .forn-tetto.non-prop { filter: grayscale(1); opacity: .45; border-color: var(--bordo); }
.tetto-verifica-prop { color: #fff; background: #d32f2f; border-radius: 4px; font-weight: 700; font-size: .9rem; padding: 3px 8px; margin-bottom: 5px; }
/* avvisi: scritta SERVIZIO ENERGIA e mascotte un po' piu' piccole */
.avviso-testa { padding-top: 7px; padding-bottom: 7px; }
.avviso-testa img { height: 22px; }
.avviso-testa::before { width: 34px; height: 34px; }
.avviso-fondo.breve .avviso-testa img { height: 18px; }
.avviso-fondo.breve .avviso-testa::before { width: 28px; height: 28px; }

/* Tasto QR (copertina documenti) accanto agli altri documenti del cliente */
.mini.qr-copertina { width: auto; min-width: 26px; padding: 0 4px; font-size: .62rem; font-weight: 700; letter-spacing: .02em; }

/* Tablet e telefoni con il tema scuro: il gestionale resta chiaro (il browser non deve scurirlo da solo) */
:root { color-scheme: only light; }

/* ---------- Avatar del cliente nella testata: due iniziali sfalsate, alte quanto le due righe (nome e contatti) ---------- */
#testata-cliente .testata-corpo { display: flex; gap: 6px; align-items: flex-start; }
#testata-cliente .testata-righe { flex: 1; min-width: 0; }
#testata-cliente .posto-avatar { flex: 0 0 auto; display: flex; }
#testata-cliente .posto-avatar:empty { display: none; }
.avatar-cliente { width: 78px; height: 74px; display: block; overflow: visible; }
.avatar-cliente text { font-family: 'Fredoka', 'Arial Rounded MT Bold', 'Noto Sans', sans-serif; font-weight: 700; font-size: 66px; }
.avatar-cliente .av-l { stroke: #1a1a1a; stroke-width: 5; paint-order: stroke; stroke-linejoin: round; }
.avatar-cliente .av-bordo { fill: none; stroke: #1a1a1a; stroke-width: 1.6; stroke-linejoin: round; }

/* ---------- Telefono: niente pagina piu' larga dello schermo ----------
   La colonna "1fr" si allargava fino al testo piu' lungo (nome + codice fiscale, contatti su una riga, campi delle forniture):
   con minmax(0, 1fr) resta larga quanto lo schermo e i testi lunghi finiscono con i puntini. */
@media (max-width: 700px) {
  .guscio, .guscio.senza-cliente { grid-template-columns: minmax(0, 1fr); padding: 0 6px 10px; }
  .guscio > * { min-width: 0; }
  #testata-cliente .fascia-riga .fascia { min-width: 0; }
  #testata-cliente .fascia-riga .fascia.nome { font-size: 1rem; }
  #testata-cliente .fascia-riga .fascia.contatti { font-size: .85rem; }
  .avatar-cliente { width: 62px; height: 60px; }
  .schede button { flex: 1 1 0; min-width: 0; }
  .forn, .forn-corpo, .forn-griglia, .forn-griglia > * { min-width: 0; }
}
/* telefono: niente iniziali del cliente nella testata (spazio per nome e contatti) */
@media (max-width: 700px) { #testata-cliente .posto-avatar { display: none; } }

/* ---------- Telefono: forniture e operazioni a colonne uguali, niente scorrimento laterale ----------
   (le misure fisse "a scalini" di mezzo schermo qui non valgono: queste regole stanno in fondo e vincono) */
@media (max-width: 700px) {
  .forn .forn-a { width: 22px; }
  .forn-sx { width: 40px; }
  .forn-griglia.serv { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; width: auto; margin-left: 0; }
  .forn-griglia.serv > * { grid-column: auto; min-width: 0; }
  .forn-griglia.serv [data-campo$="pod"], .forn-griglia.serv [data-campo$="pdr"],
  .forn-griglia.serv.gas [data-campo$="pdr"] { grid-column: 1 / -1; }
  .forn-griglia.serv select[data-campo^="for_idpagamento"], .forn-griglia.serv select[data-campo^="for_idfornitore"] { grid-column: span 2; }
  .forn-griglia.serv .doc-tasti { grid-column: span 2; display: flex; flex-wrap: wrap; gap: 2px; }
  .forn-griglia.serv.spento { grid-template-columns: 1fr; }

  .ope-griglia.r1, .ope-griglia.r2 { grid-template-columns: repeat(4, minmax(0, 1fr)); width: auto; margin-left: 0; }
  .ope-griglia.r1 > *, .ope-griglia.r2 > * { min-width: 0; }
  .ope-griglia.r1 .ope-nota, .ope-griglia.r1 .ope-cte { grid-column: 1 / -1; }
  .ope-griglia.r2 [data-campo="ope_precedentefornitore"], .ope-griglia.r2 .stato-sel,
  .ope-griglia.r2 .ope-nota, .ope-griglia.r2 [data-campo="ope_numerocontratto"] { grid-column: span 2; }
  .ope-griglia.r2 > span:last-child:empty { display: none; }
  .ope-cte { white-space: normal; }
}
/* telefono: la spunta per archiviare piu' operazioni va in fondo a destra, non sopra i tasti dei documenti */
@media (max-width: 700px) {
  .ope { position: relative; margin-left: 0; }
  .ope-spunta { left: auto; right: 6px; bottom: 8px; width: auto; }
}

/* ---------- Tablet in verticale (circa 768 px): righe Luce/Gas delle forniture un po' piu' strette, niente scorrimento ----------
   solo sopra la larghezza del telefono, per non toccare la versione telefono */
@media (min-width: 701px) {
  @container (max-width: 760px) {
    .forn-griglia.serv { grid-template-columns: 54px 52px 38px 100px 60px 34px 70px 58px 42px 112px; }
  }
}
/* tablet in verticale: le operazioni non ci stanno su una riga sola -> campi su 5 colonne uguali, tasti sotto (come sul telefono) */
@media (min-width: 701px) and (max-width: 900px) {
  .ope { flex-wrap: wrap; position: relative; margin-left: 0; }
  .ope-intest { display: none; }
  .ope-corpo { flex-basis: 100%; }
  .ope-doc, .ope-tasti { flex-direction: row; width: auto; }
  .ope-griglia.r1, .ope-griglia.r2 { grid-template-columns: repeat(5, minmax(0, 1fr)); width: auto; margin-left: 0; }
  .ope-griglia.r1 > *, .ope-griglia.r2 > * { min-width: 0; }
  .ope-griglia.r2 [data-campo="ope_numerocontratto"] { grid-column: span 2; }
  .ope-griglia.r2 > span:last-child:empty { display: none; }
  .ope-spunta { left: auto; right: 6px; bottom: 8px; width: auto; }
}
/* Calendario: "Torna al gestionale" in alto */
.agenda-tel .cal-torna { margin-top: 0; justify-content: flex-start; }
/* telefono: griglia NUOVO CONTRATTO larga quanto lo schermo (nome offerta va a capo, colonne strette) */
@media (max-width: 700px) {
  table.griglia { table-layout: fixed; }
  table.griglia th.sx { width: auto; }
  table.griglia th.filtro-tip { width: 34px; }
  table.griglia th.filtro-col, table.griglia.altre th:not(.sx) { width: 40px; }
  table.griglia td.offerta { min-width: 0; font-size: .74rem; line-height: 1.15; overflow-wrap: anywhere; }
  table.griglia th { font-size: .58rem; padding: 3px 1px; }
  table.griglia th.filtro-tip span { display: block; }
  .btn-matrice { font-size: .56rem; padding: 1px 0; }
  .nc-cte { min-width: 0; }
  .nc-testa label { min-width: 0; }
}
@media (max-width: 700px) { .nc-cte { flex: 1 1 100%; } }

/* ---------- Telefono: fornitura in breve (indirizzo, POD/PDR, uso) e APRI a tutto schermo con tutti i campi ---------- */
.forn-compatta, .fc-apri, .forn-chiudi-barra { display: none; }
@media (max-width: 700px) {
  #box-forniture { container-type: normal; }
  .forn:not(.aperta) > .forn-dx, .forn:not(.aperta) > .forn-corpo { display: none; }
  .forn:not(.aperta) { align-items: center; }
  .forn:not(.aperta) .forn-sx { gap: 6px; }
  .forn:not(.aperta) > .forn-compatta { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; cursor: pointer; }
  .forn:not(.aperta) > .fc-apri { display: block; width: auto; flex: none; padding: 10px 12px; font-size: .8rem; font-weight: 800; letter-spacing: .03em; }
  .fc-ind { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fc-codici { display: flex; flex-direction: column; gap: 3px; }
  .fc-cod { display: block; padding: 3px 8px; border-radius: 4px; font-size: .85rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fc-cod.pod { background: var(--rosa); border: 1px solid #d99ad4; }
  .fc-cod.pdr { background: var(--azzurro); border: 1px solid #8fbde6; }
  .fc-nessuno { font-size: .8rem; color: var(--tenue); font-style: italic; }
  .fc-uso { font-size: .82rem; color: var(--tenue); font-weight: 600; }
  /* APRI: la stessa scheda, a tutto schermo, con tutti i campi modificabili */
  .forn.aperta { position: fixed; inset: 0; z-index: 70; margin: 0; border-radius: 0; flex-wrap: wrap; align-content: flex-start; overflow-y: auto; padding: 8px 8px 24px; background: var(--grigio-testa); }
  .forn.aperta > .forn-chiudi-barra { display: flex; flex-basis: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0 8px; font-weight: 800; color: var(--blu); }
  .forn.aperta .forn-chiudi { width: auto; padding: 10px 16px; }
  .forn.aperta > .forn-corpo { flex: 1 1 0; }
}

/* ---------- Telefono, fornitura APERTA: un campo per riga con la sua intestazione ---------- */
.fa-et { display: none; }
@media (max-width: 700px) {
  /* clip (non hidden): taglia lo sbordo a destra senza bloccare le parti che restano ferme scorrendo */
  html, body { max-width: 100%; overflow-x: clip; }
  .forn.aperta { gap: 6px; }
  .forn.aperta > .forn-dx { order: 1; justify-content: center; }
  .forn.aperta .forn-a { width: 40px; height: 40px; align-self: auto; }
  .forn.aperta > .forn-sx { order: 1; flex-direction: row; width: auto; gap: 14px; justify-content: flex-start; }
  .forn.aperta > .forn-sx .spunta-stampa { width: 24px; height: 24px; }
  .forn.aperta > .forn-corpo { order: 2; flex: 1 1 100%; gap: 8px; }
  .forn.aperta .forn-griglia.testa, .forn.aperta .forn-griglia.serv { grid-template-columns: 118px minmax(0, 1fr); grid-auto-flow: row; gap: 5px 8px; padding: 8px; border-radius: 6px; }
  .forn.aperta .forn-griglia.testa { background: var(--carta); border: 1px solid var(--bordo); }
  .forn.aperta .forn-griglia > * { grid-column: auto !important; }
  .forn.aperta .fa-et { display: block; font-size: .78rem; font-weight: 700; color: var(--blu); text-transform: uppercase; letter-spacing: .02em; }
  .forn.aperta .forn-griglia .attivo { grid-column: 1 / -1 !important; font-size: 1rem; padding: 2px 0 4px; }
  .forn.aperta .forn-griglia.serv > span:empty:not(.forn-nota):not(.forn-boll):not(.ro) { display: none; }
  .forn.aperta input.cf, .forn.aperta select.cf, .forn.aperta .ro, .forn.aperta .forn-nota, .forn.aperta .forn-boll { height: 38px; line-height: 36px; font-size: 1rem; text-align: left; text-align-last: left; padding: 0 8px; }
  .forn.aperta .forn-nota { display: block; min-height: 38px; border: 1px solid var(--bordo); border-radius: 3px; background: var(--campo-pieno); }
  .forn.aperta .doc-tasti { display: flex; gap: 6px; align-items: center; }
  .forn.aperta .doc-tasti .mini { width: 38px; height: 38px; }
}
/* telefono: in cima alle forniture restano il titolo FORNITURE e il tasto NUOVA (senza le intestazioni delle colonne) */
@media (max-width: 700px) {
  #box-forniture .forn-intest { display: flex; padding: 4px 2px 6px; }
  #box-forniture .forn-intest .intest-sx { width: auto; padding-left: 0; flex-direction: row; align-items: center; gap: 8px; }
  #box-forniture .forn-intest .intest-sx span { width: auto; }
  #box-forniture .forn-intest .intest-dx { display: none; }
  #b-nuova-fornitura { padding: 6px 14px; font-size: .85rem; }
}
/* telefono: la fornitura aperta sta sotto le finestre (F1 F2 F3, note, tetto, avvisi) che si aprono da lei */
@media (max-width: 700px) { .forn.aperta { z-index: 55; } }
/* app sul telefono, FrontOffice: niente Appuntamenti in carico, Da inserire, Rientri da fare, Attesa documenti */
@media (max-width: 700px) { .fo .fo-agenda, .fo .fo-sotto { display: none; } }
/* app sul telefono: pulsanti della barra tutti dentro lo schermo (piu' stretti) e tasti EMAIL / CHIAMATA / APPUNTAMENTO / INTERNA su 4 colonne */
@media (max-width: 700px) {
  .barra .nav { flex: 1 1 100%; flex-wrap: nowrap; gap: 3px; min-width: 0; }
  .barra .nav button { flex: 1 1 0; min-width: 0 !important; padding-left: 1px !important; padding-right: 1px !important; }
  .barra .nav button.nav-ico { font-size: .56rem; letter-spacing: 0; }
  .barra .nav button.archivia { flex: 0 0 34px; }
  .tl-tasti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .tl-tasti .pulsante { padding: 9px 2px; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Telefono: operazione in breve (3 righe) e APRI a tutto schermo con un campo per riga ---------- */
.ope-compatta, .oc-apri, .ope-chiudi-barra { display: none; }
@media (max-width: 700px) {
  #box-operazioni, #box-operazioni-tutte { container-type: normal; }
  .ope:not(.aperta) { flex-wrap: nowrap; align-items: center; gap: 6px; padding: 5px; }
  .ope:not(.aperta) > .ope-corpo, .ope:not(.aperta) > .ope-doc, .ope:not(.aperta) > .ope-tasti, .ope:not(.aperta) > .ope-spunta { display: none; }
  .ope:not(.aperta) > .ope-compatta { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  .ope:not(.aperta) > .oc-apri { display: block; width: auto; flex: none; align-self: stretch; padding: 0 12px; font-size: .8rem; font-weight: 800; }
  .oc-riga { display: flex; gap: 4px; align-items: center; min-width: 0; }
  .oc-dato { flex: none; height: 28px; line-height: 26px; padding: 0 6px; border: 1px solid var(--bordo); border-radius: 4px; background: var(--campo-pieno); font-size: .8rem; font-weight: 600; white-space: nowrap; max-width: 34%; overflow: hidden; text-overflow: ellipsis; }
  .oc-dato.ele { background: var(--rosa); } .oc-dato.gas { background: var(--azzurro); }
  .oc-dato.dual { background: linear-gradient(90deg, var(--rosa) 50%, var(--azzurro) 50%); }
  .oc-dual { flex: none; width: 28px; height: 28px; line-height: 26px; text-align: center; border-radius: 4px; background: #8e44ad; border: 1px solid #6c2f86; color: #fff; font-weight: 800; }
  .oc-r1 .ope-nota { flex: 1 1 0; min-width: 30px; height: 28px; line-height: 26px; border: 1px solid var(--bordo); border-radius: 4px; padding: 0 6px; background: var(--campo-pieno); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .oc-r1 .ope-nota.piena { background: #ffff00; }
  .oc-r2 .oc-prec { flex: 1 1 0; min-width: 0; height: 28px; font-size: .85rem; }
  .oc-r2 .oc-stato { max-width: 40%; }
  .oc-cte { flex: 1 1 0; min-width: 0; font-size: .74rem; font-weight: 600; color: #3d4652; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .oc-doc { flex: none; display: flex; gap: 4px; }
  .oc-doc .doc-tasti { display: flex; gap: 2px; }
  .oc-doc .mini { width: 30px; height: 30px; }
  /* APRI */
  .ope.aperta { position: fixed; inset: 0; z-index: 55; margin: 0; border-radius: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; overflow-y: auto; padding: 8px 8px 24px; background: var(--grigio-testa); }
  .ope.aperta > .ope-chiudi-barra { display: flex; flex-basis: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0 6px; font-weight: 800; color: var(--blu); }
  .ope.aperta .forn-chiudi { width: auto; padding: 10px 16px; }
  .ope.aperta > .ope-corpo { flex: 1 1 100%; gap: 8px; }
  .ope.aperta .ope-griglia.r1, .ope.aperta .ope-griglia.r2 { grid-template-columns: 118px minmax(0, 1fr) !important; gap: 5px 8px; padding: 8px; border-radius: 6px; background: var(--carta); border: 1px solid var(--bordo); }
  .ope.aperta .ope-griglia > * { grid-column: auto !important; min-width: 0; }
  .ope.aperta .ope-griglia > span:last-child:empty { display: none; }
  .ope.aperta .fa-et { display: block; font-size: .78rem; font-weight: 700; color: var(--blu); text-transform: uppercase; letter-spacing: .02em; }
  .ope.aperta input.co, .ope.aperta select.co, .ope.aperta select.stato-sel, .ope.aperta .ope-nota, .ope.aperta .ope-cte, .ope.aperta .ope-id { min-height: 38px; line-height: 1.2; font-size: 1rem; text-align: left; text-align-last: left; padding: 8px; white-space: normal; height: auto; }
  .ope.aperta .ope-nota { border: 1px solid var(--bordo); border-radius: 3px; background: var(--campo-pieno); display: block; }
  .ope.aperta .ope-nota.piena { background: #ffff00; }
  .ope.aperta > .ope-doc { flex: 1 1 100%; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 6px 8px; align-items: center; width: auto; padding: 8px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 6px; }
  .ope.aperta > .ope-doc .mini { width: 38px; height: 38px; }
  .ope.aperta > .ope-tasti { flex: 1 1 100%; flex-direction: row; justify-content: flex-start; gap: 8px; width: auto; }
  .ope.aperta > .ope-tasti .mini { width: 42px; height: 42px; }
  .ope.aperta > .ope-spunta { position: static; width: auto; order: 9; }
  .ope-dual .ope { margin-left: 0; }
}
/* stato in sola lettura nella scheda in breve: stessi colori della tendina */
.oc-stato.st-annullato, .oc-stato.annullato { background: #006400; color: #fff; }
.oc-stato.completato { background: #dfe7ef; }
.oc-stato.st-bianco { background: #fff; } .oc-stato.st-rosa { background: #f7b3f0; } .oc-stato.st-verde-scuro { background: #2fc22f; }
.oc-stato.st-verde { background: #66ff66; } .oc-stato.st-verdino { background: #a8f5a2; } .oc-stato.st-viola { background: #c9a3f2; }
@media (max-width: 700px) { .ope.aperta > .ope-doc .doc-riga { height: auto; justify-content: flex-start; } .ope.aperta > .ope-doc .doc-tasti { display: flex; gap: 6px; } }
.oc-prec::placeholder { color: #9aa3ae; font-weight: 400; font-style: italic; }

/* telefono: il tasto BACK (BackOffice) non si mostra */
@media (max-width: 700px) { .nav button[data-vai="back"] { display: none !important; } }

/* chat e mail interne: tasto CHIUDI al posto della x */
.chat-testa .chat-chiudi { width: auto; margin: 0; padding: 5px 12px; font-size: .78rem; flex: 0 0 auto; }

/* =====================================================================
   CHAT e MAIL INTERNE in stile WhatsApp (solo grafica: sovrascrive le regole sopra)
   ===================================================================== */
.chat-pannello { background: #efeae2; border: 0; border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.32); }
.chat-testa, .int-pannello .chat-testa { background: #075e54; color: #fff; padding: 10px 12px; min-height: 52px; }
.chat-titolo { font-size: 1.1rem; font-weight: 700; letter-spacing: .01em; }
.chat-dafare { color: #cfe9e4; }
.chat-solo { color: #e6f4f1; }
.chat-testa .chat-chiudi { background: #fff !important; color: #075e54 !important; border: 0 !important; border-radius: 16px; font-weight: 800; }
.int-schede button { border-color: #5fa89d; color: #d9f0eb; border-radius: 14px; padding: 2px 10px; }
.int-schede button.attiva { background: #fff; color: #075e54; }

/* sfondo beige con il disegnino leggero */
.chat-lista, .int-conversazione {
  background-color: #efeae2;
  background-image: radial-gradient(rgba(120, 100, 70, .09) 1.2px, transparent 1.3px), radial-gradient(rgba(120, 100, 70, .06) 1px, transparent 1.1px);
  background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px;
  padding: 10px 12px; gap: 4px;
}

/* fumetti */
.chat-msg, .int-msg {
  background: #fff; border: 0; border-radius: 8px; padding: 6px 9px 7px; max-width: 82%;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13); margin: 0 8px;
}
.chat-msg::before, .int-msg::before {
  content: ""; position: absolute; top: 0; left: -8px; border-style: solid; border-width: 0 8px 9px 0; border-color: transparent #fff transparent transparent;
}
.int-msg { position: relative; }
.chat-msg.mio, .int-msg.mio { background: #d9fdd3; border: 0; }
.chat-msg.mio::before, .int-msg.mio::before { left: auto; right: -8px; border-width: 0 0 9px 8px; border-color: transparent transparent transparent #d9fdd3; }
.chat-msg-testa, .int-msg-testa { color: #1f8a70; font-size: .76rem; font-weight: 700; }
.chat-msg.mio .chat-msg-testa, .int-msg.mio .int-msg-testa { color: #667781; font-weight: 600; }
.chat-msg-testo, .int-msg-testo { color: #111b21; font-size: .93rem; line-height: 1.35; }
.chat-msg.nuovo { border-left: 0; }
.chat-msg.nuovo .chat-msg-testa::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 6px; border-radius: 50%; background: #25d366; vertical-align: middle; }
.chat-msg.chiuso { opacity: .7; }
.chat-msg.rispondo, .int-msg.scelto { box-shadow: 0 0 0 2px #25d366; }
.chat-re { background: rgba(0,0,0,.05); border-left: 4px solid #25d366; border-radius: 5px; padding: 3px 7px; font-size: .78rem; color: #54656f; margin: 3px 0; }
.chat-allegato { background: rgba(0,0,0,.04); border: 0; border-radius: 6px; color: #027eb5; }
.chat-fatto { top: 6px; right: 8px; background: #25d366; border: 0; color: #fff; border-radius: 10px; padding: 1px 8px; font-size: .66rem; }
.chat-chiuso { color: #8696a0; }

/* zona di scrittura */
.chat-scrivi { background: #f0f2f5; border-top: 0; padding: 8px 10px; }
.chat-a select { border-radius: 16px; border: 1px solid #d1d7db; background: #fff; padding: 4px 10px; }
.chat-risposta { background: #fff; border: 0; border-left: 4px solid #25d366; border-radius: 6px; }
.chat-scrivi textarea { border: 0; border-radius: 18px; padding: 9px 14px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.chat-tasti #chat-invia { background: #00a884 !important; color: #fff !important; border: 0 !important; border-radius: 20px; padding: 8px 18px; font-weight: 800; }

/* elenco mail come la lista chat di WhatsApp */
.int-pannello .chat-lista { background: #fff; background-image: none; padding: 0; gap: 0; }
.chat-msg.int-voce { max-width: none; margin: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid #e9edef; padding: 10px 14px; }
.chat-msg.int-voce::before { display: none; }
.chat-msg.int-voce:hover { background: #f5f6f6; box-shadow: none; }
.chat-msg.int-voce.nuovo .int-cliente::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 6px; border-radius: 50%; background: #25d366; vertical-align: middle; }
.int-cliente { color: #111b21; }
.int-oggetto { color: #111b21; }
.int-anteprima { color: #667781; }
.int-piede { background: #f0f2f5; border-top: 0; }
.int-piede #int-nuova { background: #00a884 !important; color: #fff !important; border: 0 !important; border-radius: 20px; }

/* CHAT a conversazioni (come WhatsApp): elenco, pillole dei filtri, pallini, conversazione */
.chat-pannello [hidden] { display: none !important; }
.chat-pannello .chat-titolo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-indietro { width: auto; border: 0; background: none; color: #fff; font-size: 1.2rem; cursor: pointer; padding: 0 4px 0 0; }
.chat-filtri { display: flex; gap: 8px; padding: 10px 12px 6px; background: #fff; overflow-x: auto; }
.chat-pillola { width: auto; flex: 0 0 auto; border: 1px solid #d1d7db; background: #fff; color: #54656f; border-radius: 18px; padding: 5px 14px; font-size: .86rem; font-weight: 600; cursor: pointer; }
.chat-pillola b { color: #008069; margin-left: 2px; }
.chat-pillola.attiva { background: #d9fdd3; border-color: #9ad8a0; color: #0b5e3b; }
.chat-elenco { flex: 1; overflow-y: auto; background: #fff; padding-bottom: 70px; }
.chat-conv { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.chat-conv:hover { background: #f5f6f6; }
.chat-conv + .chat-conv .chat-conv-mezzo, .chat-conv + .chat-conv .chat-conv-destra { border-top: 1px solid #eef0f1; }
.chat-conv-mezzo, .chat-conv-destra { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 4px 0; }
.chat-conv-mezzo { flex: 1; min-width: 0; }
.chat-conv-destra { align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.chat-avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; }
.chat-testa .chat-avatar { width: 36px; height: 36px; font-size: .9rem; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.chat-conv-nome { font-weight: 600; font-size: 1rem; color: #111b21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv-testo { font-size: .88rem; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-conv-ora { font-size: .76rem; color: #667781; }
.chat-conv.da-leggere .chat-conv-ora { color: #1fa855; font-weight: 700; }
.chat-conv.da-leggere .chat-conv-testo { color: #111b21; }
.chat-conv-segni { display: flex; align-items: center; gap: 5px; min-height: 22px; }
.chat-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #25d366; color: #fff; font-size: .78rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.chat-conv-fare { font-size: .68rem; font-weight: 800; color: #b26b00; background: #fff3d6; border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
.chat-nuova { position: absolute; right: 16px; bottom: 16px; width: 56px; height: 56px; border: 0; border-radius: 16px; background: #00a884; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.chat-nuova:hover { background: #008f6f; }
/* conversazione */
.chat-giorno { align-self: center; margin: 6px 0; }
.chat-giorno span { background: #fff; color: #54656f; font-size: .75rem; border-radius: 8px; padding: 3px 10px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.chat-msg-testa { padding-right: 0; }
.chat-msg-piede { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 2px; }
.chat-msg-ora { font-size: .7rem; color: #667781; }
.chat-msg .chat-fatto, .chat-msg .chat-chiuso { position: static; }
.chat-msg .chat-chiuso { font-size: .68rem; color: #53bdeb; font-weight: 700; }
.chat-msg.nuovo .chat-msg-testa::after { display: none; }
.chat-msg.nuovo .chat-msg-ora::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; background: #25d366; vertical-align: middle; }
/* telefono: pannello chat agganciato in alto, alto quanto la parte visibile (la tastiera non spinge su la barra) */
@media (max-width: 600px) { .chat-pannello { top: 0; bottom: auto; height: 100dvh; } }

/* CHAT: testa bianca come WhatsApp, mascotte a sinistra e "Chat" in verde */
.chat-pannello .chat-testa { background: #fff !important; color: #111b21; border-bottom: 1px solid #eef0f1; }
.chat-pannello .chat-titolo { color: #111b21; }
.chat-pannello .chat-titolo-wa { color: #1daa61; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; }
.chat-mascotte { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.chat-pannello .chat-indietro { color: #111b21; font-size: 1.3rem; }
.chat-pannello .chat-dafare { color: #667781; }
.chat-pannello .chat-dafare.rosso { color: #fff; }
.chat-pannello .chat-testa .chat-avatar { box-shadow: none; }
.chat-pannello .chat-testa .chat-chiudi { background: #f0f2f5 !important; color: #111b21 !important; border: 1px solid #d1d7db !important; }
.chat-pannello .chat-filtri { padding-top: 4px; }

/* MAIL interne come la Chat: righe con collega, cliente, oggetto – anteprima */
.int-pannello .chat-conv { align-items: center; }
.int-pannello .int-cliente { font-size: .86rem; font-weight: 700; color: #12305a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.int-pannello .int-cliente.int-senza { font-weight: 400; font-style: italic; color: #8696a0; }
.int-pannello .chat-conv-nome { font-size: .95rem; }
.int-pannello .chat-conv.fatta { opacity: .72; }
.int-pallino { min-width: 12px; width: 12px; height: 12px; padding: 0; }
.int-clip { font-size: .8rem; color: #667781; }
.int-fatta { font-size: .68rem; font-weight: 700; color: #53bdeb; white-space: nowrap; }
.int-aperte { margin-left: auto; color: #008069; }
/* mail interna: le caselle del promemoria si vedono solo scegliendo Promemoria */
.int-prom[hidden] { display: none !important; }
/* telefono: il tasto FRONT non si mostra (si torna alla pagina iniziale toccando la mascotte) */
@media (max-width: 700px) { .nav button[data-vai="front"] { display: none !important; } }
@media (display-mode: window-controls-overlay) { .barra .mascotte { -webkit-app-region: no-drag; app-region: no-drag; } }
/* telefono: lampadina, scatta e calendario in alto accanto a 01; CHAT/MAIL/OGGI/PULSANTI nella riga sotto */
@media (max-width: 700px) {
  .barra { flex-wrap: wrap; align-items: center; }
  .barra .nav { order: 5; }
  .barra .barra-destra { order: 6; }
  .barra .magia, .barra .scatta-tasto { height: 40px; margin-left: 4px; padding: 0 8px; }
  .barra .magia svg { width: 32px; height: 36px; }
  .barra .magia .magia-stelle { display: none; }
  .barra .cal-tasto img { width: 24px; height: 24px; }
}
/* telefono: il tasto Archivia cliente non si mostra */
@media (max-width: 700px) { .nav button[data-vai="archivia"] { display: none !important; } }
/* telefono: scorrendo la pagina le due righe di pulsanti in alto restano ferme */
@media (max-width: 700px) {
  .guscio > .barra { position: sticky; top: 0; z-index: 40; background: var(--sfondo); margin: 0 -6px; padding: 6px 6px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
}

/* LETTERA-TASTO: solo la lettera colorata, niente fondo del tasto */
.lettera-tasto { background: none !important; border: none !important; box-shadow: none !important; padding: 0; margin: 0 2px; width: auto; height: auto; cursor: pointer; line-height: 0; border-radius: 8px; transition: transform .12s; }
.lettera-tasto:hover { transform: scale(1.12) rotate(-4deg); }
.lettera-tasto:active { transform: scale(.95); }
.lettera-tasto:focus-visible { outline: 3px solid #F9CF19; outline-offset: 1px; }

/* MAGIA: lettere nello stile Servizio Energia che dondolano avanti e indietro come le stelline */
.magia-scritta { display: inline-flex; gap: 1px; font-family: Fredoka, 'DM Sans', sans-serif; font-weight: 700; font-size: 1.44rem; letter-spacing: 0; line-height: 1; }
.magia-scritta span { display: inline-block; color: var(--c); -webkit-text-stroke: 1.1px #111; paint-order: stroke fill;
  text-shadow: 0 2px 0 #2b2b2b; animation: magia-lettera 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); transform-origin: 50% 80%; }
@keyframes magia-lettera { 0%, 100% { transform: translateY(1px) rotate(-10deg); } 50% { transform: translateY(-2px) rotate(10deg); } }
.magia.sopra .magia-scritta span { animation-duration: .6s; }
@media (prefers-reduced-motion: reduce) { .magia-scritta span { animation: none; } }

/* MAGIA senza lampadina, senza fondo e senza bordo: stelline a destra e a sinistra della scritta */
.magia { border: none !important; background: none !important; box-shadow: none !important; padding: 0 6px; gap: 3px; position: relative; }
.magia:hover { transform: scale(1.06); }
.magia:focus-visible { outline: 3px solid #F9CF19; outline-offset: 2px; border-radius: 10px; }
.magia.sopra { transform: scale(1.18); background: none !important; filter: drop-shadow(0 0 8px rgba(249, 207, 25, .9)); }
.magia-stelle.destra { animation-delay: -1.2s; }
.magia .magia-scritta { display: inline-flex !important; }
.magia.scn-attivo::after, .magia.scn-riattiva::after, .magia.scn-fermo::after { content: ''; position: absolute; right: -2px; top: 4px; width: 8px; height: 8px; border-radius: 50%; }
.magia.scn-attivo::after { background: #2e7d32; animation: scn-luce 1.6s ease-in-out infinite; }
.magia.scn-riattiva::after { background: #ef6c00; }
.magia.scn-fermo::after { background: #E4191C; width: 10px; height: 10px; animation: scn-luce .8s ease-in-out infinite; }
@media (max-width: 700px) { .barra .magia .magia-stelle { display: inline-block; } .magia-scritta { font-size: 1.25rem; } }

/* A arancio = Archivia anche su forniture e operazioni (senza il bordo rosso del vecchio tasto) */
button.lettera-tasto.forn-a, button.lettera-tasto[data-archivia] { border: none !important; width: auto; align-self: center; }
.lettera-tasto:disabled { opacity: .35; filter: grayscale(1); cursor: default; transform: none !important; }

/* E rossa = Elimina, al posto di tutti i cestini */
button.lettera-tasto { min-width: 0; }

/* FRECCE nello stile delle lettere: saltello nella loro direzione */
.lettera-tasto:hover .freccia-su { animation: fr-su .5s ease-in-out infinite alternate; }
.lettera-tasto:hover .freccia-giu { animation: fr-giu .5s ease-in-out infinite alternate; }
.lettera-tasto:hover .freccia-destra { animation: fr-destra .5s ease-in-out infinite alternate; }
@keyframes fr-su { to { transform: translateY(-3px); } }
@keyframes fr-giu { to { transform: translateY(3px); } }
@keyframes fr-destra { to { transform: translateX(3px); } }
.lettera-tasto:has(.lettera-svg[class*="freccia-"]):hover { transform: none; }
.lettera-tasto.doc-lettera { display: inline-flex; align-items: center; gap: 2px; line-height: 1; }
.lettera-tasto.doc-lettera b { font-family: Fredoka, 'DM Sans', sans-serif; font-size: .95rem; font-weight: 700; color: #1f2d45; }

/* BOLLETTA: un solo tasto (bianco = da caricare, fucsia = caricata con mese/anno, I rossa = insoluti) */
.boll-tasto { position: relative; width: 100%; height: 24px; padding: 0 6px; font-size: .75rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  background: #fff; color: #1f2d45; border: 1px solid var(--bordo); border-radius: 4px; }
.boll-tasto:hover { box-shadow: 0 0 0 2px #F9CF19; }
.boll-tasto.presente { background: var(--rosa-forte); border-color: #c45fbf; color: #4a1a46; }
.boll-i { position: absolute; top: -7px; right: -7px; width: 15px; height: 15px; line-height: 13px; border-radius: 50%; background: #E4191C; color: #fff;
  border: 1px solid #111; font-family: Fredoka, 'DM Sans', sans-serif; font-size: .7rem; font-weight: 700; text-align: center; }
.boll-vuoto { display: block; }
.boll-menu { position: fixed; z-index: 950; background: #fff; border: 2px solid var(--rosa-forte); border-radius: 14px; box-shadow: 0 8px 28px rgba(60, 20, 90, .3); padding: 10px 12px 12px; }
.boll-menu-tit { font-weight: 800; color: #7a2d75; font-size: .9rem; margin-bottom: 8px; }
.boll-menu-tasti { display: flex; gap: 8px; }
.boll-menu-tasti button { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 82px; padding: 6px 4px; background: #faf5ff; border: 1px solid #e4d2f2; border-radius: 10px; cursor: pointer; }
.boll-menu-tasti button:hover, .boll-menu-tasti button:focus-visible { background: #fff7d1; border-color: #F9CF19; outline: none; }
.boll-menu-tasti button span { font-size: .72rem; font-weight: 700; color: #1f2d45; line-height: 1.15; text-align: center; }
.boll-menu-tasti button.con-insoluti { background: #fdecea; border-color: #e57373; }
@media (max-width: 600px) { .boll-menu-tasti { flex-wrap: wrap; } .boll-menu-tasti button { width: 30%; } }

/* A di Archivia tutta a destra della fornitura (sul telefono resta dov'era) */
.forn > .forn-dx { order: 99; }

/* OPERAZIONI: un tasto per bolletta e contratto, L e S nel nostro stile, A tutta a destra */
.ope-doc { width: 92px !important; }
.boll-tasto.presente.contratto { background: var(--verde); border-color: #5f9b34; color: #1f3d0c; }
.ope-a { flex: none; width: 30px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 700px) { .ope:not(.aperta) > .ope-a { display: none; } .ope.aperta > .ope-a { order: 1; } }

/* POD/PDR doppi: pallino rosso con il ! (come la I degli insoluti) */
.punto-box { position: relative; display: block; min-width: 0; }
.punto-box > input { width: 100%; box-sizing: border-box; }
.punto-doppio { position: absolute; top: -7px; right: -6px; z-index: 2; width: 16px; height: 16px; padding: 0; line-height: 14px; border-radius: 50%; cursor: pointer;
  background: #E4191C; color: #fff; border: 1px solid #111; font-family: Fredoka, 'DM Sans', sans-serif; font-size: .72rem; font-weight: 700; text-align: center;
  animation: doppio-pulsa 1.6s ease-in-out infinite; }
@keyframes doppio-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.doppi-menu { max-width: 420px; }
.doppi-elenco { display: flex; flex-direction: column; gap: 6px; }
.doppi-elenco button { display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 1px 10px; padding: 7px 10px; background: #faf5ff; border: 1px solid #e4d2f2; border-radius: 10px; cursor: pointer; color: #1f2d45; }
.doppi-elenco button span { grid-column: 1; font-size: .78rem; color: #5d6878; }
.doppi-elenco button i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 700; color: #2299D5; }
.doppi-elenco button:hover, .doppi-elenco button:focus-visible { background: #fff7d1; border-color: #F9CF19; outline: none; }

/* il tasto bolletta occupa i due spazi di prima (data + tasti) */
.forn-griglia.serv .boll-tasto { grid-column: span 2; }

/* pagamento scelto: fondo giallo come le note */
.forn select.cf.pag-pieno { background: #ffff00 !important; font-weight: 600; }

/* FIRMA del contratto: etichetta OTP / CART nell'operazione */
.firma-tag { height: 22px; padding: 0 6px; border-radius: 11px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; cursor: pointer; justify-self: start; }
.firma-tag.otp { background: #2299D5; color: #fff; border: 1px solid #16679a; }
.firma-tag.cart { background: #e3e7ec; color: #4a5566; border: 1px solid #b9c6d6; }
.cte-nota-firma { font-size: .75rem; color: #5d6878; align-self: center; }

/* OPERAZIONI (23/10): Dual nella seconda riga (la CTE si allarga), I S A sulla prima riga dei tasti,
   OTP e Ins. sulla seconda tutti a destra, spazio tra CTE e Bolletta */
/* 25/10: la prima riga parte dalla Data (CTE piu' larga, ma la riga resta piu' corta di prima e non va sotto Bolletta);
   N. operazione all'inizio della seconda riga, dopo la spunta */
.ope-griglia.r1 { grid-template-columns: 86px 66px 60px 84px 96px 52px 45px 294px; }
.ope-griglia.r2 { grid-template-columns: 54px 56px 73px 124px 60px 116px 45px 78px; }
@container (max-width: 940px) { .ope-griglia.r1 { grid-template-columns: 86px 66px 60px 70px 80px 52px 45px 248px; } }
@container (max-width: 880px) {
  .ope-griglia.r1 { grid-template-columns: 84px 60px 52px 62px 70px 50px 41px 209px; }
  .ope-griglia.r2 { grid-template-columns: 52px 52px 70px 116px 52px 112px 41px 79px; }
}
@container (max-width: 800px) {
  .ope-griglia.r1 { grid-template-columns: 82px 56px 48px 56px 64px 46px 37px 183px; }
  .ope-griglia.r2 { grid-template-columns: 50px 50px 70px 116px 52px 112px 37px 83px; }
}
@media (max-width: 760px) {
  .ope-griglia.r1 { grid-template-columns: 86px 1fr 66px 1fr; width: auto; margin-left: 0; }
  .ope-griglia.r2 { grid-template-columns: 54px 56px 1fr 124px; width: auto; margin-left: 0; }
}
.ope > .ope-doc { margin-left: 10px; }
.ope > .ope-tasti { width: 132px; align-items: stretch; }
.ope-tasti > span:first-child { justify-content: flex-end; gap: 2px; }
.ope-tasti .ins-riga { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.ope-tasti .ins-riga .ins-posto { flex: 0 0 auto; }
.ope-tasti .ins-riga .ins-posto button.ins { width: auto; min-width: 70px; }
/* l'intestazione ha le stesse misure delle righe, così le colonne restano allineate */
.ope-intest > .ope-doc { margin-left: 10px; }
.ope-intest > .ope-tasti { width: 132px; }
/* niente spazio grigio in fondo: i tasti a destra non sono più alti delle due righe di campi */
.ope > .ope-tasti { gap: 3px; justify-content: space-between; }
.ope-tasti > span:first-child { height: 26px; align-items: center; }
.ope-tasti > span:first-child .lettera-svg { width: 23px; height: 25px; }
.ope-tasti .ins-riga { height: 26px; }
.ope-tasti .ins-riga .ins-posto button.ins { height: 24px; }
.ope-tasti .firma-tag { height: 20px; }

/* riquadri: tasto "Visualizza tutti (N)" / "Mostra meno" sotto le prime 8 righe */
.lista-tutti { display: block; width: 100%; margin-top: 5px; padding: 5px 8px; border: 1px dashed #8fa7c4; border-radius: 6px; background: #eef4fb;
  color: #22426b; font-size: .78rem; font-weight: 700; cursor: pointer; }
.lista-tutti:hover { background: #fff7d1; border-color: #F9CF19; border-style: solid; }

/* forniture e operazioni: il tasto Visualizza tutte / Mostra meno resta visibile in fondo anche scorrendo */
#box-forniture > .ope-mostra, #box-operazioni > .ope-mostra { position: sticky; bottom: 0; z-index: 2; background: var(--carta); padding: 4px 0; }
#box-forniture > .ope-mostra .lista-tutti, #box-operazioni > .ope-mostra .lista-tutti { margin-top: 0; }
#rel-lista + .lista-tutti { width: auto; margin: 4px 8px 6px; }

/* relazioni aperte: il riquadro prende l'altezza che serve e la parte sotto (forniture) scende */
.box-relazioni .relazioni.elenco-aperto { position: static; margin-bottom: 6px; }
.box-relazioni .relazioni.elenco-aperto ul { flex: none; }

/* BackOffice: Inseriti e Assegna nella stessa colonna a sinistra (niente buco sotto Inseriti quando le colonne sono 2);
   con 3 colonne restano Inseriti | colonna centrale | Assegna */
.bo-sx { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 1101px) {
  .bo-sx { display: contents; }
  .bo-sotto > .bo-sx > .bo-inseriti { order: 1; }
  .bo-sotto > .fo-colonna { order: 2; }
  .bo-sotto > .bo-sx > .bo-assegna { order: 3; }
}

/* Valori € in fondo alla finestra CTE: riquadro riservato (solo con la spunta CTE valori) */
.cte-box fieldset.cte-valori { border-color: #f9cf19; background: #fffbe6; }
.cte-box fieldset.cte-valori legend { color: #8a6d00; }
.cte-box .cte-valori input[data-ctv-campo].num { text-align: right; }
.cte-box .cte-valori input[readonly] { color: #555; }
.cte-box .cte-valori .cte-campi { flex-wrap: nowrap; }
.cte-box .cte-valori label { min-width: 0; }
.cte-box .cte-valori input[data-ctv-campo] { width: 100%; box-sizing: border-box; text-align: center; }
.cte-box .cte-valori input[data-ctv-campo].num { text-align: center; }
.cte-box .cte-nota-firma { flex: 1 1 100%; }
.cte-box { max-height: 96vh; }

/* MAGIA nella finestra CTE: legge il PDF e propone le differenze */
.cte-magia { background: none; border: none; cursor: pointer; padding: 2px 4px; margin-bottom: 4px; border-radius: 8px; }
.cte-magia .magia-scritta { font-size: 1.15rem; }
.cte-magia:hover, .cte-magia:focus-visible { background: #fff7b8; outline: none; }
.pgcte-scelte { display: flex; gap: 8px; justify-content: center; margin: 12px 0 8px; }
.pgcte-scelte .pulsante { width: auto; min-width: 64px; padding: 6px 14px; }
.pgcte-errore { color: #b42318; font-size: .8rem; min-height: 1em; margin-top: 4px; }
.difcte-box { max-width: 760px; width: 100%; }
.difcte { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: .88rem; text-align: left; }
.difcte th { font-size: .75rem; color: #1f4f8f; border-bottom: 2px solid #c9d3e3; padding: 4px 6px; }
.difcte td { border-bottom: 1px solid #e3e8f0; padding: 5px 6px; vertical-align: middle; word-break: break-word; }
.difcte td input { width: 17px; height: 17px; accent-color: #1f5fbf; }
.difcte td.ora { color: #8a97a8; text-decoration: line-through; }
.difcte td.nuovo { color: #1f7a3a; font-weight: 700; }
.difcte-note { font-size: .8rem; color: #4a5d75; margin-top: 8px; text-align: left; }
.cte-sezioni > fieldset[hidden] { display: none; }
.cte-usi { display: contents; }
.cte-usi[hidden] { display: none; }

/* Finestra CTE in tre parti: 1 PRIMA (tu) - 2 MAGIA (dal PDF) - 3 DOPO (tu o 04) */
.cte-parte { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; font-weight: 800; color: #1f4f8f; letter-spacing: .04em; margin-top: 4px; }
.cte-parte > b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1f4f8f; color: #fff; font-size: .8rem; }
.cte-parte > span { font-weight: 600; color: #5b6b82; letter-spacing: 0; }
.cte-parte-magia { background: #f3f9ff; border: 1px dashed #2299D5; border-radius: 8px; padding: 4px 10px; }
.cte-parte-magia .cte-magia .magia-scritta { font-size: 1.5rem; }
.cte-parte-magia .cte-magia { display: inline-flex; align-items: center; gap: 2px; margin: 0; }
.cte-parte-magia .cte-pdf { margin-left: auto; align-items: center; }
.cte-sezioni > fieldset.cte-p1 { background: #fff; }
.cte-sezioni > fieldset.cte-p2 { background: #f3f9ff; border-color: #b9d9f2; }
.cte-sezioni > fieldset.cte-p3 { background: #fbfbf4; border-color: #e3e0c4; }
.cte-box input.cte-visualizzato { font-size: .8rem !important; color: #5b6b82; }

/* Pannello MATERIALE del fornitore, a destra della finestra CTE */
.cte-lato-tasto { width: auto !important; padding: 5px 10px !important; align-self: flex-end; font-size: .78rem; }
.cte-lato { position: fixed; top: 0; right: 0; bottom: 0; width: 330px; max-width: 92vw; z-index: 2; background: #f7f9fc; border-left: 1px solid #c9d3e3;
  box-shadow: -6px 0 18px rgba(20, 30, 45, .18); overflow-y: auto; padding: 0 0 16px; font-size: .82rem; }
.cte-lato[hidden] { display: none; }
@media (min-width: 1500px) { .finestra.con-lato > .cte-box { margin-right: 340px; } }
.lato-testa { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #1f4f8f; color: #fff; font-weight: 800; font-size: .95rem; }
.lato-chiudi { margin-left: auto; background: none; border: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.lato-sez { padding: 8px 10px 2px; }
.lato-tit { font-size: .74rem; font-weight: 800; color: #1f4f8f; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid #c9d3e3; padding-bottom: 3px; margin-bottom: 4px; }
.lato-tit span { display: inline-block; min-width: 18px; text-align: center; background: #dfe8f5; border-radius: 9px; padding: 0 5px; margin-left: 4px; }
.lato-riga { display: flex; align-items: center; gap: 6px; padding: 5px 4px; border-bottom: 1px solid #e3e8f0; }
.lato-riga[data-lato-cte] { cursor: pointer; }
.lato-riga[data-lato-cte]:hover { background: #fff7b8; }
.lato-riga[aria-current="true"] { background: #e6f2fb; border-left: 3px solid #2299D5; }
.lato-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lato-txt b { font-weight: 700; color: #1d2430; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lato-txt span { font-size: .72rem; color: #5b6b82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lato-ok { color: #1f7a3a; font-weight: 800; }
.lato-no { color: #b42318; font-weight: 800; padding-right: 26px; }
.lato-regola { display: flex; flex-direction: column; padding: 4px; border-bottom: 1px dotted #e3e8f0; }
.lato-regola span { font-size: .72rem; color: #5b6b82; }
.lato-vuoto, .lato-nota { color: #8a97a8; font-size: .76rem; padding: 4px; }

/* MATERIALE del fornitore: box al centro sopra la CTE (moduli, composizione della stampa, altri PDF) */
.mat-box { max-width: 1150px; width: 100%; max-height: 94vh; overflow-y: auto; }
.mat-box h1 { margin-bottom: 8px; }
.mat-sez { border: 1px solid #c9d3e3; border-radius: 8px; padding: 6px 10px 10px; margin: 0 0 10px; background: #fff; text-align: left; }
.mat-sez legend { font-size: .8rem; font-weight: 800; color: #1f4f8f; padding: 0 4px; }
.mat-n { display: inline-block; min-width: 18px; text-align: center; background: #dfe8f5; border-radius: 9px; padding: 0 6px; margin-left: 4px; font-size: .74rem; color: #1f4f8f; }
.mat-moduli { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 14px; }
.mat-tasti { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.mat-tasti .pulsante { width: auto; padding: 5px 14px; }
.mat-pdc { max-height: 46vh; }
.mat-pdc [data-pcampo="com_fornitore"] { color: #8a97a8; }
.mat-altri summary { cursor: pointer; font-size: .8rem; font-weight: 800; color: #1f4f8f; padding: 2px 0; }
.mat-altri[open] summary { margin-bottom: 6px; }
.lato-riga.altra-cat { opacity: .45; }
.mat-info { font-size: .8rem; color: #4a5d75; text-align: left; margin-bottom: 6px; }
.mat-doc table { width: 100%; }
.mat-doc th { font-size: .75rem; }
.mat-doc td { padding: 4px 5px; }
.mat-doc select, .mat-doc input[type="text"] { width: 100%; box-sizing: border-box; padding: 5px 6px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; font-size: .88rem; background: #ececec; }
.mat-doc select:focus, .mat-doc input[type="text"]:focus { background: #fff7b8; outline: none; }
.mat-doc td:first-child { width: 34%; }
.mat-doc td:nth-child(4) { width: 90px; }
.mat-doc input[type="checkbox"] { width: 17px; height: 17px; accent-color: #1f5fbf; }
.mat-doc tr.spenta td { opacity: .5; }
.mat-doc .salvato { box-shadow: 0 0 0 2px #7cc36b; }
.mat-tasti { margin-top: 8px; }
.mat-pdf { white-space: nowrap; } .mat-pdf .lato-no { padding-right: 4px; } .mat-pdf .lettera-tasto { margin-left: 4px; vertical-align: middle; }
.mat-ripristina { width: auto !important; padding: 4px 10px !important; font-size: .75rem; }

/* NUOVA MAGIA nel box DOCUMENTI */
.mat-tasti { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.mat-magia { display: inline-flex; align-items: center; gap: 2px; }
.mat-magia .magia-scritta { font-size: 1.25rem; }
.nm-box { max-width: 640px; width: 100%; }
.nm-campi { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 10px 0 4px; text-align: left; }
.nm-campi label { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; font-weight: 600; color: #2f5d3a; flex: 1 1 160px; }
.nm-campi .nm-largo { flex-basis: 100%; }
.nm-campi input[type="text"], .nm-campi select { padding: 6px 8px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; font-size: .9rem; background: #ececec; }
.nm-campi input[type="text"]:focus, .nm-campi select:focus { background: #fff7b8; outline: none; }
.nm-campi .nm-spunta { flex-direction: row; align-items: center; gap: 6px; font-size: .85rem; color: #1d2430; flex: 0 0 auto; }
.nm-campi .nm-spunta input { width: 17px; height: 17px; accent-color: #1f5fbf; }
.mat-doc tr.mat-nuova-riga td { background: #eaf7e6; }

/* PREPARA (Passo 3): pagine del modulo con i dati del cliente di prova sopra */
.prep-finestra { padding: 8px; }
.prep-box { background: #f3f5f9; border-radius: 12px; width: 100%; max-width: 1400px; height: 96vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.prep-testa { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: #1f4f8f; color: #fff; }
.prep-testa b { font-size: 1.05rem; }
.prep-testa span { font-size: .78rem; opacity: .85; }
.prep-corpo { flex: 1 1 auto; display: flex; min-height: 0; }
.prep-pagine { flex: 1 1 auto; overflow: auto; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.prep-pagine.in-attesa .prep-pagina { cursor: crosshair; }
.prep-pagina { position: relative; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); flex: 0 0 auto; }
.prep-pagina canvas { display: block; }
.prep-num { position: absolute; top: -12px; left: 0; font-size: .68rem; color: #5b6b82; }
.prep-strato { position: absolute; inset: 0; }
.prep-scr { position: absolute; white-space: nowrap; font-family: Helvetica, Arial, sans-serif; color: #0b3fa8; background: rgba(34,153,213,.12); outline: 1px dashed rgba(34,153,213,.6); cursor: move; user-select: none; display: flex; }
.prep-scr span { display: inline-block; text-align: center; }
.prep-scr.vuota { color: #b42318; background: rgba(228,25,28,.08); outline-color: rgba(228,25,28,.5); font-style: italic; }
.prep-scr.sel { outline: 2px solid #F9CF19; background: rgba(249,207,25,.35); z-index: 2; }
.prep-campo { position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 9px; color: #1f7a3a; background: rgba(69,172,55,.12); outline: 1px dashed rgba(69,172,55,.7); overflow: hidden; white-space: nowrap; pointer-events: none; }
.prep-lato { flex: 0 0 470px; display: flex; flex-direction: column; border-left: 1px solid #c9d3e3; background: #fff; min-height: 0; }
.prep-tasti { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #e3e8f0; }
.prep-tasti .magia-scritta { font-size: 1.3rem; }
.prep-tasti .pulsante { width: auto; padding: 5px 12px; }
.prep-elenco { flex: 1 1 auto; overflow-y: auto; padding: 6px 8px; }
.prep-sez { font-size: .74rem; font-weight: 800; color: #1f4f8f; text-transform: uppercase; margin: 8px 0 4px; }
.prep-riga { display: flex; align-items: center; gap: 4px; padding: 3px 2px; border-bottom: 1px solid #eef1f6; }
.prep-riga.sel { background: #fff7b8; }
.prep-riga input, .prep-riga select { padding: 3px 5px; border: 1px solid var(--bordo); border-radius: 5px; font: inherit; font-size: .78rem; background: #f2f2f2; min-width: 0; }
.prep-riga input[data-k="origine"], .prep-riga input[data-kc="origine"] { flex: 1 1 140px; }
.prep-riga input.corto { flex: 0 0 60px; }
.prep-riga input.mini { flex: 0 0 38px; text-align: center; }
.prep-pg { font-size: .7rem; color: #5b6b82; flex: 0 0 auto; }
.prep-togli { background: none; border: none; color: #b42318; font-size: 1.1rem; cursor: pointer; padding: 0 4px; }
.prep-nomecas { flex: 0 0 150px; font-size: .74rem; color: #1d2430; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prep-fondo { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 10px; border-top: 1px solid #e3e8f0; }
.prep-fondo .pulsante { width: auto; padding: 6px 14px; }
@media (max-width: 1100px) { .prep-lato { flex-basis: 360px; } }
.cte-sezioni > fieldset > legend.cte-leg-parte { display: flex; align-items: center; gap: 6px; font-weight: 800; color: #1f4f8f; letter-spacing: .04em; }
.cte-leg-parte > b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1f4f8f; color: #fff; font-size: .74rem; }
.cte-leg-parte > span { font-weight: 600; color: #5b6b82; letter-spacing: 0; }
.cte-sezioni > fieldset.cte-meta .cte-campi label[data-ric] { width: 100% !important; }
.cte-box h1.cte-titolo { font-size: 1.25rem; word-break: break-word; }
.cte-box .cte-valori .cte-campi { flex-wrap: wrap; }
.cte-box .cte-valori .cte-campi > label { flex-shrink: 1; }
.ctv-canvass { flex: 1 1 100%; display: flex; align-items: flex-end; gap: 12px; }
.ctv-canvass label { display: flex; flex-direction: column; gap: 2px; font-size: .72rem; font-weight: 600; color: #2f5d3a; width: 190px; flex: 0 0 auto; }
.ctv-canvass select { padding: 5px 7px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; font-size: .9rem; background: #ececec; }
.ctv-can-info { font-size: .86rem; color: #1d2430; padding-bottom: 6px; }
.ctv-can-info b { color: #1f7a3a; }
.can-titolo { font-weight: 800; color: #8a6d00; }
.can-rosso { color: #b42318; font-weight: 700; }
.can-arancio { color: #c2610c; font-weight: 700; }
.can-grigio { color: #8a97a8; }
.cte-box .cte-valori .cte-campi { gap: 6px 10px; } .ctv-canvass { margin-top: 2px; }
/* zone dove si trascina un file (MAGIA della CTE, NUOVA MAGIA) */
.trascina-sopra { outline: 3px dashed #F9CF19 !important; outline-offset: 2px; background: #fff7b8 !important; }
/* CTE dell'operazione come tendina: sembra il campo di prima, ma si apre per cambiarla */
select.ope-cte-sel { width: 100%; min-width: 0; cursor: pointer; font: inherit; text-overflow: ellipsis; }
select.ope-cte-sel:focus { background: #fff7b8; outline: none; }
select.ope-cte-sel { display: block; line-height: normal; word-break: normal; white-space: nowrap; }
/* CTE dell'operazione: carattere piccolo come prima; un po' di spazio prima dei tasti Bolletta / Contratto */
select.ope-cte-sel { font-size: .68rem; font-family: inherit; height: 24px; padding: 1px 2px; }
select.ope-cte-sel option, select.ope-cte-sel optgroup { font-size: .8rem; }
.ope-doc { margin-left: 10px; }
.ope-compatta .oc-cte { margin-right: 10px; }

/* RISPARMIO nella griglia delle offerte (a sinistra di Ele/Gas) e finestra del confronto */
.griglia th.ris-col { font-size: .66rem; line-height: 1.1; white-space: nowrap; }
.griglia td.ris-col { text-align: center; padding: 2px 3px; white-space: nowrap; }
.ris-tasto { border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; font: inherit; font-weight: 800; font-size: .8rem; cursor: pointer; background: none; }
.ris-tasto.si { color: #1f7a3a; background: #e6f5e2; border-color: #b6dfae; }
.ris-tasto.no { color: #b42318; background: #fde8e7; border-color: #f2b8b5; }
.ris-tasto:hover, .ris-tasto:focus-visible { background: #fff7b8; outline: none; }
.ris-box { width: 640px; }
.ris-tot { font-size: 1.15rem; margin-bottom: 10px; }
.ris-tot.si b { color: #1f7a3a; } .ris-tot.no b { color: #b42318; }
.ris-tab { width: 100%; border-collapse: collapse; font-size: .86rem; text-align: left; }
.ris-tab th { font-size: .74rem; color: #1f4f8f; border-bottom: 2px solid #c9d3e3; padding: 4px 6px; vertical-align: bottom; }
.ris-tab th span { font-weight: 500; color: #5b6b82; font-size: .7rem; }
.ris-tab td { border-bottom: 1px solid #e3e8f0; padding: 5px 6px; }
.ris-tab td.num { text-align: right; white-space: nowrap; }
.ris-tab td.si { color: #1f7a3a; font-weight: 800; } .ris-tab td.no { color: #b42318; font-weight: 800; }
.ris-tab tr.ris-nota td { font-size: .74rem; color: #5b6b82; border-bottom: 1px dotted #e3e8f0; padding-top: 0; }
.ris-tab tr.ris-totale td { font-weight: 800; border-top: 2px solid #c9d3e3; }
.ris-info { font-size: .74rem; color: #5b6b82; text-align: left; margin-top: 8px; }
.ris-forn { font-size: .74rem; color: #5b6b82; margin-bottom: 4px; }
/* colonna Risparmio: senza sfondo e senza bordi, stretta e attaccata a Ele/Gas */
table.griglia td.ris-col, table.griglia th.ris-col { background: transparent !important; border: none !important; width: 1%; padding: 0 3px 0 6px; text-align: right; white-space: nowrap; }
.punto-doppio { width: auto !important; min-width: 16px; padding: 0 3px !important; font-size: .68rem; font-weight: 800; }
.cf-box { position: relative; padding-right: 10px; }
/* colonna Risparmio con il colore della riga (rosa luce, azzurro gas), come le altre celle */
table.griglia tr.riga-ele td.ris-col { background: #f8cdf5 !important; }
table.griglia tr.riga-gas td.ris-col { background: #cfe6fb !important; }
.pms-cat { font: inherit; font-size: .7rem; padding: 1px 2px; max-width: 90px; }
.ope-tasti .ins-riga, .ope-tasti .ins-riga:hover { background: transparent; border-bottom: none; padding: 0; cursor: default; }
/* colonna Risparmio: casella come le altre della griglia (bordo, colore della riga, larghezza fissa) */
table.griglia td.ris-col { border: 1px solid #bfc4ca !important; width: 64px; min-width: 64px; padding: 2px; text-align: center; }
table.griglia th.ris-col { border: none !important; border-bottom: 1px solid var(--bordo) !important; background: var(--grigio-testa) !important; width: 64px; text-align: center; padding: 4px 2px; }
table.griglia td.ris-col .ris-tasto { width: 100%; padding: 3px 2px; }
/* tasto MAGIA della carta d'identita' (scheda documenti e testata) */
.lettera-tasto[data-doccli="M"], .lettera-tasto.ci-magia { font-size: 19px; line-height: 1; padding: 0 2px; background: transparent; border: 0; cursor: pointer; }

/* OPERAZIONI (25/10): etichette DENTRO i campi, niente barra delle intestazioni sopra (solo computer;
   telefono e tablet restano come prima). Etichetta e campo stanno nella stessa casella della griglia. */
@media (min-width: 901px) {
  .ope-intest { display: none; }
  .ope-griglia > * { grid-row: 1; }
  .ope-griglia > :nth-child(1), .ope-griglia > :nth-child(2) { grid-column: 1; }
  .ope-griglia > :nth-child(3), .ope-griglia > :nth-child(4) { grid-column: 2; }
  .ope-griglia > :nth-child(5), .ope-griglia > :nth-child(6) { grid-column: 3; }
  .ope-griglia > :nth-child(7), .ope-griglia > :nth-child(8) { grid-column: 4; }
  .ope-griglia > :nth-child(9), .ope-griglia > :nth-child(10) { grid-column: 5; }
  .ope-griglia > :nth-child(11), .ope-griglia > :nth-child(12) { grid-column: 6; }
  .ope-griglia > :nth-child(13), .ope-griglia > :nth-child(14) { grid-column: 7; }
  .ope-griglia > :nth-child(15), .ope-griglia > :nth-child(16) { grid-column: 8; }
  .ope-griglia > :nth-child(17), .ope-griglia > :nth-child(18) { grid-column: 9; }
  .ope .ope-griglia .fa-et {
    display: block; align-self: start; justify-self: start; z-index: 1; pointer-events: none;
    margin: 1px 0 0 3px; font-size: 9px; line-height: 10px; font-weight: 600; color: #5d6878; white-space: nowrap;
  }
  .ope .ope-griglia .fa-et[data-corta] { font-size: 0; }
  .ope .ope-griglia .fa-et[data-corta]::before { content: attr(data-corta); font-size: 9px; }
  /* campi un po' piu' alti: etichetta in alto, valore sotto */
  .ope input.co, .ope select.co, .ope select.stato-sel, .ope .ope-cte, .ope .ope-nota { height: 32px; padding-top: 10px; }
  .ope input.co.data { padding-top: 10px; }
  .ope .ope-nota { line-height: 20px; }
  .ope .ope-cte { line-height: 10px; }
  .ope-id { align-self: stretch; height: 32px; padding-top: 12px; border: 1px solid transparent; }
}

/* 25/10: Visualizza tutte e Visualizza tutte <categoria> uno a fianco dell'altro; ARCHIVIA delle spunte sotto la lista */
.ope-mostra-due { display: flex; gap: 6px; }
#box-operazioni > .ope-mostra.ope-mostra-fondo { position: static; margin-top: 4px; }
/* con il blocco LAVORI E OMAGGI sotto, le barre dei contratti restano attaccate ai contratti (non scendono in fondo) */
.ope-fondo-tasti { display: flex; gap: 8px; margin: 12px 0 4px; }   /* 4px = circa 1 mm sopra il box */
/* pie' di pagina NUOVO LAVORO / NUOVO OMAGGIO + ultimo lavoro o omaggio: sempre visibile in fondo */
/* pie' di pagina della scheda Contratti: fuori dalla parte che scorre, sempre visibile in fondo */
.piede-cliente { container-type: inline-size; }
.piede-cliente:empty { display: none; }
.piede-cliente .ope-fondo { background: var(--carta); border: 1px solid #c9d1db; border-radius: 10px; padding: 1px 8px 6px; margin-top: 6px; max-height: 45vh; overflow-y: auto; box-shadow: 0 -4px 8px -6px rgba(0,0,0,.25); }
.piede-cliente .ope-fondo-tasti { margin-top: 4px; }   /* circa 1 mm dal bordo del riquadro grigio chiaro */
.accesso-box.mini-maschera { width: min(600px, calc(100vw - 32px)); max-width: none; }
.mini-maschera .lav-tasti { flex-wrap: nowrap; }
.mini-maschera .lav-box { margin: 6px 0; }   /* barre del blocco lavori/omaggi: non restano attaccate in fondo */
.ope-mostra-due .lista-tutti { flex: 1 1 0; min-width: 0; }
.ope-sel-piede { display: flex; justify-content: flex-end; }
.ope-sel-piede .ope-arch-sel:not([hidden]) { margin: 4px 8px 6px; }

/* 25/10 (2): CART/OTP sulla prima riga a sinistra della I; Bolletta e Contratto piu' a destra;
   la CTE si allarga solo fin dove c'e' posto, cosi' non finisce mai sotto Bolletta */
@media (min-width: 901px) {
  .ope-tasti > span:first-child { gap: 3px; }
  .ope-tasti > span:first-child .firma-tag { margin-right: 3px; }
  .ope > .ope-tasti, .ope-intest > .ope-tasti { width: 124px; }
  .ope > .ope-doc { margin-left: 6px; }
  .ope-griglia.r1 { grid-template-columns: 82px 60px 52px minmax(52px, 84px) minmax(64px, 96px) 50px 41px minmax(100px, 1fr) !important;
    width: auto !important; margin-left: 0 !important; }
}

/* 25/10: Fornitura e Fornitore dell'operazione non si cambiano (il fornitore segue la CTE): niente freccetta, niente clic */
.ope select.co.sola-lettura { appearance: none; -webkit-appearance: none; background-image: none; pointer-events: none; cursor: default; }

/* 25/10: FORNITURE come le operazioni: etichette DENTRO i campi, niente barra delle intestazioni (solo computer).
   NUOVA va nella barra in fondo. Etichetta e campo stanno nella stessa casella della griglia. */
.b-nuova-forn { padding: 2px 12px; border: 1px solid #6aa23a; border-radius: 4px; background: #9ed36a; color: #1f3d0c; font-weight: 700; font-size: .78rem; cursor: pointer; flex: none; }
#box-forniture .forn-piede { display: flex; align-items: center; gap: 10px; }
#box-forniture .forn-piede .lista-tutti { flex: 1 1 auto; width: auto; }
@media (max-width: 900px) {
  .b-nuova-forn, #box-forniture .forn-piede.solo-nuova { display: none; }
  .fa-et.vuota { display: none !important; }
}
@media (min-width: 901px) {
  .forn-intest { display: none !important; }
  .forn-griglia.testa > *, .forn-griglia.serv > * { grid-row: 1; }
  .forn-griglia.testa > :nth-child(1), .forn-griglia.testa > :nth-child(2) { grid-column: 1; }
  .forn-griglia.testa > :nth-child(3), .forn-griglia.testa > :nth-child(4) { grid-column: 2; }
  .forn-griglia.testa > :nth-child(5), .forn-griglia.testa > :nth-child(6) { grid-column: 3; }
  .forn-griglia.testa > :nth-child(7), .forn-griglia.testa > :nth-child(8) { grid-column: 4; }
  .forn-griglia.testa > :nth-child(9), .forn-griglia.testa > :nth-child(10) { grid-column: 5; }
  .forn-griglia.testa > :nth-child(11), .forn-griglia.testa > :nth-child(12) { grid-column: 6; }
  .forn-griglia.testa > :nth-child(13), .forn-griglia.testa > :nth-child(14) { grid-column: 7; }
  .forn-griglia.serv > :nth-child(1) { grid-column: 1; }
  .forn-griglia.serv > :nth-child(2), .forn-griglia.serv > :nth-child(3) { grid-column: 2; }
  .forn-griglia.serv > :nth-child(4), .forn-griglia.serv > :nth-child(5) { grid-column: 3; }
  .forn-griglia.serv > :nth-child(6), .forn-griglia.serv > :nth-child(7) { grid-column: 4; }
  .forn-griglia.serv > :nth-child(8), .forn-griglia.serv > :nth-child(9) { grid-column: 5; }
  .forn-griglia.serv > :nth-child(10), .forn-griglia.serv > :nth-child(11) { grid-column: 6; }
  .forn-griglia.serv > :nth-child(12), .forn-griglia.serv > :nth-child(13) { grid-column: 7; }
  .forn-griglia.serv > :nth-child(14), .forn-griglia.serv > :nth-child(15) { grid-column: 8; }
  .forn-griglia.serv > :nth-child(16), .forn-griglia.serv > :nth-child(17) { grid-column: 9 / span 2; }
  .forn .forn-griglia .fa-et {
    display: block; align-self: start; justify-self: start; z-index: 1; pointer-events: none;
    margin: 1px 0 0 3px; font-size: 9px; line-height: 10px; font-weight: 600; color: #5d6878; white-space: nowrap;
  }
  .forn .forn-griglia .fa-et[data-corta] { font-size: 0; }
  .forn .forn-griglia .fa-et[data-corta]::before { content: attr(data-corta); font-size: 9px; }
  .forn .forn-griglia .fa-et.et-boll, .forn .forn-griglia .fa-et.vuota { display: none; }
  .forn .forn-griglia.serv.spento .fa-et { display: none; }
  /* campi un po' piu' alti: etichetta in alto, valore sotto */
  .forn input.cf, .forn select.cf, .forn .ro, .forn .forn-nota { height: 32px; padding-top: 10px; }
  .forn .testa input.cf, .forn .testa select.cf, .forn .testa .ro { height: 34px; padding-top: 10px; }
  .forn .ro, .forn .forn-nota { line-height: 20px; }
  .forn-griglia.serv.spento .forn-nota.piena { height: 20px; padding-top: 0; line-height: 18px; }
}

/* 25/10: sul computer NUOVA e Visualizza tutte stanno SOPRA le forniture (ferme in alto quando si scorre) */
@media (min-width: 901px) {
  #box-forniture { display: flex; flex-direction: column; }
  #box-forniture > .forn-piede { order: -1; top: 0; bottom: auto; margin-bottom: 4px; }
  #box-forniture > .forn { margin-bottom: 6px; }
}

/* 25/10: bordo verde della fornitura spuntata solo quando se ne vedono piu' di una */
#box-forniture:not(:has(> .forn ~ .forn)) > .forn.in-stampa { border: 1px solid var(--bordo); padding: 4px; }

/* 25/10: NUOVA FORNITURA sempre a sinistra */
#box-forniture .forn-piede { justify-content: flex-start; }

/* 25/10: fondo della maschera grigio chiaro; Forniture e Operazioni senza riquadro intorno:
   le schede grigio medio stanno direttamente sul fondo (solo computer) */
@media (min-width: 901px) {
  #contenuto:has(.riq-trasparente) { background: var(--carta); padding: 0 10px 10px; border-radius: var(--raggio); }
  .riquadro.riq-trasparente { background: transparent; border: 0; border-radius: 0; }
  .riq-trasparente #box-forniture > .forn-piede, .riq-trasparente #box-operazioni > .ope-mostra { background: var(--carta); }
  .riq-trasparente .ope, .riq-trasparente .ope-dual { margin-left: 0; }
}

/* 25/10: sul computer Visualizza tutte delle operazioni sta SOPRA l'elenco (fermo in alto quando si scorre) */
@media (min-width: 901px) {
  #box-operazioni { display: flex; flex-direction: column; }
  #box-operazioni > .ope-mostra { order: -1; top: 0; bottom: auto; margin-bottom: 4px; }
}

/* 25/10: NUOVO CONTRATTO Ele/Gas – tasti delle richieste in alto (quello scelto verde), una sola colonna
   di tasti nella tabella, DUAL a destra della tabella (solo computer; sul telefono resta sotto) */
.nc-richieste { display: flex; gap: 3px; flex-wrap: wrap; }
.nc-richieste[hidden] { display: none; }
.rich-tasto { height: 26px; padding: 0 8px; border: 1px solid #b3b8bf; border-radius: 4px; background: #eef0f2; color: #5d6878;
  font-size: .74rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.rich-tasto:hover { background: #fff7d1; border-color: #F9CF19; }
.rich-tasto.acceso { background: linear-gradient(#b4e283, #8cc95a); border-color: #5f9b34; color: #1f3d0c; }
table.griglia th.col-rich { width: 84px; text-align: center; }
table.griglia .btn-matrice.rich-crea { width: 76px; white-space: nowrap; }
.nc-corpo { display: contents; }
@media (min-width: 901px) {
  .nuovo-contratto .nc-corpo { display: flex; flex: 1 1 auto; min-height: 0; }
  .nuovo-contratto .nc-corpo > .griglia-box { flex: 1 1 auto; min-width: 0; }
  .nuovo-contratto .nc-corpo > .dual-rientro { flex: none; width: 220px; flex-direction: column; align-items: stretch; padding: 6px;
    border-top: 0; border-left: 1px solid var(--bordo); }
  .nuovo-contratto .nc-corpo .dual { flex: 1 1 auto; flex-direction: column; min-height: 0; }
  .nuovo-contratto .nc-corpo .dual .t { width: auto; justify-content: center; padding: 4px; }
  .nuovo-contratto .nc-corpo .dual .ele, .nuovo-contratto .nc-corpo .dual .gas {
    flex: 1 1 0; white-space: normal; align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 8px; overflow: hidden; }
  .nuovo-contratto .nc-corpo .dual b { word-break: break-all; }
  .nuovo-contratto .nc-corpo .dual-pulsanti { justify-content: center; padding: 6px; }
  .nuovo-contratto .nc-corpo .dual-pulsanti .btn-matrice { width: 100%; min-height: 30px; }
}
@media (min-width: 901px) {
  .nuovo-contratto .nc-corpo .dual b { white-space: normal; overflow: visible; max-width: 100%; }
  .nuovo-contratto .nc-testa .nc-cte { min-width: 110px; }
  .nuovo-contratto .nc-testa { flex-wrap: nowrap; }
}
.rich-tasto { padding: 0 6px; }
@media (min-width: 901px) {
  /* Ricerca CTE: la scritta va dentro il campo, cosi' c'e' posto per i tasti delle richieste */
  .nuovo-contratto .nc-testa .nc-cte { font-size: 0; gap: 0; }
  .nuovo-contratto .nc-testa .nc-cte input { font-size: .85rem; min-width: 0; }
}
/* 25/10: testata Nuovo contratto su una riga: niente titolo, "Categoria" dentro il campo */
@media (min-width: 901px) {
  .nuovo-contratto .nc-testa > .nc-titolo { display: none; }
  .nuovo-contratto .nc-testa .nc-cat { position: relative; font-size: 0; gap: 0; }
  .nuovo-contratto .nc-testa .nc-cat::before { content: "Categoria"; position: absolute; top: 2px; left: 7px; z-index: 1; pointer-events: none;
    font-size: 9px; line-height: 10px; font-weight: 600; color: #5d6878; text-transform: none; }
  .nuovo-contratto .nc-testa .nc-cat select { height: 32px; padding: 10px 6px 0; font-size: .85rem; font-weight: 600; min-width: 110px; }
  .nuovo-contratto .nc-testa .nc-richieste { flex-wrap: nowrap; }
  .nuovo-contratto .nc-testa .nc-cte input { height: 32px; }
}
@media (min-width: 901px) { .nuovo-contratto .nc-testa .nc-cat select { text-align: center; text-align-last: center; } }

/* 25/10: terza riga della testata cliente: totali Contratti e Lavori per categoria (annullati esclusi) */
#testata-cliente .fascia.totali { height: auto; min-height: 30px; line-height: normal; padding: 3px 8px; display: flex; flex-wrap: wrap; gap: 4px 14px;
  align-items: center; justify-content: center; white-space: normal; font-size: .78rem; }
.tot-gruppo { display: inline-flex; align-items: center; gap: 4px; }
.tot-nome { font-weight: 800; color: #7a2d75; margin-right: 2px; }
.tot-chip { height: 22px; padding: 0 7px; border: 1px solid #5f9b34; border-radius: 4px; background: linear-gradient(#b4e283, #8cc95a); color: #1f3d0c;
  font-size: .74rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tot-chip b { font-weight: 800; }
.tot-chip:hover { box-shadow: 0 0 0 2px #F9CF19; }
.tot-box { width: min(980px, 96vw); max-width: none; }
.tot-scorre { max-height: 60vh; overflow: auto; margin: 8px 0; }
.tot-tab { width: 100%; font-size: .8rem; }
.tot-tab td, .tot-tab th { padding: 4px 6px; text-align: left; }
.tot-tab td.tot-cte { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tot-tab tr.arch td { color: #7b8490; font-style: italic; }
.tot-tab .stato-tag { padding: 1px 6px; border-radius: 3px; }
.tot-tab .stato-tag.st-viola { background: #c9a3f2; } .tot-tab .stato-tag.st-verdino { background: #a8f5a2; }
.tot-tab .stato-tag.st-bianco { background: #fff; } .tot-tab .stato-tag.st-verde { background: #66ff66; }
.tot-tab .stato-tag.st-verde-scuro { background: #2e7d32; color: #fff; } .tot-tab .stato-tag.st-rosa { background: #f7b6e0; }

/* totali: arancio se ci sono operazioni non ancora inserite, con il numerino verde in alto a destra */
.tot-chip { position: relative; }
.tot-chip.manca { background: linear-gradient(#ffc56b, #f39a1e); border-color: #c46f00; color: #4a2a00; margin-right: 6px; }
.tot-regalo { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; margin-left: 6px; border: 1px solid #b8c9de; border-radius: 4px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.tot-regalo.dato { position: relative; margin-right: 6px; border-color: #5f9b34; background: linear-gradient(#b4e283, #8cc95a); color: #1f3d0c; }   /* omaggio gia' ricevuto: verde con la data */
.tot-regalo.da-fare { border-color: #F9CF19; background: linear-gradient(#fff59d, #ffd54f); }                /* mai ricevuto: giallo */
.tot-regalo.da-fare .tot-regalo-pacco { display: inline-block; animation: stelline 2.4s ease-in-out infinite; }  /* brilla come le stelline della MAGIA */
@media (prefers-reduced-motion: reduce) { .tot-regalo.da-fare .tot-regalo-pacco { animation: none; } }
.tot-badge { position: absolute; top: -7px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #45AC37; border: 1.5px solid #fff; color: #fff; font-size: .62rem; font-weight: 800; line-height: 13px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
#testata-cliente .fascia.totali { overflow: visible; padding-top: 6px; }

/* 25/10: RELAZIONI senza titolo: NUOVA RELAZIONE in alto a sinistra, Visualizza tutti in alto a destra */
.relazioni { position: relative; }
.relazioni h3 { min-height: 36px; }
.relazioni h3 .nuova { margin-left: 0; }
.relazioni > #rel-lista + .lista-tutti { position: absolute; top: 5px; right: 8px; width: auto; margin: 0; padding: 3px 10px; }
/* relazioni: righe piu' strette (se ne vedono 4, con Visualizza tutti 8) */
.relazioni li { padding: 2px 10px; min-height: 0; font-size: .8rem; }
.relazioni li .lettera-tasto .lettera-svg { width: 18px; height: 20px; }
.relazioni ul { max-height: none; }

/* 25/10: bollo nella maschera Inserisci (portale): OTP blu, CARTACEO rosso, come un timbro */
.cdp-bollo { margin-left: auto; flex: none; transform: rotate(-8deg); padding: 3px 14px; border: 3px double currentColor; border-radius: 8px;
  font-size: 1.15rem; font-weight: 900; letter-spacing: .12em; line-height: 1.1; background: rgba(255,255,255,.55);
  box-shadow: 0 0 0 1px currentColor inset; opacity: .9; user-select: none; }
.cdp-bollo.otp { color: #1673b0; }
.cdp-bollo.cart { color: #c8161a; }
.cdp-testa { padding-right: 10px; }
.relazioni li { padding: 5px 10px; }
/* bollo: 2 cm piu' basso, largo il doppio, alone giallo */
.cdp-bollo { transform: translateY(2cm) rotate(-8deg); padding: 6px 40px; font-size: 1.5rem; min-width: 220px; text-align: center; position: relative; z-index: 3;
  background: #fffbe0; box-shadow: 0 0 0 1px currentColor inset, 0 0 18px 8px rgba(249, 207, 25, .85); opacity: 1; }
/* DUAL a destra: testo centrato */
@media (min-width: 901px) {
  .nuovo-contratto .nc-corpo .dual .ele, .nuovo-contratto .nc-corpo .dual .gas { align-items: center; text-align: center; }
}
.dual .lettera-tasto.togli { background: transparent; border: 0; padding: 0; cursor: pointer; line-height: 0; }
/* DUAL: la E per togliere l'offerta in basso a destra del riquadro */
.nuovo-contratto .dual .ele, .nuovo-contratto .dual .gas { position: relative; }
.nuovo-contratto .nc-corpo .dual .lettera-tasto.togli { position: absolute; right: 4px; bottom: 3px; }
.nuovo-contratto .nc-corpo .dual .ele, .nuovo-contratto .nc-corpo .dual .gas { padding-bottom: 18px; }
.cdp-bollo { transform: translateY(3cm) rotate(-8deg); }

/* 25/10: INFO per il cliente – tasto sotto CART, finestra e gestione dei testi */
.firma-tag.info { background: linear-gradient(#b4e283, #8cc95a); color: #1f3d0c; border: 1px solid #5f9b34; }
.ope-tasti .ins-riga { justify-content: space-between; }
.ope-tasti .ins-riga .ins-posto { margin-left: auto; }
.info-box { width: min(760px, 96vw); max-width: none; }
.info-cli { text-align: center; font-weight: 700; margin: 4px 0 10px; color: var(--blu); }
.info-blocco { border: 1px solid var(--bordo); border-radius: 6px; background: #fff; padding: 8px 12px; margin-bottom: 8px; }
.info-ope { font-size: .8rem; color: #5d6878; border-bottom: 1px solid #e3e6ea; padding-bottom: 5px; margin-bottom: 6px; }
.info-testo { white-space: pre-wrap; line-height: 1.45; font-size: .95rem; }
.infog-box { width: min(960px, 96vw); max-width: none; }
.infog-spiega { font-size: .8rem; color: #5d6878; margin: 0 0 8px; }
.infog-elenco { max-height: 62vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.infog-riga { border: 1px solid var(--bordo); border-radius: 6px; padding: 6px 8px; background: var(--grigio-testa); }
.infog-campi { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.infog-campi label { display: flex; flex-direction: column; font-size: .68rem; font-weight: 700; color: var(--blu); }
.infog-campi select { padding: 3px 6px; min-width: 120px; }
.infog-campi .infog-att { flex-direction: row; align-items: center; gap: 4px; font-size: .78rem; }
.infog-tasti { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.infog-riga textarea { width: 100%; font: inherit; font-size: .88rem; padding: 6px; border: 1px solid var(--bordo); border-radius: 4px; resize: vertical; }
.infog-filtro { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; color: var(--blu); text-transform: uppercase; margin-bottom: 6px; }
.infog-filtro select { padding: 4px 8px; min-width: 220px; font-size: .9rem; text-transform: none; }

.infog-sez { font-size: .9rem; color: var(--blu); margin: 14px 0 6px; }
.infog-sez span { font-weight: 400; font-size: .78rem; color: #5d6878; }
.infog-servizi { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; }
.infog-ser { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 8px; align-items: end; border: 1px solid var(--bordo); border-radius: 6px; padding: 6px 8px; background: #eef7ec; }
.infog-ser textarea { grid-column: 1 / -1; width: 100%; font: inherit; font-size: .85rem; padding: 5px; border: 1px solid var(--bordo); border-radius: 4px; resize: vertical; }
.infog-ser-tit { display: flex; flex-direction: column; font-size: .68rem; font-weight: 700; color: var(--blu); }
.infog-ser-tit input { padding: 4px 6px; font-size: .9rem; }
.infog-elenco { max-height: 40vh; }
.infog-box { max-height: 94vh; overflow: auto; }

/* 25/10: totali FrontOffice – i numeri si cliccano */
.tot-tab td.tot-clic, table.tot td.tot-clic { cursor: pointer; }
table.tot td.tot-clic:hover { background: #fff7d1; text-decoration: underline; }
.tot-tab tr.tot-riga { cursor: pointer; }
.tot-tab tr.tot-riga:hover td { background: #fff7d1; }
/* 25/10: tolto RIENTRI DA FARE, restano due riquadri */
.fo-sotto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .fo-sotto { grid-template-columns: 1fr; } }

/* 25/10: liste dei TOTALI – clic sul cliente = scheda; clic sugli altri campi = filtro immediato */
.tot-det td[data-filtra] { cursor: zoom-in; }
.tot-det td[data-filtra]:hover { background: #fff7d1; text-decoration: underline; }
.tot-det td.tot-det-cli { cursor: pointer; font-weight: 600; color: var(--blu); }
.tot-det td.tot-det-cli:hover { text-decoration: underline; }
.tot-det-filtri { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 6px; }
.tot-filtro { padding: 3px 10px; border: 1px solid #c9a800; border-radius: 12px; background: #fff3b0; font-size: .78rem; cursor: pointer; }
.tot-filtro:hover { background: #ffe27a; }

/* 26/10: DELEGA del cliente */
.delega-tasto { background: transparent; border: 0; padding: 0; cursor: pointer; }
.delega-box { width: min(640px, 96vw); max-width: none; }
.delega-testo { white-space: pre-wrap; background: #fff; border: 1px solid var(--bordo); border-radius: 6px; padding: 10px 12px; line-height: 1.45; margin-bottom: 10px; }
.delega-elenco { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; max-height: 30vh; overflow: auto; }
.delega-riga { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 5px 8px; border: 1px solid var(--bordo); border-radius: 4px; background: var(--grigio-testa); font-size: .85rem; }
.delega-riga.ok { background: #e3f5df; border-color: #8cc95a; }
.delega-mail { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 6px; }
.delega-mail label { flex: 1; display: flex; flex-direction: column; font-size: .7rem; font-weight: 700; color: var(--blu); }
.delega-mail input { padding: 6px 8px; font-size: .95rem; }
.infog-delega { grid-template-columns: 1fr auto; }
.infog-delega textarea { grid-column: 1; }

/* 26/10/2026: S prima di Contratto, I prima di Ins.Ele, INFO dopo CART */
.ope-doc { width: 120px !important; }
.ope-doc .doc-riga { gap: 3px; }
.ope-doc .doc-riga .tasto-s .lettera-svg { width: 23px; height: 25px; }
.ope-tasti .ins-riga .lettera-svg { width: 23px; height: 25px; }
.ope-doc .doc-riga > .doc-tasti { flex: 1; min-width: 0; display: flex; }
.ope-doc .doc-riga.spazio-s { padding-left: 29px; }   /* Bolletta allineata a Contratto (che ha la S davanti) */

/* 26/10: la spunta dell'operazione sta a sinistra nella casella N., il numero va a destra (prima la spunta lo copriva) */
@media (min-width: 901px) {
  .ope > .ope-spunta { width: 24px; left: 4px; justify-content: flex-start; }
  .ope .ope-griglia.r2 .ope-id { text-align: right; padding-right: 4px; padding-left: 22px; }
}

/* maschere secondarie (27/10/2026): TORNA dentro la maschera, in alto solo mascotte, CHAT e MAIL */
body.in-maschera #barra-destra .chiudi-nascosto,
body.in-maschera .nav button[data-vai="back"],
body.in-maschera .nav button[data-vai="oggi"],
body.in-maschera .nav button[data-vai="pulsanti"],
body.in-maschera #magia,
body.in-maschera .barra .scatta-tasto { display: none !important; }
.torna-maschera { width: auto; white-space: nowrap; }
.torna-riga { display: flex; justify-content: flex-end; margin: 4px 0 8px; }

/* Info per il cliente: TORNA e NUOVA in alto, accanto al filtro fornitore */
.infog-testa { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.infog-testa-tasti { margin-left: auto; display: flex; gap: 8px; }
.infog-testa-tasti .pulsante { width: auto; }


/* ---------- Testata unica (27/10/2026): mascotte + NUOVO a sinistra, titolo al centro, TORNA a destra, bandiera sotto, ferma in alto ---------- */
.testa-cima { position: sticky; top: 0; z-index: 15; background: var(--sfondo); padding-top: 4px; }
.testa-cima .fin-bandiera { margin: 4px 0 8px; }
.chi-titolo.testa-maschera { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; }
.tm-sx { display: flex; align-items: center; gap: 10px; justify-self: start; min-width: 0; }
.tm-centro { display: flex; align-items: center; gap: 10px; justify-self: center; text-align: center; }
.tm-centro .chi-conta { margin-left: 0; }
.tm-dx { display: flex; align-items: center; gap: 8px; justify-self: end; }
.tm-mascotte { width: 44px; height: 44px; object-fit: contain; flex: none; }
.tm-sx .pulsante, .tm-dx .pulsante { width: auto; margin: 0; }
.finestra .chiudi-nascosto { display: none !important; }
.fin-cima { position: sticky; top: 0; z-index: 5; background: inherit; padding-top: 16px; }
.finestra .accesso-box:has(.fin-cima) { max-height: calc(100vh - 32px); overflow-y: auto; padding-top: 0; }
.fin-testa .fin-torna { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: auto; margin: 0; }
.fin-testa .fin-nuovo { position: absolute; left: 52px; top: 50%; transform: translateY(-50%); width: auto; margin: 0; }
.fin-testa:has(.fin-torna) h1, .fin-testa:has(.fin-nuovo) h1 { padding: 0 130px; }

/* Maschere come le finestre (27/10/2026): riquadro grigio con bordo, testata trasparente come quella delle finestre */
body.in-maschera #pagina { background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 0 22px 22px; }
body.in-maschera .testa-cima { background: var(--carta); padding-top: 16px; margin: 0 -22px; padding-left: 22px; padding-right: 22px; border-radius: 12px 12px 0 0; }
body.in-maschera .testa-cima .fin-bandiera { height: 9px; margin: 6px 0 10px; }
.chi-titolo.testa-maschera { background: none; border: 0; box-shadow: none; padding: 0; min-height: 48px; border-radius: 0; }
.chi-titolo.testa-maschera::before { display: none; }
.testa-maschera .tm-centro { font-size: 1.4rem; font-weight: 700; color: var(--blu); }
.testa-maschera .tm-centro .chi-conta { font-size: .78rem; }
.testa-maschera .tm-mascotte { width: 48px; height: 48px; }

/* App installata (barra del titolo nascosta): le finestre lasciano libera la striscia dei tasti … — ☐ ✕ */
@media (display-mode: window-controls-overlay) {
  .finestra { padding-top: calc(env(titlebar-area-height, 33px) + 6px); }
  .finestra .accesso-box:has(.fin-cima) { max-height: calc(100vh - env(titlebar-area-height, 33px) - 22px); }
}

/* la mascotte delle maschere e delle finestre porta al FrontOffice */
.tm-mascotte, .fin-mascotte { cursor: pointer; }

/* Titoli con le nostre lettere colorate (27/10/2026) */
.titolo-giocoso { font-family: Fredoka, 'Noto Sans', sans-serif; font-weight: 700; font-size: 1.9rem; letter-spacing: .03em; line-height: 1.1; white-space: pre;
  text-shadow: -1.5px -1.5px 0 #111, 1.5px -1.5px 0 #111, -1.5px 1.5px 0 #111, 1.5px 1.5px 0 #111, 0 -1.5px 0 #111, 0 1.5px 0 #111, -1.5px 0 0 #111, 1.5px 0 0 #111, 2px 3px 0 #111; }

/* Testata a sinistra in tutte le maschere: [NUOVO] titolo colorato + contatore ... TORNA (la mascotte c'e' gia' nella barra) */
.chi-titolo.testa-maschera { display: flex; align-items: center; }
.testa-maschera .tm-mascotte { display: none; }
.testa-maschera .tm-sx:not(:has(.pulsante)) { display: none; }
.testa-maschera .tm-centro { justify-self: auto; text-align: left; }
.testa-maschera .tm-dx { margin-left: auto; }
.titolo-giocoso { white-space: pre-wrap; }
/* Finestre: mascotte, [NUOVO], titolo colorato a sinistra ... TORNA */
.fin-testa { justify-content: flex-start; gap: 12px; }
.fin-testa .fin-mascotte, .fin-testa .fin-nuovo, .fin-testa .fin-torna { position: static; transform: none; }
.fin-testa .fin-mascotte { flex: none; margin-left: -6px; }
.fin-testa h1, .fin-testa:has(.fin-torna) h1, .fin-testa:has(.fin-nuovo) h1 { padding: 0; text-align: left; }
.fin-testa h1.titolo-giocoso { font-size: 1.6rem; color: inherit; }
.fin-testa .fin-torna { margin-left: auto; }
.tetto-box .fin-testa h1.titolo-giocoso { font-size: 1.25rem; }
@media (max-width: 600px) { .fin-testa h1.titolo-giocoso, .testa-maschera .titolo-giocoso { font-size: 1.25rem; } }

/* Filtri delle maschere (27/10/2026): i pulsanti in prima riga (a destra), i filtri sotto, larghi */
.cte-filtri:has(> .cte-tasti) { flex-wrap: wrap; row-gap: 8px; }
.cte-filtri > .cte-tasti { order: -1; flex: 1 0 100%; justify-content: flex-end; flex-wrap: wrap; }
.cte-filtri label { min-width: 110px; }

/* SELEZIONA FORNITURE (27/10/2026) */
.forn-piede .b-sel-forn { margin-left: auto; }
.selforn-box { max-width: 760px; }
.selforn-elenco { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; max-height: 40vh; overflow-y: auto; }
.selforn-riga { display: grid; grid-template-columns: 22px 54px 1fr auto auto; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--bordo); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: .9rem; }
.selforn-riga input { width: 18px; height: 18px; margin: 0; }
.selforn-id { font-weight: 700; color: #1f4f8f; }
.selforn-cod { font-size: .8rem; color: #4a5d75; text-align: right; }
.selforn-cod b.ele { color: #b0307a; } .selforn-cod b.gas { color: #1f5fbf; }
.selforn-tab { width: 100%; }
.selforn-tab .riga-ele td { background: #f6d6ef; } .selforn-tab .riga-gas td { background: #d6e6f8; }
.selforn-tab td.tip { font-weight: 700; text-align: center; }
.selforn-tab td.cella { text-align: center; width: 90px; }
/* SELEZIONA FORNITURE: arrotondato come gli altri tasti, scritta come il tasto Bolletta */
.forn-piede .b-sel-forn { height: 24px; padding: 0 12px; border: 1px solid #8fa7c4; border-radius: 6px; background: #fff; color: #1f2d45;
  font-size: .75rem; font-weight: 700; white-space: nowrap; cursor: pointer; flex: none; }
.forn-piede .b-sel-forn:hover { box-shadow: 0 0 0 2px #F9CF19; }
.selforn-uso { font-size: .8rem; font-weight: 600; color: #2f5d3a; white-space: nowrap; }
.selforn-cons { font-weight: 700; color: #1f2d45; margin-left: 4px; }
/* Forniture ELE (rosa) / Forniture GAS (azzurro) */
.forn-piede .b-sel-forn + .b-sel-forn { margin-left: 0; }
.forn-piede .b-sel-forn.sel-ele { background: var(--rosa); border-color: var(--rosa-forte); color: #4a1a46; }
.forn-piede .b-sel-forn.sel-gas { background: var(--azzurro); border-color: #6aa8e0; color: #13325e; }

/* 28/10/2026: con un cliente aperto (PC e tablet) barra, schede, testata del cliente e relazioni restano sempre visibili:
   scorre solo la parte sotto (la scheda Cliente / Contratti / Comunicazioni) */
@media (min-width: 701px) {
  .guscio:not(.senza-cliente) { box-sizing: border-box; height: 100vh; height: 100dvh; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .guscio:not(.senza-cliente) > .pagina { overflow-y: auto; min-height: 0; }
}
/* NUOVO LAVORO / NUOVO OMAGGIO: stesso aspetto di NUOVA FORNITURA ma visibili anche sugli schermi stretti */
@media (max-width: 900px) { .ope-fondo-tasti .b-nuova-forn { display: inline-block; } }
/* 28/10/2026: numero dell'operazione leggibile - senza "N.", spunta stretta a sinistra e numero subito dopo */
@media (min-width: 701px) {
  .ope-spunta { width: 22px; }
  .ope-griglia.r2 .ope-id { text-align: left; padding-left: 22px; font-size: .74rem; white-space: nowrap; }
}

/* 28/10/2026: forniture, categorie (Swa, Swa+Volt...) e lavori - tasti e barre Visualizza tutti alti 22 px,
   con 2 px di spazio sopra e sotto */
:is(#box-forniture, #box-operazioni, .piede-cliente, .nuovo-contratto) :is(.b-nuova-forn, .b-sel-forn, .rich-tasto, .lista-tutti) {
  box-sizing: border-box; height: 22px; min-height: 0; margin-top: 2px; margin-bottom: 2px; padding-top: 0; padding-bottom: 0; line-height: 20px;
}
:is(#box-forniture, #box-operazioni, .piede-cliente) :is(.ope-mostra, .forn-piede) { padding-top: 0; padding-bottom: 0; }
:is(#box-forniture, #box-operazioni, .piede-cliente) :is(.ope-mostra, .forn-piede) .lista-tutti { margin-top: 2px; margin-bottom: 2px; }
.piede-cliente .ope-fondo { padding-top: 0; }
.piede-cliente .ope-fondo-tasti, .ope-fondo-tasti { margin: 0; }
/* pie' di pagina: tasti e barre sulla stessa riga, le barre si allargano nello spazio che resta */
.ope-fondo-tasti { align-items: center; }
.ope-fondo-tasti .lista-tutti { flex: 1 1 0; width: auto; }
/* riquadro grigio chiaro del pie' di pagina: 2 px sotto i tasti (niente spazio in piu') */
.piede-cliente .ope-fondo { padding-bottom: 0; }
.piede-cliente .ope-fondo > .ope:last-child, .piede-cliente .ope-fondo > .ope-dual:last-child { margin-bottom: 2px; }
/* NUOVA FORNITURA / Visualizza tutte sopra le forniture: 2 px sotto (solo il margine del tasto) */
@media (min-width: 901px) { #box-forniture > .forn-piede { margin-bottom: 0; } }
/* 28/10/2026: riga Categoria / Swa... / Ricerca CTE compatta: tutto alto 22 px con 2 px sopra e sotto
   ("Categoria" non sta piu' dentro il campo: resta come suggerimento passandoci sopra) */
@media (min-width: 901px) {
  .nuovo-contratto .nc-testa { padding: 2px 8px; gap: 6px; }
  .nuovo-contratto .nc-testa .nc-cat::before { display: none; }
  .nuovo-contratto .nc-testa .nc-cat select, .nuovo-contratto .nc-testa .nc-cte input { box-sizing: border-box; height: 22px; padding: 0 6px; margin: 0; font-size: .82rem; }
  .nuovo-contratto .nc-testa .rich-tasto { margin-top: 0; margin-bottom: 0; }
}
/* la scritta "Categoria" a sinistra della tendina, fuori dal campo */
@media (min-width: 901px) {
  .nuovo-contratto .nc-testa .nc-cat { font-size: .72rem; gap: 6px; }
}
/* la I subito a sinistra di Ins.Ele / Ins.Gas / Ins.Dual */
.ope-tasti .ins-riga { justify-content: flex-end; gap: 3px; }
.ope-tasti .ins-riga .ins-posto { margin-left: 0; }
/* 28/10/2026: nella colonna di destra dell'operazione tasti e lettere alti come i campi (N. Contratto = 32 px) */
@media (min-width: 901px) {
  .ope .ope-doc .doc-riga, .ope .ope-tasti > span { height: 32px; align-items: center; }
  .ope .ope-doc .boll-tasto, .ope .ope-tasti .ins-riga .ins-posto button.ins, .ope .ope-tasti .firma-tag { box-sizing: border-box; height: 32px; }
  .ope .ope-doc .doc-riga .lettera-svg, .ope .ope-tasti .lettera-svg { width: 29px; height: 32px; }
}
/* lavori e interessati: solo A e I - omaggi: solo A (il posto resta, cosi' le righe restano allineate) */
.ope:is(.solo-a, .solo-ai) .ope-doc .doc-riga > *, .ope:is(.solo-a, .solo-ai) .ope-tasti .firma-tag { visibility: hidden; }
.ope.solo-ai .ope-tasti .ins-riga .ins-posto, .ope.solo-a .ope-tasti .ins-riga { visibility: hidden; }
/* CTE dell'operazione: grigia quando e' compilata (come gli altri campi), bianca se vuota */
.ope select.ope-cte-sel.piena { background-color: var(--campo-pieno) !important; }
.ope select.ope-cte-sel.piena:focus { background-color: #fff7b8 !important; }   /* giallino quando ci si scrive */

/* 28/10/2026 CTE: penale cliente e storno del gettone a scaglioni; scheda contratto: chip USCITA */
#forn-tab .forn-storno { width: 100%; min-height: 24px; border: 1px solid #f2b45a; background: #fff8e8; color: #7a4a00; border-radius: 4px; font-size: .75rem; font-weight: 700; cursor: pointer; text-align: left; padding: 2px 6px; }
#forn-tab .forn-storno.vuoto { border-color: #ccd3dc; background: transparent; color: #8a95a3; font-weight: 400; }
.fst-nota { margin: 0 0 8px; font-size: .85rem; }
.fst-righe { display: flex; flex-direction: column; gap: 6px; }
.fst-riga { display: flex; align-items: flex-end; gap: 8px; }
.fst-riga > b { width: 16px; padding-bottom: 6px; }
.fst-riga label { display: flex; flex-direction: column; font-size: .75rem; }
.fst-riga input { width: 90px; text-align: center; }
.ope-uscita { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 11px; font-size: .7rem; font-weight: 800; white-space: nowrap; cursor: help; }
.ope-uscita.storno { background: #fff1d6; color: #9a5a00; border: 1px solid #f2b45a; }
.ope-uscita.libera { background: #e4f4df; color: #2f6a1d; border: 1px solid #8fca7f; }

/* 28/10/2026 canvass sul fornitore: CTE del fornitore con gruppo / Esclusa */
.can-cte { margin-top: 10px; border: 1px solid #f9cf19; background: #fffbe6; border-radius: 6px; padding: 6px 8px; }
.can-cte .can-tit { font-weight: 700; color: #8a6d00; margin-bottom: 4px; }
.can-cte-tab { width: 100%; border-collapse: collapse; font-size: .82rem; }
.can-cte-tab td { padding: 2px 4px; border-bottom: 1px solid #f1e3a6; }
.can-cte-tab td.num { width: 46px; color: #777; }
.can-cte-tab select { width: 100%; max-width: 220px; }
.can-cte-tab select.manca { border-color: #f28c1c; background: #fff1d6; }
#forn-tab .forn-canvass:not(.vuoto) { border-color: #45ac37; background: #eef8eb; color: #2f6a1d; }

/* 28/10/2026 Fornitori: le note su una riga sotto il fornitore (larghe), con la Nota privata di 01 e 04 */
.forn-tabella tr.forn-riga td { border-bottom: none; }
.forn-tabella tr.forn-note td { padding-top: 0; padding-bottom: 8px; border-bottom: 1px solid #d6dde8; }
.forn-note-box { display: flex; gap: 10px; }
.forn-note-box label { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.forn-note-box label > span { font-size: .72rem; font-weight: 700; color: #5b6b82; }
.forn-note-box .forn-privata > span { color: #8a6d00; }
.forn-tabella .forn-note-box .forn-privata textarea { background: #fffbe6; border-color: #f2d36b; }

/* 28/10/2026 TORNA al centro della barra del titolo, in tutte le maschere e le finestre (nello spazio libero tra titolo e bordo destro) */
.testa-maschera .tm-dx { margin-left: 0; flex: 1 1 auto; justify-content: center; min-width: max-content; }
.chi-titolo.testa-maschera { flex-wrap: nowrap; }
.fin-testa h1 { flex: 0 1 auto; }
.fin-testa .fin-torna { margin-left: auto !important; margin-right: auto !important; }
.tot-barra .torna-maschera { margin-left: auto; margin-right: auto; }
.torna-riga { justify-content: center; }

/* 28/10/2026 niente fondo bianco nelle maschere: tabelle, filtri e riquadri sul grigio della maschera (il bianco resta solo ai campi vuoti) */
body.in-maschera #pagina :is(.chi-tabella, .cte-filtri, .rpr-testa, .rpr-corpo, .tot-scorri, .tot-tab.tot-oggi, .can-scheda, .can-livello,
  .pia-tabella, .reg-tabella, table.res, .appu-agenda, .pgc-piede, .ml-file, .stampa-titolo, .stampa-elenco) { background: transparent; }
body.in-maschera #pagina .chi-tabella { box-shadow: none; }
body.in-maschera #pagina .chi-tabella th { background: var(--grigio-testa); }
body.in-maschera #pagina .chi-tabella tbody tr:nth-child(even) { background: rgba(0, 0, 0, .03); }
body.in-maschera #pagina .sky-tab .tot-voce { background: var(--carta); }

/* 28/10/2026 Fornitori: ogni fornitore nel suo box con gli angoli arrotondati; caselle con il bordo ben visibile */
.forn-tabella table { border-collapse: separate; border-spacing: 0; }
.forn-tabella tr.forn-riga td, .forn-tabella tr.forn-note td { background: #d6dade; border-bottom: 0; }
.forn-tabella tr.forn-riga td { border-top: 1px solid #8f969e; }
.forn-tabella tr.forn-note td { border-bottom: 1px solid #8f969e; }
.forn-tabella tr.forn-riga td:first-child, .forn-tabella tr.forn-note td:first-child { border-left: 1px solid #8f969e; }
.forn-tabella tr.forn-riga td:last-child, .forn-tabella tr.forn-note td:last-child { border-right: 1px solid #8f969e; }
.forn-tabella tr.forn-riga td:first-child { border-top-left-radius: 10px; }
.forn-tabella tr.forn-riga td:last-child { border-top-right-radius: 10px; }
.forn-tabella tr.forn-note td:first-child { border-bottom-left-radius: 10px; }
.forn-tabella tr.forn-note td:last-child { border-bottom-right-radius: 10px; }
.forn-tabella tr.forn-spazio td { height: 8px; padding: 0; border: 0; background: transparent; }
.forn-tabella tr.forn-riga.spenta td, .forn-tabella tr.forn-note.spenta td { background: #e0e2e5; }
.forn-tabella input[type="text"], .forn-tabella input[type="password"], .forn-tabella textarea { border: 1px solid #8f969e; }
.forn-tabella input[type="text"]:placeholder-shown, .forn-tabella textarea:placeholder-shown { background: var(--campo-vuoto) !important; }

/* 28/10/2026 Fornitori: V (mostra) e Copia uno accanto all'altro, mai sovrapposti */
.forn-tabella .forn-link { gap: 3px; }
.forn-tabella .forn-link input { flex: 1 1 0; width: auto !important; min-width: 0; }
.forn-tabella .forn-link > button { flex: 0 0 auto; }

/* ---------- NUOVO CONTRATTO a pulsanti (28/10/2026) ---------- */
.riquadro.nc-scelta { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: transparent; border: 0; }
.pulsante.nc-tasto { flex: 1 1 110px; width: auto; min-height: 44px; padding: 8px 10px; border-radius: 8px; background: #e4e6e9 !important;
  border: 2px solid var(--c) !important; border-bottom-width: 5px !important; color: var(--c) !important; font-weight: 800; font-size: .95rem;
  letter-spacing: .03em; white-space: nowrap; }
.pulsante.nc-tasto:hover, .pulsante.nc-tasto:focus-visible { background: #fff7b8 !important; }
.finestra.nc-finestra { align-items: flex-start; }
.accesso-box.nc-box { max-width: none; width: min(1000px, calc(100vw - 32px)); padding: 12px 14px; background: #e4e6e9; }
.accesso-box.nc-box.nc-media { width: min(800px, calc(100vw - 32px)); }
.accesso-box.nc-box.nc-piccola { width: min(600px, calc(100vw - 32px)); }
.nc-f-testa { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 8px; }
.nc-f-testa h1 { margin: 0; font-size: 1.15rem; }
.nc-f-testa .nc-torna { width: auto; padding: 6px 18px; }
.nc-box .nuovo-contratto { max-height: calc(100vh - 140px); border: 1px solid var(--bordo); border-radius: 8px; overflow: hidden; background: var(--carta); }
.nc-box .nuovo-contratto .nc-testa { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; }
.nc-box .nc-cte { margin-left: auto; }
.nc-interessi .pulsante { min-width: 160px; }
.nc-int-gruppo { margin-bottom: 10px; }
.nc-int-gruppo h3 { margin: 0 0 6px; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); }
.nc-interessi { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.nc-interessi .pulsante { min-width: 0; width: 100%; padding: 12px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* NUOVO CONTRATTO – grafica B (28/10/2026): tessere grigie con disegno e lettere giocose */
.riquadro.nc-scelta { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.nc-tessera { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0; padding: 8px 2px 6px;
  background: #d3d7dc; border: 2px solid #9aa3ad; border-bottom-width: 5px; border-radius: 12px; cursor: pointer; transition: transform .15s, background .15s; }
.nc-tessera:hover, .nc-tessera:focus-visible { background: #fff7b8; border-color: #F9CF19; transform: translateY(-2px); outline: none; }
.nc-tessera svg { width: 34px; height: 34px; overflow: visible; }
.nc-tessera:hover svg { animation: nc-salta .5s ease-in-out; }
@keyframes nc-salta { 50% { transform: translateY(-4px) rotate(-6deg); } }
.scritta-giocosa { display: inline-flex; gap: 1px; font-family: Fredoka, 'DM Sans', sans-serif; font-weight: 700; font-size: 1.05rem; line-height: 1; white-space: nowrap; }
.scritta-giocosa span { display: inline-block; color: var(--c); -webkit-text-stroke: 1px #111; paint-order: stroke fill; text-shadow: 0 2px 0 #2b2b2b; transform: rotate(-4deg); }
.scritta-giocosa .spazio { width: .3em; }
@media (max-width: 700px) { .riquadro.nc-scelta { grid-template-columns: repeat(3, 1fr); } }

/* OMAGGIO (28/10/2026): riga corta Data, Agente, Richiesta, CTE; la A in fondo a destra */
.ope-griglia.om { grid-template-columns: 82px 60px 110px minmax(160px, 1fr); }
.ope.ope-omaggio > .ope-corpo { flex: 1 1 auto; }
.ope.ope-omaggio > .ope-tasti { width: auto !important; margin-left: auto; justify-content: center; }
@media (min-width: 701px) {
  .ope.ope-omaggio { display: flex; align-items: center; gap: 6px; padding-right: 6px; }
  .ope.ope-omaggio > .ope-spunta { position: static; width: 24px; flex: none; justify-content: center; }
  .ope.ope-omaggio > .ope-tasti { flex: none; width: 34px !important; display: flex; align-items: center; justify-content: center; }
  .ope.ope-omaggio > .ope-tasti > span { display: flex; }
}
/* 28/10/2026: nelle operazioni il valore sta in centro alla casella (come la Data), l'etichetta resta piccola in alto */
@media (min-width: 901px) {
  .ope input.co, .ope select.co, .ope select.stato-sel, .ope .ope-cte, .ope input.co.data { padding-top: 0; padding-bottom: 0; }
  .ope .ope-cte { line-height: 30px; }
  .ope .ope-nota { padding-top: 0; line-height: 30px; }
  .ope-id { padding-top: 0; line-height: 30px; }
}
/* 28/10/2026: negli omaggi la scritta della CTE un po' piu' grande */
.ope.ope-omaggio .ope-cte { font-size: .9rem; font-weight: 600; }

/* ASSICURAZIONE (28/10/2026): una riga sola, A e I in fondo a destra */
.ope-griglia.as { grid-template-columns: 82px 52px minmax(70px, 100px) minmax(60px, 90px) 46px minmax(90px, 1fr) minmax(86px, 110px) 50px 112px; }
.ope.ope-assic .as-tipo { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 701px) {
  .ope.ope-assic { display: flex; align-items: center; gap: 6px; padding-right: 6px; }
  .ope.ope-assic > .ope-corpo { flex: 1 1 auto; }
  .ope.ope-assic > .ope-spunta { position: static; width: 24px; flex: none; justify-content: center; }
  .ope.ope-assic > .ope-tasti { flex: none; width: 62px !important; display: flex; align-items: center; justify-content: center; }
  .ope.ope-assic > .ope-tasti > span { display: flex; gap: 4px; }
}
/* la riga dell'assicurazione resta una sola anche su schermi piu' stretti */
@media (min-width: 701px) {
  .ope.ope-assic, .ope.ope-omaggio { flex-wrap: nowrap; }
  .ope.ope-assic > .ope-corpo, .ope.ope-omaggio > .ope-corpo { min-width: 0; }
}
.ope-griglia.as { grid-template-columns: 80px 46px minmax(56px, 100px) minmax(50px, 90px) 40px minmax(70px, 1fr) minmax(80px, 110px) 46px 100px; }
/* 28/10/2026: data vuota = campo vuoto (niente gg/mm/aaaa); con il clic la data si puo' scrivere */
input[type="date"].data-vuota:not(:focus)::-webkit-datetime-edit { color: transparent; }

/* LAVORO (28/10/2026): una riga sola con 11 campi, A e I in fondo */
.ope-griglia.lv { grid-template-columns: 80px 54px 46px minmax(70px, 1fr) minmax(60px, 90px) 52px 40px minmax(80px, 104px) 46px 100px 40px; }
@media (min-width: 901px) {
  .ope-griglia.lv > :nth-child(19), .ope-griglia.lv > :nth-child(20) { grid-column: 10; }
  .ope-griglia.lv > :nth-child(21), .ope-griglia.lv > :nth-child(22) { grid-column: 11; }
}
@media (min-width: 701px) {
  .ope.ope-lavoro { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding-right: 6px; }
  .ope.ope-lavoro > .ope-corpo { flex: 1 1 auto; min-width: 0; }
  .ope.ope-lavoro > .ope-tasti { flex: none; width: 62px !important; display: flex; align-items: center; justify-content: center; }
  .ope.ope-lavoro > .ope-tasti > span { display: flex; gap: 4px; }
}
/* 28/10/2026: Assicurazione ed Efficienza con Note BO dopo InsData */
.ope-griglia.as { grid-template-columns: 80px 46px minmax(56px, 100px) minmax(50px, 90px) 40px minmax(70px, 1fr) minmax(80px, 110px) 46px 100px 40px; }
@media (min-width: 901px) { .ope-griglia.as > :nth-child(19), .ope-griglia.as > :nth-child(20) { grid-column: 10; } }
/* 28/10/2026: il numero operazione (6 cifre) sta tutto nella sua casella accanto alla spunta, non va sotto Dual.
   Prima casella piu' larga, Dual/Prec.Forn/Stato/InsData un po' piu' stretti: la riga resta lunga come prima */
@media (min-width: 901px) {
  .ope-griglia.r2 { grid-template-columns: 66px 50px 64px 108px 56px 100px 41px 78px !important; }
  .ope .ope-griglia.r2 .ope-id { text-align: left !important; padding-left: 25px !important; padding-right: 0 !important; white-space: nowrap; overflow: hidden; font-size: .72rem; }
}
/* 28/10/2026: Bolletta (luce e gas) e Contratto tutti della stessa larghezza, allineati a destra */
.ope-doc .doc-riga { justify-content: flex-end; }
.ope-doc .doc-riga.spazio-s { padding-left: 0; }
.ope-doc .doc-riga > .doc-tasti { flex: 0 0 86px; width: 86px; }
/* 28/10/2026: contratto non obbligatorio (firma OTP) = tasto grigio */
.boll-tasto.non-obblig { background: #e1e1e1 !important; border-color: #b9c0c9 !important; color: #6b7480 !important; }
/* 28/10/2026: lavoro con freccia Carica, I e A (la A sempre l'ultima a destra) */
@media (min-width: 701px) { .ope.ope-lavoro > .ope-tasti { width: 92px !important; } }
.ope.ope-lavoro .lav-rich { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 29/10/2026: tasti prezzi luce (rosa) e gas (azzurro) nella barra in alto */
.prezzi-box { position: relative; display: flex; gap: 4px; flex: 0 0 auto; }
.prezzo-tasto { display: flex; align-items: center; gap: 3px; height: 38px; padding: 0 9px; border-radius: 10px; cursor: pointer; font-family: inherit; font-size: .95rem; white-space: nowrap; }
.prezzo-tasto b { font-weight: 700; font-variant-numeric: tabular-nums; }
.prezzo-tasto.luce { background: #fbe0ec; border: 1.5px solid #d6649a; color: #8f2a5c; }
.prezzo-tasto.gas { background: #dcefff; border: 1.5px solid #2299D5; color: #135d8f; }
.prezzo-tasto:hover { background: #F9CF19; }
.prezzi-menu { position: absolute; top: 44px; z-index: 40; display: flex; flex-direction: column; min-width: 160px; background: #fff; border: 1px solid #c9ced6; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.15); overflow: hidden; }
.prezzi-menu[hidden] { display: none; }
.prezzi-menu button { border: 0; background: none; text-align: left; padding: 9px 12px; font-family: inherit; font-size: .92rem; cursor: pointer; }
.prezzi-menu button + button { border-top: 1px solid #eef1f4; }
.prezzi-menu button:hover, .prezzi-menu button:focus-visible { background: #F9CF19; outline: none; }
@media (max-width: 700px) { .prezzi-box { display: none; } }

/* 29/10/2026: RIASSUNTO dell'offerta attuale (lettera R nel menu della bolletta) */
.rias-box { max-width: 460px; }
.rias-tab { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 6px 0 4px; }
.rias-tab th { text-align: left; font-weight: 600; color: #4b5868; padding: 5px 8px 5px 0; width: 42%; vertical-align: top; }
.rias-tab td { padding: 5px 0; border-bottom: 1px solid #eef1f4; }
.rias-tab tr:last-child td { border-bottom: 0; }
.rias-vuoto { color: #9aa3ad; font-style: italic; }
.rias-scade { color: #c96a00; font-weight: 700; }
.rias-scaduto { color: #c0262b; font-weight: 700; }
.rias-nota { font-size: .8rem; color: #6b7480; margin: 4px 0; }

/* 29/10/2026: Ripeti Magia nel menu della bolletta */
.boll-menu-tasti .ripeti-magia { font-size: 30px; line-height: 37px; height: 37px; display: block; filter: drop-shadow(0 1px 0 #1d1d1d); }

/* 29/10/2026: filtri FISSO / VARIABILE accanto a Offerta */
table.griglia th .filtro-prezzo { display: inline-flex; gap: 4px; margin-left: 12px; vertical-align: middle; }
table.griglia th .filtro-prezzo span { padding: 2px 8px; border: 1px solid #b9c0c9; border-radius: 6px; background: #fff; font-size: .72rem; font-weight: 700; cursor: pointer; letter-spacing: .02em; }
table.griglia th .filtro-prezzo span:hover { background: #F9CF19; border-color: #d9ad00; }
table.griglia th .filtro-prezzo span.acceso { background: #92d050; border-color: #5f9a2e; color: #1f3d0c; }

/* 29/10/2026: tasto bolletta della fornitura: gas azzurro, piu' vecchia di 6 mesi grigio */
.forn-griglia .boll-tasto.presente.gas { background: #8fcaf3; border-color: #2299D5; color: #0f3f63; }
.forn-griglia .boll-tasto.presente.vecchia { background: #d9dde2; border-color: #a9b1bb; color: #5b6570; }

/* 29/10/2026: P = PREVENTIVO accanto al tasto della richiesta e nel DUAL */
table.griglia td.cella .cella-prev { display: inline-flex; align-items: center; gap: 3px; }
.prev-tasto { background: none; border: 0; padding: 0 2px; cursor: pointer; line-height: 0; }
.prev-tasto:hover:not([disabled]) { filter: drop-shadow(0 0 3px #F9CF19); }
.prev-tasto[disabled] { cursor: default; opacity: .6; }
#dual-pulsanti { display: flex; align-items: center; gap: 6px; }
.dual-pulsanti .prev-dual { flex: 0 0 auto; }
.nuovo-contratto .nc-corpo .dual-pulsanti .btn-matrice { flex: 1 1 auto; width: auto; }

/* 29/10/2026: P dei preventivi firmati nella testata del cliente */
.prev-testata { position: relative; background: transparent; border: 0; padding: 0; cursor: pointer; }
.prev-testata .prev-num { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #45AC37; color: #fff; font-size: .68rem; font-weight: 800; line-height: 16px; text-align: center; }

/* 29/10/2026: bolletta caricata ma non letta dalla MAGIA = arancio come i totali dei contratti non inseriti */
.forn-griglia .boll-tasto.presente.senza-magia { background: linear-gradient(#ffc56b, #f39a1e); border-color: #c46f00; color: #4a2a00; }

/* INVITI A FATTURARE (29/10/2026) */
.inv-filtri { align-items: flex-end; }
.inv-filtri .inv-scelta { flex: 1 1 auto; min-width: 0; }
.inv-filtri .inv-scelta select { width: 100%; }
.inv-riepilogo { background: #eef1f5; border: 1px solid #c9d3e3; border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.inv-rtesta { font-size: .95rem; margin-bottom: 4px; }
.inv-caricato { color: #6b7a90; font-size: .75rem; margin-left: 6px; }
.inv-voci { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; font-size: .82rem; }
.inv-rv { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted #c9d3e3; padding: 1px 0; }
.inv-rv.tot { font-weight: 700; }
.inv-rv i { color: #6b7a90; font-weight: 400; }
.inv-avv { margin-top: 6px; color: #9a5b00; font-size: .82rem; font-weight: 600; }
.inv-schede { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin-bottom: 6px; }
.inv-schede .pulsante.attiva { background: #F9CF19; color: #222; }
.inv-schede .inv-cerca { margin-left: auto; display: flex; flex-direction: column; font-size: .75rem; font-weight: 600; color: #5b6b82; }
.inv-schede .inv-cerca input { padding: 4px 6px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; font-size: .9rem; width: 170px; }
.inv-tabella { max-height: calc(100vh - 380px); }
.inv-tab td.inv-cl { max-width: 220px; }
.inv-tab .inv-voce { font-size: .78rem; }
.inv-tab tr.inv-senza td { background: #ffe8c7 !important; }
.inv-nontrovato { color: #c0392b; font-weight: 600; }
.inv-spiega { font-size: .8rem; color: #5b6b82; padding: 6px 8px; }
.inv-box .inv-campi { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 10px; text-align: left; }
.inv-box .inv-campi label { display: flex; flex-direction: column; font-size: .75rem; font-weight: 600; color: #5b6b82; }
.inv-box .inv-campi select, .inv-box .inv-campi input { padding: 5px 6px; border: 1px solid var(--bordo); border-radius: 6px; font: inherit; font-size: .95rem; text-align: center; }
.inv-nota { font-size: .75rem; color: #6b7a90; margin-top: 8px; }
@media (max-width: 700px) { .inv-voci { grid-template-columns: 1fr; } }

/* PUNTI RICEVUTI dagli inviti a fatturare (29/10/2026) */
.punti-tag { display: inline-flex; align-items: baseline; gap: 2px; background: #e7f5e4; color: #2d7a22; border: 1px solid #45AC37; border-radius: 10px; font-weight: 700; white-space: nowrap; cursor: default; }
.punti-tag small { font-weight: 500; color: #4f7d48; font-size: .72em; margin-left: 1px; }
.punti-tag.testata { padding: 1px 8px; font-size: .8rem; margin-left: 6px; align-self: center; }
.punti-tag.testata b { margin-left: 3px; }
.punti-tag.mini { padding: 0 5px; font-size: .68rem; line-height: 1.4; }
.forn-sx .punti-tag.mini { margin-top: 2px; padding: 0 3px; letter-spacing: -.2px; }
.punti-tag.mini { flex-wrap: nowrap; white-space: nowrap; flex: none; }

/* Calendario sul telefono: intestazione sempre in vista (Torna + P, CALENDARIO Nome su una riga, NUOVO) */
.agenda-tel .cal-testata { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 8px;
  margin: -16px -14px 0; padding: 10px 14px 10px; background: #f6f0ff; box-shadow: 0 4px 8px -6px rgba(0,0,0,.25); }
.agenda-tel .cal-testata .cal-torna { display: flex; align-items: center; gap: 10px; }
.agenda-tel .cal-testata .cal-torna a { flex: 1; min-height: 48px; }
.agenda-tel .cal-testata .cal-p { flex: 0 0 auto; padding: 0 2px; }
.agenda-tel .cal-titolo { flex-wrap: nowrap !important; align-items: center; gap: 10px !important; }
.agenda-tel .cal-titolo .sc-scritta { height: 36px; max-width: 62%; object-fit: contain; object-position: left center; }
.agenda-tel .cal-titolo .sc-nome { font-size: 1.3rem; white-space: nowrap; padding: 2px 4px 6px 2px; }
.agenda-tel .cal-testata .cal-nuovo { width: 60%; align-self: center; min-height: 0; height: 42px; padding: 0; font-size: 1.1rem; margin: 0; }

/* tipo di voce degli inviti a fatturare */
.inv-tipo { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: .72rem; font-weight: 700; background: #e3e7ee; color: #3d4b60; }
.inv-tipo.t-gettone { background: #dff0fb; color: #1a6fa3; }
.inv-tipo.t-ricorrente { background: #e7f5e4; color: #2d7a22; }
.inv-tipo.t-fidelizzazione { background: #fff3c4; color: #8a6a00; }
.inv-tipo.t-anticipo, .inv-tipo.t-saldo { background: #ede4f7; color: #6a3fa0; }
.inv-tipo.t-canvass { background: #ffe5cc; color: #a85a00; }
.inv-tipo.t-storno { background: #fde2e2; color: #b42318; }
.inv-pervoce { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.inv-pervoce .inv-tipo { font-size: .78rem; padding: 1px 8px; }

.inv-filtri .inv-f { flex: 0 1 auto; min-width: 0; }
.inv-filtri .inv-f select { max-width: 150px; }
.inv-filtri { flex-wrap: wrap; }

/* calendario: stesso appuntamento di più operatori in una riga sola (barretta con i colori di tutti, nomi uno sotto l'altro) */
.agenda-tel .cal-riga.cal-multi { position: relative; border-left-color: transparent; }
.agenda-tel .cal-barre { position: absolute; left: -8px; top: 0; bottom: 0; width: 8px; display: flex; flex-direction: column; border-radius: 12px 0 0 12px; overflow: hidden; }
.agenda-tel .cal-barre i { flex: 1; }
.agenda-tel .cal-chi-nomi { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
/* TESSERE: elenco a carte colorate e codice a tutto schermo su bianco */
.tessere-box { max-width: 520px; }
.tessere-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.tessera { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; min-height: 86px; padding: 10px 12px; border: 0; border-radius: 14px;
  background: var(--t); color: #fff; text-align: left; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.tessera b { font-size: 1.1rem; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.tessera small { font-size: .78rem; opacity: .9; word-break: break-all; }
.tessera-grande { position: fixed; inset: 0; z-index: 1000; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; overflow: auto; }
.tessera-grande .tg-testa { align-self: stretch; padding: 12px 14px; border-radius: 14px; background: var(--t); color: #fff; font-size: 1.4rem; text-align: center; }
.tessera-grande .tg-codice { width: 100%; max-width: 560px; color: #333; text-align: center; }
.tessera-grande .tg-codice svg, .tessera-grande .tg-codice img { width: 100%; height: auto; display: block; background: #fff; }
.tessera-grande .tg-codice.qr { max-width: 300px; }
.tessera-grande .tg-numero { font-family: monospace; font-size: 1.3rem; letter-spacing: .08em; color: #111; word-break: break-all; text-align: center; }
.tessera-grande .tg-foto img { max-width: 260px; max-height: 170px; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.tessera-grande .tg-tasti { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.tessera-grande .tg-tasti .lettera-tasto { background: none; border: 0; cursor: pointer; }
.tes-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.tes-form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.tes-form [hidden] { display: none !important; }
.tes-colori { display: flex; flex-wrap: wrap; gap: 8px; }
.tes-colore { width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.tes-colore.scelto { border-color: #111; }
.tes-form .tes-leggi { align-items: center; text-align: center; font-size: 1rem !important; cursor: pointer; }
.tes-esito { min-height: 1.2em; font-size: .9rem; font-weight: 600; }
.tes-form .tes-foto { cursor: pointer; }
.tes-anteprima { max-width: 220px; max-height: 140px; align-self: center; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.tessera-grande .tg-foto img { max-width: 300px; max-height: 200px; }
/* fotocamera con la cornice a forma di tessera */
.cornice-fondo { position: fixed; inset: 0; z-index: 1100; background: #000; }
.cornice-fondo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cornice { position: absolute; left: 7%; width: 86%; top: 50%; aspect-ratio: 85.6 / 54; transform: translateY(-50%); border: 3px solid #fff; border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); }
.cornice-aiuto { position: absolute; left: 0; right: 0; top: calc(50% - 32vw - 40px); text-align: center; color: #fff; font-weight: 700; font-size: 1.05rem; padding: 0 16px; text-shadow: 0 1px 3px #000; }
.cornice-tasti { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; justify-content: center; gap: 14px; }
.cornice-tasti .pulsante { width: auto; min-height: 52px; padding: 0 22px; font-size: 1.1rem; }
.tes-form .tes-foto { background: none; border: 0; text-align: left; padding: 0; font: inherit; color: #5a3ea8; cursor: pointer; }
/* T: linguette Tessere / Documenti; documenti personali */
.tes-linguette { display: flex; gap: 6px; margin-bottom: 8px; }
.tes-ling { flex: 1; padding: 10px; border: 2px solid #8e6bd8; border-radius: 12px; background: #fff; color: #5a3ea8; font-weight: 800; font-size: 1rem; cursor: pointer; }
.tes-ling.attiva { background: #8e6bd8; color: #fff; }
.tessera.documento.inscadenza { background: #F29100; }
.tessera.documento.scaduto { background: #E4191C; }
.tessera-grande .dg-foto { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.tessera-grande .dg-foto img { width: 100%; max-width: 560px; border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.tessera-grande .dg-scad { font-size: 1.1rem; }
.tessera-grande .dg-note { color: #555; text-align: center; }
.tessera-grande .tg-tasti { flex-wrap: wrap; justify-content: center; }
.tessera-grande .tg-tasti .pulsante { width: auto; padding: 0 16px; min-height: 44px; }
.dc-foto { display: flex; gap: 8px; }
.dc-foto .pulsante { flex: 1; }
.dc-anteprime { display: flex; gap: 8px; justify-content: center; }
.dc-anteprime img { max-width: 48%; max-height: 110px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }

/* CONTROLLO PAGAMENTI (30/10/2026) */
.anni-ctl { display: inline-flex; gap: 2px; vertical-align: middle; flex: none; }
.anno-ctl { display: inline-block; min-width: 20px; padding: 0 3px; border-radius: 5px; font-size: .66rem; font-weight: 700; line-height: 1.5; text-align: center; border: 1px solid; cursor: default; }
.anno-ctl.verde { background: #e7f5e4; color: #2d7a22; border-color: #45AC37; }
.anno-ctl.arancio { background: #ffe8c7; color: #9a5b00; border-color: #F28C1C; }
.anno-ctl.rosso { background: #fde2e2; color: #b42318; border-color: #E4191C; }
.anno-ctl.corso { background: #eef1f5; color: #6b7a90; border-color: #c9d3e3; }
.anno-ctl.scoperto { background: #eef1f5; color: #a3adbb; border-color: #dfe4ec; border-style: dashed; }
#inv-controllo.attiva { background: #F9CF19; color: #222; }

/* fornitura: colonna destra con i punti in alto e la A in basso (30/10/2026) */
.forn-dx { display: flex; flex-direction: column; align-items: center; justify-content: space-between; flex: none; gap: 2px; }
.forn-dx .forn-a { align-self: center; }
.punti-forn { display: flex; flex-direction: column; align-items: center; line-height: 1.15; font-size: .7rem; font-weight: 700; white-space: nowrap; cursor: default; }
.punti-forn span:first-child { color: #2d7a22; }
.punti-forn span:last-child { color: #6b7a90; font-weight: 600; }

/* operazione: colonna destra con i punti in alto e la A in basso (30/10/2026) */
.ope-dx { flex: none; width: 34px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1px; }
.ope-dx .lettera-svg { width: 23px; height: 25px; }
.ope-dx .punti-forn { font-size: .66rem; }
@media (max-width: 700px) { .ope:not(.aperta) > .ope-dx { display: none; } .ope.aperta > .ope-dx { order: 1; flex-direction: row; width: auto; gap: 8px; } }

/* A di forniture e operazioni sempre in basso a destra, grande come la I (30/10/2026) */
.forn-dx, .ope-dx { justify-content: flex-end; }
.forn-dx .punti-forn, .ope-dx .punti-forn { margin-bottom: auto; }
.forn-dx .forn-a .lettera-svg, .ope-dx [data-archivia] .lettera-svg { width: 29px !important; height: 32px !important; }
.ope-dx { width: 36px; }

.punti-tag.testata { gap: 8px; }
.punti-tag .punti-prima { color: #6b7a90; font-weight: 600; }

/* anno non pagato: rosso pieno, si vede subito che è da risolvere (30/10/2026) */
.anno-ctl.rosso { background: #E4191C; color: #fff; border-color: #a31212; }

/* ---------- PREOFFICE (30/10/2026): accoglienza ---------- */
.pre-pagina { max-width: 1200px; margin: 0 auto; }
.pre-adesso { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; padding: 8px; background: #eef1f5; border: 1px solid #c9d3e3; border-top: 0; }
.pre-op { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 6px 8px; border-radius: 10px; border: 2px solid; cursor: pointer; min-width: 0; line-height: 1.2; }
.pre-op b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pre-op span { font-size: .78rem; font-weight: 700; }
.pre-op i { font-size: .72rem; font-style: normal; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pre-op.libero { background: #dff3d6; border-color: #45AC37; color: #1d5e14; }
.pre-op.presto { background: #fff3c4; border-color: #F9CF19; color: #7a5b00; }
.pre-op.occupato { background: #fbdada; border-color: #E4191C; color: #8f1010; }
.pre-op.assente { background: #e3e3e3; border-color: #9a9a9a; color: #666; }
.pre-op:hover { filter: brightness(1.04); box-shadow: 0 0 0 3px #F9CF19; }
.pre-giorni { display: flex; align-items: center; gap: 8px; padding: 8px; background: #eef1f5; border: 1px solid #c9d3e3; border-top: 0; }
.pre-giorni .pulsante { width: auto; padding: 6px 14px; }
.pre-data { flex: 1; text-align: center; font-weight: 800; font-size: 1.05rem; color: var(--blu); }
.pre-data.oggi { color: #1d5e14; }
.pre-griglia { background: #eef1f5; border: 1px solid #c9d3e3; border-top: 0; border-radius: 0 0 12px 12px; padding: 0 6px 6px; }
.pre-scorri { max-height: calc(100vh - 330px); min-height: 300px; overflow-y: auto; overflow-x: hidden; }
.pre-intesta { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: 44px repeat(var(--n), minmax(0, 1fr)); background: #eef1f5; padding-top: 6px; }
.pre-testa-op { min-width: 0; text-align: center; padding: 3px 1px 4px; border-bottom: 4px solid var(--c); line-height: 1.1; }
.pre-testa-op b { display: block; font-size: .9rem; color: var(--c); }
.pre-testa-op span { display: block; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pre-testa-op i { display: block; font-size: .6rem; font-style: normal; font-weight: 800; color: #8f1010; }
.pre-testa-op.assente { opacity: .55; }
.pre-corpo { display: grid; grid-template-columns: 44px 1fr; }
.pre-ore { display: grid; grid-auto-rows: var(--alto); }
.pre-ora { font-size: .68rem; color: #8a94a3; text-align: right; padding-right: 5px; transform: translateY(-7px); }
.pre-ora.piena { font-weight: 800; color: #3b4656; font-size: .75rem; }
.pre-colonne { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  background: repeating-linear-gradient(180deg, #c3cddb 0 1px, transparent 1px calc(var(--alto) * 4)),
              repeating-linear-gradient(180deg, #e2e7ee 0 1px, transparent 1px var(--alto)), #f7f8fa; }
.pre-col { position: relative; border-left: 1px solid #d5dce6; cursor: copy; }
.pre-col:hover { background: rgba(249, 207, 25, .10); }
.pre-col.assente { background: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 6px, transparent 6px 12px); }
.pre-app { position: absolute; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--c) 22%, #fff); border-left: 4px solid var(--c);
  padding: 1px 3px 4px; font-size: .7rem; line-height: 1.15; cursor: grab; touch-action: none; user-select: none; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.pre-app:hover { box-shadow: 0 0 0 2px #F9CF19; z-index: 2; }
.pre-app-ora { display: block; font-weight: 800; color: #1f2d45; }
.pre-app-testo { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pre-app-ogg { display: block; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pre-app.nascosto { background: repeating-linear-gradient(135deg, #e3e3e3 0 5px, #f2f2f2 5px 10px); border-left-color: #999; cursor: default; }
.pre-app.taglio { border-top: 2px dashed var(--c); }
.pre-app.in-volo { opacity: .3; }
.pre-app.ombra { opacity: .9; z-index: 5; box-shadow: 0 4px 14px rgba(0,0,0,.35); cursor: grabbing; pointer-events: none; }
.pre-maniglia { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
.pre-maniglia::after { content: ''; position: absolute; left: 35%; right: 35%; bottom: 1px; height: 2px; border-radius: 2px; background: var(--c); opacity: .6; }
.pre-adesso-riga { position: absolute; left: 0; right: 0; height: 2px; background: #E4191C; z-index: 3; pointer-events: none; }
.pre-adesso-riga::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #E4191C; }
/* cornice: verde quando c'è il documento; versione A4 per le bollette */
.cornice { transition: border-color .15s; }
.cornice.pronta { border-color: #45AC37; border-width: 4px; }
.cornice.a4 { left: 50%; width: auto; height: min(70vh, 128vw); aspect-ratio: 210 / 297; transform: translate(-50%, -50%); }
.cornice-aiuto.a4 { top: 14px; }

/* controllo col listino del contratto (31/10/2026) */
.inv-tab tr.inv-diverso td { background: #fde2e2 !important; }
.inv-atteso { color: #b42318; font-size: .72rem; font-weight: 700; }
.inv-ok { color: #2d7a22; font-weight: 700; }
.inv-avv-rosso { color: #b42318; }
.inv-avv-verde { color: #2d7a22; }

/* TRASCINA il file nella maschera Inviti a fatturare */
.inv.inv-trascina { outline: 3px dashed #45AC37; outline-offset: -3px; background: #eef8ec; }
#inv-carica.inv-trascina-tasto { background: #F9CF19; color: #222; transform: scale(1.05); }

/* tasto ✨ MAGIA nel calendario */
.agenda-tel .cal-magia { font-size: 40px; line-height: 1; }

/* FASCIA dell'app sul telefono: mascotte a sinistra, logo al centro, tasto per tornare indietro a destra (sempre lì);
   le finestre partono sotto la fascia (la fotocamera resta a tutto schermo) */
.fascia-app { position: fixed; top: 0; left: 0; right: 0; height: 76px; z-index: 1050; background: #4f98d7; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.fascia-app .fa-mascotte { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px #fff; }
.fascia-app .fa-logo { height: 62px; max-width: calc(100% - 230px); object-fit: contain; }
.fascia-app .fa-torna { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); min-width: 96px; height: 50px; padding: 0 12px;
  background: #fff; color: #1f5a96; border: 0; border-radius: 14px; font: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,.2); }
.fascia-app .fa-torna:active { transform: translateY(-50%) scale(.95); }
.fascia-app .fa-torna[hidden] { display: none; }
body.con-fascia { padding-top: 76px; }
body.con-fascia .agenda-tel .cal-testata { top: 76px; }
body.con-fascia .tessera-grande, body.con-fascia .finestra, body.con-fascia .avviso-fondo { top: 76px; }
/* con la fascia, i CHIUDI dentro le finestre non servono (il tasto è in alto a destra) */
body.con-fascia #tes-chiudi, body.con-fascia .tessera-grande [data-tg="chiudi"] { display: none; }
.agenda-tel .cal-titolo .cal-p { margin-left: auto; }

/* elenco tessere e documenti con l'immagine: foto vera della tessera, disegno del documento */
.tessera.con-immagine { padding: 6px; gap: 6px; align-items: stretch; justify-content: flex-start; min-height: 0; }
.tessera.con-immagine > img { width: 100%; aspect-ratio: 85.6 / 54; object-fit: contain; border-radius: 9px; display: block; background: #fff; }
.tessera.con-immagine b { font-size: .95rem; padding: 0 4px; }
.tessera.documento.con-immagine { background: #455A64; }
.tessera.documento.con-immagine .doc-disegno { display: block; background: #fff; border-radius: 9px; padding: 4px; line-height: 0; }
.tessera.documento.con-immagine .doc-disegno svg { width: 100%; height: auto; display: block; }
.tessera.documento.con-immagine small { padding: 0 4px 2px; }
.tessera.documento.con-immagine.inscadenza { background: #F29100; }
.tessera.documento.con-immagine.scaduto { background: #E4191C; }
.tessera.documento.con-immagine .doc-di { font-style: normal; font-size: .85rem; font-weight: 700; padding: 0 4px; color: #fff3c4; }

/* TESSERA SERVIZIO ENERGIA dell'operatore: prima delle tessere, su tutta la larghezza, formato tessera */
.tessera-se { position: relative; aspect-ratio: 85.6 / 54; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: #4f98d7; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); container-type: inline-size; }
.tessera-se .tse-logo { position: absolute; left: 5%; top: 7%; width: 46%; }
.tessera-se .tse-nome { position: absolute; left: 6%; bottom: 25%; font-size: 10cqw; font-weight: 800; letter-spacing: .01em; text-shadow: 0 2px 4px rgba(0,0,0,.25); }
.tessera-se .tse-ruolo { position: absolute; left: 6%; bottom: 7%; font-size: 4.2cqw; line-height: 1.25; opacity: .95; }
.tessera-se .tse-mascotte { position: absolute; right: 5%; bottom: 8%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(0,0,0,.25); object-fit: cover; }
.tessera-se::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5%; background: linear-gradient(90deg, #009246 33%, #fff 33% 66%, #ce2b37 66%); }
.tse-vista { justify-content: center; background: #eef4fb; }
.tse-vista .tessera-se { width: 100%; max-width: 560px; cursor: default; }
.tse-vista .tg-tasti { margin-top: 10px; }
.tse-riquadro .tessera-se { border-radius: 9px; box-shadow: none; }

/* PAGINA INIZIALE dell'app sul telefono: tasti grandi, lettera grande e nome piccolo */
.home-tel { gap: 12px; }
.home-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.home-tasto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 150px; padding: 12px 8px;
  background: #fff; border: 2px solid #d9cff5; border-radius: 20px; box-shadow: 0 3px 8px rgba(0,0,0,.08); cursor: pointer; font: inherit; color: #3b2a7a; }
.home-tasto:active { transform: scale(.97); }
.home-tasto b { font-size: 1.15rem; }
.home-tasto small { font-size: .85rem; color: #7a7396; text-align: center; }
.home-tasto .home-stella { font-size: 58px; line-height: 64px; }
.home-tasto[data-h="c"] { border-color: #f3b6b8; }
.home-tasto[data-h="c"] small { font-size: 1rem; font-weight: 700; color: #3b2a7a; }
.scatta .sc-su { margin-bottom: 4px; }
.tessere-box .tes-testa { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 2px 0 12px; }
.tessere-box .tes-titolo { font-size: 2.2rem; white-space: nowrap; text-align: center; }
.tessere-box .tes-azioni { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tessere-box .tes-azioni .pulsante { width: 100%; padding: 0 4px; min-height: 50px; font-weight: 800; }
body.con-fascia .tessere-box .nota-pulsanti { display: none; }
/* con la fascia (app sul telefono): Tessere e Documenti sono pagine intere, senza la pagina iniziale scurita dietro */
body.con-fascia .tessere-fin { background: linear-gradient(180deg, #f6f0ff, #fff7e0); align-items: flex-start; padding: 12px; overflow: auto; }
body.con-fascia .tessere-fin .tessere-box { width: 100%; max-width: 760px; background: transparent; box-shadow: none; border: 0; padding: 4px 2px 20px; }

/* BIGLIETTI DA VISITA */
.tessere-box .bv-cerca { width: 100%; box-sizing: border-box; margin: 0 0 12px; font-size: 1.05rem; }
.tessera-grande .bv-dati { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 6px; }
.tessera-grande .bv-riga { display: flex; flex-direction: column; background: #f3f6f9; border-radius: 10px; padding: 6px 10px; }
.tessera-grande .bv-riga small { color: #6b7785; font-size: .8rem; }
.tessera-grande .bv-riga b { font-size: 1.05rem; word-break: break-word; }
.tessera-grande .bv-azioni { width: 100%; max-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tessera-grande .bv-azioni .pulsante { width: 100%; min-height: 50px; font-weight: 800; }
.tessera-grande .dg-foto img { max-height: 70vh; object-fit: contain; }
.avviso-tasti { flex-wrap: wrap; }

/* PIÈ DI PAGINA di tessere, documenti e biglietti aperti: Modifica ed Elimina sempre in fondo, con la nostra scrittura */
body.con-fascia .tessera-grande { padding-bottom: 0; }
body.con-fascia .tessera-grande .tg-tasti { position: sticky; bottom: 0; align-self: stretch; margin: auto -16px 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: #eef4fb; border-top: 2px solid #d6e3f2; justify-content: space-around; z-index: 2; }
.tessera-grande .tg-piede { display: flex; align-items: center; gap: 6px; }
.tessera-grande .tg-piede .sc-nome { font-size: 1.7rem; padding: 4px 10px; }

/* CARTE DI CREDITO (disegnate, mai la foto) */
.tessere-box .tes-azioni.uno { grid-template-columns: 1fr; }
.tessere-box .cc-info { font-size: .85rem; margin: 0 0 10px; }
.cc-lista { grid-template-columns: 1fr 1fr; }
.cc-voce { background: none; border: 0; padding: 0; cursor: pointer; }
.carta-cc { position: relative; aspect-ratio: 85.6 / 54; border-radius: 12px; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 70%, #000));
  color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.25); container-type: inline-size; overflow: hidden; text-align: left; }
.carta-cc .cc-banca { position: absolute; left: 7%; top: 8%; font-weight: 800; font-size: 7cqw; letter-spacing: .02em; }
.carta-cc .cc-chip { position: absolute; left: 7%; top: 30%; width: 14%; aspect-ratio: 4/3; border-radius: 3cqw; background: linear-gradient(135deg, #f3d27a, #b8913a); }
.carta-cc .cc-numero { position: absolute; left: 7%; top: 54%; font-family: monospace; font-size: 6.4cqw; letter-spacing: .04em; white-space: nowrap; }
.carta-cc .cc-sotto { position: absolute; left: 7%; right: 7%; bottom: 8%; display: flex; justify-content: space-between; gap: 6px; font-size: 5.4cqw; }
.carta-cc .cc-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carta-cc .cc-circuito { position: absolute; right: 7%; top: 8%; font-style: italic; font-weight: 900; font-size: 6.4cqw; opacity: .9; }
.carta-cc.inscadenza .cc-scad { background: #F29100; border-radius: 4px; padding: 0 4px; }
.carta-cc.scaduta .cc-scad { background: #E4191C; border-radius: 4px; padding: 0 4px; }
.tessera-grande .carta-cc.grande { width: 100%; max-width: 520px; }
.tessera-grande .cc-blocca { width: 100%; max-width: 520px; min-height: 64px; font-size: 1.2rem; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tessera-grande .cc-blocca small { font-weight: 600; font-size: .95rem; }

.inv-rtesta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inv-rtesta .inv-elimina { margin-left: auto; }

/* PARCHEGGIO */
.tessere-box .pa-grande { width: 100%; min-height: 60px; font-size: 1.15rem; font-weight: 800; margin-bottom: 12px; }
.pa-stato { display: flex; flex-direction: column; gap: 10px; }
.pa-titolo { font-weight: 800; font-size: 1.1rem; }
.pa-titolo small { font-weight: 600; color: #6b7785; }
.pa-mappa { width: 100%; height: 260px; border: 0; border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.pa-nota { background: #fff7d6; border-radius: 10px; padding: 8px 10px; font-weight: 700; }
.pa-foto { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; }
.pa-tasti { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pa-tasti .pulsante { width: 100%; min-height: 52px; font-weight: 800; }
.tessere-box .pa-grande small { display: block; font-size: .8rem; font-weight: 600; }

/* APP CLIENTI: finestra del QR nella scheda cliente */
.b-app-cliente { font-size: 24px; line-height: 1; }
.app-cliente-box { max-width: 420px; }
.ac-corpo { padding: 6px 18px 10px; }
.ac-corpo h3 { margin: 4px 0 8px; text-align: center; }
.ac-corpo p { margin: 6px 0; }
.ac-voce { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; }
.ac-voce small { color: #777; }
.ac-crea { margin-top: 10px; }
.ac-qr svg { width: 260px; height: 260px; display: block; margin: 0 auto; }
.ac-aiuto, .ac-tempo { text-align: center; }
.ac-tempo { font-weight: 700; color: #2299D5; }
.ac-telefoni { margin-top: 10px; }
.ac-tel { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid #eee; }
.ac-tel .pulsante { width: auto; padding: 6px 12px; }