/* ==========================================================================
   Vivere Benessere — foglio di stile
   Impostazione mobile-first: le regole di base valgono per il telefono,
   le sezioni @media più in basso aggiungono ciò che serve agli schermi ampi.
   ========================================================================== */

:root{
  --scuro:#2A2A45; --accento:#7A6A8A; --accento-chiaro:#EFEDF3;
  --verde:#2F6F4F; --rosso:#A33A3A; --ambra:#8A6D1F;
  --sfondo:#F4F3F7; --bordo:#D8D5DF; --testo:#22222E; --tenue:#666677;
  --raggio:10px;
  /* margini per la barra inferiore dell'iPhone e per i bordi curvi */
  --sicura-basso:env(safe-area-inset-bottom, 0px);
  --sicura-sinistra:env(safe-area-inset-left, 0px);
  --sicura-destra:env(safe-area-inset-right, 0px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sfondo);color:var(--testo);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  padding-left:var(--sicura-sinistra);padding-right:var(--sicura-destra)}
a{color:var(--accento);text-decoration:none}
a:hover{text-decoration:underline}

/* ------------------------------------------------------------ intestazione */
header.testa{background:#fff;border-bottom:1px solid var(--bordo);
  padding:10px 14px;display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:30}
header.testa img.logo{height:38px;width:auto;flex:none}
header.testa .identita{min-width:0;flex:1}
header.testa .nome{font-size:16px;font-weight:700;color:var(--scuro);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.testa .sub{color:var(--accento);font-size:12px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
header.testa .destra{display:flex;align-items:center;gap:8px;flex:none}

/* pulsante del menu: solo sugli schermi stretti */
.apri-menu{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--bordo);border-radius:9px;
  background:#fff;cursor:pointer;flex:none;padding:0}
.apri-menu span{display:block;width:20px;height:2px;background:var(--scuro);
  position:relative}
.apri-menu span::before,.apri-menu span::after{content:"";position:absolute;
  left:0;width:20px;height:2px;background:var(--scuro)}
.apri-menu span::before{top:-6px} .apri-menu span::after{top:6px}

/* ------------------------------------------------------------ navigazione */
nav.menu{background:var(--scuro);display:none;flex-direction:column;
  padding-bottom:var(--sicura-basso)}
nav.menu.aperto{display:flex}
nav.menu a{color:#D9D6E2;padding:14px 18px;font-size:15px;
  border-bottom:1px solid rgba(255,255,255,.08);display:flex;
  align-items:center;gap:10px;min-height:48px}
nav.menu a:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.06)}
nav.menu a.attivo{color:#fff;background:rgba(255,255,255,.12);
  box-shadow:inset 3px 0 0 var(--accento)}
nav.menu .segno{width:22px;text-align:center;font-size:15px;opacity:.85;flex:none}

main{max-width:1400px;margin:0 auto;padding:16px 12px 30px}
h1{font-size:20px;color:var(--scuro);margin:0 0 4px}
h2{font-size:16px;color:var(--scuro);margin:22px 0 10px}
p.nota{color:var(--tenue);font-size:13.5px;margin:4px 0 16px}

/* ------------------------------------------------------------ riquadri */
.scheda{background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:14px;margin-bottom:16px}
.scheda h2{margin-top:0}
.scheda.senza-bordi{padding:0;overflow:hidden;background:transparent;border:0}

