/* Il foglio del cancello del radiante a pavimento (8/10/2026): vedi
 * cancello-radiante.js. Fra i marcatori la copia di cancello/cancello.css,
 * identica; prima i colori del radiante, dopo le regole che riportano il modulo
 * e la relazione alle loro misure dentro la pagina WordPress, dove valgono
 * anche le regole di OceanWP e quelle della pagina (.tb-rad input, p, ul, h3...).
 */
#tb-rad,.btl-barra-strumenti,.btl-accesso{--rosso:#1F6B32;--rosso-scuro:#174F25;--rosso-bg:rgba(31,107,50,.05);--ombra-hover:0 4px 20px rgba(31,107,50,.15)}

/* CANCELLO-CSS:INIZIO — sorgente unica, non modificare nelle copie.
 *
 *  Due cose insieme: l'aspetto del modulo di contatto, uguale in tutti
 *  i tool, e quello della relazione che torna dal server. La relazione
 *  arriva con classi «btl-», decise dal plugin: sono qui perche' il
 *  plugin manda struttura e testo, non stile.
 *
 *  Misure: dal 25/09/2026 un'altezza sola, 48 px, per campi, scelte del
 *  canale e pulsante: messi in fila si vedeva che erano 44, 46 e 48. Una
 *  colonna fino a 560 px, due sopra. Le unita' sono px e non rem perche'
 *  il tema del sito dichiara html{font-size:10px} e un rem li' vale 10 px,
 *  non 16.
 */

