/* DEMO (demo/index.html): solo quello che la pagina del fornitore non ha. Le sezioni usano le copie dei fogli
   del portale in demo/css (styleFR, styleSC, styleHM, styleMR, styleMC, styleQM); qui la fascia dei dati finti, la
   cornice del telefono e poche righe dei fogli dei report. Colori da demo/css/colori.css */

/* fascia in alto: dice che i dati sono finti e dove finiscono */
.dm-fascia {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: 6px 16px;
  box-sizing: border-box;
  background: var(--pannello-scuro);
  border-bottom: 1px solid var(--linea);
  font-size: 12px;
  color: var(--testo-2);
}

.dm-fascia b {
  padding: 2px 8px;
  border-radius: 5px;
  background: #f96d00;
  color: black;
  letter-spacing: 0.5px;
}

.dm-fascia span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-fascia a {
  color: var(--arancio-testo);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* la griglia della pagina perde l'altezza della fascia */
.grd-home {
  height: calc(98vh - 32px);
}

/* il cliente non vede i bottoni e le sezioni del fornitore */
body.dm-cliente .dm-solo-fornitore {
  display: none;
}

/* sul telefono la barra in basso non ha posto per IN ARRIVO: va nel menu di IMPOSTAZIONI */
.nav-menu button.dm-solo-telefono {
  display: none;
}

@media (max-width: 768px) {
  .bottom-nav button.dm-no-telefono {
    display: none;
  }

  .nav-menu button.dm-solo-telefono {
    display: flex;
  }
}

.dm-cliccabile {
  cursor: pointer;
}

/* IN ARRIVO: una colonna sola, larga quanto si legge bene */
.dm-arrivo {
  width: 100%;
  max-width: 760px;
}

.dm-arrivo .hm-riga {
  align-items: flex-start;
}

.hm-riga-testo small.dm-arrivo-testo {
  white-space: normal;
  line-height: 1.5;
}

/* foglio del report nel pannello: testo della voce a sinistra, risposta a destra */
.dm-voce-foglio {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 13px;
}

.dm-voce-foglio span {
  color: var(--testo-2);
}

.dm-voce-foglio b {
  text-align: right;
  font-weight: 600;
}

.dm-firma {
  display: block;
  width: 180px;
  background: #ffffff;
  border-radius: 5px;
}

/* il telefono del tecnico: cornice scura al centro, la pagina della macchina dentro */
.dm-telefono-velo {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--velo-forte);
}

.dm-telefono-velo.open {
  display: flex;
}

.dm-telefono {
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: 100%;
  height: 92vh;
  border: 10px solid #111111;
  border-radius: 34px;
  background: var(--fondo);
  overflow: hidden;
}

.dm-telefono-testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #111111;
  color: #bbbbbb;
  font-size: 12px;
}

.dm-telefono-schermo {
  flex: 1;
  overflow-y: auto;
}

/* styleFR.css da' a tutti i campi della pagina spazi e margini: nelle spunte del telefono non ci vanno */
.dm-telefono input[type="checkbox"],
.dm-telefono input[type="radio"] {
  padding: 0;
  margin: 0;
}

.dm-foglio-tel .mc-dati {
  grid-template-columns: minmax(0, 1fr);
}

/* sul telefono vero la cornice non serve: la pagina prende tutto lo schermo */
@media (max-width: 500px) {
  .dm-telefono {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
  }

  .dm-fascia span {
    display: none;
  }

  .dm-fascia a {
    margin-left: auto;
  }
}