@font-face { font-family: Inter; src: url(font/Inter.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }

:root {
  --fondo: #EEF2F9; --carta: #fff; --testo: #0E1A33; --grigio: #64708A; --spento: #9AA5BA; --linea: #E3E8F1;
  --notte: #070F26; --navy: #15264A; --blu: #223F77; --accento: #3A66B0; --chiaro: #8FAADB; --tenue: #E8EEF9; --oro: #D9B26A;
  --verde: #1F9D6E; --fondo-verde: #E3F5EC; --ambra: #B7791F; --fondo-ambra: #FBF1DE; --rosso: #C2412D; --fondo-rosso: #FBE9E5;
  --campo: #F4F6FB;
  --banner: linear-gradient(140deg, #0F1F42 0%, #1B3466 50%, #3A66B0 100%);
  --ombra: 0 1px 2px rgba(14, 26, 51, .05), 0 10px 30px -18px rgba(14, 26, 51, .25);
  --ombra-blu: 0 14px 26px -12px rgba(34, 63, 119, .8);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
/* sopra (barra dell'ora, rimbalzo dello scorrimento) si vede il blu della testata */
html { background: #0F1F42; }
body { min-height: 100vh; font-family: Inter, -apple-system, system-ui, sans-serif; background: var(--fondo); color: var(--testo); font-size: 16px;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
.nascosto { display: none !important; }

/* ---------- pulsanti e campi ---------- */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 16px; padding: 14px 18px;
  font-weight: 700; cursor: pointer; background: var(--banner); color: #fff; min-height: 52px; box-shadow: var(--ombra-blu); }
.bottone:active { transform: scale(.98); }
.bottone:disabled { opacity: .55; cursor: default; }
.bottone.pieno { width: 100%; }
.bottone.chiaro { background: var(--tenue); color: var(--accento); box-shadow: none; }
.bottone.verde { background: var(--verde); box-shadow: none; }
.bottone.rosso { background: var(--fondo-rosso); color: var(--rosso); box-shadow: none; }
.bottone.piccolo { min-height: 40px; padding: 8px 16px; border-radius: 12px; font-size: 15px; }
.link { background: none; border: 0; color: var(--accento); font-weight: 600; cursor: pointer; padding: 6px 0; font-size: 15px; }

label { display: block; font-size: 13px; font-weight: 600; color: var(--grigio); margin: 14px 0 6px; }
input, select, textarea { width: 100%; border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; background: var(--campo); min-height: 50px; font-size: 16px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accento); outline-offset: -1px; background: #fff; }
textarea { min-height: 76px; resize: vertical; }
.due { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
input[type=date], input[type=time] { min-width: 0; -webkit-appearance: none; appearance: none; }
.errore { color: var(--rosso); font-size: 14px; margin-top: 10px; min-height: 1em; }
.nota { color: var(--grigio); font-size: 14px; line-height: 1.45; }

/* ---------- accesso: notte blu con le orbite, pianeta, scheda bianca ---------- */
.accesso { min-height: 100vh; min-height: 100dvh; position: relative; overflow: hidden; background: var(--notte); color: #fff;
  display: flex; flex-direction: column; justify-content: center; padding: calc(28px + env(safe-area-inset-top)) 20px 32px; }
.accesso .cielo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.accesso .centro { position: relative; z-index: 1; width: 100%; max-width: 400px; margin: 0 auto; }
.marchio { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 26px; }
.marchio canvas { width: 104px; height: 104px; }
.marchio b { font-size: 36px; font-weight: 800; letter-spacing: -.035em; margin-top: 6px; line-height: 1.1; }
.marchio small { font-size: 13px; color: #B9C8E6; margin-top: 6px; }
.marchio small span { font-family: Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .22em; color: var(--oro); margin-left: 3px; font-size: 11.5px; }
.modulo { background: #fff; color: var(--testo); border-radius: 24px; padding: 24px 22px 18px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6); }
.modulo h2 { font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.modulo .nota { margin: 4px 0 2px; }
.modulo .bottone { margin-top: 6px; }
.modulo .altri { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 12px; }

/* ---------- pagine: testata blu, schede bianche, barra in basso ---------- */
.testa { position: relative; overflow: hidden; background: var(--banner); color: #fff; padding: calc(18px + env(safe-area-inset-top)) 22px 76px; }
.testa .orbite { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.testa .riga { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 520px; margin: 0 auto; }
.testa .sopra { color: #C3D1EC; font-size: 15px; font-weight: 500; }
.testa h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin: 2px 0 0; line-height: 1.15; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25);
  display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 15px; flex: none; cursor: pointer; }
.contenuto { position: relative; max-width: 520px; margin: -58px auto 0; padding: 0 16px calc(110px + env(safe-area-inset-bottom)); }
.card { background: var(--carta); border-radius: 22px; padding: 18px; margin-bottom: 12px; box-shadow: var(--ombra); }
.sez { font-size: 16px; font-weight: 700; margin: 22px 4px 10px; display: flex; justify-content: space-between; align-items: center; color: var(--navy); }
.sez .link { font-size: 14px; padding: 0; }
.avviso { border-radius: 16px; padding: 12px 14px; font-weight: 600; font-size: 14px; margin-bottom: 12px; line-height: 1.4; }
.avviso.ok { background: var(--fondo-verde); color: var(--verde); }
.avviso.attesa { background: var(--fondo-ambra); color: var(--ambra); }
.avviso.no { background: var(--fondo-rosso); color: var(--rosso); }
.vuoto { color: var(--spento); font-size: 15px; padding: 4px 0; margin: 0; }

.tab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linea); display: flex; justify-content: space-around; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
.tab button { flex: 1; max-width: 110px; background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 600; color: var(--spento); position: relative; cursor: pointer; padding: 4px 0; }
.tab button.on { color: var(--accento); }
.tab svg { width: 25px; height: 25px; }
.badge { position: absolute; top: -2px; left: calc(50% + 6px); background: var(--rosso); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 1px 6px; }
.fab { position: fixed; right: max(18px, calc(50% - 242px)); bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 40; width: 60px; height: 60px; border: 0; border-radius: 19px;
  background: var(--banner); color: #fff; font-size: 30px; font-weight: 400; display: grid; place-items: center; box-shadow: var(--ombra-blu); cursor: pointer; }

/* ---------- Timbra ---------- */
.zona { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 7px 13px 7px 11px; border-radius: 99px; background: var(--tenue); color: var(--grigio); }
.zona i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.zona.dentro { background: var(--fondo-verde); color: var(--verde); }
.zona.fuori { background: var(--fondo-ambra); color: var(--ambra); }
.zona.no { background: var(--fondo-rosso); color: var(--rosso); }
.orologio { font-size: 56px; font-weight: 800; letter-spacing: -.045em; margin: 12px 0 0; color: var(--navy); line-height: 1.05; font-variant-numeric: tabular-nums; }
.giorno { color: var(--grigio); font-size: 15px; margin-top: 4px; }
.tasto { width: 100%; margin-top: 18px; height: 66px; border: 0; border-radius: 18px; background: var(--banner); color: #fff; font-size: 19px; font-weight: 700;
  box-shadow: var(--ombra-blu); cursor: pointer; }
.tasto:active { transform: scale(.98); }
.tasto:disabled { background: #DDE3EE; color: #8E99AE; box-shadow: none; cursor: default; transform: none; }
#esito .avviso { margin: 12px 0 0; }
.modulo > .link { display: block; margin: 10px auto 0; }

/* ---------- righe degli elenchi ---------- */
.riga-l { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--linea); }
.riga-l:first-child { border-top: 0; padding-top: 0; }
.riga-l:last-child { padding-bottom: 0; }
.icona { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--tenue); color: var(--accento); }
.icona svg { width: 20px; height: 20px; }
.riga-l .t { flex: 1; min-width: 0; }
.riga-l b { display: block; font-size: 15.5px; font-weight: 600; }
.riga-l small { display: block; color: var(--grigio); font-size: 13.5px; margin-top: 2px; line-height: 1.35; }
.riga-l:has(.azioni) { align-items: flex-start; }
.riga-l .azioni { display: flex; gap: 8px; margin-top: 10px; }
.pill { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 99px; white-space: nowrap; align-self: flex-start; margin-top: 2px; }
.pill.ok, .pill.Approvata { background: var(--fondo-verde); color: var(--verde); }
.pill.attesa, .pill.DaApprovare { background: var(--fondo-ambra); color: var(--ambra); }
.pill.no, .pill.Rifiutata { background: var(--fondo-rosso); color: var(--rosso); }
.pill.Ritirata { background: var(--linea); color: var(--grigio); }

/* ---------- Saldi ---------- */
.griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.griglia .card { margin-bottom: 0; }
.eti { font-size: 13.5px; color: var(--grigio); font-weight: 500; line-height: 1.4; }
.num { font-size: 34px; font-weight: 800; letter-spacing: -.04em; margin-top: 6px; color: var(--navy); line-height: 1.1; white-space: nowrap; }
.num small { font-size: 15px; font-weight: 600; color: var(--grigio); letter-spacing: 0; margin: 0 4px 0 3px; }
.num.verde { color: var(--verde); } .num.rosso { color: var(--rosso); }
.barretta { height: 6px; border-radius: 99px; background: var(--tenue); margin: 12px 0 8px; overflow: hidden; display: flex; }
.barretta i { display: block; height: 100%; }

/* ---------- foglio che sale dal basso ---------- */
.velo { position: fixed; inset: 0; background: rgba(7, 15, 38, .5); display: flex; align-items: flex-end; justify-content: center; z-index: 1000; }
.foglio { background: #fff; width: 100%; max-width: 520px; border-radius: 24px 24px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); max-height: 92vh; overflow: auto; }
.foglio h3 { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.scelta { display: flex; background: var(--campo); border-radius: 14px; padding: 4px; gap: 4px; }
.scelta button { flex: 1; border: 0; background: none; padding: 10px; border-radius: 11px; font-weight: 600; color: var(--grigio); cursor: pointer; }
.scelta button.attiva { background: #fff; color: var(--accento); box-shadow: 0 1px 3px rgba(14, 26, 51, .12); }

/* schede dei saldi che si toccano, e il loro dettaglio */
.tocca { cursor: pointer; }
.card.tocca:active { transform: scale(.985); }
.card .eti .freccia { float: right; font-size: 20px; line-height: 14px; color: var(--spento); }
.dettaglio { margin-top: 10px; }
.dettaglio .voce { padding: 12px 0; }
.dettaglio .voce:first-child { padding-top: 4px; }
.dettaglio .voce small { font-size: 12.5px; }
.dettaglio .valore { font-weight: 700; font-size: 16px; color: var(--accento); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dettaglio .valore.forte { color: var(--navy); font-size: 17px; font-weight: 800; }
.dettaglio .freccia { color: var(--spento); font-size: 22px; margin-left: 2px; }
.dettaglio .voce.tocca:active { background: var(--campo); }

/* più orari nello stesso permesso */
.fascia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; gap: 10px; align-items: end; }
.fascia .togli { height: 50px; border: 0; background: var(--fondo-rosso); color: var(--rosso); border-radius: 12px; font-size: 22px; cursor: pointer; }
#piuOrari { margin-top: 8px; }

/* trascina in giù per aggiornare */
.aggiorna { position: fixed; top: calc(env(safe-area-inset-top) + 8px); left: 50%; transform: translate(-50%, -50px); z-index: 2000;
  background: #fff; color: var(--accento); font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 99px; box-shadow: var(--ombra); transition: background .15s; }
.aggiorna.pronto { background: var(--accento); color: #fff; }

/* le iniziali nel menu della persona */
.iniziali { width: 48px; height: 48px; border-radius: 50%; background: var(--banner); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 17px; flex: none; }

/* saldi: un cerchio per voce, accanto la legenda */
.saldo-cerchio { display: flex; gap: 16px; align-items: center; }
.saldo-cerchio .anello { width: 116px; flex: none; }
.saldo-cerchio .anello.mezzo { width: 116px; }
.leggenda { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.leggenda .titolo { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.leggenda .titolo .freccia { color: var(--spento); margin-left: 6px; font-weight: 400; }
.leggenda > div { display: flex; align-items: center; gap: 8px; }
.leggenda > div i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.leggenda > div b { margin-left: auto; color: var(--navy); font-variant-numeric: tabular-nums; }
.leggenda .su { color: var(--grigio); font-size: 13px; margin-top: 2px; }

/* il logo dell'azienda nella testata della pagina Timbra (lo carica l'assistenza da Nettuno) */
.logo-azienda { position: relative; display: block; height: 52px; max-width: 84%; object-fit: contain; margin: 0 auto 16px; }
/* accesso: scritta a sinistra, logo dell'azienda a destra dopo una riga sottile */
.marchio-riga { display: flex; align-items: center; gap: 14px; }
.marchio-riga > div { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.marchio-riga b { font-size: 32px; }
.marchio-riga small { line-height: 1.45; }
.marchio-riga .logo-accesso { height: 46px; max-width: 132px; object-fit: contain; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .22); }
.marchio-riga.senza-logo > div { align-items: center; text-align: center; }
.marchio-riga.senza-logo b { font-size: 36px; }