/* L'app dei telefoni di Cosmo. La struttura viene dall'app di Nettuno (testata, schede, barra in basso, foglio che
   sale dal basso) ed è quella di G; l'aspetto è il sistema di Cosmo (sistema.css, letto prima di questo foglio).
   Qui solo token: nessun colore scritto, la prova V lo controlla. L'accesso e la testata delle pagine sono la notte
   di Probal (li nomina sistema.css), le schede stanno alla luce del giorno; l'indaco solo su azioni e scelte. */
* { box-sizing: border-box; }
html, body { margin: 0; }
/* sopra (barra dell'ora, rimbalzo dello scorrimento) si vede il cielo della testata; sull'accesso anche il body è di
   notte, così nel rimbalzo di iOS non affiora una striscia chiara (restyling n. 58) */
html { background: var(--cielo-notte); }
body:has(.accesso) { background: var(--cielo-notte); }
body { min-height: 100vh; font-family: var(--ui); background: var(--deep); color: var(--paper); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; font-feature-settings: "kern" 1; }
button, input, select, textarea { font: inherit; color: inherit; }
.nascosto { display: none !important; }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sale { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- pulsanti e campi: un colore pieno, angoli vivi, il campo è una riga ---------- */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--accento); border-radius: var(--raggio);
  padding: 14px 18px; font-weight: 700; cursor: pointer; background: var(--accento); color: var(--su-accento); min-height: 52px;
  transition: background var(--t-corta) var(--ease-io), border-color var(--t-corta) var(--ease-io), transform var(--t-corta) var(--ease); }
.bottone:active { transform: scale(.98); background: var(--accento-forte); border-color: var(--accento-forte); }
.bottone:disabled { opacity: .5; cursor: default; transform: none; }
.bottone.pieno { width: 100%; }
.bottone.chiaro { background: var(--accento-velo); border-color: transparent; color: var(--accento); }
.bottone.rosso { background: var(--allarme-velo); border-color: transparent; color: var(--allarme); }
.bottone.piccolo { min-height: 40px; padding: 8px 14px; font-size: 15px; }
.link { background: none; border: 0; color: var(--accento); font-weight: 600; cursor: pointer; padding: 6px 0; font-size: 15px;
  min-height: 44px; display: inline-flex; align-items: center; }   /* il tocco a 44 px (proposta 31; QA del 22/10, P5) */
.link.rosso { color: var(--allarme); }

label { display: block; font-size: 13px; font-weight: 600; color: var(--paper-dim); margin: 14px 0 6px; }
label .fac { font-weight: 500; color: var(--paper-mute); }
input, select, textarea, .campo { width: 100%; border: 0; border-bottom: 1px solid var(--rule-hi); border-radius: var(--raggio); padding: 12px 12px;
  background: var(--campo); color: var(--paper); min-height: 50px; font-size: 16px;
  transition: border-color var(--t-corta) var(--ease-io), box-shadow var(--t-corta) var(--ease-io), background var(--t-corta) var(--ease-io); }
input:focus, select:focus, textarea:focus { outline: none; background: var(--void); border-bottom-color: var(--accento); box-shadow: inset 0 -1px 0 var(--accento); }
input::placeholder, textarea::placeholder { color: var(--paper-mute); }
textarea { min-height: 76px; resize: vertical; }
.campo { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
.campo .vuoto { color: var(--paper-mute); padding: 0; }
.campo .freccia { color: var(--paper-mute); font-size: 20px; }
.campo small.sotto { display: block; color: var(--paper-mute); font-size: 13px; margin-top: 2px; }
.nota.proposta { margin: 6px 0 0; }
.dallo-studio b, .dallo-studio span { display: block; }
.dallo-studio span + span { margin-top: 4px; }
.segnato, .segnato.campo { border-bottom-color: var(--allarme); box-shadow: inset 0 -1px 0 var(--allarme); background: var(--allarme-velo); }
.due { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; }
input[type=date], input[type=time] { min-width: 0; -webkit-appearance: none; appearance: none; font-family: var(--mono); font-size: 15px; }
input[type=checkbox], input[type=radio] { accent-color: var(--accento); }
.errore { color: var(--allarme); font-size: 14px; font-weight: 600; margin-top: 10px; min-height: 1em; }
.nota { color: var(--paper-dim); font-size: 14px; line-height: 1.45; }
.gettoni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gettoni button { border: 1px solid var(--rule-mid); background: var(--void); border-radius: var(--raggio); padding: 7px 12px; font-size: 14px; font-weight: 600;
  color: var(--paper-dim); cursor: pointer; transition: border-color var(--t-corta) var(--ease-io), color var(--t-corta) var(--ease-io);
  min-height: 44px; }   /* il tocco a 44 px (proposta 31; QA del 22/10, P5) */
.gettoni button.on { background: var(--accento-velo); border-color: var(--accento); color: var(--accento); }
/* i filtri per prestazione nella scelta dell'attività: una riga sola che scorre di lato */
.gettoni.scorre { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.gettoni.scorre::-webkit-scrollbar { display: none; }
.gettoni.scorre button { flex: none; white-space: nowrap; }

/* ---------- accesso e attivazione, «Notte a lato» (R20; Tommaso, 23/10: «troppo scura», «app web C mobile B»):
   sopra il cielo col nome (.lato), di notte e più basso; sotto il modulo di giorno, sul bianco (i token del giorno glieli
   dà sistema.css), largo quanto lo schermo col contenuto al centro. La fascia scura resta sotto l'ora di iOS, che è
   bianca. Lo stesso markup dello studio (app.js) ---------- */
.accesso { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--void); color: var(--paper); }
.accesso .lato { position: relative; overflow: hidden; min-height: calc(180px + env(safe-area-inset-top)); padding: calc(30px + env(safe-area-inset-top)) 30px 26px;
  display: flex; flex-direction: column; justify-content: flex-end; background: var(--void); color: var(--paper); }
.accesso .lato .cielo { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--paper); }
.accesso .lato::before { content: ""; position: absolute; top: calc(28px + env(safe-area-inset-top)); left: 30px; width: 44px; height: 44px;
  background: url(icona.svg) center / contain no-repeat; }