.gate-box {
  background: var(--grigio-50, #fafafa);
  border: 1px solid var(--grigio-300, #d4d4d4);
  border-radius: var(--raggio, 10px);
  padding: 20px;
  margin: 18px 0;
}
.gate-box h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; color: var(--grigio-900, #1a1a1a); }
.gate-box > p { margin: 0 0 12px; font-size: 15px; color: var(--grigio-700, #4a4a4a); }

.gate-elenco { margin: 0 0 18px; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--grigio-700, #4a4a4a); }
.gate-elenco li { margin-bottom: 5px; }

/* Il modulo ------------------------------------------------------- */

.gate-griglia { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
@media (min-width: 560px) {
  .gate-griglia { grid-template-columns: 1fr 1fr; }
  .gate-campo--largo { grid-column: 1 / -1; }
}

.gate-campo { display: flex; flex-direction: column; min-width: 0; }
.gate-campo label {
  font-size: 13px; font-weight: 700; margin-bottom: 5px;
  color: var(--grigio-900, #1a1a1a);
}
.gate-campo label abbr { color: var(--rosso, #E30613); text-decoration: none; border: 0; }
.gate-facolt { font-weight: 400; color: var(--grigio-700, #4a4a4a); }

.gate-campo input,
.gate-campo textarea {
  width: 100%; box-sizing: border-box; margin: 0;
  border: 1px solid var(--grigio-300, #d4d4d4);
  border-radius: var(--raggio-sm, 6px);
  background: var(--bianco, #fff);
  /* 16 px esatti: sotto questa misura iOS ingrandisce la pagina da solo
     quando il campo prende il fuoco, e il modulo salta via. */
  font-size: 16px; font-family: inherit; color: var(--grigio-900, #1a1a1a);
  -webkit-appearance: none; appearance: none;
}
/* L'altezza e' dichiarata, non ricavata da riempimento e interlinea: cosi'
   non dipende dal motore, dal carattere o dal bordo arrotondato ai pixel
   dello schermo, e un campo e' alto 48 px in Safari come in Chrome. */
.gate-campo input { height: 48px; padding: 0 14px; line-height: 1.25; }
.gate-campo textarea { min-height: 96px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.gate-campo input:focus-visible,
.gate-campo textarea:focus-visible,
.gate-scelta input:focus-visible + span {
  outline: 2px solid var(--rosso, #E30613); outline-offset: 2px;
}
.gate-campo input.err, .gate-campo textarea.err { border-color: var(--rosso, #E30613); background: var(--rosso-bg, rgba(227,6,19,.04)); }

.gate-errore { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--rosso, #E30613); min-height: 0; }
.gate-errore:empty { display: none; }

/* La riga sotto comune e CAP: il CAP messo dal comune, le citta' con un
   CAP per zona, un CAP che non torna. Occupa tutta la larghezza, e
   quando non ha niente da dire non occupa niente. */
.gate-aiuto { margin: -4px 0 0; font-size: 13px; line-height: 1.45; color: var(--grigio-700, #4a4a4a); }
.gate-aiuto:empty { display: none; }
.gate-aiuto--attenzione { color: #8a4b00; }

/* Canale preferito ------------------------------------------------- */

.gate-canale { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.gate-canale legend { padding: 0; font-size: 13px; font-weight: 700; color: var(--grigio-900, #1a1a1a); margin-bottom: 7px; }
.gate-canale legend abbr { color: var(--rosso, #E30613); text-decoration: none; border: 0; }
/* Tre scelte su una riga, larghe uguali; sul telefono una sotto l'altra.
   Con le colonne lasciate al contenuto (flex da 100 px) a 375 px venivano
   due in alto e «Email» da sola sotto, larga il doppio (25/09/2026). */
.gate-scelte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .gate-scelte { grid-template-columns: minmax(0, 1fr); } }
.gate-scelta { position: relative; display: flex; min-width: 0; margin: 0; cursor: pointer; }
.gate-scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gate-scelta span {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-height: 48px; padding: 6px 10px; line-height: 1.25;
  border: 1px solid var(--grigio-300, #d4d4d4);
  border-radius: var(--raggio-sm, 6px);
  background: var(--bianco, #fff);
  font-size: 14px; font-weight: 600; text-align: center;
  color: var(--grigio-700, #4a4a4a);
}
.gate-scelta input:checked + span {
  border-color: var(--rosso, #E30613);
  background: var(--rosso-bg, rgba(227,6,19,.04));
  color: var(--rosso, #E30613);
  box-shadow: inset 0 0 0 1px var(--rosso, #E30613);
}

/* Campi facoltativi ------------------------------------------------ */

.gate-extra { margin: 0 0 14px; }

/* I due riquadri che si aprono - i campi facoltativi e l'informativa
   breve - hanno la stessa riga di apertura: 48 px, testo da 14 px, e lo
   stesso segno disegnato qui. Il segno del browser non c'era sempre: un
   summary in flex lo perde in Chrome e in Safari, e «Aggiungi indirizzo»
   non sembrava apribile; sul telefono il testo andava a capo in una
   colonna e «(facoltativo)» restava da solo a destra (25/09/2026). */
.gate-extra summary,
.gate-informativa summary {
  display: block; position: relative; box-sizing: border-box;
  min-height: 48px; padding: 13px 0 13px 24px; list-style: none;
  font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--grigio-900, #1a1a1a);
  cursor: pointer;
}
.gate-extra summary::-webkit-details-marker,
.gate-informativa summary::-webkit-details-marker { display: none; }
.gate-extra summary::before,
.gate-informativa summary::before {
  content: ''; position: absolute; left: 5px; top: 20px;
  width: 7px; height: 7px; box-sizing: border-box;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.gate-extra[open] > summary::before,
.gate-informativa[open] > summary::before { transform: rotate(45deg); top: 18px; }
.gate-extra summary span { font-weight: 400; color: var(--grigio-700, #4a4a4a); }
.gate-extra summary:focus-visible { outline: 2px solid var(--rosso, #E30613); outline-offset: 2px; border-radius: 4px; }
.gate-extra[open] summary { margin-bottom: 6px; }

/* L'informativa --------------------------------------------------- */

/* Il testo sopra il pulsante: al posto della casella del consenso, dal
   24/09/2026. Si legge senza aprire niente, quindi non puo' essere
   minuscolo: 13px con interlinea larga, grigio 700 (7:1 sul bianco). Dal
   25/09/2026 il link all'informativa sta nella casella della presa
   visione, due righe sotto: qui sarebbe stato un doppione. */
.gate-informa { margin: 0 0 2px; font-size: 13px; line-height: 1.55; color: var(--grigio-700, #4a4a4a); }
.gate-informa a { color: var(--rosso, #E30613); font-weight: 700; white-space: nowrap; }
.gate-informa a:focus-visible,
.gate-informativa a:focus-visible,
.gate-letta a:focus-visible { outline: 2px solid var(--rosso, #E30613); outline-offset: 2px; border-radius: 2px; }

/* L'informativa breve: chiusa sta in una riga, aperta dice tutto. Il
   testo e' piccolo ma non minuscolo - 13px come la riga sopra - e il
   riquadro resta leggibile anche a 375 px, dove le definizioni vanno a
   capo una sotto l'altra invece che affiancate. */
.gate-informativa { margin: 0; font-size: 13px; line-height: 1.5; color: var(--grigio-700, #4a4a4a); }
.gate-informativa summary:focus-visible { outline: 2px solid var(--rosso, #E30613); outline-offset: 2px; border-radius: 4px; }
.gate-informativa dl { margin: 4px 0 8px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; }
.gate-informativa dt { font-weight: 700; color: var(--grigio-900, #1a1a1a); }
.gate-informativa dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.gate-informativa p { margin: 0; }
.gate-informativa a { color: var(--rosso, #E30613); font-weight: 700; }
@media (max-width: 480px) {
  /* Su telefono due colonne stringono troppo le definizioni: si impilano. */
  .gate-informativa dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gate-informativa dd { margin: 0 0 6px; }
}

/* La presa visione (25/09/2026) -------------------------------------- *
 * Una casella da 24 px - il minimo della WCAG 2.5.8 - disegnata qui,
 * perche' quella del sistema in Safari non prende le misure dichiarate e
 * in ogni motore ha un aspetto diverso. Resta un vero input checkbox: la
 * tastiera, lo spazio e i lettori di schermo la trattano come tale.
 * L'etichetta accanto e' tutta premibile e la riga e' alta 48 px, come
 * i campi e il pulsante; il testo parte alla quota della casella. */
.gate-letta {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px;
  align-items: start; margin: 4px 0 0; padding: 0;
}
.gate-letta input {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box; width: 24px; height: 24px; margin: 12px 0 0;
  border: 2px solid var(--grigio-700, #4a4a4a); border-radius: 4px;
  background: var(--bianco, #fff) center / 14px 14px no-repeat;
  cursor: pointer;
}
.gate-letta input:checked {
  border-color: var(--rosso, #E30613); background-color: var(--rosso, #E30613);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gate-letta input:focus-visible { outline: 2px solid var(--rosso, #E30613); outline-offset: 2px; }
.gate-letta input.err { border-color: var(--rosso, #E30613); background-color: var(--rosso-bg, rgba(227,6,19,.04)); }
/* Prima riga di testo alta 22 px con 13 px sopra: il suo centro cade a
   24 px, lo stesso della casella (12 + 24/2). */
.gate-letta label {
  display: block; box-sizing: border-box; min-height: 48px; padding: 13px 0 13px;
  font-size: 14px; line-height: 22px; font-weight: 600; color: var(--grigio-900, #1a1a1a);
  cursor: pointer;
}
.gate-letta label a { color: var(--rosso, #E30613); font-weight: 700; }
.gate-letta label abbr { color: var(--rosso, #E30613); text-decoration: none; border: 0; }
.gate-letta .gate-errore { grid-column: 2; margin: -6px 0 0; }
/* Con i colori forzati del sistema (contrasto elevato di Windows) lo
   sfondo disegnato sparirebbe, e con lui il segno di spunta: li' torna
   la casella del sistema. */
@media (forced-colors: active) {
  .gate-letta input { -webkit-appearance: auto; appearance: auto; }
}

/* Il pulsante e i messaggi ---------------------------------------- */

/* Il pulsante del cancello porta con se' tutto il suo aspetto: il rosso
   dei tool, testo bianco in Montserrat 600 da 16px, angoli da 6px, 48px
   di altezza, testo centrato. Prima lo prendeva dalle classi .btn e
   .btn-primary del tool che lo ospita: la qualifica PdC quelle classi non
   le ha, e il pulsante usciva grigio di sistema; dove c'erano, la regola
   di .btn per il telefono, scritta dopo, lo riportava a 13px. Due classi
   pesano piu' di .btn anche dentro una media query: il pulsante e' lo
   stesso nei quattro tool, a ogni larghezza (24/09/2026). */
.gate-modulo .gate-invia {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; margin: 14px 0 0; padding: 12px 16px;
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.25;
  text-align: center; white-space: normal; text-decoration: none;
  color: var(--bianco, #fff); background: var(--rosso, #E30613);
  border: 2px solid transparent; border-radius: var(--raggio-sm, 6px);
  box-shadow: none; cursor: pointer; transition: background .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.gate-modulo .gate-invia:hover:not([disabled]) {
  background: var(--rosso-scuro, #B5050F);
  box-shadow: var(--ombra-hover, 0 4px 20px rgba(227, 6, 19, .15));
}
.gate-modulo .gate-invia:focus-visible { outline: 2px solid var(--rosso-scuro, #B5050F); outline-offset: 2px; }
.gate-modulo .gate-invia[disabled] { opacity: .65; cursor: progress; }

.gate-msg { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--rosso, #E30613); }
.gate-msg:not(.on) { display: none; }
.gate-msg.attesa { color: var(--grigio-700, #4a4a4a); }

/* --grigio-500 su bianco sta a 3,45:1, sotto il minimo AA di 4,5:1 per
   il testo normale. Per un testo che si legge davvero serve il 700. */
.gate-nota { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--grigio-700, #4a4a4a); }

.gate-ok {
  background: var(--success, #e6f7ea);
  border: 1px solid var(--success-bordo, #2ea84a);
  border-radius: var(--raggio, 10px);
  padding: 14px 16px; margin: 18px 0; font-size: 14px; line-height: 1.55;
}

.gate-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Il codice della richiesta ------------------------------------------ */

.gate-codice {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--success-bordo, #2ea84a);
}
.gate-codice-lab {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grigio-700, #4a4a4a);
}
.gate-codice-val {
  /* Un codice si legge carattere per carattere: monospaziato, spaziato e
     grande, perche' va dettato al telefono senza farselo ripetere. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 30px; font-weight: 700; letter-spacing: .08em; line-height: 1.2;
  color: var(--grigio-900, #1a1a1a); margin: 4px 0 8px;
  user-select: all;
}
.gate-codice p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--grigio-700, #4a4a4a); }

.gate-wa {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 10px 20px;
  border-radius: var(--raggio-sm, 6px);
  background: #25d366; color: #0b3d1f;
  font-size: 15px; font-weight: 700; text-decoration: none;
}
.gate-wa:hover { background: #1fbd5a; }
.gate-wa:focus-visible { outline: 2px solid var(--grigio-900, #1a1a1a); outline-offset: 2px; }
.gate-wa-nota {
  display: block; margin-top: 8px;
  font-size: 12px; line-height: 1.5; color: var(--grigio-700, #4a4a4a);
}

/* La relazione che arriva dal server ------------------------------- */

.btl-titolo-sezione {
  margin: 26px 0 10px; font-size: 17px; line-height: 1.3;
  color: var(--grigio-900, #1a1a1a);
  padding-bottom: 6px; border-bottom: 2px solid var(--rosso, #E30613);
}
/* position: relative non e' un dettaglio. Un contenitore che scorre
   ritaglia i figli assoluti solo se e' lui a posizionarli: senza, il
   testo per i lettori di schermo nelle celle (.btl-solo-lettore, che e'
   assoluto) usciva dalla tabella dei mesi e allargava tutta la pagina.
   Sul telefono, a 375 px, la pagina del fotovoltaico diventava larga 803
   e scorreva di lato appena si apriva la relazione (24/09/2026). */
.btl-scorri { position: relative; overflow-x: auto; margin-bottom: 16px; -webkit-overflow-scrolling: touch; }
.btl-tabella { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.btl-tabella th, .btl-tabella td {
  padding: 9px 10px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--grigio-300, #d4d4d4);
}
.btl-tabella thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--grigio-700, #4a4a4a); white-space: nowrap; }
.btl-tabella tbody th[scope="row"] { font-weight: 700; width: 38%; color: var(--grigio-900, #1a1a1a); }
.btl-tabella .btl-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.btl-tabella tfoot td, .btl-tabella tfoot th { font-weight: 700; border-top: 2px solid var(--grigio-300, #d4d4d4); border-bottom: 0; }

.btl-barra { display: block; width: 62px; height: 8px; border-radius: 4px; background: var(--grigio-300, #d4d4d4); overflow: hidden; }
.btl-barra i { display: block; height: 100%; background: var(--rosso, #E30613); }
.btl-solo-lettore { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btl-paragrafo { font-size: 13px; line-height: 1.6; color: var(--grigio-700, #4a4a4a); margin: 0 0 16px; }
.btl-nota { font-size: 12px; line-height: 1.55; color: var(--grigio-700, #4a4a4a); margin: -8px 0 18px; }
.btl-metodo {
  background: var(--grigio-100, #f4f4f4);
  border-radius: var(--raggio-sm, 6px);
  padding: 14px 16px;
}
/* Le schede del riepilogo: si allargano a riempire la riga, cosi' non
   resta mai una scheda sola in fondo con il vuoto accanto. */
.btl-schede { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.btl-scheda {
  flex: 1 1 200px; min-width: 0;
  border: 1px solid var(--grigio-300, #d4d4d4);
  border-radius: var(--raggio-sm, 6px);
  background: var(--bianco, #fff);
  padding: 12px 14px;
}
.btl-scheda h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--grigio-700, #4a4a4a); }
.btl-scheda-valore { margin: 0 0 6px; font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--rosso, #E30613); }
.btl-scheda-valore small { font-size: 13px; font-weight: 600; color: var(--grigio-700, #4a4a4a); }
.btl-scheda-nota { margin: 0; font-size: 12px; line-height: 1.5; color: var(--grigio-700, #4a4a4a); }

.btl-elenco { font-size: 14px; line-height: 1.6; color: var(--grigio-700, #4a4a4a); padding-left: 20px; margin: 0 0 16px; }

.btl-avviso {
  border-radius: var(--raggio-sm, 6px);
  padding: 11px 14px; margin: 0 0 10px;
  font-size: 13px; line-height: 1.55;
  border-left: 4px solid var(--grigio-500, #8a8a8a);
  background: var(--grigio-100, #f4f4f4);
  color: var(--grigio-900, #1a1a1a);
}
.btl-avviso--attenzione { border-left-color: var(--ambra-bordo, #c77700); background: var(--ambra, #fff6e5); }
.btl-avviso--info { border-left-color: var(--info-bordo, #2b6cb0); background: var(--info, #e6f2ff); }
.btl-avviso--buono { border-left-color: var(--success-bordo, #2ea84a); background: var(--success, #e6f7ea); }

/* I prodotti della configurazione ------------------------------------ */

.btl-prodotti {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px;
}
.btl-prodotto {
  flex: 1 1 180px; min-width: 0; margin: 0;
  border: 1px solid var(--grigio-300, #d4d4d4);
  border-radius: var(--raggio-sm, 6px);
  background: var(--bianco, #fff);
  padding: 12px;
  display: flex; flex-direction: column; align-items: center;
}
.btl-prodotto img {
  /* Altezza fissa e object-fit: i prodotti hanno proporzioni diverse -
     un pannello e' quadrato, una torre di batterie e' alta e stretta -
     e senza questo le schede affiancate verrebbero di altezze diverse. */
  width: 100%; height: 160px; object-fit: contain;
  display: block; margin-bottom: 10px;
}
.btl-prodotto-assente {
  width: 100%; height: 160px; margin-bottom: 10px;
  border-radius: var(--raggio-sm, 6px);
  background: var(--grigio-100, #f4f4f4);
}
.btl-prodotto figcaption {
  font-size: 12px; line-height: 1.5; color: var(--grigio-700, #4a4a4a); text-align: center;
}
.btl-prodotto figcaption strong { display: block; color: var(--grigio-900, #1a1a1a); margin-bottom: 3px; }

/* Modalita' tecnica ------------------------------------------------- *
 * La barra per tornare all'hub, l'avviso a chi arriva dall'hub senza
 * accesso, e il pannello che prende il posto del modulo. */

.btl-barra-strumenti {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px;
  padding: 4px 16px; padding-top: calc(4px + env(safe-area-inset-top));
  background: var(--rosso, #E30613); color: #fff; font: 600 14px/1.3 Montserrat, -apple-system, system-ui, sans-serif;
}
.btl-barra-strumenti a {
  display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 700; text-decoration: none;
}
.btl-barra-strumenti a:hover, .btl-barra-strumenti a:focus-visible { text-decoration: underline; }
.btl-barra-strumenti a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btl-accesso {
  padding: 10px 16px; background: #fff4e5; color: var(--grigio-900, #1a1a1a); border-bottom: 1px solid #f0c78a;
  font: 14px/1.4 Montserrat, -apple-system, system-ui, sans-serif;
}
.btl-accesso a { color: var(--rosso, #E30613); font-weight: 700; }
.btl-tec { border: 2px solid var(--rosso, #E30613); border-radius: 10px; padding: 16px; background: #fff; }
.btl-tec-testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.btl-tec-testa strong { font-size: 17px; }
.btl-tec-stato { font-size: 13px; color: var(--grigio-700, #4a4a4a); }
.btl-tec-stato--male { color: #b8050f; font-weight: 700; }
.btl-tec-nota { font-size: 13px; line-height: 1.5; color: var(--grigio-700, #4a4a4a); margin: 6px 0 12px; }
.btl-tec-azioni { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.btl-tec-campo {
  display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 0;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--grigio-700, #4a4a4a);
}
.btl-tec-campo input {
  font: 400 16px Montserrat, -apple-system, system-ui, sans-serif; text-transform: none; letter-spacing: 0;
  color: var(--grigio-900, #1a1a1a); height: 46px; padding: 0 12px; border: 1.5px solid var(--grigio-300, #d4d4d4); border-radius: 6px; width: 100%;
}
.btl-tec-campo input:focus { outline: none; border-color: var(--rosso, #E30613); box-shadow: 0 0 0 3px rgba(227,6,19,.12); }
/* Fase 3: un menu nel pannello tecnico (il documento dei fabbisogni del radiante), come i campi. */
.btl-tec-campo select {
  font: 400 16px Montserrat, -apple-system, system-ui, sans-serif; text-transform: none; letter-spacing: 0;
  color: var(--grigio-900, #1a1a1a); min-height: 46px; padding: 0 12px; border: 1.5px solid var(--grigio-300, #d4d4d4); border-radius: 6px; width: 100%; background: #fff;
}
.btl-tec-campo select:focus { border-color: var(--rosso, #E30613); box-shadow: 0 0 0 3px rgba(227,6,19,.12); }
/* Con la tastiera il contorno si vede sempre (almeno 2 px): nel radiante la regola della pagina ha la stessa
   specificita' e un «outline: none» qui la batteva (verifica di Codex, 9/10/2026). */
.btl-tec-campo select:focus-visible { outline: 2px solid var(--rosso-scuro, #B5050F); outline-offset: 1px; }
.btl-tec--doc { margin-bottom: 16px; }
.btl-tec-btn {
  min-height: 46px; padding: 0 16px; border-radius: 6px; border: 1.5px solid var(--grigio-300, #d4d4d4); background: #fff;
  font: 700 15px Montserrat, -apple-system, system-ui, sans-serif; color: var(--grigio-900, #1a1a1a); cursor: pointer;
}
.btl-tec-btn:hover { border-color: var(--rosso, #E30613); color: var(--rosso, #E30613); }
.btl-tec-btn--rosso { background: var(--rosso, #E30613); border-color: var(--rosso, #E30613); color: #fff; }
.btl-tec-btn--rosso:hover { background: #b8050f; border-color: #b8050f; color: #fff; }
.btl-tec-msg { font-size: 14px; line-height: 1.5; margin-top: 10px; }
.btl-tec-msg:empty { display: none; }
.btl-tec-msg .btl-tec-btn { margin-top: 8px; }
@media (max-width: 480px) { .btl-tec-azioni > .btl-tec-btn { flex: 1 1 100%; } }

/* Il flusso interno (5/10/2026, issue #42) ------------------------- *
 * Chi arriva dall'hub privato, con la modalita' tecnica confermata dal
 * server, non deve rispondere al banner dei cookie per usare lo
 * strumento: si nasconde e basta, come suggerisce iubenda per le pagine
 * dove non deve comparire. Nessuna scelta registrata; iubenda continua a
 * bloccare cio' che vorrebbe il consenso. La classe la mette e la toglie
 * cancello.js. I moduli per i clienti restano come sono. */

html.btl-flusso-interno #iubenda-cs-banner,
html.btl-flusso-interno .iubenda-tp-btn { display: none !important; }

/* Stampa ----------------------------------------------------------- */

@media print {
  .gate-box, .gate-invia, .gate-msg, .gate-wa, .gate-wa-nota { display: none !important; }
  .btl-barra-strumenti, .btl-accesso, .btl-tec { display: none !important; }
  .btl-scorri { overflow: visible; }
  .btl-tabella { font-size: 10pt; }
  .btl-titolo-sezione { break-after: avoid; page-break-after: avoid; }
  .btl-avviso, .btl-tabella tr, .btl-scheda, .btl-prodotto { break-inside: avoid; page-break-inside: avoid; }
  /* Sul foglio le immagini restano, piu' piccole: sono quello che fa
     riconoscere il prodotto a chi legge la stampa senza schermo. Il
     riquadro grigio del fallback invece sparisce: su carta sarebbe una
     macchia che non dice niente. */
  .btl-prodotti { display: block; }
  .btl-prodotto { display: inline-block; width: 30%; vertical-align: top; border: 0; padding: 4px; }
  .btl-prodotto img { height: 110px; }
  .btl-prodotto-assente { display: none; }
  .btl-prodotto--senza { width: auto; display: block; }
  .btl-schede { display: block; }
  .btl-scheda { margin-bottom: 6px; }
  .btl-barra { border: 1px solid #999; }
  .btl-barra i { background: #555; }
}
/* CANCELLO-CSS:FINE */

/* RADIANTE-CSS:INIZIO - il modulo e la relazione dentro la pagina WordPress.
   Le regole della pagina (.tb-rad p, ul, li, h3, a, input[type=text]) e quelle di OceanWP sui link del
   contenuto (peso 0,7,1) valgono anche dentro il cancello: con l'id della pagina davanti queste pesano di
   piu', senza !important. I campi prendono il bordo dei campi della pagina, #767676 (4,5:1 sul bianco). */
#tb-rad .gate-campo input,#tb-rad .gate-campo textarea{display:block;width:100%;max-width:100%;height:48px;min-height:48px;margin:0;
  padding:0 14px;border:1px solid var(--tb-bordo,#767676);border-radius:var(--raggio-sm,6px);background:#fff;color:#1a1a1a;
  font-size:16px;line-height:1.25;font-family:inherit;box-shadow:none;
  /* OceanWP anima tutto nei campi dei moduli (form input[type=text]{transition:all .3s}): anche il contorno del fuoco
     crescerebbe da 0 a 2 px dopo il Tab. Qui si animano solo bordo e fondo; il contorno c'e' subito. */
  transition:border-color .2s ease,background-color .2s ease}
#tb-rad .gate-campo textarea{height:auto;min-height:96px;padding:12px 14px;line-height:1.45}
#tb-rad .gate-campo input.err,#tb-rad .gate-campo textarea.err{border-color:#B5050F;background:rgba(181,5,15,.04)}
#tb-rad .gate-campo input:focus-visible,#tb-rad .gate-campo textarea:focus-visible{outline:2px solid var(--rosso);outline-offset:2px}
#tb-rad .gate-box h3{font-size:19px;margin:0 0 8px}
#tb-rad .gate-box > p,#tb-rad .gate-box p{margin-top:0}
#tb-rad .gate-elenco{margin:0 0 18px;padding-left:20px}
#tb-rad .gate-elenco li{margin:0 0 5px}
#tb-rad a.gate-wa,#tb-rad a.gate-wa:visited{color:#0b3d1f;text-decoration:none}
#tb-rad a.gate-wa:hover{color:#0b3d1f;text-decoration:underline;text-underline-offset:3px}
#tb-rad .gate-informa a,#tb-rad .gate-letta a,#tb-rad .gate-informativa a{color:var(--rosso)}
/* OceanWP da' ai pulsanti maiuscole e spaziatura, e a fieldset e legend bordi e margini propri. */
#tb-rad .gate-modulo .gate-invia{text-transform:none;letter-spacing:0;font-size:16px;font-weight:600;line-height:1.25;min-height:48px}
#tb-rad .gate-canale{border:0;padding:0;margin:0 0 14px;min-width:0}
#tb-rad .gate-canale legend{border:0;padding:0;margin:0 0 7px;width:auto;font-size:13px;font-weight:700;line-height:1.4;color:#1a1a1a}
#tb-rad .gate-scelte,#tb-rad .gate-extra summary,#tb-rad .gate-informativa summary{letter-spacing:0;text-transform:none}
/* La relazione: tabelle e schede del plugin con le loro misure; le tabelle larghe scorrono nel riquadro. */
#tb-rad .btl-scorri{max-width:100%;overflow-x:auto}
#tb-rad .btl-tabella{margin:0;width:100%}
#tb-rad .btl-elenco{margin:0 0 14px}
#tb-rad .btl-scheda h4{margin:0 0 6px}
#tb-rad .btl-avviso{margin:0 0 10px}
#tb-rad .tb-rad-relazione{margin:26px 0 0}
#tb-rad #rad-dettaglio:empty{display:none}
/* RADIANTE-CSS:FINE */