/* ------------------------------------------------------------ dati in evidenza */
.tessere{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-bottom:16px}
.tessera{background:#fff;border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:13px}
.tessera .et{font-size:11.5px;color:var(--tenue);text-transform:uppercase;
  letter-spacing:.04em;line-height:1.35}
.tessera .val{font-size:20px;font-weight:700;color:var(--scuro);margin-top:5px;
  font-variant-numeric:tabular-nums}
.tessera .val.verde{color:var(--verde)} .tessera .val.rosso{color:var(--rosso)}
.tessera .sotto{font-size:11.5px;color:var(--tenue);margin-top:3px;line-height:1.35}

/* ==========================================================================
   TABELLE
   Su telefono ogni riga diventa una scheda: l'etichetta di ciascun valore
   arriva dall'attributo data-e, così nessun dato resta nascosto.
   ========================================================================== */
.avvolgi{overflow:visible}
table{border-collapse:collapse;width:100%;font-size:14px;background:#fff}
th{background:var(--accento);color:#fff;text-align:left;padding:9px 10px;
  font-size:12.5px;font-weight:600;white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--bordo);vertical-align:top}
td.n,th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.c,th.c{text-align:center}
td.piccolo{font-size:12.5px;color:var(--tenue)}
.vuota{padding:24px 16px;text-align:center;color:var(--tenue);background:#fff;
  border:1px solid var(--bordo);border-radius:var(--raggio)}

table.dati{display:block;background:transparent}
table.dati thead{display:none}
table.dati tbody{display:block}
table.dati tr{display:block;background:#fff;border:1px solid var(--bordo);
  border-radius:12px;margin:0 0 10px;padding:4px 12px}
table.dati td{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;text-align:right;border:0;border-bottom:1px dashed #EDEBF1;
  padding:8px 0;font-size:14.5px}
table.dati tr td:last-child{border-bottom:0}
table.dati td::before{content:attr(data-e);font-weight:600;color:var(--tenue);
  font-size:12.5px;text-align:left;flex:0 0 42%;text-transform:uppercase;
  letter-spacing:.03em;line-height:1.5}
/* celle senza etichetta: il valore occupa tutta la larghezza */
table.dati td[data-e=""]{display:block;text-align:left}
table.dati td[data-e=""]::before{display:none}
/* prima cella della scheda: fa da titolo */
table.dati td.titolo{font-size:16px;font-weight:700;color:var(--scuro);
  display:block;text-align:left;padding:10px 0 8px}
table.dati td.titolo::before{display:none}
/* celle superflue nella forma a schede */
table.dati td.vuoto{display:none}
table.dati tr.totale{background:var(--accento-chiaro);border-color:var(--accento)}
table.dati tr.totale td{font-weight:700}

/* ------------------------------------------------------------ moduli */
form.griglia{display:grid;grid-template-columns:1fr;gap:14px}
label{display:block;font-size:13.5px;color:var(--scuro);font-weight:600;
  margin-bottom:5px}
input[type=text],input[type=number],input[type=date],input[type=password],
select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--bordo);border-radius:9px;
  font:inherit;
  /* 16px impedisce a Safari su iPhone di ingrandire la pagina quando si tocca */
  font-size:16px;background:#fff;color:var(--testo);
  -webkit-appearance:none;appearance:none}
select{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='%237A6A8A' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
input[type=checkbox]{width:22px;height:22px;accent-color:var(--accento);
  -webkit-appearance:auto;appearance:auto}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accento);
  outline-offset:-1px;border-color:var(--accento)}