.accesso .lato h1 { position: relative; margin: 0; font: 700 34px/1.05 var(--display); letter-spacing: -.035em; color: var(--paper); }
.accesso .lato h1 b { font-weight: 700; }
.accesso .lato p { position: relative; margin: 10px 0 0; font-size: 15px; color: var(--paper-dim); }
.accesso .modulo { flex: 1; width: 100%; margin: 0; background: var(--void); color: var(--paper); border: 0;
  padding: 24px max(20px, calc((100% - 380px) / 2)) calc(24px + env(safe-area-inset-bottom)); animation: riseIn var(--t-media) var(--ease); }
.accesso .modulo h2 { font: 700 22px/1.2 var(--display); letter-spacing: -.02em; margin: 0 0 4px; }
.accesso .modulo .bottone { margin-top: 14px; }
.accesso .modulo ol { padding-left: 20px; margin: 10px 0 0; line-height: 1.5; color: var(--paper-dim); font-size: 15px; }
.accesso .modulo ol li { margin-bottom: 6px; }
.accesso .modulo .riga-azioni { display: flex; gap: 8px; margin-top: 10px; }
.accesso .modulo .riga-azioni .bottone { margin-top: 0; flex: 1; }
/* il mirino del QR (n. 27, 57): la fotocamera nel quadrato, la cornice dove mettere il QR */
.mirino.acceso { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1; margin: 14px 0 4px; background: var(--cielo-notte); }
.mirino video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mirino .cornice { position: absolute; left: 15%; top: 15%; width: 70%; height: 70%; border: 3px solid var(--accento);
  box-shadow: 0 0 0 2000px var(--velo-notte); pointer-events: none; }
.attesa-giro { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--rule-mid); border-top-color: var(--accento);
  animation: gira 1s linear infinite; margin: 8px auto 14px; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- pagine: la testata di notte, le schede di giorno, la barra in basso ---------- */
.testa { position: relative; overflow: hidden; background: var(--void); color: var(--paper); border-bottom: 1px solid var(--rule);
  padding: calc(18px + env(safe-area-inset-top)) 22px 76px; }
.testa .orbite { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--paper); }
.testa .riga { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 560px; margin: 0 auto; }
.testa .sopra { color: var(--paper-dim); font-size: 15px; font-weight: 500; }
.testa h1 { font-size: 29px; font-weight: 700; letter-spacing: -.03em; margin: 2px 0 0; line-height: 1.15; }
.avatar { width: 44px; height: 44px; border-radius: var(--raggio); background: transparent; border: 1px solid var(--rule-hi);
  display: grid; place-items: center; font-weight: 700; color: var(--paper); font-size: 15px; flex: none; cursor: pointer; }
.contenuto { position: relative; max-width: 560px; margin: -58px auto 0; padding: 0 16px calc(110px + env(safe-area-inset-bottom)); }
.card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--raggio); padding: 18px; margin-bottom: 12px; }
/* i titoli delle schede e dei fogli sono h2 (n. 59): gli stessi di prima */
.card h2, .card h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--paper); }
.sez { font-size: 16px; font-weight: 700; margin: 22px 4px 10px; display: flex; justify-content: space-between; align-items: center; color: var(--paper); }
.sez small { font-weight: 600; color: var(--paper-mute); font-size: 14px; }
.avviso { border-radius: var(--raggio); padding: 12px 14px; font-weight: 600; font-size: 14px; margin-bottom: 12px; line-height: 1.4; }
.avviso.ok { background: var(--ok-velo); color: var(--ok); }
.avviso.attesa { background: var(--attesa-velo); color: var(--attesa); }
.avviso.no { background: var(--allarme-velo); color: var(--allarme); }
.avviso.info { background: var(--accento-velo); color: var(--accento); }
.vuoto { color: var(--paper-mute); font-size: 15px; padding: 4px 0; margin: 0; }

