/* WebApp ClientManager — foglio di stile unico.
   Pensato prima per il telefono: è lì che si userà, fuori sede. */

:root{
  --viola:#3B3080;        /* petalo viola del marchio, colore guida */
  --viola-chiaro:#5B4CB8;
  --rosso:#C93B2B;
  --verde:#2E8B3E;
  --giallo:#B07D0A;
  --carta:#FFFFFF;
  --fondo:#F4F4F8;
  --testo:#1A1A24;
  --tenue:#63637A;
  --bordo:#DEDEE8;
}
@media (prefers-color-scheme: dark){
  :root{
    --carta:#1C1C26; --fondo:#131319; --testo:#ECECF2;
    --tenue:#9A9AB0; --bordo:#2E2E3C; --viola:#8C7DEA; --viola-chiaro:#A99CF2;
    --verde:#5FBE81; --rosso:#EE8175; --giallo:#DDA92C;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--testo);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* barra superiore */
.barra{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; padding-top:max(10px,env(safe-area-inset-top));
  background:var(--carta); border-bottom:1px solid var(--bordo);
  position:sticky; top:0; z-index:10;
}
.marchio{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--testo); font-weight:600}

.operatore{font-size:13px; color:var(--tenue); text-align:right; line-height:1.25}
.operatore b{display:block; color:var(--viola); font-size:11px; letter-spacing:.06em}

.pagina{max-width:640px; margin:0 auto; padding:20px 16px 40px}

/* schermata di accesso */
.accesso{max-width:360px; margin:8vh auto 0; text-align:center}
.accesso .logo{width:118px; height:auto; margin-bottom:20px}
.accesso h1{margin:0; font-size:26px; letter-spacing:-.02em}
.sottotitolo{margin:4px 0 26px; color:var(--tenue); font-size:14px}

form{text-align:left}
label{display:block; font-size:13px; font-weight:600; color:var(--tenue); margin:14px 0 5px}
input[type=email],input[type=password],input[type=text],select,textarea{
  width:100%; padding:13px 14px; font-size:16px;   /* 16px evita lo zoom su iOS */
  font-family:inherit; line-height:1.25;
  color:var(--testo); background:var(--carta);
  border:1px solid var(--bordo); border-radius:9px;
}
/* Senza appearance:none l'altezza del select non coincide con quella degli
   input, e ogni browser la calcola a modo suo. */
select{
  appearance:none; padding-right:38px; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A8AA0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px;
}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--viola); outline-offset:2px;
}

button{
  width:100%; margin-top:22px; padding:14px; font:inherit; font-weight:600;
  color:#fff; background:var(--viola); border:none; border-radius:9px; cursor:pointer;
}
button:hover{background:var(--viola-chiaro)}

.errore{
  margin:0 0 4px; padding:11px 14px; border-radius:9px; font-size:14px;
  color:var(--rosso); background:color-mix(in srgb,var(--rosso) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--rosso) 28%,transparent);
}

/* menu */
.menu h1{font-size:22px; margin:4px 0 18px; letter-spacing:-.015em}
.voce{
  display:flex; align-items:center; gap:15px;
  width:100%; text-align:left; text-decoration:none;
  margin:0 0 12px; padding:16px 18px; border-radius:11px;
  background:var(--carta); border:1px solid var(--bordo); color:var(--testo);
  font:inherit; cursor:pointer;
}
.voce:hover{border-color:var(--viola)}
.icona{flex:none; width:23px; height:23px; color:var(--viola)}
.voce:hover .icona{color:var(--viola-chiaro)}
.testo{min-width:0}
.etichetta{display:block; font-weight:600; font-size:17px}
.nota{display:block; margin-top:2px; font-size:13.5px; color:var(--tenue)}
.voce.esci{margin-top:26px; color:var(--rosso); font-weight:600; background:transparent}
.voce.esci .icona{color:var(--rosso)}
.voce.esci:hover .icona{color:var(--rosso)}
.voce.esci:hover{border-color:var(--rosso)}

/* ---- testata di pagina con freccia di ritorno ---- */
.testata{display:flex; align-items:flex-start; gap:12px; margin:0 0 20px}
.testata h1{margin:0; font-size:22px; letter-spacing:-.015em; line-height:1.25}
.indietro{
  flex:none; width:38px; height:38px; margin-top:-6px;
  display:grid; place-items:center; font-size:22px; line-height:1;
  text-decoration:none; color:var(--viola);
  border:1px solid var(--bordo); border-radius:10px; background:var(--carta);
}
.indietro:hover{border-color:var(--viola)}
.cliente-corrente{margin:2px 0 0; font-size:14px; color:var(--tenue)}

/* ---- filtri di ricerca ---- */
.filtri{background:var(--carta); border:1px solid var(--bordo); border-radius:11px; padding:16px 18px 20px}
.filtri label{margin-top:0}
.campo + .campo,.coppia{margin-top:12px}
.coppia{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start}
/* Le celle di una griglia hanno min-width:auto, quindi un select si allarga
   fino alla sua opzione più lunga — "Arabia Saudita", la voce fatta di soli
   trattini — sfondando la colonna e disallineando i due campi. */
