/* =========================================================================
   Piattaforma Preventivi — foglio di stile unico.

   Colori e geometrie del design system CaltaTech: blu #006BF9, navy #002B6F,
   fondo tenue #E9F2FF, angoli vivi (nessun arrotondamento), etichette in
   maiuscoletto spaziato. Chi conosce caltatech.com si ritrova.

   Il carattere di marchio è Exo. Se vuoi usarlo anche qui, scarica i file
   Exo-Regular / Medium / SemiBold / Bold in formato .woff2, mettili in
   app/static/font/ e togli il commento al blocco @font-face qui sotto:
   nessuna richiesta a server esterni, nessun problema di privacy.
   ========================================================================= */

/*
@font-face{font-family:"Exo";src:url("/statico/font/Exo-Regular.woff2") format("woff2");
  font-weight:400;font-display:swap}
@font-face{font-family:"Exo";src:url("/statico/font/Exo-Medium.woff2") format("woff2");
  font-weight:500;font-display:swap}
@font-face{font-family:"Exo";src:url("/statico/font/Exo-SemiBold.woff2") format("woff2");
  font-weight:600;font-display:swap}
@font-face{font-family:"Exo";src:url("/statico/font/Exo-Bold.woff2") format("woff2");
  font-weight:700;font-display:swap}
*/

:root{
  /* marchio */
  --blu:#006BF9;          /* accento: logo, link, evidenze */
  --blu-600:#0150C8;      /* fasce, filetti */
  --blu-800:#013D97;
  --navy:#002B6F;         /* pulsanti, barra laterale, piede */
  --navy-900:#001B48;
  --tint:#E9F2FF;         /* fondi chiari, intestazioni di tabella */
  --tint-scuro:#C9DAF3;   /* bordi dei campi */

  /* testo */
  --ink:#000; --corpo:#171717; --tenue:#3F4A5A; --lieve:#6B7788;

  /* superfici */
  --sfondo:#F5F8FD; --bianco:#fff; --bordo:#DCE7F7; --bordo-forte:#C9DAF3;

  /* segnali */
  --verde:#0B7A4B; --verde-tenue:#E4F5EC;
  --rosso:#B4231A; --rosso-tenue:#FCECEA;
  --ambra:#9A6400; --ambra-tenue:#FFF4DC;

  --font:"Exo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --ombra:0 10px 24px rgba(0,43,111,.08);
  --ombra-btn:0 8px 20px rgba(0,43,111,.22);
  --lato:262px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--sfondo); color:var(--corpo);
  font:16px/1.55 var(--font); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--blu); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
h1{font-size:30px; line-height:1.2; font-weight:700; letter-spacing:-.01em;
   color:var(--ink); margin:0 0 8px}
h2{font-size:20px; font-weight:700; color:var(--ink); margin:0 0 16px;
   letter-spacing:-.005em}
h3,.occhiello{font-family:var(--font); font-size:14px; font-weight:600;
   letter-spacing:.07em; text-transform:uppercase; color:var(--blu);
   margin:0 0 12px}
p{margin:0 0 12px}
.sommario{color:var(--tenue); margin:0 0 28px; font-size:16.5px}
:focus-visible{outline:3px solid var(--blu); outline-offset:2px}

/* ===================== impaginazione ===================== */
.telaio{display:flex; min-height:100vh}

aside.lato{
  width:var(--lato); flex:0 0 var(--lato); background:var(--navy); color:#fff;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  padding:26px 16px 16px;
}
aside.lato .marchio{padding:0 8px 8px}
aside.lato .marchio img{width:178px}
aside.lato .marchio .sotto{
  font-size:12px; font-weight:500; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-top:12px;
}
aside.lato .divisorio-lato{border:0; border-top:1px solid rgba(255,255,255,.18);
  margin:18px 8px 20px}

aside.lato nav{display:flex; flex-direction:column; gap:2px}
aside.lato nav a{
  display:flex; align-items:center; gap:12px; padding:11px 12px;
  color:rgba(255,255,255,.78); font-size:15px; font-weight:500;
  border-left:3px solid transparent; transition:background .18s, color .18s,
  border-color .18s;
}
aside.lato nav a:hover{background:rgba(255,255,255,.08); color:#fff;
  text-decoration:none}