textarea{min-height:80px;resize:vertical}
.aiuto{font-size:12.5px;color:var(--tenue);margin-top:5px;line-height:1.45}
fieldset{border:1px solid var(--bordo);border-radius:var(--raggio);padding:14px;
  margin:0 0 16px;background:#fff}
legend{font-weight:700;color:var(--scuro);padding:0 8px;font-size:15px}
.interruttore{display:flex;align-items:center;gap:10px;font-size:14.5px;
  font-weight:600;color:var(--scuro);min-height:44px}
.interruttore input{width:22px;height:22px;flex:none}

/* ------------------------------------------------------------ pulsanti */
.bottone,button{display:inline-flex;align-items:center;justify-content:center;
  gap:6px;padding:11px 16px;min-height:44px;border-radius:9px;
  border:1px solid var(--bordo);background:#fff;color:var(--scuro);font:inherit;
  font-size:14.5px;font-weight:600;cursor:pointer;text-align:center;
  -webkit-tap-highlight-color:transparent}
.bottone:hover,button:hover{background:#F0EEF4;text-decoration:none}
.bottone:active,button:active{transform:translateY(1px)}
.bottone.primario,button.primario{background:var(--scuro);border-color:var(--scuro);
  color:#fff}
.bottone.primario:hover,button.primario:hover{background:#3A3A5A}
.bottone.pericolo,button.pericolo{color:var(--rosso);border-color:#E0C4C4}
.bottone.piccolo,button.piccolo{padding:8px 12px;font-size:13.5px;min-height:40px}
.bottone.larga,button.larga{width:100%}
.azioni{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.barra{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.barra form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;flex:1}
.barra form > div{flex:1;min-width:130px}
.barra .cresci{display:none}
.barra .bottone{flex:1;min-width:150px}

/* pulsanti dentro una scheda di tabella */
.pulsantiera{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0 4px}
.pulsantiera form{display:contents}

/* barra d'azione appiccicata in basso, per i moduli lunghi */
.azioni-fisse{position:sticky;bottom:0;background:rgba(244,243,247,.96);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-top:1px solid var(--bordo);
  margin:16px -12px 0;padding:12px 12px calc(12px + var(--sicura-basso));
  display:flex;gap:10px;flex-wrap:wrap;z-index:10}
.azioni-fisse .bottone,.azioni-fisse button{flex:1;min-width:140px}

/* ------------------------------------------------------------ messaggi */
.messaggi{margin-bottom:16px}
.messaggio{padding:12px 14px;border-radius:var(--raggio);margin-bottom:8px;
  font-size:14px;border-left:4px solid;line-height:1.45}
.messaggio.ok{background:#EAF5EE;border-color:var(--verde);color:#1E5638}
.messaggio.errore{background:#FBEDED;border-color:var(--rosso);color:#7E2A2A}
.messaggio.avviso{background:#FBF6E6;border-color:var(--ambra);color:#6B5417}

/* ------------------------------------------------------------ pillole */
.pillola{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12.5px;
  font-weight:600;white-space:nowrap}
.pillola.verde{background:#E4F1E9;color:var(--verde)}
.pillola.rossa{background:#FAE8E8;color:var(--rosso)}
.pillola.gialla{background:#FBF3DD;color:var(--ambra)}
.pillola.grigia{background:#ECEAF0;color:var(--tenue)}

/* ------------------------------------------------------------ istogramma */
.grafico{display:flex;align-items:flex-end;gap:4px;height:130px;padding-top:8px}
.grafico .colonna{flex:1;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;gap:3px;height:100%;min-width:0}
.grafico .barra-c{width:100%;background:var(--accento);border-radius:3px 3px 0 0;
  min-height:2px}
.grafico .barra-c.d{background:var(--scuro)}
.grafico .et{font-size:9.5px;color:var(--tenue);white-space:nowrap}

/* ------------------------------------------------------------ accesso */
.accesso{max-width:380px;margin:6vh auto;background:#fff;border:1px solid var(--bordo);
  border-radius:14px;padding:26px 22px calc(26px + var(--sicura-basso));
  text-align:center}
.accesso img{height:84px;margin-bottom:16px}

/* ------------------------------------------------------------ elenco voci */
dl.voci{display:grid;grid-template-columns:1fr auto;gap:0;margin:0;font-size:14.5px}
dl.voci dt{padding:9px 0;border-bottom:1px solid #EEECF2;padding-right:12px}
dl.voci dd{padding:9px 0;border-bottom:1px solid #EEECF2;margin:0;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
dl.voci dt.forte,dl.voci dd.forte{font-weight:700;color:var(--scuro)}
dl.voci dd.rosso{color:var(--rosso)} dl.voci dd.verde{color:var(--verde)}

/* ------------------------------------------------------------ tariffario */
.tariffe .riga{display:flex;gap:8px;align-items:center;padding:10px 0;
  border-bottom:1px solid #EEECF2;flex-wrap:wrap}
.tariffe .riga-form{display:flex;gap:8px;align-items:center;flex:1;flex-wrap:wrap}
.tariffe .riga-form input[type=text]{flex:1 1 100%;min-width:0}
.tariffe .riga-form input[type=number]{flex:1;min-width:80px}
.tariffe .intestazione{display:none}
.tariffe .nuova{background:var(--accento-chiaro);margin-top:6px;padding:12px;
  border-radius:10px;border-bottom:0}

footer.piede{text-align:center;color:var(--tenue);font-size:12px;
  padding:16px 14px calc(20px + var(--sicura-basso));line-height:1.5}

/* ==========================================================================
   SCHERMI MEDI — tablet in verticale
   ========================================================================== */
@media (min-width:600px){
  main{padding:20px 18px 36px}
  h1{font-size:22px}
  form.griglia{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .tessere{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
  .tessera .val{font-size:22px}
  .scheda{padding:18px}
  .azioni-fisse{margin-left:-18px;margin-right:-18px;
    padding-left:18px;padding-right:18px}
  .tariffe .riga-form input[type=text]{flex:1 1 200px}
  .barra .bottone{flex:0 1 auto}
}

/* ==========================================================================
   SCHERMI AMPI — tablet in orizzontale e computer:
   menu sempre in vista e tabelle nella forma classica
   ========================================================================== */
@media (min-width:900px){
  body{font-size:15px}
  header.testa{padding:14px 20px;gap:16px;position:static}
  header.testa img.logo{height:52px}
  header.testa .nome{font-size:20px}
  header.testa .sub{font-size:13px}
  header.testa .destra{margin-left:auto}
  .apri-menu{display:none}

  nav.menu{display:flex;flex-direction:row;flex-wrap:wrap;padding:0 12px}
  nav.menu a{border-bottom:3px solid transparent;padding:12px 15px;font-size:14px;
    min-height:0}
  nav.menu a.attivo{border-bottom-color:var(--accento);box-shadow:none;
    background:rgba(255,255,255,.08)}
  nav.menu .segno{display:none}

  main{padding:22px 20px 60px}
  h1{font-size:23px}
  .barra .cresci{display:block;flex:1}
  .barra form{flex:0 1 auto}
  .barra form > div{flex:0 1 auto}

  .avvolgi{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.dati{display:table;background:#fff}
  table.dati thead{display:table-header-group}
  table.dati tbody{display:table-row-group}
  table.dati tr{display:table-row;background:transparent;border:0;
    border-radius:0;margin:0;padding:0}
  table.dati tr:nth-child(even) td{background:#FAF9FC}
  table.dati td{display:table-cell;text-align:left;border:0;
    border-bottom:1px solid var(--bordo);padding:8px 10px;font-size:14px;gap:0}
  table.dati td::before{display:none}
  table.dati td.n{text-align:right}
  table.dati td.c{text-align:center}
  /* la cella-titolo serve solo alla forma a schede */
  table.dati td.titolo{display:none}
  table.dati td.vuoto{display:table-cell}
  .solo-schede{display:none}
  table.dati tr.totale td{background:var(--accento-chiaro);font-weight:700;
    border-top:2px solid var(--accento)}
  table.dati th{position:sticky;top:0;z-index:2}
  .scheda.senza-bordi{background:#fff;border:1px solid var(--bordo)}
  .pulsantiera{padding:0}
  .pulsantiera form{display:inline}

  .azioni-fisse{position:static;background:none;-webkit-backdrop-filter:none;
    backdrop-filter:none;border-top:0;margin:14px 0 0;padding:0}
  .azioni-fisse .bottone,.azioni-fisse button{flex:0 1 auto;min-width:0}

  .grafico{height:150px;gap:6px}
  .grafico .et{font-size:10.5px}
  .tariffe .intestazione{display:flex;font-size:12.5px;font-weight:600;
    color:var(--tenue);border-bottom:2px solid var(--bordo)}
  .tariffe .intestazione div:first-child{flex:1;min-width:180px}
  .tariffe .intestazione div{width:95px}
  .tariffe .riga-form input[type=text]{flex:1;min-width:180px}
  .tariffe .riga-form input[type=number]{width:95px;flex:none}
}

/* ==========================================================================
   Dispositivi a tocco: aree generose anche sugli schermi grandi
   ========================================================================== */
@media (hover:none){
  .bottone,button{min-height:44px}
  .bottone.piccolo,button.piccolo{min-height:42px;padding:9px 14px}
  nav.menu a{min-height:48px}
  td a.bottone,td button{margin:2px 0}
}

/* ==========================================================================
   Stampa
   ========================================================================== */
@media print{
  nav.menu,header.testa .destra,.apri-menu,.azioni,.azioni-fisse,
  .barra,footer.piede,.messaggi,.pulsantiera{display:none !important}
  body{background:#fff;font-size:11pt}
  header.testa{position:static;border-bottom:2px solid var(--scuro)}
  .scheda{border:0;padding:0;margin-bottom:10px}
  table.dati{display:table !important;background:#fff !important}
  table.dati thead{display:table-header-group !important}
  table.dati tbody{display:table-row-group !important}
  table.dati tr{display:table-row !important;border:0 !important;padding:0 !important}
  table.dati td{display:table-cell !important;text-align:left;padding:5px 7px;
    border-bottom:1px solid #999}
  table.dati td::before{display:none !important}
  table.dati td.n{text-align:right}
  table.dati td.vuoto,table.dati td[data-e=""]{display:none !important}
  th{background:#DDD !important;color:#000 !important}
  .tessera{border:1px solid #999}
  a{color:#000;text-decoration:none}
}

/* Rispetta la preferenza di ridurre le animazioni */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .bottone:active,button:active{transform:none}
}

/* visibile solo nella forma a schede (telefono) */
.solo-schede{display:inline}

/* testo riservato ai lettori di schermo */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* riquadro con l'importo calcolato nel modulo della prestazione */
.tessera.esito-calcolo{margin-top:16px}
@media (min-width:600px){.tessera.esito-calcolo{max-width:340px}}

/* pannello che si apre dentro una scheda (registrazione dell'utilizzo) */
.pannello{background:var(--accento-chiaro);border:1px solid var(--accento);
  border-radius:10px;padding:12px;margin-top:10px;text-align:left}
.pannello .griglia{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:600px){.pannello .griglia{grid-template-columns:1fr 1fr}}
.grafico .barra-c.b{background:#9A8763}

/* anteprima dell'indirizzo che finirà stampato sul buono */
.anteprima{margin-top:10px;padding:10px 12px;background:#FAF9FC;border:1px solid var(--bordo);
  border-radius:9px;font-size:14px;line-height:1.5}
.anteprima .et{font-size:11px;color:var(--tenue);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:5px}

/* selettore di file */
input[type=file]{width:100%;padding:10px;border:1px dashed var(--bordo);border-radius:9px;
  background:#FAF9FC;font-size:14px}
input[type=file]:focus{outline:2px solid var(--accento);outline-offset:-1px}

/* dettatura vocale */
.campo-dettatura{position:relative}
.riga-dettatura{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.detta .icona-mic{color:var(--rosso);font-size:11px;line-height:1}
.detta.in-ascolto{background:var(--rosso);border-color:var(--rosso);color:#fff}
.detta.in-ascolto .icona-mic{color:#fff;animation:pulsa 1.1s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}
.stato-dettatura{flex:1;min-width:180px}

/* etichette di sezione nelle schede cliente */
.et-sez{font-size:11.5px;font-weight:600;color:var(--tenue);text-transform:uppercase;
  letter-spacing:.04em}
.aiuto.scaduta{color:var(--rosso);font-weight:600}
.testo-rosso{color:var(--rosso)}