.coppia > .campo{min-width:0}
.filtri button{margin-top:18px}

.conteggio{margin:22px 0 12px; font-size:13.5px; color:var(--tenue)}
.avviso{color:var(--rosso)}
.vuoto{margin:18px 0; padding:16px; text-align:center; color:var(--tenue);
  background:var(--carta); border:1px dashed var(--bordo); border-radius:11px}

/* ---- riga cliente nei risultati ---- */
.cliente{background:var(--carta); border:1px solid var(--bordo); border-radius:11px;
  padding:14px 16px; margin-bottom:10px}
.anagrafica{display:flex; flex-direction:column; gap:2px}
.ragsoc{font-weight:600; font-size:16.5px; line-height:1.3}
.luogo{font-size:13.5px; color:var(--tenue)}
.azioni{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.azioni a{
  flex:1 1 auto; min-width:78px; text-align:center; text-decoration:none;
  padding:9px 10px; font-size:14px; font-weight:500; border-radius:8px;
  color:var(--viola); border:1px solid var(--bordo); background:transparent;
}
.azioni a:hover{border-color:var(--viola)}
.azioni a.primaria{color:#fff; background:var(--viola); border-color:var(--viola)}
.azioni a.primaria:hover{background:var(--viola-chiaro)}

/* ---- scheda cliente ---- */
.scheda{background:var(--carta); border:1px solid var(--bordo); border-radius:11px; padding:6px 18px 18px}
.scheda dl{display:grid; grid-template-columns:112px 1fr; gap:0 14px; margin:0}
.importi dl{grid-template-columns:1fr auto}

.scadenza{font-variant-numeric:tabular-nums}
.scadenza.fuori{color:var(--rosso); font-weight:600}
.badge-scaduta{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--rosso); background:color-mix(in srgb,var(--rosso) 12%,transparent);
}
.scheda dt{padding:12px 0 0; font-size:12.5px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--tenue)}
.scheda dd{margin:0; padding:12px 0 0; overflow-wrap:anywhere}
.assente{color:var(--tenue)}
.note{margin-top:18px; padding-top:16px; border-top:1px solid var(--bordo)}
.note h2{margin:0 0 8px; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--tenue)}
.note p{margin:0; font-size:15px; overflow-wrap:anywhere}

.sezione{display:flex; align-items:center; gap:9px; margin:28px 0 12px; font-size:17px}
.quanti{font-size:12.5px; font-weight:600; color:var(--tenue);
  background:var(--fondo); border:1px solid var(--bordo); border-radius:999px; padding:1px 9px}

.riferimento{background:var(--carta); border:1px solid var(--bordo); border-radius:11px;
  padding:13px 16px; margin-bottom:9px}
.riferimento .nome{font-weight:600}
.riferimento .ruolo{display:block; font-size:13.5px; color:var(--tenue)}
.contatti{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:8px}
.contatti a{font-size:14.5px; color:var(--viola); text-decoration:none; overflow-wrap:anywhere}
.contatti a:hover{text-decoration:underline}

/* ---- eventi ---- */
.evento{background:var(--carta); border:1px solid var(--bordo); border-radius:11px;
  padding:14px 16px; margin-bottom:10px}
.riga1{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.tipo{font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--viola)}
.quando{font-size:13px; color:var(--tenue); white-space:nowrap; font-variant-numeric:tabular-nums}
.descrizione{margin:7px 0 0; font-weight:600; font-size:15.5px}
.corpo{margin-top:7px}
.corpo summary{cursor:pointer; font-size:14.5px; color:var(--tenue); list-style:none}
.corpo summary::-webkit-details-marker{display:none}
.corpo summary::before{content:"▸ "; color:var(--viola)}
.corpo[open] summary{color:transparent; height:0; overflow:hidden}
.corpo p{margin:6px 0 0; font-size:15px; overflow-wrap:anywhere}
.autore{margin:9px 0 0; font-size:12px; letter-spacing:.04em; color:var(--tenue)}

.altri{display:block; text-align:center; text-decoration:none; margin:14px 0 0;
  padding:13px; font-weight:600; color:var(--viola);
  background:var(--carta); border:1px solid var(--bordo); border-radius:11px}
.altri:hover{border-color:var(--viola)}

.piede{margin-top:30px}

/* ---- offerte ---- */
.offerta{display:block; text-decoration:none; color:var(--testo);
  background:var(--carta); border:1px solid var(--bordo); border-radius:11px;
  padding:14px 16px; margin-bottom:10px}
.offerta:hover{border-color:var(--viola)}
.offerta .riga1{display:flex; align-items:center; justify-content:space-between; gap:10px}
.codice{font-weight:600; font-size:16px; font-variant-numeric:tabular-nums}
.offerta .riga2{display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-top:9px}
.importo{font-weight:600; font-variant-numeric:tabular-nums}

