/* ══════════════════════════════════════════════════════════════════
   SISTEMA PRENOTAZIONE — stessi token del sito
   petrolio #3E8B93 · teal #76C8BD · nero #0a0a0a · superficie #111
   angoli NETTI, hairline rgba(255,252,252,.08), Cormorant 300 + Inter
   ══════════════════════════════════════════════════════════════════ */
.rl{position:fixed;inset:0;z-index:900;display:flex;font-family:'Inter',system-ui,sans-serif}
.rl-ov{position:absolute;inset:0;background:rgba(10,10,10,.88);animation:rlIn .25s ease-out}
/* Le animazioni partono da uno stato GIA' visibile e quasi in posizione.
   Se il browser sospende il clock (iframe, tab in background, pagina non ancora
   "visibile"), il pannello resta comunque a schermo invece di finire bloccato
   fuori dal bordo inferiore. Non riportarle a translateY(100%). */
@keyframes rlIn{from{opacity:.72}to{opacity:1}}
@keyframes rlUp{from{transform:translateY(14px);opacity:.72}to{transform:translateY(0);opacity:1}}
@keyframes rlSheet{from{transform:translateY(22px);opacity:.72}to{transform:translateY(0);opacity:1}}
.rl-x{position:absolute;top:20px;right:20px;z-index:3;background:none;border:1px solid rgba(255,252,252,.16);
  color:rgba(255,252,252,.7);width:38px;height:38px;cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:all .2s}