.tab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--void); border-top: 1px solid var(--rule);
  display: flex; justify-content: space-around; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
.tab button { flex: 1; max-width: 120px; background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 600; color: var(--paper-mute); position: relative; cursor: pointer; padding: 4px 0;
  transition: color var(--t-corta) var(--ease-io); }
.tab button.on { color: var(--accento); }
.tab svg { width: 24px; height: 24px; }
/* il segnaposto del numerino («badge-ore», «badge-avvisi», col numerino dentro o vuoto) non fa scatola: altrimenti
   aggiunge lo spazio della colonna e l'icona scende di 3 px rispetto a «Inserisci», che non ce l'ha (Q-P4) */
.tab button > span { display: contents; }
.badge { position: absolute; top: -2px; left: calc(50% + 6px); background: var(--allarme); color: var(--su-stato); font-size: 10.5px; font-weight: 700;
  border-radius: var(--raggio); padding: 1px 5px; font-variant-numeric: tabular-nums; }

/* ---------- righe degli elenchi ---------- */
.riga-l { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--rule); }
.riga-l:first-child { border-top: 0; padding-top: 0; }
.riga-l:last-child { padding-bottom: 0; }
.riga-l .t { flex: 1; min-width: 0; }
.riga-l b { display: block; font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.riga-l small { display: block; color: var(--paper-mute); font-size: 13.5px; margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
.riga-l small.male { color: var(--allarme); font-weight: 600; }
/* le durate del telefono sono a parole («2 h», «30 min»): Manrope con le cifre a larghezza fissa, non il mono */
.riga-l .durata { font-weight: 700; color: var(--paper); white-space: nowrap; font-variant-numeric: tabular-nums; }
.riga-l .azioni { display: flex; gap: 14px; margin-top: 6px; }
.riga-l.tocca { cursor: pointer; }
.riga-l .togli { border: 0; background: var(--campo); color: var(--paper-dim); width: 34px; height: 34px; border-radius: var(--raggio); font-size: 20px; cursor: pointer; flex: none; }
/* lo stato: un fondo appena colorato, il punto e la parola */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: var(--raggio); white-space: nowrap; margin-top: 6px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: var(--raggio); background: currentColor; flex: none; }
.pill.ok { background: var(--ok-velo); color: var(--ok); }
.pill.attesa { background: var(--attesa-velo); color: var(--attesa); }
.pill.no { background: var(--allarme-velo); color: var(--allarme); }
.pill.info { background: var(--accento-velo); color: var(--accento); }
.giorno-tit { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--paper-mute); margin: 0 0 10px; }
/* il totale del giorno («1 h») non va in maiuscolo come il giorno (G, Le mie ore) */
.giorno-tit span + span { text-transform: none; }
h2.sez { margin: 22px 4px 10px; }
/* le date e le ore dei dati, come nello studio (n. 29, 55) */
.dato { font-family: var(--mono); font-size: .92em; font-variant-numeric: tabular-nums; }

/* ---------- la Settimana (n. 27, 55): le classi della Settimana dello studio (B), niente stili scritti dal codice ---------- */
.settimana { padding: 14px 12px; }
.sett-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sett-nav b { flex: 1; text-align: center; font: 600 14px var(--mono); }
.sett { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sett col.g { width: 35px; }
.sett col.tot { width: 46px; }
.sett thead th { padding-bottom: 6px; font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--paper-dim); }
.sett thead th.cliente { text-align: left; font-weight: 600; color: var(--paper-mute); }
.sett thead th.senza-orario { color: var(--paper-mute); }
.sett thead th.oggi { color: var(--accento); }
.sett thead th span { font: 500 12px var(--mono); }
.sett tbody th { text-align: left; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-right: 6px; border-top: 1px solid var(--rule); }
.sett td { padding: 0; text-align: center; font: 13px var(--mono); border-top: 1px solid var(--rule); }
.sett td.num { padding: 9px 0; }
.sett td.tot, .sett tfoot tr.totale > * { font-weight: 700; }
.sett tfoot tr.totale > * { border-top: 2px solid var(--rule-mid); }
.sett tfoot th { text-align: left; font-size: 13.5px; }
.sett tfoot tr.previste > * { border-top: 0; color: var(--paper-mute); font-size: 12px; font-weight: 600; }
.q-sotto { background: var(--allarme-velo); color: var(--allarme); }
.q-ok { background: var(--ok-velo); color: var(--ok); }
.q-sopra { background: var(--attesa-velo); color: var(--attesa); }
.cella-ore { all: unset; box-sizing: border-box; display: block; width: 100%; min-height: 42px; padding: 11px 0; text-align: center;
  cursor: pointer; font: 13px var(--mono); color: var(--paper); }