.stato{flex:none; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap}
.stato.formulata{color:var(--viola);
  background:color-mix(in srgb,var(--viola) 12%,transparent)}
.stato.ordine{color:var(--verde);
  background:color-mix(in srgb,var(--verde) 14%,transparent)}
.stato.chiusa{color:var(--tenue); background:var(--fondo)}

.oggetto{margin:-8px 0 20px; font-size:16px; font-weight:600}
.importi dd{text-align:right; font-variant-numeric:tabular-nums}
.importi .totale{display:flex; align-items:baseline; justify-content:space-between;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--bordo)}
.importi .totale span{font-size:12.5px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--tenue)}
.importi .totale b{font-size:19px; font-variant-numeric:tabular-nums}

.righe{background:var(--carta); border:1px solid var(--bordo); border-radius:11px; overflow:hidden}
.riga{display:grid; grid-template-columns:auto 1fr auto; gap:6px 12px;
  align-items:baseline; padding:12px 16px; border-bottom:1px solid var(--bordo)}
.riga:last-child{border-bottom:none}
.qta{font-size:13.5px; font-weight:700; color:var(--viola); font-variant-numeric:tabular-nums}
.voce-descr{min-width:0; overflow-wrap:anywhere}
.voce-importo{font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}

.nota-piede{margin:10px 2px 0; font-size:13.5px; color:var(--tenue)}
.testo-libero{margin:0; font-size:15px; overflow-wrap:anywhere}
.scheda .testo-libero{padding:14px 0}

/* ---- conferma dopo un salvataggio ---- */
.conferma{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0 0 18px; padding:12px 15px; border-radius:9px; font-size:14.5px; font-weight:500;
  color:var(--verde); background:color-mix(in srgb,var(--verde) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--verde) 30%,transparent);
}
.conferma p{margin:0}
.azione-conferma{
  flex:none; padding:9px 15px; border-radius:8px; text-decoration:none;
  font-size:13.5px; font-weight:600; color:#fff; background:var(--verde);
}
.azione-conferma:hover{filter:brightness(1.08)}
.errore div + div{margin-top:4px}
textarea{resize:vertical; min-height:120px; line-height:1.5}
input[type=date]{min-height:49px}

/* ---- avviso possibili doppioni ---- */
.attenzione{
  margin:0 0 18px; padding:14px 16px; border-radius:10px; font-size:14.5px;
  color:var(--testo);
  background:color-mix(in srgb,#D9A01E 12%,transparent);
  border:1px solid color-mix(in srgb,#D9A01E 40%,transparent);
}
.attenzione p{margin:0}
.attenzione ul{margin:9px 0; padding-left:20px}
.attenzione li{margin-bottom:4px}
.attenzione a{color:var(--viola); font-weight:600}
.attenzione .luogo{color:var(--tenue); font-size:13px}
.attenzione .piccolo{margin-top:9px; font-size:13.5px; color:var(--tenue)}

.sezione-form{
  margin:26px 0 -4px; padding-top:18px; border-top:1px solid var(--bordo);
  }
.sezione-form.prima{margin-top:2px; padding-top:0; border-top:none}
.sezione-form{
  font-size:12.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tenue);
}

/* ============================================================
   Direzione ibrida — barra delle azioni in fondo allo schermo
   ============================================================ */
.barra-fondo{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; gap:8px;
  padding:10px 16px calc(14px + env(safe-area-inset-bottom));
  background:var(--carta); border-top:1px solid var(--bordo);
}
.barra-fondo a{
  flex:1; text-align:center; text-decoration:none;
  padding:13px 6px; border-radius:10px;
  font-size:13.5px; font-weight:600; line-height:1.2;
  color:var(--viola); background:var(--carta); border:1px solid var(--bordo);
}
.barra-fondo a:hover{border-color:var(--viola)}
.barra-fondo a.forte{color:#fff; background:var(--viola); border-color:var(--viola)}
.barra-fondo a.forte:hover{background:var(--viola-chiaro)}
/* altezza della barra, così l'ultimo contenuto non ci finisce sotto */
.spazio-barra{height:calc(74px + env(safe-area-inset-bottom))}
@media (min-width:640px){
  .barra-fondo{
    left:50%; right:auto; transform:translateX(-50%);
    width:100%; max-width:640px;
    border-left:1px solid var(--bordo); border-right:1px solid var(--bordo);
    border-radius:14px 14px 0 0;
  }
}

/* ---- stato dell'offerta: colore sul bordo, non solo nella pastiglia ---- */
.offerta{border-left-width:1px; padding-left:16px; position:relative; overflow:hidden}
.offerta::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent}
.offerta.ordine::before{background:var(--verde)}
.offerta.formulata::before{background:var(--giallo)}
.offerta.chiusa::before{background:var(--bordo)}
.stato.formulata{color:var(--giallo); background:color-mix(in srgb,var(--giallo) 14%,transparent)}