aside.lato nav a.attivo{background:rgba(0,107,249,.22); color:#fff;
  border-left-color:var(--blu); font-weight:600}
aside.lato nav a svg{width:18px; height:18px; flex:0 0 18px}

aside.lato .fondo{margin-top:auto; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.18)}
aside.lato .chi{display:flex; align-items:center; gap:11px; margin:0 8px 12px}
aside.lato .chi .tondo{
  width:36px; height:36px; flex:0 0 36px; background:var(--blu);
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px;
}
aside.lato .chi b{color:#fff; font-size:14px; display:block; line-height:1.3}
aside.lato .chi span{font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.55)}
aside.lato .fondo button{
  width:100%; background:transparent; border:1px solid rgba(255,255,255,.34);
  color:#fff; padding:10px; font:inherit; font-size:13.5px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; cursor:pointer;
  transition:background .18s, border-color .18s;
}
aside.lato .fondo button:hover{background:rgba(255,255,255,.12); border-color:#fff}

.contenuto{flex:1; min-width:0; display:flex; flex-direction:column}
.testata{
  background:var(--bianco); border-bottom:1px solid var(--bordo);
  padding:18px 36px; display:flex; align-items:center; gap:18px;
  position:sticky; top:0; z-index:5;
}
.testata .briciole{font-size:13.5px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--lieve)}
.testata .briciole b{color:var(--navy); font-weight:600}
.testata .briciole a{color:var(--blu)}
.testata .a-destra{margin-left:auto; display:flex; gap:10px; align-items:center}
main{padding:34px 36px 64px; max-width:1240px; width:100%}

/* ===================== pagine senza menu ===================== */
.centrata{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:var(--tint)}
.centrata .riquadro{width:100%; max-width:452px}
/* In colonna, non in riga: da quando sotto il logo c'è il nome del prodotto,
   un `flex` orizzontale glielo metterebbe di fianco. */
.centrata .marchio{display:flex; flex-direction:column; align-items:center;
  margin-bottom:28px}
.centrata .marchio img{width:260px}
/* Qui il fondo è chiaro: il grigio della barra laterale sarebbe illeggibile. */
.centrata .marchio .sotto{
  font-size:13px; font-weight:500; letter-spacing:.07em; text-transform:uppercase;
  color:var(--tenue); margin-top:10px;
}

/* ===================== schede ===================== */
.scheda{background:var(--bianco); border:1px solid var(--bordo); padding:26px;
  margin-bottom:22px; box-shadow:var(--ombra)}