.cella-ore:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }
.cella-ore.da-inviare { text-decoration: underline dotted var(--accento); text-underline-offset: 4px; }
.cella-ore .punto { color: var(--rule-hi); }
.sett-azioni { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.legenda { margin: 10px 2px 0; font-size: 13px; color: var(--paper-dim); }
.legenda span { white-space: nowrap; margin-right: 10px; }
.legenda i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: middle; }
.legenda i.q-sotto { outline: 1px solid var(--allarme); }
.legenda i.q-ok { outline: 1px solid var(--ok); }
.legenda i.q-sopra { outline: 1px solid var(--attesa); }

/* ---------- foglio che sale dal basso ---------- */
.velo { position: fixed; inset: 0; background: var(--velo-notte); display: flex; align-items: flex-end; justify-content: center; z-index: 1000; }
.foglio { background: var(--void); width: 100%; max-width: 560px; border-radius: var(--raggio); border-top: 1px solid var(--rule);
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); max-height: 92vh; overflow: auto; box-shadow: var(--ombra-sopra);
  animation: sale var(--t-media) var(--ease); }
.foglio h2, .foglio h3 { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--paper); }
.foglio .bottone { margin-top: 14px; }
.scelte { margin-top: 10px; min-height: 40vh; max-height: 56vh; overflow: auto; }
.scelte button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 12px 4px; border-top: 1px solid var(--rule); cursor: pointer; }
.scelte button:first-child { border-top: 0; }
.scelte button:active { background: var(--velo-2); }
.scelte button b { display: block; font-weight: 600; }
.scelte button small { display: block; color: var(--paper-mute); font-size: 13px; margin-top: 2px; }
.scelte .gruppo { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-mute); margin: 12px 4px 2px; }

/* 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: var(--void); color: var(--accento); font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: var(--raggio);
  border: 1px solid var(--rule); box-shadow: var(--ombra-sopra); transition: background var(--t-corta) var(--ease-io), color var(--t-corta) var(--ease-io); }
.aggiorna.pronto { background: var(--accento); color: var(--su-accento); }
.iniziali { width: 48px; height: 48px; border-radius: var(--raggio); background: var(--accento); color: var(--su-accento); display: grid; place-items: center;
  font-weight: 700; font-size: 17px; flex: none; }

/* pezzi piccoli dell'app (niente stili scritti nelle pagine: vanno bene anche con una CSP severa) */
.in-riga { vertical-align: -3px; }
#msg-prepara, .cerca, .dopo-titolo { margin-top: 10px; }
.nota.piede { margin: 10px 2px 0; }
.riga-l b.leggero { font-weight: 500; }
.persona { display: flex; gap: 14px; align-items: center; }
.persona b { font-size: 18px; }
#scollega { display: block; margin: 14px auto 0; }

/* il riepilogo del vocale e del messaggio, con le domande da chiudere prima di inviare (R14) */
.citato { font-style: italic; margin: 6px 0 10px; color: var(--paper-dim); }
.voce-riga { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 12px; }
.voce-riga .riga-l { border-top: 0; padding: 0; }
/* ogni campo della riga del vocale si tocca e si cambia (Tommaso, 22/10) */
.voce-campo { min-height: 46px; padding: 8px 4px; border-radius: 0; border-bottom: 0; border-top: 1px solid var(--rule); background: none; }
.voce-campo:first-child { border-top: 0; }
.voce-campo:active { background: var(--velo-2); }
.voce-campo .etichetta { flex: none; width: 78px; color: var(--paper-mute); font-size: 13px; font-weight: 600; }
.voce-campo .valore { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.voce-campo .valore.manca { color: var(--attesa); }
.scelte.poche { min-height: 0; }
.domanda { background: var(--attesa-velo); border-radius: var(--raggio); padding: 10px 12px; margin-top: 10px; }
.domanda p { margin: 0 0 4px; font-weight: 600; color: var(--attesa); font-size: 14px; }
.domanda select, .domanda input { margin-top: 8px; background: var(--void); }
.gettoni button small { font-weight: 500; color: var(--paper-mute); }
.azioni-foglio { display: flex; justify-content: space-between; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .attesa-giro { animation: gira 3s linear infinite !important; }
}