.rl-x:hover{border-color:#76C8BD;color:#76C8BD}

/* ── corpo comune ── */
.rl-body{font-size:14px;line-height:1.65;color:rgba(255,252,252,.7)}
.rl-ovl{display:block;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#76C8BD;font-weight:500}
.rl-h{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:300;line-height:1.05;
  letter-spacing:-.02em;color:#fffcfc;margin:14px 0 10px}
.rl-h em{color:#76C8BD;font-style:italic}
.rl-h2{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:400;line-height:1.15;
  color:#fffcfc;margin:0 0 6px}
.rl-lead{font-size:14px;line-height:1.7;color:rgba(255,252,252,.7);margin-bottom:26px;max-width:52ch}

/* ── avanti / indietro ── */
.rl-nav{display:flex;gap:10px;align-items:center;margin-top:28px}
.rl-btn{display:inline-block;padding:15px 30px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;border:1px solid transparent;cursor:pointer;transition:all .2s;background:none;
  font-family:'Inter',system-ui,sans-serif;text-align:center}
.rl-p{background:#3E8B93;color:#fffcfc;border-color:#3E8B93;flex:1}
.rl-p:hover{background:#76C8BD;border-color:#76C8BD;color:#0a0a0a}
.rl-o{border-color:rgba(118,200,189,.5);color:#76C8BD}
.rl-o:hover{background:#76C8BD;border-color:#76C8BD;color:#0a0a0a}
.rl-g{border-color:rgba(255,252,252,.14);color:rgba(255,252,252,.6)}
.rl-g:hover{border-color:rgba(255,252,252,.4);color:#fffcfc}
.rl-btn:disabled{opacity:.3;cursor:not-allowed}
.rl-btn:disabled:hover{background:#3E8B93;border-color:#3E8B93;color:#fffcfc}
.rl-btn.rl-o:disabled:hover,.rl-btn.rl-g:disabled:hover{background:none;color:inherit}

/* ── progresso passi ── */
.rl-prog{display:flex;gap:5px;margin-bottom:26px}
.rl-prog i{flex:1;height:2px;background:rgba(255,252,252,.12);display:block}
.rl-prog i.on{background:#3E8B93}
.rl-prog i.cur{background:#76C8BD}
.rl-passo{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,252,252,.4);
  margin-bottom:10px;font-weight:500}

/* ── scelta pacchetto ── */
.rl-pk{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;width:100%;
  text-align:left;background:none;border:1px solid rgba(255,252,252,.08);padding:22px 20px;cursor:pointer;
  transition:border-color .2s,background .2s;margin-bottom:8px;color:#fffcfc;font-family:inherit}
.rl-pk:hover{border-color:rgba(118,200,189,.5);background:rgba(62,139,147,.05)}
.rl-pk.on{border-color:#76C8BD;background:rgba(62,139,147,.1)}
.rl-pk-l{min-width:0}
.rl-pk-n{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:400;line-height:1.1;
  color:#fffcfc;display:block;margin-bottom:5px}
.rl-pk-d{font-size:12px;line-height:1.55;color:rgba(255,252,252,.55);display:block}
.rl-pk-r{text-align:right;flex-shrink:0}
.rl-pk-p{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:#76C8BD;line-height:1}
.rl-pk-s{font-size:11px;color:rgba(255,252,252,.5);display:block;margin-top:3px}

/* ── riepilogo / totale ── */
.rl-sum{border:1px solid rgba(255,252,252,.08);background:#0f0f0f;padding:20px;margin-bottom:26px}
.rl-row{display:flex;justify-content:space-between;gap:16px;font-size:13px;padding:7px 0;
  color:rgba(255,252,252,.7)}
.rl-row span:first-child{color:rgba(255,252,252,.5)}
.rl-row b{color:#fffcfc;font-weight:500;text-align:right}
.rl-tot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-top:1px solid rgba(255,252,252,.08);margin-top:12px;padding-top:14px}
.rl-tot-l{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,252,252,.5)}
.rl-tot-v{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:300;color:#76C8BD;line-height:1}
.rl-acc{font-size:12.5px;color:#76C8BD;font-weight:500;margin-top:6px;text-align:right}

/* ── calendario ── */
.rl-calhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;
  border-bottom:1px solid rgba(255,252,252,.08);padding-bottom:12px}
.rl-mese{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;color:#fffcfc;text-transform:capitalize}
.rl-arrow{background:none;border:1px solid rgba(255,252,252,.14);color:rgba(255,252,252,.7);width:34px;height:34px;
  cursor:pointer;font-size:13px;transition:all .2s;display:flex;align-items:center;justify-content:center}
.rl-arrow:hover:not(:disabled){border-color:#76C8BD;color:#76C8BD}
.rl-arrow:disabled{opacity:.25;cursor:not-allowed}
.rl-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:22px}
.rl-wd{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,252,252,.4);
  text-align:center;padding:6px 0;font-weight:600}
.rl-day{aspect-ratio:1;border:1px solid rgba(255,252,252,.08);background:none;color:#fffcfc;
  font:500 13px/1 'Inter',system-ui;cursor:pointer;transition:all .15s;padding:0;position:relative}
.rl-day:hover:not(:disabled){border-color:#76C8BD}
.rl-day:disabled{color:rgba(255,252,252,.16);border-color:rgba(255,252,252,.04);cursor:not-allowed;background:none}
.rl-day.sel{background:#3E8B93;border-color:#3E8B93;color:#fffcfc}
.rl-day.oggi{border-color:rgba(118,200,189,.5)}
.rl-day.pieno{color:rgba(255,252,252,.22);background:rgba(255,252,252,.02);cursor:not-allowed}
.rl-day.pieno::after{content:"";position:absolute;left:50%;bottom:5px;width:3px;height:3px;
  background:rgba(118,200,189,.45);border-radius:50%;transform:translateX(-50%)}
.rl-vuoto{border:none;background:none}

/* ── slot ── */
.rl-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;margin-bottom:8px}
.rl-slot{padding:13px 6px;font:500 13px/1 'Inter',system-ui;border:1px solid rgba(118,200,189,.35);
  background:none;color:#fffcfc;cursor:pointer;transition:all .15s}
.rl-slot:hover:not(:disabled){background:rgba(62,139,147,.18)}
.rl-slot.sel{background:#3E8B93;border-color:#3E8B93}
.rl-slot:disabled{border-color:rgba(255,252,252,.06);color:rgba(255,252,252,.2);cursor:not-allowed;
  text-decoration:line-through}
.rl-nota{font-size:12px;line-height:1.6;color:#76C8BD;font-weight:500;margin-top:14px;
  border-left:1px solid #3E8B93;padding-left:12px}
.rl-vuoto-txt{font-size:13px;color:rgba(255,252,252,.5);padding:22px 0;text-align:center}

/* ── form ── */
.rl-f{margin-bottom:18px}
.rl-f label{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,252,252,.5);margin-bottom:8px;font-weight:600}
.rl-f input,.rl-f textarea{width:100%;box-sizing:border-box;background:#0f0f0f;
  border:1px solid rgba(255,252,252,.1);color:#fffcfc;font:400 15px/1.5 'Inter',system-ui;
  padding:14px 15px;transition:border-color .2s}
.rl-f input:focus,.rl-f textarea:focus{border-color:#76C8BD;outline:none}
.rl-f input.err,.rl-f textarea.err{border-color:#76C8BD}
.rl-f textarea{resize:vertical;min-height:84px}
.rl-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin-bottom:20px;
  border:1px solid rgba(255,252,252,.08);padding:16px}
.rl-check input{width:17px;height:17px;accent-color:#76C8BD;flex-shrink:0;margin-top:1px}
.rl-check span{font-size:12.5px;line-height:1.6;color:rgba(255,252,252,.7)}
.rl-check a{color:#76C8BD}

/* ── pagamento ── */
.rl-paga{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.rl-meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,252,252,.4);margin-bottom:8px}
.rl-iban{font-size:15px;color:#fffcfc;border:1px dashed rgba(118,200,189,.4);padding:14px;
  word-break:break-all;font-weight:500;margin:12px 0}
.rl-errore{border:1px solid #76C8BD;background:rgba(62,139,147,.1);padding:14px 16px;font-size:13px;
  line-height:1.6;color:#76C8BD;margin-bottom:16px}
.rl-ok{border:1px solid #76C8BD;padding:24px;text-align:center;margin-bottom:22px}
.rl-ok-c{font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:300;color:#76C8BD;
  letter-spacing:.04em;line-height:1}
.rl-ok-l{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,252,252,.5);
  margin-top:10px;font-weight:600}
.rl-pol{font-size:11.5px;line-height:1.7;color:rgba(255,252,252,.45);border-top:1px solid rgba(255,252,252,.08);
  padding-top:16px;margin-top:22px}
.rl-pol b{color:rgba(255,252,252,.75);font-weight:500}
.rl-wa{display:block;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#76C8BD;border-bottom:1px solid rgba(118,200,189,.4);padding-bottom:6px;margin-top:22px;
  text-decoration:none;font-weight:600}
.rl-wa:hover{color:#fffcfc;border-color:#fffcfc}

/* ══ VARIANTE A · FOGLIO (bottom-sheet, mobile-first) ══ */
.rl.v-sheet{align-items:flex-end;justify-content:center}
.v-sheet .rl-panel{position:relative;background:#111;border-top:1px solid rgba(255,252,252,.1);
  width:100%;max-width:680px;max-height:94vh;display:flex;flex-direction:column;
  border-radius:22px 22px 0 0;animation:rlSheet .38s cubic-bezier(.2,.9,.2,1);
  box-shadow:0 -30px 70px rgba(0,0,0,.6)}
.v-sheet .rl-grab{width:38px;height:3px;background:rgba(118,200,189,.4);border-radius:2px;
  margin:12px auto 4px;flex-shrink:0}
.v-sheet .rl-scroll{overflow-y:auto;padding:14px 30px 34px}
.v-sheet .rl-x{top:14px;right:14px;width:32px;height:32px;border:none;font-size:14px}

/* ══ VARIANTE B · MODALE (centrata, desktop) ══ */
.rl.v-modale{align-items:center;justify-content:center;padding:24px}
.v-modale .rl-panel{position:relative;background:#111;border:1px solid rgba(255,252,252,.1);
  width:100%;max-width:640px;max-height:90vh;display:flex;flex-direction:column;
  animation:rlUp .3s cubic-bezier(.2,.9,.2,1);box-shadow:0 40px 90px rgba(0,0,0,.7)}
.v-modale .rl-scroll{overflow-y:auto;padding:40px 44px 44px}
.v-modale .rl-h{font-size:40px}

/* ══ VARIANTE C · WIZARD (schermo intero) ══ */
.rl.v-wizard{background:#0a0a0a;align-items:stretch;justify-content:center}
.v-wizard .rl-ov{display:none}
.v-wizard .rl-panel{position:relative;background:#0a0a0a;width:100%;max-width:1080px;
  display:flex;flex-direction:column;animation:rlIn .3s ease-out}
.v-wizard .rl-scroll{overflow-y:auto;padding:52px 56px 120px;flex:1}
.v-wizard .rl-x{top:34px;right:56px}
.v-wizard .rl-h{font-size:clamp(38px,5vw,60px);margin:18px 0 14px}
.v-wizard .rl-lead{font-size:16px;max-width:60ch;margin-bottom:36px}
.v-wizard .rl-h2{font-size:30px}
.v-wizard .rl-prog{max-width:420px;margin-bottom:34px}
.v-wizard .rl-pk{padding:26px 24px;margin-bottom:10px}
.v-wizard .rl-pk-n{font-size:28px}
.v-wizard .rl-slots{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.v-wizard .rl-slot{padding:17px 6px;font-size:14px}
.v-wizard .rl-nav{position:fixed;left:0;right:0;bottom:0;background:rgba(10,10,10,.94);
  border-top:1px solid rgba(255,252,252,.08);padding:18px 56px;margin:0;max-width:1080px;
  margin-left:auto;margin-right:auto;justify-content:flex-end;z-index:4}
.v-wizard .rl-nav .rl-p{flex:0 0 auto;min-width:240px}
.v-wizard .rl-cal{max-width:560px}
.v-wizard .rl-slots{max-width:760px}

@media (max-width:900px){
  .rl.v-modale{padding:0}
  .v-modale .rl-panel{max-width:none;max-height:100vh;height:100%;border:none}
  .v-modale .rl-scroll{padding:36px 22px 40px}
  .v-modale .rl-h{font-size:33px}
  .rl-h{font-size:31px}
  .v-wizard .rl-scroll{padding:34px 22px 130px}
  .v-wizard .rl-x{top:18px;right:20px}
  .v-wizard .rl-nav{padding:14px 20px;justify-content:stretch}
  .v-wizard .rl-nav .rl-p{min-width:0;flex:1}
  .rl-slots{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
  .v-sheet .rl-scroll{padding:14px 22px 34px}
}
@media (max-width:560px){
  /* tap target: sul telefono la freccia del mese era 34px, sotto il minimo
     comodo per il dito (44px). La porto a 44. */
  .rl-arrow{width:44px;height:44px;font-size:15px}
  .rl-slot{padding:15px 4px}
  /* il passo 3 ha molti campi: su schermo stretto li tengo a una colonna
     e riduco i margini laterali, così i campi restano comodi */
  .rl-campi-grid{grid-template-columns:1fr;gap:0}
  .rl-2col{grid-template-columns:1fr}
  .rl-pk{flex-direction:column;gap:12px;padding:20px 18px}
  .rl-pk-r{text-align:left}
  .rl-tot-v{font-size:34px}
}
/* la pagina reale scorre dietro: nessuno scroll quando il pop-up è aperto */
body.rl-lock{overflow:hidden}

/* ── scelta studio / esterno ── */
.rl-scelta{display:flex;border:1px solid rgba(255,252,252,.12)}
.rl-opt{flex:1;background:none;border:none;color:rgba(255,252,252,.6);padding:14px 8px;
  font:600 10.5px/1 'Inter',system-ui;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:all .2s;font-family:inherit}
.rl-opt+.rl-opt{border-left:1px solid rgba(255,252,252,.12)}
.rl-opt:hover{color:#76C8BD}
.rl-opt.on{background:#3E8B93;color:#fffcfc}
.rl-f .rl-scelta input{display:none}

/* ── selettore palette: ogni bottone mostra i toni reali del set ──
   Serve a maternity, dove il cliente sceglie un set cromatico.
   I toni vengono dalla pagina, non sono inventati. */
.rl-pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.rl-pal-opt{background:none;border:1px solid rgba(255,252,252,.12);cursor:pointer;
  padding:10px 8px;display:flex;flex-direction:column;gap:8px;align-items:center;
  transition:border-color .2s,background .2s;font-family:inherit}
.rl-pal-opt:hover{border-color:rgba(118,200,189,.5)}
.rl-pal-opt.on{border-color:#76C8BD;background:rgba(62,139,147,.12)}
.rl-pal-toni{display:flex;width:100%;height:26px;overflow:hidden}
.rl-pal-toni i{flex:1;display:block}
.rl-pal-opt.altro .rl-pal-toni i{background:rgba(255,252,252,.14)}
.rl-pal-opt.altro .rl-pal-toni i:nth-child(2){background:rgba(255,252,252,.24)}
.rl-pal-opt.altro .rl-pal-toni i:nth-child(3){background:rgba(118,200,189,.4)}
.rl-pal-nome{font-size:11px;letter-spacing:.06em;color:rgba(255,252,252,.8);
  text-align:center;line-height:1.3;font-weight:500}
.rl-pal-opt.on .rl-pal-nome{color:#fffcfc}
#rl-pal-nota{margin-top:10px}
@media (max-width:560px){
  .rl-pal{grid-template-columns:repeat(2,1fr)}
}

/* ── campo orario: dalle / alle (serve a /eventi) ── */
.rl-orario{display:flex;align-items:center;gap:10px}
.rl-orario input{flex:1;min-width:0}
.rl-orario input[type="time"]{color-scheme:dark}
.rl-orario-sep{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,252,252,.45);font-weight:600;flex-shrink:0}

/* ── blocco liberatoria (passo 5) ── */
.rl-lib{border:1px solid rgba(118,200,189,.4);padding:20px;margin-top:22px;background:rgba(62,139,147,.05)}
.rl-lib .rl-btn{width:100%}

/* ══ SU DESKTOP il foglio non resta incollato in basso ══
   Su mobile il bottom-sheet è il pattern giusto (il pollice arriva in basso).
   Su desktop no: il pannello si centra verticalmente, come una modale,
   e perde grabber e angoli arrotondati che sono segnali da mobile. */
/* ══ DESKTOP · DUE COLONNE ══
   Su schermo largo la finestra è larga e bassa (es. 1281×743): usare solo la
   verticale obbliga a scorrere. Con due colonne il contenuto entra tutto
   senza scorrere, ed è il motivo per cui il pannello si allarga. */
@media (min-width: 901px){
  .rl.v-sheet{align-items:center;justify-content:center;padding:20px}
  .rl.v-sheet .rl-panel{max-width:1060px;border:1px solid rgba(255,252,252,.1);
    max-height:95vh;box-shadow:0 40px 90px rgba(0,0,0,.7)}
  /* la barra di avanzamento già dice a che passo siamo: su desktop l'etichetta
     "passo 3 di 4" è ridondante e occupa la riga che ci manca */
  .rl-passo{display:none}
  .v-sheet .rl-panel{border-radius:0}
  .v-sheet .rl-grab{display:none}
  .v-sheet .rl-scroll{padding:24px 40px 26px}
  .v-sheet .rl-x{top:14px;right:14px;width:34px;height:34px;border:1px solid rgba(255,252,252,.16);font-size:14px}
  .v-sheet .rl-h{font-size:38px}
  .rl.v-modale .rl-panel{max-width:1060px}
  .v-wizard .rl-panel{max-width:1160px}

  /* la griglia a due colonne: colonna sinistra = contenuto, destra = riepilogo/azioni */
  .rl-2col{display:grid;grid-template-columns:1fr 400px;gap:0;align-items:start}
  .rl-2col > .rl-col-r{border-left:1px solid rgba(255,252,252,.08);padding-left:38px;margin-left:38px}
  /* la testata resta a tutta larghezza sopra le colonne */
  .rl-2col > .rl-col-r{margin-top:0}

  /* passo 1: i pacchetti in due colonne invece che impilati */
  .rl-pks-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .rl-pks-grid .rl-pk{margin-bottom:0;height:100%}

  /* passo 3: i campi brevi su due colonne, i testi lunghi a tutta larghezza */
  .rl-campi-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
  .rl-campi-grid .rl-f.largo{grid-column:1 / -1}
  .rl-campi-grid .rl-f textarea{min-height:52px}

  /* spaziature più strette: guadagnare altezza conta più della comodità */
  .rl-h{font-size:30px;margin:8px 0 6px}
  .rl-lead{margin-bottom:12px}
  .rl-prog{margin-bottom:14px}
  .rl-f{margin-bottom:10px}
  .rl-f label{margin-bottom:5px}
  .rl-f input,.rl-f textarea{padding:9px 12px;font-size:14px}
  .rl-f textarea{min-height:48px}
  .rl-passo{margin-bottom:6px}
  .rl-check{padding:11px;margin-bottom:10px}
  .rl-check span{font-size:12px;line-height:1.5}
  .rl-scelta .rl-opt{padding:11px 8px}
  .rl-pal-opt{padding:8px 6px;gap:6px}
  .rl-pal-toni{height:20px}
  .rl-nav{margin-top:14px}
  .rl-btn{padding:12px 22px}
  .rl-sum{padding:14px 16px;margin-bottom:12px}
  .rl-row{padding:5px 0}
  .rl-tot-v{font-size:30px}
  .rl-tot{margin-top:8px;padding-top:10px}
  .rl-acc{margin-top:4px}
  /* nel passo 4 il riepilogo e i pulsanti stanno nella colonna destra:
     le due colonne sono già alte di loro, qui serve solo togliere il superfluo */
  .rl-pol{margin-top:12px;padding-top:10px;font-size:11px;line-height:1.6}
  .rl-wa{margin-top:12px;padding-bottom:4px}
  .rl-ok{padding:16px}
  .rl-ok-c{font-size:34px}
  .rl-cal{margin-bottom:14px}
  /* il calendario è la voce più alta: con aspect-ratio:1 le celle diventano
     enormi nelle colonne larghe. Su desktop le fisso, così entra tutto. */
  .rl-day{font-size:12px;aspect-ratio:auto;height:42px}
  .rl-wd{padding:4px 0}
  .rl-calhead{padding-bottom:8px;margin-bottom:12px}
  .rl-slots{gap:5px}
  .rl-vuoto-txt{padding:12px 0}
  .rl-slot{padding:10px 4px;font-size:12.5px}
  .rl-pk{padding:16px 16px}
  .rl-pk-n{font-size:20px}
  .rl-pk-p{font-size:24px}
  .rl-lib{padding:14px 16px;margin-top:16px}
  .rl-pol{margin-top:16px;padding-top:12px}
  .rl-wa{margin-top:16px}
}

/* ── SCHERMI MOLTO STRETTI (iPhone SE e simili, 320-380px) ──
   A 320px le celle del calendario scendevano a 32px, sotto il minimo comodo
   per il dito. Con gap e padding ridotti risalgono: l'altezza la fisso a 44. */
@media (max-width:380px){
  .rl.v-sheet .rl-scroll,
  .v-sheet .rl-scroll,
  .v-modale .rl-scroll{padding-left:14px;padding-right:14px}
  .rl-cal{gap:2px}
  .rl-day{height:44px;font-size:12px}
  .rl-cal .rl-wd{font-size:9px;letter-spacing:0;padding:4px 0}
  .rl-slots{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:5px}
  .rl-orario{gap:6px}
  .rl-orario-sep{font-size:10px;letter-spacing:.08em}
  .rl-h{font-size:27px}
  .rl-lead{font-size:13.5px}
  /* 16px evita lo zoom automatico di iOS quando si tocca un campo */
  .rl-f input,.rl-f textarea{font-size:16px}
  .rl-pal{grid-template-columns:repeat(2,1fr);gap:5px}
  .rl-pal-opt{padding:7px 5px}
  .rl-pk{padding:16px 14px}
  .rl-lib{padding:16px 14px}
}