/* Personalizzazioni di Global System.
   Questo file non viene mai sovrascritto dai pacchetti: le modifiche qui restano. */


/* nomi di persona: grandi e in ambra, in tutte le schede */
.scheda h3.nome-grande{
  font-size:20px; color:var(--ambra); text-transform:none;
  letter-spacing:0; font-weight:600; margin-bottom:14px;
}

/* i testi lunghi non escono dai riquadri stretti */
.scheda .conteggio{ overflow-wrap:anywhere; white-space:normal; }

/* il pulsante di scelta file non occupa tutta la colonna */
#imp-scegli{ width:auto; padding-left:28px; padding-right:28px; }

/* su desktop la colonna principale e' il doppio di quella laterale */
@media (min-width:900px){
  .colonne-scheda{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
}

/* logo */
.logo-accesso{ height:52px; width:auto; display:block; margin:0 0 6px; }
.marchio img{ height:30px; width:auto; display:block; }
.testata .marchio img{ height:26px; }

/* mappa */
.leaflet-container{ background:#0e161d; }
.leaflet-popup-content-wrapper,.leaflet-popup-tip{ background:var(--pannello); color:var(--testo);
  border:1px solid var(--bordo); }
.leaflet-popup-content{ font-size:13px; line-height:1.45; }
.leaflet-popup-content a{ color:var(--ambra); }
.leaflet-control-attribution{ background:rgba(23,33,43,.85)!important; color:var(--debole)!important; }
.leaflet-control-attribution a{ color:var(--tenue)!important; }
input[type=range]{ accent-color:var(--ambra); }

/* fisarmonica materiali VBS */
:root{ --bg-si:rgba(63,178,127,.16); --bg-no:rgba(226,86,74,.16); }
#fisarmonica-materiali .secondario{ padding:10px 12px; font-size:14px; }

/* intestazioni di tabella cliccabili per ordinare */
@media (min-width:900px){
  .tabella th{ user-select:none; }
  .tabella th:hover{ color:var(--testo); }
  .tabella th[data-verso="su"], .tabella th[data-verso="giu"]{ color:var(--ambra); }
}

/* su telefono la mappa lascia spazio per scorrere la pagina */
@media (max-width:899px){
  #mp-mappa{ height:52vh!important; min-height:280px!important; }
  #mp-mappa + *, .colonne-scheda > div + div{ margin-top:14px; }
}

/* barra filtri leggibile su telefono */
@media (max-width:899px){
  .strumenti{ flex-direction:column; align-items:stretch; gap:10px; }
  .strumenti input, .strumenti select, .strumenti button{ width:100%; min-width:0; }
  .strumenti label{
    display:flex; align-items:center; justify-content:flex-start;
    gap:10px; width:100%; padding:10px 12px;
    border:1px solid var(--bordo); border-radius:9px; background:var(--riga);
  }
  .strumenti input[type=checkbox]{ width:20px!important; }
}

/* casella e scritta accostate a sinistra, senza vuoti in mezzo */
@media (max-width:899px){
  .strumenti label{
    justify-content:flex-start!important;
    gap:12px!important;
    text-align:left;
  }
  .strumenti label input[type=checkbox]{ order:-1; margin:0!important; }
}

/* ---- caselle di spunta ---- */
input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  width:20px!important; height:20px!important;
  min-width:20px; max-width:20px; flex:0 0 20px;
  margin:0!important; padding:0!important;
  border:1px solid var(--bordo); border-radius:6px;
  background:var(--riga); cursor:pointer;
  position:relative; vertical-align:middle;
}
input[type=checkbox]:hover{ border-color:var(--debole); }
input[type=checkbox]:checked{ background:var(--ambra); border-color:var(--ambra); }
input[type=checkbox]:checked::after{
  content:''; position:absolute; left:6px; top:2px;
  width:5px; height:10px; border:solid #241a06;
  border-width:0 2px 2px 0; transform:rotate(45deg);
}
input[type=checkbox]:focus-visible{ outline:2px solid var(--ambra); outline-offset:2px; }

.strumenti label{
  display:inline-flex!important; align-items:center;
  justify-content:flex-start!important; gap:10px!important;
  margin:0; font-size:14px; color:var(--tenue); cursor:pointer;
}

/* pulsanti secondari con bordo ambra */
.secondario{
  border-color:var(--ambra)!important;
  color:var(--ambra)!important;
}
.secondario:hover{ background:rgba(240,160,32,.12)!important; }
.secondario:disabled{ opacity:.35; }

/* materiali stornati: fuori dall'elenco */
#fisarmonica-materiali ~ * .campo .etic[style*="line-through"],
.scheda .campo:has(.etic[style*="line-through"]){ display:none!important; }

/* campi numerici senza le freccine di regolazione */
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* menu a tutto schermo con pulsanti grandi, su telefono */
@media (max-width:899px){
  .laterale{ width:100vw!important; max-width:none!important; }
  .laterale nav{
    display:grid!important; grid-template-columns:1fr 1fr; gap:12px; padding:16px;
  }
  .laterale nav button{
    flex-direction:column!important; justify-content:center; gap:10px!important;
    aspect-ratio:1/1; padding:0!important; font-size:15px!important;
    border:1px solid var(--bordo)!important; border-radius:14px;
    background:var(--riga)!important; text-align:center!important;
  }
  .laterale nav button .segno{ font-size:30px; }
  .laterale nav button.scelto{ border-color:var(--ambra)!important; }
  .laterale .fondo{ padding:16px 16px 24px; }
  .laterale .fondo .secondario{ padding:16px; font-size:16px; }
}

/* tre tasti per riga */
@media (max-width:899px){
  .laterale nav{ grid-template-columns:1fr 1fr 1fr!important; gap:10px!important; }
  .laterale nav button{ font-size:12px!important; gap:6px!important; }
  .laterale nav button .segno{ font-size:26px!important; }
}

/* il menu deve stare sopra la mappa */
#mp-mappa{ position:relative; z-index:0; isolation:isolate; }
.laterale{ z-index:3000!important; }
#velo-menu.visibile{ z-index:2900!important; }
.leaflet-pane, .leaflet-top, .leaflet-bottom{ z-index:auto!important; }

/* il menu deve stare sopra la mappa */
#mp-mappa{ position:relative; z-index:0; isolation:isolate; }
.laterale{ z-index:3000!important; }
#velo-menu.visibile{ z-index:2900!important; }
.leaflet-pane, .leaflet-top, .leaflet-bottom{ z-index:auto!important; }