.scheda.fitta{padding:20px}
.scheda.larga{padding:32px}
.scheda .intestazione{display:flex; align-items:center; gap:16px; margin-bottom:20px}
.scheda .intestazione h2{margin:0}
.scheda .intestazione .a-destra{margin-left:auto}
.griglia{display:grid; gap:22px; margin-bottom:22px}
.griglia.due{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.griglia.tre{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.griglia.quattro{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.griglia .scheda{margin:0}

/* ===================== numeri in evidenza ===================== */
.dato{background:var(--bianco); border:1px solid var(--bordo); padding:22px 24px;
  box-shadow:var(--ombra); border-top:3px solid var(--blu)}
.dato .etichetta{font-size:13px; font-weight:500; color:var(--blu-600);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:10px}
.dato .cifra{font-size:34px; font-weight:700; line-height:1.05; color:var(--ink)}
.dato .cifra.piccola{font-size:20px; line-height:1.25}
.dato .nota{font-size:13.5px; color:var(--tenue); margin-top:8px}

/* ===================== tabelle ===================== */
.tabella{border:1px solid var(--bordo); background:var(--bianco); overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:15.5px}
thead tr{background:var(--tint)}
th{text-align:left; font-size:13px; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; color:var(--navy); padding:15px 16px;
  white-space:nowrap; border-bottom:1px solid var(--bordo)}
td{padding:15px 16px; border-top:1px solid var(--tint); vertical-align:middle}
tbody tr:first-child td{border-top:0}
tbody tr{transition:background .18s}
tbody tr:hover{background:#FAFCFF}
td.destra,th.destra{text-align:right}
td .secondario{font-size:13.5px; color:var(--lieve); margin-top:3px}
.scheda > .tabella{margin:0 -26px -26px; border:0; border-top:1px solid var(--bordo)}

/* ===================== moduli ===================== */
label{display:block; font-size:13.5px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--navy); margin:0 0 8px}
.campo{margin-bottom:18px}
input,select,textarea{
  width:100%; padding:13px 15px; border:1px solid var(--tint-scuro); border-radius:0;
  font:inherit; font-size:16px; background:var(--bianco); color:var(--corpo);
  transition:border-color .2s, box-shadow .2s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blu);
  box-shadow:0 0 0 3px rgba(0,107,249,.14)}
input:disabled{background:var(--sfondo); color:var(--lieve)}
select{appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23002B6F' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center}
select.snello{width:auto; padding:7px 32px 7px 11px; font-size:14px}
.aiuto{font-size:13.5px; color:var(--tenue); margin-top:7px; line-height:1.5;
  text-transform:none; letter-spacing:0; font-weight:400}
.riga-campi{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* ===================== pulsanti ===================== */
button,.bottone{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid var(--tint-scuro); background:var(--bianco); color:var(--navy);
  padding:13px 22px; border-radius:0; font:inherit; font-size:14px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
button:hover,.bottone:hover{border-color:var(--blu); color:var(--blu);
  text-decoration:none}
button:disabled{opacity:.4; cursor:not-allowed}
.primario{background:var(--navy); border-color:var(--navy); color:#fff;
  box-shadow:var(--ombra-btn)}
.primario:hover{background:var(--blu-600); border-color:var(--blu-600); color:#fff;
  transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,43,111,.3)}
.primario:active{transform:translateY(0)}
.accento{background:var(--blu); border-color:var(--blu); color:#fff}
.accento:hover{background:var(--blu-600); border-color:var(--blu-600); color:#fff;
  transform:translateY(-2px)}
.pericolo{background:var(--bianco); border-color:#EBC4C0; color:var(--rosso)}
.pericolo:hover{background:var(--rosso-tenue); border-color:var(--rosso);
  color:var(--rosso)}
.mini{padding:7px 13px; font-size:12.5px; letter-spacing:.05em}
.largo{width:100%}
.azioni{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:24px}
form.in-linea{display:inline-block}

/* ===================== etichette di stato ===================== */
.pallino{display:inline-flex; align-items:center; gap:7px; font-size:13px;
  font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 12px; white-space:nowrap}
.pallino::before{content:""; width:7px; height:7px; background:currentColor}
.pallino.ok{background:var(--verde-tenue); color:var(--verde)}
.pallino.attesa{background:var(--ambra-tenue); color:var(--ambra)}
.pallino.ko{background:var(--rosso-tenue); color:var(--rosso)}
.pallino.neutro{background:var(--sfondo); color:var(--lieve)}
.pallino.info{background:var(--tint); color:var(--blu-600)}
.targa{display:inline-block; font-size:12px; font-weight:500; padding:3px 10px;
  background:var(--tint); color:var(--navy); text-transform:uppercase;
  letter-spacing:.06em}
.targa.arancio{background:var(--blu); color:#fff}

/* ===================== messaggi ===================== */
.avviso{display:flex; gap:14px; padding:16px 18px; margin-bottom:22px;
  border-left:3px solid; font-size:15.5px; line-height:1.55}
.avviso b{font-weight:600}
.avviso.ok{background:var(--verde-tenue); border-color:var(--verde); color:#0A5F3B}
.avviso.errore{background:var(--rosso-tenue); border-color:var(--rosso); color:var(--rosso)}
.avviso.info{background:var(--tint); border-color:var(--blu); color:var(--navy)}
.avviso.attenzione{background:var(--ambra-tenue); border-color:#E0A800; color:var(--ambra)}

/* ===================== varie ===================== */
.vuoto{text-align:center; padding:50px 20px; color:var(--lieve)}
.vuoto .grande{font-size:32px; margin-bottom:12px; color:var(--tint-scuro)}
code.link{display:block; background:var(--tint); border-left:3px solid var(--blu);
  padding:16px 18px; word-break:break-all; font-size:14px;
  font-family:"SF Mono",Consolas,monospace; margin:16px 0; color:var(--navy);
  line-height:1.6}
.divisorio{border:0; border-top:1px solid var(--tint); margin:24px 0}
footer{padding:22px 36px 32px; color:var(--lieve); font-size:13px;
  border-top:1px solid var(--bordo); margin-top:auto;
  display:flex; gap:18px; flex-wrap:wrap; align-items:center}
footer a{color:var(--blu-600)}
footer .a-destra{margin-left:auto}

/* ===================== schermi piccoli ===================== */
@media (max-width:920px){
  .telaio{flex-direction:column}
  aside.lato{width:100%; flex:none; height:auto; position:static; padding:16px}
  aside.lato .marchio{padding-bottom:0}
  aside.lato .marchio img{width:150px}
  aside.lato .marchio .sotto{display:none}
  aside.lato .divisorio-lato{margin:14px 0}
  aside.lato nav{flex-direction:row; overflow-x:auto; gap:4px; padding-bottom:4px}
  aside.lato nav a{white-space:nowrap; border-left:0; border-bottom:3px solid transparent;
    padding:10px 14px}
  aside.lato nav a.attivo{border-left:0; border-bottom-color:var(--blu)}
  aside.lato .fondo{margin-top:14px; display:flex; gap:14px; align-items:center}
  aside.lato .chi{margin:0; flex:1}
  aside.lato .fondo button{width:auto; padding:10px 18px}
  .testata{padding:14px 18px}
  main{padding:22px 18px 48px}
  .scheda{padding:20px}
  .scheda > .tabella{margin:0 -20px -20px}
  h1{font-size:25px}
  table{font-size:14.5px}
  th,td{padding:12px 13px}
  footer{padding:18px}
}

/* ===================== scelta dei colori =====================
   Quadratini da cliccare al posto del codice esadecimale: nessun titolare di
   azienda sa cosa sia «#1D4ED8», e chi lo sa non ha bisogno di noi. Funziona
   con i soli fogli di stile — sono radio nascosti — così non serve nessuno
   script nella pagina. */
.tavolozza{display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 6px}
.tavolozza input{position:absolute; opacity:0; width:0; height:0}
.tinta{display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; width:74px; text-align:center}
.tinta .quadro{width:56px; height:44px; border:2px solid var(--bordo);
  box-shadow:inset 0 0 0 2px #fff}
.tinta .come{font-size:12px; color:var(--tenue); line-height:1.2}
.tavolozza input:checked + .tinta .quadro{border-color:var(--navy);
  box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px var(--navy)}
.tavolozza input:checked + .tinta .come{color:var(--ink); font-weight:600}
.tavolozza input:focus-visible + .tinta .quadro{outline:3px solid var(--blu);
  outline-offset:2px}
.tinta .quadro.libero{background:
  linear-gradient(135deg,#E11D48,#F59E0B,#16A34A,#0EA5E9,#7C3AED)}
.tinta input[type=color]{width:56px; height:44px; padding:2px; border:0;
  background:none; cursor:pointer}

/* ===================== gli strumenti sulla mappa =====================
   Stanno sopra la foto aerea e non sotto, perché mentre si disegna lo sguardo
   è sul tetto: un comando trenta centimetri più in basso è un comando che non
   si trova. In colonna sul bordo sinistro, sotto il Mappa/Satellite di
   Google, dove in qualunque programma di disegno si va a cercarli.

   **Solo icone.** La parola compare passandoci sopra, come un cartellino: la
   barra deve coprire il meno possibile del tetto, che è la cosa che si sta
   guardando. La parola resta scritta nel bottone — non è un `title` — così la
   legge anche chi naviga da tastiera o con un lettore di schermo.

   **Semitrasparente**: sotto c'è il tetto del cliente, e la barra è di
   passaggio. Avvicinandosi il mouse si fa solida, perché in quel momento
   quello che conta è il comando.

   Uno strumento per volta. Senza strumento la mappa si sposta e si ingrandisce
   soltanto, e niente si modifica per sbaglio: è la regola di qualunque
   programma di disegno, e qui evita di cancellare un pannello mentre si
   guardava il tetto. */
.mappa-con-strumenti{position:relative}

.strumenti-mappa{position:absolute; top:12px; left:12px; z-index:5;
  display:flex; flex-direction:column; gap:4px; padding:4px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.55);
  box-shadow:0 4px 14px rgba(0,27,72,.18);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  transition:background .15s, border-color .15s}
.strumenti-mappa:hover,
.strumenti-mappa:focus-within{background:rgba(255,255,255,.93);
  border-color:var(--bordo-forte); box-shadow:0 6px 18px rgba(0,27,72,.28)}

.strumenti-mappa .separatore{height:1px; background:rgba(11,26,43,.16);
  margin:2px 5px}
.strumenti-mappa .separatore:first-child,
.strumenti-mappa .separatore:last-child{display:none}

.strumento{position:relative; display:flex; align-items:center;
  justify-content:center; width:36px; height:36px; padding:0;
  border:1px solid transparent; background:none; font:inherit;
  color:var(--tenue); cursor:pointer}
.strumento:hover{background:rgba(0,107,249,.12); color:var(--navy)}
.strumento:focus-visible{outline:3px solid var(--blu); outline-offset:1px}
.strumento[disabled]{opacity:.45; cursor:default}
.strumento[disabled]:hover{background:none; color:var(--tenue)}

/* il cartellino con il nome del comando: esce a destra, dove non copre
   né la barra né l'angolo di tetto che si sta guardando */
.strumento span{position:absolute; left:calc(100% + 8px); top:50%;
  transform:translateY(-50%); padding:5px 9px; z-index:2;
  background:var(--navy); color:#fff; font-size:12.5px; font-weight:600;
  line-height:1.2; white-space:nowrap; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .12s}
.strumento span::before{content:""; position:absolute; right:100%; top:50%;
  margin-top:-4px; border:4px solid transparent;
  border-right-color:var(--navy)}
.strumento:hover span,
.strumento:focus-visible span,
.strumento.dillo span{opacity:1; visibility:visible}

/* lo strumento acceso si vede da lontano: è l'unico modo per sapere cosa
   farà il prossimo clic sulla mappa */
.strumento[aria-pressed=true]{background:var(--navy); color:#fff;
  border-color:var(--navy)}
.strumento[aria-pressed=true]:hover{background:var(--navy-900); color:#fff}

.strumento svg{width:22px; height:22px; flex:none; fill:none;
  stroke:currentColor; stroke-width:1.9; stroke-linecap:round;
  stroke-linejoin:round}
.strumento svg circle{fill:currentColor; stroke:none}
.strumento svg .taglio{stroke-width:2.4}
.strumento.fatto[aria-pressed=false]{color:var(--verde)}
.strumento.fatto svg{stroke-width:2.6}

/* Il salvataggio del disegno. Il pallino arancione vuol dire una cosa sola:
   c'è del lavoro sul tetto che l'archivio non ha ancora visto. Sta
   nell'angolo dell'icona, come la spia di un programma che ha da salvare. */
.strumento.salva{color:var(--navy)}
.strumento.salva.da-salvare::after{content:""; position:absolute;
  top:4px; right:4px; width:8px; height:8px; background:var(--ambra);
  border:1.5px solid #fff; border-radius:50%}
.strumento.salva.in-corso{color:var(--tenue); cursor:progress}
.strumento.salva.salvato{color:var(--verde)}
.strumento.salva.male{color:var(--rosso)}
/* andata male: il cartellino resta fuori da solo, che un'icona rossa in un
   angolo non la guarda nessuno */
.strumento.salva.male span{background:var(--rosso)}
.strumento.salva.male span::before{border-right-color:var(--rosso)}
.strumento.salva.salvato span{background:var(--verde)}
.strumento.salva.salvato span::before{border-right-color:var(--verde)}

.nota-mappa{position:absolute; left:12px; right:12px; bottom:12px; z-index:5;
  padding:9px 13px; background:rgba(255,255,255,.94);
  border:1px solid var(--bordo-forte); box-shadow:0 6px 18px rgba(0,27,72,.2);
  font-size:13.5px; color:var(--tenue); line-height:1.45}

@media (max-width:720px){
  /* sul telefono non c'è un mouse da fermare sopra un'icona: il cartellino
     non compare, e le icone restano quello che sono */
  .strumento span{display:none}
  .strumento{width:34px; height:34px}
  .nota-mappa{font-size:12.5px; padding:7px 10px}
}

/* ===================== il puntatore degli strumenti =====================
   Google mette il puntatore sul suo riquadro trascinabile, ma i marcatori e i
   poligoni che ci stanno sopra hanno il loro: passando su un vertice tornava
   la manina proprio mentre si stava disegnando. Qui il puntatore si impone a
   tutto quello che sta dentro la mappa, tranne i comandi — che restano
   comandi e devono comportarsi da tali.

   È un mirino da disegno tecnico, non la crocetta sottile del browser: linea
   scura con l'alone bianco sotto, così si vede sia sui tetti chiari sia sui
   cortili in ombra. */
.mappa-con-strumenti.usa-falda #mappa div,
.mappa-con-strumenti.usa-falda #mappa img,
.mappa-con-strumenti.usa-falda #mappa area{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g fill='none' stroke='white' stroke-width='3.4' stroke-opacity='.9'><path d='M16 0.5V11.5M16 20.5V31.5M0.5 16H11.5M20.5 16H31.5'/><rect x='11.5' y='11.5' width='9' height='9'/></g><g fill='none' stroke='%230B1A2B' stroke-width='1.3'><path d='M16 0.5V11.5M16 20.5V31.5M0.5 16H11.5M20.5 16H31.5'/><rect x='11.5' y='11.5' width='9' height='9'/></g></svg>") 16 16,crosshair !important}

.mappa-con-strumenti.usa-gomma #mappa div,
.mappa-con-strumenti.usa-gomma #mappa img,
.mappa-con-strumenti.usa-gomma #mappa area{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><g fill='none' stroke='white' stroke-width='3.4' stroke-opacity='.9'><rect x='5' y='7' width='20' height='16'/><path d='M8 25L26 5'/></g><g fill='none' stroke='%23B4231A' stroke-width='1.6'><rect x='5' y='7' width='20' height='16'/><path d='M8 25L26 5'/></g></svg>") 15 15,cell !important}

/* i comandi restano comandi: la barra, la nota e tutto quello che Google
   disegna da sé (zoom, schermo intero, tipo di mappa) */
.mappa-con-strumenti .strumenti-mappa,
.mappa-con-strumenti .strumenti-mappa *,
.mappa-con-strumenti .nota-mappa,
.mappa-con-strumenti #mappa .gmnoprint,
.mappa-con-strumenti #mappa .gmnoprint *,
.mappa-con-strumenti #mappa .gm-style-cc,
.mappa-con-strumenti #mappa .gm-style-cc *,
.mappa-con-strumenti #mappa button,
.mappa-con-strumenti #mappa a,
.mappa-con-strumenti #mappa a *{cursor:pointer !important}
.mappa-con-strumenti .strumento[disabled]{cursor:default !important}

/* A schermo intero Google porta con sé solo quello che sta dentro il suo
   riquadro: la barra gliela consegniamo, così ci va anche lei. Da quel
   momento è lui a posizionarla, e la nostra posizione assoluta va tolta. */
.strumenti-mappa.consegnata,
.nota-mappa.consegnata{position:static; margin:12px}
.nota-mappa.consegnata{max-width:560px}

/* i due numeri delle zavorre, sotto la posa: piccoli, perché compaiono solo
   sui tetti piani e non devono allargare la tabella */
.zavorre{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.campetto{display:flex; align-items:center; gap:4px; font-size:12.5px;
  color:var(--lieve)}
.campetto input{width:64px; padding:5px 6px; font-size:13px}
.zavorre .secondario{flex-basis:100%; margin-top:2px}